mguilbert
87efea3cc1
- HeroSection: full-viewport split layout with staggered entrance animations, editorial typography, tech stack tags, animated scroll indicator - WorksSection: refined header with section label, scroll-reveal on entry - ProjectCard: per-card IntersectionObserver reveal, numbered projects, enhanced hover states (scale + brightness), improved CTA - FeatureSection: card grid with border/glass treatment and staggered reveals - AboutSection: animated timeline progress line, scroll-triggered card entrances - FeatureColumn: icon container with hover treatment - globals.css: fadeUp/lineGrow/arrowBounce keyframes, .reveal utility, prefers-reduced-motion support, brand-accent color token - lib/useReveal.ts: IntersectionObserver hook for scroll reveals Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
34 lines
1.1 KiB
TypeScript
34 lines
1.1 KiB
TypeScript
type props = {
|
|
imagePath: string;
|
|
title: string;
|
|
text: string;
|
|
delay?: number;
|
|
};
|
|
|
|
export const FeatureColumn = ({ imagePath, title, text, delay = 0 }: props) => {
|
|
return (
|
|
<div
|
|
className="reveal flex flex-col items-center justify-start max-w-[320px] gap-6"
|
|
style={{ transitionDelay: `${delay}ms` }}
|
|
>
|
|
{/* Icon container */}
|
|
<div className="w-20 h-20 rounded-2xl bg-brand-brown/6 flex items-center justify-center group-hover:bg-brand-brown/10 transition-colors duration-300">
|
|
<img
|
|
className="w-10 h-10"
|
|
src={imagePath}
|
|
alt=""
|
|
aria-hidden="true"
|
|
/>
|
|
</div>
|
|
|
|
<div className="font-serif text-brand-brown text-center leading-[1.1] text-[clamp(1.5rem,2.5vw,1.75rem)]">
|
|
{title}
|
|
</div>
|
|
|
|
<div className="font-sans text-sm text-center text-brand-brown/65 leading-relaxed">
|
|
{text}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|