A footer marquee timed to its own width, not a library’s default loop.

A single-page personal-brand site for Muhammad Wasif — fitness consultant, corporate wellness advisor, media personality and model — carrying consulting services, corporate wellness offerings, a modeling and editorial portfolio, a transcribed certification history, career associations and a filterable photo archive as one coherent page rather than a template-driven grid, backed by a small admin panel and a MySQL-stored settings table.

A twenty-year career spanning private clients, corporate buyers, media outlets and modeling work reads as a scattered résumé if it is not arranged deliberately, and a personal-brand site for one person has to stay maintainable by that person.

• Consulting, corporate wellness, modeling and media each address a different buyer, on the same single scroll.
• Career facts — associations, facilities, brands — needed to read as documented history rather than overstated as current partnerships.
• Certifications needed the same honesty: transcribed, verifiable credentials kept visibly separate from claims that are not.
• The one piece of content that changes day to day — WhatsApp availability — had to be editable without a redeploy.

A sixteen-section single page, its copy centralised in one typed content file, with a small admin panel scoped to the one setting that actually changes.

• Every section reads from one content file rather than from JSX, so a copy edit is a data change, not a markup change.
• A "Selected Frames" gallery filters the photo archive by category — Fitness, Modeling, Editorial, Lifestyle — rather than presenting one long undifferentiated grid.
• The certifications timeline treats each credential as evidence: a dated entry with a lightbox to the original certificate, and the associations panel is captioned as career history rather than active endorsement.
• A hand-built footer marquee runs on requestAnimationFrame with its duration normalised to the track’s own rendered width, rather than a carousel dependency, and pauses on hover, on a hidden tab and under reduced motion.
• The admin panel is scoped to one job — WhatsApp number, message and enabled state, persisted to MySQL and revalidated on save — protected by scrypt-hashed credentials, signed sessions, CSRF and rate-limited login rather than a quick password gate.

1. 01

   One content file before any section

   Hero lines, service lists, certifications, associations and contact details all come from a single typed file, so a copy edit is a data change rather than a markup change.

2. 02

   Motion split by what it actually needs

   Framer Motion, loaded through LazyMotion in its domAnimation-only configuration, handles scroll-triggered reveals; GSAP with ScrollTrigger is reserved for the two effects that need true scroll-scrubbing — the hero parallax and the certifications timeline.

3. 03

   The admin panel scoped to one job, hardened properly

   Scrypt password hashing, HMAC-signed session cookies, CSRF tokens and per-IP rate limiting protect a panel that controls exactly one thing on the public site — not a general CMS, and not a quick password gate either.

4. 04

   Integrations degrade instead of breaking

   The Instagram feed route selects between a Graph API provider and a placeholder provider at runtime, and always returns HTTP 200 — a missing token shows a placeholder state, not a broken section.

Next.js

App Router, self-hosted Node.js runtime — not a static export, since the admin Server Actions and the Instagram route need a persistent process

React

The sixteen section components the single page is composed from

TypeScript

Application code and the single typed content file the whole page reads from

Tailwind CSS

Layout and the reflow rules — grids collapse per breakpoint rather than just shrinking

Framer Motion

Scroll-triggered reveals, loaded via LazyMotion in its domAnimation-only build to keep the bundle small

GSAP

ScrollTrigger, reserved for the hero parallax and the certifications timeline's scroll-scrubbed progress line

MySQL

One key/value site_settings table behind the admin panel, with an idempotent init script that never drops or overwrites existing data

No outcome for this project has been verified. There is no measurement, export or client statement behind it, so nothing is claimed here — an empty result is the accurate one, not a placeholder for a number to be filled in later.

• The project’s own case-study and technical-summary briefs, prepared from its source tree and cross-checked against the deployed site
• Its structured project metadata: title, category, services, technologies and key features
• Live verification at https://iamwasif.com — the running site, its sections and its footer credit
• The accompanying asset manifest, recording each screenshot’s dimensions and capture context