An interactive, premium digital portfolio built entirely from scratch to showcase engineering history, open-source projects, and technical certifications. Designed specifically to present a world-class professional developer footprint bridging into a cohesive, highly polished "Dark Glass Bento" UI.
- Core Framework: Next.js 16 (App Router) with React 19
- Language: TypeScript in strict mode
- Styling & Layout: Tailwind CSS v4 with a custom glassmorphism design system
- Motion & Interactions: Framer Motion for fluid viewport reveals and SVG animations, over native smooth scroll
- 3D: Three.js via React Three Fiber + Drei
- Icons: Lucide React
- Content: MDX blog pipeline (
next-mdx-remote+gray-matter), parsed server-side - Analytics: Google Analytics 4, Vercel Analytics + Speed Insights
- Backend: Serverless API routes —
nodemaileremail, GitHub REST proxy, and a GA4-backed visitor counter persisted in Upstash Redis (KV) - Quality: Vitest (unit + coverage), Playwright (e2e), lost-pixel (visual regression), axe-core (a11y)
- Built From Scratch: Completely custom, hand-coded components designed to replace standard CVs with a dynamic, immersive experience.
- Bento Grid Architecture: A tightly woven "glassmorphism" layout that wraps multiple data contexts (LinkedIn, Experience, Technical Arsenal) smoothly into viewport grids.
- Live Visitor Counter: A GA4 Data API route exposes a shields.io-compatible badge, persisted in Upstash Redis (KV) so the count stays monotonic and survives GA data-retention windows and outages.
- Google Developer Integration: A bespoke interactive horizontal reel mapping digital badges seamlessly onto physical event photography.
- AI-Driven Development Dashboard: A transparent, data-backed breakdown (below) of the fully AI-native build process.
- Serverless Edge Networking: Native form submissions that proxy straight to automated email routing without third-party form builders.
An animated, self-contained walkthrough of how this site is engineered — the layered, server-first stack, the request lifecycle, the automated content & delivery pipelines, and the system-design principles behind it.
▶ Open the interactive diagram · view the source
A standalone
docs/architecture.html— pure HTML / CSS / vanilla JS, no build step and no dependencies. It's documentation only and is not part of the deployed site.
Copy .env.local.example to .env.local for local development, and mirror the same keys in Vercel → Settings → Environment Variables for production.
Analytics & visitor counter
NEXT_PUBLIC_GA_ID– GA4 Measurement ID (public, safe to expose)GA_PROPERTY_ID– numeric GA4 property ID powering the/api/visitorsbadgeGA_OAUTH_CLIENT_ID,GA_OAUTH_CLIENT_SECRET,GA_OAUTH_REFRESH_TOKEN– OAuth credentials for the GA Data API (preferred auth)GA_SERVICE_ACCOUNT_JSON– (optional) base64-encoded service-account key (fallback auth)KV_REST_API_URL,KV_REST_API_TOKEN– (optional) Upstash Redis (KV) for a persistent, monotonic count; auto-injected by Vercel's Upstash integration
Contact form (SMTP)
SMTP_HOST– mail server host (e.g.,smtp.gmail.com)SMTP_PORT– server port (e.g.,465)SMTP_SECURE–truefor port 465,falsefor STARTTLS (e.g., 587)SMTP_USER– SMTP usernameSMTP_PASS– SMTP App Password (never the primary password)SMTP_FROM– sender addressSMTP_TO– recipient address
- Clone the repository and install dependencies from the repo root.
git clone https://github.com/bilalahamad0/profile.git
cd profile
npm install- Spawn the Next.js development server.
npm run dev- Load
localhost:3000to review the local build.
Run the quality gates before pushing:
npm run lint # ESLint
npm test # Vitest unit + route suites
npm run build # production buildThe site is built securely on Vercel utilizing automatic GitHub CI/CD deployments. Pushing an update to the main branch automatically packages the Next.js distribution bundle, securely injects environment variables, and pushes updates straight to bilalahamad.com.
This portfolio was built entirely through AI pair programming — not AI-assisted, but AI-native from architecture to deployment. Below is a transparent breakdown of every metric, proving AI-driven development delivers production-grade software at a fraction of the cost and time.
| Phase | IDE / Agent | Models | Period | Commits |
|---|---|---|---|---|
| Phase 1 — Foundation & MVP | Antigravity IDE | Gemini 2.5 Flash (orchestration) · Gemini 2.5 Pro (architecture) | Jul 6 – Jul 25, 2025 | 138 |
| Phase 2 — Maintenance | Manual | — | Nov 2025 | 1 |
| Phase 3 — Modernization & Hardening | Cursor IDE | Claude Opus 4.6 (architecture & deep debugging) · Claude Sonnet 4 (fast iteration) | Apr 2 – Apr 14, 2026 | 134 |
| Total | 273 |
| Metric | Phase 1 (Antigravity) | Phase 3 (Cursor) | Combined |
|---|---|---|---|
| Estimated Tokens | ~300k | ~200k | ~500k |
| AI Cost (est.) | ~$6 | ~$15 | ~$21 |
| Equivalent Manual Hours | ~120 hrs | ~80 hrs | ~200 hrs |
| Manual Cost (@$75/hr) | $9,000 | $6,000 | $15,000 |
| Cost Savings | 99.9% | 99.8% | 99.9% |
| ROI | 1,500x | 400x | 714x |
Cost methodology
- Token estimates derived from codebase size (5.6k LOC produced), commit churn (100k+ insertions), and typical agent conversation lengths for each phase.
- AI cost based on published API pricing: Gemini 2.5 Flash ~$0.15/1M input + $0.60/1M output; Claude Opus 4 ~$15/1M input + $75/1M output (amortized via Cursor subscription).
- Manual hourly rate of $75/hr reflects mid-market US contractor rate for a senior full-stack engineer.
- Manual hour estimate based on: Next.js 16 App Router scaffolding (8h), 8 page routes (40h), 13 production components (52h), 3 API routes (12h), responsive + dark mode (16h), SEO + analytics (8h), 3 MDX blog posts (12h), design system + glassmorphism (16h), accessibility + performance (16h), testing + deployment (12h), iterative refinement (8h).
| Metric | AI-Driven (Actual) | Manual Estimate | Acceleration |
|---|---|---|---|
| Total Calendar Days | 19 active days | ~25 working days (5 weeks) | ~8x faster |
| Phase 1: Full MVP | 6 active days | ~15 working days | 2.5x faster |
| Phase 3: Modernization | 9 active days | ~10 working days | Matched + superior quality |
| Avg Commits/Day | 14.4 | ~3–5 (typical) | ~4x throughput |
| Lines Produced | 5,600 LOC | ~5,600 LOC | Same output, fraction of time |
| Code Churn | 100k+ insertions | — | Rapid iteration enabled by AI |
Portfolio: bilalahamad.com
├── Framework ............ Next.js 16 (App Router) + React 19
├── Language ............. TypeScript (strict mode)
├── Styling .............. Tailwind CSS v4
├── Motion ............... Framer Motion + native smooth scroll
├── 3D ................... Three.js + React Three Fiber + Drei
├── Total LOC ............ 5,600+ (source) · 780+ (content/config)
├── Components ........... 22 (src/components) · 0 dead code
├── Page Routes .......... 8 (home, experience, certifications, projects, ai, blog, blog/[slug], contact)
├── API Routes ........... 5 (contact, repos, badges, ai-metrics, visitors)
├── Blog Posts ........... 7 MDX articles
├── Dependencies ......... 17 runtime · 28 dev
├── Test Framework ....... Vitest 4 + v8 coverage · Playwright e2e · lost-pixel visual
├── Test Suites .......... 7 unit/route suites + e2e + visual regression
├── Test Coverage ........ Unit, API-route, e2e, and visual-regression layers
├── Build Target ......... Vercel · Node 22
└── CI/CD ................ GitHub Actions → Vercel auto-deploy
| Area | Status | Details |
|---|---|---|
| TypeScript Strict | ✅ | Zero type errors across the source tree |
| ESLint | ✅ | next/core-web-vitals + next/typescript rules |
| Accessibility | ✅ | WCAG 2.4.1 skip-link, aria-* labels, prefers-reduced-motion, focus-visible rings |
| SEO | ✅ | OpenGraph, Twitter cards, per-page metadata, robots config |
| Performance | ✅ | next/font swap, dynamic imports (SSR off), image optimization, aggressive caching headers |
| Security | ✅ | HTML sanitization on contact APIs, no hardcoded secrets, poweredByHeader: false |
| Dead Code | ✅ | 15 unused components removed (965 LOC cleaned) |
| Test Infrastructure | ✅ | Vitest unit/route suites, Playwright e2e, lost-pixel visual regression, axe-core a11y — green in CI |
| Pattern | Implementation |
|---|---|
| Sanity Testing | Baseline math assertion validates test infrastructure end-to-end |
| Type-Level Testing | TypeScript strict mode acts as a compile-time test suite across the entire source tree |
| Lint-Level Testing | ESLint with Next.js core-web-vitals catches runtime anti-patterns at author time |
| Visual Regression | Automated via lost-pixel in CI, backed by Vercel preview deployments on each push |
| Integration Confidence | tsc --noEmit zero-error gate validates all cross-module contracts |
| Type | Count | Purpose |
|---|---|---|
feat |
43 | New features and capabilities |
fix |
42 | Bug fixes and corrections |
style |
23 | Visual refinements |
docs |
7 | Documentation updates |
chore |
5 | Maintenance and tooling |
refactor |
4 | Code restructuring |
perf |
3 | Performance optimizations |
content |
2 | Content updates |
| Total | 273 | Conventional Commits standard |
┌─────────────────────────────────────────────────────────┐
│ AI-DRIVEN DEVELOPMENT SCORECARD │
├─────────────────────┬──────────┬────────────┬───────────┤
│ Metric │ AI-Built │ Manual Est │ Advantage │
├─────────────────────┼──────────┼────────────┼───────────┤
│ Development Cost │ ~$21 │ $15,000 │ 714x ROI │
│ Calendar Time │ 19 days │ 25 days │ ~8x │
│ Active Dev Hours │ ~25 hrs │ ~200 hrs │ ~8x │
│ Code Quality │ Zero TS │ Variable │ Superior │
│ │ errors │ │ │
│ Commits │ 273 │ ~80 │ 3.4x │
│ Iteration Speed │ Minutes │ Hours │ ~10x │
│ Dead Code at Ship │ 0 │ Typical │ Clean │
│ Accessibility │ WCAG AA │ Often │ Built-in │
│ │ │ skipped │ │
│ SEO Optimization │ Full │ Partial │ Complete │
└─────────────────────┴──────────┴────────────┴───────────┘
| Capability | Evidence |
|---|---|
| Full-Stack Architecture | Next.js 16 App Router with server/client component boundaries, ISR caching, API routes |
| Design System Creation | Custom glassmorphism tokens, CSS design system, responsive breakpoints |
| Performance Engineering | Dynamic imports, font optimization, image pipeline, caching headers |
| Security Hardening | XSS prevention, input sanitization, secret management |
| Code Review & Cleanup | Identified and removed 15 dead components, fixed 10 issues in one pass |
| Accessibility Engineering | Skip-to-content, ARIA labels, reduced motion, focus management |
| Content Architecture | MDX blog system with file-based routing, frontmatter parsing, syntax highlighting |
| DevOps Integration | Vercel CI/CD, GitHub Actions (Dependabot auto-fix), environment variable management |
Released under the MIT License © 2023 Bilal Ahamad.
Dashboard data auto-generated from git history (273 commits across Phases 1–3) and codebase analysis. Last updated: May 2026.