Personal Website logo

Personal Website

When I set out to build my personal website, I wanted more than just a static portfolio. I wanted a modern, performant, and scalable solution that reflects best practices in web development. After evaluating several options, I settled on Next.js, Tailwind CSS, PostgreSQL, Prisma, Auth.js, and Vercel.

NextJSTailwind CSSPostgreSQLPrismaAuthJSSavvyCal

This stack gives me:

  • Performance (Next.js + Vercel)
  • Beautiful UI (Tailwind CSS)
  • Reliable data layer (PostgreSQL + Prisma)
  • Secure authentication (Auth.js)

Next.js: The Backbone of Modern React Apps

Next.js was an easy choice because it combines the flexibility of React with powerful features like:

  • Server-Side Rendering (SSR) and Static Site Generation (SSG) for better SEO and performance.
  • API Routes for building backend logic without spinning up a separate server.
  • File-based routing that keeps things simple and organized.

This framework gave me the perfect balance between a static site and a dynamic application.

https://nextjs.org

Tailwind CSS: Utility-First Styling

I wanted a design system that was:

  • Fast to implement without writing tons of custom CSS.
  • Responsive by default, with a mobile-first approach.
  • Highly customizable for branding.

Tailwind CSS checked all these boxes. Its utility-first approach allowed me to iterate quickly and maintain a consistent design without sacrificing flexibility.

https://tailwindcss.com

PostgreSQL: A Reliable, Scalable Database

For data persistence, I chose PostgreSQL because:

  • It's battle-tested and widely used in production environments.
  • Supports complex queries and relationships.
  • Offers strong consistency and reliability, which is crucial for any app that stores user data.

https://www.postgresql.org

Prisma: Type-Safe Database Access

Working with raw SQL can be error-prone, so I opted for Prisma as my ORM because:

  • It provides type safety and autocompletion in TypeScript.
  • Schema-driven development makes database migrations easy.
  • It integrates seamlessly with PostgreSQL and Next.js.

https://www.prisma.io

Auth.js: Simple, Secure Authentication

Authentication is often a pain point, but Auth.js (formerly NextAuth.js) made it straightforward:

  • Built-in support for OAuth providers like Google and GitHub.
  • Session management without reinventing the wheel.
  • Tight integration with Next.js, reducing boilerplate.

https://authjs.dev

Vercel: Effortless Deployment

I deployed on Vercel because:

  • It's optimized for Next.js, offering zero-config deployments.
  • Global CDN ensures fast load times everywhere.
  • Built-in preview deployments make collaboration and testing easy.

https://vercel.com