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:
@@ -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="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">
|
<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="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">
|
<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>
|
<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>
|
</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>
|
<p class="text-gray-500 text-sm mt-2">A trusty companion that has been with me on countless adventures.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="gear-card">
|
<div data-trail-box class="gear-card">
|
||||||
<div class="icon-box">
|
<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>
|
<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>
|
</div>
|
||||||
@@ -94,7 +94,7 @@ import WaveBackground from '../components/WaveBackground.astro';
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="gear-card">
|
<div data-trail-box class="gear-card">
|
||||||
<div class="icon-box">
|
<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>
|
<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>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user