My portfolio

Every year I like to work on my portfolio site and see how I can improve my site to be more performant, user-friendly or accessible. My last portfolio was built with Gatsby and according to Google Lighthouse, took about 4.4 seconds to fully load.

My Gatsby portfolio had a minimalistic design and still takes 4.4 seconds to load. After performing an analysis on the site, I realized the bottle-neck came from the Gatsby framework. Since it is a hybrid static site, it does require React to re-hydrate the website. I didn't have a heavy need for JavaScript but can't really remove it without breaking my site, so I decided to rebuild my portfolio as a true static site.

For my new framework, I settled on 11ty, which is a simple static site generator that compiles JavaScript templates into HTML. 11ty lets you use a variety of server-side JS templates, I chosed Pug because it has a very succint syntax. As for styling, I went with TailwindCSS because it lets me iterate on my porfolio faster and I didnt have to write a lot of css, instead I would chain their utilities classes to create the styling that I need. During the production build proccess, the unused styles are stripped out and the css file is minified and inlined into the HTML file. For CI/CD, I used Buddy and Netlify to run Lighthouse tests to keep track of my performance scores per build. When the test falls below 100, the build will fail and will output hints on how to fix them.

I rebuilt my portfolio as a true static page and was able to include very minimal JavaScript. While Gatsby did come with code and build optimizations out of the box, I was able to create a similar version with 75% faster load times by switching to 11ty. During the process, I learned a lot about performance and accesibility and was able to create a website thats meets Google's performant criteria. 🎉