The feature image for the project Portfolio.
The feature image for the project Portfolio.
The feature image for the project Portfolio.
The feature image for the project Portfolio.

FULL-STACK WEB APP | 2026

Portfolio

The portfolio site you are on right now — built with Next.js and Framer Motion, featuring per-project detail pages, a functional contact form, and a scroll-aware header.

Next.js
TypeScript
Tailwind CSS
Framer Motion
Resend

OVERVIEW

A personal portfolio built from scratch with Next.js App Router, showcasing projects with individual detail pages that break down tech stack, features, and engineering challenges. Includes a working contact form backed by Resend for server-side email delivery, smooth animations via Framer Motion, and a data-driven architecture where all project content lives in centralised TypeScript files for easy updates.

IMPLEMENTATION

TECH STACK

Framework

Next.js

Language

TypeScript

Styling

Tailwind CSS

Animation

Framer Motion

Email

Resend, React Email

Ui

Tailgrids

Deployment

Vercel

FEATURES

Per-project detail pages with feature breakdown, tech stack, and engineering challenges

Functional contact form with server-side email delivery via Resend

Scroll-aware header — hides on scroll down, reappears on scroll up

Auto-playing project gallery carousel

Mobile-responsive layout with hamburger menu

Centralised data files for easy project and timeline management

CHALLENGES & SOLUTIONS

Scroll-aware header behaviour

Tracked scroll direction in a useEffect by comparing the current scroll position against the previous frame, then used Framer Motion to animate the header in and out based on the direction state. This reclaims vertical space on scroll while keeping the nav accessible whenever the user scrolls back up.

React Email incompatibility with standard styling

React Email does not support standard HTML elements or Tailwind classes — it requires its own component library and inline CSS for styling. Rewrote the email template using React Email's proprietary components to ensure consistent rendering across different email clients.