Tech Stack
Next.js 15
App Router, Server Components
React 19
Latest with Server Actions
TypeScript
Strict mode throughout
Tailwind CSS v3
Utility-first styling
shadcn/ui
29+ customized components
Framer Motion
Page transitions, micro-interactions
Motion Primitives
Text animations, scroll effects
Vercel
Edge deployment, ISR
Architecture
portfolio-style-guides/
app/
layout.tsx -- Theme provider, font loading
page.tsx -- Hero + project grid
styleguide/ -- Live component showcase
projects/[slug]/ -- Dynamic project pages
components/
ui/ -- 34 shadcn/ui components
theme-switcher.tsx -- 4-theme state machine
project-card.tsx -- Glassmorphism card w/ hover
lib/
themes.ts -- Terminal | Light | Carbon | Amber
projects.ts -- 45 project definitions
styles/
globals.css -- CSS vars per theme, glow utilities
Key Features
Terminal Glassmorphism
Matrix green and cyan phosphor glow effects with backdrop-filter blur. Cards float over a CRT-scanline background.
4 Complete Themes
Terminal (matrix green), Light (clean modern), Carbon (IBM dark), and Amber (retro CRT). Each reskins all 34 components.
JetBrains Mono Headings
Developer-focused typography with monospace headings and Inter body text. Every font pairing tested across themes.
Dual Project Types
Web and TUI projects with distinct card layouts. Each type has its own metadata schema and rendering style.
Live Style Guide
A /styleguide route showcases every component in every theme. Interactive playground for testing combinations.
Framer Motion Animations
Staggered page transitions, hover micro-interactions, scroll-triggered reveals, and theme-switch morphing.
34 shadcn/ui Components
Stats
45
Projects
4
Themes
34
UI Components
46.1
MB Size
4
Stars
Python 46%
TypeScript 46%
CSS 1%
Other 7%
Lessons Learned
- shadcn/ui component system -- copy-paste ownership beats npm dependency chains
- Theme architecture -- CSS variables with a state machine for 4 complete theme sets
- Framer Motion animations -- layout animations, AnimatePresence, and scroll-triggered reveals
- The portfolio that showcased 45 projects -- and then inspired building 195 CSS style guides