ben.
← All work
UX/UI DesignWeb DevelopmentBrand IdentityNext.js

Portfolio

·

2026

benlaclair.com_

The portfolio I actually wanted to build — dark, techy, and unapologetically mine.

10 hrsConcept to launch
Next.jsCustom-coded
0Templates used
ReactFrom scratch
benlaclair.com
ben.
WorkAbout

Portfolio 2026_

BEN.

UX/UI & Graphic Designer

·UI/UX DESIGN ·BRAND IDENTITY ·VISUAL DESIGN ·TYPOGRAPHY ·INTERACTION DESIGN ·LOGO SYSTEMS ·PACKAGING ·DESIGN STRATEGY

The Decision

I wanted dark mode everything. So I built it.

My old portfolio was on uxfol.io — a template, bootcamp projects, nothing that felt like me. I kept looking at developer portfolios and dark-themed editorial sites thinking “that's the energy I want” but nothing in my toolkit let me get there. So I scrapped everything and started from zero.

The dark background, the cyan glow, the glitch effects, the monospaced details — this is the aesthetic I've always gravitated toward but never had a reason to ship. A personal portfolio was the perfect excuse to go all in on it. No client constraints, no brand guidelines to follow. Just the vibe I actually like.

The Build

10 hours, a blank repo, and a lot of caffeine.

I built the whole thing in about 10 hours using Next.js, React, and Claude Code as a dev collaborator. No template, no starter kit — just an idea of the mood I wanted and a terminal window.

I'll be upfront: I used AI to help me code this. But “AI-assisted” doesn't mean “AI-designed.” Every visual decision — the color system, the animation timing, the glitch behavior, the layout rhythm — came from my head. Claude Code was the engine; I was driving. Knowing how to direct AI toward a specific creative vision is a real skill, and this project is proof of that.

What I'm most proud of is how it feels. Most portfolios are basically slideshows. I wanted mine to feel like a place — something you explore, not just scroll through. The transitions, the hover states, the little moments of motion — that's the stuff that made this project genuinely fun to build.

The Details

The nerdy stuff I got to build.

This is the part I get excited about. These are the visual systems running under the hood — the effects and details that give the site its personality. Click any card to see it in action.

BEN.
Expand

Glitch & Scramble

Expand

I've always loved that moment in sci-fi interfaces where text flickers and resolves. The "BEN." wordmark does exactly that — characters scramble and lock in one by one, then a chromatic glitch burst tears through the text. It's the kind of detail I never get to ship in client work, and honestly my favorite thing on the site.

16 hand-tuned burst frames · 3-color chromatic split · 45ms scramble tick

Expand

Living Dot Grid

Expand

This one's subtle but it changes everything. The background is a canvas-rendered grid of cyan dots that pulses with random wave bursts — little clusters that bloom and fade like the page is breathing. Most people won't consciously notice it. That's the point.

28px grid · Canvas API at 60fps · 0.07 → 0.22 opacity wave

Aa
Expand

Gradient System

Expand

One gradient runs the whole show — bright cyan to deep blue. Accent text, buttons, tags, the marquee bar, hover states. Constraining myself to a single gradient forced every element to feel cohesive without me having to think about it. Simple rules, consistent results.

#00DFFF → #0090C8 · text-grad + bg-grad utilities

·UI/UX DESIGN·BRAND IDENTITY·VISUAL DESIGN·TYPOGRAPHY·UI/UX DESIGN·BRAND IDENTITY·VISUAL DESIGN·TYPOGRAPHY
Expand

Motion & Rhythm

Expand

Nothing on this site just appears. Every section staggers in with a custom ease curve, project cards cascade in sequence, and the marquee ticker never stops moving. I wanted the site to feel like it's performing for you — not just sitting there waiting to be read.

0.7s staggered reveals · spring-based Framer Motion · 30s marquee loop

Before / After
Beforeuxfol.io · 2024
Template platform
Bootcamp projects only
No personal brand
Looked like everyone else
Afterbenlaclair.com · 2026
Custom Next.js / React build
Real client work (more incoming)
Distinct editorial identity
Shipped in ~10 hrs with AI