Sarang

Sarang is a free, MIT-licensed cinematic developer portfolio template built on Next.js 16 (App Router) and React 19, combining scroll-driven video scrubbing, GSAP animation, Three.js WebGL effects, and a Supabase-backed admin CMS into a single deployable personal site.

What is Sarang?

Sarang is an open-source portfolio template for developers, designers, and creative engineers, authored by Sarang (@5araang / @Saarangggg) and published at sarang-space.site. It takes your profile copy, project data, and blog posts — supplied either through a Supabase-backed admin dashboard or static content.js fallback files — and renders a full personal website with animated project pages, a markdown blog, contact forms routed through Resend, and privacy-friendly analytics. It runs on Next.js 16 with React 19, deploys zero-config to Vercel, and is released under the MIT License.

Key Features

• Scroll-driven video scrubbing — frame-accurate video playback synchronized to the visitor's scroll speed on hero and section transitions.
• Animation and 3D stack — GSAP 3 with ScrollTrigger, Framer Motion, and Three.js via React Three Fiber for magnetic interactions and WebGL effects.
• Styling system — Tailwind CSS v4 plus vanilla CSS variables, with the signature accent --orange: #ff6b1a set globally in src/app/globals.css.
• Collapsible admin dashboard — desktop icon-only sidebar with localStorage persistence and a mobile blur-overlay drawer.
• Native analytics — built-in visitor tracking, link clicks, page loads, and active-user counts without third-party bloat.
• Markdown blog with threaded comments — tag filtering, admin-repliable comment threads, and a full CMS manager.
• Contact routing via Resend — custom inquiry forms with instant email notifications through the Resend API.
• AI/LLM indexing — llms.txt and llms-full.txt endpoints plus JSON-LD schemas (Person, WebSite, SoftwareSourceCode) and dynamic /sitemap.xml.
• Launch protection — optional Coming Soon splash screen with password bypass validation.

Who is it for?

• Software engineers and full-stack developers: publish projects, architecture notes, and live demos on an animated personal site.
• Frontend and UI/UX engineers: use the GSAP and Framer Motion components to display micro-interactions and responsive layouts.
• Freelancers and agencies: capture inbound inquiries through the Resend-backed contact system and monitor them with built-in analytics.
• Technical writers and creators: publish markdown posts with reader comment threads and dynamic tag filtering.

What can you do with Sarang?

• Stand up a portfolio fast: clone the repo, set Supabase and Resend environment variables per INSTALL.md, and deploy to Vercel with no extra configuration.
• Run content without code: manage blog posts, comments, and analytics data from the admin dashboard backed by Supabase PostgreSQL.
• Run without a database: rely on the static fallback files in content.js for about, work, and contact pages to host the portfolio offline.
• Rebrand the template: swap the --orange CSS variable and edit src/app/about/content.js, src/app/work/content.js, and src/app/contact/content.js to change copy and accent color.

FAQ

Is Sarang free to use?

Yes. Sarang is distributed under the MIT License, so you can modify, brand, host, and deploy it commercially without restriction, and you may remove or alter footer credits and branding.

Do I need Supabase to run Sarang?

Supabase powers the CMS, blog comments, and analytics, but static fallbacks exist in the content.js files, so the portfolio can run without a database setup.

Can I deploy Sarang on Vercel?

Yes. Sarang is optimized for zero-config deployment on Vercel: import the GitHub repository and set the environment variables. Netlify and custom Node.js servers are also listed as deployment targets.