Brain
Yeh site open mein banayi gayi hai. Iske peeche ka har decision ek real Obsidian vault mein hai, jo yahan render kiya gaya hai. Graph explore karo, ya neeche notes padho.
- Maps of content
- Meta
- Decisions
- Features
- Design
- Phases
Maps of content 2
- Portfolio Brain This vault documents every decision behind Mohd Saif's portfolio, from day one to launch. It is a real Obsidian vault and the source of the graph view rendered on the site (see Knowledge Graph).
- Projects Presented in two tracks (see D012 - Work Section Structure). ⭐ = featured deep case study (D004 - Case Study Framework); the rest are grid link-cards. Metrics/outcomes are Saif's to fill.
Meta 3
- About Saif Mohd Saif, Product Engineer. 3.5 years. Positioning: "I build solutions, not dead software."
- North Star - Site as Proof A visitor should finish the experience thinking "this person clearly knows how to build great products", before reading a word about Saif.
- Open Questions All planning decisions are now resolved or defaulted, the plan is build-ready. Resolve → convert into a D0xx decision note.
Decisions 20
- D001 - Site as Proof Principle Context: A conventional portfolio tells you someone is good. Saif's goal is subtler, the site should make you feel it.
- D002 - Tech Stack Context: Need elite performance, great SEO, multilingual routing, and a few rich interactive surfaces. Guided by D001 - Site as Proof Principle.
- D003 - Visual Restraint and One WebGL Moment Context: "Minimal + clean" is non-negotiable, yet the site must impress. Tension between wow and calm.
- D004 - Case Study Framework Context: Featured work must prove product thinking, not just output. Saif has the projects; metrics will be filled in by him.
- D005 - Contact via Serverless Context: Site must make contacting Saif effortless, and the contact surface should itself demonstrate craft.
- D006 - i18n Seven Languages and RTL Context: Saif wants the site in English, Hindi, Kannada (Bangalore), Urdu, Telugu, Arabic, and Hinglish. Urdu + Arabic are RTL; four are non-Latin scripts.
- D007 - Build-time AI Translation Context: D006 - i18n Seven Languages and RTL needs 6 non-English catalogs. Saif said translations come from English.
- D008 - Fully Custom Analytics Context: Saif wants an in-site analytics product (like PostHog/CleverTap) showing real visitor behavior, explicitly to showcase skill.
- D009 - SEO and AI Crawlers Context: Saif wants best-in-class SEO and to be allowed and surfaced by AI crawlers.
- D010 - Knowledge Graph Build in the Open Context: Saif wants to document the whole project as an Obsidian-like graph of connected notes, rendered on the site and working in real Obsidian.
- D011 - Colour Direction Stone Context: Needed an accent/colour system. Saif explicitly rejected the generic AI-default palette (saturated blue/purple/green/orange/neon) as a template tell.
- D012 - Work Section Structure Context: Saif has 11 projects, 5 professional (some 0→1, some contributed) + 6 personal. Showing all 11 as equal deep case studies would look unprioritized, the opposite of the site's signal.
- D013 - Live Demo Ask This Site Context: Saif wants a small interactive toy on the site (confirmed). Needs to prove product craft first-hand.
- D014 - Shoppin Case Study Scope Context: Shoppin' is Saif's current employer (About Saif). Featured as a deep case study (D012 - Work Section Structure), so scope needs a privacy call.
- D015 - Defer Content Translation Context: Having Fable translate large content (About, case studies, section copy, brain notes) into 6 locales mid-build burns a lot of tokens for little value, the audience reads English anyway, and translation is a build-time script's job,
- D016 - WebGL Uses Plain Three Not R3F Context: The spec specified React Three Fiber (R3F) for the WebGL Hero with a < ~120KB gz budget. In practice those conflict: R3F v9 dynamic-imports the whole three namespace → measured 241KB gz, double the budget.
- D017 - Defer External Service Activation Context: Some features need external services tied to Saif's billing/accounts, the AI demo needs a credit card on Vercel AI Gateway; the analytics pipeline needs a production Postgres + Redis. Saif wants to make billing/account decisions at
- D018 - Multi-page and Header Nav Context: A UX audit (and Saif's own reaction) found the single-page structure (~11,000px scroll) had no navigation, you could only scroll or "back to top," couldn't jump to Work/Brain/Analytics from the top.
- D019 - Visual Richness Overhaul Context: The English site shipped text-led with images deferred; the audit + Saif found it "boring / cheap / off", all text on near-black, no product screenshots, no icons, no App Store/Play Store badges, dead scroll space, empty-looking gr
- D020 - Art Direction v2 Bold Monochrome Context: After the Phase 7 overhaul (multi-page, imagery, fixes), the refined-minimal look still read as "boring / not memorable / not unique" to Saif. We reset the direction: Saif chose bold maximalist 2D, wants wide bold type (not condens
Features 5
- Contact Form Makes hiring Saif effortless, and doubles as a live craft demo. A form that nails every state is an unfakeable sample of engineering standards (North Star - Site as Proof).
- Custom Analytics A public, in-site analytics product built end-to-end, the flagship engineering proof. Decision + trade-offs: D008 - Fully Custom Analytics.
- Internationalization Seven locales: English (source), Hindi, Kannada (Bangalore), Urdu, Telugu, Arabic, Hinglish. Urdu + Arabic are RTL. Full rationale + risk: D006 - i18n Seven Languages and RTL.
- Knowledge Graph This very vault, rendered on the site as an interactive Obsidian-style graph. The "I document / I reason" meta-proof of North Star - Site as Proof. Decision: D010 - Knowledge Graph Build in the Open.
- WebGL Hero The single "wow" beat: a calm domain-warped fbm "graphite dust" field in Stone tones behind sharp type, subtle cursor reaction, settles on load. Plain three.js (named imports, not R3F, see D016 - WebGL Uses Plain Three Not R3F) in a lazy is
Design 1
Phases 10
- Phase 0 - Foundation Themed, multilingual, deployable shell. Built with Fable, deployed to Vercel.
- Phase 1 - Content MVP Static, responsive, SEO-complete site + /brain content layer. No motion yet. Built with Fable. 238 pages, deployed to Vercel preview.
- Phase 2 - Motion Premium scroll motion on the Phase 1 site. No content/SEO/i18n files touched (only motion attributes on existing markup). Deployed to Vercel preview.
- Phase 3A - WebGL and Graph The two flagship visual moments, into the existing mount points. Deployed to Vercel preview.
- Phase 3B - AI Ask This Site The live-demo AI toy (D013 - Live Demo Ask This Site). Everything works end-to-end up to the model call; deployed to Vercel preview.
- Phase 4 - Analytics The flagship engineering showcase (D008 - Fully Custom Analytics). Works end-to-end against local storage; deployed to preview with the designed empty state (prod storage wired at launch per D017 - Defer External Service Activation).
- Phase 5 - Contact and Polish Contact wired + a comprehensive audit pass. English site now feature-complete. Deployed to preview.
- Phase 6 - Translation Tooling The build-time AI translation script (D007 - Build-time AI Translation). Tooling done + mock-verified; the real run happens at launch on final English (D015) once the AI key is active. Deployed preview = byte-equivalent English behavior (al
- Phase 7 - Visual and IA Overhaul Triggered by a UX audit (browser-driven) + Saif's reaction: the feature-complete English site read as "boring / cheap / off", text-heavy, no imagery/icons/badges, dead scroll space, empty-looking graph/analytics, single-page with no nav, an
- Roadmap Each phase ends deployable to a Vercel preview. Built phase-by-phase in Fable.