Building My Portfolio Website

When I set out to build my portfolio website, I didn’t just want a static page with my projects and a contact form. I wanted to treat it like a real-world full-stack application—something that showcases not only my skills in frontend development but also backend architecture, security, analytics, and scalability.

This post walks you through how I built my modern portfolio website, the technologies I used, and the features that make it more than just a digital resume.

Why I Built It This Way

Instead of a simple static site, I wanted my portfolio to have:

• A content management system so I can manage archives (blog posts, case studies, project write-ups).
• A real-time analytics dashboard to track who’s visiting and what they’re engaging with.
• A contact management system that doesn’t just send an email but organizes inquiries with extra details like budget and timeline.
• A secure admin panel with role-based access and live notifications.

Think of it as a personal mini SaaS—but for showcasing my work.

Tech Stack 🛠

Frontend

• Next.js 15 (App Router) – for fast, scalable React apps
• TypeScript – for safer, maintainable code
• Tailwind CSS – for rapid UI styling
• Radix UI & Lucide React – for accessible components and icons
• Framer Motion – for smooth animations
• SWR – for client-side caching and data fetching

Backend & Database

• Supabase – PostgreSQL with authentication and Row Level Security
• Server-Sent Events (SSE) – for real-time updates
• Resend – email delivery for contact forms

Development & Deployment

• PNPM & Monorepo setup – for clean package management
• ESLint & Prettier – to keep the codebase consistent
• Vercel + Supabase + Resend – my production deployment stack

Key Features

🔖 Archive Management System

I built a full CRUD system for blog posts and case studies with categories, tags, featured images, SEO-friendly slugs, and multiple status states (draft, published, archived).

Each archive automatically assigns me as the author:
“Marvin A. Abad — Aspiring Developer and Manager.”

📊 Real-Time Analytics

Instead of relying on Google Analytics, I implemented my own tracker:

• View counts per archive
• Visitor device & browser detection
• Geographic tracking by country
• Live dashboard updates via SSE

🛠 Admin Dashboard

A secure panel where I can:

• Manage archives
• View analytics in real time
• Handle contact inquiries
• Configure settings

📩 Contact Management

The contact form is not just a form—it’s a lead management tool.

• Supports multiple inquiry types
• Stores budget & project timelines
• Sends me notifications via Resend
• Protects against spam

🔐 Authentication & Security

• Supabase Auth for secure login
• Role-based admin privileges
• Row Level Security at the database level
• CSRF protection and safe token handling

Real-Time Goodness

One of the parts I enjoyed most was adding real-time updates with Server-Sent Events. For example, when someone visits my portfolio, I see the live analytics instantly update in my admin dashboard.

// Example: SSE connection
const { isConnected, connectionStatus } = useSSE();
  

It even has an automatic reconnection strategy with exponential backoff—so the live dashboard never goes dark.

Performance Optimizations

I optimized the site heavily to make sure it’s fast:

• SWR caching for frequently fetched data
• Next.js Image Optimization for responsive images
• Static Generation (ISR) where possible
• Dynamic Imports for heavy components
• Database Indexing to speed up queries

Deployment & Hosting

• Vercel → Next.js frontend
• Supabase → PostgreSQL + authentication + RLS
• Resend → Contact form email notifications
• Cloudflare → CDN + security

With this setup, my site is scalable, secure, and ready for production traffic.

Lessons Learned

• Balancing developer experience with performance optimizations
• Setting up real-time systems without relying on WebSockets
• Designing databases with security in mind from day one
• Creating a modular monorepo for better scalability

Final Thoughts

What started as “just a portfolio” ended up becoming a full-stack product. It’s a place where I can showcase my projects, but it also demonstrates my ability to build modern applications that are secure, scalable, and data-driven.

If you want to see it in action (or hire me), check out the live site and feel free to reach out through the contact form.

This project is more than a portfolio—it’s a reflection of how I build, think, and solve problems as a developer.