Skip to content
Hafiz HQQA Engineer
All projects
In Progress2026//Case study

Hafiz HQ

A single-scroll portfolio built in Next.js — QA identity first, project case studies behind each card.

  • Next.js
  • Tailwind CSS
  • MDX
  • TypeScript

Problem

A portfolio has one job: get from "who is this?" to "I want to talk to them" without making a visitor work for it. The common failure is too much — too many pages, too many roles, too much going on — so people leave before they form an impression.

This site needed to answer three questions quickly: what Hafiz does, what he has built, and how to reach him.

Approach

Single scrolling page. Lead with the QA identity, surface data analytics and development as supporting evidence, and put every project behind a card that links to a proper case study.

Content lives in MDX files so adding a new project means adding a file, not editing a component.

Architecture

  • Next.js 15 App Router: server components by default; client components only for state and browser APIs (canvas, scroll-spy, live clock).
  • Tailwind CSS v4: design tokens in @theme using OKLCH — background, surface, card, and a pass-green accent.
  • MDX content layer: project case studies in content/projects/ parsed at build time via lib/content.ts.
  • Aurora canvas: a requestAnimationFrame loop with drifting light blobs, cursor halo, and ripple propagation — drawn with globalCompositeOperation: "screen" so colors add to the dark base.

Implementation

One route (app/page.tsx) composes a navbar, hero, and five sections (About, Skills, Experience, Work, Contact) in a shared container. The navbar uses IntersectionObserver for scroll-spy active states.

Projects load from MDX at build time and render as cards linking to case-study pages at /projects/[slug].

Challenges

Restraint. A canvas layer and a lot of dark space invite over-decoration. The discipline was keeping every visual decision tied to the content — the ✓ watermark reinforces the QA identity, the green accent is used only where it carries meaning, and nothing animates just to look busy.

Outcome

A focused portfolio that gets from landing to "here's what I've done" in one scroll.

Lessons Learned

A single clear identity is easier to communicate than several competing ones. Leading directly with QA, rather than asking visitors to pick a role, made the page much simpler to read.