v2.0 · astro + react rebuild
The system powering this site.
Tokens, components, and patterns that keep every page visually coherent. Every example here is the real production component, rendered with the same code and the same props as the live site.
01 · Foundations
Tokens
Every value in the system lives in src/styles/tokens.css
as a CSS custom property. Surfaces, accents, type, space, radius,
shadow, and motion all share the same flat namespace.
01
Terminal-native
Mono labels and dot-grid backgrounds. Signals "this person ships code" before a single sentence is read.
02
One accent
Green (#00e896) is the only saturated color allowed for interaction. Blue, amber, and red are reserved for taxonomy.
03
Quiet by default
Borders sit at 7% white. Surfaces sit one shade above the navy floor. Loud is earned, never inherited.
01 · Foundations · Color
Color
A navy surface ramp, one interaction accent, four taxonomy accents,
and a text scale. Click any token to copy var(--name)
to your clipboard.
Surface
5 tokens
Page floor. The lowest surface.
Section bands and nav scrim.
Inset blocks, chip backgrounds.
Highest-elevation navy, rarely used.
Default card and panel surface.
Text
4 tokens
Primary body and heading color.
Secondary copy, descriptions, ledes.
Tertiary captions, dim labels, dots.
Low-emphasis captions on dark imagery.
Brand
2 tokens
Primary accent. The only saturated interaction color.
Primary hover state for buttons and links.
Accent
5 tokens
Design taxonomy. Used in Tag variant="design".
AI and warning treatments. Tag variant="ai".
Failure, danger, destructive actions.
Figma community accent. Used on /community.
Design system tag, secondary accent.
Border
2 tokens
Default hairline border between sections and cards.
Slightly stronger border for hover states and dividers.
Language
6 tokens
TypeScript language dot on repo cards.
JavaScript language dot.
HTML language dot.
CSS language dot.
Figma language dot for design-only projects.
Shopify Liquid language dot.
Accent tints
4 intensities × 5 accents
Overlays & scrims
6 tokens
| Token | Value | Use |
|---|---|---|
| --overlay-grid | white / 3.5% | Dot & line backdrop grids |
| --overlay-hairline | white / 5% | Faint surface tint over panels |
| --overlay-photo | black / 40% | Image-darkening fill |
| --scrim-nav | navy / 92% | Sticky nav backdrop |
| --scrim-modal | black / 94% | Lightbox / modal scrim |
| --text-disabled | white / 50% | Low-emphasis captions |
01 · Foundations · Typography
Typography
Two families. DM Sans for long-form and headings, Space Mono for every label, eyebrow, button, stat, and code-feeling fragment.
I design products
and I ship them.
Projects I've designed, built, and shipped
BrainTech, Teen Tech Education Platform
Lead UX/UI Engineer specializing in AI SaaS, product design, and front-end engineering.
Selected work
01 · Foundations · Space & radius
Space & radius
Six radius steps cover every surface. Sections breathe at
5rem, sub-sections at 3.5rem. Micro spacing
is a 6-step ramp from 4px to 24px.
Radius scale
6 tokens
Micro spacing
6 tokens
| Token | Value | Use |
|---|---|---|
| --space-xs | 4px | Tight stacks, icon-to-label gaps |
| --space-sm | 8px | Default chip and button gap |
| --space-md | 12px | Card internals, list rows |
| --space-lg | 16px | Section internals, grid gaps |
| --space-xl | 20px | Pill padding, looser groupings |
| --space-2xl | 24px | Card padding, hero internals |
Section rhythm
6 tokens
| Token | Value | Use |
|---|---|---|
| Section default | 5rem 0 | Top-level page sections |
| Section sm | 3.5rem 0 | Inset sub-sections |
| Container default | max 1060px | Default page content width |
| Container wide | max 1280px | Galleries, full-width cases |
| Container narrow | max 720px | Long-form text, 404, about |
| --trans | .18s ease | Default transition timing |
01 · Foundations · Shadow & glow
Shadow & glow
Three elevation steps. All shadows are tuned for dark surfaces and use a strong negative y-offset to pull the highlight up.
Elevation
3 tokens
Default card lift on dark panels.
Hero or feature card hover lift.
Modal and lightbox elevation.
Glow
2 patterns
01 · Foundations · Motion
Motion
One default transition timing token, three named easing curves used
across the site. Everything respects prefers-reduced-motion.
| Token / curve | Value | Use |
|---|---|---|
| --trans | all 0.18s ease | Default transition on any interactive surface |
| cubic-bezier(0.22, 1, 0.36, 1) | Out-expo | Card lift, chip entry stagger, smooth reveals |
| steps(2) | Discrete | Blinking caret on hero status indicator |
| ease-in-out | Symmetric | Pulsing live dots (1.6s loop) |
02 · Components · Chip
Chip
Neutral pill for skill and tool labels.
Chip
<Chip>React</Chip> 02 · Components · Tag
Tag
Four semantic variants. Each variant carries an accent color that maps directly into the color taxonomy.
Tag
<Tag variant="design">UX Design</Tag> 02 · Components · Eyebrow
Eyebrow
Tiny mono label above section headings. Color prop ties into the accent palette.
Eyebrow
Selected work
figma community
/ AI session
design system
<Eyebrow color="fig">figma community</Eyebrow> 02 · Components · Skill bars
Skill bars
Numeric proficiency display used on /about. Bars fill on mount.
Skill bars
<SkillBars skills={[...]} /> 03 · Patterns · Project card
Project card
The editorial variant is the one used on the home page now. The showcase, featured, split, and compact variants are kept for flexibility on listing pages.
Featured
AI Require: Requirements Gathering Platform
An AI SaaS for requirements gathering. I led design and the React front-end and built the human review step into the AI pipeline, across the V1.8 → V2.3 rebuild.
Split
Rebrand · 6-page site
ThunderBall Scout
Conquest Customs
ThunderBall Scout: Conquest Customs Rebrand
Compact (no screenshot, vis block)
03 · Patterns · Repo stack
Repo stack
GitHub-style repo cards stacked in a 3D deck, auto-rotating through the active project every 4.2 seconds.
An AI SaaS for requirements gathering. I led design and the React front-end and built the human review step into the AI pipeline, across the V1.8 → V2.3 rebuild.
A free WCAG 2.2 accessibility platform: dual-engine scanner, contrast checker, interactive checklist, and dashboard. Built solo across design, React, and Node.js at CloverX Limited.
A redesign of a teen tech-education platform: 10 production-grade screens and a complete design system, across mobile and web.
A full Shopify rebuild for an artisanal coffee roaster, from editorial product pages to a subscription, brewing guides, limited drops, and bean traceability. Research-led IA, solo on design and Liquid.
A full rebrand and multi-page site for a Boca Raton custom motorcycle shop, anchored on a 55-respondent survey and a dual-brand architecture.
03 · Patterns · Hero demo
Hero demo
Live AI-Require demo on the home page. Types a transcript, parses it into a structured requirement, cycles three examples. Prev / next + clickable pips, plus a reduced-motion fallback.
"_"
- type:feature
- actor:admin
- condition:viewing user list
- spec:show last_login_at
- priority:medium
04 · Brand · Palettes
Brand palettes
Each case study scopes its own brand palette via
[data-brand] on the page root. Components read
--brand, --brand-pop, etc.