I am pasting an inspiration from a website for your reference. They have also added a marquee of screens, the way we have added, but I see a slide 3D tilt or something. I don't know how to describe, but there is this nice way of how they come in. # Website Updates Changelog

This file acts as an ongoing log for notable new features, components, and major architectural additions added to the website. Minor style/CSS tweaks and copy changes are excluded.

APRIL 2026 — SUHAILM & VIBE CODED OVERHAUL

• SuhaiLM Knowledge Base 2.0: Completely overhauled the AI knowledge base (suhailm-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 suhaiLM 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.

• SuhaiLM 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.

APRIL 2026 — DESIGN IDENTITY & NAV REFACTOR

• 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.

APRIL 2026 — VERCEL LAUNCH DROP

• 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.
• SuhaiLM Panel & Provider: Introduced the SuhaiLMProvider context and SuhaiLMPanel 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.
• SuhaiLM Dock Banner: Added a dismissible fixed-position banner at page bottom that introduces suhaiLM 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.

APRIL 2026

• 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.

DEPRECATIONS — APRIL 2026

• 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.

ADDITIONS

• 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 SuhaiLM 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.
• SuhaiLM Nav Entry: Added a dedicated navigation item for "Try SuhaiLM" featuring a clean "coming soon" Shadcn badge inside the sidebar layout.

DEPRECATIONS

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