What I Learned Building My Own Angular Portfolio

Building your own website always sounds simple, and in my case, it actually went quite smoothly. But along the way, I discovered just how many small details go into making a website truly polished from image formats and SEO to accessibility and page speed. Even with a small personal project, you start to appreciate the little things that separate a decent site from a great one.

The idea As an Angular Architect

I’m usually focused on large-scale enterprise apps: things like micro-frontends, dashboards, and complex modules. But I wanted a clean space that represented me personally: something fast, elegant, professional, and built with the same discipline I apply at work. The idea was simple: prove that Angular can be both powerful and lightweight when used with care. That’s how patricklinguerri.dev was born.

The tech stack

I kept the stack simple but modern:

Angular 17 with standalone components
TailwindCSS + DaisyUI for fast, consistent styling
Static SSR (SSG) for pre-rendering and speed
Hosted on Vercel

The goal: deliver a professional Angular site that loads instantly, feels snappy, and follows the best practices I’d expect from any production system.

Performance and optimization

Angular often gets labeled as “heavy,” but it doesn’t have to be. By paying attention to details early, I avoided most of the usual problems. Here’s what helped:

Using Static SSR (prerender) instead of CSR for instant content
Optimizing assets,converting PNG to WebP and adding proper dimensions
Preloading only the hero image and lazy-loading the rest
Keeping bundles small and routes modular

The result? Every page: Home, About Me, Blog scores 100 / 100 / 100 on Lighthouse (Performance, Accessibility, SEO). That alone made all the careful tuning worth it.

Accessibility and SEO

Even on a personal site, accessibility matters. I focused on the basics, done well clean HTML, meaningful tags, readable contrast, and proper alt text. Nothing fancy, just consistent structure that works for everyone. For SEO, I implemented:

Dynamic and unique meta tags per route
Proper canonical URLs
Open Graph tags for social previews
Sitemap and robots.txt for proper crawling
JSON-LD structured data for better indexing

And because everything is pre-rendered with SSG, search engines instantly read the real HTML, no waiting for JavaScript to run.

The small details that matter

What surprised me most wasn’t the complexity, it was realizing how many little improvements can add up to a huge difference. Choosing the right image format, adding preload links, setting fetchpriority="high"... Each change was small on its own, but together they made the site feel truly refined. When you stack these optimizations, the end result just feels smoother.

Final thoughts

This project reminded me how much quality lives in the details. Building the portfolio wasn’t about pushing Angular to its limits, it was about applying care and intention at every step.

"The best web experiences don’t come from big tricks, they come from small, thoughtful decisions stacked together."

That’s what this project became for me: a showcase of precision, simplicity, and everything I enjoy about modern frontend development.

Patrick Linguerri

Angular Frontend Engineer

.Dynamic Meta Tags in Angular: How I Built a Reusable SEO Service .Angular SSG + Hydration: How I Implemented Static Generation