Personal portfolio website | Full Stack Developer.

• Framework: Next.js 15 (App Router)
• Styling: Tailwind CSS v4 + Custom CSS Design System
• Typography: Inter (headings), JetBrains Mono (code/labels)
• Deployment: Vercel

The site uses a custom design system built around these principles:

• Color Palette:

  • Charcoal background: #0F1115
  • Warm off-white text: #F4F3EE
  • Slate gray (secondary): #6B7280
  • Burnt amber accent: #C46A2B

• Voice: Calm, incisive, human, capable

• Style: Clean, minimalistic, functional

app/
|-- page.jsx          # Home - Hero + Terminal animation
|-- projects/         # Work - Case study style project cards
|-- stories/          # Labs - Tutorials and technical writing
|-- about/            # About - Restrained credibility
|-- contact/          # Contact - All contact methods
|-- globals.css       # Design system + all styles
|-- layout.tsx        # Root layout + metadata

components/
|-- Navigation.jsx    # Nav with glitch effect + mobile menu
|-- Navigation.css    # Responsive nav styles
|-- Terminal.jsx      # Terminal animation component
|-- Typewriter.jsx    # Typewriter effect
|-- Footer.jsx        # Footer with social links

# Install dependencies
npm install

# Run development server
npm run dev

# Build for production
npm run build

# Start production server
npm start

• Add additional case studies and productions
• Update Labs section with content
• Add Open Graph images for social sharing
• Run Lighthouse performance audit
• Full accessibility review

• Live Site
• GitHub
• LinkedIn
• X/Twitter

Built with care by Bree.