Portfolio
This Site: Personal Portfolio & Project Archive
Overview
My personal site and project archive: the page you're on right now. Designed and built from scratch rather than from a template, it's where my research, thesis, and design work all live side by side, including this project showcase describing itself.
The goal was a site that reads as a single, coherent system: one dark theme, one accent-color language shared by every project category, and one card component reused everywhere from the homepage to the detail pages.
Design Details
The homepage opens with a small detection-style animation: a bounding box "locking onto" my photo, then an OCR-style caret sweeping across my name, a wink at the computer vision work the rest of the site is about.
This page is a CSS grid with dense auto-flow, per-category accent colors, and live filters (Papers / Design / Others), sorted by year with pinned projects always floating to the top.
Every page ships JSON-LD structured data (Person, CreativeWork, Thesis, Breadcrumb schemas), canonical URLs, Open Graph and Twitter card metadata, and an auto-generated sitemap.
A skip-to-content link, semantic headings throughout, and every custom animation respects prefers-reduced-motion and turns itself off.
90+ Performance, 97 Accessibility, 100 Best Practices, 92 SEO, measured against the live site, not a local build. The payoff of Astro's zero-JS-by-default islands over a heavier framework.
A Look Inside
A few pages from the live site.
The homepage: look for the mark top-left in the header, a handwritten p, for Pablo, boxed in code brackets. Personal on one side, developer on the other, same signature.
The project archive: a bento-style mosaic with live category filters and per-category accent colors.
A project page in detail: shared tech pills, an accent-colored award callout, and a subtle scan-line animation.
Tech Stack
Astro and Tailwind for a content-focused, utility-styled build; TypeScript for the typed data and structured-data helpers; Vercel for hosting, analytics, and the auto-generated sitemap.
Astro
TypeScript
Tailwind CSS
VercelStatus
Still actively evolving, new projects, sections, and small design refinements get added here as I build them, this entry included.
Source
More of my work, including other side projects, is on GitHub.
github.com/pabgaru