GitHub - RajHarsh03/Portfolio: Personal portfolio built with React 19 + Vite SPA - live GitHub projects, contribution heatmap, EmailJS contact, dark/light theme & visit counter.

Personal portfolio of Harsh Raj - a fast, fully-featured React SPA with dark/light theme, live GitHub data, animated custom cursor, and a canvas contribution heatmap.

✨ Features

🚀 SPA Navigation - zero full-page reloads
🎨 Dark / Light Theme - circular wipe via View Transition API
📡 Live GitHub Projects - fetched, filtered & sorted by topics
🔥 GitHub Heatmap - canvas-rendered contribution graph
📬 Contact Form - EmailJS + toast feedback + Ctrl+Enter

👁️ Scroll Reveal - IntersectionObserver fade-up animations
🖱️ Custom Cursor - dual-ring, hover-expand (desktop only)
📊 Visit Counter - Upstash Redis via Vercel serverless
🧭 Persistent Layout - Nav, Footer, Cursor mount once
📱 Fully Responsive - mobile-first, all breakpoints covered

🛠️ Tech Stack

Layer	Choice
⚡ Build Tool	Vite 6
⚛️ UI Framework	React 19
🔀 Routing	React Router v7
🪖 Meta / SEO	react-helmet-async
🎨 Styling	Single global CSS (`src/index.css`)
📡 Data	GitHub REST API + EmailJS
📊 Visit Counter	Upstash Redis via Vercel serverless
🚀 Deployment	Vercel

📄 Routes

URL	Page
`/`	🏠 Home - hero, about, journey preview, skills ticker, featured projects, GitHub heatmap
`/projects`	🗂️ All Projects - search, filter (frontend / fullstack / AI), sort
`/contact`	📬 Contact - EmailJS form + social links
`/journey`	🗺️ Journey - experience & internship timeline
`/certificates`	🏆 Certificates & Achievements
`*`	🔍 404 Not Found

📁 File Structure

Portfolio/
├── 📄 index.html                  # SPA shell - single HTML entry point
├── ⚙️  vite.config.js
├── 🚀 vercel.json                 # SPA rewrites + /api route
├── 📦 package.json
├── 📋 Resume.pdf                  # Served from /Resume.pdf
│
└── src/
    ├── 🚀 main.jsx                # BrowserRouter + HelmetProvider + ThemeProvider
    ├── 🗺️  App.jsx                # Route definitions + AppShell wrapper
    ├── 🎨 index.css               # Full design system + all component styles
    │
    ├── layouts/
    │   └── 🏗️  AppShell.jsx       # Persistent shell - Nav, Footer, Cursor, Glows
    │
    ├── router/
    │   ├── 🔀 routes.jsx          # Lazy imports for all pages
    │   └── ⬆️  ScrollToTop.jsx    # Scrolls to top on every route change
    │
    ├── context/
    │   └── 🌗 ThemeContext.jsx    # Theme state + View Transition toggle
    │
    ├── hooks/
    │   ├── 📡 useProjects.js      # GitHub projects fetch + cache + auto-refresh
    │   ├── 🗂️  useGistContent.js  # Gist CMS hook - experiences, internships, certs
    │   ├── 👁️  useReveal.js       # IntersectionObserver scroll reveal
    │   └── 🌗 useTheme.js         # Re-export of useTheme from context
    │
    ├── services/
    │   ├── 🐙 githubProjects.js        # Fetch + normalise portfolio repos
    │   ├── 🔥 githubContributions.js   # Fetch contribution heatmap data
    │   └── 📝 gistContent.js           # Gist CMS - fetch + fallback for content
    │
    ├── components/
    │   ├── layout/
    │   │   ├── 🧭 Navbar.jsx          # Pill nav - tabs, GitHub icon, theme toggle
    │   │   ├── 🦶 Footer.jsx          # Footer + visit counter
    │   │   ├── 🖱️  CustomCursor.jsx   # Dual-ring cursor (desktop only)
    │   │   └── 📊 ScrollProgress.jsx  # Top gradient progress bar
    │   │
    │   └── home/
    │       ├── 🦸 Hero.jsx            # Hero section
    │       ├── 👤 About.jsx           # About section
    │       ├── 🗺️  JourneyPreview.jsx # Journey + Certificates card links
    │       ├── 🛠️  Skills.jsx         # Ticker marquee tech stack
    │       ├── 🗂️  FeaturedProjects.jsx # Top 2 projects from GitHub
    │       ├── 🔥 GitHubHeatmap.jsx   # Canvas contribution heatmap
    │       └── 📱 BottomNav.jsx       # Floating pill nav (home page only)
    │
    └── pages/
        ├── 🏠 Home.jsx
        ├── 🗂️  Projects.jsx        # Full grid - search, filter, sort, pagination
        ├── 📬 Contact.jsx         # EmailJS form + toast
        ├── 🗺️  Journey.jsx         # Timeline - data from Gist CMS
        ├── 🏆 Certificates.jsx    # Certificate cards - data from Gist CMS
        └── 🔍 NotFound.jsx        # 404

⚡ Quick Start

Requirements: Node.js 18+

# Clone the repository
git clone https://github.com/RajHarsh03/Portfolio
cd Portfolio

# Install dependencies
npm install

# Start dev server
npm run dev

Dev server runs at http://localhost:5173

🔐 Environment Variables

No .env file is needed to run or deploy this project.

Variable	Where	Notes
`KV_REST_API_URL`	Vercel Dashboard → Storage	Auto-injected by Vercel when Upstash Redis is connected
`KV_REST_API_TOKEN`	Vercel Dashboard → Storage	Auto-injected by Vercel when Upstash Redis is connected

📌 EmailJS keys are public client-side keys (hardcoded intentionally). Security is handled via domain whitelisting in the EmailJS dashboard. Ensure only harshx.in is listed under Account → Security.

📦 Build & Preview

npm run build      # → outputs production bundle to dist/
npm run preview    # → preview the production build locally

🚀 Deployment (Vercel)

Push to GitHub
Import the repo on vercel.com
Set the following options:

Setting	Value
Framework Preset	Vite
Root Directory	`/`
Build Command	`npm run build`
Output Directory	`dist`

Connect Upstash Redis from Vercel Dashboard → Storage (auto-injects env vars)
Deploy 🎉

The vercel.json handles SPA routing - all URLs serve index.html and React Router takes over client-side.

🐙 GitHub Projects Setup

To show a repo on the portfolio, add these topics to it on GitHub:

Topic	Effect
`portfolio`	✅ Required - makes it appear on the portfolio
`rank-1`, `rank-2`, …	📊 Controls display order (lower = higher priority)
`completed`	🟢 Shows green "Completed" badge
`frontend` / `fullstack` / `ai`	🔍 Sets the filter category
`personal` / `client` / `open-source` / `hackathon`	🏷️ Sets the type pill label

Tech icon topics (auto-mapped to devicons): react, nodejs, python, typescript, mongodb, tailwindcss, and more.

🗂️ Gist CMS - Experiences, Internships & Certificates

Content for the Journey and Certificates pages is managed via a GitHub Gist — no code push needed to add or edit cards.

How it works

The app fetches a single JSON file from a private Gist at runtime. If the Gist is unreachable, it automatically falls back to hardcoded data so the site never breaks.

Gist URL → fetched on every page visit (cached 5 min)
         ↓ fails?
Fallback data in gistContent.js (always shown instantly)

Adding or editing a card

Go to your Gist: https://gist.github.com/
Click Add Gist
Add the JSON structure for (experiences, internships, or certificates)
Click Create secret gist
Click Raw after creating the gist
Copy the raw url after clicking Raw
Replace the copied url in the src/services/gistContent.js with the Replace with your URL - changes are live within 5 minutes, no deploy needed
For any changes just addd/modify the present gist, dont create a new one

JSON structure

Experience / Internship card:

{
  "label": "INTERNSHIP",
  "type": "INTERNSHIP",
  "typeColor": "badge-purple",
  "company": "Company Name",
  "role": "Your Role Title",
  "date": "JAN 2025 - PRESENT",
  "bullets": [
    "First bullet point about what you did.",
    "Second bullet point with an achievement."
  ]
}

Certificate card:

{
  "label": "COURSE",
  "type": "CERTIFICATE",
  "typeColor": "badge-teal",
  "title": "Certificate Title",
  "issuer": "ISSUING BODY",
  "date": "JAN 2025",
  "desc": "Short description of what this certificate covers.",
  "link": "https://drive.google.com/..."
}

typeColor options: badge-blue | badge-purple | badge-teal

Permanent updates

To update the fallback (shown before Gist loads), also edit FALLBACK_DATA in src/services/gistContent.js and push.

📊 Visit Counter

Uses a Vercel serverless function at /api/visits:

POST /api/visits  →  Records unique daily visit (hashed IP + UA + date), returns total
GET  /api/visits  →  Returns total count without incrementing

Backed by Upstash Redis (Vercel KV). In local dev it reads from the live production endpoint so the counter is always visible.

📜 License

MIT License - feel free to use as a reference or template.
A credit link back to harshx.in is appreciated but not required.

Made by Harsh Raj

Navigation Menu

Repository files navigation

✨ Features

🛠️ Tech Stack

📄 Routes

📁 File Structure

⚡ Quick Start

🔐 Environment Variables

📦 Build & Preview

🚀 Deployment (Vercel)

🐙 GitHub Projects Setup

🗂️ Gist CMS - Experiences, Internships & Certificates

How it works

Adding or editing a card

JSON structure

Permanent updates

📊 Visit Counter

📜 License

About

Releases

Packages

Contributors

Languages

Name		Name	Last commit message	Last commit date
Latest commit History 40 Commits
api		api
public		public
src		src
.gitignore		.gitignore
.npmrc		.npmrc
README.md		README.md
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
vercel.json		vercel.json
vite.config.js		vite.config.js

Folders and files

Latest commit

History

Repository files navigation

✨ Features

🛠️ Tech Stack

📄 Routes

📁 File Structure

⚡ Quick Start

🔐 Environment Variables

📦 Build & Preview

🚀 Deployment (Vercel)

🐙 GitHub Projects Setup

🗂️ Gist CMS - Experiences, Internships & Certificates

How it works

Adding or editing a card

JSON structure

Permanent updates

📊 Visit Counter

📜 License

About

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages