Colophon

I studied Design and Human-Computer Interaction at UC San Diego, so this page is the design rationale I'd expect from anyone else's portfolio: what was chosen, what was rejected, and why.

The brief

The audience is a hiring manager or engineer deciding, in about ninety seconds, whether I'm worth a phone screen. Everything optimizes for that: the home page answers "who is this and what have they actually built" before the first scroll, every claim links to a case study, and nothing interrupts reading. The design should feel considered, but the moment a visual choice competes with the content, the content wins.

Typography

Three typefaces with strictly separated jobs. Fraunces, a variable optical-size serif, does the display work; its warmth keeps a very structured page from feeling sterile. Inter carries body text at a 42rem measure (about 75 characters), 1.7 line height. JetBrains Mono is reserved for apparatus: section numbers, metadata, figure captions, spec sheets, and code. If it's content, it's serif or sans; if it's machinery, it's mono. That rule alone produces most of the visual hierarchy.

Grid and apparatus

The layout borrows from print: a hanging label rail on wide viewports, numbered sections, hairline rules, heavier rules at the page frame, and figure captions under every diagram. Print conventions carry a useful signal: they say edited, the way a lab notebook differs from a whiteboard.

Color

Warm paper (#fbfaf7), near-black ink, and one accent: an ink blue (#2534c9) used only for meaning: interactive nodes, section indices, hover states, the period after my name. One accent used consistently reads as identity; three accents read as a template.

Diagrams

The architecture diagrams are hand-drawn SVG on a fixed grid, styled with the site's own CSS variables and set in the same mono as the captions. On the home page, outlined nodes are real links with hover and keyboard-focus states; the diagram is the navigation. The network topology on the UniFi case study goes further: a before/after toggle morphs the wiring, and you can trace either reused cable through its new roles. Each diagram carries an aria-label describing the topology in prose for screen readers.

Motion

The previous version of this site had a WebGL particle network behind the hero, smooth-scroll hijacking, animated counters, and a marquee: motion as decoration. The rule now is that motion must carry information, and every use here passes that test: the architecture diagrams draw their edges when they enter the viewport (the topology assembles in reading order), packets travel the topology diagrams because data flow is literally what they depict, page navigations cross-fade via the View Transitions API so moving between case studies feels continuous, and the hero settles in once, in under 600 milliseconds, and never moves again.

All of it is hand-rolled: CSS keyframes, SVG, and one IntersectionObserver; still no animation libraries. Everything collapses under prefers-reduced-motion, and visitors without JavaScript simply see the finished diagrams.

Playable demos

Three project pages carry an interactive simulation you can poke instead of just reading about it. The JARVIS page has a terminal that replays the bot's real command surface. The RoomTag page has a floor plan you walk a tag around while a synthesized classifier feeds the real EMA and hysteresis logic, so you can toggle the smoothing off and feel the doorway-flicker problem the project exists to solve. The trading page lets you type a trade call and watch it parse and hit the real risk checks.

The rule for all three: the data is synthesized and the interface says so, but the logic is faithful to what runs in production. A demo you can poke at beats a paragraph describing one, and simulating it honestly matters more than the trick.

Accessibility & performance

• Semantic HTML with one h1 per page, a skip link, and visible focus states on everything interactive.
• Text and apparatus colors meet WCAG AA contrast on the paper background.
• Static export: no client-side data fetching, fonts subset and self-hosted via next/font, zero layout shift from loading content.
• The whole dependency tree is React, Next, and Tailwind. No animation or component libraries.

Stack

Next.js 16 static export on GitHub Pages, Tailwind CSS v4 plus a small hand-written design system, DNS through Cloudflare. Source is on GitHub, including the design rules as repo conventions so the aesthetic survives future edits.