License: MIT Stars Lighthouse PWA Built with Astro TypeScript

Deploy with Vercel Deploy to Netlify Deploy to Render

Lighthouse Score

Scores 100/100 on Lighthouse across Performance, Accessibility, SEO, and Best Practices.

Hero Section About Section Experience Section Work Section Footer Section

Most portfolio templates are either bloated React SPAs or static HTML with zero interactivity. This one ships 10kb of UI runtime (Preact instead of React), scores a perfect Lighthouse, and still has silky animations, and 5 switchable color themes. Open-sourced so other devs can use it as a starting point.

• ✅ Full-page scroll hijacking — smooth per-section scrolling on desktop, native swipe on mobile, complete keyboard nav (arrows, spacebar, Page Up/Down, Home/End)
• ✅ 5 color themes — Blue, Purple, Green, Orange, Black — persisted to localStorage
• ✅ Custom cursor — three-layer cursor with hover states, driven by requestAnimationFrame at 60fps
• ✅ Text scramble animations — Baffle.js with a █▓▒░<>$%@ character set
• ✅ Section gradients — unique radial gradient backgrounds per section
• ✅ PWA — installable, service worker + Workbox caching strategy
• ✅ 100/100 Lighthouse — Performance, Accessibility, SEO, Best Practices
• ✅ Accessible — ARIA labels, semantic HTML, prefers-reduced-motion, full keyboard navigation, proper focus management

Preact instead of React because there was no reason to ship 42kb when 10kb does the same thing.

Prerequisites: Node.js 18+, Yarn

# Install dependencies
yarn install
# Start dev server
yarn dev
# Build for production
yarn build
# Preview production build
yarn preview

The dev server runs at http://localhost:4321.

packages/
└── frontend/
 ├── src/
 │ ├── components/ # All UI sections and shared components
 │ ├── pages/ # Astro pages (index, 404)
 │ ├── layouts/ # Base HTML layout
 │ ├── constants.ts # Sections, themes config
 │ ├── states.ts # Zustand store
 │ └── helpers.ts # Scroll, navigation, focus utilities
 ├── constants/
 │ └── technologies.tsx # 40+ tech icons with labels
 └── public/ # Static assets

Feel free to fork and adapt it. If you do, a GitHub star goes a long way. The main things you'd swap out:

1. Content in src/components/ (hero copy, experience, projects)
2. constants/technologies.tsx for your own stack icons
3. Colors/gradients in the CSS custom properties

MIT — do whatever you want with it.