{title}

+ + {String(step.stepNumber).padStart(2, '0')} + + {index < 4 &&

} +

+ +

+ {step.subtitle} +

{step.title}

{step.description}

+ {step.duration && ( + {step.duration} + )} +

+ + ); +} + +export default function ProcessTimeline({ steps }: Props) { + const [activeStep, setActiveStep] = useState(0); + const containerRef = useRef(null); + + useEffect(() => { + const handleScroll = () => { + if (!containerRef.current) return; + const children = containerRef.current.children; + const viewportCenter = window.innerHeight / 2; + + for (let i = children.length - 1; i >= 0; i--) { + const rect = children[i].getBoundingClientRect(); + if (rect.top < viewportCenter) { + setActiveStep(i); + break; + } + } + }; + + window.addEventListener('scroll', handleScroll, { passive: true }); + return () => window.removeEventListener('scroll', handleScroll); + }, []); + + return ( +

+ {/* Progress indicator */} +

+ +

+ {steps.map((_, i) => ( + + ))} +

+ + {/* Steps */} +

+ {steps.map((step, index) => ( + + ))} +

+ ); +} + +// --- Styles --- +const containerStyle: React.CSSProperties = { + display: 'flex', + gap: '3rem', + position: 'relative', + maxWidth: '900px', + margin: '0 auto', +}; + +const progressBarContainerStyle: React.CSSProperties = { + position: 'sticky', + top: '40vh', + height: '300px', + width: '2px', + alignSelf: 'flex-start', + display: 'none', // Hidden on mobile, shown via media query in parent +}; + +const progressTrackStyle: React.CSSProperties = { + position: 'absolute', + top: 0, + bottom: 0, + width: '2px', + backgroundColor: '#E8E6E1', + borderRadius: '1px', +}; + +const progressFillStyle: React.CSSProperties = { + width: '100%', + backgroundColor: '#C4A77D', + borderRadius: '1px', +}; + +const progressDotStyle: React.CSSProperties = { + position: 'absolute', + left: '50%', + transform: 'translate(-50%, -50%)', + width: '8px', + height: '8px', + borderRadius: '50%', + zIndex: 1, +}; + +const stepsContainerStyle: React.CSSProperties = { + display: 'flex', + flexDirection: 'column', + gap: '6rem', + flex: 1, +}; + +const stepStyle: React.CSSProperties = { + display: 'flex', + gap: '2rem', + alignItems: 'flex-start', +}; + +const stepLeftStyle: React.CSSProperties = { + flexShrink: 0, + width: '60px', + display: 'flex', + flexDirection: 'column', + alignItems: 'center', +}; + +const stepNumberContainerStyle: React.CSSProperties = { + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + gap: '0.5rem', +}; + +const stepNumberStyle: React.CSSProperties = { + fontFamily: "'DM Serif Display', Georgia, serif", + fontSize: '2rem', + color: '#C4A77D', + lineHeight: 1, +}; + +const stepLineStyle: React.CSSProperties = { + width: '1px', + height: '100px', + backgroundColor: '#E8E6E1', + marginTop: '0.5rem', +}; + +const stepContentStyle: React.CSSProperties = { + flex: 1, + paddingTop: '0.25rem', +}; + +const stepSubtitleStyle: React.CSSProperties = { + fontSize: '0.75rem', + letterSpacing: '0.1em', + textTransform: 'uppercase' as const, + color: '#9A9A9A', + display: 'block', + marginBottom: '0.5rem', +}; + +const stepTitleStyle: React.CSSProperties = { + fontFamily: "'DM Serif Display', Georgia, serif", + fontSize: 'clamp(1.5rem, 3vw, 2rem)', + fontWeight: 400, + marginBottom: '1rem', + lineHeight: 1.3, + color: '#1A1A1A', +}; + +const stepDescStyle: React.CSSProperties = { + fontSize: '1rem', + lineHeight: 1.7, + color: '#6B6B6B', + maxWidth: '55ch', +}; + +const stepDurationStyle: React.CSSProperties = { + display: 'inline-block', + marginTop: '1rem', + fontSize: '0.8rem', + letterSpacing: '0.04em', + color: '#C4A77D', + padding: '4px 12px', + border: '1px solid #E8E6E1', + borderRadius: '2px', +}; diff --git a/src/components/ProjectCard.astro b/src/components/ProjectCard.astro new file mode 100644 index 0000000..26a3fba --- /dev/null +++ b/src/components/ProjectCard.astro @@ -0,0 +1,123 @@ +--- +interface Props { + title: string; + client: string; + slug: string; + category: 'perenne' | 'event'; + heroImage: string; + description: string; + tags?: string[]; + index?: number; +} + +const { title, client, slug, category, heroImage, description, tags = [], index = 0 } = Astro.props; +const baseUrl = category === 'perenne' ? '/realisations-perennes' : '/creations-evenement'; +const href = `${baseUrl}/${slug}`; +const delay = `${index * 100}ms`; +--- + + +

+ Découvrir +

+ {client} +

{title}

+ {tags.length > 0 && ( +

+ {tags.slice(0, 3).map(tag => ( + {tag} + ))} +

+ )} +

+ + + diff --git a/src/env.d.ts b/src/env.d.ts new file mode 100644 index 0000000..b1face5 --- /dev/null +++ b/src/env.d.ts @@ -0,0 +1,10 @@ +/// + +interface ImportMetaEnv { + readonly PUBLIC_SANITY_PROJECT_ID: string; + readonly PUBLIC_SANITY_DATASET: string; +} + +interface ImportMeta { + readonly env: ImportMetaEnv; +} diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro new file mode 100644 index 0000000..983b452 --- /dev/null +++ b/src/layouts/BaseLayout.astro @@ -0,0 +1,79 @@ +--- +import Header from '../components/Header.astro'; +import Footer from '../components/Footer.astro'; +import '../styles/global.css'; + +interface Props { + title?: string; + description?: string; + image?: string; +} + +const { + title = 'Aurélie Barré — Design d\'intérieur & Création événementielle', + description = 'Portfolio d\'Aurélie Barré, designeuse d\'intérieur et directrice artistique spécialisée en design d\'expérience et création événementielle.', + image = '/og-image.jpg' +} = Astro.props; + +const canonicalURL = new URL(Astro.url.pathname, Astro.site); +--- + + + + + + + + + + + + + + + + + + + + + + + {title} + + +

+ +

{step.title}

{title}

{project.title}

Créations
Événement

+ Design + d'expérience +

Créations Événement

Réalisations Pérennes

Comment je travaille

Processus
Créatif

Un projet en tête ?

{project.title}

Réalisations
Pérennes

{step.title}

{title}

{project.title}

CréationsÉvénement

+ Design + d'expérience +

Créations Événement

Réalisations Pérennes

Comment je travaille

ProcessusCréatif

Un projet en tête ?

{project.title}

RéalisationsPérennes

Créations
Événement

Processus
Créatif

Réalisations
Pérennes