Russ Ronchi

Digital Transformation Leader

Back to Past Work

This Website (Yeah, The One You’re On Right Now)

Building a Modern Web Portfolio That Actually Practices What It Preaches

Look, I could’ve thrown together a quick portfolio using any number of templates or site builders. But where’s the fun in that? Instead, I decided to build something that showcases not just my work, but how I approach modern web development end-to-end. This site is essentially my playground for implementing current best practices in web development, from static site generation to serverless architecture.

The Goal

Create a portfolio that:

  • Loads blazingly fast (because who likes waiting?)
  • Works flawlessly on any device
  • Demonstrates modern web development practices
  • Is easy to maintain and update
  • Shows rather than tells about my technical capabilities

But most importantly, build something that proves I understand the full stack of modern web development - from frontend frameworks to cloud infrastructure.

Technical Implementation

I built this site using some of my favorite modern tools and practices. Here’s the breakdown:

Frontend Stack:

  • Astro → Because sometimes, less JavaScript is more. Astro’s partial hydration approach means we only ship JavaScript where it’s actually needed.
  • TypeScript → For type safety and better developer experience. Because catching errors before they happen is always better.
  • Tailwind CSS → Utility-first CSS that scales. No more fighting with CSS specificity or maintaining separate stylesheets.
  • shadcn/ui → Beautiful, accessible components that don’t sacrifice customization.
  • React → Used sparingly for interactive components where it makes sense.

Infrastructure & Deployment:

  • AWS S3 → Static file hosting that’s basically bulletproof.
  • CloudFront → CDN for blazing-fast global content delivery with HSTS preload enabled.
  • Route 53 → DNS management that just works.
  • ACM → SSL certificate management because security isn’t optional.
  • GitHub Actions → Automated deployments because life’s too short for manual uploads.

Cool Features I’m Pretty Happy With:

  • Dark/Light Mode → Automatically matches your system preferences (try it!)
  • Static Site Generation → Pages are pre-rendered at build time for optimal performance
  • Dynamic OG Images → Auto-generated social media previews for each project
  • Responsive Images → Automatically optimized and served in the right format/size
  • Serverless Contact Form → AWS Lambda + API Gateway for handling form submissions
  • Enhanced Security → HSTS preloading, strict SSL, and secure headers throughout

Performance Metrics

Because if you’re going to talk about web performance, you should back it up:

  • First Contentful Paint: 0.4s
  • Largest Contentful Paint: 0.6s
  • Overall Lighthouse Scores:
    • Performance: 100
    • Accessibility: 95
    • Best Practices: 100
    • SEO: 100
  • Core Web Vitals: All in the green (yes, even on mobile)

Why Build It This Way?

Sure, this might seem like overkill for a portfolio site. And honestly? It probably is. But that’s not the point. The goal wasn’t to build the simplest solution possible - it was to demonstrate a deep understanding of modern web development practices and technologies.

This site serves as a living example of how I approach web projects:

  • Performance-first mindset
  • Type-safe development
  • Modern build tooling
  • Cloud-native architecture
  • Automated workflows
  • Accessibility considerations

Want to Peek Under the Hood?

If you’re curious about any specific implementation details, let’s chat.