Personal portfolio of Archit Gupta — full-stack software engineer. Built end-to-end with Astro, Tailwind, and Three.js.
Live: architgupta.me · Source: github.com/archit2901/portfolio
| Layer | Tech |
|---|---|
| Framework | Astro 5 (static SSG, zero-JS-by-default) |
| Styling | Tailwind CSS |
| 3D | Three.js (lazy-loaded only on the hero) |
| Language | TypeScript (strict) |
| Fonts | Inter Variable + JetBrains Mono Variable (self-hosted) |
| Hosting | Vercel (static output) |
| SEO | @astrojs/sitemap, JSON-LD Person schema, OG image |
- Single-page landing (
/) with sections: hero, about, experience, skills, projects, education, FAQ, contact - Standalone projects archive (
/projects) with filter chips by category - Custom 404 styled as a
cat / ls /terminal session ⌘Kcommand palette — fuzzy-search navigation, downloads, motion-reduce toggle- Keyboard shortcuts —
g a/g e/g d/g p/g f/g cfor section jumps,?opens the palette - Console signature — open DevTools and you'll find a stylized hello
- Build-stamp footer — version, framework, gzipped JS size, last-built date
- Mobile collapsibles — About bio, Experience bullets, Projects descriptions, Skills categories all collapse on
<768pxwith a<details>accordion that auto-opens on desktop
- Three.js wireframe globe with arc traffic in the hero (lazy-loaded, falls back to a CSS gradient if WebGL is unavailable)
- Typewriter terminal in the hero with a believable shell session and a blinking caret
- Cyan→violet conic-gradient borders on the navbar Résumé button and the Experience "Currently" card, animated via
@property --angle - Cursor-following spotlight on Skills, Projects, and Contact cards
- 3D tilt with layered
translateZz-depth on Skills + Projects cards - Magnetic micro-translate on every card hover
- Scroll-driven parallax backdrop on each section
- Reveal cascade as each section enters the viewport
- Every animation respects
prefers-reduced-motion, both OS-level and via the palette's manual toggle (persisted inlocalStorage)
All site content (copy, links, project descriptions, FAQ Q&A, build stamp, palette strings) lives in src/content/site.ts. Components import only what they need. Editing the site means editing this one file.
src/
├── components/
│ ├── about/ Bio + portrait + bento facts
│ ├── command/ ⌘K palette
│ ├── contact/ Email card + link tiles + status strip
│ ├── education/ School cards with coursework chips
│ ├── experience/ Bento of role cards (collapsible bullets)
│ ├── faq/ Accordion of recruiter-targeted Q&A
│ ├── hero/ Three.js scene + typewriter terminal
│ ├── projects/ Featured trio + shared ProjectCard
│ ├── skills/ 6 category cards with chip stagger
│ ├── Navbar.astro
│ └── Footer.astro
├── content/
│ └── site.ts ← all copy & links live here
├── layouts/
│ └── BaseLayout.astro
├── pages/
│ ├── index.astro
│ ├── 404.astro
│ └── projects/index.astro
└── styles/global.css
Requires Node 20+.
npm install
npm run dev # http://localhost:4321
npm run build # static output → dist/
npm run preview # serve the built site locally
npx astro check # type + diagnostics checkAuto-deploys to Vercel on push to main. The vercel.json at the root pins the framework preset to Astro (overrides any stale dashboard setting). Sitemap and OG image are emitted at build.
Source is public for reference. Please don't re-host as your own portfolio.
Built with Claude Code as the pairing partner.