Portfolio
·2026
benlaclair.com_
The portfolio I actually wanted to build — dark, techy, and unapologetically mine.
Portfolio 2026_
BEN.
UX/UI & Graphic Designer
·UI/UX DESIGN ·BRAND IDENTITY ·VISUAL DESIGN ·TYPOGRAPHY ·INTERACTION DESIGN ·LOGO SYSTEMS ·PACKAGING ·DESIGN STRATEGY
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.
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 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.
Glitch & Scramble
ExpandI'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
Living Dot Grid
ExpandThis 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
Gradient System
ExpandOne 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
Motion & Rhythm
ExpandNothing 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
Next project
Vlier.com — Product Page →