Welcome to the front-end repository for my interactive developer portfolio! This project focuses on high-performance 3D rendering, scroll-linked animations, and a flawlessly responsive mobile-first architecture to showcase my skills, experience, and projects as an AI & ML Engineer.
(Coming Soon via Vercel / GitHub Pages)
- Framework: React 18 + Vite
- Language: TypeScript
- 3D Engine: Three.js & @react-three/fiber
- Physics: @react-three/rapier (Used for the interactive Tech Stack bubbles)
- Animations: GSAP (GreenSock) & ScrollSmoother
- Interactive WebGL Canvas: A fully interactive "Tech Stack" section utilizing React Three Fiber and Rapier physics engine, featuring heavily optimized floating, swipable nodes mapping to technologies like C++, Python, and React.
- Scroll-Linked Navigation: Extensive GSAP integration to pin horizontal sliders, fade elements dynamically on scroll tracking, and split-text animation triggers.
- Fully Responsive: Carefully optimized with fluid typography (
clamp()), flex wrapping, and customized native UI fallbacks on mobile devices for peak FPS and UX on any screen size. - Smooth Routing: Single Page Application (SPA) structure styled elegantly using pure CSS, modern glowing gradients, and glassy UI effects.
To run this project locally, carefully execute the following commands in your terminal:
# 1. Clone the repository
git clone https://github.com/ravixpanchal/portfolio-website.git
cd portfolio-website
# 2. Install dependencies
npm install
# 3. Start the Vite development server
npm run devVisit http://localhost:5173 to see it loaded.
This project includes Docker configuration for easy deployment using a customized multi-stage build (Node for building, Nginx for serving).
To build and run the Docker image locally:
# 1. Build the Docker image
docker build -t ravi-panchal-portfolio .
# 2. Run the container on port 8080
docker run -d -p 8080:80 --name ravi-panchal-portfolio-container ravi-panchal-portfolioVisit http://localhost:8080 to see the live site running on an isolated Nginx web server.
If you just want to run the application without building it from source, you can pull the pre-built image from Docker Hub (assuming the owner has pushed it publically):
docker run -d -p 8080:80 <YOUR_USERNAME>/ravi-panchal-portfolio:latestVisit http://localhost:8080 to see the live site.
To publish your image to a registry like Docker Hub:
# 1. Log into your Docker Hub account
docker login
# 2. Tag your image with your username
docker tag ravi-panchal-portfolio <YOUR_USERNAME>/ravi-panchal-portfolio:latest
# 3. Push the image publically
docker push <YOUR_USERNAME>/ravi-panchal-portfolio:latest- /public - Houses static WebGL Models (
.glb,.hdr), and aggressively compressed images (/images) for lightning-fast Vercel delivery. - /src/components - Modular React architecture.
Landing.tsx- Employs heavily layered gradients and the focal 3D Avatar canvas wrapper.TechStack.tsx- Uses bounded 3D physics spheres tied to customized mouse intersection and hovering events.Work.tsx- Cross-device horizontal slider (GSAP Scroll Pinning heavily synced on desktop, CSS Snapping + navigation arrows fallback natively handling Mobile).styles/- Centralized vanilla CSS styling files cleanly separating frontend logic from UI presentation.
- Deferred 3D Loading: WebGL canvas loading is intelligently delayed by
3.5s, allowing the main HTML/CSS landing screen to render instantly on poor mobile 4G/LTE connections. - Optimized DPR Calculation: Three.js Pixel Ratios are capped at
1.5xstrictly preventing extreme GPU lag/battery drain on high-density Retina phone displays. - Vite Native Builds: Leveraging ES modules to completely minimize final bundle sizes for sub-second production deployments.
- LinkedIn: linkedin.com/in/ravixpanchal
- GitHub: github.com/ravixpanchal
This portfolio is meant for professional display. Brand assets and logos featured inside the TechStack section are owned by their respective IPs.
Designed & Developed by Ravi Panchal — All rights reserved 2026