feat: mark about-page boxes as trail-targets (#14)

Adds data-trail-box to:
- The main about-card (profile + bio + buttons)
- The 3 gear-cards (Camera Body, Lenses, Editing)

These boxes will now intercept wave-thread pulses and trigger
the split-around-box animation, same as contact + home boxes.
This commit is contained in:
Linus Olofsson
2026-05-20 23:44:07 +02:00
committed by GitHub
parent d6d062a3b2
commit ece7693ad5
+4 -4
View File
@@ -12,7 +12,7 @@ import WaveBackground from '../components/WaveBackground.astro';
<div class="container mx-auto px-4 py-12 md:py-20 relative z-10">
<div class="bg-neutral-900/60 backdrop-blur-md border border-white/10 rounded-3xl p-8 md:p-12 shadow-2xl mb-20">
<div data-trail-box class="bg-neutral-900/60 backdrop-blur-md border border-white/10 rounded-3xl p-8 md:p-12 shadow-2xl mb-20">
<div class="flex flex-col lg:flex-row items-center gap-12 lg:gap-20">
@@ -73,7 +73,7 @@ import WaveBackground from '../components/WaveBackground.astro';
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="gear-card">
<div data-trail-box class="gear-card">
<div class="icon-box">
<svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
</div>
@@ -82,7 +82,7 @@ import WaveBackground from '../components/WaveBackground.astro';
<p class="text-gray-500 text-sm mt-2">A trusty companion that has been with me on countless adventures.</p>
</div>
<div class="gear-card">
<div data-trail-box class="gear-card">
<div class="icon-box">
<svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" /></svg>
</div>
@@ -94,7 +94,7 @@ import WaveBackground from '../components/WaveBackground.astro';
</ul>
</div>
<div class="gear-card">
<div data-trail-box class="gear-card">
<div class="icon-box">
<svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /></svg>
</div>