← projects

yasirsgarage.com

November 2025
Next.jsTypeScriptTailwindMDX

What it is

The site you're reading right now. A personal portfolio built to be genuinely mine — not a template, not a clone. The design system, the live location feature, the home lab documentation — all of it is built from scratch.

Structure

It lives in a monorepo alongside the FindMe backend service:

yasirsgarage/
├── portfolio/     ← Next.js 15 app (this site)
└── findme/        ← Expo RN app + Node location service

Interesting bits

Live location — The /whereisyasir page (password-protected) shows a live map of my current location, fed by the FindMe app. The portfolio reads a location.json file written by the FindMe backend.

MDX writeups — Projects and blog posts are MDX files in content/. No CMS, no database — just files in a repo.

Design system — Four CSS variables (--background, --foreground, --accent, --muted) and three fonts (Syne for headings, DM Sans for body, JetBrains Mono for code). Everything else is Tailwind.

Stack

  • Next.js 15 (App Router, Turbopack)
  • TypeScript
  • Tailwind CSS v4
  • next-mdx-remote for content rendering
  • react-leaflet for the location map