Building This Site

Why Build This

I wanted a place to document what I'm working on, what I'm consuming, and how I spend my time. But more than that, I wanted it to be interesting—not just a rigid information dump. Most portfolios feel like résumés dressed up as websites: flat, professional, lifeless.

I wanted this site to tell a story. The way you present information matters as much as the information itself. Color, interaction, personality—these aren't decoration, they're part of the narrative. The site should feel like it has a point of view, not just a list of credentials.

The Colors

Most developer portfolios default to blues, grays, and blacks—the safe, "professional" palette. I wanted warmth. Reddish-browns (#54190d, #8b3a2e, #a84532) that feel earthy and analog, like oxidized metal or aged paper. Pure white text for maximum contrast and readability.

The WebGL shader background takes these base colors and makes them fluid. It shifts and swirls based on parameters you can adjust in the controls (bottom-right corner). Speed, detail, blend, color—all customizable. The background persists across pages using React Context and localStorage, so your settings follow you around the site. It's not just a background—it's a mood that adapts to you.

Typography System

The entire site uses Domine, a serif typeface designed for screen reading with strong vertical stress and high contrast. The font system uses a global scale controlled through the admin panel (0.5x to 2x), but text hierarchy is created through weight and size variations:

The font scale slider in the admin panel adjusts everything proportionally while maintaining these relative size relationships. This creates a dense, information-rich layout where hierarchy comes from position, weight, and subtle size differences rather than dramatic scaling.

Tech Stack & Components

Built with Next.js 15, TypeScript, and Tailwind CSS. The shader background uses a WebGL library called Shaders—specifically the Swirl effect for base animation and ChromaFlow for color dynamics. I built custom components on top: CustomCursor with velocity-based scaling, SelectionBox for visible text selection borders, and a GrainOverlay for subtle texture.

The navigation uses a PageWrapper component that handles persistent state and route transitions. Tables use a shared structure with dynamic border widths controlled by a global slider in the admin panel. Everything has sharp corners and thin borders that respond to the border width setting.

Component Examples

Here are some of the custom components used throughout the site. The hover box below demonstrates the interactive border effect used for clickable elements—hover over it to see the outline appear:

The navigation uses dropdown menus with animated borders and a blur effect. Hover over the button below to see the dropdown appear with smooth transitions and background blur:

Tables are used extensively for organizing content. Here's an example showing the three-column structure used in the Consuming section:

The selection box (try selecting this text) draws a visible border around highlighted content. The grain overlay adds subtle texture to the entire page. And if you look in the bottom-right corner, there's an admin panel with sliders to control every visual parameter—background speed, colors, border widths, font scale, opacity layers.

Layout & Structure

The site is organized into four main sections, each with a specific purpose. Home is the introduction—who I am, what I'm doing right now, links to reach me. It's constrained to half the page width for readability, with contact badges at the bottom.

Time shows a chronological timeline of milestones—education, projects, companies. It's simple but effective: year on the left, event on the right, separated by a thin vertical line. Creating lists my writing and projects in table format with columns for title, tags, and date. Consuming catalogs influences by category—software, hardware, books, audio, video, newsletters—each in its own section with category headers.

Everything uses the same table structure: thin borders, fixed column widths, left-aligned text. Categories are separated into sections with headers, making it scannable. You can see everything at a glance or drill down into specific items. The layout is deliberate—hierarchical but not rigid, dense but not cluttered.

Interaction Details

The cursor isn't just decoration—it responds to velocity. Move slow and it stays small. Move fast and it scales up. When you hover over links or interactive elements, the cursor shifts to indicate affordance. Text selection draws a visible border box around what you've highlighted, making your actions tangible.

Buttons use magnetic attraction—they pull slightly toward your cursor as you approach. It's subtle but creates this sense of responsiveness, like the interface is paying attention to you. All animations run at 60fps using requestAnimationFrame for smooth performance. The cursor resets on screen changes to avoid position glitches when navigating between pages.

Customization System

There's a control panel in the bottom-right corner (hidden until you click the gear icon) that exposes every visual parameter. You can adjust shader speed, detail, blend, fade duration, noise layers, color gradients, opacity layers, grain texture, border widths, and font scale. Every setting persists to localStorage and follows you across pages.

This level of control is intentional. I wanted the site to feel like a system you could shape, not just consume. It's a reflection of how I think about design—parametric, adjustable, responsive to context. The defaults work, but if you want to make it yours, you can.

Why It Matters

This isn't a template or a theme—it's a system built from scratch to match how I want to present work and learning. Most personal sites are either too sterile (just information, no personality) or too flashy (all style, no substance). I wanted something in between: functional but expressive, systematic but warm.

Information architecture matters, but so does how it feels to use. The warm colors, the fluid background, the responsive interactions—these aren't decoration. They're part of the story I'm telling about how I think about design and building. Not rigid. Not generic. Considered.