vectorbuilds.dev — Personal Portfolio Project | My Portfolio

Project Overview

URL: vectorbuilds.dev GitHub: https://github.com/vatsal30/my-portfolio Local path: /Users/vector/Documents/Github/my-portfolio/ Purpose: Personal developer portfolio — digital workspace + thought leadership platform Status: 🟡 Live — core features done | Blog articles deferred until after offer (May 2026 kill list)

Tech Stack

Framework:    Next.js 16.1.6 (App Router, React 19)
Language:     TypeScript
Styling:      Tailwind CSS v4
Animations:   Framer Motion + Aceternity UI
Icons:        Lucide React, React Icons, Tabler Icons, Simple Icons CDN
Content:      Local TypeScript files (career.ts, projects.ts, skills.ts) + Markdown/MDX
Blog:         next-mdx-remote + rehype-pretty-code + shiki (syntax highlighting)
APIs:         Spotify, GitHub (react-github-calendar), TMDB, AniList GraphQL
Analytics:    @vercel/analytics + @vercel/speed-insights
Deployment:   Vercel (ISR — revalidate: 3600)
Thumbnails:   Puppeteer — pre-generated PNG project cards (npm run gen:projects)

App Structure

app/
├── page.tsx              ← Homepage (hero, featured projects, career, tech stack)
├── layout.tsx            ← Root layout
├── globals.css
├── about/                ← About page
├── articles/[slug]/      ← Blog articles
├── notes/[slug]/         ← Digital Garden (Obsidian vault via GitHub)
├── projects/page.tsx     ← All projects
├── interests/            ← Anime, movies via AniList + TMDB
├── toolkit/              ← Tech stack showcase
├── api/
│   ├── spotify/          ← Now Playing widget
│   └── abacus/           ← Global click counter

content/
├── career.ts             ← Work history (HCLTech, Crest, CSPIT)
├── projects.ts           ← Pinned projects (featuredProjects array)
├── skills.ts             ← Tech stack
├── testimonials.ts       ← Testimonials
└── data/
    ├── abacus.json       ← Persistent click counter data
    └── games.md

components/               ← All UI components (flat, no subdirs except /ui)

Key Features

Feature	Status	Notes
Spotify Now Playing widget	✅ Done	Real-time via `/api/spotify`
Aura Mode (ripple + starry bg)	✅ Done	Click profile photo
Pomodoro Timer	✅ Done	Built-in widget
Ambient Noise Generator	✅ Done	Rain, White Noise etc
Digital Garden (Notes)	✅ Done	Synced from Obsidian via GitHub token
GitHub Calendar + Commits	✅ Done	react-github-calendar
AniList anime tracking	✅ Done	Live GraphQL
TMDB movies	✅ Done	Live API
LLM-friendly mode toggle	✅ Done	Strips UI to raw Markdown
Dark / Light theme	✅ Done	next-themes, system-preference aware
Abacus click counter	✅ Done	Local + global via API
Framer Motion animations	✅ Done	Scroll, hover, micro-interactions
ISR (auto data refresh)	✅ Done	revalidate: 3600
Vercel Analytics	✅ Done
Blog / Articles	⚠️ No articles published yet	MDX pipeline ready
SEO — sitemap, robots	✅ Done	sitemap.ts + robots.ts

Current Projects (content/projects.ts)

Title	Tech	Link
My Portfolio	Next.js, Tailwind, Framer Motion	github/vatsal30/my-portfolio
Melanoma Detection	Python, TensorFlow, Keras, OpenCV	github/vatsal30/Melanoma-Detection
LeetCode Solutions	Python, JavaScript	github/vatsal30/LeetCode
Advent of Code	Python	github/vatsal30/Advent-of-Code

⚠️ Missing: Real work projects (can't open source). Add AI/Go side projects as they're built.

Career Data (content/career.ts)

Company	Role	Period
HCLTech	Senior Developer	April 2025 – Present
Crest Data Systems	Senior Software Engineer	May 2021 – April 2025
CSPIT	B.Tech Computer Engineering	Graduated May 2021 (CGPA 9.49)

Blog Articles — DEFERRED (post-offer, Nov 2026+)

Kill list item as of May 11, 2026. Blog competes with interview prep window. Resume after offer accepted.

#	Title	Notes
1	AskTGE — LLM Performance Engineering	Best candidate — Bedrock, streaming, DynamoDB
2	Splunk 90% Performance Win	Conf24 talk basis
3	WebSocket 250-Driver System	Real-time + reconciliation pattern
4	ML Thresholding Engine — System Design	Async job pattern + ML integration
5	DynamoDB Single-Table Design Deep Dive	Atomic Bump Pattern, Zero GSIs

Open Tasks (post-offer only)

Post-offer

Write + publish article #1: AskTGE LLM perf engineering
Update content/career.ts with war story metrics
Add testimonials to content/testimonials.ts

Dev Commands

npm run dev          # Start dev server at localhost:3000
npm run build        # Production build
npm run lint         # ESLint
npm run gen:projects # Regenerate project card PNG thumbnails (Puppeteer)

Env Variables Needed

GITHUB_TOKEN=          # Contents: Read-only — for Digital Garden (Obsidian notes)
SPOTIFY_CLIENT_ID=
SPOTIFY_CLIENT_SECRET=
SPOTIFY_REFRESH_TOKEN=
TMDB_API_KEY=
TMDB_READ_TOKEN=

Notes for Claude Code

Content lives in /content/*.ts — update career, projects, skills, testimonials there
Blog articles → app/articles/[slug]/ with MDX
HCLTech code is private — abstract architecture, never publish implementation
Production quality only — this is the public face for job applications
Positioning: "AI-Native Python Engineer" — Python/FastAPI/RAG + distributed systems + full-stack
Inspirations: adityapatil.dev, jasoncameron.dev, prasoon.dev, Aceternity UI