It’s challenging to write a technical post-mortem without betraying your ignorance. Making a portfolio website in ReactJS might have never been a good idea in the first place. But hopefully you’ll learn something from this blog post, and hopefully I’ll have gained a better understanding of the web stack by writing this all out.

I chose React because I was attracted to the idea of a templating language with integrated JavaScript functionality. An example use case would be to allow users to click tags on my resume page and have all mentions of the word on the page light up. This can be done in raw JavaScript, but I thought React could make it cleaner, more integrated, and faster.

resume tags

How tags worked on my old React site

React isn’t just a templating engine. It’s a powerful UI rendering platform that hooks easily into Node servers with databases and can quickly handle complex changes to the DOM. It’s set up for single-page apps, and making a static site requires extra setup. These factors did not line up with my needs for making a portfolio site.

You’ll hear that React plays nice with other web components, so it’s not an all or nothing solution. But I think this is more applicable in a professional environment. As a hobbyist who wants to host my JavaScript games as I continue to work on them, the integration process appeared to be a bit messy, since React generates the entire website and doesn’t allow for adding raw HTML as far as I’m aware.

In the end, the only real benefit I received from using React was using JSX. JSX felt good to use, having the full power of JavaScript when templating makes the possibilities seem endless, and I was happy with the code I wrote… at the time.

<div className="project-tags">
  this.props.tags.map((val, idx) => 
    <button 
      key={ val } 
      className="project-tag"
      style={{ borderBottom: "2px solid " + this.tagColors[val] }} 
      onClick={() => this.props.onTagClick(val)}>
      { val }
    </button>
  );
</div>

JSX for displaying the colored tags on the resume page

My desire to host a blog and my doubt towards hosting JavaScript games led me to Jekyll which comes with it’s own blog engine. Hosting a JavaScript game or any arbitrary page in Jekyll is as easy as dropping it in a folder in the root. This is great because I prefer hosting games using git modules which makes it easy to keep them updated. // <- word choice

What I didn’t realize is how elegant and powerful Jekyll’s templating system is. Markdown allows you to write expressive pages and blog posts. Liquid, Jekyll’s templating language, keeps your data clean and easy to access and loop through and is integrated seamlessly into your html files. The file/folder structure makes it easy to structure your site and share components between pages as well.

<div class="project-tags">
  {% for tag in project.tags %}
    <span 
      class="project-tag" 
      style="border-top: 3px solid {{ page.tag-colors[tag] }}">
      {{ tag }}
    </span>
  {% endfor %}
</div>

Resume tags layout code in HTML and Liquid

As I converted my React code to Jekyll’s system, I was struck with how much cleaner my code was. My data was cleanly separated from the rendering and both looked good. I heard a lot of strong arguments from React evangalists about how separating html and js etc. was unnatural and unnecessary. But for this use case, my code is a hundred times easier to navigate and add to. I also found that I was happy to keep my JavaScript separate, since my small scope didn’t really benefit too much from having it integrated.

Speaking of, you may have noticed that my resume tags are not buttons anymore. Someday I might re-implement their highlighting feature, but I’m not in a rush.

In conclusion, if you’re making a portfolio website, I’d strongly recommend Jekyll. It’s flexible, it’s a lot easier now to setup on Windows with Bash, and it’s easy to deploy on Github! (Well, easy as any other Linux installation process. Get ready to hunt for libraries and fix your version numbers!)

View this site’s source on GitHub