A modern, highly interactive personal portfolio website engineered to showcase projects, skills, and professional experience. Built with a focus on performance, premium aesthetics, and dynamic user experiences, the platform integrates a custom AI assistant ("Digital Sandeep") to answer visitor queries in real-time. It provides a responsive, mobile-first design tailored for technical hiring managers and recruiters.
This portfolio showcases five production-grade projects:
- React 19 – Component-based architecture for scalable UI.
- Vite 8 – Lightning-fast HMR and optimized production builds.
- Tailwind CSS & Custom Vanilla CSS – Utility-first CSS alongside custom design tokens.
- GSAP – Robust, performant scroll-based and micro-interactions.
- Vercel Serverless – Hosts the
/api/chatserverless backend. - Google Gemini API:
gemini-3.8-flashfor the AI chatbot, withgemini-3.5-flash-liteas the fallback when the primary is unavailable. - Upstash Redis – Handles IP-based rate limiting for the chat API.
- Zod – Strict schema validation for chat requests.
- Vitest & jsdom – Fast unit testing framework.
- @vercel/analytics – Production web analytics.
This project utilizes a hybrid deployment architecture:
- Self-hosted Docker – The frontend UI is containerized using a multi-stage Docker build (Alpine Node + Nginx) and hosted on my own server, where Watchtower pulls new images from Docker Hub. Moved 2026-10-28: the server left AWS EC2 and now sits behind a Cloudflare Tunnel.
- Vercel Serverless – The AI backend (
/api/chat) runs as a Vercel Serverless Function to abstract API keys and offload processing from the self-hosted server. - GitHub Actions CI/CD – Automatically injects the
VITE_API_URLsecret during the Docker build so the self-hosted static site can communicate with the Vercel backend.
api/ # Vercel Serverless Functions (AI Backend)
├── chat.js # Gemini LLM integration & rate limiting
src/
├── assets/ # Static media (images, videos, fonts)
├── components/ # React functional components
│ ├── About.jsx
│ ├── Certifications.jsx
│ ├── Contact.jsx
│ ├── CustomCursor.jsx
│ ├── DQASimulator.jsx
│ ├── Experience.jsx
│ ├── Footer.jsx
│ ├── Hero.jsx
│ ├── MagneticButton.jsx
│ ├── Navbar.jsx
│ ├── Projects.jsx
│ ├── ResumeView.jsx
│ ├── Skills.jsx
│ ├── Terminal.jsx
│ └── Terminal.test.jsx
├── data/ # Static datasets used in components
│ ├── projects.js
│ └── skills.js
├── test/ # Vitest testing setup
├── App.css # App-specific styling
├── App.jsx # Main application component routing & layout
├── index.css # Global CSS variables, resets, and Tailwind directives
└── main.jsx # Application entry point
git clone https://github.com/pokharelsandeep333-commits/Portfolio.git
cd Portfolionpm installCreate a .env file at the root of the project. Note that production AI keys are securely stored in Vercel. For local development, you only need VITE_API_URL if you want to point your local frontend to a live Vercel backend. If you are testing the serverless functions locally (e.g., via Vercel CLI), you will also need the AI API keys:
# Contact Form
VITE_FORMSPREE_URL=https://formspree.io/f/your_form_id
# AI API Keys (Only required if running the serverless backend locally)
GEMINI_API_KEY=your_gemini_api_key
UPSTASH_REDIS_REST_URL=your_upstash_url
UPSTASH_REDIS_REST_TOKEN=your_upstash_token
# Vercel Backend Security (Comma-separated URLs for strict CORS)
ALLOWED_ORIGINS=https://your-frontend-domain.com,http://localhost:5173
# Vercel Serverless URL (Optional: points local frontend to remote Vercel backend)
VITE_API_URL=https://your-project.vercel.app/api/chatnpm run devOpen your browser and navigate to http://localhost:5173.
npm run test# Build the Docker image
docker build -t portfolio-app .
# Run the container on port 8080
docker run -p 8080:80 -d portfolio-appBuilt with ❤️ and React.