🚀 Taranjyot Singh Portfolio

Senior Software Engineer & AI Platform Engineer portfolio showcasing production-grade backend, GenAI, MLOps, cloud-native, data, and security systems.

Overview • Features • Screenshots • Architecture • Quick Start • Troubleshooting

---

📌 Overview

This is a modern personal portfolio built to present a cohesive engineering brand around AI platform engineering, cloud-native backend systems, production APIs, MLOps workflows, and secure software delivery.

---

✨ Features

🧠 AI Platform Positioning Senior Software Engineer branding AI Platform Engineer headline GenAI / RAG / RLHF focus Updated resume alignment Freelance AI platform section Project-based platform wording

🧩 Portfolio Experience Responsive React UI Dark-theme friendly design Project cards with local visuals GitHub / README / resume links Recruiter-friendly metrics Polished contact section

🚀 Engineering Quality Vite + TypeScript setup Tailwind component styling Shadcn/Radix UI primitives Clean section-based structure Local project image assets Vercel-ready build workflow

---

🧱 Tech Stack

React Frontend	TypeScript Language	Vite Build Tool	Tailwind CSS Styling
Radix UI UI Primitives	GitHub Repository Links	Vercel Deployment	Portfolio UX Visual Storytelling

---

🏗️ Architecture

flowchart TD
    A[Visitor / Recruiter] --> B[Vite React App]
    B --> C[Hero & Metrics]
    B --> D[About & Skills]
    B --> E[Experience & Freelance AI Platforms]
    B --> F[Featured Project Cards]
    F --> G[GitHub Repositories]
    F --> H[Project READMEs]
    B --> I[Resume PDF]
    B --> J[Contact Links]
    B --> K[Local Project Visual Assets]

Loading

🔄 End-to-End Workflow

Visitor Opens Portfolio
        ↓
Hero Communicates Senior Backend + AI Platform Positioning
        ↓
Metrics Establish Experience, Repositories, and Technical Breadth
        ↓
About and Skills Explain Engineering Focus Areas
        ↓
Experience Section Connects Resume, AI Training, and Platform Work
        ↓
Project Cards Link to GitHub Repositories and READMEs
        ↓
Contact Section Routes Visitor to Email, GitHub, LinkedIn, and Resume

System Flow

Step	What Happens
1	Visitor lands on the hero section
2	Portfolio explains current positioning and core stack
3	Skills and experience sections validate technical fit
4	Project cards showcase production-style engineering systems
5	Recruiter can open GitHub, LinkedIn, resume, or email directly

---

📁 Folder Structure

portfolio/
├── public/
│   ├── projects/                 # Local project visuals / screenshot placeholders
│   ├── resume.pdf                # Latest resume PDF
│   └── robots.txt
├── src/
│   ├── components/
│   │   ├── portfolio/            # Main portfolio sections
│   │   └── ui/                   # Reusable UI primitives
│   ├── pages/
│   ├── lib/
│   ├── App.tsx
│   ├── main.tsx
│   └── index.css
├── package.json
├── tailwind.config.ts
├── vite.config.ts
└── README.md

---

⚡ Quick Start

Prerequisites

Requirement	Version
Node.js	20+ recommended
npm	Latest stable
Git	Any recent version

Run Locally

npm install
npm run dev

Open:

http://localhost:5173

Build

npm run build

Preview Production Build

npm run preview

Lint

npm run lint

---

🧪 What This Project Demonstrates

Skill Area	Demonstrated Through
Frontend Engineering	React, TypeScript, responsive sections, reusable components
Personal Branding	Cohesive Senior Software Engineer + AI Platform Engineer positioning
Recruiter UX	Fast scannability, metrics, project cards, resume and contact links
Project Storytelling	Curated systems with focus, tags, GitHub, and README actions
Design Consistency	Visual style aligned with polished repository README standards
Deployment Readiness	Vite build flow and Vercel-friendly project structure

---

🧰 Troubleshooting

npm install fails because of Node version

Use Node.js 20+.

node -v

If needed, switch with nvm:

nvm install 20
nvm use 20
npm install

Vite dev server starts but page is blank

Clear the generated cache and reinstall dependencies:

rm -rf node_modules dist
npm install
npm run dev

Resume download opens old resume

Replace this file:

public/resume.pdf

Then rebuild/redeploy:

npm run build

Project images do not load

Project cards first try to load real repository screenshots from GitHub raw URLs. If a screenshot is missing in a repository, the card automatically falls back to the local SVG stored in:

public/projects/*.svg

To make every card fully screenshot-based, add each project screenshot to its repository under docs/screenshots/dashboard.png, or update the image path in:

src/components/portfolio/ProjectsSection.tsx

Vercel deployment fails

Use these settings:

Framework Preset: Vite
Build Command: npm run build
Output Directory: dist
Install Command: npm install

---

🔄 Recommended Clean Rebuild

rm -rf node_modules dist
npm install
npm run lint
npm run build
npm run preview

---

📄 License

This project is licensed under the MIT License.