← Back to feed

portfolio v4 log: redesigning my site

2026-07-01

My old portfolio was starting to feel cluttered and outdated. Every time I opened it to update a project or add a quick write-up, I found myself getting annoyed by unnecessary visual noise and bloated components that did not reflect how I actually work.

I decided to start over from scratch and build Portfolio v4. I drew a lot of inspiration from clean typography-driven sites like nikipetrov.com, focusing strictly on high contrast, sharp text, and quick navigation.

Here are the notes on what changed and why I built it this way.

Typography and contrast

I wanted the entire site to feel like a high-contrast terminal document. I switched the font stack to Geist Sans and Geist Mono:

  • Dark Mode: Soft, deep blacks (#0a0a0a to #171717) with crisp gray borders.
  • Light Mode: High-contrast, clean white layouts that preserve line heights and readability.

Setting up the color tokens in Tailwind and next-themes took a bit of fine-tuning, but now switching themes feels instant and clean.

Interactive letters guestbook

Instead of a generic comment section, I wanted to build something tactile. I created a Letters feature inspired by physical mail:

  1. Visitors can leave a short note or message.
  2. An interactive canvas pad lets people sign their name directly with their mouse or touch screen.
  3. The note posts directly to Firebase and renders as a signed card in the guestbook.

Building the canvas drawing hook was fun to hack on, and it adds a personal touch to the site without feeling like bloated social media features.

Arcade micro-interactions

To keep the homepage engaging, I embedded a small retro snake game simulator right into the layout. It uses standard keyboard arrow controls and runs directly inside a custom canvas loop.

Combined with subtle hover states and minimalist transitions, the UI feels fast and responsive while keeping the focus on content.