Components
Atoms to organisms — each component built with accessibility, motion, and dark mode in mind.
Navigation
Frosted Pill Nav
Condensed nav shown on scroll. Backdrop blur with border.
Work Dropdown
Project list shown on hover over work nav link.
Hamburger Menu
Mobile nav trigger. Click to toggle between bars and ✕.
Buttons & Pills
Available Pill
Hero status indicator. Violet border with pulsing green dot.
See Work Pill
Hero CTA. Arrow bounces on hover, scrolls to work section.
Category Tag
Work card labels. JetBrains Mono 9px, violet, outlined pill.
ESC Button
Overlay dismiss control. Used in lightbox and mobile menu.
Cards
84%
Reduction in onboarding time
Stat Card
Case study overview metric. Large Gambarino number + mono label.
KEY INSIGHT
Two users, two needs.
Different mental models required distinct role-based interfaces.
Key Insight Card
Highlights research or problem findings with a violet accent label.
Rhythm Kumar
UX/UI Design Intern
Anissa Tran
Sr. Frontend Engineer
Team Member Card
Collaborator list. Highlighted variant has a violet left border.
“
A quick learner, highly adaptable, and a team player.
Anissa Tran
Fullstack Engineer, BlueVoice
Testimonial Card
Large opening quote mark, body quote text, and attribution line.
Interactive
Accordion
Expand/collapse items. First item open by default. Chevron rotates.
Filter Tabs
Active tab shows violet border. Used in Syncro status filtering.
Click to expand
Click to Expand
Zoom-in cursor signals expandability. Opens the lightbox overlay.
Theme Toggle
Sun/Moon icon swap. Wraps next-themes resolvedTheme setter.
Overlays
Import Modal
Two-zone upload modal: drag & drop area + file type chips.
Lightbox
Full-screen dark overlay for expanded images. Closes on click or Esc.
Typography
OVERVIEW
Section Label
JetBrains Mono 10px, uppercase, wide tracking. Used as eyebrow text.
A tool that kept design in sync.
Display Heading
Gambarino serif, 36px. Primary section heading across case studies.
Thoughtful, human, and impactful design experiences.
Body Copy
Switzer 16px, lineHeight 1.8. Primary reading text across the site.
Mono Label
JetBrains Mono 11px. Used for metadata, timestamps, and status text.
Motion
Fades in + slides up on scroll intersection
Blur Reveal
IntersectionObserver triggers opacity + blur + translateY on enter.
Image moves at 0.12x scroll speed
Parallax
requestAnimationFrame reads scrollY and applies translateY at 0.12× speed.
0
counting...
Counter Loader
useEffect + setInterval counts 0→100. Click to replay.
Text Scramble
Characters randomize then resolve left-to-right on scroll into view.