Portfolio Overhaul
Why
I made my initial portfolio site years ago in vanilla HTML/JS/CSS. Every time I looked back at it, I thought it could be improved in looks and definitely in code. Since its initial release, I've become much more proficient in front end development, especially React and Tailwind. I decided I would take what I learned from migrating eef.app to Next.js (see this post) and redesign my portfolio site! If you want to see how different the old version looked, skip to here.
Ideas
Problem #1: if I don't like the old design, how do I figure out what design I do like? I started looking around for inspiration from other people's portfolios and just well designed websites in general. Below are a few examples that stood out to me as you may notice some similarities to them here and there. I noticed that a lot of portfolios tended to have over the top effects that often were choppy or didn't work on mobile due to how intensive the effects are. The design goals I landed on were: sleek/simple, responsive, easy-to-use.
How
I scrapped the entirety of the original code, so this wasn't really a "migration" to Next.js. I started with a fresh Next.js app and got to work. I was already familiar with React, Tailwind, TypeScript, etc. so I only had learning to do in terms of Next.js.
Hosting
I had already been hosting this site with GitHub Pages so nothing needed to change there. With Next.js, it is super easy to set it to be built as a static site as GitHub Pages requires. For anyone reading this that want's to make their own website, Next.js SSG -> GitHub Pages is a breeze and I highly recommend giving it a try.
GitHub Actions
The trickiest part of hosting for me was CI/CD. I'm not super familiar with GitHub
Actions; but it was fun to learn a little of it to get this site to build and deploy
for me. Whenever I push to my main git branch, GitHub Actions will automatically
build and deploy the new version to GitHub Pages automatically. It's super nice.
I am also able to ensure builds succeed as I have a GitHub Action to validate PRs.
Blur Issues
One design issue I ran into was related to the blur effect used throughout the site.
It turns out that different browsers handle overlapping blurs differently. I use
Zen Browser (highly recommend btw) which is a fork of
Firefox. While developing, everything worked as I intended on Zen/Firefox. After
hours of development to get it deployed, I tested it on my phone and found that
the blur looked wrong in a few spots. To solve this, any directly overlapping blurs
are actually not blurred. For example, any cards within cards are just something
like bg-white/5 (Tailwind speak for a touch of white). This can be seen in the
bento cards on the home page. Any pop ups like the navbar or filters have another
blur as their positioning is handled differently to child elements.
Blog Posts
Dynamic Routes
Coming Soon
Markdown Rendering
Coming Soon
Slugs/IDs
Coming Soon
Server vs Client Code
Coming Soon
Inline Code vs Code Blocks
Thanks to this discussion, I was able to handle inline code and full code blocks separately in Tailwind. Converting this to Tailwind v4 looks like this:
/* Ref: https://github.com/tailwindlabs/tailwindcss/discussions/12496 */
@custom-variant prose-inline-code {
&.prose :where(:not(pre) > code):not(:where([class~="not-prose"] *)) {
@slot;
}
}
This allows me to style inline code like this: prose-inline-code:px-1 without
the full code block receiving that Tailwind class.
Results
You're already on this site, so you're seeing the new design. Check out a glimpse of the old one to see how much it has improved!
Old
New
