11ty Tailwind CSS JavaScript
Personal Portfolio Website
A cyberpunk-themed developer portfolio built with 11ty and Tailwind CSS featuring dark mode and responsive design.
A modern, performant portfolio website showcasing projects and blog posts with a distinctive cyberpunk aesthetic.
Features
- Dark/Light theme toggle - Respects system preferences with manual override
- Responsive design - Mobile-first approach with fluid typography
- Fast static site generation - Built with 11ty v3
- SEO optimized - Meta tags, Open Graph, and structured data
Technical Highlights
Performance
The site achieves near-perfect Lighthouse scores through:
- Static generation at build time
- Optimized images with AVIF/WebP formats
- Minimal JavaScript bundle (~10KB)
- CSS purging and minification
Accessibility
Built with accessibility in mind:
- WCAG 2.1 AA compliant
- Keyboard navigation support
- Screen reader friendly
- High contrast mode support
Tech Stack
| Technology | Purpose |
|---|---|
| 11ty | Static site generator |
| Tailwind CSS v4 | Styling |
| Vanilla JS | Interactivity |
| Pagefind | Search |
Lessons Learned
Building this project reinforced the importance of progressive enhancement and the power of static site generators for developer portfolios.