ggauravky/Dev-Portfolio

A flagship software engineering portfolio, interactive system showcase, and production web application.

Live Portfolio Demo · Admin Portal · System Architecture · Deployment Guide

📑 Table of Contents

• Overview & Philosophy
• Key Features & Architecture
• Tech Stack
• Repository Structure
• Getting Started
• Environment Variables
• Build & Performance Metrics
• Deployment
• Frequently Asked Questions
• Community & Governance
• License & Acknowledgements
• Author & Contact

💡 Overview & Philosophy

Dev-Portfolio is an engineering portfolio crafted to demonstrate modern web standards, systems architecture, high-performance rendering, and design engineering principles.

Inspired by the design aesthetics of Vercel, Linear, Apple, and Stripe, the codebase emphasizes:

1. Obsidian Visual Hierarchy: Pure #070708 dark theme, glassmorphic backdrop blurs, and #c5f82a toxic accent contrast.
2. Sub-Second Rendering: Code-split route chunks, Rollup manual chunking, and automated AVIF/WebP image variants ($402$ files generated at build).
3. Universal Accessibility (WCAG AA+): Full keyboard navigation, visible focus rings, ARIA roles, and responsive scaling across 10 viewports ($320\text{px}$ to $3840\text{px}$).
4. End-to-End Reliability: Integrated Express backend API, MongoDB Atlas persistence, authentication, and transactional email flows.

🚀 Key Features & Architecture

⚡ Spotlight Features

• Universal Command Center (⌘K): Raycast-grade instant fuzzy search across all portfolio pages, project case studies, and services.
• Interactive Radial Navigation: Contextual mouse radial navigation menu offering shortcuts to projects, resume, GitHub, and contact channels.
• Interactive Career Journey: Filterable timeline of academic and engineering milestones with real-time multi-attribute filtering.
• Secure Service Checkout: Eight paid services use server-owned pricing, Razorpay Standard Checkout, authenticated transaction history, and downloadable PDF receipts.
• Activity Center: Authenticated history for sign-ins, blog support, and preserved transaction activity.

📐 System Architecture Diagram

                              ┌────────────────────────────────────────┐
                              │            VISITOR BROWSER             │
                              │  Vite + React 18 SPA | Tailwind CSS    │
                              └───────────────────┬────────────────────┘
                                                  │
                                        HTTPS / REST API Calls
                                                  │
                              ┌───────────────────▼────────────────────┐
                              │            NODE.JS BACKEND             │
                              │    Express, Cors, Helmet, Pino Logs    │
                              └─────────┬───────────────────┬──────────┘
                                        │                   │
                              ┌─────────▼────────┐  ┌───────▼────────┐
                              │     MONGODB      │  │  BREVO EMAIL   │
                              │   (Atlas DB)     │  │ (Transactional)│
                              └──────────────────┘  └────────────────┘

🛠 Tech Stack

📂 Repository Structure

dev-portfolio/
├── assets/
│   └── github/                # SVG Logos, Monochrome variants, and Favicon
├── backend/
│   ├── config/                # Database & environment configurations
│   ├── controllers/           # API request controllers (Auth, Activity, Contact)
│   ├── models/                # Mongoose database schemas
│   ├── routes/                # Express API route declarations
│   └── server.js              # Node.js Express server entrypoint
├── docs/                      # Technical Architecture, Deployment & FAQ documentation
├── public/                    # Static public assets, favicon, & generated sitemap.xml
├── scripts/                   # Image variant generator & sitemap script
├── src/
│   ├── components/            # Shared UI components (Navbar, Footer, CommandPalette)
│   ├── context/               # React Context Providers (OpeningContext)
│   ├── data/                  # Portfolio data stores (projectsData, blogsData, journeyData)
│   ├── hooks/                 # Custom React hooks (useAuth, useSEO, use3DTilt)
│   ├── pages/                 # Main page components (Home, About, Journey, Projects...)
│   └── App.jsx                # Application root & React Router configuration
└── package.json               # Root package dependencies & scripts

🏁 Getting Started

Prerequisites

• Node.js: v20.0.0 or higher
• npm: v10.0.0 or higher

1. Clone & Install

git clone https://github.com/ggauravky/Dev-Portfolio.git
cd Dev-Portfolio
npm install

2. Configure Environment Variables

Create .env.local in the project root:

VITE_API_URL=http://localhost:5000

Create .env in the backend/ directory:

PORT=5000
NODE_ENV=development
MONGODB_URI=mongodb+srv://<user>:<password>@cluster.mongodb.net/dev-portfolio
FRONTEND_URL=http://localhost:5173
RAZORPAY_ENABLED=false
RAZORPAY_KEY_ID=rzp_test_your_key_id
RAZORPAY_KEY_SECRET=your_api_key_secret
RAZORPAY_WEBHOOK_SECRET=your_separate_webhook_secret

3. Run Locally

# Terminal 1 — Launch Frontend Dev Server
npm run dev

# Terminal 2 — Launch Backend Server
cd backend
npm run dev

Visit http://localhost:5173 in your browser.

📊 Build & Performance Metrics

Dev-Portfolio uses sharp image variant generation and automated sitemap creation during build.

Responsive image variant generation complete. Files created: 402
✅ Sitemap generated successfully!
📍 Location: public/sitemap.xml
📊 Total URLs: 54
   - Static pages: 22
   - Blog posts: 7
   - Project pages: 25
vite v5.4.21 building for production...
✓ 2,336 modules transformed.
✓ built in 52.07s

🚢 Deployment

The portfolio is deployed using Vercel:

1. Frontend: Deployed directly from GitHub main branch on Vercel (ggauravky.vercel.app).
2. Backend: Deployed on Render using the Node.js runtime.
3. Database: MongoDB Atlas cloud cluster with SRV connection strings.

See the full Deployment Guide for detailed instructions.

🤝 Community & Governance

We maintain an active open-source policy:

• 📖 Contributing Guide — Learn how to submit pull requests and propose updates.
• 📜 Code of Conduct — Contributor Covenant standard.
• 🔒 Security Policy — Vulnerability disclosure procedure.
• 💬 Support & Help — Questions and contact channels.

📄 License & Acknowledgements

Distributed under the MIT License. See LICENSE for details. Third-party software credits are documented in NOTICE.md.

✉️ Author & Contact

Gaurav Kumar Yadav
AI/ML Developer & Web Developer
BCA Student at BBD University (BBDU), Lucknow, Uttar Pradesh, India

• 🌐 Website: ggauravky.vercel.app
• 📧 Email: [email protected]
• 💼 LinkedIn: linkedin.com/in/gauravky
• 📷 Instagram: @the_gau_rav
• 📞 Phone: +91 8542036499