🇳🇵 Creative Portfolio — Diwas Khatri

An Award-Worthy Animated Portfolio Built with Next.js, Three.js, GSAP & Framer Motion

Where cinematic web animation meets world-class SEO.

Developer: Diwas Khatri · Built in Nepal 🇳🇵 · Made in Nepal

---

📖 Project Overview

Creative Portfolio is a high-end, fully animated personal portfolio website developed by Diwas Khatri — designed to deliver a cinematic, agency-quality experience while maintaining flawless technical SEO. It combines Three.js for immersive 3D visuals, GSAP and Framer Motion for scroll-driven storytelling animations, and Lenis for buttery-smooth scrolling, all running on the modern Next.js 15 App Router stack with React 19 and TypeScript.

Unlike typical portfolios that sacrifice SEO for visual flair, this project proves both can coexist at the highest level. It ships with complete meta tags, Open Graph & Twitter cards, JSON-LD structured data, a dynamic sitemap, robots.txt, and a PWA manifest — so the site ranks on Google while stunning every visitor.

Made in Nepal, for the global web. Creative Portfolio demonstrates that world-class, animated web experiences can be engineered locally — one component at a time.

✨ Key Features

🎬 Cinematic Animations & 3D

Feature	Technology	Description
3D WebGL Visuals	Three.js + OGL	Immersive 3D scenes and shaders in the portfolio hero
Scroll-Driven Animations	GSAP	Scroll-linked reveals, pinning, timelines, and the scrubbing 47-frame scroll sequence
Micro-Animations	Framer Motion 12	Smooth entrance/exit animations, layout transitions, and hover effects
Smooth Scrolling	Lenis	Frame-perfect inertial smooth scroll across the entire site
Custom Cursor	Custom React component	Interactive custom cursor that responds to hoverable elements
Animated Preloader	Custom	Branded loading screen with asset preloading while the scene prepares
Scramble / Text Reveals	Custom	Cinematic text scramble and phrase-reveal effects
Grain & Film Effects	Custom shaders	Subtle film-grain overlay for a premium, cinematic look

🧭 Sections & Experience

Feature	Description
Hero / Showreel	Animated showreel with video modal, count-up stats, and reel cards
About Me	Full-screen animated introduction with parallax scroll section
Skills Timeline	Interactive visual timeline of experience and skills
Features / Services	Animated cards showcasing services offered
Testimonials	Auto-playing avatar carousel with message cards
Collaboration Form	Full collaboration request form with backend API route (Resend email delivery)
Cal.com Booking	Integrated calendar booking section for meetings
Dark / Light Theme	Theme switcher with next-themes and persistent preferences
Responsive Design	Fully responsive across mobile, tablet, and desktop

🚀 Top-Level SEO (The Differentiator)

Feature	Description
Metadata API	Full title, description, canonical, robots, and Google verification via Next.js Metadata API
Open Graph & Twitter Cards	Complete OG image, Twitter handle, and social preview metadata
JSON-LD Structured Data	Person, WebSite, and WebPage schema with social profile links (sameAs)
Dynamic Sitemap	Auto-generated sitemap.ts with weekly change frequency
Robots.txt	Search-engine crawling directives
PWA Manifest	Installable Progressive Web App with icons and theme colors
Semantic HTML	Fully semantic markup for accessibility and crawler comprehension
Google Analytics / GTM	Optional analytics integration component
SEO Guides	SEO-GUIDE.md, SEO-CHECKLIST.md, and SEO-IMPLEMENTATION.md shipped in the repo

🏗️ Architecture & Tech Stack

Layer	Technology	Purpose
Framework	Next.js 15 (App Router)	React meta-framework with SSR/RSC
UI	React 19 + TypeScript 5	Type-safe, modern component development
Styling	TailwindCSS 4 + tw-animate-css	Utility-first styling with custom animations
Components	shadcn/ui + Radix UI	Accessible, unstyled-by-default primitives
3D / WebGL	Three.js + OGL	GPU-accelerated 3D scenes
Animation	GSAP 3 + Framer Motion 12	Professional-grade animation orchestration
Scroll	Lenis	Smooth inertial scrolling
Icons	Lucide + Tabler Icons + React Icons	Rich iconography
Forms	React Hook Form + Zod	Validated, type-safe forms
Email	Resend API route	Server-side collaboration form delivery
Charts	Recharts	Data visualization
Package Manager	Bun (also works with npm/pnpm)	Fast dependency management

creative-portfolio
├── src/
│   ├── app/                  # Next.js App Router (layout, page, sitemap, manifest, collab API)
│   ├── components/
│   │   ├── common/           # Preloader, phrase-reveal, structured-data (JSON-LD), analytics
│   │   ├── layout/           # Navbar, footer, theme switcher
│   │   ├── sections/         # Hero showreel, about, timeline, features, testimonials, collab
│   │   └── ui/               # shadcn/ui components + custom cursor
│   ├── data/                 # Centralized user data & showreel entries
│   ├── hooks/                # useAssetLoader and more
│   ├── lib/                  # SEO helpers, constants, utils
│   └── providers/            # Lenis + theme providers
├── public/                   # Images, logo, robots.txt
├── SEO-GUIDE.md              # SEO documentation
├── SEO-CHECKLIST.md          # Deployment checklist
└── SEO-IMPLEMENTATION.md     # Implementation notes

🚀 Getting Started

Prerequisites

• Node.js 18+ (or Bun 1+)

Installation

git clone https://github.com/DiwasKhatri07/creative-portfolio.git
cd creative-portfolio
npm install      # or: bun install / pnpm install

Environment Variables

Create a .env.local file:

RESEND_API_KEY=       # required for the /api/collab contact form (resend.com)
NEXT_PUBLIC_GA_ID=    # optional, Google Analytics measurement ID

Run Locally

npm run dev          # or: bun dev

Then open http://localhost:3000.

Build for Production

npm run build
npm run start

⚙️ Personalization Checklist

This portfolio was built as a personal site — update these before deploying:

File	What to Update
src/lib/constants.ts	BASE_URL (production domain), OG_IMAGE
src/lib/seo.ts	Default author name, site name, Twitter handle
src/app/layout.tsx	Page title, description, OG/Twitter metadata, Google verification
src/app/manifest.ts	PWA name, short name, theme colors
src/components/common/structured-data.tsx	JSON-LD Person info, sameAs social links
src/components/layout/navbar.tsx / footer.tsx	Social links, contact email, Cal.com link
src/data/user-data.ts / show-reel.ts	Your testimonials, showreel entries, photos
src/app/api/collab/route.ts	Sender/recipient emails (must match Resend verified domain)
public/	Replace placeholder images with your own photos and logo

🏆 Roadmap

• Full Three.js interactive 3D hero scene upgrade
• Blog section with MDX and programmatic SEO pages
• Multi-language support (English / Nepali / Hindi)
• Dark-mode-first design tokens
• View transitions API integration
• More scroll-scrubbing animation sequences
• Deploy to Vercel with custom domain 🚀

🤝 Contributing

Contributions are welcome! To contribute:

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License — see the LICENSE file for details.

👨‍💻 Developer Credits

Crafted with ❤️ by Diwas Khatri

👤 Developer	Diwas Khatri
🐙 GitHub	github.com/DiwasKhatri07
🇳🇵 Location	Nepal
🛠️ Stack	Next.js 15 · React 19 · Three.js · GSAP · Framer Motion · TailwindCSS 4 · TypeScript

If this project inspires you, please give it a ⭐ Star on GitHub!

🏷️ Tags & Topics

portfolio · creative-portfolio · nextjs · react · threejs · webgl · gsap · framer-motion · lenis · tailwindcss · typescript · shadcn-ui · animated-website · 3d-website · smooth-scroll · seo · json-ld · pwa · developer-portfolio · nepal · nepali-developer · web-design · frontend · open-source