Mann's Portfolio

This is my 2025 portfolio — built to feel like a polished product page, not a PDF with a navigation bar.
Lots of motion, lots of glass, and a few “wait… that’s interactive?” moments. That's right.
Try switching between light & dark mode here, and see the difference.

The vibe · What’s inside · Run it locally · EmailJS setup · Project map

---

The vibe

A soft, cloudy parallax background. Liquid-glass UI. Snappy motion that’s more “buttery” than “bouncy for no reason.” Everything is designed to reward hovering, scrolling, and clicking around.

The background layers live in App.tsx and swap cleanly between light/dark using public/clouds.png and public/clouds_night.png.

---

What’s inside

Liquid / Chromatic Glass UI

• Core glass styles in index.css (.glass, .chromatic-glass, .liquid-card).
• Reusable “section enters like it has a pulse” wrapper: SectionWrapper in components/ui/SectionWrapper.tsx.

Motion-first layout

• Site-wide motion language powered by Framer Motion (you’ll see it everywhere).
• Smooth scrolling via Lenis RAF loop in App.tsx.

The dock + guided onboarding

• The bottom dock has that magnetic “macOS energy” when you move your cursor across it.
• First-time visitors get a spotlight walkthrough stored in localStorage, implemented in components/Navbar.tsx.

Interactive hero mini‑game (yes, the hero)

• A 5×5 “toggle neighbors” puzzle with win confetti and an optional auto-solve.
• The whole thing lives in components/Hero.tsx.

Custom cursor system (the subtle flex)

• Global .cur/.ani cursor set wired in index.css.
• Cursor public live in public/cursors/.

Contact form that actually sends

• EmailJS integration + success/error UX in components/Contact.tsx.

Resume viewer

• A “macOS window” style resume viewer with zoom controls in components/Resume.tsx.

---

Run it locally

npm install
npm run dev

Vite runs on port 3000 (configured in vite.config.ts).

---

EmailJS setup

Create .env.local in the repo root:

VITE_EMAILJS_SERVICE_ID=...
VITE_EMAILJS_TEMPLATE_ID=...
VITE_EMAILJS_PUBLIC_KEY=...

The form uses these values in components/Contact.tsx.

---

Project map

App shell / orchestration

• Parallax background + smooth scroll + intro gating: App.tsx
• Entry point: index.tsx

Sections

• Dock + spotlight guide: components/Navbar.tsx
• Hero + mini-game: components/Hero.tsx
• Projects bento grid: components/Projects.tsx
• Experience timeline: components/Experience.tsx
• Resume window: components/Resume.tsx
• Email form: components/Contact.tsx
• Footer + back-to-top: components/Footer.tsx

UI primitives

• Tilt + glow card: GlowingCard in components/ui/GlowingCard.tsx
• CTA button: LiquidButton in components/ui/LiquidButton.tsx
• Hover scramble text: TextScramble in components/ui/TextScramble.tsx
• Parallax typography band: VelocityScroll in components/ui/VelocityScroll.tsx

Types live in types.ts (ex: Project, ExperienceItem).

---

License / usage

This is my personal portfolio. If you borrow ideas (please do), swap out the branding, copy, and public — and leave a little attribution somewhere.