zaynedoc.dev

My personal portfolio website!

Comment

Next.js React TypeScript Tailwind CSS Vercel

My personal portfolio website - a creative, heavily themed, multi-page site built with Next.js and deployed on Vercel.

Live: zaynedoc.dev

Architecture

Browser → Vercel Edge/CDN → Next.js (App Router)
                              ├── Static Pages (SSG)
                              ├── Client Components (animations, 3D effects)
                              └── Hardcoded data (TypeScript arrays)

zaynedoc.dev/
├── app/
│   ├── layout.tsx          # Root layout, SEO metadata, fonts
│   ├── page.tsx            # Landing / ASCII terminal intro
│   ├── home/               # Retro web 1.0 homepage
│   ├── about/              # About page with bio & skills
│   ├── dashboard/          # Wii-themed project & media gallery
│   ├── robots.ts           # Crawler rules
│   └── sitemap.ts          # Auto-generated sitemap
├── components/
│   └── ui/                 # Reusable UI components
├── data/                   # Hardcoded content (projects, media, socials, etc.)
└── public/                 # Static assets (images, videos)

Pages

Route Theme Description
/home Web 1.0 / MySpace Classic personal homepage with photo album, project list, calendar, and badges
/about Terminal / hacker Bio, skills showcase, and ASCII art with a dark terminal feel
/dashboard Nintendo Wii Channel grid for projects and media with zoom overlays, video playback, and page sliding

Key Features

  • ASCII Terminal Intro — CRT-style landing page with animated typing and retro scanlines
  • Wii Dashboard — Projects and socials displayed as interactive channel cards with zoom-in video overlays, scroll navigation, and a live clock
  • Hardcoded Content — All projects, media, skills, and socials stored as typed arrays — no database, no CMS
  • SEO Ready — Open Graph / Twitter meta tags, auto-generated sitemap, and robots.txt
  • Custom Cursor — Dashboard page uses a themed cursor that reacts to clicks
  • Fully Static — Zero server-side compute; everything is SSG + client components

Tech Stack

Layer Tech
Framework Next.js 16 (App Router)
Language TypeScript
UI React 19, Tailwind CSS 4, CSS Modules
Hosting Vercel (Hobby tier)
Domain Cloudflare DNS
SEO robots.ts, sitemap.ts, Open Graph metadata

Built With

Share this project:

Updates