Personal developer portfolio with animated UI, project showcase, and Groq-powered chat.
Modern portfolio site highlighting projects, skills, and contact links. Built for fast load, strong visual polish, and interactive sections recruiters can explore quickly.
- Animated hero & sections with Framer Motion and GSAP
- Skills constellation / graph visualizations (D3)
- Project showcase driven by
src/data/portfolio.json - Dark mode theme toggle
- Ask Anurag chatbot powered by Groq SDK
- Pipeline / architecture visualizers for featured work
- Responsive layout with custom cursor and easter eggs
| Layer | Tools |
|---|---|
| Frontend | React 19, Vite 7, React Router |
| Styling | Tailwind CSS 4 |
| Motion | Framer Motion, GSAP, React Spring |
| Data viz | D3 |
| AI chat | Groq SDK |
| Deploy | Vercel-ready (vercel.json) |
git clone https://github.com/Znaxh/Portfolio.git
cd Portfolio
npm install
npm run devCreate .env if using the chatbot features:
VITE_GROQ_API_KEY=your_groq_api_keynpm run build
npm run previewMost site content lives in:
src/data/portfolio.json— projects, skills, links, metricssrc/components/sections/— Hero, About, Projects, Contactpublic/— static assets
Update portfolio JSON first, then tweak section components for layout changes.
Portfolio/
├── src/
│ ├── components/
│ │ ├── sections/ # page sections
│ │ ├── layout/ # navbar, footer
│ │ ├── effects/ # visual effects
│ │ └── ui/ # chatbot, buttons
│ ├── data/
│ │ └── portfolio.json
│ └── hooks/
├── public/
└── vercel.json
Anurag Pratap Singh
- GitHub: https://github.com/Znaxh
- LinkedIn: https://www.linkedin.com/in/pratapsinghanurag/
MIT — see LICENSE if present.