Introduction

In this article, we'll walk through building a modern portfolio website from scratch using Next.js 16, Supabase, and shadcn/ui.

Why This Stack?

Next.js 16 provides an excellent developer experience with:

• App Router for intuitive file-based routing
• Server Components for fast initial page loads
• Built-in image optimization

Supabase gives us:

• PostgreSQL database with a great dashboard
• Authentication out of the box
• Row Level Security for data protection

shadcn/ui offers:

• Beautiful, accessible components
• Full customization with Tailwind CSS
• Copy-paste approach (no lock-in)

Getting Started

First, create a new Next.js project:

npx create-next-app@latest my-portfolio

Then install the dependencies:

npm install @supabase/supabase-js @supabase/ssr
npx shadcn@latest init

Database Schema

We need three main tables:

• profiles - Your personal information
• projects - Portfolio projects
• articles - Blog posts

Building the Landing Page

The landing page is a simple profile card that displays your information.

Conclusion

With this stack, you get a performant, type-safe portfolio that's easy to manage through a custom dashboard.