denshooter/portfolio
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add animated shader gradient background with blur effects
Some checks failed
Dev Deployment (Zero Downtime) / deploy-dev (push) Failing after 4m50s
Details

Browse Source 
- Added ShaderGradientBackground component with 3 animated spheres
- Enhanced glass effects with backdrop-blur across all text surfaces
- Improved readability while maintaining colored borders
- Adjusted animation speed and movement parameters for optimal effect
This commit is contained in:
denshooter
2026-01-27 01:43:17 +01:00
parent 13499f7f51
commit 4beeca02be
4 changed files with 134 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
app/globals.css
View File

@@ -52,35 +52,35 @@ html {
/* Liquid Glass Effects */
.glass-panel {
background: rgba(250, 248, 243, 0.5);
backdrop-filter: blur(12px) saturate(120%);
-webkit-backdrop-filter: blur(12px) saturate(120%);
border: 1px solid rgba(215, 204, 200, 0.5);
box-shadow: 0 8px 32px rgba(62, 39, 35, 0.08);
background: rgba(250, 248, 243, 0.75);
backdrop-filter: blur(20px) saturate(130%);
-webkit-backdrop-filter: blur(20px) saturate(130%);
border: 1px solid rgba(215, 204, 200, 0.6);
box-shadow: 0 8px 32px rgba(62, 39, 35, 0.12);
will-change: backdrop-filter;
}
.glass-card {
background: rgba(255, 252, 245, 0.8);
backdrop-filter: blur(24px) saturate(180%);
-webkit-backdrop-filter: blur(24px) saturate(180%);
border: 1px solid rgba(215, 204, 200, 0.6);
background: rgba(255, 252, 245, 0.85);
backdrop-filter: blur(30px) saturate(200%);
-webkit-backdrop-filter: blur(30px) saturate(200%);
border: 1px solid rgba(215, 204, 200, 0.7);
box-shadow:
0 4px 6px -1px rgba(62, 39, 35, 0.04),
0 2px 4px -1px rgba(62, 39, 35, 0.03),
inset 0 0 20px rgba(255, 252, 245, 0.5);
0 4px 6px -1px rgba(62, 39, 35, 0.06),
0 2px 4px -1px rgba(62, 39, 35, 0.05),
inset 0 0 30px rgba(255, 252, 245, 0.6);
transition: all 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
will-change: transform, box-shadow;
}
.glass-card:hover {
background: rgba(255, 252, 245, 0.9);
background: rgba(255, 252, 245, 0.95);
box-shadow:
0 20px 25px -5px rgba(62, 39, 35, 0.1),
0 10px 10px -5px rgba(62, 39, 35, 0.04),
inset 0 0 20px rgba(255, 252, 245, 0.8);
0 20px 25px -5px rgba(62, 39, 35, 0.15),
0 10px 10px -5px rgba(62, 39, 35, 0.08),
inset 0 0 30px rgba(255, 252, 245, 0.9);
transform: translateY(-4px);
border-color: rgba(215, 204, 200, 0.8);
border-color: rgba(215, 204, 200, 0.9);
}
/* Typography & Headings */