Implement design system: blob background, glassmorphism, softer corners

- globals.css: add blob keyframe animation (9s ease-in-out infinite)
- layout.tsx: add fixed background layer with 24px grid pattern and two
  animated blurred blobs (primary/5 color) that drift behind all content
- Navigation.tsx: bg-background/80 + backdrop-blur-md + border-border/50
- Sidebar.tsx: same glassmorphism treatment
- card.tsx: rounded-2xl (up from rounded-lg), bg-card/80 + backdrop-blur-sm
  so the blob color bleeds subtly through card surfaces

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-05-11 01:38:35 -04:00
parent 1e4704ed3f
commit fe52916d84
5 changed files with 26 additions and 11 deletions
+5 -5
View File
@@ -13,14 +13,14 @@ export function Sidebar() {
<>
{/* Mobile layout - horizontal intro bar only on home page */}
{isHomePage && (
<div className="w-full space-y-4 px-6 pb-2 pt-6 sm:px-8 lg:hidden">
<div className="flex items-center space-x-4">
<div className="w-full space-y-3 px-4 pb-2 pt-4 sm:px-6 lg:hidden">
<div className="flex items-center gap-4">
<ImageWithSkeleton
src="/headshot.png"
alt={`${name[0]?.first}&nbsp;${name[0]?.last}`}
width={240}
height={240}
containerClassName="h-24 w-24 rounded-2xl border border-border/50 shadow-sm"
containerClassName="h-20 w-20 rounded-xl border border-border/50 shadow-sm"
className="object-cover"
priority
/>
@@ -69,8 +69,8 @@ export function Sidebar() {
</div>
)}
{/* Desktop layout - clean and elegant sidebar */}
<div className="fixed bottom-4 left-4 top-24 hidden w-80 overflow-hidden rounded-3xl border border-border/60 bg-background/80 backdrop-blur-xl lg:block">
{/* Desktop layout - pinned sidebar */}
<div className="fixed left-0 top-16 bottom-0 w-80 border-r border-border/50 bg-background/80 backdrop-blur-md hidden lg:block">
<div className="flex h-full flex-col">
{/* Profile Section */}
<div className="flex-shrink-0 border-b border-border/50 px-8 py-8">