https://github.com/peterhanania/portfolio

[NEW] A blazing-fast personal software developer portfolio built with Astro + Preact. 100/100 Score!
https://github.com/peterhanania/portfolio

astro branding developer-portfolio github-profile inspiration personal-website portfolio portfolio-site prereact react-portfolio resume seo-friendly software-portfolio web-developer-portfolio

Last synced: 2 months ago
JSON representation

[NEW] A blazing-fast personal software developer portfolio built with Astro + Preact. 100/100 Score!

• Host: GitHub
• URL: https://github.com/peterhanania/portfolio
• Owner: peterhanania
• License: mit
• Created: 2023-08-07T23:25:16.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2026-03-17T20:16:12.000Z (3 months ago)
• Last Synced: 2026-03-18T09:46:34.129Z (3 months ago)
• Topics: astro, branding, developer-portfolio, github-profile, inspiration, personal-website, portfolio, portfolio-site, prereact, react-portfolio, resume, seo-friendly, software-portfolio, web-developer-portfolio
• Language: TypeScript
• Homepage: https://peterhanania.com
• Size: 37 MB
• Stars: 4
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: .github/CONTRIBUTING.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE
  • Code of conduct: .github/CODE_OF_CONDUCT.md
  • Codeowners: .github/CODEOWNERS
  • Security: .github/SECURITY.md

Awesome Lists containing this project

README

          
#  ⚡️ Ultimate Software Developer Portfolio

### A _blazing-fast_, fully accessible personal portfolio built with **Astro + Preact**.

[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](LICENSE) [![Stars](https://img.shields.io/github/stars/peterhanania/portfolio?style=social)](https://github.com/peterhanania/portfolio/stargazers) [![Lighthouse](https://img.shields.io/badge/Lighthouse-100%2F100-brightgreen)](https://peterhanania.com) [![PWA](https://img.shields.io/badge/PWA-enabled-blue)](https://peterhanania.com) [![Built with Astro](https://img.shields.io/badge/Built%20with-Astro-FF5D01?logo=astro&logoColor=white)](https://astro.build) [![TypeScript](https://img.shields.io/badge/TypeScript-strict-3178C6?logo=typescript&logoColor=white)](https://www.typescriptlang.org)

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/peterhanania/portfolio) [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/peterhanania/portfolio) [![Deploy to Render](https://render.com/images/deploy-to-render-button.svg)](https://render.com/deploy?repo=https://github.com/peterhanania/portfolio)

---

## Preview

![Lighthouse Score](./public/LIGHTHOUSE_SCORE.png)

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

![Hero Section](./public/PREVIEW_IMAGE_1.png)

![About Section](./public/PREVIEW_IMAGE_2.png)

![Experience Section](./public/PREVIEW_IMAGE_3.png)

![Work Section](./public/PREVIEW_IMAGE_4.png)

![Footer Section](./public/PREVIEW_IMAGE_5.png)

---

## Why this exists

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.

---

## Features

- ✅ **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

---

## Tech Stack

| Layer | Tech |

|---|---|

| Framework | [Astro](https://astro.build) |

| UI | [Preact](https://preactjs.com) + `@preact/compat` |

| State | [Zustand](https://github.com/pmndrs/zustand) + `@preact/signals` |

| Animations | [Framer Motion](https://www.framer.com/motion/), [Lottie](https://airbnb.io/lottie/), [Baffle.js](https://camwiegert.github.io/baffle/), [canvas-confetti](https://github.com/catdad/canvas-confetti) |

| Monorepo | [Turborepo](https://turbo.build) + Yarn Workspaces |

| Deployment | Netlify |

| PWA | Vite PWA + Workbox |

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

---

## Getting Started

**Prerequisites:** Node.js 18+, Yarn

```bash

# 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`.

---

## Project Structure

```

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

```

---

## Using this as a template

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

---

## License

MIT — do whatever you want with it.