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:
@@ -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} ${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">
|
||||
|
||||
Reference in New Issue
Block a user