A comprehensive skill guide for building modern portfolio websites using Next.js 14+ with TypeScript, Sass Modules with BEM methodology, GSAP for advanced animations, and React Three Fiber for 3D visual elements. Implements a three-layer architecture separating skeleton DOM, canvas effects, and chaos overlays.
Build a Next.js (App Router) + TypeScript portfolio using Sass Modules + BEM. GSAP is used for complex motion (especially scroll choreography). R3F is REQUIRED required but lightweight by default (CRT/ASCII postprocessing).
Layer 1 (Skeleton / OS): DOM + CSS
Layer 2 (Medium): R3F Canvas + postprocessing
Layer 3 (Chaos / Zine): DOM overlay accents
src/ app/ layout.tsx page.tsx about/page.tsx projects/page.tsx blogs/page.tsx contact/page.tsx components/ shell/ home/ r3f/ overlays/ styles/ globals.scss tokens.scss lib/ motion/ hooks/
components/shell/: global layout shell and shared UI (Header/Footer/Nav/Menu).components/home/: page sections for / (Hero/About/Projects/Blogs/etc).components/r3f/: Layer 2 Canvas-only components (scenes, postFX, materials).components/overlays/: Layer 3 DOM overlay accents (stickers/tape/glitch).lib/motion/ for reusable GSAP setup, helpers, and timeline presets.lib/hooks/ for shared motion hooks (reduced motion, media queries).ref + gsap.context() over global selectors.Example structure: components/ home/ hero/ Hero.tsx Hero.module.scss Hero.motion.ts lib/ motion/ gsap.ts scroll.ts hooks/ useReducedMotion.ts
clamp() and are allowed to wrap intentionally.--gutter, --content-max, --section-pad-y, --section-gapstyles/tokens.scss + styles/typography.scss.When any of the following is true:
prefers-reduced-motionpointer: coarse (touch)Then: