Brain
This site is built in the open. Every decision behind it lives in a real Obsidian vault, rendered here. Explore the graph, or read the notes below.
- 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.