dangrubbb/dangrubb.net
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: bigger dramatic splatters with SVG turbulence filter

Browse Source
This commit is contained in:
dangrubbb
2026-05-30 14:14:15 -04:00
parent 1f7df496fe
commit 8f5b831cc2
1 changed files with 61 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
src/pages/index.astro
View File

@ -4,7 +4,6 @@ import CrushBase from '../layouts/CrushBase.astro';
<CrushBase title="dangrubb.net"> <CrushBase title="dangrubb.net">
<div class="crush-page"> <div class="crush-page">
<!-- Top branding -->
<header class="top-banner"> <header class="top-banner">
<div class="brand"> <div class="brand">
<span class="brand-name">dangrubb</span><span class="brand-dot">.</span><span class="brand-tld">net</span> <span class="brand-name">dangrubb</span><span class="brand-dot">.</span><span class="brand-tld">net</span>
@ -12,42 +11,48 @@ import CrushBase from '../layouts/CrushBase.astro';
<p class="tagline">OFFICIAL SITE</p> <p class="tagline">OFFICIAL SITE</p>
</header> </header>
<!-- Center logo circle -->
<main class="logo-section"> <main class="logo-section">
<div class="logo-wrapper"> <div class="logo-wrapper">
<!-- Grungy splatter ring (SVG for irregular texture) --> <svg class="splatter-layer" viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg">
<div class="splatter-ring"> <defs>
<svg viewBox="0 0 400 400" class="splatter-svg"> <filter id="rough" x="-10%" y="-10%" width="120%" height="120%">
<!-- Large irregular splats --> <feTurbulence type="fractalNoise" baseFrequency="0.03" numOctaves="5" result="noise"/>
<path d="M80,120 Q60,80 90,50 Q120,30 150,60 Q170,40 160,80 Q180,90 150,120 Q130,140 80,120" fill="#008b8b" opacity="0.7"/> <feDisplacementMap in="SourceGraphic" in2="noise" scale="12"/>
<path d="M250,60 Q280,30 320,50 Q350,70 330,110 Q360,130 330,140 Q300,160 270,130 Q240,100 250,60" fill="#006666" opacity="0.6"/> </filter>
<path d="M60,220 Q30,190 50,160 Q70,140 100,160 Q120,140 130,170 Q140,200 110,220 Q80,240 60,220" fill="#20b2aa" opacity="0.65"/> </defs>
<path d="M280,200 Q310,170 340,190 Q370,220 350,260 Q360,290 330,280 Q300,300 280,270 Q260,240 280,200" fill="#008b8b" opacity="0.7"/>
<path d="M160,320 Q130,290 150,260 Q170,240 200,260 Q230,240 240,270 Q250,300 220,320 Q190,340 160,320" fill="#006666" opacity="0.6"/> <!-- MASSIVE paint splashes -->
<!-- Medium spray dots --> <path d="M60,420 Q20,380 40,320 Q10,280 70,260 Q50,220 100,230 Q90,190 140,210 Q130,170 180,200 Q170,170 210,190 Q200,160 230,180 Q240,160 260,200 Q280,170 280,220 Q310,200 300,250 Q330,230 320,280 Q350,270 340,320 Q360,310 380,360 Q400,350 400,400 Q400,450 370,460 Q380,500 340,490 Q350,520 310,500 Q320,540 270,510 Q280,540 230,500 Q240,530 190,490 Q200,520 160,480 Q170,500 130,460 Q140,470 90,440Z" fill="#006e6e" filter="url(#rough)"/>
<circle cx="120" cy="80" r="15" fill="#008b8b" opacity="0.5"/> <path d="M380,180 Q420,140 450,180 Q490,150 500,200 Q520,220 490,250 Q510,290 460,280 Q480,320 430,300 Q440,330 390,300 Q380,320 350,280 Q330,310 320,270 Q300,290 300,240 Q280,250 300,210 Q290,180 320,190Z" fill="#007f7f" filter="url(#rough)"/>
<circle cx="290" cy="90" r="12" fill="#20b2aa" opacity="0.55"/> <path d="M140,180 Q90,160 110,120 Q70,100 120,80 Q100,50 150,60 Q160,30 190,60 Q220,40 210,80 Q240,100 200,120 Q220,140 180,160Z" fill="#008b8b" filter="url(#rough)"/>
<circle cx="70" cy="280" r="18" fill="#006666" opacity="0.5"/> <path d="M270,120 Q300,80 340,120 Q370,90 380,130 Q400,150 370,170 Q380,200 340,190 Q350,220 310,200 Q290,210 290,180 Q260,180 270,150Z" fill="#006e6e" filter="url(#rough)"/>
<circle cx="320" cy="240" r="14" fill="#008b8b" opacity="0.5"/> <path d="M420,420 Q460,400 470,440 Q500,420 500,460 Q520,490 490,500 Q500,520 470,510 Q460,530 430,500 Q410,510 410,470 Q390,480 400,440Z" fill="#20b2aa" filter="url(#rough)"/>
<circle cx="200" cy="340" r="10" fill="#20b2aa" opacity="0.45"/> <path d="M220,500 Q190,480 200,460 Q170,450 190,430 Q170,400 210,420 Q220,400 240,430 Q260,420 250,460Z" fill="#005f5f" filter="url(#rough)"/>
<!-- Small spray speckles -->
<ellipse cx="180" cy="70" rx="8" ry="5" fill="#008b8b" opacity="0.4"/> <!-- Big speckles -->
<ellipse cx="330" cy="150" rx="6" ry="9" fill="#20b2aa" opacity="0.4"/> <circle cx="80" cy="180" r="8" fill="#008b8b" filter="url(#rough)"/>
<ellipse cx="100" cy="310" rx="7" ry="4" fill="#006666" opacity="0.45"/> <circle cx="50" cy="230" r="10" fill="#006e6e" filter="url(#rough)"/>
<ellipse cx="260" cy="310" rx="5" ry="8" fill="#008b8b" opacity="0.4"/> <circle cx="150" cy="120" r="6" fill="#20b2aa" filter="url(#rough)"/>
<circle cx="150" cy="100" r="6" fill="#20b2aa" opacity="0.35"/> <circle cx="450" cy="340" r="9" fill="#005f5f" filter="url(#rough)"/>
<circle cx="310" cy="180" r="7" fill="#006666" opacity="0.4"/> <circle cx="480" cy="380" r="7" fill="#20b2aa" filter="url(#rough)"/>
<circle cx="90" cy="240" r="5" fill="#008b8b" opacity="0.35"/> <circle cx="520" cy="270" r="6" fill="#008b8b" filter="url(#rough)"/>
<circle cx="280" cy="320" r="6" fill="#20b2aa" opacity="0.35"/> <circle cx="100" cy="520" r="12" fill="#007f7f" filter="url(#rough)"/>
<!-- Rough edge marks --> <circle cx="160" cy="560" r="8" fill="#20b2aa" filter="url(#rough)"/>
<path d="M40,150 Q35,140 45,135 Q55,130 50,145 Q45,155 40,150" fill="#008b8b" opacity="0.5"/> <circle cx="360" cy="520" r="10" fill="#006e6e" filter="url(#rough)"/>
<path d="M350,100 Q360,95 365,105 Q370,115 360,110 Q350,105 350,100" fill="#20b2aa" opacity="0.45"/> <circle cx="460" cy="560" r="9" fill="#008b8b" filter="url(#rough)"/>
<path d="M240,350 Q235,345 245,340 Q255,335 250,345 Q245,355 240,350" fill="#006666" opacity="0.4"/> <circle cx="50" cy="480" r="14" fill="#006e6e" filter="url(#rough)"/>
<path d="M360,280 Q365,275 370,280 Q375,285 365,285 Q360,285 360,280" fill="#008b8b" opacity="0.45"/> <circle cx="530" cy="140" r="10" fill="#005f5f" filter="url(#rough)"/>
</svg> <circle cx="560" cy="200" r="7" fill="#008b8b" filter="url(#rough)"/>
</div> <circle cx="90" cy="80" r="5" fill="#20b2aa" filter="url(#rough)"/>
<circle cx="530" cy="480" r="8" fill="#007f7f" filter="url(#rough)"/>
<!-- Drip streaks -->
<line x1="80" y1="420" x2="75" y2="520" stroke="#006e6e" stroke-width="3" filter="url(#rough)" opacity="0.6"/>
<line x1="450" y1="300" x2="470" y2="380" stroke="#008b8b" stroke-width="2.5" filter="url(#rough)" opacity="0.5"/>
<line x1="200" y1="500" x2="195" y2="580" stroke="#007f7f" stroke-width="2" filter="url(#rough)" opacity="0.5"/>
<line x1="380" y1="490" x2="390" y2="560" stroke="#005f5f" stroke-width="3" filter="url(#rough)" opacity="0.5"/>
</svg>
<!-- The circle frame -->
<div class="circle-frame"> <div class="circle-frame">
<div class="circle-inner"> <div class="circle-inner">
<img src="/src/img/DanGrubbLogoTeal.png" alt="DanGrubb" class="logo-img"> <img src="/src/img/DanGrubbLogoTeal.png" alt="DanGrubb" class="logo-img">
@ -56,7 +61,6 @@ import CrushBase from '../layouts/CrushBase.astro';
</div> </div>
</main> </main>
<!-- Bottom navigation -->
<footer class="bottom-nav"> <footer class="bottom-nav">
<a href="https://ai.dangrubb.net" class="nav-item">AI</a> <a href="https://ai.dangrubb.net" class="nav-item">AI</a>
<span class="nav-dot">•</span> <span class="nav-dot">•</span>
@ -81,7 +85,6 @@ import CrushBase from '../layouts/CrushBase.astro';
background: var(--crush-white); background: var(--crush-white);
} }
/* === TOP BANNER === */
.top-banner { .top-banner {
text-align: center; text-align: center;
padding: 40px 20px 20px; padding: 40px 20px 20px;
@ -110,7 +113,6 @@ import CrushBase from '../layouts/CrushBase.astro';
opacity: 0.8; opacity: 0.8;
} }
/* === LOGO SECTION === */
.logo-section { .logo-section {
flex: 1; flex: 1;
display: flex; display: flex;
@ -121,42 +123,32 @@ import CrushBase from '../layouts/CrushBase.astro';
.logo-wrapper { .logo-wrapper {
position: relative; position: relative;
width: 400px; width: 380px;
height: 400px; height: 380px;
} }
/* Grungy splatter ring */ .splatter-layer {
.splatter-ring {
position: absolute; position: absolute;
inset: -40px; inset: -80px;
animation: splatterFloat 8s ease-in-out infinite; width: calc(100% + 160px);
height: calc(100% + 160px);
filter: drop-shadow(0 2px 8px rgba(0, 139, 139, 0.3));
} }
.splatter-svg {
width: 100%;
height: 100%;
}
@keyframes splatterFloat {
0%, 100% { transform: rotate(0deg); }
50% { transform: rotate(2deg); }
}
/* The circle frame */
.circle-frame { .circle-frame {
position: absolute; position: absolute;
inset: 40px; inset: 30px;
border-radius: 50%; border-radius: 50%;
border: 8px solid var(--crush-teal); border: 7px solid var(--crush-teal);
background: white; background: radial-gradient(circle, white 60%, #e8f5f5 100%);
box-shadow: box-shadow:
0 0 0 3px rgba(0, 102, 102, 0.15), 0 0 0 3px rgba(0, 139, 139, 0.15),
0 15px 50px rgba(0, 139, 139, 0.35), 0 12px 40px rgba(0, 139, 139, 0.3),
inset 0 5px 25px rgba(0, 139, 139, 0.08), inset 0 4px 20px rgba(0, 139, 139, 0.08);
inset 0 -5px 25px rgba(0, 102, 102, 0.05);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
z-index: 2;
} }
.circle-inner { .circle-inner {
@ -165,17 +157,16 @@ import CrushBase from '../layouts/CrushBase.astro';
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 60px; padding: 50px;
} }
.logo-img { .logo-img {
width: 70%; width: 65%;
height: 70%; height: 65%;
object-fit: contain; object-fit: contain;
filter: drop-shadow(0 4px 12px rgba(0, 102, 102, 0.3)); filter: drop-shadow(0 3px 8px rgba(0, 102, 102, 0.3));
} }
/* === BOTTOM NAVIGATION === */
.bottom-nav { .bottom-nav {
display: flex; display: flex;
align-items: center; align-items: center;
@ -211,18 +202,17 @@ import CrushBase from '../layouts/CrushBase.astro';
opacity: 0.5; opacity: 0.5;
} }
/* === RESPONSIVE === */
@media (max-width: 768px) { @media (max-width: 768px) {
.top-banner { padding: 30px 15px 15px; } .top-banner { padding: 30px 15px 15px; }
.logo-section { padding: 50px 15px; } .logo-section { padding: 50px 15px; }
.logo-wrapper { width: 300px; height: 300px; } .logo-wrapper { width: 280px; height: 280px; }
.circle-frame { inset: 30px; } .circle-frame { inset: 20px; }
.nav-item { font-size: 15px; padding: 6px 12px; letter-spacing: 1px; } .nav-item { font-size: 15px; padding: 6px 12px; }
} }
@media (max-width: 480px) { @media (max-width: 480px) {
.brand { font-size: 2.5rem; } .brand { font-size: 2.5rem; }
.logo-wrapper { width: 240px; height: 240px; } .logo-wrapper { width: 220px; height: 220px; }
.bottom-nav { flex-direction: column; gap: 4px; } .bottom-nav { flex-direction: column; gap: 4px; }
.nav-dot { display: none; } .nav-dot { display: none; }
} }