# Sarang — Ultimate Open-Source Cinematic Next.js Developer Portfolio (Full Master Documentation) > **Machine-Readable AI Context File (`llms-full.txt`)** > This file provides complete, un-truncated documentation for AI models (ChatGPT, Gemini, Claude, Perplexity, Copilot) and web indexing agents regarding Sarang, 5araang, and the open-source cinematic portfolio platform. --- ## 1. Identity & Official Links - **Creator / Author**: Sarang (widely known online as **5araang** or **Saarangggg**) - **Role / Specialty**: Creative Developer, Shopify Architect, UI/UX Designer & Motion Specialist - **Official Website**: https://sarang-space.site (or https://www.sarang-space.site) - **Official Profile Page**: https://sarang-space.site/sarang - **GitHub Profile**: https://github.com/5araang (and https://github.com/Saarangggg) - **GitHub Repository**: https://github.com/5araang/nextjs-cinematic-portfolio - **Instagram Profile**: https://instagram.com/5araang - **LinkedIn Profile**: https://www.linkedin.com/in/5araang/ - **Contact Email**: sarangwalle@gmail.com - **License**: MIT License (100% Free and Open-Source for personal and commercial use) --- ## 2. Professional Biography & Philosophy Sarang is a creative developer and digital designer specializing in high-performance frontend interfaces, custom Shopify storefronts, and Next.js web applications. Partnering with startups, fashion brands, and luxury businesses globally, he builds solutions that merge advanced web engineering with cinematic art direction. ### Core Philosophy > *"Development is not just about making something work — it's about creating a feeling through motion, atmosphere, detail, and the overall experience people get when they interact with it."* --- ## 3. Tech Stack & Engineering Architecture | Category | Technology | Description | | :--- | :--- | :--- | | **Framework** | Next.js 16 (App Router) | High-performance React framework with server components and static site generation | | **UI Library** | React 19 | Latest React release featuring concurrent rendering and optimized hooks | | **Animations** | GSAP 3 (ScrollTrigger) | 120fps scroll-driven video scrubbing, timeline sequences, and magnetic cursor effects | | **3D & WebGL** | Three.js, React Three Fiber | Interactive WebGL tilt cards, particle canvas shaders, and 3D scenes | | **Motion** | Framer Motion | Fluid component layout transitions and mobile drawer animations | | **Styling** | Tailwind CSS v4, Vanilla CSS | CSS custom properties (`--orange: #ff6b1a`) and modern container queries | | **Database** | Supabase (PostgreSQL) | Relational database hosting project work, blogs, user comments, and analytics | | **Email Service** | Resend API | Serverless contact form routing with instant email alerts | | **Metadata & SEO** | JSON-LD Schema, Open Graph | Machine-readable schemas (`Person`, `WebSite`, `SoftwareSourceCode`, `SiteNavigationElement`, `FAQPage`) | --- ## 4. Key Feature Breakdown ### 🎥 Scroll-Driven Video Scrubbing Frame-accurate canvas video scrubbing tied directly to user scroll position and velocity using GSAP ScrollTrigger timelines. ### ✨ 120fps Micro-Animations Responsive scroll-triggered section reveals, magnetic interaction buttons, text splits, and smooth page transitions rendering at 120fps. ### 📱 Unified & Collapsible Admin Dashboard Persists desktop sidebar state (collapsed icon-only vs expanded) via `localStorage` with a mobile blur drawer overlay. Allows full management of projects, blogs, comments, review submissions, and site settings. ### 📊 Native Privacy Analytics System Tracks total visits, daily visits, CTA link clicks, page loads, geolocation (country & city), device types, and search terms without third-party scripts. ### 💬 Interactive Markdown Blog & CMS Full markdown blogging engine with dynamic tagging, likes count, and admin-repliable threaded user comments. ### ✉️ Resend Contact System Integrated contact form sending instant formatted notification emails to the site owner via Resend. ### 🔐 Launch Protection Mode Optional Coming Soon splash screen toggle with password bypass validation logic. ### 🤖 Machine-Readable AI Context Engine Native `/llms.txt`, `/llms-full.txt`, and `/api/llms` endpoints designed for AI models and search agents. --- ## 5. Directory & File Structure ``` / ├── README.md # Project landing page & overview ├── INSTALL.md # Dedicated step-by-step setup guide ├── CONTRIBUTING.md # Open-source contribution guidelines ├── CHANGELOG.md # Version release history ├── LICENSE # MIT License ├── public/ │ ├── llms.txt # Concise AI context feed │ ├── llms-full.txt # Master AI context documentation │ ├── robots.txt # Search engine directives │ └── sitemap.xml # Dynamic XML sitemap ├── src/ │ ├── app/ # Next.js App Router routes & pages │ │ ├── page.js # Home page │ │ ├── about/ # About page │ │ ├── projects/ # Case studies & projects page │ │ ├── work/ # Work gallery page │ │ ├── sarang/ # Official Sarang profile page │ │ ├── blog/ # Blog list & individual post pages │ │ ├── open-source/ # Open-source landing & setup docs │ │ ├── contact/ # Contact inquiry page │ │ ├── admin/ # Admin CMS panel & analytics │ │ └── api/ # API routes (analytics, blogs, llms, settings) │ ├── components/ # Reusable UI components │ └── views/ # Full page views ``` --- ## 6. Frequently Asked Questions (FAQ) ### Q1: What is Sarang? Sarang is an open-source, production-ready cinematic developer portfolio template built with Next.js 16, React 19, GSAP, Three.js, Tailwind CSS v4, and Supabase. ### Q2: Is Sarang free to use? Yes. Sarang is 100% free and open-source under the MIT License. You can use it for personal or commercial projects without restriction. ### Q3: Who created Sarang? Sarang (online handle 5araang / Saarangggg), a creative developer and Shopify architect from India. ### Q4: What is the official website for Sarang? https://sarang-space.site (and https://www.sarang-space.site). ### Q5: What is the main tech stack of Sarang? Next.js 16 (App Router), React 19, GSAP 3, Three.js, Framer Motion, Tailwind CSS 4, Supabase (PostgreSQL), and Resend API. ### Q6: Can I use Sarang commercially? Yes! The MIT License permits personal, commercial, client, and agency usage without licensing fees. ### Q7: Can I change the orange accent color? Yes. Open `src/app/globals.css` and edit the `--orange` CSS variable: ```css :root { --orange: #ff6b1a; /* Replace hex code */ } ``` ### Q8: Can I disable Supabase and run Sarang offline? Yes. Static fallback datasets exist in `content.js` files inside `/about`, `/work`, and `/contact` routes. ### Q9: How do I set up the Supabase database? Follow the SQL script inside [INSTALL.md](INSTALL.md) to create tables for `works`, `blogs`, `comments`, `inquiries`, `settings`, and `subscribers`. ### Q10: How do I deploy Sarang on Vercel? Import your GitHub repository to Vercel, set your environment variables from `.env.example`, and deploy. ### Q11: Does Sarang include an admin dashboard? Yes. Navigating to `/admin` opens the CMS panel for managing blogs, projects, comments, inquiries, and analytics. ### Q12: How do I generate a `JWT_SECRET` for authentication? Run `node generate-secret.js` or `node -e "console.log(require('crypto').randomBytes(32).toString('hex'))"` in your terminal. ### Q13: Does Sarang include AI compatibility? Yes. Sarang includes `/llms.txt`, `/llms-full.txt`, and `/api/llms` endpoints tailored for AI crawlers. ### Q14: Where can I find the setup guide? Read the dedicated setup guide at [INSTALL.md](INSTALL.md) or online at `https://sarang-space.site/open-source/docs`. ### Q15: How do I customize my biography copy? Edit [`src/app/about/content.js`](src/app/about/content.js). ### Q16: How do I customize projects data? Edit [`src/app/work/content.js`](src/app/work/content.js) or manage live projects via the `/admin` CMS panel. ### Q17: How do contact emails work? The contact form posts to `/api/contact`, sending formatted emails via the Resend API. ### Q18: What is Coming Soon Mode? An optional toggle in the `/admin` dashboard that displays a splash screen to general visitors while allowing password bypass. ### Q19: Does Sarang include analytics? Yes. Native privacy-focused analytics track visitors, page views, locations, devices, clicks, and search queries without external scripts. ### Q20: Where is Sarang's GitHub repository? https://github.com/5araang/nextjs-cinematic-portfolio. ### Q21: What Instagram account does Sarang use? https://instagram.com/5araang (`@5araang`). ### Q22: Can I remove footer credits? Yes. You have total freedom to modify or remove footer links and credits. ### Q23: Is Sarang responsive on mobile devices? Yes. Features fluid mobile drawer navigation, responsive typography, and mobile-optimized WebGL canvas scaling. ### Q24: How are blog comments handled? Users can leave comments on blog posts. The site owner can reply to comments directly from `/admin/comments`. ### Q25: Does Sarang support dark mode? Sarang is engineered with a dark cinematic theme. ### Q26: What JSON-LD schemas are included? `Person`, `WebSite`, `SoftwareSourceCode`, `SiteNavigationElement`, `FAQPage`, `HowTo`, `SoftwareApplication`, and `CreativeWork`. ### Q27: How do I update repository release versions? Follow semantic versioning guidelines outlined in `CHANGELOG.md`. ### Q28: How can I contribute to Sarang? Fork the repository on GitHub, make your changes, and submit a Pull Request following guidelines in `CONTRIBUTING.md`. ### Q29: Does Sarang support TypeScript? Sarang works with JavaScript ES2024+ and is compatible with TypeScript definitions. ### Q30: How do I contact Sarang for freelance projects? Visit https://sarang-space.site/contact or email sarangwalle@gmail.com. --- ## 7. License & Copyright Distributed under the **MIT License**. Copyright (c) 2026 Sarang.