WEB2026

This Portfolio Website

A full-stack portfolio built with Next.js 16, TypeScript, Azure Static Web Apps, and automated GitHub Actions CI/CD.

Technology Stack

Next.js 16TypeScriptTailwind CSSFramer MotionAzure SWAGitHub Actions

Overview

The portfolio website itself is a software engineering showcase. It was built using Next.js 16 with static HTML export for the frontend, Azure Functions API, and deployed to Azure Static Web Apps using GitHub Actions CI/CD pipelines.

Problem & Motivation

Creating a professional portfolio that doesn't just list skills but actually demonstrates them in practice — by being a well-engineered, deployed, cloud-hosted application that potential employers or collaborators can inspect.

Engineering Goals

• Demonstrate full-stack development and cloud deployment skills in practice • Build with professional-grade tooling and architecture • Deploy to cloud infrastructure using modern DevOps practices • Show the ability to architect and ship a complete product independently

System Architecture

Next.js 16 Static Export (Client)
         │
 Azure Static Web Apps (Free Plan)
         │
         ├── SWA Managed Auth (GitHub Provider)
         ├── SWA Serverless Functions (/api)
         └── MongoDB Atlas (Cache & Data Persistence)

CI/CD: GitHub ──► GitHub Actions ──► Azure Static Web Apps

Implementation Details

• Frontend: Next.js 16 App Router with static export, Framer Motion for animations, Tailwind CSS for design system • Backend: Azure Functions v4 TypeScript programming model • Authentication: SWA GitHub OAuth integration with role-based route protection • Security: Helmet headers, rate limiting, and Zod input validation • CI/CD: Automated GitHub Actions workflow on push to main

Challenges & Mitigations

• Configuring Next.js static export compatibility with dynamic routes using generateStaticParams() • Setting up SWA role-based route authorization rules in staticwebapp.config.json • Designing an intuitive command palette and interactive architecture diagram

Results & Impact

• Deployed and live on Azure infrastructure with zero runtime hosting costs • High performance static export loaded across global CDN edge nodes • Interactive architecture, live health check, and contact workflows

Back to all projects