Skip to content
Tyler Wall
designglassmorphismcss-variablesdesign-tokensportfolio

The Tension

The backgrounds have a lot going on. I also wanted to feature them. That tension drove every design decision on this portfolio.

The Glass Decision

I went with Apple-style glassmorphism. Transparent layers with backdrop-filter blur that let the engines breathe while keeping content readable. Not decoration. Functional.

The key insight was blur hierarchy. More blur means higher visual priority. Your eye focuses on the sharpest layer first, then drifts to the motion underneath. The content stays readable. The engines stay visible. Both win.

Here's the actual hierarchy I use:

  • Hero sections / main cards: backdrop-blur-md — enough blur to read, enough transparency to see movement
  • Sidebar widgets: backdrop-blur-md — same level, equal visual weight
  • Nested elements / badges: backdrop-blur-lg — more blur pushes them forward
  • Floating UI (modals, dropdowns): backdrop-blur-xl — maximum blur, maximum focus

Every glass container follows the same recipe: bg-white/[0.02], backdrop-blur, border border-white/10. The background is nearly invisible. The blur does the work. The border gives just enough edge definition to separate layers.

How Does the Design Token System Work?

The portfolio uses CSS custom properties driven by YAML profile configs. One file change themes the entire site — accent color, secondary color, font preferences, engine selection. Tailwind consumes these variables at runtime, and every canvas engine reads its color from the same source. Sixteen profiles, sixteen color schemes, one design system.

Each profile lives in a YAML file. The design tokens section looks like this:

# profiles/ai-engineer.yaml (excerpt)
design:
  tokens:
    accentColor: "#22d3ee"      # cyan
    secondaryColor: "#818cf8"   # indigo
    fontHeading: "JetBrains Mono"
    fontBody: "Inter"
  engine:
    default: "transformer-llm"

That YAML gets resolved into CSS variables at build time. var(--color-accent) shows up everywhere — headings, links, hover states, chart colors, the glow on interactive elements. Change the hex value in one YAML file and the entire profile shifts.

The hex grid engine is the best example. It renders a honeycomb pattern colored entirely by the accent token. On the default profile, it's cyan. On engineering-manager, emerald. On platform-lead, amber. Same engine, same code, different feel.

16
Color Schemes
One per profile
4
Hero Variants
Terminal, Minimal, Bold, Cards
1
Design System
CSS variables + Tailwind

The Glow

The AI glow was the last detail I added. Pulsing rainbow gradients on the chat button and profile selector. I modeled it after Apple's Siri indicator and Google's Gemini animation — that slow color rotation that signals "something alive is here."

It's subtle. Most visitors won't consciously notice it. But it makes the page feel responsive in a way that static buttons don't. The glow pulses on elements that connect to AI — the chatbot, the background selector, the profile switcher. Everything else stays still.

Glassmorphism isn't decoration. It's the solution to putting readable content on top of 23 moving physics simulations.

The Honest Tradeoff

Glassmorphism costs performance. backdrop-filter is GPU-intensive. There's a visible flash on first load where the blur catches up to the engine render. I've optimized it, but on older hardware the first 200ms look rough. For what the design gains, I'll take the tradeoff.

See It Across Profiles

Every profile on this portfolio demonstrates the system. The default profile runs cyan glass over swarm-probability. The AI engineer profile pairs cyan with transformer-llm. The engineering manager profile uses emerald on neural-brain. Same glass, same blur hierarchy, completely different feel.

That's the point. The design system doesn't impose a look. It imposes a structure. The profiles fill in the rest.

In This Series

Frequently Asked Questions

Why not just use a static background image?

Because 23 interactive engines are the portfolio's signature. A static image would be simpler and faster, but it wouldn't demonstrate what I build. The glass design lets the engines stay visible while keeping content readable — that's the whole tradeoff this design system exists to solve.

Does glassmorphism hurt performance?

Slightly. backdrop-filter is GPU-intensive. The first 200ms can glitch on older hardware while the blur catches up to the engine render. I've tuned it as far as I can, but it's a real cost. The tradeoff is worth it — the engines are the portfolio's identity.

Can I change the accent color?

Every profile has its own. Switch profiles and the entire color scheme changes — accent, hover states, muted tones, the glow effect. It's all driven by CSS variables resolved from YAML at build time. One hex value in a config file controls every colored element on the page.