session: silvafelipe.mainframestatus: onlineinterface: human / terminal
back to logs

How I Built This Site

Building a Modern Portfolio

When I set out to build this site, I had a few core goals in mind: speed, simplicity, and maintainability. I wanted a space that felt like me—precise, engineering-focused, and no-nonsense.

The Stack

I chose a stack that I use daily in my professional work, but stripped down to the essentials.

  • Vite: For lightning-fast builds and hot module replacement.
  • React: The library I'm most productive in.
  • TypeScript: Because type safety isn't optional for me anymore.
  • Framer Motion: For those subtle interactions that make the site feel alive.

Why Not Next.js or Astro?

I love Next.js and Astro. However, for a single-page portfolio (mostly), I wanted to keep the complexity low. A static site generated via Vite is incredibly performant and easy to deploy anywhere (GitHub Pages, Vercel, Netlify) without worrying about server-side rendering nuances unless absolutely necessary.

The Design System

I didn't reach for a heavy component library. Instead, I built a minimal set of components:

  • BentoGrid for the layout.
  • ThemeContext for managing dark/light modes.
  • Navbar for simple navigation.

This approach keeps my bundle size tiny and gives me complete control over the CSS.

What's Next?

I'm planning to add more detailed case studies of my engineering projects and perhaps a "Now" page to share what I'm currently learning. Stay tuned!

How I Built This Site | Felipe Silva