Launch Your Website. With Simplicity.

macOS Tahoe Portfolio is an interactive web-based portfolio template that replicates the macOS Tahoe operating system inside a web browser. The template is built with React 19, TypeScript, Vite, UnoCSS, Framer Motion, and Zustand. All content is managed through Sanity, a headless CMS. Site owners can update their bio, add projects, publish blog posts, add work history, and change desktop wallpapers directly from the Sanity Studio dashboard without editing the code. Key features Desktop interface: Functional top menu bar with live clock, control center, and status indicators. Animated application dock with magnification on hover. Native desktop utilities including launchpad, notification center, dynamic island, and spotlight search. Window management: Draggable, resizable, and stackable application windows powered by react-rnd. Working macOS-style window controls to minimize, maximize, and close windows. Dynamic window focus layering when clicking between active tasks. Built-in applications: Safari: A structured project directory to present client work and live deployments with category filtering. Bear: A technical note and blog reader supporting Markdown, KaTeX math typesetting, and code syntax highlighting. Finder: A file browser for navigating documents, images, and downloadable assets such as a PDF resume. Photos: An image gallery for photography or UI designs, organized with date, location tags, and favorite badges. Music: An audio player with customizable tracklists, album art displays, and a functional progress scrub bar. Messages: An interactive chat simulator suitable for presenting client reviews or an interactive FAQ. FaceTime: A camera application that connects directly to the visitor's local webcam. Calculator and Clock: A working macOS-style arithmetic calculator and a world clock with timers. System Settings and About This Mac: User profile cards, career timeline, education credentials, resume downloads, and appearance preferences. Architecture and CMS tooling: Dedicated /studio route for the embedded Sanity Studio editor. A pre-configured seed script to populate sample data on initial setup. Structured SEO head components supporting Open Graph images and JSON-LD schema markup. Advantages Higher visitor engagement: Visitors interact with windows, search files, and play audio rather than scanning a standard single-page layout. Non-technical maintenance: Content updates take place in an intuitive admin form. Updating project screenshots, descriptions, or resume links does not require touching source code or rebuilding the repository manually. Fast page delivery: Built with Vite and UnoCSS, keeping asset sizes small and ensuring animations remain fluid on modern browsers. Clean, modular code: Written in strict TypeScript with isolated React components, making it straightforward for developers to add new windows or custom widgets. Uniqueness Complete OS metaphor: While most portfolios rely on vertical scrolling layouts, this template implements a functional desktop environment with its own file tree, search utility, and window manager. Accurate interface details: Includes blurred frosted-glass window materials, realistic window drop shadows, system sounds, and responsive desktop shortcuts. Unified multi-disciplinary layout: Allows professionals to present software projects (Safari), technical writing (Bear), visual assets (Photos), and formal credentials (About This Mac) inside a single

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.

A refined portfolio website template for designers, creative professionals, and independent studios, built to present selected work, share ideas, and establish a distinctive creative presence. The editorial layout combines projects, personal information, journal entries, and visual references into a structured portfolio experience. All content can be managed through a connected CMS without editing the code. Product description A single-page editorial portfolio website with dedicated pages for projects and journal posts. It is designed for visual designers, art directors, creative developers, photographers, and independent creatives who want a polished online presence centered around their work. The homepage is organized into carefully spaced sections for selected projects, an about profile, professional experience, education, journal entries, and a visual archive. The restrained typography, generous whitespace, and dark contrast sections give the website a sophisticated editorial character while keeping the focus on the content. Content such as project information, images, biography, experience, journal posts, and visual archive items can be managed through a connected CMS. You can update your portfolio from a web-based dashboard without modifying the source code. Key features Editorial hero section. A large typographic introduction immediately communicates your creative identity and establishes a strong visual first impression. Selected work showcase. Highlight your most important projects in a clean two-column grid with large imagery and concise project titles. A separate Works archive provides access to the complete collection. About Me section. Introduces your background through a profile image, biography, professional experience, and education. The dark background creates a strong visual transition from the main portfolio section. Experience & education timeline. Present your professional background, previous roles, and educational history in a structured editorial layout that is easy to scan. Journal section. Share articles, thoughts, processes, and creative insights through a minimal list-based journal layout. Each post can be opened as an individual article. Visual archive. Display photography, references, experiments, or personal visual collections in a compact image grid. The section provides a secondary space for work that does not belong in the main project archive. Project detail pages. Give individual projects their own dedicated page where you can present project descriptions, imagery, process, and additional information. Blog / journal detail pages. Each article has its own reading experience with structured typography and editorial spacing. Strong typographic hierarchy. Large serif headlines, small uppercase labels, restrained navigation, and generous whitespace create a refined editorial aesthetic. Dark contrast sections. Selected sections use a near-black background to create visual rhythm and separate personal information from the main portfolio content. Contact call-to-action. A dedicated closing section encourages visitors to start a conversation or discuss a potential project through a simple contact button. Responsive layout. The editorial grid and typography adapt across desktop, tablet, and mobile screen sizes while maintaining the visual hierarchy. CMS-driven content. Projects, journal posts, visual archive items, profile information, experience, education, and other editable content can be managed through the connected CMS without changing the code. Pages included Home — Hero, selected works, about, experience, education, journal, visual archive, and contact CTA. Works — Complete project archive. Works detail — Individual project / case study page. Journal — Complete article archive. Journal post — Individual article page. Visual Archive — Collection of personal or creative visual references. Studio — CMS dashboard for managing portfolio content. Design style Minimal and editorial, with an off-white background, near-black typography, and subtle neutral tones. Large serif headlines create a sophisticated magazine-inspired character, while small uppercase labels and restrained sans-serif text provide structure and hierarchy. The layout uses generous whitespace, thin dividers, asymmetric spacing, and carefully proportioned image grids to create a calm and premium visual experience. A full-width dark section introduces contrast around the About area, while the final CTA uses a warm neutral background to create a distinct closing moment. The overall design is intentionally restrained, allowing the work, typography, photography, and personal identity to become the primary visual elements.

macOS Tahoe Portfolio is an interactive web-based portfolio template that replicates the macOS Tahoe operating system inside a web browser. The template is built with React 19, TypeScript, Vite, UnoCSS, Framer Motion, and Zustand. All content is managed through Sanity, a headless CMS. Site owners can update their bio, add projects, publish blog posts, add work history, and change desktop wallpapers directly from the Sanity Studio dashboard without editing the code. Key features Desktop interface: Functional top menu bar with live clock, control center, and status indicators. Animated application dock with magnification on hover. Native desktop utilities including launchpad, notification center, dynamic island, and spotlight search. Window management: Draggable, resizable, and stackable application windows powered by react-rnd. Working macOS-style window controls to minimize, maximize, and close windows. Dynamic window focus layering when clicking between active tasks. Built-in applications: Safari: A structured project directory to present client work and live deployments with category filtering. Bear: A technical note and blog reader supporting Markdown, KaTeX math typesetting, and code syntax highlighting. Finder: A file browser for navigating documents, images, and downloadable assets such as a PDF resume. Photos: An image gallery for photography or UI designs, organized with date, location tags, and favorite badges. Music: An audio player with customizable tracklists, album art displays, and a functional progress scrub bar. Messages: An interactive chat simulator suitable for presenting client reviews or an interactive FAQ. FaceTime: A camera application that connects directly to the visitor's local webcam. Calculator and Clock: A working macOS-style arithmetic calculator and a world clock with timers. System Settings and About This Mac: User profile cards, career timeline, education credentials, resume downloads, and appearance preferences. Architecture and CMS tooling: Dedicated /studio route for the embedded Sanity Studio editor. A pre-configured seed script to populate sample data on initial setup. Structured SEO head components supporting Open Graph images and JSON-LD schema markup. Advantages Higher visitor engagement: Visitors interact with windows, search files, and play audio rather than scanning a standard single-page layout. Non-technical maintenance: Content updates take place in an intuitive admin form. Updating project screenshots, descriptions, or resume links does not require touching source code or rebuilding the repository manually. Fast page delivery: Built with Vite and UnoCSS, keeping asset sizes small and ensuring animations remain fluid on modern browsers. Clean, modular code: Written in strict TypeScript with isolated React components, making it straightforward for developers to add new windows or custom widgets. Uniqueness Complete OS metaphor: While most portfolios rely on vertical scrolling layouts, this template implements a functional desktop environment with its own file tree, search utility, and window manager. Accurate interface details: Includes blurred frosted-glass window materials, realistic window drop shadows, system sounds, and responsive desktop shortcuts. Unified multi-disciplinary layout: Allows professionals to present software projects (Safari), technical writing (Bear), visual assets (Photos), and formal credentials (About This Mac) inside a single

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.

A refined portfolio website template for designers, creative professionals, and independent studios, built to present selected work, share ideas, and establish a distinctive creative presence. The editorial layout combines projects, personal information, journal entries, and visual references into a structured portfolio experience. All content can be managed through a connected CMS without editing the code. Product description A single-page editorial portfolio website with dedicated pages for projects and journal posts. It is designed for visual designers, art directors, creative developers, photographers, and independent creatives who want a polished online presence centered around their work. The homepage is organized into carefully spaced sections for selected projects, an about profile, professional experience, education, journal entries, and a visual archive. The restrained typography, generous whitespace, and dark contrast sections give the website a sophisticated editorial character while keeping the focus on the content. Content such as project information, images, biography, experience, journal posts, and visual archive items can be managed through a connected CMS. You can update your portfolio from a web-based dashboard without modifying the source code. Key features Editorial hero section. A large typographic introduction immediately communicates your creative identity and establishes a strong visual first impression. Selected work showcase. Highlight your most important projects in a clean two-column grid with large imagery and concise project titles. A separate Works archive provides access to the complete collection. About Me section. Introduces your background through a profile image, biography, professional experience, and education. The dark background creates a strong visual transition from the main portfolio section. Experience & education timeline. Present your professional background, previous roles, and educational history in a structured editorial layout that is easy to scan. Journal section. Share articles, thoughts, processes, and creative insights through a minimal list-based journal layout. Each post can be opened as an individual article. Visual archive. Display photography, references, experiments, or personal visual collections in a compact image grid. The section provides a secondary space for work that does not belong in the main project archive. Project detail pages. Give individual projects their own dedicated page where you can present project descriptions, imagery, process, and additional information. Blog / journal detail pages. Each article has its own reading experience with structured typography and editorial spacing. Strong typographic hierarchy. Large serif headlines, small uppercase labels, restrained navigation, and generous whitespace create a refined editorial aesthetic. Dark contrast sections. Selected sections use a near-black background to create visual rhythm and separate personal information from the main portfolio content. Contact call-to-action. A dedicated closing section encourages visitors to start a conversation or discuss a potential project through a simple contact button. Responsive layout. The editorial grid and typography adapt across desktop, tablet, and mobile screen sizes while maintaining the visual hierarchy. CMS-driven content. Projects, journal posts, visual archive items, profile information, experience, education, and other editable content can be managed through the connected CMS without changing the code. Pages included Home — Hero, selected works, about, experience, education, journal, visual archive, and contact CTA. Works — Complete project archive. Works detail — Individual project / case study page. Journal — Complete article archive. Journal post — Individual article page. Visual Archive — Collection of personal or creative visual references. Studio — CMS dashboard for managing portfolio content. Design style Minimal and editorial, with an off-white background, near-black typography, and subtle neutral tones. Large serif headlines create a sophisticated magazine-inspired character, while small uppercase labels and restrained sans-serif text provide structure and hierarchy. The layout uses generous whitespace, thin dividers, asymmetric spacing, and carefully proportioned image grids to create a calm and premium visual experience. A full-width dark section introduces contrast around the About area, while the final CTA uses a warm neutral background to create a distinct closing moment. The overall design is intentionally restrained, allowing the work, typography, photography, and personal identity to become the primary visual elements.