- Wrap #smooth-wrapper in an .app-shell: a fixed, inset, rounded, bordered
panel. Its transform makes it the containing block for the fixed wrapper, so
ScrollSmoother sizes the scroll viewport to the shell (content scrolls inside
it) without fighting ScrollSmoother's inline styles.
- Dock and corner controls stay outside the shell, on a brand-tinted 'desktop'
wallpaper painted on body.
- Reduced-motion path: the shell scrolls its content natively.
A template.tsx is re-created on every navigation, resetting AnimatePresence
so neither enter nor exit ran. Move the transition into a PageTransition
client component rendered in the persistent (site) layout, so AnimatePresence
survives navigations and the old page animates out before the new one in.
Wrap the template in AnimatePresence (mode="wait") with a FrozenRouter that
pins the layout-router context, so the outgoing page animates out (blur +
rise) before the incoming page animates in.
- Add (site)/template.tsx: one framer-motion enter animation (fade + rise +
blur) that runs on every navigation, so moving between dock pages has a
clean transition.
- Disable the staggered .hero-rise entrance now that the template handles it.
- Dock icons are now real SVG files under public/dock/ (macOS squircle
look, active variants), so they can be replaced with custom art later.
- Full-bleed icons (DockIcon padding 0), fixed logo src to stop the
refresh flash.
- Remove the top menu bar entirely; relocate theme/language/sound (+admin)
into a corner control dock that expands on click.
Swap the pill navigation for a macOS-style dock as the primary nav and a
slim top menu bar for utilities:
- components/ui/dock.tsx: Magic UI Dock/DockIcon (magnification via
useSpring/useTransform), ported to the project's framer-motion.
- components/layout/site-dock.tsx: bottom dock with the logo as the first
icon, each item a real next/link (SEO preserved, active state from the
pathname), monochrome squircle tiles, hover tooltips and a "soon" badge
for Products; top menu bar keeps locale/sound/theme/admin + a live clock.
- (site)/layout.tsx: render SiteDock instead of SiteHeader.
Home bento grid and all page content are unchanged.
Merge the category and project routes under a single /portfolio/[slug]
segment via resolvePortfolioSlug (category wins over project on a slug
clash). Removes the /portfolio/category/... prefix from links, redirect,
and sitemap. Adds resolver integration tests.
The homepage hero had no call to action (Phase 0 finding). Add a live
availability pill and primary/secondary CTAs while keeping the signature title.
- HomeHero: optional availability status pill (pulsing dot) plus primary
(view work) and secondary (contact) CTAs, RTL-aware arrow, using the type
scale. Backward compatible (all new props optional).
- Wire copy + hrefs from the homepage; add heroVisual.primaryCta /
secondaryCta to en/de/ar.
Verified: JSON valid, eslint clean, no new type errors.
The detail page rendered an empty <PageHero /> (blank gradient band) with the
real title buried in a card lower down (Phase 0 finding).
- Populate the detail PageHero with the project category (badge), title and
summary, so the top of the page is a proper header.
- Slim the in-content ProjectHeader to back-link + meta chips + preview button,
removing the now-duplicated title and summary. Applies across all three
detail templates (grid/story/case-study).
Verified: eslint clean, no new type errors.
Bring imagery to the homepage projects block (Phase 3), matching the portfolio
gallery.
- Thread coverImagePath through ProjectCardCopy and the home mapping.
- Rewrite ProjectsSection as image-first cards (reusing PortfolioCover with the
branded placeholder fallback): whole-card link, featured project spans two
columns with a larger cover, type-scale title, meta + stack badges, hover
lift. Replaces the previous text-only cards.
Verified: eslint clean; no new type errors (pre-existing Prisma-gen anys only).
- Replace animated blob/wave/noise backdrop with clean static gradient
(radial ellipse highlights + linear fade) in hero-motion-backdrop
- Remove all framer-motion from background layer; delete unused CSS
classes: hero-blob, hero-sheet-glow, hero-sheet-wave, hero-sheet-noise,
hero-title-shift keyframe, and responsive blob media queries
- Add framer-motion stagger entrance to HeroContentMotion, HeroMotionItem,
and HeroTitle (slide-up + fade on mount)
- Refactor coming-soon page to use HeroContentMotion/HeroMotionItem
instead of MotionFade (whileInView unreliable above the fold)
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
moh