# Template: Animated Portfolio

> Created by Gyanranjan Priyam (https://www.priyam.tech)
> Tech Stack: Next.js, React, React Three Fiber, Three.js, Drei, Rapier, GSAP, ScrollTrigger, Lenis, Zustand, SCSS Modules, GLSL, react-transition-group
> Category: Portfolio (2024)

- Canonical URL: https://www.priyam.tech/templates/animated-portfolio
- Live Demo: https://animated.portfolio.gyanranjanpriyam.tech
- Source Code: https://github.com/Gyanranjan-Priyam/portfolio-2.0

---

## Overview

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


--- 

## Core 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


---

## Author & Creator

- Developer: Gyanranjan Priyam
- Portfolio: https://www.priyam.tech
- GitHub: https://github.com/gyanranjan-priyam
- Twitter: https://x.com/gr_priyam