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

feat: use actual logo in circle, remove menthol text

Browse Source
This commit is contained in:
dangrubbb
2026-05-30 14:04:22 -04:00
parent 20fe2a0962
commit 7b0a9ea9ce
2 changed files with 73 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/src/img/DanGrubbLogoTeal.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.0 KiB

197
src/pages/index.astro
View File

@ -15,63 +15,40 @@ import CrushBase from '../layouts/CrushBase.astro';
<!-- Center logo circle --> <!-- Center logo circle -->
<main class="logo-section"> <main class="logo-section">
<div class="logo-wrapper"> <div class="logo-wrapper">
<!-- Splatter behind --> <!-- Splatter marks around the circle (like the camel box) -->
<div class="splatter-bg"></div> <div class="splatter-ring">
<!-- The circle --> <span class="splat s1"></span>
<div class="logo-circle"> <span class="splat s2"></span>
<svg viewBox="0 0 120 120" class="logo-svg"> <span class="splat s3"></span>
<!-- Stylized DG monogram in teal gradient --> <span class="splat s4"></span>
<defs> <span class="splat s5"></span>
<linearGradient id="tealGrad" x1="0%" y1="0%" x2="100%" y2="100%"> <span class="splat s6"></span>
<stop offset="0%" stop-color="#006666"/> <span class="splat s7"></span>
<stop offset="50%" stop-color="#008b8b"/> <span class="splat s8"></span>
<stop offset="100%" stop-color="#20b2aa"/>
</linearGradient>
</defs>
<!-- D letter -->
<path d="M35 30 L35 90 L55 90 Q75 90 80 70 Q85 50 75 35 Q65 25 50 25 L35 30 Z"
fill="url(#tealGrad)" opacity="0.9"/>
<!-- G letter (stylized, overlapping) -->
<path d="M55 45 Q45 50 45 65 Q45 82 60 85 Q75 88 82 75 L82 65 L65 65 L65 70 L75 70 L75 77 Q70 80 62 78 Q52 75 52 65 Q52 55 60 50 Q68 47 73 52"
fill="none" stroke="url(#tealGrad)" stroke-width="3.5" stroke-linecap="round"/>
</svg>
</div>
</div> </div>
<p class="crush-subtitle"> <!-- The circle -->
<span class="crush-label">HINT OF</span> <div class="circle-frame">
<span class="crush-highlight">MENTHOL</span> <div class="circle-inner">
<span class="crush-dot">•</span> <img src="/src/img/DanGrubbLogoTeal.png" alt="DanGrubb" class="logo-img">
<span class="crush-label">MORE</span> </div>
<span class="crush-highlight">MENTHOL</span> </div>
</p> </div>
</main> </main>
<!-- Bottom navigation --> <!-- Bottom navigation -->
<footer class="bottom-nav"> <footer class="bottom-nav">
<a href="https://ai.dangrubb.net" class="nav-item"> <a href="https://ai.dangrubb.net" class="nav-item">AI</a>
<span class="nav-label">AI</span>
</a>
<span class="nav-dot">•</span> <span class="nav-dot">•</span>
<a href="/blog" class="nav-item"> <a href="/blog" class="nav-item">BLOG</a>
<span class="nav-label">BLOG</span>
</a>
<span class="nav-dot">•</span> <span class="nav-dot">•</span>
<a href="https://pi.dangrubb.net/jellyfin" class="nav-item"> <a href="https://pi.dangrubb.net/jellyfin" class="nav-item">MEDIA</a>
<span class="nav-label">MEDIA</span>
</a>
<span class="nav-dot">•</span> <span class="nav-dot">•</span>
<a href="https://pi.dangrubb.net/nextcloud" class="nav-item"> <a href="https://pi.dangrubb.net/nextcloud" class="nav-item">STORAGE</a>
<span class="nav-label">STORAGE</span>
</a>
<span class="nav-dot">•</span> <span class="nav-dot">•</span>
<a href="/cv" class="nav-item"> <a href="/cv" class="nav-item">CV</a>
<span class="nav-label">CV</span>
</a>
<span class="nav-dot">•</span> <span class="nav-dot">•</span>
<a href="https://pi.dangrubb.net/dangit" class="nav-item"> <a href="https://pi.dangrubb.net/dangit" class="nav-item">GIT</a>
<span class="nav-label">GIT</span>
</a>
</footer> </footer>
</div> </div>
</CrushBase> </CrushBase>
@ -81,10 +58,7 @@ import CrushBase from '../layouts/CrushBase.astro';
min-height: 100vh; min-height: 100vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background: background: var(--crush-white);
radial-gradient(ellipse at 20% 20%, rgba(0, 139, 139, 0.05) 0%, transparent 50%),
radial-gradient(ellipse at 80% 80%, rgba(32, 178, 170, 0.04) 0%, transparent 50%),
var(--crush-white);
} }
/* === TOP BANNER === */ /* === TOP BANNER === */
@ -120,7 +94,6 @@ import CrushBase from '../layouts/CrushBase.astro';
.logo-section { .logo-section {
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 60px 20px; padding: 60px 20px;
@ -128,81 +101,68 @@ import CrushBase from '../layouts/CrushBase.astro';
.logo-wrapper { .logo-wrapper {
position: relative; position: relative;
width: clamp(220px, 50vw, 320px); width: 340px;
height: clamp(220px, 50vw, 320px); height: 340px;
margin: 0 auto;
} }
/* Animated splatter background */ /* Splatter ring — irregular teal marks around circle (like the box) */
.splatter-bg { .splatter-ring {
position: absolute; position: absolute;
inset: -20px; inset: 0;
background-image:
radial-gradient(circle at 30% 40%, rgba(0, 102, 102, 0.3) 0%, transparent 40%),
radial-gradient(circle at 70% 30%, rgba(0, 139, 139, 0.25) 0%, transparent 35%),
radial-gradient(circle at 50% 70%, rgba(32, 178, 170, 0.2) 0%, transparent 40%),
radial-gradient(circle at 20% 80%, rgba(0, 102, 102, 0.15) 0%, transparent 30%);
border-radius: 50%;
animation: splatterPulse 4s ease-in-out infinite;
filter: blur(20px);
} }
.splat {
position: absolute;
border-radius: 50% 40% 60% 45%;
background: var(--crush-teal);
opacity: 0.55;
animation: splatterPulse 5s ease-in-out infinite;
}
.splat.s1 { width: 60px; height: 80px; top: -10px; left: 20%; transform: rotate(15deg); }
.splat.s2 { width: 70px; height: 50px; top: 5%; right: -5px; transform: rotate(-20deg); }
.splat.s3 { width: 45px; height: 65px; bottom: 10px; right: 5%; transform: rotate(45deg); }
.splat.s4 { width: 55px; height: 40px; bottom: -8px; left: 30%; transform: rotate(-10deg); }
.splat.s5 { width: 50px; height: 70px; top: 15%; left: -10px; transform: rotate(30deg); }
.splat.s6 { width: 40px; height: 55px; top: 50%; right: -12px; transform: rotate(-35deg); }
.splat.s7 { width: 65px; height: 45px; bottom: 15%; left: -8px; transform: rotate(20deg); }
.splat.s8 { width: 35px; height: 60px; top: -5px; right: 25%; transform: rotate(-25deg); }
@keyframes splatterPulse { @keyframes splatterPulse {
0%, 100% { transform: scale(1); opacity: 1; } 0%, 100% { opacity: 0.55; }
50% { transform: scale(1.1); opacity: 0.7; } 50% { opacity: 0.35; }
} }
/* The actual circle with the camel/monogram */ /* The circle frame — teal border, white interior (like Joe Camel logo) */
.logo-circle { .circle-frame {
position: relative; position: absolute;
width: 100%; inset: 20px;
height: 100%;
border-radius: 50%; border-radius: 50%;
border: 6px solid var(--crush-teal); border: 6px solid var(--crush-teal);
background: background: white;
linear-gradient(135deg, #e0f2f2 0%, #b8e0e0 50%, #99d0d0 100%); box-shadow:
0 0 0 2px rgba(0, 139, 139, 0.1),
0 12px 40px rgba(0, 139, 139, 0.25);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
box-shadow: overflow: hidden;
0 20px 60px rgba(0, 139, 139, 0.3),
inset 0 2px 20px rgba(255, 255, 255, 0.5);
} }
.logo-svg { .circle-inner {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 30px;
}
/* The logo img — white PNG colorized to teal using hue-rotate + invert */
.logo-img {
width: 60%; width: 60%;
height: 60%; height: 60%;
filter: drop-shadow(0 4px 12px rgba(0, 102, 102, 0.4)); object-fit: contain;
}
/* Menthol subtitle (inspired by the Camel Crush pack) */
.crush-subtitle {
margin-top: 40px;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
justify-content: center;
}
.crush-label {
font-size: 16px;
font-weight: 700;
color: var(--crush-teal-dark);
letter-spacing: 1px;
}
.crush-highlight {
font-size: 18px;
font-weight: 700;
color: var(--crush-teal);
background: linear-gradient(180deg, transparent 60%, rgba(0, 139, 139, 0.15) 60%);
}
.crush-dot {
font-size: 20px;
color: var(--crush-teal);
opacity: 0.6;
} }
/* === BOTTOM NAVIGATION === */ /* === BOTTOM NAVIGATION === */
@ -245,24 +205,15 @@ import CrushBase from '../layouts/CrushBase.astro';
@media (max-width: 768px) { @media (max-width: 768px) {
.top-banner { padding: 30px 15px 15px; } .top-banner { padding: 30px 15px 15px; }
.logo-section { padding: 40px 15px; } .logo-section { padding: 40px 15px; }
.crush-subtitle { margin-top: 30px; } .logo-wrapper { width: 260px; height: 260px; }
.nav-item { .circle-frame { inset: 15px; }
font-size: 15px; .nav-item { font-size: 15px; padding: 6px 12px; letter-spacing: 1px; }
padding: 6px 12px;
letter-spacing: 1px;
}
} }
@media (max-width: 480px) { @media (max-width: 480px) {
.brand { font-size: 2.5rem; } .brand { font-size: 2.5rem; }
.crush-subtitle { .logo-wrapper { width: 220px; height: 220px; }
flex-direction: column; .bottom-nav { flex-direction: column; gap: 4px; }
gap: 4px;
}
.bottom-nav {
flex-direction: column;
gap: 4px;
}
.nav-dot { display: none; } .nav-dot { display: none; }
} }
</style> </style>