Case Study

Web ApplicationComplete & Live2026

Portfolio Web

Modern, High-Performance Software Engineering Portfolio & Interactive Web Platform

Role

Sole Developer

Year

2026

Domain

anshuuicoder.in

Stack

Next.js 16 · React 19 · TS

Visit Live Website

Overview

A Modern Engineering Platform Built From Scratch

Portfolio Web is a modern, high-performance personal portfolio engineered from the ground up to showcase my software engineering projects, AI applications, technical writing, and professional journey. Built with Next.js 16 App Router, React 19, and Tailwind CSS v4, it combines Static Site Generation (SSG) for instant loads, an interactive CLI terminal sandbox, Web3Forms email delivery with honeypot bot defense, and smooth physics-based animations.

Build Performance

100% SSG

Lighthouse Score

98+

Form Security

Honeypot + Rate Limit

The Story

Why Build a Portfolio from Scratch?

Most portfolio websites rely on pre-built templates that feel generic, static, and disconnected from real software engineering. As a developer, I wanted my personal site to demonstrate actual technical competence—clean component architecture, security practices, responsive UI/UX, and fast performance.

I chose Next.js 16 App Router and React 19 to leverage Static Site Generation (SSG). To create an engaging experience for recruiters and engineers, I built an interactive CLI terminal sandbox (`TerminalSandbox.tsx`), integrated spam-proof Web3Forms email delivery with honeypot traps, and published structured engineering blogs.

The Friction

Traditional portfolio templates are often static, bloated with heavy third-party scripts, or vulnerable to contact form spam. They rarely showcase real system architecture or interactive engineering capabilities.

✓

The Solution

A bespoke Next.js 16 web application featuring pre-rendered SSG static pages, a developer-first terminal sandbox CLI, spam-proof Web3Forms email delivery with off-screen honeypot bot traps, IP rate limiting, and comprehensive SEO optimization.

Application UI

Interactive Features & UI Showcase

Hero & Brand Identity Showcase

Luxury dark-themed header featuring custom gold & violet gradients, availability status pill, social links, and glowing ambient backdrop.

Tech Stack

Built With Modern Web Standards

Frontend Core

Next.js 16 (App Router)React 19TypeScript 5Tailwind CSS v4

Animation & Physics

Framer Motion 12Lenis Smooth ScrollGlassmorphism UI

Forms & Security

Web3Forms APIHoneypot Spam TrapIn-Memory Rate LimitingNext.js API Routes

SEO & Performance

Static Site Generation (SSG)Dynamic MetadataOpenGraph CardsJSON-LD DataSitemap & Robots

Deployment & Tooling

Vercel CloudGit & GitHubTurbopackESLint & PostCSS

Features

Key Capabilities

⚡

Next.js 16 SSG Engine

Pre-rendered static HTML output for lightning-fast page loading and optimal performance.

💻

Developer CLI Sandbox

Interactive terminal sandbox supporting custom commands for a developer-first experience.

📬

Web3Forms Integration

Direct inbox email delivery with zero backend server overhead.

🛡️

Honeypot Bot Trap

Off-screen honeypot input fields trapping automated spam bots silently.

📚

Technical Blog Engine

Markdown article reader with category filters, syntax highlighting, and reading time metrics.

☁️

Vercel Deployment

Continuous integration and instant edge deployment with custom domain integration.

Dev Journey

The Build Process

💡

Phase 01

Ideation & Core Architecture

Planned a modern, full-stack portfolio from scratch to replace template cliches with high-performance Next.js 16 App Router architecture and custom design tokens.

💻

Phase 02

Developer Terminal Sandbox

Engineered TerminalSandbox.tsx, allowing recruiters and developers to run terminal commands (help, skills, projects, contact, clear, sudo) interactively.

📬

Phase 03

Spam-Proof Contact Pipeline

Connected Web3Forms API to send messages straight to anshugupta9124@gmail.com, protected with off-screen honeypot inputs and IP rate limits.

📚

Phase 04

Technical Blog Platform

Built a dynamic Markdown article reader for system design and software engineering insights.

🚀

Phase 05

SEO, SSG & Production Deployment

Optimized build output with Static Site Generation (SSG), dynamic sitemaps, robots.txt, OpenGraph previews, and deployed live to anshuuicoder.in.

Roadmap

Future Milestone Roadmap

✓

Dark / Light Accent Toggle

✓

Interactive Developer Terminal CLI

✓

Spam-Proof Web3Forms Delivery

○

Live Code Sandbox Preview Modals

○

Search Indexing Across Engineering Blogs

○

WebGL 3D Interactive Nodes Background