Subhasish Padhi — AI Engineer Portfolio

A dark luxury, 3D-powered portfolio built with Next.js 15, React Three Fiber, and Tailwind CSS v4. Features an interactive AI neural network visualization, smooth scroll animations, and a museum-like editorial design aesthetic.

Built for Subhasish Padhi — AI Engineer @ NxtGen Cloud

---

✨ Features

• 3D AI Neural Network — Interactive React Three Fiber visualization with floating nodes, connections, and auto-rotating camera
• Dark Luxury Design — Editorial typography with Instrument Serif italic, generous whitespace, single accent color (#c9ff3b)
• Atmospheric Background — Animated film grain, floating orbs with parallax scroll, vignette overlay
• Smooth Scroll — Powered by Lenis for buttery 60fps scrolling
• Scroll Reveals — Intersection Observer-based animations with staggered delays
• Responsive — Mobile-first design optimized for recruiters on phones
• Performance — Standalone Next.js output, optimized fonts, lazy loading
• Security Headers — HSTS, X-Frame-Options, Content-Type-Options configured

---

🛠 Tech Stack

Layer	Technology
Framework	Next.js 15 (App Router)
3D Graphics	React Three Fiber + @react-three/drei + Three.js
Styling	Tailwind CSS v4
Scroll	Lenis
Animation	Framer Motion + CSS keyframes
Language	TypeScript
Deploy	Vercel / Docker

---

🚀 Getting Started

Prerequisites

• Node.js 20+
• npm 10+

Installation

# Install dependencies
npm install

# Run development server
npm run dev

Open http://localhost:3000

Build for Production

npm run build
npm start

---

📁 Project Structure

├── app/
│   ├── globals.css         # Tailwind + custom utilities
│   ├── layout.tsx          # Root layout with fonts
│   └── page.tsx            # Main portfolio page
├── components/
│   ├── AIScene.tsx         # 3D neural network scene
│   ├── SmoothScroll.tsx    # Lenis wrapper
│   └── BackgroundAtmosphere.tsx  # Animated background
├── public/
│   └── fonts/              # 3D text fonts (if needed)
├── tailwind.config.ts      # Dark luxury theme
├── next.config.ts          # Security headers
└── package.json

---

🎨 Customization

Changing Content

All content is in app/page.tsx:

• Projects: Edit the projects array
• Experience: Update the experience section
• Skills: Modify the skills grid
• Contact: Change contact links

Updating 3D Scene

Edit components/AIScene.tsx to:

• Change neural network node count
• Modify colors and materials
• Adjust camera position
• Update text labels

Theme Colors

Colors defined in tailwind.config.ts:

• noir: Background (#0b0b0b)
• accent: Highlight color (#c9ff3b)
• ghost: Muted text (#7a756c)

---

📦 Deployment

Vercel (Recommended)

vercel

Docker

docker build -t subhasish-portfolio .
docker run -p 3000:3000 subhasish-portfolio

---

📄 License

MIT License - feel free to use this as a template for your own portfolio.

---

👤 Author

Subhasish Padhi

• Email: subhasish1802@gmail.com
• LinkedIn: linkedin.com/in/subhasish-padhi-791190314
• Location: Bengaluru, Karnataka, India

---

🙏 Acknowledgments

• Design inspiration from Awwwards winners (Isabel Moranta, Cosmos Studio)
• Original template concept from Txemalon/3d-portfolio
• Rebuilt and customized for AI engineering portfolio