Portfolio Minimal

About This Template

Portfolio Minimal is a brutally spare dark-and-gold portfolio for creative developers, designers, and freelancers who want typography to carry the page. One long-scroll home runs hero, selected work, about, and contact, plus a dynamic project route that renders each Markdown case study. Display type is enormous — the h1 scales from 64px to 144px with clamp() — set in Cormorant Garamond at weight 300 against near-black #0a0a0a with a champagne-gold #d4af37 accent. Section reveals use native CSS animation-timeline: view() instead of a JavaScript observer, so scroll animation costs almost nothing. A custom gold cursor orb tracks the pointer with lerped easing and swells over links. Projects live in a Zod-typed content collection; Lenis smooth scroll and Astro View Transitions handle navigation.

Signature

The system cursor is hidden site-wide and replaced by a 40px gold radial-gradient orb that chases the pointer with 0.15 lerp easing inside a requestAnimationFrame loop, composited with mix-blend-mode: screen so it genuinely glows over the near-black background. Hover any link or button and it swells to 60px. Because it is mounted with transition:persist, it survives View Transitions navigation without re-initializing, and it hides itself and skips initialization entirely on coarse-pointer devices. Everything else animates through native CSS animation-timeline: view() — the scroll reveals ship with no JavaScript at all.

Features

• 2 routes — a single-scroll home (Hero, Selected Work, About, Contact) plus a dynamic project detail page
• Custom gold cursor orb — 40px radial gradient followed with 0.15 lerp easing in a requestAnimationFrame loop
• Cursor uses mix-blend-mode: screen and swells from 40px to 60px over any link, button or [role="button"]
• Native CSS scroll-driven animations — animation-timeline: view() with animation-range entry 0% cover 40%, zero IntersectionObserver code
• Cursor lives behind transition:persist so it survives View Transitions navigation without re-initializing, and disables itself on coarse-pointer devices
• Massive fluid display type — h1 clamp(64px, 12vw, 144px), h2 clamp(48px, 8vw, 96px), h3 clamp(32px, 5vw, 56px)
• Projects content collection with a Zod schema (title, year, role, description, order, featured) — 3 sample projects in Markdown
• Project detail pages generated by getStaticPaths from [...slug].astro — role/year header, rendered Markdown body and back link
• Selected Work list with hover indent and a View Project arrow that rotates 45° and widens its gap on hover
• Full-page SVG grain overlay — feTurbulence fractalNoise at 3% opacity, fixed and pointer-events: none
• Lenis smooth scroll (duration 0.8) wired into gsap.ticker with lagSmoothing(0) and ScrollTrigger.update
• Astro View Transitions with a full Lenis and ScrollTrigger teardown on astro:before-preparation — no leaked instances between pages
• Oversized mailto contact — email set at clamp(32px, 6vw, 72px) with GitHub, Twitter, LinkedIn and Dribbble links
• About section with three editable skill groups — Development, Design and Creative
• Base-path safe links via import.meta.env.BASE_URL — deploys to a GitHub Pages subdirectory out of the box
• TypeScript strict (astro/tsconfigs/strict), prefers-reduced-motion handling, responsive from 375px — only two runtime dependencies beyond Astro (GSAP and Lenis)

Deployment