2026

This Portfolio

A sketchbook-themed portfolio built with Motion, wired-elements, and rough-notation.

Designed and built this portfolio as an engineer's sketchbook — using wired-elements for hand-drawn UI components and rough-notation for animated annotations. The architecture prioritizes performance (static generation, code splitting), accessibility (ARIA labels, reduced motion support), and content management (MDX-powered writings).

Built with Next.js App Router, Tailwind CSS v4, and TypeScript. Every design decision — from the parchment texture to the handwritten diary typography — serves the core metaphor of a personal engineering journal.

Animation & Interaction Layer

The animation system is a two-tier approach. Motion (Framer Motion v12) handles the heavy lifting — spring-physics navbar hide/show, scroll-driven reading progress, staggered page header entrances, photo card viewport reveals, and lightbox transitions. All variants and easing curves live in a single

motion.ts

config.

Microinteractions are pure Tailwind CSS — card hover
lifts, nav link underlines, footer icon press effects, and back-link arrow
nudges. Zero JS overhead, just CSS transitions. This split keeps Motion for what
it's good at (physics, scroll, orchestration) and Tailwind for what's instant
(hover, active, focus states).

Hyperlink System

Prose content links use wired-link web components — the sketchy SVG underline stays on-brand with the sketchbook aesthetic. A dedicated teal accent color (

--accent-teal

) distinguishes hyperlinks from the orange used for highlights and the indigo used for annotations. On hover, a teal background wash fades in and the sketchy underline solidifies — all driven by CSS custom properties that pierce shadow DOM, no JavaScript needed.

Motion + rough-notation Coexistence

Motion's viewport animations (

whileInView

initial='hidden'

) conflict with rough-notation's own

IntersectionObserver

reveals. The solution: components that use annotation groups never wrap their content in Motion viewport animations. Each system owns its own scroll-triggered behavior independently.

Tech Stack

Next.js

TypeScript

Tailwind CSS

Motion

wired-elements

rough-notation

MDX