GilbertRamirez.com

My personal portfolio site built with the JAM stack - originally created with GatsbyJS and React, now migrated to Astro for improved performance and developer experience

Roles

Software Engineer

Technologies

TypeScript JavaScript Astro React NodeJS Tailwind CSS Sass Cloudfront S3 Lambda Route 53 MDX Github GitActions Google Analytics

Gil Site

Screenshot of the contact page of my site.

This site has evolved significantly since its inception. Originally built with GatsbyJS, React, TypeScript, and Material-UI, I migrated it to Astro to take advantage of its island architecture and zero-JS-by-default approach. The migration improved build times and page load performance while maintaining the rich content authoring experience with MDX.

Repository Highlights

  • Over 60+ commits tracking the evolution from Gatsby to Astro
  • Custom MDX components for portfolio items, blog posts, and interactive elements
  • Automated CI/CD pipeline with GitHub Actions for seamless deployments to AWS S3
  • Content collections with type-safe frontmatter validation

    • Tech Evolution

  • 2021: Started with GatsbyJS, React, GraphQL, and Material-UI
  • 2024: Migrated to Astro with Tailwind CSS for a leaner, faster site
  • Retained MDX for flexible content authoring across blog and portfolio sections

    • Neat Stuff

  • Mobile-first responsive design with Tailwind CSS utility classes
  • Deployment scripts for production builds, S3 sync, and Cloudfront cache invalidation
  • Dynamic page generation from MDX content with automatic routing
  • Inexpensive hosting using AWS static site infrastructure

    • Room For Improvement

  • Add view transitions for smoother navigation between pages
  • Implement a comment system or integrate with a headless CMS

    • More Projects

    AR-tisanal Coffee

    AR-tisanal Coffee

    Shopify

    Shopify

    VR Cornhole

    VR Cornhole