Release Logs

Home layout: Centered editorial shell with clearer section rhythm, case studies above the perspective marquee, and a four-column writing grid with article cover images.

Case study video covers: Selected case study cards now loop product demos at 2x speed, with automatic fallback to static covers if a video cannot load or play.

Writing cards: Article cards show Medium cover art, read-time metadata, and left-aligned copy for easier scanning.

Footer: AI tokens widget and contact links reorganized so primary CTAs and social links sit at the bottom of the page.

Password-protected case studies: Full case study write-ups now require a password before viewing, so detailed project content stays gated for invited viewers.

Build Fix: Moved the Agentation dev tool dynamic import into a client component to resolve a Next.js 16 Server Component compatibility error.

Analytics Pageview: Updated PostHog pageview capture mode for more reliable tracking across navigation events.

CSP Update: Tightened Content Security Policy to match PostHog's current endpoint domains.

Edge Rate Limiting: Added rate limiting to all API routes to protect against abuse.

SSRF Protection: Strengthened outbound request controls in the company analyzer — expanded IP range blocklist and added redirect destination re-validation.

Security Headers: Added CSP, HSTS, X-Frame-Options, X-Content-Type-Options, Referrer-Policy, and Permissions-Policy response headers sitewide.

Dev Route Gate: The /dev/* subtree now returns 404 in production.

Prompt Injection Mitigation: Improved separation between system instructions and third-party scraped content in AI prompts.

API Response Validation: Added runtime shape validation to third-party API responses.

PostHog Integration: Added product analytics alongside Vercel Analytics — typed event tracking for hiring conversions (resume, email, social), case study navigation, SuhaiLLM funnel, and server-side API events.

Session Replay: Enabled with masked inputs on SuhaiLLM chat and domain fields.

Privacy Page: Added /privacy with analytics disclosure; footer links to privacy policy.

Production Config: PostHog keys configured on Vercel for Production and Preview environments; live events confirmed on www.suhail.design.

Smooth Caret Input/Textarea: Added a custom spring-animated caret (glides to its measured position, including line wraps) for the SuhaiLLM domain input and the main chat input, replacing the native caret.

SuhaiLLM Chat Input: Reworked the chat input bar to a single-line layout (textarea and send button on the same row), harmonized the bar's padding, and wired in the new smooth caret.

Case Study Suggestions Carousel: Replaced the visible horizontal scrollbar with a hidden-scrollbar "peek" carousel — cards are sized so the next one always partially shows, signaling scrollability.

HomePageLander: Named the homepage pet/mascot "HomePageLander" and updated its speech-bubble greetings to match.

Vibe Coded Page Revamp: Added a new "In the workshop" coming-soon section (HR Monster, Cinematic, Digital Garden, Vibe Kit) above the existing "Shipped" projects grid, added a "Shipped" section heading, and removed the "New territory" GitHub callout.

SuhaiLLM Pet: Added a draggable sprite-sheet pet overlay (Codex-compatible atlas, state machine, speech bubbles, localStorage position) mounted site-wide with activity sync from the chat panel.

Pet Mapper (dev): Added /dev/pet-mapper — a dev-only tool to map spritesheet frames, tune durations, and export pet-atlas.json (404 in production).

About Philosophy Cards: Replaced static principles/process grids with an interactive 6-card fan on the About page — full-width stage, responsive sizing when SuhaiLLM panel is open, unified card styling.

SuhaiLLM Case Study Suggestions: After relevant chat answers, the panel now surfaces matching portfolio case study cards (thumbnail, title, metric) in a horizontal carousel with links to /work/[slug].

Writing Section: Added a third homepage writing card — "How I AI as a Designer, Part 2" from Medium — and a 3-column grid on large screens.

Codebase Cleanup: Removed unused project-card-blank.tsx shell; fixed pet-mapper drawGrid hook ordering bug; scoped ESLint ignores to archive/ and agent skill directories.

New Case Study: Added "Designed the self-serve onboarding flow that took Sprouts.ai from 0% to 32% activation" as the new lead project on the home page (Selected Case Studies).

Custom Layout: Built a dedicated case study page covering TL;DR, role, ICP prioritization and JTBD validation tables, activation metric definitions, the shipped V1 flow, friction/D7 analysis, the V2 redesign decision chain, highlights, and 5-month impact results — plus a matching table-of-contents entry.

New Narrative: Replaced the old biographical paragraphs (childhood, Sea Cadet Corps, hobbies, etc.) with a tighter, design-focused narrative — background, design heritage, working style, and how AI fits into the process.

Hero: Hero image and "*ball knowledge required" caption now sit at the very top of the page, followed by an H3-scale "I'm Suhail. / I turn user insights into product decisions & product decisions into business outcomes." headline.

My Design Principles & My Process: Added two new three-column sections (matching the bordered grid pattern used elsewhere on the page) — "Outcome Over Interface / Clarity Creates Trust / Systems Scale, Screens Don't" and "AI-first process / Figma when it matters / Builder's instinct".

Closing: Page now ends with a short closing note and signature ("with love, Suhail") above the existing Say hello / Resume CTAs.

Purpose: Added a "lifetime AI tokens processed" status module to the bottom of the left nav — a small personal artifact (in the spirit of GitHub contribution counts or Steam playtime) that quietly signals how integrated AI is into the daily workflow, without needing a dashboard or explanation.

Design Rationale: Kept deliberately understated — a small caption + full count sitting below resume/email, matching the nav's visual language. No hero-scale numbers, no dashboard chrome.

Interaction Behavior: Hovering or focusing the module expands a provider-breakdown panel above it (height + opacity animation, absolutely positioned so it overlays without shifting the rest of the nav). Clicking locks the panel open; a click outside or Escape collapses it. Fully keyboard-accessible with visible focus states, and the expand animation is skipped under prefers-reduced-motion.

Live Counter: The displayed count updates every few seconds with a digit-roll animation, breaking the increment into uneven steps throughout the day so the number advances naturally rather than ticking on a visible timer.

Provider Breakdown: The expanded panel shows a 9-model breakdown across Claude, GPT, Gemini, and others. The provider list is data-driven — new models can be added without touching the component.

Logo Integration: Each provider resolves its brand icon via the Brandfetch Logo API, with a monogram fallback if a logo request fails.

Case Study Table of Contents: Added a sliding "On This Page" table of contents to the left sidebar on case study pages, with a scroll-spy indicator that tracks the active section. A new nav/TOC toggle pill switches the sidebar between the main site nav and the case study TOC.

Access Gate Removed: Removed the case-study unlock gate (CaseStudyGate, session-storage unlock state) from the home page and case study pages — all case studies are now viewable without an unlock step. The component is removed from the codebase.

Project Card Cleanup: Removed the now-unused "locked" state and lock icon from project cards.

Light Mode Deprecated: Removed the dark/light theme toggle, its provider, and the warm-canvas light-mode token palette. The site is now Dark Mode only. The toggle's lever-switch UI, GSAP flash/flicker page-transition animation, and synthesized Web Audio sound effects were preserved in archive/theme-toggle/ with full reintroduction notes for a future light-mode redesign.

Tokens Cleanup: styles/tokens.css Section 2 (light-mode semantic palette + its primitives) was extracted to archive/theme-toggle/tokens.light.css; shared tokens (--status-*, --input-error, layout dimensions) remain in :root. Dark mode tokens (.dark) are unchanged and now the sole active theme.

Left Nav Simplified: Removed the theme toggle and its divider from the left nav footer; the nav/TOC toggle now anchors the bottom of the sidebar.

Asset Cleanup: Removed ~47MB of orphaned files with no code references — postcss.config.mov (45MB sandbox artifact), kindle-light.png/kindle-dark.png (retired Kindle widget images), lumon-pc.png (unused Lumon widget reference), and the /public/new/ sandbox directory.

Security Review: Audited API routes, environment variable handling, and third-party integrations — no secrets in source control, no unsafe HTML rendering patterns found.

SuhaiLM → SuhaiLLM Rename: Renamed the AI assistant from "SuhaiLM" to "SuhaiLLM" across the entire codebase, including components, hooks, the API route (/api/suhaillm), CSS classes, and the knowledge base.

Hero Centered: Center-aligned the hero headline, body copy, company strip, and CTAs.

Full-Width Editorial Layout: Stretched the Work, Writing, Fuel, and Footer sections to a new full-width container with a fixed 60px side margin, while keeping the hero in its original editorial column width.

Aurora Footer Removed: Removed the experimental Aurora gradient footer effect.

SuhaiLLM Splash Shader Recolor: Recolored the suhaiLLM splash screen's WebGL shader from purple/blue to lime tones matching the primary CTA accent.

Release Logs Redesign: Rebuilt the /release-logs page in a Notion-style changelog layout with date pills, entry titles, and a sticky "On this page" date index.

Progressive Blur Fix & Intensity Increase: Fixed a bug where the bottom-edge progressive blur overlay was blocking clicks on footer links sitewide, and increased its blur intensity for a stronger glass falloff.

LinkedIn URL Fix: Corrected the LinkedIn link in the footer to point to the correct profile (linkedin.com/in/ssuhails).

Project Card Redesign: Cards now span the full content width, show company logo badges (Sprouts.ai, Soroco) instead of text labels, and the metrics row was simplified to a single headline stat with role and platform icons.

Writing Section: Removed an outdated article and switched the WRITING grid to 2 columns.

Pill Logo Stretch: The "suhail . design" pill wordmark in the left nav now stretches to fill the sidebar width, with tightened spacing above the nav items.

Full-Width Perspective Marquee: Fixed a left-edge gap in the 3D marquee by overscanning the rotated plane, and expanded it to full viewport width.

Hero Simplification: Removed the hero eyebrow label and aligned the "SELECTED CASE STUDIES" heading to the wider card grid.

Transparent Breathing Loader: The suhaiLLM "analyzing fit" loader now fades its trail with a transparent composite instead of an opaque black fill, so it blends with the panel background in both themes.

Progressive Blur & Grain: Added a sitewide bottom-edge progressive blur overlay and a soft-light grain texture on the suhaiLLM panel to break up flat surfaces.

Noise Texture Increase: Increased the global film grain opacity for more visible texture across dark surfaces.

Concise SuhaiLLM Responses: Rewrote the suhaiLLM system prompt for shorter, sharper answers, banned em dashes entirely, and added a compact STAR-frame format (Situation, Approach, Result) for product/design-thinking and problem-solving questions.

SuhaiLLM Panel Typography Pass: Increased the type scale across the suhaiLLM panel and response renderer, and fixed low-contrast text that was blending into the background.

SuhaiLLM Panel Layout Fixes: Removed an empty gap above the starter content and centered the headline, description, and question grid vertically within the panel.

Magnetic Button Fix: Capped the magnetic pull on the "Ask suhaiLLM" button so it can no longer drift far enough to overlap neighboring elements.

Digital Garden Nav Item: Added a disabled "digital garden" item below "writings" in the left nav, with a hover-revealed "coming soon" state.

Project Card Thumbnails: Increased the minimum height of project card thumbnails for more visual presence on larger screens.

Breathing Loader Fix: Fixed the suhaiLLM "analyzing" loader's canvas background to match the page background instead of solid black.

Type Scale & Readability Pass: Increased the base type scale across small text (labels, captions, metadata, nav items) for easier reading, and tightened/bolded the hero display headline. Harmonized button typography to a single semibold weight and size scale.

Heading & Metric Weight Pass: Headings (h1/h2, section headlines, card titles) now render in semibold for clearer hierarchy. Metric and stat displays (case study outcomes, project card numbers, contribution totals) now render in bold.

Rounded Corner Button System: Moved away from full-circle (rounded-full) buttons, pills, tags, and nav items in favor of rounded-corner shapes site-wide. True circles are retained only for avatars, status dots, spinners, and other decorative indicators.

Hero CTA Refresh: Converted "Match company fit" into a link-style secondary action and increased spacing between the hero CTAs for better visual rhythm.

Tag Cleanup: Removed remaining "beta" and "new" badges from the suhaiLLM panel and left navigation.

Security Hardening: Tightened origin validation on AI API routes.

SuhaiLLM Splash Shader: Replaced the suhaiLLM splash blob animation with a WebGL simplex-noise shader.

Sandbox Cleanup: Removed the /new sandbox route and its unused components (movie widget, lever switch, project card notch, avatar, banner).

Resume Link Update: Updated the resume link across the left nav, footer, and about page to the latest version, and expanded the SuhaiLLM knowledge base with structured resume data for more detailed Q&A.

FactCarousel Removal: Removed the FactCarousel section and its data file from the home page.

SuhaiLLM Knowledge Base 2.0: Completely overhauled the AI knowledge base (suhaillm-knowledge.md) with precise impact metrics (64% ticket reduction, 40% adoption increase), enterprise client details (Salesforce, HP, Adobe), and refined persona guidelines for a more authentic "Suhail" voice.

Vibe Coded Project Injection: Injected 6 new projects into the Vibe Coded ecosystem (Year in a Journal, Debt Vision, InstaMind, etc.) and paired them with artistic abstract gradient thumbnails.

Navigation Sidebar Expansion: Retired the hover-to-expand mechanic for the left navigation. The sidebar is now permanently expanded at w-64, ensuring all nav labels and the suhaiLLM status are instantly visible. Adjusted global layout margins to accommodate the fixed sidebar.

**Vibe Coded Layout Refactor**:

Swapped the Projects and Activity sections to prioritize builder work.

Upgraded the project list to a responsive 3-column grid.

Reduced header vertical padding and optimized GSAP reveal delays to ensure project content "peeks" above the fold on load.

Stacked the Loveable and GitHub heatmaps vertically for better hierarchy and added a pulse-animated "New Territory" note for GitHub.

**SuhaiLLM Technical Hardening**:

Migrated to ai/react for the chat implementation.

Implemented a robust fallback for the append function to ensure starter questions work across all SDK versions.

Fixed several runtime errors including trim() on undefined input and "read-only" textarea warnings.

Hydration Mismatch Fix: Applied suppressHydrationWarning sitewide to eliminate console noise from browser extensions, ensuring a cleaner developer and user experience.

Resume Link Update: Updated the primary resume navigation link to point to a live Google Drive version for easier access.

Navigation Identity Refactor: Completely rebuilt the left navigation sidebar. Replaced the wide profile photo with a compact 48px circular avatar, integrated a live availability status dot ("open to roles"), and consolidated all social links (X, LinkedIn, Instagram, GitHub, YouTube, Medium) into a compact utility row at the bottom.

Tobias Display Font: Integrated the **Tobias** serif font (Standard & Light weights) as the primary display typeface. Mapped to --font-display and used via .text-display and .text-headline for hero headers and section titles to enhance the editorial aesthetic.

Custom Toggle Switch: Devised a boutique <ToggleSwitch /> component for the theme toggle. Replaced the standard button with a custom-engineered sliding switch that provides clear visual feedback and tactile feel.

Elevation System Finalization: Polished the semantic elevation tokens (--elevation-0 through --elevation-6) to ensure pixel-perfect depth consistency. Light mode uses layered drop shadows while Dark mode uses subtle inset highlights to define surface boundaries.

Left Nav V3 Architecture: Prepared the codebase for future navigation expansions by experimenting with a "V3" branch of the navigation component, streamlining state management and layout transitions.

Vercel Deployment: Migrated hosting from Hostinger static export to Vercel. Removed output: 'export' and images: { unoptimized: true } to unlock native Next.js Image Optimisation, ISR, and server components on Vercel's edge network.

Design Marquee: Added a full-width scrolling image marquee directly below the hero. Features 30+ project screenshots across Sprouts, Soroco, Wontale, Medx, and more. Hover slows the marquee to near-pause; hovering individual cards produces a subtle scale pop.

SuhaiLLM Panel & Provider: Introduced the SuhaiLLMProvider context and SuhaiLLMPanel slide-in component. Panel slides in from the right via GSAP on trigger. Content is blank for Phase 1 — architecture is ready for Phase 2 AI chat integration.

SuhaiLLM Dock Banner: Added a dismissible fixed-position banner at page bottom that introduces suhaiLLM on first visit. Dismissal is persisted to sessionStorage. GSAP handles entrance and exit animations.

Movie Widget (Standard): Added a weekly movie card widget for the "A Bit About Me" section. Displays title, year, personal star rating, and a YouTube maxresdefault backdrop. Updated manually each week.

Lumon Movie Widget: Added a Severance-themed Lumon Industries terminal variant of the movie widget. Uses a layered PNG overlay (lumon-pc.png) with scanlines, CRT vignette, and a phosphor-blue UI. Week number computed dynamically.

About Page — Sneaker Shelf: Added a sneaker collection section featuring 8 pairs with GSAP 3D tilt on hover (rotateX/rotateY) and elastic spring on mouse-leave. Each sneaker shows a tooltip label.

About Page — Tech Stack Grid: Added a 3D tilt card grid of 18 apps and tools. Same hover mechanic as sneakers. Icons sourced from local assets and Google favicon service.

About Page — Language Bars: Added animated proficiency bars for 8 languages. Bars wipe in left-to-right with stagger via ScrollTrigger on #languages. Level labels slide in with a slight X offset.

About Page — Right Now Grid: Added a 3-column "Right Now" snapshot grid (Playing / Watching / Learning / Building / Listening / Following). Bordered grid with gap-px for hairline separators.

Full Case Study Content: Authored complete case study prose, constraints, work sections, and outcomes for all 4 projects: Sprouts Account Intelligence, AI-Native Account Intelligence, Scout for CX, and Soroco Platform.

Medium RSS Module: Added lib/medium.ts — a server-side RSS parser that fetches live posts from medium.com/feed/@suhaildesign at build time with a static fallback to lib/projects.ts if the feed is unavailable.

Home/Server Split: Extracted home page into app/home-content.tsx (Client Component) so app/page.tsx remains a Server Component. Enables future use of getMediumPosts() as an async server-side fetch.

Fuel Section Refinement: Swapped synthesised audio for a real high-fidelity aluminum can crush MP3 (last 1s). Implemented a "click-to-unlock" AudioContext architecture to ensure reliability across all browsers. Removed all GSAP animations and text labels to achieve a minimal, instant interaction feel.

Link Preview Component: Engineered a new <LinkPreview /> component that provides live microlink.io screenshots on hover, with a placeholder mode for static assets. Styled with theme-aware shadows and borders for premium aesthetic consistency.

Company Branding Update: Integrated live Link Previews for Sprouts.ai and Soroco in the Hero section. Upgraded the typography for both company names to 16px font-size for better readability.

Nav Profile Identity: Replaced the location map in the sidebar with a left-aligned profile photo (me.png) at 40% width, providing a more personal touch to the site's primary navigation.

Elevation System Redesign: Rebuilt the light-mode elevation/shadow system (--elevation-0 through --elevation-6) from the ground up using multiple layered drop shadows with real Y-offsets, ensuring depth is clearly visible on light backgrounds.

Kindle Media Update: Retired the interactive Kindle component in favour of high-resolution, theme-specific static images (kindle-light.png / kindle-dark.png) to improve performance and visual clarity.

Minimalist Cleanup: Removed the LocationMap and bookshelf items from the sidebar. Stripped shadows from the Fuel section cans and Article Cards to maintain a cleaner, more editorial aesthetic.

Fuel Section: Added a "Couldn't have done this without" section on the home page between Writing and Footer. Features interactive Diet Coke and Monster Energy cans that swap to a crushed variant on hover. Positioned to match a reference image — Diet Coke shorter and offset lower-left with a slight −6° tilt, Monster taller and nearly upright.

Season Serif Font: Removed the Season Serif local font entirely (localFont import removed from layout.tsx). The whole site now uses Geist exclusively. The .text-season-heading utility was re-mapped to Geist with font-weight: 500.

GlassBlogCard in Writing Section: Retired the <GlassBlogCard /> component from the Writing section. Replaced by <ArticleCard />.

Plain-Text Personal Shelf: Removed the three-column text shelf (READING / BUILDING / THINKING ABOUT) from the "A Bit About Me" section in favour of visual device widgets.

Global Page Standardization: Enforced the content-with-nav layout wrapper ruleset natively across the /release-logs page and all future routes to ensure the rounded, "detached editorial sheet" design language persists sitewide.

Side Quests Nav Item: Integrated a brand new "side quests" dynamic icon and URL path inside the left global navigation, wedged between the Taste and SuhaiLLM markers.

Release Logs: Constructed a fully dynamic internal changelog SSG route (/release-logs) to instantly parse and map website-updates.md securely over to an editorial web container.

Facts Carousel: Replaced static hero fallback text with an animated <FactCarousel /> component powered by GSAP that continuously cycles through data housed in lib/facts.json.

SuhaiLLM Nav Entry: Added a dedicated navigation item for "Try SuhaiLLM" featuring a clean "coming soon" Shadcn badge inside the sidebar layout.

Bottom Dock: Completely sunset and deleted all traces of the experimental mobile/desktop bottom dock system across layouts and component files.