# Gyanranjan Priyam — Full Technical Portfolio & Comprehensive Context > Full Stack Developer and AI Engineer specializing in Next.js 16, React 19, TypeScript, PostgreSQL, Prisma, Tailwind CSS, and AI/ML integrations. > Canonical URL: https://www.priyam.tech > Blog: https://blogs.priyam.tech > GitHub: https://github.com/gyanranjan-priyam > LinkedIn: https://linkedin.com/in/gyanranjan-priyam > Twitter/X: https://x.com/gr_priyam > Email: info@priyam.tech > Resume: https://assets.priyam.tech/resume/resume.pdf --- ## Executive Summary & Background Gyanranjan Priyam is an Electrical Engineering student at Government College of Engineering, Kalahandi, and a passionate Full-Stack Software Developer. He builds modern, high-performance web applications, developer starter kits, and AI-enabled platforms. He is also a technical writer, mentor, and former GeeksforGeeks Campus Mantri. His core strengths include: - Designing scalable web architectures using Next.js (App Router, Server Components) and React 19. - Implementing intuitive, responsive user interfaces with Tailwind CSS, shadcn/ui, Framer Motion, and GSAP. - Developing robust backend systems with Node.js, Bun, Prisma ORM, and PostgreSQL. - Integrating LLM APIs (Gemini, OpenAI, Claude) to build intelligent user-facing features. - Advanced Search Engine Optimization (SEO) and AI Search Engine Optimization (ASEO / GEO). --- ## Technical Skills & Proficiencies ### Category 01: Language - TypeScript - JavaScript - Python ### Category 02: Frontend - React - Next.js - Tailwind CSS - shadcn/ui - Radix UI - Base UI - Motion - Expo - TanStack - GSAP ### Category 03: Backend & Database - Node.js - Bun - PostgreSQL - MongoDB - Redis - nginx ### Category 04: Workflow & AI - Claude - Gemini - ChatGPT - Git - GitHub - Docker - Vercel ### Category 05: Design - Figma - Photoshop --- ## Professional Experience ### Treasurer and Management Co-Lead — CodeBreakers GCE Kalahandi - **Period**: Aug 2026 - Present - **Key Contributions**: - Currently serving as the Treasurer and Management Co-Lead for CodeBreakers, the official coding club of GCE Kalahandi. - Responsible for the financial management and strategic operations of the club, overseeing budgets, planning, and execution of club activities. - Manages club resources, coordinates with college administration, and leads initiatives to enhance technical learning and innovation among 500+ members. - Organized and executed 15+ technical events including hackathons, coding competitions, and workshops, increasing member participation by 40%. ### Technical Lead — CodeBreakers GCE Kalahandi - **Period**: Oct 2025 - Aug 2026 - **Key Contributions**: - Spearheaded technical event operations for a community of 500+ developers, enhancing engagement through hackathons and workshops. - Engineered and deployed a community platform using Next.js and AWS, streamlining event registration and resource access. - Mentored over 20 junior developers in full-stack development and system design, facilitating their transition to production-ready coding. ### VLSI Trainee — CTTC Bhubaneswar - **Period**: June 2026 - July 2026 - **Key Contributions**: - Completed specialized VLSI training at CTTC Bhubaneswar, gaining practical knowledge of digital electronics, semiconductor design, and VLSI concepts. - Worked on VLSI design fundamentals, including RTL design, Verilog HDL, simulation, and basic digital circuit implementation. - Gained hands-on exposure to industry-oriented VLSI tools and workflows, strengthening practical skills in digital design and hardware development. ### Campus Ambassador — GeeksforGeeks - **Period**: Jan 2026 - June 2026 - **Key Contributions**: - Promote GeeksforGeeks' educational content and coding challenges across campus, increasing student engagement by 30%. - Organize coding workshops and competitive programming sessions, fostering a vibrant tech community on campus. - Collaborate with the GeeksforGeeks team to provide feedback on content and suggest improvements based on student needs. --- ## Education ### Bachelor of Technology in Electrical Engineering - **Institution**: Government College of Engineering Kalahandi, Bhawanipatna - **Duration**: 2024 - present - **Grade/Score**: CGPA: 8.2 ### Higher Secondary Education in Science - **Institution**: Divine Higher Secondary School, Nayagarh - **Duration**: 2021 - 2023 - **Grade/Score**: Percentage: 85% ### Secondary Education - **Institution**: Basanta Kumar Bidyapitha, Badabanapur - **Duration**: 2019 - 2021 - **Grade/Score**: Percentage: 73.5% --- ## Certifications - **VLSI Design and Verification Using SystemVerilog (Advanced)** issued by CTTC Bhubaaneswar (2026) - **Managing Machine Learning Projects** issued by Duke University ( Coursera ) (2026) - **Introduction to Machine Learning** issued by Duke University ( Coursera ) (2026) - **MongoDB Certified Developer, Associate (C100DEV)** issued by MongoDB (2026) - **Introduction to Programming Using Python** issued by Coursera (2025) --- ## Full Projects Catalog (6 Projects) ### Project 1: TECHFEST PLATFORM - **Project ID**: techfest-platform - **Canonical Page**: https://www.priyam.tech/projects/techfest-platform - **Markdown URL**: https://www.priyam.tech/projects/techfest-platform.md - **Live Demo**: https://registration-insprano.vercel.app/login - **Source Code**: https://github.com/Gyanranjan-Priyam/insprano-dashboard - **Role**: Full Stack Developer — Designed, developed, and deployed the entire platform end-to-end as the sole developer. - **Timeline**: 2025 - **Tech Stack**: Next.js 16, TypeScript, PostgreSQL, Prisma, TailwindCSS, Shadcn UI #### Overview: The official registration portal and admin dashboard for INSPRANO 2025, the annual technical fest of Government College of Engineering, Kalahandi. Built to replace the chaos of Google Forms, spreadsheets, and manual tracking with a single platform that handles everything — registrations, payments, teams, and analytics. On the participant side, students can browse events across categories like Hackathon, Robotics, and Gaming, register individually or as a team, upload payment proofs, and receive auto-generated QR codes. The organizer dashboard provides real-time stats, event CRUD with a Tiptap rich text editor, payment verification, accommodation management, Excel exports, PDF invoice generation, and an in-app support ticket system. Authentication is handled through Better Auth with role-based access control. Arcjet provides rate limiting and bot protection. Files are stored on AWS S3, and the entire platform is deployed on Vercel with Prisma ORM managing the PostgreSQL database. #### Key Highlights: - Handled 500+ registrations across 20+ events during the live fest - Built a complete admin dashboard with real-time analytics and charts - Implemented payment verification flow with screenshot uploads to S3 - Added accommodation booking system for outstation participants - Integrated rich text editing for event descriptions using Tiptap - Auto-generated QR codes and PDF invoices for each registration - Built an in-app support ticket system for participant queries - Deployed with Arcjet rate limiting and bot protection for security #### Categorized Features: - **Public Portal**: Event browsing across 8+ categories, Online registration with Zod validation, Payment screenshot upload, Auto-generated QR codes, Live announcements feed - **Admin Dashboard**: Real-time stats & Recharts analytics, Event CRUD with Tiptap rich text editor, Payment verification workflow, Accommodation management, Excel exports & PDF invoice generation, Support ticket system, Registration toggle (open/close site-wide) - **Auth & Security**: Better Auth with session-based RBAC, Server-side admin route protection, Arcjet rate limiting & bot protection #### Architecture & Tech Layers: - **Framework**: Next.js 16 (App Router, RSC) - **Language**: TypeScript - **Styling**: Tailwind CSS v4 + shadcn/ui - **Database**: PostgreSQL + Prisma ORM - **Authentication**: Better Auth (RBAC) - **File Storage**: AWS S3 - **Rich Text**: Tiptap Editor - **Charts**: Recharts - **Forms**: React Hook Form + Zod - **Security**: Arcjet (rate limiting & bot protection) - **Deployment**: Vercel --- ### Project 2: CODEBREAKERS BLOG - **Project ID**: blogs-codebreakers - **Canonical Page**: https://www.priyam.tech/projects/blogs-codebreakers - **Markdown URL**: https://www.priyam.tech/projects/blogs-codebreakers.md - **Live Demo**: https://blogs.codebreakersgcek.tech - **Source Code**: https://github.com/Gyanranjan-Priyam/codebreakers-blog - **Role**: Full Stack Developer — Designed, developed, and deployed the entire platform end-to-end as the sole developer. - **Timeline**: 2025 - **Tech Stack**: Next.js 16, TypeScript, Prisma, TailwindCSS, TipTap, Socket.io, AWS, Better Auth, Framer Motion, Arcjet #### Overview: CodeBreakers Blog is a full-stack blogging platform built for the CodeBreakers college coding community — a space where developers learn, write, and share technical knowledge with each other. Built to replace scattered social media posts and informal notes with a single, purpose-built platform that handles publishing, discovery, and engagement. On the reader side, users can browse the latest blogs on the homepage feed, search by keywords, explore posts by tags, and engage with content through likes and comments. Every blog page features an auto-generated table of contents, syntax-highlighted code blocks, embedded images and videos, and a clean dark-mode reading experience optimized for technical content. Authors get a powerful floating-toolbar rich text editor powered by TipTap v3, supporting text formatting, image uploads to AWS S3, code blocks with syntax highlighting, tables, and video embeds. Authentication is handled through Better Auth, real-time interactions via Socket.io, rate limiting and bot protection via Arcjet, and the entire platform is deployed on Vercel with Prisma ORM managing the database. #### Key Highlights: - Built a floating-toolbar rich text editor supporting code, images, tables, and video - Implemented auto-generated table of contents for every blog post - Real-time likes and comments powered by Socket.io - Cloud image storage with AWS S3 and presigned URL upload flow - Tag-based blog discovery with full-text search across the feed - Public author profile pages with follower/following system - SEO-ready with auto-generated slugs, sitemap.xml, and robots.txt - Secured with Arcjet rate limiting and bot protection #### Categorized Features: - **Reader Experience**: Searchable homepage blog feed, Tag-based filtering and discovery, Auto-generated table of contents, Syntax-highlighted code blocks with copy button, Like and comment system, Text-to-speech blog reader - **Author Tools**: Floating toolbar rich text editor (TipTap v3), Image, video, table, and code block embeds, Auto-generated slug from title, Thumbnail image uploader, Blog preview before publishing, Edit and delete own blogs - **Profiles & Social**: Public author profile pages, Follow / unfollow other authors, Followers and following count, Personal blog management dashboard - **Auth & Security**: Better Auth with session management, OAuth and OTP sign-in support, Server-side protected routes, Arcjet rate limiting and bot protection #### Architecture & Tech Layers: - **Framework**: Next.js 16 (App Router, RSC) - **Language**: TypeScript - **Styling**: Tailwind CSS v4 + Radix UI - **Database**: Prisma ORM - **Authentication**: Better Auth - **Rich Text Editor**: TipTap v3 - **Real-time**: Socket.io - **File Storage**: AWS S3 - **Forms**: React Hook Form + Zod - **Animations**: Framer Motion + GSAP - **Charts**: Recharts - **Security**: Arcjet (rate limiting & bot protection) - **Email**: Nodemailer - **Deployment**: Vercel --- ### Project 3: SAMS SCHOOL LMS - **Project ID**: lms - **Canonical Page**: https://www.priyam.tech/projects/lms - **Markdown URL**: https://www.priyam.tech/projects/lms.md - **Live Demo**: https://lms-gyanranjan.vercel.app/ - **Source Code**: https://github.com/Gyanranjan-Priyam/lms - **Role**: Full Stack Developer — Sole developer responsible for architecture, implementation, and deployment of the entire platform. - **Timeline**: 2025 - **Tech Stack**: Next.js 15, TypeScript, Prisma, PostgreSQL, TailwindCSS, Shadcn UI, Stripe #### Overview: A full-stack Learning Management System that lets educators create, organize, and sell courses online — with structured chapters, video lessons, and Stripe-powered payments built in. Students get a clean dashboard to browse courses, enroll, and track their progress lesson by lesson. The admin panel provides a complete course management workflow: rich text descriptions via Tiptap, drag-and-drop chapter/lesson reordering with dnd-kit, thumbnail and video uploads to AWS S3, and automatic Stripe product creation when pricing is set. Courses can be published, archived, or kept as drafts. Authentication supports email/password with verification, plus GitHub and Google OAuth, all through Better Auth with role-based access control. Arcjet handles rate limiting and bot protection. The platform is designed to mirror production-grade EdTech products with a focus on real payment flows and scalable architecture. #### Key Highlights: - End-to-end Stripe integration with webhook-driven auto-enrollment - Drag-and-drop course builder with chapter and lesson reordering - Video and image uploads to AWS S3 with presigned URLs - Multi-provider OAuth (GitHub + Google) alongside email/password auth - Rich text course descriptions powered by Tiptap editor - Per-lesson progress tracking across enrolled courses - Admin analytics dashboard with data tables and Recharts - Rate limiting and bot protection via Arcjet middleware #### Categorized Features: - **Student Experience**: Browse and search courses by category and level, Stripe-powered enrollment and checkout, Per-lesson progress tracking, Organized chapters with video content, Personal dashboard for enrollments and progress - **Admin / Instructor**: Course CRUD with Tiptap rich text editor, Drag-and-drop chapter & lesson reordering, AWS S3 file uploads for thumbnails and videos, Automatic Stripe product/price creation, Publish, archive, or draft courses, Analytics panel with data tables and charts - **Auth & Security**: Email/password auth with email verification, GitHub and Google OAuth via Better Auth, Role-based access control (Admin / User), Route protection via Next.js middleware, Arcjet rate limiting and bot protection - **Payments**: Stripe Checkout for secure purchases, Webhook handling for payment confirmation, Automatic enrollment on successful payment #### Architecture & Tech Layers: - **Framework**: Next.js 15 (App Router, Turbopack) - **Language**: TypeScript - **Styling**: Tailwind CSS v4 + shadcn/ui - **Database**: PostgreSQL + Prisma ORM (Accelerate) - **Authentication**: Better Auth (Email, GitHub, Google OAuth) - **Payments**: Stripe (Checkout + Webhooks) - **File Storage**: AWS S3 - **Rich Text**: Tiptap Editor - **Forms**: React Hook Form + Zod - **Data Tables**: TanStack React Table - **Charts**: Recharts - **Drag & Drop**: dnd-kit - **Email**: Nodemailer + React Email (Gmail SMTP) - **Security**: Arcjet (rate limiting & bot protection) - **Deployment**: Vercel --- ### Project 4: COLLEGE CMS - **Project ID**: cms - **Canonical Page**: https://www.priyam.tech/projects/cms - **Markdown URL**: https://www.priyam.tech/projects/cms.md - **Live Demo**: https://cms-gyanranjanpriyam.netlify.app/ - **Source Code**: https://github.com/Gyanranjan-Priyam/cms - **Role**: Full Stack Developer — Designed and built the complete system from database schema to deployment, handling both frontend and backend architecture. - **Timeline**: 2025 - **Tech Stack**: React 19, TypeScript, Node.js, MongoDB, TailwindCSS, Express, Socket.io #### Overview: A full-stack College Management System built for modern educational institutions. It handles everything from student lifecycle to finance — role-based dashboards, real-time analytics, payment gateway integrations, and attendance tracking, all wrapped in a dark/light theme UI with smooth animations. The admin suite supports multi-role access (Admin, Finance, Faculty), student record management across branches and departments, digital attendance, grade recording, and transcript generation. The finance module provides advanced payment filtering, Excel exports, QR-based UPI payments, and dual payment gateway support with Cashfree and Razorpay. The student portal gives each user a personalized dashboard with academic progress, payment history with receipt downloads, and real-time notifications via Socket.io. The entire frontend is built with React 19 and TypeScript using Vite, with Framer Motion animations and Recharts for interactive data visualization. #### Key Highlights: - Multi-role dashboard system (Admin, Finance, Faculty, Student) - Dual payment gateway integration — Cashfree and Razorpay - Real-time updates across the platform via Socket.io - Advanced finance filtering with Excel export functionality - Dynamic QR-based UPI payment generation - Auto-collapsing sidebar with hover-to-expand animations - Session management with automatic timeout and warning modals - Dark/Light theme with system preference detection #### Categorized Features: - **Dashboard & UI**: Auto-collapsing sidebar with tooltip navigation, Dark/Light theme with system preference detection, Interactive Recharts analytics, Session timeout with warning modals, Framer Motion transitions throughout - **Student Portal**: Personalized academic dashboard, Payment history with receipt downloads, Real-time notifications via Socket.io, Mobile-optimized responsive interface - **Admin Suite**: Multi-role management (Admin, Finance, Faculty), Student lifecycle and record management, Branch and department hierarchy control, Digital attendance tracking with analytics, Grade recording and transcript generation - **Finance Management**: Advanced payment filtering (branch, semester, type, status, date), Excel export with custom formatting, Cashfree and Razorpay gateway integration, Dynamic QR code UPI payments, Revenue tracking with interactive dashboards - **Auth & Security**: JWT authentication with refresh tokens, Role-based access control, Comprehensive server-side validation, CORS and environment-based configuration #### Architecture & Tech Layers: - **Frontend**: React 19 + TypeScript (Vite 7) - **Styling**: Tailwind CSS 4 + Framer Motion - **Backend**: Node.js 20+ / Express.js 5 - **Database**: MongoDB 6 + Mongoose 8 - **Authentication**: JWT with refresh mechanism - **Payments**: Cashfree + Razorpay - **Real-time**: Socket.io - **Charts**: Recharts - **Data Export**: XLSX - **Icons**: Lucide React - **Deployment**: Vercel (frontend) + Railway (backend) --- ### Project 5: INVENTORY POS SYSTEM - **Project ID**: pos-system - **Canonical Page**: https://www.priyam.tech/projects/pos-system - **Markdown URL**: https://www.priyam.tech/projects/pos-system.md - **Live Demo**: https://ims-gyanranjanpriyam.netlify.app - **Source Code**: https://github.com/Gyanranjan-Priyam/ims - **Role**: Full Stack Developer — Sole developer responsible for designing the system architecture, building the POS workflow, and integrating the payment gateway. - **Timeline**: 2025 - **Tech Stack**: React 18, TypeScript, Node.js, MongoDB, TailwindCSS, Razorpay #### Overview: A comprehensive Point of Sale and Inventory Management System designed for small to mid-size businesses. It combines real-time stock tracking, a full checkout flow with barcode scanning, multi-method payment processing through Razorpay, and role-based dashboards — all in a responsive interface that works across desktop, tablet, and mobile. The POS module handles the complete sales cycle: product lookup via barcode scanner, cart management, multi-payment support (cash, online, bank transfer, cheque), and professional receipt generation. Inventory management provides real-time stock levels, reorder alerts, and product CRUD with category organization. On the backend, Express.js serves a REST API with JWT-based auth and role-based access (Admin, Manager, Salesperson). MongoDB handles data persistence with Mongoose ODM, and the ledger system tracks all financial transactions. The frontend is built with React 18, TypeScript, and Tailwind CSS, with date-fns for formatting and Lucide for iconography. #### Key Highlights: - Complete POS checkout flow with barcode scanner integration - Razorpay payment gateway with multi-method support - Real-time inventory sync across all connected sections - Role-based dashboards for Admin, Manager, and Salesperson - Professional receipt and invoice generation - Ledger accounting system for financial transaction tracking - Real-time notification system for stock alerts and updates - Responsive design working on desktop, tablet, and mobile #### Categorized Features: - **Point of Sale**: Full checkout and sales processing, Barcode scanner integration for quick product lookup, Cart management with quantity and pricing, Professional receipt and invoice printing, Multi-currency support (INR with extensible system) - **Inventory**: Real-time stock tracking and management, Product CRUD with category organization, Reorder point alerts, Live data synchronization across sections - **Finance & Payments**: Razorpay payment gateway integration, Cash, Online, Bank Transfer, and Cheque support, Ledger accounting for transaction tracking, Dashboard analytics with revenue insights - **User Management**: Role-based access (Admin, Manager, Salesperson), JWT authentication with secure sessions, User account creation and management #### Architecture & Tech Layers: - **Frontend**: React 18 + TypeScript (Vite) - **Styling**: Tailwind CSS - **Backend**: Node.js / Express.js - **Database**: MongoDB + Mongoose - **Authentication**: JWT + Bcrypt - **Payments**: Razorpay - **Icons**: Lucide React - **Dates**: date-fns - **Deployment**: Vercel (frontend) + Railway (backend) --- ### Project 6: CODEBREAKERS WEBSITE - **Project ID**: codebreakers-club - **Canonical Page**: https://www.priyam.tech/projects/codebreakers-club - **Markdown URL**: https://www.priyam.tech/projects/codebreakers-club.md - **Live Demo**: https://www.codebreakersgcek.tech/ - **Source Code**: https://github.com/Gyanranjan-Priyam/codebreakers - **Role**: Lead Developer - **Timeline**: 2025 - **Tech Stack**: Next.js, TypeScript, TailwindCSS, Framer Motion #### Overview: Official website for the CodeBreakers community, showcasing events, resources, and member achievements with a modern editorial feel. #### Key Highlights: - Production-ready full stack implementation --- ## Templates & Starters Catalog (3 Templates) ### Template 1: GSAP Portfolio - **Template ID**: gsap-portfolio - **Canonical Page**: https://www.priyam.tech/templates/gsap-portfolio - **Markdown URL**: 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. #### Key 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 #### Features: - Hero section with GSAP and Framer Motion animations - Interactive 3D scene built with Three.js - AI assistant integration (Google Gemini + OpenAI via OpenRouter) - Contact form with server-side email delivery via Nodemailer - Cloudflare Pages deployment with Wrangler CLI - Analytics tracking with Vercel Analytics - Responsive design with Tailwind CSS v4 - Tooltip UI components via Radix UI - Dark/light mode toggle with next-themes --- ### Template 2: SaaS UI - **Template ID**: saas-ui - **Canonical Page**: https://www.priyam.tech/templates/saas-ui - **Markdown URL**: 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. #### Key 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 #### Features: - Authentication & session management with Better Auth - Database ORM with Prisma and PostgreSQL - Redis-backed caching with Upstash - Drag-and-drop kanban/sortable UI with dnd kit - Advanced data tables using TanStack Table - Charts and analytics dashboard with Recharts - Activity calendar with react-activity-calendar - Google APIs integration with iCal event support - Toast notifications via Sonner - Drawer UI component via Vaul - Confetti celebrations with canvas-confetti - Dark/light theme with next-themes - Server-side email delivery via Nodemailer - Form validation with Zod - Global state management with Zustand --- ### Template 3: Animated Portfolio - **Template ID**: animated-portfolio - **Canonical Page**: https://www.priyam.tech/templates/animated-portfolio - **Markdown URL**: 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. #### Key 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 #### Features: - Persistent WebGL 3D background scene with scroll & viewport reactivity - Real-time fluid simulation overlay with mix-blend-mode compositing - GSAP ScrollTrigger scroll-triggered content reveals (AppearTitle / AppearBlock) - Custom GSAP page transitions via react-transition-group - Shaped box-shadow "window" cutouts for 3D bleed-through effect - GSAP-animated tooltip cards rendered via React portals - Animated noise texture overlay via CSS pseudo-element - Lenis smooth scroll throughout - Zustand global state management - Responsive CSS grid with custom properties (vw-based sizing) - Project listing & dynamic project detail pages - About section with overview, services, and process - SEO-ready with next-sitemap and Vercel hosting --- ## Contact & Social Profiles - **Email**: info@priyam.tech - **Website**: https://www.priyam.tech - **Blog**: https://blogs.priyam.tech - **GitHub**: https://github.com/gyanranjan-priyam - **LinkedIn**: https://linkedin.com/in/gyanranjan-priyam - **Twitter/X**: https://x.com/gr_priyam - **Instagram**: https://instagram.com/gyanranjanpriyam - **Resume**: https://assets.priyam.tech/resume/resume.pdf