Editorial home & work
Hero narrative, selected work, services framing, manifesto, and FAQ.
NeedFirst impression must feel premium and intentional.
ValueBetter-qualified conversations.
ProjectsCase StudyPersonal Portfolio2026
Case Study
Zohaib Nawaz Dev
A craft-first personal portfolio—editorial storytelling, Serwist PWA, theme studio, intentional motion, and an on-site AI chatbot.
A craft-first personal portfolio—editorial storytelling, theme control, PWA polish, motion, and an on-site AI chatbot for serious client conversations.
Zohaib Nawaz Dev is the live personal brand site for a full-stack product engineer: work, services, pricing, story, and contact—built for performance, installability, and presence, not as a multi-user product dashboard.
- 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 with editorial clarity so prospective clients can evaluate fit and start a conversation.
The craft layer is the product story: Serwist-powered PWA with offline fallbacks, a multi-axis theme customizer (theme, accent, font, radius), GSAP and Lenis motion, cookie-aware analytics, and ambient UI polish.
An on-site AI chatbot (Gemini) answers common questions about the work and services so visitors arrive to a call better prepared—without turning the site into a tool marketplace.
Ops for share pages, hire forms, leads, and manager approvals live in ZN CMS on a shared Supabase database. This case study focuses on the public brand experience.
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, offline, or second visit.
- Theme and accessibility preferences are ignored—one fixed look for every visitor.
- Common questions wait for email or a call, so inquiries arrive under-prepared.
- Performance and motion either feel stiff or become decorative noise.
Why it matters
Premium clients judge the whole system—not only screenshots. 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, story, FAQ, journals, resume, and contact—clear narrative and next steps.
PWA + performance
Serwist service worker, precached marketing routes, offline fallback, and NetworkOnly rules for APIs so the brand site stays snappy.
Theme studio
Floating customizer plus /customize—theme modes, page color, fonts, radius, and accent so visitors can tune the experience.
Motion with intent
Lenis smooth scroll, GSAP page transitions and liquid image reveals, parallax, and a restrained preloader—presence without 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
Personal brand site
Services & pricing
Clear engagement framing and commercial expectations.
NeedClients need scope and investment context early.
ValueShorter path from interest to inquiry.
Contact, resume & legal
Inquiry form, printable resume, privacy and terms.
NeedProfessional close for serious prospects.
ValueLower friction to start a project discussion.
Craft & performance
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.
Motion system
Lenis scroll, GSAP transitions, liquid image reveals, parallax engine.
NeedMotion should create hierarchy, not distraction.
ValueMemorable presence that still feels fast.
Production monitoring
Sentry, metadata, social previews, and cookie-gated analytics (GA4 / Plausible).
NeedA live brand site needs insight without dark patterns.
ValueReliable under real traffic with consent-first measurement.
Theme & atmosphere
Theme customizer
Theme (noir / paper / midnight / system), accent, font, radius, page color—floating panel and full /customize studio.
NeedOne fixed palette is not how people browse.
ValueVisitors can make the site feel theirs while exploring.
Multi-font stack
Expressive type loaded for editorial and UI surfaces.
NeedTypography carries brand as much as layout.
ValueDistinctive look without default system stacks.
Sound & music (optional)
UI click/key sounds and background music toggles inside the theme studio.
NeedAtmosphere is part of presence when it stays optional.
ValueRicher session without forcing audio.
On-site AI 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.
Consult blueprint (built)
Guided intake → structured blueprint export—implementation in-repo for advisory use.
NeedEarly ideas often arrive without enough structure for a call.
ValueSharper discovery when the surface is enabled.
User Journey
Prospect → Inquiry
- 01
Visitor opens the portfolio
- 02
Optional theme tune or PWA install
- 03
Reviews work, services, and pricing
- 04
Asks the AI chatbot common questions
- 05
Sends a contact inquiry
- 06
Discovery conversation
Return visit → Offline / install
- 01
Browser caches marketing routes via Serwist
- 02
Visitor revisits from home screen or weak network
- 03
Offline fallback keeps brand context available
- 04
Continues browsing when back online
Explorer → Theme studio
- 01
Opens floating customizer or /customize
- 02
Tries theme, accent, font, and radius
- 03
Preferences persist for the session
- 04
Continues reading work with a tuned look
Technical Highlights
Serwist PWA shell
Turbopack-integrated service worker precaches marketing routes and serves /offline; sensitive and API paths stay NetworkOnly.
Business valueThe brand site feels product-grade on repeat visits.
Multi-axis theming
Cookie-booted theme script plus a customizer for mode, accent, font, radius, and page color.
Business valueVisitors experience craft, not a single hardcoded skin.
Motion without jank
Lenis, GSAP transitions, liquid reveals, and parallax coordinated with page-transition and preloader flows.
Business valuePresence that still reads as performance-conscious.
Portfolio-aware chatbot
Gemini chat API with curated portfolio context and suggested prompts on public pages.
Business valueHigher-quality conversations without a human on standby.
Consent-first analytics
Cookie consent gates optional GA4 and Plausible; Sentry covers errors.
Business valueInsight without undermining trust.
Clear ops boundary
Share / hire authoring, leads triage, and manager approvals are owned by ZN CMS—not this showcase case study.
Business valuePortfolio stays a brand site; ops stay an ops desk.
Challenges & Solutions
| Challenge | Solution |
|---|---|
| A portfolio must feel premium without becoming a heavy SPA that fails on mobile or offline. | Serwist PWA with selective precache, NetworkOnly APIs, and an offline fallback page. |
| One fixed theme undersells craft and accessibility preferences. | Theme customizer with multiple axes and a dedicated /customize studio. |
| Motion often fights performance or becomes decorative clutter. | Intentional GSAP/Lenis system—transitions and reveals that support hierarchy. |
| Prospects ask the same questions before every call. | Gemini chatbot grounded in portfolio context so inquiries arrive sharper. |
| Delivery tools (share/hire) were muddying the portfolio narrative. | Keep the public site as showcase craft; move Share Studio, Hire, and leads ops to ZN CMS. |
Tech Stack
- Frontend
- Next.js, React, TypeScript, Tailwind CSS, GSAP, Lenis, Swiper
- PWA
- Serwist (@serwist/turbopack) — precache, offline, NetworkOnly APIs
- Theming
- Cookie-booted theme script, floating customizer, /customize studio
- Backend
- Next.js Route Handlers, domain services
- AI
- Google Gemini — portfolio chatbot (consult blueprint available in-repo)
- Resend — contact inquiries
- Infrastructure
- Sentry; optional GA4 & Plausible after consent
- Deployment
- Netlify
Project Gallery
Recommended capture order for the case-study gallery.
- 01Hero — portfolio home
- 02Selected works / projects grid
- 03Services & pricing
- 04About / story
- 05Theme customizer — light & dark modes
- 06Customize studio — fonts & accents
- 07AI chatbot — suggested prompts
- 08PWA / offline fallback
- 09Motion — liquid image & page transition
- 10Resume / contact
- 11Mobile — home and work
Key Learnings
Product
A personal portfolio wins serious work when craft is visible—PWA, theme, motion, and assist—without pretending private ops tools are the hero.
Engineering
Selective service-worker rules matter: cache the brand, never trap authenticated or API traffic.
Architecture
Splitting showcase (portfolio) from ops (ZN CMS) keeps both narratives honest and maintainable.
Business
Clients trust a partner whose own site demonstrates the same performance and product discipline they expect to buy.
Future Improvements
| Priority | Improvement | Business value |
|---|---|---|
| High | Re-enable or refine AI Consult as a public advisory surface when the funnel needs it | Sharper discovery conversations from a structured blueprint. |
| 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. |
| Medium | Theme presets shared via URL for client reviews | Prospects can return to a tuned look. |
| Low | Optional reduced-motion profile beyond system preference | Broader accessibility for motion-sensitive visitors. |
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 conversationOptional technical notes
How the public portfolio stays a showcase while ops live next door in ZN CMS.
Showcase, not ops desk
Public pages carry the personal brand: work, services, pricing, theme, chatbot, and contact. The experience is optimized for first impression, return visits, and inquiry quality.
Authoring share pages, reviewing hire submissions, triaging leads, and approving drafts happen in ZN CMS on the shared Supabase project—so this site does not need to sell itself as a signed-in studio.
PWA boundaries
Marketing routes are precached for speed and offline resilience. API and authenticated paths stay NetworkOnly so the service worker never pretends to cache private or mutating traffic.
Theme as product surface
The floating customizer and /customize studio expose the same design system visitors feel on first load—proof that theming and type were engineered, not bolted on.
Role
Full Stack Product Engineer
Client
Personal brand site
Date
2026
Collaborators
Solo build
Next Project
Apna Contacts
View next