soconnor/personal-website
1
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

Implement design system: blob background, glassmorphism, softer corners

Browse Source 
- 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:
Sean O'Connor
2026-05-11 01:38:35 -04:00
parent 1e4704ed3f
commit fe52916d84
5 changed files with 26 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/globals.css
+10 -1
View File
@@ -118,4 +118,13 @@
.animate-fade-in-up-delay-1 { animation: fade-in-up 0.5s ease-out 0.1s both; }
.animate-fade-in-up-delay-2 { animation: fade-in-up 0.5s ease-out 0.2s both; }
.animate-fade-in-up-delay-3 { animation: fade-in-up 0.5s ease-out 0.3s both; }
.animate-fade-in-up-delay-4 { animation: fade-in-up 0.5s ease-out 0.4s both; }
.animate-fade-in-up-delay-4 { animation: fade-in-up 0.5s ease-out 0.4s both; }
@keyframes blob {
0%, 100% { transform: scale(1) translate(0px, 0px); }
25% { transform: scale(1.08) translate(40px, -30px); }
50% { transform: scale(0.94) translate(-25px, 50px); }
75% { transform: scale(1.04) translate(35px, 30px); }
}
.animate-blob { animation: blob 9s ease-in-out infinite; }