case study
justtayyabkhan.com
My personal portfolio: projects, experience, a photo gallery and client work behind a lock
Solo — design & full-stack · Sep 2026-Current · personal
overview
justtayyabkhan.com is my own portfolio site. It shows my projects, experience, education and skills, plus a few personal pages like a WebGL photo gallery and a places page. I built it in Next.js with TypeScript, Tailwind and Framer Motion, and I keep adding to it as my work changes.
problem
A portfolio has to do two jobs at once: let a client or recruiter scan my work in under a minute, and still feel like something I made rather than a template. It also has to show client work I can't publish openly, because some of it is under NDA.
On top of that I wanted the site to be easy to find and easy for search engines and AI tools to read, without me hand-editing robots.txt and meta files every time a project changes.
approach
- 01I built project cards with a 3D tilt: Framer Motion springs map the cursor position to rotateX/rotateY inside a perspective container, and a muted preview video starts playing on hover and resets on leave.
- 02I put NDA client work behind a password gate. The password is checked on the server, never in the browser, and repeated wrong guesses are throttled; visitors without the password can request access over WhatsApp or email.
- 03I added a private settings page that toggles which nav pages are visible. The config is a single MongoDB document, and a page that has been switched off sends visitors back to the home page if it is opened directly.
- 04For SEO I set metadataBase, per-page titles, canonicals and Open Graph data, wrote a sitemap with hand-maintained lastModified dates, and built llms.txt from one profile.json plus the same project list the pages render. The same profile is also published as schema.org Person JSON for tools that want structured data.
- 05The gallery page renders photos on a React Three Fiber canvas, loading textures through Next.js image optimization at reduced width so the canvas stays light.
features
3D-tilt project cards
Cards tilt with the cursor using spring physics and play a preview video on hover.
Password-gated client work
NDA projects unlock with a password checked on the server, with brute-force protection.
Section toggles
A private settings page turns site sections on or off without a redeploy.
Generated llms.txt
llms.txt and the structured profile are built from the same profile.json and project list the site renders.
WebGL photo gallery
A React Three Fiber canvas displays my photography as an interactive scene.
Live activity widgets
GitHub contribution activity and chess.com stats are fetched from their public APIs.
challenges
Keeping SEO files in sync
llms.txt and the structured profile kept drifting from the real project list. I moved the shared facts into one profile.json and build both from it and the same project list the pages use, so there is one place to edit.
Honest sitemap dates
Using new Date() in the sitemap marked every page as modified on every deploy. I switched to fixed per-page dates that I bump only when a page's content actually changes.
outcome
The site is live at justtayyabkhan.com and is where I send clients and recruiters. It lists my work at VOLUME Creative Agency, my own projects, and client work that stays private until I share the password.
stack
contact
Have something worth building?
Open to freelance. Fastest response on WhatsApp ↗ — usually within the hour.