I’ve thought about building a portfolio website for a long time. It’s been something that I’ve started a few times but every time I get more than 10% of the way through, something else comes up or I lose interest for long enough that picking it up seems like a big time sink. I’ve tried it out in different forms over the past 7 or 8 years. At first it was as a static Jekyll blog based on a few templates, back when I was in high school and didn’t know hardly anything about…well…anything. Then it became a Next.js app, until I realized that it wasn’t worth the cost or complexity that a React app brings (since it’s nothing but a static site). Now, I’ve been able to get farther than I have before using Eleventy.
- At the time of writing this post, I just found out that Eleventy is now re-branding(?) to Build Awesome, as part of the Font Awesome family. We’ll see if it comes with any of the common crappy changes that come with most rebrands like this. In this post, I’ll keep referring to it as Eleventy.
Choosing Eleventy
I chose Eleventy based on some cursory research. I had never used it before and trying out new frameworks is always an interesting endeavor. Its performance metrics seemed impressive, but the only thing that mattered to me was how fast is loads. I don’t have thousands of Markdown files to compile and build time for this website is not that important. The process of optimizing a page load time down further and further is a very cool problem and one I will be trying to figure out for this website.
The Design
I wanted this website to be a bit different than other websites I had worked on before. Prior to this, my work has focused on clean and minimalist designs with symmetry and unity being key traits. My goal for this website was for it to be not just a resume, but a demonstration of my abilities as a software engineer. I have seen many portfolio sites that follow the same aesthetic, doubly so with AI-generated code, so I wanted to challenge myself with a theme that I have never attempted before.
I chose Bauhaus as the core theme of this website. I’ve always loved its blocky, stark aesthetic paired with asymmetry, but have never thought to develop a website styled after it. This website tries to stay as true as possible to this aesthetic, with much of my effort put into the homepage.
What I Learned
Executing a Bauhaus-style website was fairly difficult, especially with minimal JavaScript and little-to-no external libraries. Not so much the actual coding part, but the design iterations were the most difficult. I spent much of my time going back and forth trying to get the best feedback possible on my designs and adjusting what didn’t work. Initally the website’s Bauhaus aesthetic was very surface-level: a few shapes mashed together and placed neatly in the corner away from the neatly organized text. It took multiple iterations to get it to be more asymmetric, a challenge considering the structured nature of web design, with its grids and hierarchy.
Overall, I’m very satisfied with how this website turned out. It’s been a great challenge to have outside of work and school that has taught me a bunch about applying different aesthetic styles and using Eleventy (or whatever it ends up being called) to make a performant and informative website.