Platform Changelog

Design note

A share image should be a doorway, not a decal. The link preview is now the page itself rendered inside a browser window on Supabase green (the Varmply treatment), so the thumbnail reads as "a real thing you can open," not a logo. The demo's wayfinding follows the same restraint: no "start here" arrows on the canvas, just a one-line note and a slightly lifted "concept" badge, because pointer-arrows on a faithful Studio recreation would read as an annotation left on by mistake.

Design note

A verification tool must never let a flattering view imply safety. Switching a policy always lands on the worst-case identity — the first caller it leaks to — so you never open on the one identity (e.g. anon) that makes a broken policy look fine, and a single always-visible policy verdict sits below the evidence so a clean single-identity view can't read as all-clear. In the same spirit, the fix action was reworded from "Quick fix" to "Suggest a scoped policy": a tool can't know your tenant column, so it scaffolds a suggestion, it doesn't claim magic.

Design note

The Verify tab is a loud nudge, never a hard gate on Save. A leaking policy is still valid SQL — a public table legitimately wants using(true) — so blocking Save would punish correct policies and contradict the honest claim that no tool can read intent. The intervention makes exposure visible and testable, and it green-lights a correct policy just as clearly as it flags a leaking one.

Design note

A policy can read "enabled" and still be lying. Supabase already shipped the tools that write policies and warn when RLS is off; the unowned gap is proving a policy that is on is actually correct. So instead of another builder, the demo is a verification panel: run the policy as each identity and show the rows they truly get. Three self-contained demos, one per failure mode, beat one panel with sixteen toggles.

Design note

Exposing an FX spread as its own deduction reads as unmasking a partner's margin, which spooks the very people you are pitching. The fix was to show the effective rate and the net you actually get back, never a line that looks like profit. Transparent to the user, revenue-neutral to the business. Same principle Wise built a moat on.

Design note

A recruiter said the portfolio showed "only product shots, not process." The audit found the opposite — a 23-entry design-decision log already existed, just buried dead-last under a wall of live embeds. The fix was discoverability and framing, not writing new process: surface what was already there, and make the building the edge rather than the excuse.

Design note

Project link previews show the real product running in a browser frame, not a generic card — a shared link should prove the product, not just claim it. Articles share one designed "Writing" cover but each carries its own title and description.

Design note

Two doors, not one form. The free teardown stays strictly email — low friction, and the call gets pushed privately after the findings land. Every build tier is call-first: the form is an intake that opens a Cal.com booking right on the page, so scope is set on a call before anything's built. Pricing stays visible to qualify, Arc-style.

Design note

The offer page keeps the full site nav instead of the stripped-down header a "landing page" usually gets. For a design hire, feeling like a trustworthy part of a real site beats the marginal conversion gain of removing escape routes — so the whole thing reuses the existing design system, and the shipped-work embeds sit right next to the pitch.

Design note

The first release cut under semantic versioning: feature sessions now bump the minor and fixes bump the patch, so the jump from 1.0.32 straight to 1.1.0 marks the scheme change rather than a glitch. Fittingly, the headline work is the design system documenting itself — every components/ui primitive now renders live on the /design-system page, imported from source rather than copied, so the showcase can't quietly drift from what the site actually ships.

Design note

De-gating the case study meant it had to survive being read cold by anyone, so anonymization carries the credibility instead of a password: one redaction bar and an "Under NDA" chip signal the client is real and protected, generic "cybersecurity consultancy" prose matches the public ShipLock vocabulary, and ₦50M becomes "eight-figure engagement" so an unnamed client never carries an exact contract value.

Design note

The confidential page's live embeds sit after the turning-point narrative so they read as evidence rather than decoration: the case study claims the design system governs the product, then the product's own components render the proof, with fictional data standing in for client truth.

Design note

Each project card now embeds the real product UI in a floating frame — Chrome browser on desktop, iPhone 14 Pro on mobile. Hovering triggers a fall-off/eject transition that cycles through key screens. The second screen is preloaded on mount so the first drop is instant. ShipLock required building a dedicated /preview route with seeded demo data and a middleware bypass before it could be embedded.

Design note

Embedding 20+ live iframes meant the case study could either hammer every origin at once or reload each embed cold on every scroll-back. A shared manager keeps only the six nearest the viewport live, biased ahead in the scroll direction, so the next ones warm up before you arrive — fast without keeping everything mounted.

Design note

The 'project changelog' is the on-page Build decisions timeline, not a separate changelog file — it lives where the work is shown so the reasoning sits next to the result. Caught it up with this session's Varmply decisions.

Design note

Auth and onboarding embeds point directly to their first section — auth screens have built-in sign in/sign up links, onboarding has natural Next navigation. No tab switcher overlay needed.

Design note

Auth and onboarding collapsed from 8 separate static embeds into 2 interactive ones — a floating pill switcher for auth, and a step tab strip for onboarding. The problem statement section above the design breakdown is the case study frame: each card has a numbered problem, a Signal column (how it was observed in the market), and a Response column (what Varmply actually does about it).

Design note

The hero uses a frozen snapshot in the preview app rather than the live marketing site — this locks in the older design (portrait + floating TikTok/Instagram pills) permanently, while the remaining landing sections (How It Works, Why Varmply, Community, Testimonials, Footer) pull live from the org repo via varmply.vercel.app.

Design note

The homepage redirect in the Varmply marketing site was silently stripping all query params — every section embed was landing on the default hero. Fixed by forwarding searchParams through the redirect. The marketplace was also reverted to the 3d2643b design with landscape TONES banner cards (outline budget number) and large cover campaign cards showing SPOTS FILLED/REMAINING. Onboarding adds 6 new embed blocks backed by a new-user mock profile with INCOMPLETE status so the pre-auth screens render without needing a real session.

Design note

The campaign builder collapses from 4 separate step embeds into one interactive flow — portfolio visitors can walk through the entire creation process live. Mock workspace data uses the exact SponsorWorkspaceResponse / CreatorWorkspaceResponse API shapes so the campaigns screen renders without error.

Design note

The root crash was four full-app iframes loading simultaneously on mobile. The fix activates only the most-visible demo at a time via IntersectionObserver — so the renderer holds at most two iframes. Three.js never loads on mobile (desktop-only note instead), and YouTube only loads on click. Three independent memory ceilings, all dropped.

Design note

Commands on mobile now scroll horizontally rather than wrapping — the whole row becomes the copy target, the icon disappears. Cleaner than truncating or shrinking the font.

Design note

The closing paragraph in the alpine-sourcing article had to be fully rewritten — it described the current build as "simpler, without PBR splatting, without spatial audio, procedural terrain" when all of that is false. v2 has the real SRTM heightmap, full PBR shader, HRTF spatial audio, and instanced foliage. The trees still float because the CPU and GPU height pipelines produce different Y values from the same heightmap. Accuracy matters most when the article is literally about what failed.

Design note

A smooth circle clip-path felt sterile — a domain expansion should writhe. Swapped CSS transitions for a rAF-driven path() blob with three layered sine frequencies, each at different phase speeds, so the boundary undulates while it grows. The trigger also moved off the chrome bar and onto the iframe's own ThemeToggle — embed-mode detection makes the in-iframe button postMessage `{type, x, y}` to the parent, which translates the coords by the iframe's scale factor and runs the animation from that exact spot. The demo now feels owned by the live homepage inside it, not by a fake browser frame around it.

Design note

Removed the full-screen scroll illusion entirely — the playground now lives as a proper card in the page layout, matching the project/tool card pattern. The 3D canvas stays mounted when expanding to full screen (position:fixed trick), so the scene never resets.

Design note

First-visit quote is SSR-rendered via cookie detection so it is in the initial HTML at full opacity — zero flash possible. Riddle fires via a custom event dispatched before router.push(), matching the same no-flash pattern as the regular quote system. The footer toggle is intentionally unlabelled — hover only — as part of the footnoters joke.

Design note

The fix required intercepting navigation at the link level rather than reacting to pathname changes. TransitionLink fires the overlay on click, then calls router.push two animation frames later — by which point the overlay is already rendering and covers the page mount completely.

Design note

The overlay fires independently of how fast the destination page loads — the 1600ms timer runs regardless. This prevents the subconscious association of "quote = slow page." The destination finishes loading under the overlay; it's revealed when the thought passes.

Design note

Spacing rule formalized this session: title + body = one tight unit (gap-1 to gap-1.5 inside), with a wider gap to the next element. Applied globally across cards, sections, and article pages. Also distinguished nested containers (--bg-subtle, near-white) from top-level containers (--surface, white) to restore visual hierarchy that was lost when bg-subtle was set too dark.

Design note

Iframe section isolation required removing CSS !important injection from the layout inline script — it was hiding sections that had no matching id attribute. Lenis proved to be the real blocker for scroll prevention since it intercepts wheel/touch events before CSS overflow:hidden can act. Both were fixed independently, then ResizeObserver replaced one-shot rAF height reporting so iframes self-size as 3D and animated content settles.

Design note

Blocks grouped into labelled page sections (Home / Sponsors / Creators / Footer) using a SectionDivider component. The divider uses a hairline border + mono uppercase label rather than a full heading — keeps the information density high without competing with the block labels themselves. iframes are now fully interactive: pointer events on, scrolling enabled, so you can click and scroll within each embedded section to see the real responsive behaviour.

Design note

The playground shifted from a passive scroll-diorama to a first-person explorable space. The key decision was keeping weather and time as ambient systems — SnowSystem, CloudDrift, BirdSystem, and TimeOfDay all run silently in the background, not as UI features. They exist to reward players who actually enter alive mode and look around. The 8-minute day cycle length was tuned to feel perceptible without feeling like a clock. Spotify (Step 8) was permanently dropped — it was the right call; the world speaks through atmosphere, not a player.

Design note

The three systems in this session are about making the world feel real without any single obvious trick. Texture splatting means the terrain reads as actual geography — snow caps, rocky slopes, grassy valley floor — without a single UV-painted texture. The audio system is the one detail most visitors won't consciously notice but will feel: HRTF panning means sounds have genuine left/right/behind positioning in 3D space, and orbiting sources create the "8D" movement without any fake stereo tricks. The HUD is invisible until you need it — ghost-mode by design, so the landscape isn't cluttered with controls. The "use headphones" nudge is the one moment of explicit invitation.

Design note

Each toolkit SVG was sourced from Simple Icons, Wikimedia Commons, and official brand assets — no icon library. The goal was pixel-accurate brand marks rather than generic approximations. The first writing post was written before any project case studies shipped deliberately — the systems (changelog pipeline, token architecture, git workflow, content engine) were the actual first work, and documenting them first was honest sequencing, not filler.

Design note

The identity shift from "Design Engineer" to "Product Designer × Builder" was intentional — the portfolio needed copy that reflects the actual shape of the work (designing and building with AI) rather than a job title that implies backend engineering. The bento stats grid was chosen over flat info rows because it lets the page communicate availability, experience, and current focus at a glance without needing the visitor to scroll into the bio.

Design note

The CursorAvatar iconOffset prop solves a recurring problem — optical centering differs by size. The hero needs 2px, the 28px header slot only needs 1px. Making it a prop keeps the component honest rather than hard-coding a compromise.

Design note

The header was redesigned from a full-width sticky bar to a floating pill. Centering it with the same max-w-[640px] mx-auto px-6 wrapper as the page content — rather than a flex justify-center approach — is what keeps it from extending beyond the content column on wide screens. The double-ring treatment (border-strong + outline at outlineOffset 2px) matches the IconBadge chrome, making the header feel like a first-class design system element.