The Art of Deleting Things

The site had four jobs. Show the work. Explain the offer. Prove competence. Get the visitor to a contact form. Everything else was negotiable.

That list sounds obvious. It took three failed versions to write it down. The early drafts confused “impressive” with “effective.” A portfolio does not need to impress other developers. It needs to convince a clinic owner, a startup founder, or a thesis adviser that the person behind it ships working systems.

Once the brief was honest, the design constraints wrote themselves. Fast on a mid-range Android over mobile data. Readable in a bright room. Navigable with one thumb. Every claim verifiable on the same page it is made.

The site went through four distinct versions. Each one taught something the next one needed. None of them were wasted, but three of them were deleted.

The first decision was the hardest: three colors. Not four. Not “three plus accents.” Three.

White for the background. Near-black for text. Blue for everything that matters: links, active states, the logo, the “jbpa” in jbpa.dev. No purple. No indigo. No cyan. If a design needed a fourth color, the design was wrong.

The blue sits at oklch(0.55 0.18 255), a perceptually uniform color space where equal numeric changes produce equal visual changes. Same lightness as the mid-gray, with chroma. It makes mixing color and grayscale predictable, and it makes dark mode a lightness inversion instead of a second palette.

Inter handles the display work: page titles, section headings, the wordmark. Its geometric construction reads as engineered rather than decorated, and its slightly condensed rhythm keeps long headings from sprawling.

Inter handles everything else: body text, buttons, navigation, forms. Large x-height, open counters, optimized for screens. It disappears, which is exactly what body text should do.

The monospace slot is the system mono stack. It shows up for metadata, figure captions, code, and labels. It creates visual rhythm against the sans-serif body and signals “technical” without a single word of copy.

Most sites cram content edge-to-edge on mobile and leave dead space on desktop. The fix was simple: one container, consistent padding, generous section spacing.

Sections breathe at py-14 on mobile and py-28 on desktop. Cards stay compact at p-6. The container caps at 72rem, wide enough for three-column grids, narrow enough to keep reading comfortable.

The header went through more revisions than any other element on the site. The goal was a frosted-glass bar: content should blur as it slides under the nav. Simple in theory. In practice it fought the browser for a week.

The first attempt put backdrop-filter on the header itself. It worked until horizontal overflow was introduced anywhere on the page. The moment overflow-x: hidden landed on body, the backdrop stopped sampling page content and the glass turned to flat gray. The fix was obscure: overflow-x: clip does not create a backdrop root, so the blur keeps working.

The final version is deliberately boring. The header is opaque, the same color as the page background, with a hairline bottom border. Content can never show through because there is nothing to show through. The blur exists only as progressive enhancement where it costs nothing.

Toggling light and dark mode does not swap a class and repaint. It takes a snapshot of the page, expands a circle from the theme button, and resolves a motion blur as the new theme covers the screen. The whole thing runs on the View Transitions API, so the browser does the compositing.

Two details matter. The origin is the button’s center, not the click point, so the ripple always starts from the same place. And the blur is not decoration: it hides the mid-transition state where half the page is light and half is dark, which looks broken at any speed.

On a phone, this site behaves like a native app. A bottom tab bar replaces the header nav. Secondary pages live in a sheet that slides up instead of a menu that drops down. The footer does not exist on mobile. These are not responsive adjustments. They are a different interface for a different device.

The tab bar's active indicator was the fiddly part. The first version put a shared layoutId pill inside each tab, which meant the indicator unmounted and remounted on every change, animating vertically from wherever the old tab was. The fix was one nav-level indicator that only ever moves horizontally, positioned by measuring the active tab's offset.

Flat white felt sterile. The fix was texture, but texture is usually expensive: big PNG overlays, live SVG filters, canvas noise. All of them cost paint time on every frame.

The site’s grain is a 256px SVG turbulence tile, pre-rendered once and repeated at 5% opacity. The hero adds two more layers: an ordered-dither gradient that rises from the bottom like newsprint, and a giant outlined wordmark that bleeds off the right edge. All three are pure CSS. None of them animate. Total cost: a few kilobytes and zero JavaScript.

Every sentence on this site, the copy, the case studies, the pricing, the navigation labels, lives in one content file. Components contain zero hardcoded strings. When the words change, the whole site follows.

The notes section works the same way. Fifty-six articles in a single data file, statically generated at build time, paginated nine per page, each with its own metadata, OpenGraph image, and canonical URL. Unknown slugs return a real 404, not a 200 with a sad message.

Centralizing copy early makes a sitewide rewrite possible from one file, one diff, every page updated.

Every page is statically generated. There is no server round-trip for content, no loading spinner for data that could have been baked at build time. Images sit behind skeleton preloaders that crossfade on load, so nothing pops in unstyled.

The SEO layer is mechanical and complete: canonical URLs on every page, unique titles and descriptions, OpenGraph and Twitter cards, JSON-LD for the person schema, a sitemap covering all 56 articles, and a robots file that points to it. The QA pass that produced this list also fixed a soft 404, missing h1 elements on six pages, and a search bar that floated where it should not have.

The hero was clean but static. A headline, a grid, some texture. It needed motion that felt alive without stealing attention from the words.

The answer is a field of floating fragments: miniature pieces of real work. A terminal mid-deploy, a database table, a code snippet, a SQL query, a build log, an uptime chart, a git log, a cron entry, a passing test run, and more. Twenty-two sit in a pool; six are dealt to strategic edge slots at random on every page load, each with its own drift timing. The randomization runs in useEffect, after mount, so server and client markup never disagree.

Then physics. Each icon gets a random speed between 0.08 and 0.42, wired to page scroll through useScroll and useTransform. Every icon drifts against the scroll direction at its own pace, and a useSpring (stiffness 55, damping 18) lets them settle softly when scrolling stops instead of freezing mid-drift.

Two guards keep it tasteful. A radial mask fades icons out where the headline and description sit, so they never compete with the text. And the whole layer is aria-hidden with pointer-events-none: pure atmosphere.

The headline itself got a sheen: a soft gradient band that sweeps across “digital systems.” once every nine seconds, then rests. Low contrast, wide feather, eased. It reads as light catching the type, not a streak.

The last stretch was not new features. It was removing friction that only shows up when you watch the site load.

The notes index heading used to animate twice: once in the loading fallback, again when the real page mounted. The fix is an invisible copy of the heading in the loading state. It reserves the exact space, so there is no layout shift, but it never animates. The entrance plays once, when it matters.

The contact form stopped interrogating people. Six fields became three required ones. Inquiry type is a row of tap-to-pick chips. Budget and timeline are optional and say so. And because a blank box is the hardest part of any form, picking a topic offers a “Use a draft” link: two starting messages per topic, inserted only on an explicit click. Help offered, never imposed.

The about stats got a count-up: numbers climb from zero when scrolled into view, rendered large in the gradient text style. Below them, a stack row of grayscale tool icons that color on hover. Proof, then playfulness.

One removal mattered more than any addition: the phone number is gone from the entire codebase. Not hidden. Removed. A wa.me link exposes the number in its URL, so the channel went with it. Email and LinkedIn carry the direct-contact weight now.

These were not planned. They showed up after enough things were removed.

Next.js with the App Router. React. Tailwind CSS with OKLCH tokens. Motion for spring-based animation. Lucide for icons. Self-hosted fonts. No UI kit; every component is hand-built.