# Templates & Starters Directory — Gyanranjan Priyam

> Collection of free and open-source web templates, boilerplates, and developer resources built by Gyanranjan Priyam.

- Portfolio: https://www.priyam.tech
- Templates URL: https://www.priyam.tech/templates
- Total Templates: 3

---

## 1. GSAP Portfolio

- **URL**: https://www.priyam.tech/templates/gsap-portfolio
- **Markdown**: https://www.priyam.tech/templates/gsap-portfolio.md
- **Live Demo**: https://gsap.portfolio.gyanranjanpriyam.tech
- **Source Code**: https://github.com/Gyanranjan-Priyam/new-portfolio
- **Category**: Portfolio
- **Year**: 2025
- **Tech Stack**: Next.js, React, TypeScript, Tailwind CSS, GSAP, Framer Motion, Three.js, Lenis, Google Gemini AI, OpenAI, Nodemailer

### Description:
A modern, high-performance personal portfolio website built with Next.js 16 and React 19, featuring immersive animations, interactive 3D visuals, and AI-powered capabilities — deployed on Cloudflare Pages.

Powered by GSAP, Framer Motion, and Lenis for buttery-smooth scroll and transition effects. Three.js brings interactive 3D elements to life, creating an immersive and memorable visual experience for visitors.

AI integrations via Google Gemini and OpenAI through OpenRouter add intelligent interactivity. Server-side email via Nodemailer, dark/light theming with next-themes, and Vercel Analytics round out a production-ready personal brand site.

### Highlights:
- Built with Next.js 16 and React 19 for cutting-edge performance
- Deployed on Cloudflare Pages with custom pre/post build scripts
- AI-powered features via Google Gemini and OpenAI (OpenRouter)
- Buttery smooth scroll experience powered by Lenis
- Interactive 3D visuals using Three.js
- Dark/light theme support with next-themes
- 95.3% TypeScript codebase — fully type-safe

---

## 2. SaaS UI

- **URL**: https://www.priyam.tech/templates/saas-ui
- **Markdown**: https://www.priyam.tech/templates/saas-ui.md
- **Live Demo**: https://saas-ui.gyanranjanpriyam.tech
- **Source Code**: https://github.com/Gyanranjan-Priyam/saas-ui
- **Category**: SaaS
- **Year**: 2025
- **Tech Stack**: Next.js, React, TypeScript, Tailwind CSS, Prisma, PostgreSQL, Better Auth, TanStack Query, TanStack Table, Zustand, Framer Motion, Radix UI, shadcn/ui, Zod, Recharts, Upstash Redis, Nodemailer, Google APIs, dnd kit

### Description:
A feature-rich SaaS application UI built with Next.js 16 and React 19, combining a robust backend stack (Prisma + PostgreSQL + Upstash Redis) with a polished, production-ready frontend experience.

Authentication is handled via Better Auth, with full form validation through Zod and server-side email support via Nodemailer. Google APIs integration enables calendar and productivity features including iCal event generation.

The UI layer is powered by shadcn/ui, Radix UI, Framer Motion, and Recharts for data visualization, with drag-and-drop functionality via dnd kit, activity calendars, toast notifications via Sonner, and a drawer component via Vaul.

### Highlights:
- Full-stack SaaS with Prisma ORM and PostgreSQL via pg adapter
- Authentication powered by Better Auth
- Redis caching with Upstash for high performance
- Drag-and-drop support via dnd kit (core, sortable, modifiers)
- Data tables with TanStack Table and charts with Recharts
- Google Calendar integration with iCal event generation
- 77.9% TypeScript — fully type-safe codebase

---

## 3. Animated Portfolio

- **URL**: https://www.priyam.tech/templates/animated-portfolio
- **Markdown**: https://www.priyam.tech/templates/animated-portfolio.md
- **Live Demo**: https://animated.portfolio.gyanranjanpriyam.tech
- **Source Code**: https://github.com/Gyanranjan-Priyam/portfolio-2.0
- **Category**: Portfolio
- **Year**: 2024
- **Tech Stack**: Next.js, React, React Three Fiber, Three.js, Drei, Rapier, GSAP, ScrollTrigger, Lenis, Zustand, SCSS Modules, GLSL, react-transition-group

### Description:
A visually immersive personal portfolio built from scratch with Next.js 14, layering three distinct rendering layers — a persistent WebGL 3D background, a GSAP-animated DOM content layer, and a real-time fluid simulation overlay — all composited together in the browser.

The 3D background is powered by React Three Fiber, Three.js, Drei, and the Rapier physics engine, creating a living, depth-rich backdrop that responds to scroll and viewport state. "Window" cutouts in the DOM layer let the 3D scene bleed through for a dimensional, layered effect.

A full-viewport WebGL fluid dynamics simulation driven by cursor movement sits above everything, using mix-blend-mode to produce a painterly, organic texture across the entire interface. GSAP and ScrollTrigger drive all scroll-triggered reveals and custom page transitions.

### Highlights:
- Three-layer composited rendering: WebGL 3D + DOM + fluid simulation overlay
- Real-time WebGL fluid dynamics driven by cursor movement via GLSL shaders
- React Three Fiber 3D scene with Rapier physics engine
- Custom GSAP-powered page transitions with react-transition-group
- Responsive 16-column (desktop) / 6-column (mobile) grid system
- Fluid vw-based typography with Neue Haas Grotesk Display Pro
- Smooth scroll via Lenis with GSAP ScrollTrigger integration
- 72% JavaScript, 26.5% SCSS, 1.3% GLSL — a truly custom build