Why This Site Exists
I wanted a personal site that felt fast and minimal. No heavy frameworks, no bloat — just something clean that loads instantly.
I picked Astro because it ships zero JavaScript by default. Tailwind CSS for styling. That’s it.
The Stack
- Astro v7 — static site generation, fast builds
- Tailwind CSS — utility-first styling
- WebP images — smaller file sizes, same quality
Design Choices
The site uses a dark theme with #0a0a0a as the background. I wanted it to feel easy on the eyes without being pure black.
I disabled text selection, image dragging, and scrollbars. It’s a personal site — not a document.
The Banner
There’s a banner carousel at the top that rotates through ads every 2.5 seconds with a fade animation. It cycles automatically.
Stats Bar
The stats section shows:
- Projects count
- Year I joined GitHub
- Open source repository count (fetched from the GitHub API)
- Portfolio views (uses CounterAPI with a localStorage fallback)
The view counter tries to hit CounterAPI first. If it’s blocked (ad blockers), it falls back to localStorage. Session uniqueness is handled with sessionStorage.
The Blog
The blog uses Astro’s content collections. Posts are written in Markdown with a simple schema — title, description, date, and author.
The blog post page has a back button, title, author avatar, date, and the content rendered with proper markdown styling.
Images
All images are converted to WebP at 80% quality. The default project banner is a placeholder until I make custom ones.
GitHub Integration
The contribution graph uses ghchart.rshah.org to render the green squares. Open source repo count pulls directly from the GitHub API and caches every 12 hours.
What I Learned
Building something simple is harder than building something complex. Every detail — the spacing, the colors, the animations — took way longer than expected.
But that’s the fun part.
— LyeDev