Zohaib Nawaz Dev

Personal brand site built like a product — Serwist PWA, theme studio, intentional motion, and an on-site AI assistant.

Industry: Professional services · Product engineering
Category: Personal portfolio · Brand showcase
Role: Full Stack Product Engineer — design, build, and operate end to end
Timeline: 2026 — ongoing
Status: Live personal site
Stack: Next.js · React · TypeScript · Tailwind · Serwist PWA · GSAP · Lenis · Gemini · Resend · Netlify

Executive Overview

Zohaib Nawaz Dev is a personal portfolio website—not a SaaS console. It presents work, services, pricing, and story so prospective clients can evaluate fit and start a conversation.

The craft layer is the story: Serwist PWA with offline fallbacks, a multi-axis theme customizer, GSAP/Lenis motion, and a Gemini chatbot that answers common questions before a call.

Share Studio, Hire, leads, and approvals live in ZN CMS. This case study focuses on the public brand experience only.

Business Problem

Existing workflow

A static portfolio for credibility—fast to ship, easy to forget: weak theme control, no offline story, generic motion, and no in-page way to answer recurring prospect questions.

Pain points

Prospects struggle to tell a serious product engineer apart from a commodity page builder.
Sites that look premium on first load often feel brittle on mobile or offline.
One fixed theme ignores visitor preferences.
Common questions wait for email, so inquiries arrive under-prepared.

Why it matters

Premium clients judge the whole system. A portfolio that feels intentional, fast, and installable signals the same craft expected on their product work.

Solution

Zohaib Nawaz Dev treats the public site as a showcase product:

Editorial brand site
Home, work, projects, services, pricing, about, and contact—clear narrative and next steps.
PWA + theme
Serwist service worker with offline fallback; theme customizer for mode, accent, font, and radius.
Motion with intent
Lenis smooth scroll and GSAP transitions that create hierarchy—not noise.
AI chatbot
Portfolio-aware Gemini chat that answers common questions before a discovery call.

Stronger first impressions, a site that feels engineered under real use, and better-prepared inquiries—while delivery ops stay in ZN CMS.

Core Features

Brand site

Editorial home & work

Hero narrative, selected work, services framing, and FAQ.

NeedFirst impression must feel premium and intentional.

ValueBetter-qualified conversations.

Services & pricing

Clear engagement framing and commercial expectations.

NeedClients need scope and investment context early.

ValueShorter path from interest to inquiry.

Contact & resume

Inquiry form and printable resume.

NeedProfessional close for serious prospects.

ValueLower friction to start a project discussion.

Craft

Serwist PWA

Service worker with precached marketing paths and an offline page; APIs stay NetworkOnly.

NeedReturn visits and flaky networks should not empty the brand.

ValueInstallable, resilient portfolio experience.

Theme customizer

Theme, accent, font, radius—floating panel and /customize studio.

NeedOne fixed palette is not how people browse.

ValueVisitors can make the site feel theirs while exploring.

Motion system

Lenis scroll, GSAP transitions, and liquid image reveals.

NeedMotion should create hierarchy, not distraction.

ValueMemorable presence that still feels fast.

Assist

Portfolio chatbot

Gemini-powered Q&A grounded in portfolio context, with suggested prompts.

NeedCommon questions should not wait for office hours.

ValueBetter-prepared inquiries.

User Journey

Prospect → Inquiry

01
Visitor opens the portfolio
02
Reviews work, services, and pricing
03
Optional theme tune or chatbot questions
04
Sends a contact inquiry
05
Discovery conversation

Explorer → Theme studio

01
Opens floating customizer or /customize
02
Tries theme, accent, font, and radius
03
Continues reading work with a tuned look

Technical Highlights

PWA shell with hard boundaries

Serwist precaches marketing routes and serves /offline; API and sensitive paths stay NetworkOnly so the worker never caches private traffic.

Business valueThe brand feels installable on return visits without trapping mutating requests.

Theme before first paint

A cookie-booted theme script applies mode, accent, font, and radius early; the customizer and /customize studio write the same preferences.

Business valueVisitors see a tuned look without a flash of the wrong theme.

Motion that respects the page

Lenis scroll and GSAP page transitions are coordinated with App Router navigation so motion supports hierarchy instead of fighting the layout.

Business valuePresence that still reads as fast and intentional.

Portfolio-grounded chatbot

Gemini answers from curated portfolio context and suggested prompts—not an open-ended generic assistant.

Business valueProspects arrive to a call with clearer questions already answered.

Challenges & Solutions

Challenge	Solution
A service worker that caches too broadly will trap API calls and make a “premium” portfolio feel broken after install.	Selective Serwist precache for marketing routes only, NetworkOnly for APIs, plus an offline fallback page.
Multi-axis theming flashes the wrong skin if preferences load after React paints.	Cookie-booted theme script on first load, with the floating customizer and /customize studio writing the same cookie-backed prefs.
GSAP and smooth-scroll libraries easily fight App Router navigations and tank mobile performance.	A deliberate motion system—page transitions and reveals tied to hierarchy, not decorative noise on every element.

Tech Stack

Frontend: Next.js, React, TypeScript, Tailwind CSS, GSAP, Lenis
PWA: Serwist — precache, offline, NetworkOnly APIs
Theming: Cookie-booted theme script, floating customizer, /customize studio
AI: Google Gemini — portfolio chatbot
Email: Resend — contact inquiries
Deployment: Netlify; Sentry; optional consent-gated analytics

Project Gallery

Recommended capture order for the case-study gallery.

01Hero — portfolio home
02Selected works / projects grid
03Services & pricing
04Theme customizer — light & dark
05AI chatbot — suggested prompts
06PWA / offline fallback
07Mobile — home and work

Key Learnings

Product

A portfolio wins serious work when craft is visible on the public site—and private ops tools stay out of the hero narrative.

Engineering

PWA rules are a product decision: cache the brand shell, never the request paths that must stay live.

Architecture

Splitting showcase (this site) from ops (ZN CMS) keeps both stories honest and easier to evolve.

Future Improvements

Priority	Improvement	Business value
High	Richer journals publishing pipeline	Ongoing thought leadership without a separate blog stack.
Medium	Deeper Lighthouse / Core Web Vitals budgets in CI	Keep motion and PWA gains from regressing.

Building a brand site that needs the same craft?

Zohaib Nawaz Dev is a live personal portfolio—editorial storytelling, PWA polish, theme control, motion, and an AI chatbot. If you want a showcase that feels engineered, start with a discovery call.

Start a conversation

Role

Full Stack Product Engineer

Client

Personal brand site

Date

2026

Collaborators

Solo build

Next Project

ZN AI (Zunayra)

View next