Post

Case Study: My Portfolio Site

Reflecting on my portfolio site: glennlaursen.tech

Posted Updated
By Glenn Laursen
views 3 min read
Case Study: My Portfolio Site

My resume + portfolio static Jekyll site built on Docker-containerized Ruby with Liquid templates for scripted insertion of YAML data into Markdown pages. Deployed on Netlify for CI/CD through GitHub.

Overview

Tech Stack

Motivation

I want a central location on the internet to control and broadcast my presence and demonstrate my skills as a developer and technical writer. I wanted to keep it simple-ish so I went with a static site framework for simplicity and rendering speed.

Features and Functionality

Technical Choices

  • Chose Jekyll as the static site generator because of its commonality and well-established themes and extensions ecosystem. Decided to use Chirpy theme for Jekyll because it comes with search, a pretty default appearance, Mermaid and LaTeX support, structured JSON for SEO, and other awesome features, following the “lazy developer” manifesto

  • Leveraged Dev Containers for a portable, isolated, and programmatically configured dev environment. Specifying extensions for my editor through devcontainer.json made it clear what extensions were applied to which file types and allowed me to get Liquid syntax highlighting and formatting.

  • Implemented custom SASS for structured and maintainable CSS. I made customizations of the default Chirpy theme to add the Farcaster social button, and my Liquid template for auto-generated resume skill tags.

  • I was familiar with Markdown before starting this project but YAML, SASS, and Ruby + Jekyll were new to me.

Challenges and Solutions

  1. New language and development environment for Ruby - I leveraged Dev Containers and a customized Dockerfile and setup scripts to programmatically set up my dev environment whether on my laptop or development desktop.
  2. Largest social presence on unsupported platform - My most active social presence is on the Farcaster social platform which is not supported by default in Chirpy theme. I customized the theme to add the social icon and correctly link my profile on Farcaster.
  3. Dynamic content on static site - Jekyll has fully embraced the Liquid templating language and I made several customizations to my site with Liquid templates for resume skill tag links with included icons, embedded YouTube, and dynamically inserting content on pages.
  4. Liquid template formatting - Inserting Liquid templates across markdown and html files. I leveraged the Liquid vscode extension to enable syntax highlighting and formatting.

Lessons Learned

  1. Leverage my existing knowledge - I had to learn a new ecosystem and development environment Ruby, which I was not familiar with and that unfamiliarity slowed down getting the development environment set up. If I were to make my portfolio site again, I would stick to a JavaScript framework (probably Astro) to leverage my experience with JS instead of learning a new language from scratch.
  2. Avoid magic strings - Jekyll is a well-developed ecosystem but suffers from the Liquid scripting tools which, while powerful, can obscure references. For example, Jekyll recommends using a Liquid tag to perma-link to existing posts as a workaround for the fact that the output routes are different from the source.
  3. Docker and dev containers are awesome - Programmatic setup of the dev environment is super powerful and lets me experiment with projects without polluting my host machine.

Future Considerations

  • I’d like to move to another framework to leverage functional programming i/o in JavaScript/TypeScript as opposed to relying on magic string scripts to insert markdown content.
portfolio, case study
case study docker ruby markdown jekyll liquid github yaml sass css netlify dev containers static site generator css web development chirpy
This post is licensed under CC BY 4.0 by the author.