Key Features & Highlights

Dynamic Project Showcase — Built a reusable project management and presentation system supporting project metadata, technology stacks, galleries, features, custom sections, GitHub repositories, and live demo links.

Dynamic Project Pages — Implemented Next.js dynamic routes that generate dedicated project detail pages from structured project data.

Supabase Integration — Integrated Supabase PostgreSQL to dynamically manage certifications, competition achievements, and technical skills.

Responsive Navigation — Developed a desktop floating sidebar and mobile bottom navigation system with active section tracking using a custom scroll spy hook.

Advanced Animation System — Combined Framer Motion, GSAP, and tsParticles to create page transitions, interactive animations, scroll-driven effects, and animated backgrounds.

Interactive Project Gallery — Implemented responsive project image galleries with Embla Carousel and custom slideshow functionality.

Contact System — Developed a contact form API route integrated with Resend for transactional email delivery.

CV Download — Implemented a dedicated API endpoint for securely serving the latest CV/resume.

Responsive Design — Created a mobile-first responsive interface that adapts the navigation, layouts, galleries, and content presentation across different screen sizes.

Modern UI Architecture — Built reusable UI components using Tailwind CSS, shadcn/ui, HeroUI, and multiple icon libraries.

Server-Side Data Fetching — Used Next.js Server Components and a Supabase server-side client to retrieve portfolio content efficiently.

Dark Mode — Added dark-mode support throughout the application using Tailwind CSS.

Technologies & Architecture

Next.js 16React 19TypeScriptTailwind CSS v4shadcn/uiHeroUIFramer MotionGSAPtsParticlesSupabasePostgreSQLResendEmbla CarouselLucide ReactReact Icons

Source code is in a private repository.

Portfolio — Sahan Harshajith

Live Demo

About Project

A modern full-stack personal portfolio website designed to showcase my software development projects, technical skills, certifications, education, and professional experience through an interactive and responsive user interface.

The portfolio is built with Next.js 16, React 19, TypeScript, and Tailwind CSS, with Supabase PostgreSQL powering dynamic content such as certifications, competitions, and skills. It features a dedicated dynamic project showcase system, responsive desktop and mobile navigation, animated UI interactions, project galleries, a contact form powered by Resend, and a dedicated CV download API.

Application Development

I designed and developed Portfolio as a full-stack personal portfolio platform to showcase my software development work, technical skills, certifications, education, and achievements. Rather than building the portfolio as a collection of static pages, I created a reusable architecture that allows projects and portfolio content to be presented through structured data.

The application is built using Next.js 16 with the App Router, React 19, TypeScript, and Tailwind CSS v4. The main portfolio is presented as a single-page experience containing Home, About, Certifications & Courses, Skills & Technologies, Projects, and Contact sections, while individual projects are rendered through a dynamic /projects/[id] route.

A major part of the project is the dynamic project showcase system. Each project can contain structured metadata such as title, description, period, organization, role, team size, technology stack, features, screenshots, GitHub repository, live demo, and custom detailed sections. This allows completely different projects, including full-stack applications, data analytics projects, and client projects, to be displayed using the same reusable project detail architecture.

Backend & Data Architecture

I integrated Supabase PostgreSQL to manage dynamic portfolio information including certifications, competition achievements, and technical skills. The application uses separate public and server-side Supabase clients, with the service-role client restricted to server-side execution.

Next.js Server Components are used to retrieve database content during page rendering, while API routes provide backend functionality for services such as contact form submission and CV delivery. Environment variables are used to protect database credentials and third-party API keys.

UI, Animation & User Experience

The interface was designed around a modern interactive visual style using Tailwind CSS, shadcn/ui, HeroUI, and reusable custom components. I implemented a combination of Framer Motion, GSAP, and tsParticles to create layered animations throughout the application.

Framer Motion handles component-level animations and transitions, GSAP is used for more advanced scroll-driven interactions, and tsParticles provides the global animated background. The portfolio also includes a custom loading screen, glassmorphism-inspired UI elements, responsive layouts, interactive project galleries, and dark-mode support.

Navigation behavior is adapted to the device. Desktop users receive a floating sidebar navigation, while mobile users receive a docked bottom navigation bar. A custom useScrollSpy hook tracks the user's current position and updates the active navigation section.

Engineering & Architecture

The project follows a component-based architecture with a clear separation between application pages, reusable UI components, hooks, data definitions, database utilities, and API routes. Custom React hooks are used for reusable interaction logic such as scroll tracking, click-outside detection, and project slideshow behavior.

The architecture was designed to make the portfolio easy to extend. Adding a new project primarily involves defining its structured project data and providing the required visual assets, while the existing project showcase system automatically handles the presentation and dynamic project detail page.