Skip to content

Bento Grid Mission Control — full portfolio rebuild - #17

Open
haramrit09k wants to merge 5 commits into
masterfrom
claude/charming-galileo-96amje
Open

haramrit09k wants to merge 5 commits into
masterfrom
claude/charming-galileo-96amje

Conversation

@haramrit09k

Copy link
Copy Markdown
Owner

Summary

  • Full rewrite from React 16 / CRA / jQuery to Vite 5 + React 18 + TypeScript + Tailwind CSS + Framer Motion
  • New design: interactive bento-grid dashboard — 10 animated tiles, dark theme, teal accent (#11ABB0)
  • Build: 280KB JS bundle (91KB gzipped), clean TypeScript, no errors

What's new

Tile What it does
Hero Name, typewriter cycling through achievements, CV download + contact CTAs
Status Pulsing "Open to Work" badge
Location Animated map pin, Toronto ON
Experience Count-up animation: 7+ years
GitHub Live stats embed (github-readme-stats)
Skills Tabbed grid with 4 categories, staggered hover glow
Timeline Career entries with logos + 1-sentence impact
Projects 4 featured cards with hover reveal (tech stack + metric)
About Photo + short bio
Contact Calendly link, email, LinkedIn

Tech stack change

Before: React 16, CRA, class components, jQuery, Flexslider, Magnific Popup
After:  React 18, Vite 5, TypeScript, Tailwind CSS, Framer Motion

Deploy

Same gh-pages pipeline — only path change: -d build-d dist

Test plan

  • npm run dev — dev server starts, all tiles render with real data
  • Above-fold 5-second test: name, role, employer, status, location all visible immediately
  • Resize to 375px — single column, no overflow
  • Resize to 768px — 2-column layout
  • Hover each tile — lift animation works
  • Typewriter text cycles correctly
  • Count-up on Experience tile triggers on scroll
  • Skills tab switching works (desktop + mobile dropdown)
  • Project hover reveals tech stack + metric
  • "Download CV" links to PDF
  • "Get In Touch" scrolls to contact section
  • npm run build — clean build, no TS errors

🤖 Generated with Claude Code

https://claude.ai/code/session_019E7PcheJWghzA9y2eVLRPn


Generated by Claude Code

claude added 3 commits June 17, 2026 02:55
Full rewrite from React 16/CRA/jQuery to Vite + React 18 + TypeScript + Tailwind CSS + Framer Motion.

New design: interactive bento-grid dashboard with animated tiles — typewriter hero, count-up stats, staggered skills grid, career timeline, hover-reveal project cards, GitHub stats, and a contact tile. Optimized for the 5-second recruiter scan.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_019E7PcheJWghzA9y2eVLRPn
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_019E7PcheJWghzA9y2eVLRPn
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_019E7PcheJWghzA9y2eVLRPn
@haramrit09k
haramrit09k marked this pull request as ready for review June 17, 2026 06:03
@vercel

vercel Bot commented Jun 17, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
haramrit09k-github-io Ready Ready Preview, Comment Jun 19, 2026 8:41pm

- Occupation updated to "Software Engineer → ML Engineer"
- Taglines and bio now lead with AI/ML trajectory
- Contact message targets ML/MLOps roles explicitly
- Added AI & ML skills tab: LLM Integration, RAG, MCP, LangChain, Scikit-learn
- AI & ML tab now opens by default in Skills section
- Featured projects expanded to 6 (3 AI-first): f1rstaid, logscribe-mcp, classifAI, Dist-ML, wha2do, Hippra
- Added f1rstaid, classifAI, logscribe-mcp to project list with tech stack + metrics

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_019E7PcheJWghzA9y2eVLRPn
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants