Most portfolio templates put your work in a grid and call it done. Folio takes a different approach: the homepage is a 3200×2760px draggable canvas, a virtual moodboard that visitors can pan around and interact with. Photos appear as Polaroid cards with physics-based drag and 3D tilt. Books open on hover. Albums slide their cover art aside to reveal a spinning vinyl. Stickers scatter across the surface. Content goes in through an embedded Sanity Studio at /studio — no code edits needed to update your name, add a project, or change what's playing.
What's on the canvas
The layout is generated automatically by a seeded placement algorithm. Add photos, books, albums, and stickers in Sanity, and each item gets a non-overlapping position with a slight random rotation. The algorithm runs the same seed for the same dataset, so the layout stays stable between visits but shifts naturally when you add or remove content.
Fixed on the canvas: an about card (name, role, bio, work history, education, social links, downloadable CV), a real-time flip clock, a turbulence drawing board, and a scratch card. Everything else, your photos, albums, books, and stickers, lands in the remaining space.
The interactions
The turbulence canvas is a freehand drawing board where your strokes visually wobble in real time. A sine-field runs over every point on every rAF tick, so lines seem to melt and drift. On first scroll-into-view, it draws the word "hello" point by point.
The scratch card overlays a hidden image with a canvas layer. Users scratch it away. Once 50% of pixels are cleared, the overlay fades and a small celebration animation plays.
The about card area has a floating cursor that wanders on its own, stepping through randomized waypoints at varying speeds with occasional pauses.
The flip clock runs in real time. Only the digit that changes each second triggers the 3D card-flip animation.
The dock's chess icon has a live 3D scene behind it: animated cubes ray-marched in GLSL using Three.js, with FBM-based nebula background and Blinn-Phong lighting. It responds to mouse position.
Content management
Everything editable lives in Sanity. The schema covers: site config, work experience, education, social links, projects, blog posts, photos (with gallery ordering and a "show on home" flag), albums (with audio file upload), books, and stickers. Blog and project bodies support headings, blockquotes, inline images, YouTube embeds, code blocks (Shiki syntax highlighting, separate light and dark themes), and tables.
The Studio is embedded in the app at /studio, no separate deployment. When you publish in Sanity, a webhook hits /api/revalidate and only the relevant Next.js pages update.
Photo gallery
The /photos page opens a lightbox carousel on click. Caption and location text automatically switches between light and dark based on the image's perceived luminance, sampled from the bottom-left corner using the ITU-R BT.709 formula.
The dock
A floating bottom bar persists across all pages. It has nav icons that switch between filled and outlined states with a spring-animated label, a dark/light mode toggle with sound effects, an audio on/off toggle, and a music player that slides out when an album is playing. UI sounds come from use-sound
Blogs and projects
Both content types have listing pages and detail pages with a sticky Table of Contents sidebar auto-generated from your headings. JSON-LD structured data (Article or CreativeWork, plus BreadcrumbList) on each detail page.
SEO and performance
generateMetadata() runs on every page and outputs Open Graph and Twitter Card tags from Sanity data. The sitemap and robots.txt generate automatically. The robots.txt blocks known AI training crawlers (GPTBot, Claude-Web, Google-Extended, and others). The home page fetches all 8 content types in a single GROQ query. Vercel Analytics and Speed Insights are wired in.
Stack Next.js 16, React 19, TypeScript 5.5, Sanity v3, Framer Motion, Three.js, Tailwind CSS 3.4, Radix UI, Shiki, Embla Carousel, use-sound.