Portfolio Website

A modern, responsive portfolio built with Next.js, React, featuring smooth animations and a sleek dark UI. Integrated with Supabase CMS, an admin panel for dynamic content management.

Live Demo GitHub

Status

Completed

Technologies

Overview

This project is the personal portfolio and resume platform for Full Stack Software Engineer Md Abdullah Al Khalid Alif. It is built using the Next.js 15 App Router paired with React 19, leveraging Turbopack for optimized performance and fast builds. The user interface is crafted with Tailwind CSS and DaisyUI to provide a cohesive, responsive dark-themed aesthetic. Rich visual motion and micro-interactions are implemented across all sections using Framer Motion and modern icon libraries. All core content including projects, skills, experience, and awards is managed dynamically through a Supabase PostgreSQL database. A protected administration panel enables full content management and real-time updates directly from the browser without code changes. Direct client communication is enabled via an EmailJS contact form integration without requiring custom email server infrastructure. The application is fully production-ready with structured SEO metadata, sitemap generation, and deployment optimization on Vercel.

10+

Tech Stack Technologies

25+

UI Components Value

100%

SEO & Accessibility Value

98%

Lighthouse Performance Value

Key Features

Dynamic content management powered by Supabase for projects, skills, experience, and awards.
Private web admin dashboard to create, update, and manage portfolio records in real time.
Integrated contact messaging system using EmailJS for direct client communication.
Fluid micro-interactions and smooth page transitions built with Framer Motion.
Responsive modern dark mode interface designed with Tailwind CSS and DaisyUI.
Complete production SEO setup featuring dynamic metadata, Open Graph cards, and sitemaps

Technology Stack

Frontend

NextJS

React

Styling & UI

Tailwind

Lucide

Database

Postgre SQL

Deployment

Vercel

Language

Java Script

Backend & BaaS

Supabase

Screenshots

Timeline

Phase 1

System Architecture & Project Setup

Initialized Next.js 15 App Router with Turbopack and established core configuration

Phase 2

Design System & Responsive UI

Crafted dark-themed responsive layouts using Tailwind CSS and DaisyUI components

Phase 3

Animations & Micro-interactions

Built smooth scroll transitions and interactive card behaviors using Framer Motion

Phase 4

Supabase Database & CMS

Designed PostgreSQL schemas and dynamic data-fetching layers for portfolio content

Phase 5

Admin Dashboard & EmailJS

Developed a private browser admin panel and integrated direct contact form delivery

Phase 6

SEO Audits & Vercel Deployment

Configured dynamic meta tags, sitemap, and deployed production build to Vercel

Challenges

Resolving server and client component boundaries in Next.js 15 App Router to ensure seamless React 19 hydration.
Configuring secure Supabase Row Level Security policies to protect admin operations while maintaining fast public read access.
Building an automated fallback system between local data files and live database rows to prevent site downtime during network drops.
Preventing layout shifts and optimizing Framer Motion transition performance across mobile and desktop devices.
Managing external domain permissions and responsive image optimization for diverse project assets and certificates.
Handling client-side email delivery and form validation with EmailJS securely without exposing sensitive private credentials.

Solutions

Isolated interactive UI widgets into dedicated client components while rendering base content via Server Components.
Implemented email-based JWT authentication rules in Supabase to secure admin writes while preserving open public read access.
Created a resilient CMS fetching layer that automatically serves local fallback files if remote database queries fail.
Utilized hardware-accelerated CSS transforms and responsive viewport conditions in Framer Motion to eliminate layout stutter.
Configured remote pattern rules in next.config.mjs to securely serve and compress external images using Next.js Image optimization.
Applied strict form input sanitation alongside restricted public environment variables to deliver contact messages reliably.

Supabase

Supabase PostgreSQL serves as the relational database backbone powering the dynamic headless CMS for projects, skills, experience, and milestones. Row Level Security policies combined with JWT-based authentication provide unrestricted public read access while strictly protecting administrative write operations. Normalized relational tables with foreign keys and automated timestamp triggers ensure complete data integrity, scalability, and real-time updates across the portfolio.

Links

Live Demo GitHub