A visually immersive personal portfolio website built with Three.js, React, and TypeScript, featuring real-time 3D graphics, custom GLSL shaders, and smooth animations — all bundled via Webpack and served with Express.
- 3D Scene Rendering — Powered by Three.js with custom GLSL vertex/fragment shaders
- Smooth Animations — GSAP and Framer Motion for fluid UI transitions
- Camera Controls — Interactive 3D navigation using
camera-controls - Contact Form — Server-side email delivery via Nodemailer + Express
- Optimised Build — Production-ready Webpack pipeline with code splitting and asset compression
- Type-Safe — End-to-end TypeScript across source, server, and loaders
| Category | Technology |
|---|---|
| 3D / Graphics | Three.js, GLSL (glslify) |
| UI / Animation | React 17, Framer Motion, GSAP |
| Language | TypeScript 4, Babel |
| Bundler | Webpack 5 |
| Server | Node.js, Express |
| Nodemailer | |
| Styling | CSS Modules, MiniCssExtractPlugin |
Portfolio-Prashant-S-Bisht/
├── bundler/ # Webpack config (dev + prod)
├── server/ # Express server & email handler
├── src/ # Application source (TS, React, GLSL)
│ ├── components/ # React UI components
│ ├── experience/ # Three.js scene & shaders
│ └── ...
├── static/ # Public assets (images, fonts, models)
├── .babelrc # Babel config
├── .prettierrc # Code formatting rules
├── buildspec.yaml # CI/CD build spec
└── package.json
- Node.js v16 or higher
- npm v8 or higher
# 1. Clone the repository
git clone https://github.com/prashant2007-wq/Portfolio-Prashant-S-Bisht.git
# 2. Navigate into the project directory
cd Portfolio-Prashant-S-Bisht
# 3. Install dependencies
npm installStart the Webpack dev server with hot module replacement:
npm run devThe app will be available at http://localhost:<auto-detected-port>.
Compile and optimise assets for production:
npm run buildOutput is placed in the /dist directory.
Serve the built portfolio with the Express server:
npm startThe portfolio includes a working contact form. The Express server uses Nodemailer to forward messages. Before deploying, set the following environment variables (or configure them in server/index.ts):
EMAIL_USER=your-email@example.com
EMAIL_PASS=your-email-password A buildspec.yaml is included for AWS CodeBuild (or similar CI/CD pipelines). The pipeline runs npm install → npm run build → deploys static output.
This project is licensed under the MIT License — see the LICENSE.md file for details.
Prashant S. Bisht
- GitHub: @prashant2007-wq
Built with passion, pixels, and a fair bit of linear algebra. 🎯