Skip to main content

Hello world: how I built my portfolio

00:02:54:40

How It All Started

I wanted a portfolio that felt like a real reflection of how I think and build.

Not just a template — but something I could treat as an evolving engineering project.

My inspiration didn’t come from typical portfolio examples.
Instead, it came from observing:

  • How Steve Jobs approached simplicity and product feel
  • How Linus Torvalds approached systems and engineering discipline
  • How modern web experiences blend motion, UX, and performance

I decided to build the entire site myself so it could grow alongside my skills.

Inspiration collage: modern UI, motion design, system architecture, and clean engineering

The First Iteration

The first version started as a small React experiment.

I explored:

  • component composition
  • CSS modules
  • simple animations
  • page transitions
  • layout structure

It wasn’t complex, but it was real and shipped — which made it valuable.

That reinforced a principle I keep returning to:

The fastest way to understand a tool is to build something tangible with it.

As the project evolved, I began experimenting with:

  • richer motion
  • improved structure
  • small architectural refinements
  • backend integration ideas

Eventually, I introduced Three.js to render interactive 3D elements, which pushed me to think more carefully about performance and rendering tradeoffs.

At that point, the portfolio started feeling less like a static site and more like a personal experimentation space.


Migrating to Remix

As content and features grew, I hit limitations:

  • managing articles
  • routing complexity
  • performance concerns
  • maintaining clean transitions
  • balancing frontend and backend logic

I evaluated several frameworks — including Next.js and Astro — before choosing Remix.

Remix appealed to me because of:

  • straightforward routing
  • strong data-loading patterns
  • CSS module support
  • alignment with web fundamentals
  • simple mental model for full-stack work

Rebuilding the site in Remix brought several improvements:

  • MDX-based article system
  • smoother page transitions
  • simplified styling approach
  • cleaner structure
  • faster builds
  • improved theme handling

The rewrite also forced me to rethink parts of the architecture, which ended up being one of the most educational parts of the project.


Challenges Along The Way

Animated route transitions

Maintaining visual continuity between pages can be tricky because frameworks often remove styles immediately.

Using the View Transitions API alongside Remix helped achieve smooth transitions without complicated workarounds.

Scroll restoration

Browser scroll behavior can easily break immersion.

Remix’s built-in handling significantly simplified this problem compared to earlier attempts.


Looking Back

This portfolio gradually became a personal lab where I explore:

  • motion and interaction patterns
  • component architecture
  • MDX content workflows
  • Three.js experimentation
  • full-stack Remix patterns
  • accessibility and performance considerations

The goal isn’t to create a perfect site — but to maintain a living project that evolves with my learning.


Looking Forward

There are many directions I want to explore next:

  • scroll-driven animation patterns
  • deeper WebGL experiments
  • WebAssembly integrations
  • improved performance instrumentation
  • offline tooling experiments
  • richer interaction design

The portfolio will continue changing as my interests and skills expand.


Update: 2025

Recent refinements focused on simplification and stability:

  • cookie-based theming to prevent flash
  • improved transitions using the View Transitions API
  • cleaner MDX content pipeline
  • CSS modules with PostCSS features
  • more modular structure
  • better runtime performance and build speed

Remix continues to provide a balance of flexibility and structure that fits well with how I prefer to build web applications.

This project remains an ongoing record of my experimentation across design, frontend engineering, and broader systems learning.