A cinematic scrollytelling portfolio built with Next.js, Framer Motion, and HTML5 Canvas.
# 1. Install dependencies
npm install
# 2. Run development server
npm run dev
# 3. Open in browser
# → http://localhost:3000portfolio/
├── app/
│ ├── globals.css ← Fonts, animations, custom cursor
│ ├── layout.tsx ← Root layout + metadata
│ └── page.tsx ← Main page (assembles all sections)
├── components/
│ ├── ScrollyCanvas.tsx ← Canvas hero (89-frame scroll scrub)
│ ├── Overlay.tsx ← Parallax text phases synced to scroll
│ ├── Navbar.tsx ← Sticky nav with smooth scroll links
│ ├── ScrollProgress.tsx ← Top bar + side progress indicator
│ ├── Projects.tsx ← Glassmorphism project cards
│ ├── About.tsx ← Bio + timeline
│ ├── Skills.tsx ← Animated skill bars + certifications
│ ├── Contact.tsx ← CTA + contact links + footer
│ └── Cursor.tsx ← Custom cursor with ring lag
├── public/
│ └── sequence/ ← Your 89 GIF frames (frame_00 → frame_88)
├── tailwind.config.ts
├── next.config.js
└── package.json
- Scroll-scrubbed canvas animation — 89 frames mapped to scroll position
- 3-phase parallax text overlay — center → left → right with opacity/motion transitions
- Custom cursor with trailing ring effect
- Scroll progress indicator — top bar + side percentage counter
- Sticky navbar with smooth scroll + glass blur on scroll
- Glassmorphism project cards with hover glow micro-interactions
- Animated skill bars triggered on scroll into view
- Cinematic vignette + bottom fade on canvas
- Dark futuristic theme — Bebas Neue + DM Sans + JetBrains Mono
| Token | Value | Usage |
|---|---|---|
ember |
#FF4D1C |
Accent, CTAs |
frost |
#4DAAFF |
Secondary accent |
ink |
#050508 |
Background |
smoke |
#8888AA |
Muted text |
ash |
#1A1A2E |
Card backgrounds |
- Frames: Replace
/public/sequence/GIFs with your own sequence - Content: Edit component files in
/components/ - Colors: Update
tailwind.config.tsandglobals.css
- Next.js 14 (App Router)
- TypeScript
- Tailwind CSS
- Framer Motion
- HTML5 Canvas