Md Umar Siddique | Engineering Portfolio

Systems Over Syntax.

A production-grade Next.js 16 application showcasing full-stack architecture, serverless orchestration, and disciplined engineering practices.

View Live Production Deployment   •   Local Setup   •   Repository Report an Issue

Overview

This repository houses the source code for umarsiddique.dev, a portfolio engineered to demonstrate "Systems Over Syntax." Unlike standard static portfolios, this application is a dynamic, full-stack system built on the Next.js 16 App Router and React 19.

It is designed to highlight architectural rigor, featuring a custom-built interactive terminal, a fully serverless messaging infrastructure with database persistence, a strictly typed, tested codebase, and an automated CI/CD pipeline enforcing quality gates before every production deploy. The project adheres to a "Shift Left" philosophy, utilizing linting, formatting, type-checking, and unit testing to catch issues before they reach CI.

Application Preview

Features & Architecture

1. Interactive CodeIntro Terminal

The hero section features a custom CodeIntro component simulating a developer terminal with a functional macOS-style window header.

• State-Driven UI: Window controls are fully functional — "Maximize" triggers a z-index overlay revealing hidden ASCII art, "Minimize" collapses the DOM node via layout projection.
• Physics-Based Animation: Powered by motion/react spring physics for fluid, non-blocking window transitions.
• Component Isolation: Encapsulated as a Client Component to decouple animation logic from the main thread, preserving LCP performance.

2. Robust Serverless Messaging System

The contact form is not a simple mailto link or third-party iframe; it is a complete full-stack feature.

• Server Actions: Utilizes Next.js Server Actions and React 19's useActionState hook to handle form submissions without a separate API route, ensuring progressive enhancement.
• Data Integrity: Input is validated strictly against a Zod schema (contactSchema) on the server before processing.
• Persistence & Notification:
  • Storage: Validated messages are persisted to a Neon Serverless PostgreSQL database for long-term record keeping.
  • Transactional Email: The system orchestrates the Resend API to send dual emails: an immediate admin notification and a professional auto-reply to the user.
• Error Handling: Granular error states are returned from the server and rendered inline, providing immediate, accessible feedback.

3. Infrastructure & Edge Deployment

The application is engineered for low latency and high availability.

• DNS Strategy: The domain (.dev TLD registered via Porkbun) is routed through Vercel's authoritative Nameservers. This enables immediate propagation of DNS changes and leverages the Vercel Edge Network for global caching.
• Security: Strict HTTPS enforcement and automated SSL generation via Let's Encrypt.
• Optimization: Assets and font files (Geist Sans/Mono) are optimized and served via the edge, ensuring minimal Time to First Byte (TTFB).

4. Testing & Quality Assurance

This project treats testing as a first-class citizen, not an afterthought.

• Unit Testing: Critical components (e.g., ContactForm, ContactCard, HeroSection) are tested using Vitest and React Testing Library.
• Mocking Strategy: External dependencies like motion/react, next/navigation, and server actions are mocked to ensure isolated, deterministic tests.

5. CI/CD Pipeline

To maintain high engineering standards, the repository enforces a strict automated workflow that prevents technical debt:

• Git Hooks (Husky): Pre-commit hooks run validation scripts locally, preventing broken or unformatted code from reaching the remote repository.
• Lint-Staged: Runs ESLint and Prettier only on staged files for consistent style without manual intervention.
• Production-Ready Gates: Every commit must pass type-checking (tsc) and the full test suite before any code reaches production.
• Deployment: Vercel auto-deploys to production on every push to main — no broken build ever reaches the live environment.

Tech Stack

Category	Technology	Usage
Core Framework	Next.js 16	App Router, Server Actions, Edge Runtime capability.
UI Library	React 19	Server Components, useActionState, Hooks.
Language	TypeScript	Strict type safety across the entire codebase.
Database	Neon (Postgres)	Serverless SQL database for persisting contact form data.
Messaging	Resend	Transactional email API for notifications and auto-replies.
Styling	Tailwind CSS v4	Utility-first CSS, configured with generic theme variables.
Animation	Motion	Complex layout animations, spring physics, and micro-interactions.
Validation	Zod	Schema validation for environment variables and form inputs.
Testing	Vitest	Blazing fast unit test runner compatible with Vite.
CI/CD	Husky + Lint-Staged + Vercel	Pre-commit validation, type-check, test gates, and automated edge deployment.

Local Development

Follow these steps to set up the project locally.

Prerequisites

• Node.js 18+ (LTS recommended)
• npm or pnpm

1. Clone the Repository

git clone https://github.com/umarSiddique010/umarsiddique-portfolio.git
cd umarsiddique-portfolio

2. Install Dependencies

pnpm install

3. Environment Configuration

Create a .env file in the root directory. You will need credentials for Neon and Resend.

# Database (Neon Postgres)
DATABASE_URL="postgres://user:password@ep-host.region.aws.neon.tech/neondb?sslmode=require"

# Email (Resend)
RESEND_API_KEY="re_123456789"

4. Run Development Server

pnpm dev

Open http://localhost:3000 to view the application.

5. Running Tests

To execute the Vitest suite:

pnpm test

---

Developer & Maintainer

Md Umar Siddique

© 2024 - Present. Released under the MIT License.