init
This commit is contained in:
ordinarthur
commit
9d172a4422
154
.astro/content.d.ts
vendored
Normal file
154
.astro/content.d.ts
vendored
Normal file
@ -0,0 +1,154 @@
|
|||||||
|
declare module 'astro:content' {
|
||||||
|
export interface RenderResult {
|
||||||
|
Content: import('astro/runtime/server/index.js').AstroComponentFactory;
|
||||||
|
headings: import('astro').MarkdownHeading[];
|
||||||
|
remarkPluginFrontmatter: Record<string, any>;
|
||||||
|
}
|
||||||
|
interface Render {
|
||||||
|
'.md': Promise<RenderResult>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface RenderedContent {
|
||||||
|
html: string;
|
||||||
|
metadata?: {
|
||||||
|
imagePaths: Array<string>;
|
||||||
|
[key: string]: unknown;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
type Flatten<T> = T extends { [K: string]: infer U } ? U : never;
|
||||||
|
|
||||||
|
export type CollectionKey = keyof DataEntryMap;
|
||||||
|
export type CollectionEntry<C extends CollectionKey> = Flatten<DataEntryMap[C]>;
|
||||||
|
|
||||||
|
type AllValuesOf<T> = T extends any ? T[keyof T] : never;
|
||||||
|
|
||||||
|
export type ReferenceDataEntry<
|
||||||
|
C extends CollectionKey,
|
||||||
|
E extends keyof DataEntryMap[C] = string,
|
||||||
|
> = {
|
||||||
|
collection: C;
|
||||||
|
id: E;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type ReferenceLiveEntry<C extends keyof LiveContentConfig['collections']> = {
|
||||||
|
collection: C;
|
||||||
|
id: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function getCollection<C extends keyof DataEntryMap, E extends CollectionEntry<C>>(
|
||||||
|
collection: C,
|
||||||
|
filter?: (entry: CollectionEntry<C>) => entry is E,
|
||||||
|
): Promise<E[]>;
|
||||||
|
export function getCollection<C extends keyof DataEntryMap>(
|
||||||
|
collection: C,
|
||||||
|
filter?: (entry: CollectionEntry<C>) => unknown,
|
||||||
|
): Promise<CollectionEntry<C>[]>;
|
||||||
|
|
||||||
|
export function getLiveCollection<C extends keyof LiveContentConfig['collections']>(
|
||||||
|
collection: C,
|
||||||
|
filter?: LiveLoaderCollectionFilterType<C>,
|
||||||
|
): Promise<
|
||||||
|
import('astro').LiveDataCollectionResult<LiveLoaderDataType<C>, LiveLoaderErrorType<C>>
|
||||||
|
>;
|
||||||
|
|
||||||
|
export function getEntry<
|
||||||
|
C extends keyof DataEntryMap,
|
||||||
|
E extends keyof DataEntryMap[C] | (string & {}),
|
||||||
|
>(
|
||||||
|
entry: ReferenceDataEntry<C, E>,
|
||||||
|
): E extends keyof DataEntryMap[C]
|
||||||
|
? Promise<DataEntryMap[C][E]>
|
||||||
|
: Promise<CollectionEntry<C> | undefined>;
|
||||||
|
export function getEntry<
|
||||||
|
C extends keyof DataEntryMap,
|
||||||
|
E extends keyof DataEntryMap[C] | (string & {}),
|
||||||
|
>(
|
||||||
|
collection: C,
|
||||||
|
id: E,
|
||||||
|
): E extends keyof DataEntryMap[C]
|
||||||
|
? string extends keyof DataEntryMap[C]
|
||||||
|
? Promise<DataEntryMap[C][E]> | undefined
|
||||||
|
: Promise<DataEntryMap[C][E]>
|
||||||
|
: Promise<CollectionEntry<C> | undefined>;
|
||||||
|
export function getLiveEntry<C extends keyof LiveContentConfig['collections']>(
|
||||||
|
collection: C,
|
||||||
|
filter: string | LiveLoaderEntryFilterType<C>,
|
||||||
|
): Promise<import('astro').LiveDataEntryResult<LiveLoaderDataType<C>, LiveLoaderErrorType<C>>>;
|
||||||
|
|
||||||
|
/** Resolve an array of entry references from the same collection */
|
||||||
|
export function getEntries<C extends keyof DataEntryMap>(
|
||||||
|
entries: ReferenceDataEntry<C, keyof DataEntryMap[C]>[],
|
||||||
|
): Promise<CollectionEntry<C>[]>;
|
||||||
|
|
||||||
|
export function render<C extends keyof DataEntryMap>(
|
||||||
|
entry: DataEntryMap[C][string],
|
||||||
|
): Promise<RenderResult>;
|
||||||
|
|
||||||
|
export function reference<
|
||||||
|
C extends
|
||||||
|
| keyof DataEntryMap
|
||||||
|
// Allow generic `string` to avoid excessive type errors in the config
|
||||||
|
// if `dev` is not running to update as you edit.
|
||||||
|
// Invalid collection names will be caught at build time.
|
||||||
|
| (string & {}),
|
||||||
|
>(
|
||||||
|
collection: C,
|
||||||
|
): import('astro/zod').ZodPipe<
|
||||||
|
import('astro/zod').ZodString,
|
||||||
|
import('astro/zod').ZodTransform<
|
||||||
|
C extends keyof DataEntryMap
|
||||||
|
? {
|
||||||
|
collection: C;
|
||||||
|
id: string;
|
||||||
|
}
|
||||||
|
: never,
|
||||||
|
string
|
||||||
|
>
|
||||||
|
>;
|
||||||
|
|
||||||
|
type ReturnTypeOrOriginal<T> = T extends (...args: any[]) => infer R ? R : T;
|
||||||
|
type InferEntrySchema<C extends keyof DataEntryMap> = import('astro/zod').infer<
|
||||||
|
ReturnTypeOrOriginal<Required<ContentConfig['collections'][C]>['schema']>
|
||||||
|
>;
|
||||||
|
type ExtractLoaderConfig<T> = T extends { loader: infer L } ? L : never;
|
||||||
|
type InferLoaderSchema<
|
||||||
|
C extends keyof DataEntryMap,
|
||||||
|
L = ExtractLoaderConfig<ContentConfig['collections'][C]>,
|
||||||
|
> = L extends { schema: import('astro/zod').ZodSchema }
|
||||||
|
? import('astro/zod').infer<L['schema']>
|
||||||
|
: any;
|
||||||
|
|
||||||
|
type DataEntryMap = {
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
type ExtractLoaderTypes<T> = T extends import('astro/loaders').LiveLoader<
|
||||||
|
infer TData,
|
||||||
|
infer TEntryFilter,
|
||||||
|
infer TCollectionFilter,
|
||||||
|
infer TError
|
||||||
|
>
|
||||||
|
? { data: TData; entryFilter: TEntryFilter; collectionFilter: TCollectionFilter; error: TError }
|
||||||
|
: { data: never; entryFilter: never; collectionFilter: never; error: never };
|
||||||
|
type ExtractEntryFilterType<T> = ExtractLoaderTypes<T>['entryFilter'];
|
||||||
|
type ExtractCollectionFilterType<T> = ExtractLoaderTypes<T>['collectionFilter'];
|
||||||
|
type ExtractErrorType<T> = ExtractLoaderTypes<T>['error'];
|
||||||
|
|
||||||
|
type LiveLoaderDataType<C extends keyof LiveContentConfig['collections']> =
|
||||||
|
LiveContentConfig['collections'][C]['schema'] extends undefined
|
||||||
|
? ExtractDataType<LiveContentConfig['collections'][C]['loader']>
|
||||||
|
: import('astro/zod').infer<
|
||||||
|
Exclude<LiveContentConfig['collections'][C]['schema'], undefined>
|
||||||
|
>;
|
||||||
|
type LiveLoaderEntryFilterType<C extends keyof LiveContentConfig['collections']> =
|
||||||
|
ExtractEntryFilterType<LiveContentConfig['collections'][C]['loader']>;
|
||||||
|
type LiveLoaderCollectionFilterType<C extends keyof LiveContentConfig['collections']> =
|
||||||
|
ExtractCollectionFilterType<LiveContentConfig['collections'][C]['loader']>;
|
||||||
|
type LiveLoaderErrorType<C extends keyof LiveContentConfig['collections']> = ExtractErrorType<
|
||||||
|
LiveContentConfig['collections'][C]['loader']
|
||||||
|
>;
|
||||||
|
|
||||||
|
export type ContentConfig = never;
|
||||||
|
export type LiveContentConfig = never;
|
||||||
|
}
|
||||||
5
.astro/settings.json
Normal file
5
.astro/settings.json
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
{
|
||||||
|
"_variables": {
|
||||||
|
"lastUpdateCheck": 1775383544839
|
||||||
|
}
|
||||||
|
}
|
||||||
1
.astro/types.d.ts
vendored
Normal file
1
.astro/types.d.ts
vendored
Normal file
@ -0,0 +1 @@
|
|||||||
|
/// <reference types="astro/client" />
|
||||||
3
.gitignore
vendored
Normal file
3
.gitignore
vendored
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
node_modules/
|
||||||
|
dist/
|
||||||
|
public/
|
||||||
13
astro.config.mjs
Normal file
13
astro.config.mjs
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
import { defineConfig } from 'astro/config';
|
||||||
|
import react from '@astrojs/react';
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
integrations: [react()],
|
||||||
|
output: 'static',
|
||||||
|
site: 'https://aureliebarre.fr',
|
||||||
|
vite: {
|
||||||
|
css: {
|
||||||
|
preprocessorOptions: {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
6192
package-lock.json
generated
Normal file
6192
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
30
package.json
Normal file
30
package.json
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
{
|
||||||
|
"name": "aurelie-barre-portfolio",
|
||||||
|
"type": "module",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "astro dev",
|
||||||
|
"build": "astro build",
|
||||||
|
"preview": "astro preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"astro": "^6.1.3",
|
||||||
|
"@astrojs/react": "^4.2.1",
|
||||||
|
"react": "^19.1.0",
|
||||||
|
"react-dom": "^19.1.0",
|
||||||
|
"@sanity/client": "^7.3.0",
|
||||||
|
"@sanity/image-url": "^1.1.0",
|
||||||
|
"motion": "^12.7.3"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/react": "^19.1.0",
|
||||||
|
"@types/react-dom": "^19.1.2",
|
||||||
|
"typescript": "^5.8.3"
|
||||||
|
},
|
||||||
|
"pnpm": {
|
||||||
|
"onlyBuiltDependencies": [
|
||||||
|
"esbuild",
|
||||||
|
"sharp"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
4009
pnpm-lock.yaml
generated
Normal file
4009
pnpm-lock.yaml
generated
Normal file
File diff suppressed because it is too large
Load Diff
77
sanity/schemas/processStep.ts
Normal file
77
sanity/schemas/processStep.ts
Normal file
@ -0,0 +1,77 @@
|
|||||||
|
import { defineType, defineField } from 'sanity';
|
||||||
|
|
||||||
|
export default defineType({
|
||||||
|
name: 'processStep',
|
||||||
|
title: 'Étape du processus',
|
||||||
|
type: 'document',
|
||||||
|
fields: [
|
||||||
|
defineField({
|
||||||
|
name: 'title',
|
||||||
|
title: "Titre de l'étape",
|
||||||
|
type: 'string',
|
||||||
|
validation: (rule) => rule.required(),
|
||||||
|
}),
|
||||||
|
defineField({
|
||||||
|
name: 'stepNumber',
|
||||||
|
title: "Numéro d'étape",
|
||||||
|
type: 'number',
|
||||||
|
validation: (rule) => rule.required().min(1).max(10),
|
||||||
|
}),
|
||||||
|
defineField({
|
||||||
|
name: 'subtitle',
|
||||||
|
title: 'Sous-titre',
|
||||||
|
type: 'string',
|
||||||
|
}),
|
||||||
|
defineField({
|
||||||
|
name: 'description',
|
||||||
|
title: 'Description',
|
||||||
|
type: 'text',
|
||||||
|
rows: 4,
|
||||||
|
}),
|
||||||
|
defineField({
|
||||||
|
name: 'icon',
|
||||||
|
title: "Icône / illustration de l'étape",
|
||||||
|
type: 'image',
|
||||||
|
}),
|
||||||
|
defineField({
|
||||||
|
name: 'gallery',
|
||||||
|
title: 'Photos illustratives',
|
||||||
|
type: 'array',
|
||||||
|
of: [
|
||||||
|
{
|
||||||
|
type: 'image',
|
||||||
|
options: { hotspot: true },
|
||||||
|
fields: [
|
||||||
|
defineField({ name: 'alt', title: 'Texte alternatif', type: 'string' }),
|
||||||
|
defineField({ name: 'caption', title: 'Légende', type: 'string' }),
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}),
|
||||||
|
defineField({
|
||||||
|
name: 'duration',
|
||||||
|
title: 'Durée estimée',
|
||||||
|
type: 'string',
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
preview: {
|
||||||
|
select: {
|
||||||
|
title: 'title',
|
||||||
|
subtitle: 'subtitle',
|
||||||
|
stepNumber: 'stepNumber',
|
||||||
|
},
|
||||||
|
prepare({ title, subtitle, stepNumber }) {
|
||||||
|
return {
|
||||||
|
title: `${stepNumber}. ${title}`,
|
||||||
|
subtitle,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
orderings: [
|
||||||
|
{
|
||||||
|
title: 'Par numéro',
|
||||||
|
name: 'stepNumberAsc',
|
||||||
|
by: [{ field: 'stepNumber', direction: 'asc' }],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
138
sanity/schemas/project.ts
Normal file
138
sanity/schemas/project.ts
Normal file
@ -0,0 +1,138 @@
|
|||||||
|
import { defineType, defineField } from 'sanity';
|
||||||
|
|
||||||
|
export default defineType({
|
||||||
|
name: 'project',
|
||||||
|
title: 'Projet',
|
||||||
|
type: 'document',
|
||||||
|
fields: [
|
||||||
|
defineField({
|
||||||
|
name: 'title',
|
||||||
|
title: 'Titre du projet',
|
||||||
|
type: 'string',
|
||||||
|
validation: (rule) => rule.required(),
|
||||||
|
}),
|
||||||
|
defineField({
|
||||||
|
name: 'slug',
|
||||||
|
title: 'Slug (URL)',
|
||||||
|
type: 'slug',
|
||||||
|
options: { source: 'title', maxLength: 96 },
|
||||||
|
validation: (rule) => rule.required(),
|
||||||
|
}),
|
||||||
|
defineField({
|
||||||
|
name: 'category',
|
||||||
|
title: 'Catégorie',
|
||||||
|
type: 'string',
|
||||||
|
options: {
|
||||||
|
list: [
|
||||||
|
{ title: 'Réalisation Pérenne', value: 'perenne' },
|
||||||
|
{ title: 'Création Événement', value: 'event' },
|
||||||
|
],
|
||||||
|
layout: 'radio',
|
||||||
|
},
|
||||||
|
validation: (rule) => rule.required(),
|
||||||
|
}),
|
||||||
|
defineField({
|
||||||
|
name: 'client',
|
||||||
|
title: 'Client',
|
||||||
|
type: 'string',
|
||||||
|
validation: (rule) => rule.required(),
|
||||||
|
}),
|
||||||
|
defineField({
|
||||||
|
name: 'date',
|
||||||
|
title: 'Date du projet',
|
||||||
|
type: 'date',
|
||||||
|
}),
|
||||||
|
defineField({
|
||||||
|
name: 'location',
|
||||||
|
title: 'Lieu',
|
||||||
|
type: 'string',
|
||||||
|
}),
|
||||||
|
defineField({
|
||||||
|
name: 'description',
|
||||||
|
title: 'Description courte',
|
||||||
|
type: 'text',
|
||||||
|
rows: 3,
|
||||||
|
}),
|
||||||
|
defineField({
|
||||||
|
name: 'heroImage',
|
||||||
|
title: 'Image principale',
|
||||||
|
type: 'image',
|
||||||
|
options: { hotspot: true },
|
||||||
|
fields: [
|
||||||
|
defineField({
|
||||||
|
name: 'alt',
|
||||||
|
title: 'Texte alternatif',
|
||||||
|
type: 'string',
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
}),
|
||||||
|
defineField({
|
||||||
|
name: 'gallery',
|
||||||
|
title: 'Galerie photos',
|
||||||
|
type: 'array',
|
||||||
|
of: [
|
||||||
|
{
|
||||||
|
type: 'image',
|
||||||
|
options: { hotspot: true },
|
||||||
|
fields: [
|
||||||
|
defineField({
|
||||||
|
name: 'alt',
|
||||||
|
title: 'Texte alternatif',
|
||||||
|
type: 'string',
|
||||||
|
}),
|
||||||
|
defineField({
|
||||||
|
name: 'size',
|
||||||
|
title: "Taille d'affichage",
|
||||||
|
type: 'string',
|
||||||
|
options: {
|
||||||
|
list: [
|
||||||
|
{ title: 'Petit', value: 'small' },
|
||||||
|
{ title: 'Moyen', value: 'medium' },
|
||||||
|
{ title: 'Grand', value: 'large' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
initialValue: 'medium',
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}),
|
||||||
|
defineField({
|
||||||
|
name: 'tags',
|
||||||
|
title: 'Tags',
|
||||||
|
type: 'array',
|
||||||
|
of: [{ type: 'string' }],
|
||||||
|
options: { layout: 'tags' },
|
||||||
|
}),
|
||||||
|
defineField({
|
||||||
|
name: 'featured',
|
||||||
|
title: "Mis en avant sur la page d'accueil",
|
||||||
|
type: 'boolean',
|
||||||
|
initialValue: false,
|
||||||
|
}),
|
||||||
|
defineField({
|
||||||
|
name: 'order',
|
||||||
|
title: "Ordre d'affichage",
|
||||||
|
type: 'number',
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
preview: {
|
||||||
|
select: {
|
||||||
|
title: 'title',
|
||||||
|
subtitle: 'client',
|
||||||
|
media: 'heroImage',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
orderings: [
|
||||||
|
{
|
||||||
|
title: 'Par ordre',
|
||||||
|
name: 'orderAsc',
|
||||||
|
by: [{ field: 'order', direction: 'asc' }],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Par date',
|
||||||
|
name: 'dateDesc',
|
||||||
|
by: [{ field: 'date', direction: 'desc' }],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
22
sanity/schemas/siteSettings.ts
Normal file
22
sanity/schemas/siteSettings.ts
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
import { defineType, defineField } from 'sanity';
|
||||||
|
|
||||||
|
export default defineType({
|
||||||
|
name: 'siteSettings',
|
||||||
|
title: 'Paramètres du site',
|
||||||
|
type: 'document',
|
||||||
|
fields: [
|
||||||
|
defineField({ name: 'siteName', title: 'Nom du site', type: 'string' }),
|
||||||
|
defineField({ name: 'tagline', title: 'Accroche', type: 'string' }),
|
||||||
|
defineField({ name: 'description', title: 'Description SEO', type: 'text', rows: 3 }),
|
||||||
|
defineField({ name: 'email', title: 'Email de contact', type: 'string' }),
|
||||||
|
defineField({ name: 'phone', title: 'Téléphone', type: 'string' }),
|
||||||
|
defineField({ name: 'instagram', title: 'Instagram', type: 'url' }),
|
||||||
|
defineField({ name: 'linkedin', title: 'LinkedIn', type: 'url' }),
|
||||||
|
defineField({
|
||||||
|
name: 'heroImages',
|
||||||
|
title: "Images hero page d'accueil",
|
||||||
|
type: 'array',
|
||||||
|
of: [{ type: 'image', options: { hotspot: true } }],
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
});
|
||||||
108
src/components/Footer.astro
Normal file
108
src/components/Footer.astro
Normal file
@ -0,0 +1,108 @@
|
|||||||
|
---
|
||||||
|
const year = new Date().getFullYear();
|
||||||
|
---
|
||||||
|
|
||||||
|
<footer class="footer">
|
||||||
|
<div class="container">
|
||||||
|
<div class="divider"></div>
|
||||||
|
<div class="footer__inner">
|
||||||
|
<div class="footer__left">
|
||||||
|
<p class="footer__name">Aurélie Barré</p>
|
||||||
|
<p class="footer__tagline text-secondary">Design d'intérieur & Création événementielle</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer__center">
|
||||||
|
<a href="mailto:contact@aureliebarre.fr" class="footer__link">contact@aureliebarre.fr</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer__right">
|
||||||
|
<div class="footer__social">
|
||||||
|
<a href="https://instagram.com/aureliebarre" target="_blank" rel="noopener noreferrer" aria-label="Instagram" class="footer__social-link">
|
||||||
|
Instagram
|
||||||
|
</a>
|
||||||
|
<a href="https://linkedin.com/in/aureliebarre" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn" class="footer__social-link">
|
||||||
|
LinkedIn
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<p class="footer__copyright text-light">© {year}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.footer {
|
||||||
|
padding-top: var(--space-xl);
|
||||||
|
padding-bottom: var(--space-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer__inner {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-start;
|
||||||
|
padding-top: var(--space-xl);
|
||||||
|
gap: var(--space-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer__name {
|
||||||
|
font-family: var(--font-serif);
|
||||||
|
font-size: 1.1rem;
|
||||||
|
margin-bottom: var(--space-xs);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer__tagline {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer__link {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
letter-spacing: 0.02em;
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
transition: color var(--duration-fast) var(--ease-out);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer__link:hover {
|
||||||
|
color: var(--color-accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer__right {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer__social {
|
||||||
|
display: flex;
|
||||||
|
gap: var(--space-lg);
|
||||||
|
margin-bottom: var(--space-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer__social-link {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
letter-spacing: 0.06em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer__social-link:hover {
|
||||||
|
color: var(--color-accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer__copyright {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.footer__inner {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer__right {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer__social {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
257
src/components/Header.astro
Normal file
257
src/components/Header.astro
Normal file
@ -0,0 +1,257 @@
|
|||||||
|
---
|
||||||
|
const currentPath = Astro.url.pathname;
|
||||||
|
|
||||||
|
const navItems = [
|
||||||
|
{ label: 'Réalisations Pérennes', href: '/realisations-perennes' },
|
||||||
|
{ label: 'Créations Événement', href: '/creations-evenement' },
|
||||||
|
{ label: 'Processus Créatif', href: '/processus' },
|
||||||
|
];
|
||||||
|
---
|
||||||
|
|
||||||
|
<header class="header">
|
||||||
|
<div class="header__inner container">
|
||||||
|
<a href="/" class="header__logo">
|
||||||
|
<span class="header__logo-name">Aurélie Barré</span>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<nav class="header__nav" aria-label="Navigation principale">
|
||||||
|
<ul class="header__nav-list">
|
||||||
|
{navItems.map(item => (
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href={item.href}
|
||||||
|
class:list={['header__nav-link', { 'active': currentPath.startsWith(item.href) }]}
|
||||||
|
>
|
||||||
|
{item.label}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<button class="header__menu-btn" aria-label="Ouvrir le menu" aria-expanded="false">
|
||||||
|
<span class="header__menu-line"></span>
|
||||||
|
<span class="header__menu-line"></span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Mobile overlay -->
|
||||||
|
<div class="header__overlay" aria-hidden="true">
|
||||||
|
<nav class="header__overlay-nav">
|
||||||
|
{navItems.map(item => (
|
||||||
|
<a href={item.href} class="header__overlay-link">
|
||||||
|
{item.label}
|
||||||
|
</a>
|
||||||
|
))}
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const btn = document.querySelector('.header__menu-btn');
|
||||||
|
const overlay = document.querySelector('.header__overlay');
|
||||||
|
const header = document.querySelector('.header');
|
||||||
|
|
||||||
|
btn?.addEventListener('click', () => {
|
||||||
|
const isOpen = btn.getAttribute('aria-expanded') === 'true';
|
||||||
|
btn.setAttribute('aria-expanded', String(!isOpen));
|
||||||
|
overlay?.setAttribute('aria-hidden', String(isOpen));
|
||||||
|
header?.classList.toggle('menu-open');
|
||||||
|
document.body.style.overflow = isOpen ? '' : 'hidden';
|
||||||
|
});
|
||||||
|
|
||||||
|
// Close on link click
|
||||||
|
document.querySelectorAll('.header__overlay-link').forEach(link => {
|
||||||
|
link.addEventListener('click', () => {
|
||||||
|
btn?.setAttribute('aria-expanded', 'false');
|
||||||
|
overlay?.setAttribute('aria-hidden', 'true');
|
||||||
|
header?.classList.remove('menu-open');
|
||||||
|
document.body.style.overflow = '';
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Header scroll effect
|
||||||
|
let lastScroll = 0;
|
||||||
|
window.addEventListener('scroll', () => {
|
||||||
|
const scrollY = window.scrollY;
|
||||||
|
if (scrollY > 100) {
|
||||||
|
header?.classList.add('scrolled');
|
||||||
|
} else {
|
||||||
|
header?.classList.remove('scrolled');
|
||||||
|
}
|
||||||
|
lastScroll = scrollY;
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.header {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 100;
|
||||||
|
height: var(--header-height);
|
||||||
|
background-color: transparent;
|
||||||
|
transition: background-color var(--duration-normal) var(--ease-out),
|
||||||
|
box-shadow var(--duration-normal) var(--ease-out);
|
||||||
|
}
|
||||||
|
|
||||||
|
.header.scrolled {
|
||||||
|
background-color: rgba(250, 250, 248, 0.95);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
-webkit-backdrop-filter: blur(10px);
|
||||||
|
box-shadow: 0 1px 0 var(--color-border-light);
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__inner {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__logo {
|
||||||
|
text-decoration: none;
|
||||||
|
z-index: 101;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__logo-name {
|
||||||
|
font-family: var(--font-serif);
|
||||||
|
font-size: 1.4rem;
|
||||||
|
color: var(--color-text);
|
||||||
|
letter-spacing: 0.01em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__nav-list {
|
||||||
|
display: flex;
|
||||||
|
gap: var(--space-xl);
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__nav-link {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
font-weight: 400;
|
||||||
|
letter-spacing: 0.06em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
text-decoration: none;
|
||||||
|
position: relative;
|
||||||
|
padding-bottom: 2px;
|
||||||
|
transition: color var(--duration-fast) var(--ease-out);
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__nav-link::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 0;
|
||||||
|
height: 1px;
|
||||||
|
background-color: var(--color-accent);
|
||||||
|
transition: width var(--duration-normal) var(--ease-out);
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__nav-link:hover,
|
||||||
|
.header__nav-link.active {
|
||||||
|
color: var(--color-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__nav-link:hover::after,
|
||||||
|
.header__nav-link.active::after {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mobile menu button */
|
||||||
|
.header__menu-btn {
|
||||||
|
display: none;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 6px;
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 8px;
|
||||||
|
z-index: 101;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__menu-line {
|
||||||
|
display: block;
|
||||||
|
width: 24px;
|
||||||
|
height: 1.5px;
|
||||||
|
background-color: var(--color-text);
|
||||||
|
transition: transform var(--duration-normal) var(--ease-out),
|
||||||
|
opacity var(--duration-fast);
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-open .header__menu-line:first-child {
|
||||||
|
transform: translateY(3.75px) rotate(45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-open .header__menu-line:last-child {
|
||||||
|
transform: translateY(-3.75px) rotate(-45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mobile overlay */
|
||||||
|
.header__overlay {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: var(--color-bg);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
opacity: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
transition: opacity var(--duration-normal) var(--ease-out),
|
||||||
|
visibility var(--duration-normal);
|
||||||
|
z-index: 99;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-open .header__overlay {
|
||||||
|
opacity: 1;
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__overlay-nav {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--space-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__overlay-link {
|
||||||
|
font-family: var(--font-serif);
|
||||||
|
font-size: clamp(1.8rem, 5vw, 2.5rem);
|
||||||
|
color: var(--color-text);
|
||||||
|
text-decoration: none;
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(20px);
|
||||||
|
transition: opacity var(--duration-normal) var(--ease-out),
|
||||||
|
transform var(--duration-normal) var(--ease-out),
|
||||||
|
color var(--duration-fast);
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-open .header__overlay-link {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-open .header__overlay-link:nth-child(1) { transition-delay: 100ms; }
|
||||||
|
.menu-open .header__overlay-link:nth-child(2) { transition-delay: 200ms; }
|
||||||
|
.menu-open .header__overlay-link:nth-child(3) { transition-delay: 300ms; }
|
||||||
|
|
||||||
|
.header__overlay-link:hover {
|
||||||
|
color: var(--color-accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.header__nav {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__menu-btn {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
255
src/components/MasonryGallery.tsx
Normal file
255
src/components/MasonryGallery.tsx
Normal file
@ -0,0 +1,255 @@
|
|||||||
|
import { useState, useCallback, useEffect, useRef } from 'react';
|
||||||
|
import { motion, AnimatePresence } from 'motion/react';
|
||||||
|
|
||||||
|
interface GalleryImage {
|
||||||
|
src: string;
|
||||||
|
alt: string;
|
||||||
|
size?: 'small' | 'medium' | 'large';
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
images: GalleryImage[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function MasonryGallery({ images }: Props) {
|
||||||
|
const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
|
||||||
|
const [columns, setColumns] = useState(3);
|
||||||
|
const containerRef = useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
|
// Responsive columns
|
||||||
|
useEffect(() => {
|
||||||
|
const updateColumns = () => {
|
||||||
|
const width = window.innerWidth;
|
||||||
|
if (width < 640) setColumns(1);
|
||||||
|
else if (width < 1024) setColumns(2);
|
||||||
|
else setColumns(3);
|
||||||
|
};
|
||||||
|
updateColumns();
|
||||||
|
window.addEventListener('resize', updateColumns);
|
||||||
|
return () => window.removeEventListener('resize', updateColumns);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// Distribute images across columns
|
||||||
|
const getColumns = useCallback(() => {
|
||||||
|
const cols: GalleryImage[][] = Array.from({ length: columns }, () => []);
|
||||||
|
images.forEach((img, i) => {
|
||||||
|
cols[i % columns].push(img);
|
||||||
|
});
|
||||||
|
return cols;
|
||||||
|
}, [images, columns]);
|
||||||
|
|
||||||
|
// Lightbox keyboard nav
|
||||||
|
useEffect(() => {
|
||||||
|
const handleKey = (e: KeyboardEvent) => {
|
||||||
|
if (selectedIndex === null) return;
|
||||||
|
if (e.key === 'Escape') setSelectedIndex(null);
|
||||||
|
if (e.key === 'ArrowRight') setSelectedIndex(prev =>
|
||||||
|
prev !== null && prev < images.length - 1 ? prev + 1 : prev
|
||||||
|
);
|
||||||
|
if (e.key === 'ArrowLeft') setSelectedIndex(prev =>
|
||||||
|
prev !== null && prev > 0 ? prev - 1 : prev
|
||||||
|
);
|
||||||
|
};
|
||||||
|
window.addEventListener('keydown', handleKey);
|
||||||
|
return () => window.removeEventListener('keydown', handleKey);
|
||||||
|
}, [selectedIndex, images.length]);
|
||||||
|
|
||||||
|
// Lock body scroll when lightbox open
|
||||||
|
useEffect(() => {
|
||||||
|
document.body.style.overflow = selectedIndex !== null ? 'hidden' : '';
|
||||||
|
return () => { document.body.style.overflow = ''; };
|
||||||
|
}, [selectedIndex]);
|
||||||
|
|
||||||
|
const flatIndex = (colIdx: number, rowIdx: number) => {
|
||||||
|
return rowIdx * columns + colIdx;
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div ref={containerRef} style={gridContainerStyle(columns)}>
|
||||||
|
{getColumns().map((col, colIdx) => (
|
||||||
|
<div key={colIdx} style={columnStyle}>
|
||||||
|
{col.map((img, rowIdx) => {
|
||||||
|
const idx = flatIndex(colIdx, rowIdx);
|
||||||
|
return (
|
||||||
|
<motion.div
|
||||||
|
key={idx}
|
||||||
|
initial={{ opacity: 0, y: 30 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ delay: idx * 0.06, duration: 0.6, ease: [0.16, 1, 0.3, 1] }}
|
||||||
|
style={imageWrapperStyle}
|
||||||
|
onClick={() => setSelectedIndex(idx)}
|
||||||
|
role="button"
|
||||||
|
tabIndex={0}
|
||||||
|
aria-label={`Voir ${img.alt}`}
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src={img.src}
|
||||||
|
alt={img.alt}
|
||||||
|
loading="lazy"
|
||||||
|
decoding="async"
|
||||||
|
style={imageStyle}
|
||||||
|
onMouseEnter={(e) => {
|
||||||
|
(e.target as HTMLImageElement).style.transform = 'scale(1.03)';
|
||||||
|
}}
|
||||||
|
onMouseLeave={(e) => {
|
||||||
|
(e.target as HTMLImageElement).style.transform = 'scale(1)';
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</motion.div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Lightbox */}
|
||||||
|
<AnimatePresence>
|
||||||
|
{selectedIndex !== null && (
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
exit={{ opacity: 0 }}
|
||||||
|
transition={{ duration: 0.3 }}
|
||||||
|
style={lightboxStyle}
|
||||||
|
onClick={() => setSelectedIndex(null)}
|
||||||
|
>
|
||||||
|
{/* Close button */}
|
||||||
|
<button
|
||||||
|
style={closeButtonStyle}
|
||||||
|
onClick={() => setSelectedIndex(null)}
|
||||||
|
aria-label="Fermer"
|
||||||
|
>
|
||||||
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="1.5">
|
||||||
|
<line x1="4" y1="4" x2="20" y2="20" />
|
||||||
|
<line x1="20" y1="4" x2="4" y2="20" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* Counter */}
|
||||||
|
<div style={counterStyle}>
|
||||||
|
{selectedIndex + 1} / {images.length}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Navigation arrows */}
|
||||||
|
{selectedIndex > 0 && (
|
||||||
|
<button
|
||||||
|
style={{ ...arrowStyle, left: '2rem' }}
|
||||||
|
onClick={(e) => { e.stopPropagation(); setSelectedIndex(selectedIndex - 1); }}
|
||||||
|
aria-label="Photo précédente"
|
||||||
|
>
|
||||||
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="1.5">
|
||||||
|
<polyline points="15,4 7,12 15,20" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
{selectedIndex < images.length - 1 && (
|
||||||
|
<button
|
||||||
|
style={{ ...arrowStyle, right: '2rem' }}
|
||||||
|
onClick={(e) => { e.stopPropagation(); setSelectedIndex(selectedIndex + 1); }}
|
||||||
|
aria-label="Photo suivante"
|
||||||
|
>
|
||||||
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="1.5">
|
||||||
|
<polyline points="9,4 17,12 9,20" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Image */}
|
||||||
|
<motion.img
|
||||||
|
key={selectedIndex}
|
||||||
|
src={images[selectedIndex].src}
|
||||||
|
alt={images[selectedIndex].alt}
|
||||||
|
initial={{ opacity: 0, scale: 0.95 }}
|
||||||
|
animate={{ opacity: 1, scale: 1 }}
|
||||||
|
exit={{ opacity: 0, scale: 0.95 }}
|
||||||
|
transition={{ duration: 0.3, ease: [0.16, 1, 0.3, 1] }}
|
||||||
|
style={lightboxImageStyle}
|
||||||
|
onClick={(e) => e.stopPropagation()}
|
||||||
|
/>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</AnimatePresence>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- Inline Styles ---
|
||||||
|
const gridContainerStyle = (cols: number): React.CSSProperties => ({
|
||||||
|
display: 'grid',
|
||||||
|
gridTemplateColumns: `repeat(${cols}, 1fr)`,
|
||||||
|
gap: '1rem',
|
||||||
|
});
|
||||||
|
|
||||||
|
const columnStyle: React.CSSProperties = {
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
gap: '1rem',
|
||||||
|
};
|
||||||
|
|
||||||
|
const imageWrapperStyle: React.CSSProperties = {
|
||||||
|
overflow: 'hidden',
|
||||||
|
cursor: 'pointer',
|
||||||
|
borderRadius: '2px',
|
||||||
|
backgroundColor: '#F3F1ED',
|
||||||
|
};
|
||||||
|
|
||||||
|
const imageStyle: React.CSSProperties = {
|
||||||
|
width: '100%',
|
||||||
|
height: 'auto',
|
||||||
|
display: 'block',
|
||||||
|
transition: 'transform 0.6s cubic-bezier(0.16, 1, 0.3, 1)',
|
||||||
|
};
|
||||||
|
|
||||||
|
const lightboxStyle: React.CSSProperties = {
|
||||||
|
position: 'fixed',
|
||||||
|
inset: 0,
|
||||||
|
zIndex: 200,
|
||||||
|
backgroundColor: 'rgba(0, 0, 0, 0.92)',
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
cursor: 'pointer',
|
||||||
|
};
|
||||||
|
|
||||||
|
const lightboxImageStyle: React.CSSProperties = {
|
||||||
|
maxWidth: '90vw',
|
||||||
|
maxHeight: '90vh',
|
||||||
|
objectFit: 'contain',
|
||||||
|
cursor: 'default',
|
||||||
|
};
|
||||||
|
|
||||||
|
const closeButtonStyle: React.CSSProperties = {
|
||||||
|
position: 'absolute',
|
||||||
|
top: '2rem',
|
||||||
|
right: '2rem',
|
||||||
|
background: 'none',
|
||||||
|
border: 'none',
|
||||||
|
cursor: 'pointer',
|
||||||
|
padding: '8px',
|
||||||
|
zIndex: 201,
|
||||||
|
};
|
||||||
|
|
||||||
|
const counterStyle: React.CSSProperties = {
|
||||||
|
position: 'absolute',
|
||||||
|
top: '2rem',
|
||||||
|
left: '50%',
|
||||||
|
transform: 'translateX(-50%)',
|
||||||
|
color: 'rgba(255,255,255,0.6)',
|
||||||
|
fontSize: '0.85rem',
|
||||||
|
letterSpacing: '0.08em',
|
||||||
|
zIndex: 201,
|
||||||
|
};
|
||||||
|
|
||||||
|
const arrowStyle: React.CSSProperties = {
|
||||||
|
position: 'absolute',
|
||||||
|
top: '50%',
|
||||||
|
transform: 'translateY(-50%)',
|
||||||
|
background: 'none',
|
||||||
|
border: 'none',
|
||||||
|
cursor: 'pointer',
|
||||||
|
padding: '12px',
|
||||||
|
zIndex: 201,
|
||||||
|
opacity: 0.7,
|
||||||
|
transition: 'opacity 0.2s',
|
||||||
|
};
|
||||||
238
src/components/ProcessTimeline.tsx
Normal file
238
src/components/ProcessTimeline.tsx
Normal file
@ -0,0 +1,238 @@
|
|||||||
|
import { useEffect, useRef, useState } from 'react';
|
||||||
|
import { motion, useInView } from 'motion/react';
|
||||||
|
|
||||||
|
interface ProcessStep {
|
||||||
|
title: string;
|
||||||
|
stepNumber: number;
|
||||||
|
subtitle: string;
|
||||||
|
description: string;
|
||||||
|
duration?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
steps: ProcessStep[];
|
||||||
|
}
|
||||||
|
|
||||||
|
function StepCard({ step, index }: { step: ProcessStep; index: number }) {
|
||||||
|
const ref = useRef<HTMLDivElement>(null);
|
||||||
|
const isInView = useInView(ref, { once: true, margin: '-100px 0px' });
|
||||||
|
|
||||||
|
return (
|
||||||
|
<motion.div
|
||||||
|
ref={ref}
|
||||||
|
initial={{ opacity: 0, y: 60 }}
|
||||||
|
animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 60 }}
|
||||||
|
transition={{ duration: 0.8, delay: 0.1, ease: [0.16, 1, 0.3, 1] }}
|
||||||
|
style={stepStyle}
|
||||||
|
>
|
||||||
|
<div style={stepLeftStyle}>
|
||||||
|
<div style={stepNumberContainerStyle}>
|
||||||
|
<motion.span
|
||||||
|
initial={{ scale: 0 }}
|
||||||
|
animate={isInView ? { scale: 1 } : { scale: 0 }}
|
||||||
|
transition={{ delay: 0.2, duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
|
||||||
|
style={stepNumberStyle}
|
||||||
|
>
|
||||||
|
{String(step.stepNumber).padStart(2, '0')}
|
||||||
|
</motion.span>
|
||||||
|
{index < 4 && <div style={stepLineStyle} />}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style={stepContentStyle}>
|
||||||
|
<span style={stepSubtitleStyle}>{step.subtitle}</span>
|
||||||
|
<h3 style={stepTitleStyle}>{step.title}</h3>
|
||||||
|
<p style={stepDescStyle}>{step.description}</p>
|
||||||
|
{step.duration && (
|
||||||
|
<span style={stepDurationStyle}>{step.duration}</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function ProcessTimeline({ steps }: Props) {
|
||||||
|
const [activeStep, setActiveStep] = useState(0);
|
||||||
|
const containerRef = useRef<HTMLDivElement>(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 (
|
||||||
|
<div style={containerStyle}>
|
||||||
|
{/* Progress indicator */}
|
||||||
|
<div style={progressBarContainerStyle}>
|
||||||
|
<div style={progressTrackStyle}>
|
||||||
|
<motion.div
|
||||||
|
style={progressFillStyle}
|
||||||
|
animate={{ height: `${((activeStep + 1) / steps.length) * 100}%` }}
|
||||||
|
transition={{ duration: 0.6, ease: [0.16, 1, 0.3, 1] }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{steps.map((_, i) => (
|
||||||
|
<motion.div
|
||||||
|
key={i}
|
||||||
|
style={{
|
||||||
|
...progressDotStyle,
|
||||||
|
top: `${(i / (steps.length - 1)) * 100}%`,
|
||||||
|
}}
|
||||||
|
animate={{
|
||||||
|
backgroundColor: i <= activeStep ? '#C4A77D' : '#E8E6E1',
|
||||||
|
scale: i === activeStep ? 1.3 : 1,
|
||||||
|
}}
|
||||||
|
transition={{ duration: 0.3 }}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Steps */}
|
||||||
|
<div ref={containerRef} style={stepsContainerStyle}>
|
||||||
|
{steps.map((step, index) => (
|
||||||
|
<StepCard key={step.stepNumber} step={step} index={index} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- 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',
|
||||||
|
};
|
||||||
123
src/components/ProjectCard.astro
Normal file
123
src/components/ProjectCard.astro
Normal file
@ -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`;
|
||||||
|
---
|
||||||
|
|
||||||
|
<a href={href} class="project-card reveal" style={`transition-delay: ${delay}`}>
|
||||||
|
<div class="project-card__image img-hover-zoom">
|
||||||
|
<img
|
||||||
|
src={heroImage}
|
||||||
|
alt={title}
|
||||||
|
loading="lazy"
|
||||||
|
decoding="async"
|
||||||
|
/>
|
||||||
|
<div class="project-card__overlay">
|
||||||
|
<span class="project-card__cta">Découvrir</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="project-card__info">
|
||||||
|
<span class="project-card__client text-light">{client}</span>
|
||||||
|
<h3 class="project-card__title">{title}</h3>
|
||||||
|
{tags.length > 0 && (
|
||||||
|
<div class="project-card__tags">
|
||||||
|
{tags.slice(0, 3).map(tag => (
|
||||||
|
<span class="project-card__tag">{tag}</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.project-card {
|
||||||
|
display: block;
|
||||||
|
text-decoration: none;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-card__image {
|
||||||
|
position: relative;
|
||||||
|
aspect-ratio: 4 / 3;
|
||||||
|
background-color: var(--color-bg-alt);
|
||||||
|
margin-bottom: var(--space-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-card__image img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-card__overlay {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background: rgba(26, 26, 26, 0);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
transition: background var(--duration-normal) var(--ease-out);
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-card__cta {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
letter-spacing: 0.12em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: white;
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(10px);
|
||||||
|
transition: opacity var(--duration-normal) var(--ease-out),
|
||||||
|
transform var(--duration-normal) var(--ease-out);
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-card:hover .project-card__overlay {
|
||||||
|
background: rgba(26, 26, 26, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-card:hover .project-card__cta {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-card__client {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
display: block;
|
||||||
|
margin-bottom: var(--space-xs);
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-card__title {
|
||||||
|
font-family: var(--font-serif);
|
||||||
|
font-size: 1.2rem;
|
||||||
|
font-weight: 400;
|
||||||
|
margin-bottom: var(--space-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-card__tags {
|
||||||
|
display: flex;
|
||||||
|
gap: var(--space-sm);
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-card__tag {
|
||||||
|
font-size: 0.7rem;
|
||||||
|
letter-spacing: 0.04em;
|
||||||
|
color: var(--color-text-light);
|
||||||
|
padding: 2px 8px;
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
10
src/env.d.ts
vendored
Normal file
10
src/env.d.ts
vendored
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
/// <reference types="astro/client" />
|
||||||
|
|
||||||
|
interface ImportMetaEnv {
|
||||||
|
readonly PUBLIC_SANITY_PROJECT_ID: string;
|
||||||
|
readonly PUBLIC_SANITY_DATASET: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ImportMeta {
|
||||||
|
readonly env: ImportMetaEnv;
|
||||||
|
}
|
||||||
79
src/layouts/BaseLayout.astro
Normal file
79
src/layouts/BaseLayout.astro
Normal file
@ -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);
|
||||||
|
---
|
||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<meta name="description" content={description} />
|
||||||
|
<link rel="canonical" href={canonicalURL} />
|
||||||
|
|
||||||
|
<!-- Open Graph -->
|
||||||
|
<meta property="og:title" content={title} />
|
||||||
|
<meta property="og:description" content={description} />
|
||||||
|
<meta property="og:image" content={image} />
|
||||||
|
<meta property="og:url" content={canonicalURL} />
|
||||||
|
<meta property="og:type" content="website" />
|
||||||
|
|
||||||
|
<!-- Fonts: DM Serif Display + Inter -->
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Inter:wght@300;400;500&display=swap" rel="stylesheet" />
|
||||||
|
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
|
<title>{title}</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<Header />
|
||||||
|
|
||||||
|
<main class="page-enter">
|
||||||
|
<slot />
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<Footer />
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Intersection Observer for scroll reveal animations
|
||||||
|
const observerCallback: IntersectionObserverCallback = (entries) => {
|
||||||
|
entries.forEach((entry) => {
|
||||||
|
if (entry.isIntersecting) {
|
||||||
|
entry.target.classList.add('visible');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const observer = new IntersectionObserver(observerCallback, {
|
||||||
|
threshold: 0.1,
|
||||||
|
rootMargin: '0px 0px -50px 0px'
|
||||||
|
});
|
||||||
|
|
||||||
|
document.querySelectorAll('.reveal').forEach((el) => {
|
||||||
|
observer.observe(el);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
main {
|
||||||
|
min-height: calc(100vh - var(--header-height));
|
||||||
|
}
|
||||||
|
</style>
|
||||||
346
src/lib/mock-data.ts
Normal file
346
src/lib/mock-data.ts
Normal file
@ -0,0 +1,346 @@
|
|||||||
|
// Mock data for development without Sanity connection
|
||||||
|
// Will be replaced by Sanity queries in production
|
||||||
|
|
||||||
|
export interface MockProject {
|
||||||
|
_id: string;
|
||||||
|
title: string;
|
||||||
|
slug: { current: string };
|
||||||
|
category: 'perenne' | 'event';
|
||||||
|
client: string;
|
||||||
|
date: string;
|
||||||
|
location?: string;
|
||||||
|
description: string;
|
||||||
|
heroImage: string;
|
||||||
|
gallery: Array<{ src: string; alt: string; size: 'small' | 'medium' | 'large' }>;
|
||||||
|
tags: string[];
|
||||||
|
featured: boolean;
|
||||||
|
order: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Helper: generate gallery from numbered files
|
||||||
|
function makeGallery(basePath: string, count: number, ext: string, title: string): MockProject['gallery'] {
|
||||||
|
const sizes: Array<'small' | 'medium' | 'large'> = ['large', 'medium', 'small', 'medium', 'large', 'small', 'medium', 'large', 'small', 'medium', 'large', 'medium'];
|
||||||
|
return Array.from({ length: count }, (_, i) => ({
|
||||||
|
src: `${basePath}/${String(i + 1).padStart(2, '0')}.${ext}`,
|
||||||
|
alt: `${title} — Photo ${i + 1}`,
|
||||||
|
size: sizes[i % sizes.length],
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
export const mockProjects: MockProject[] = [
|
||||||
|
// --- EVENTS ---
|
||||||
|
{
|
||||||
|
_id: '1',
|
||||||
|
title: 'Inside Moët & Chandon',
|
||||||
|
slug: { current: 'moet-chandon' },
|
||||||
|
category: 'event',
|
||||||
|
client: 'Moët & Chandon',
|
||||||
|
date: '2019-06',
|
||||||
|
location: 'Paris, Champs-Élysées',
|
||||||
|
description: 'Scénographie d\'un rooftop éphémère avec vue sur l\'Arc de Triomphe pour le lancement de la collection Inside.',
|
||||||
|
heroImage: '/images/events/moet/01.jpg',
|
||||||
|
gallery: makeGallery('/images/events/moet', 12, 'jpg', 'Moët & Chandon'),
|
||||||
|
tags: ['Luxe', 'Rooftop', 'Scénographie'],
|
||||||
|
featured: true,
|
||||||
|
order: 1,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
_id: '2',
|
||||||
|
title: 'Engie — Convention',
|
||||||
|
slug: { current: 'engie' },
|
||||||
|
category: 'event',
|
||||||
|
client: 'Engie',
|
||||||
|
date: '2019-06',
|
||||||
|
location: 'Paris',
|
||||||
|
description: 'Design global et direction artistique pour la convention annuelle Engie. Création d\'univers immersifs déclinés en plusieurs espaces.',
|
||||||
|
heroImage: '/images/events/engie/01.jpg',
|
||||||
|
gallery: makeGallery('/images/events/engie', 10, 'jpg', 'Engie'),
|
||||||
|
tags: ['Corporate', 'Convention', 'Direction artistique'],
|
||||||
|
featured: false,
|
||||||
|
order: 2,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
_id: '3',
|
||||||
|
title: 'Martell — Lancement',
|
||||||
|
slug: { current: 'martell' },
|
||||||
|
category: 'event',
|
||||||
|
client: 'Martell',
|
||||||
|
date: '2019-09',
|
||||||
|
location: 'Paris',
|
||||||
|
description: 'Conception et réalisation de l\'espace de lancement pour Martell. Un mélange subtil de tradition et de modernité.',
|
||||||
|
heroImage: '/images/events/martell/01.jpg',
|
||||||
|
gallery: makeGallery('/images/events/martell', 5, 'jpg', 'Martell'),
|
||||||
|
tags: ['Luxe', 'Lancement produit', 'Spiritueux'],
|
||||||
|
featured: false,
|
||||||
|
order: 3,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
_id: '4',
|
||||||
|
title: 'AlUla — Paris & Arabie',
|
||||||
|
slug: { current: 'alula' },
|
||||||
|
category: 'event',
|
||||||
|
client: 'AlUla',
|
||||||
|
date: '2020-01',
|
||||||
|
location: 'Paris & Arabie Saoudite',
|
||||||
|
description: 'Création d\'un parcours sensoriel entre Paris et l\'Arabie Saoudite, mêlant patrimoine culturel et design contemporain.',
|
||||||
|
heroImage: '/images/events/alula/01.jpg',
|
||||||
|
gallery: makeGallery('/images/events/alula', 12, 'jpg', 'AlUla'),
|
||||||
|
tags: ['International', 'Culture', 'Immersif'],
|
||||||
|
featured: true,
|
||||||
|
order: 4,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
_id: '5',
|
||||||
|
title: 'LVMH — Métaverse',
|
||||||
|
slug: { current: 'lvmh-metaverse' },
|
||||||
|
category: 'event',
|
||||||
|
client: 'LVMH',
|
||||||
|
date: '2024-03',
|
||||||
|
location: 'Paris',
|
||||||
|
description: 'Direction artistique de l\'événement LVMH Métaverse. Une immersion entre monde physique et digital.',
|
||||||
|
heroImage: '/images/events/lvmh-metaverse/01.jpg',
|
||||||
|
gallery: makeGallery('/images/events/lvmh-metaverse', 12, 'jpg', 'LVMH Métaverse'),
|
||||||
|
tags: ['Luxe', 'Digital', 'Innovation'],
|
||||||
|
featured: true,
|
||||||
|
order: 5,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
_id: '6',
|
||||||
|
title: 'Dior — Christmas Popup',
|
||||||
|
slug: { current: 'dior-christmas' },
|
||||||
|
category: 'event',
|
||||||
|
client: 'Dior',
|
||||||
|
date: '2022-12',
|
||||||
|
location: 'Paris',
|
||||||
|
description: 'Scénographie du popup de Noël Dior. Un univers féerique mêlant bleu nuit, or et cristal.',
|
||||||
|
heroImage: '/images/events/dior/01.jpeg',
|
||||||
|
gallery: makeGallery('/images/events/dior', 12, 'jpeg', 'Dior Christmas'),
|
||||||
|
tags: ['Luxe', 'Popup', 'Noël'],
|
||||||
|
featured: true,
|
||||||
|
order: 6,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
_id: '7',
|
||||||
|
title: 'AMI — Showroom',
|
||||||
|
slug: { current: 'ami' },
|
||||||
|
category: 'event',
|
||||||
|
client: 'AMI Paris',
|
||||||
|
date: '2023-06',
|
||||||
|
location: 'Paris',
|
||||||
|
description: 'Design et aménagement du showroom AMI Paris pour la Fashion Week. Minimalisme parisien et chaleur.',
|
||||||
|
heroImage: '/images/events/ami/01.jpg',
|
||||||
|
gallery: makeGallery('/images/events/ami', 12, 'jpg', 'AMI Paris'),
|
||||||
|
tags: ['Mode', 'Showroom', 'Fashion Week'],
|
||||||
|
featured: false,
|
||||||
|
order: 7,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
_id: '8',
|
||||||
|
title: 'Aurora',
|
||||||
|
slug: { current: 'aurora' },
|
||||||
|
category: 'event',
|
||||||
|
client: 'Aurora',
|
||||||
|
date: '2023-07',
|
||||||
|
location: 'Paris',
|
||||||
|
description: 'Création d\'un espace immersif pour l\'événement Aurora. Lumières, textures et mise en scène poétique.',
|
||||||
|
heroImage: '/images/events/aurora/01.jpg',
|
||||||
|
gallery: makeGallery('/images/events/aurora', 5, 'jpg', 'Aurora'),
|
||||||
|
tags: ['Immersif', 'Lumière', 'Poétique'],
|
||||||
|
featured: false,
|
||||||
|
order: 8,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
_id: '9',
|
||||||
|
title: 'Symposium Ryad',
|
||||||
|
slug: { current: 'symposium-ryad' },
|
||||||
|
category: 'event',
|
||||||
|
client: 'Symposium',
|
||||||
|
date: '2023-11',
|
||||||
|
location: 'Riyad, Arabie Saoudite',
|
||||||
|
description: 'Direction artistique et scénographie du symposium international à Riyad.',
|
||||||
|
heroImage: '/images/events/symposium-ryad/01.jpeg',
|
||||||
|
gallery: makeGallery('/images/events/symposium-ryad', 7, 'jpeg', 'Symposium Ryad'),
|
||||||
|
tags: ['International', 'Corporate', 'Moyen-Orient'],
|
||||||
|
featured: false,
|
||||||
|
order: 9,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
_id: '10',
|
||||||
|
title: 'L\'Oréal',
|
||||||
|
slug: { current: 'loreal' },
|
||||||
|
category: 'event',
|
||||||
|
client: 'L\'Oréal',
|
||||||
|
date: '2024-04',
|
||||||
|
location: 'Paris',
|
||||||
|
description: 'Conception de l\'espace événementiel L\'Oréal. Innovation beauté et design d\'expérience.',
|
||||||
|
heroImage: '/images/events/loreal/01.jpeg',
|
||||||
|
gallery: makeGallery('/images/events/loreal', 8, 'jpeg', 'L\'Oréal'),
|
||||||
|
tags: ['Beauté', 'Innovation', 'Corporate'],
|
||||||
|
featured: false,
|
||||||
|
order: 10,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
_id: '11',
|
||||||
|
title: 'LVMH Dare',
|
||||||
|
slug: { current: 'lvmh-dare' },
|
||||||
|
category: 'event',
|
||||||
|
client: 'LVMH',
|
||||||
|
date: '2024-03',
|
||||||
|
location: 'Paris',
|
||||||
|
description: 'Direction artistique de l\'événement LVMH Dare, célébrant l\'innovation au sein du groupe.',
|
||||||
|
heroImage: '/images/events/lvmh-dare/01.jpeg',
|
||||||
|
gallery: makeGallery('/images/events/lvmh-dare', 12, 'jpeg', 'LVMH Dare'),
|
||||||
|
tags: ['Luxe', 'Innovation', 'Corporate'],
|
||||||
|
featured: false,
|
||||||
|
order: 11,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
_id: '12',
|
||||||
|
title: 'La Première',
|
||||||
|
slug: { current: 'la-premiere' },
|
||||||
|
category: 'event',
|
||||||
|
client: 'La Première',
|
||||||
|
date: '2023-05',
|
||||||
|
location: 'Paris',
|
||||||
|
description: 'Création de l\'univers visuel et spatial pour l\'événement La Première.',
|
||||||
|
heroImage: '/images/events/la-premiere/01.jpeg',
|
||||||
|
gallery: makeGallery('/images/events/la-premiere', 10, 'jpeg', 'La Première'),
|
||||||
|
tags: ['Exclusif', 'Design', 'Événementiel'],
|
||||||
|
featured: false,
|
||||||
|
order: 12,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
_id: '13',
|
||||||
|
title: 'Ministry',
|
||||||
|
slug: { current: 'ministry' },
|
||||||
|
category: 'event',
|
||||||
|
client: 'Ministry',
|
||||||
|
date: '2022-03',
|
||||||
|
location: 'Paris',
|
||||||
|
description: 'Aménagement et design d\'espace pour Ministry.',
|
||||||
|
heroImage: '/images/events/ministry/01.jpg',
|
||||||
|
gallery: makeGallery('/images/events/ministry', 4, 'jpg', 'Ministry'),
|
||||||
|
tags: ['Design', 'Espace', 'Événementiel'],
|
||||||
|
featured: false,
|
||||||
|
order: 13,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
_id: '14',
|
||||||
|
title: 'LVMH Digital',
|
||||||
|
slug: { current: 'lvmh-digital' },
|
||||||
|
category: 'event',
|
||||||
|
client: 'LVMH',
|
||||||
|
date: '2020-06',
|
||||||
|
location: 'Paris',
|
||||||
|
description: 'Conception de l\'événement LVMH Digital. Transition numérique et design d\'expérience.',
|
||||||
|
heroImage: '/images/events/lvmh-digital/01.jpeg',
|
||||||
|
gallery: makeGallery('/images/events/lvmh-digital', 12, 'jpeg', 'LVMH Digital'),
|
||||||
|
tags: ['Luxe', 'Digital', 'Corporate'],
|
||||||
|
featured: false,
|
||||||
|
order: 14,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
_id: '15',
|
||||||
|
title: 'Veolia',
|
||||||
|
slug: { current: 'veolia' },
|
||||||
|
category: 'event',
|
||||||
|
client: 'Veolia',
|
||||||
|
date: '2025-04',
|
||||||
|
location: 'Paris',
|
||||||
|
description: 'Design événementiel pour Veolia. Un espace éco-responsable et innovant.',
|
||||||
|
heroImage: '/images/events/veolia/01.jpeg',
|
||||||
|
gallery: makeGallery('/images/events/veolia', 6, 'jpeg', 'Veolia'),
|
||||||
|
tags: ['RSE', 'Corporate', 'Innovation'],
|
||||||
|
featured: false,
|
||||||
|
order: 15,
|
||||||
|
},
|
||||||
|
// --- PÉRENNES ---
|
||||||
|
{
|
||||||
|
_id: '18',
|
||||||
|
title: 'Cisco — Siège social',
|
||||||
|
slug: { current: 'cisco-siege' },
|
||||||
|
category: 'perenne',
|
||||||
|
client: 'Cisco',
|
||||||
|
date: '2023-10',
|
||||||
|
location: 'Paris',
|
||||||
|
description: 'Aménagement du showroom et des espaces de réception du siège Cisco France. Design contemporain et fonctionnel.',
|
||||||
|
heroImage: '/images/perennes/cisco/01.jpeg',
|
||||||
|
gallery: makeGallery('/images/perennes/cisco', 7, 'jpeg', 'Cisco Siège'),
|
||||||
|
tags: ['Corporate', 'Showroom', 'Bureaux'],
|
||||||
|
featured: true,
|
||||||
|
order: 1,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
_id: '19',
|
||||||
|
title: 'Devoteam — Bureaux',
|
||||||
|
slug: { current: 'devoteam' },
|
||||||
|
category: 'perenne',
|
||||||
|
client: 'Devoteam',
|
||||||
|
date: '2019-05',
|
||||||
|
location: 'Paris',
|
||||||
|
description: 'Réaménagement des espaces de travail Devoteam. Alliance entre collaboration et bien-être au travail.',
|
||||||
|
heroImage: '/images/perennes/devoteam/01.jpg',
|
||||||
|
gallery: makeGallery('/images/perennes/devoteam', 8, 'jpg', 'Devoteam'),
|
||||||
|
tags: ['Corporate', 'Bureaux', 'Workspace'],
|
||||||
|
featured: true,
|
||||||
|
order: 2,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export const mockProcessSteps = [
|
||||||
|
{
|
||||||
|
_id: 'p1',
|
||||||
|
title: 'Prise de contact',
|
||||||
|
stepNumber: 1,
|
||||||
|
subtitle: 'Écoute & Compréhension',
|
||||||
|
description: 'Première rencontre pour comprendre votre univers, vos envies et vos contraintes. Un échange libre autour d\'un café pour poser les bases d\'une collaboration sur mesure.',
|
||||||
|
duration: '1 à 2 semaines',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
_id: 'p2',
|
||||||
|
title: 'Conception & Moodboard',
|
||||||
|
stepNumber: 2,
|
||||||
|
subtitle: 'Recherche & Inspiration',
|
||||||
|
description: 'Création de planches d\'inspiration, palettes de couleurs et premiers croquis. Une phase de recherche créative pour traduire vos envies en un univers visuel cohérent.',
|
||||||
|
duration: '2 à 3 semaines',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
_id: 'p3',
|
||||||
|
title: 'Sélection & Sourcing',
|
||||||
|
stepNumber: 3,
|
||||||
|
subtitle: 'Mobilier, Matériaux & Peintures',
|
||||||
|
description: 'Curation minutieuse de chaque élément : mobilier, tissus, matériaux, luminaires, peintures. Chaque pièce est choisie pour son caractère, sa qualité et sa cohérence avec l\'ensemble.',
|
||||||
|
duration: '2 à 4 semaines',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
_id: 'p4',
|
||||||
|
title: 'Réalisation',
|
||||||
|
stepNumber: 4,
|
||||||
|
subtitle: 'De la théorie à la pratique',
|
||||||
|
description: 'Coordination des artisans et prestataires, suivi de chantier, gestion des imprévus. Une présence terrain pour garantir que chaque détail respecte la vision initiale.',
|
||||||
|
duration: '4 à 12 semaines',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
_id: 'p5',
|
||||||
|
title: 'Livraison & Retour',
|
||||||
|
stepNumber: 5,
|
||||||
|
subtitle: 'Le résultat & l\'expérience',
|
||||||
|
description: 'Livraison clé en main, shooting photo du résultat final, et retour d\'expérience avec vous. Parce qu\'un projet réussi, c\'est avant tout un client qui se sent chez lui.',
|
||||||
|
duration: 'Le jour J',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export function getMockProjects(category?: 'perenne' | 'event'): MockProject[] {
|
||||||
|
if (category) {
|
||||||
|
return mockProjects.filter(p => p.category === category);
|
||||||
|
}
|
||||||
|
return mockProjects;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getMockFeaturedProjects(): MockProject[] {
|
||||||
|
return mockProjects.filter(p => p.featured);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getMockProjectBySlug(slug: string): MockProject | undefined {
|
||||||
|
return mockProjects.find(p => p.slug.current === slug);
|
||||||
|
}
|
||||||
88
src/lib/sanity.ts
Normal file
88
src/lib/sanity.ts
Normal file
@ -0,0 +1,88 @@
|
|||||||
|
import { createClient } from '@sanity/client';
|
||||||
|
import imageUrlBuilder from '@sanity/image-url';
|
||||||
|
import type { SanityImageSource } from '@sanity/image-url/lib/types/types';
|
||||||
|
|
||||||
|
export const sanityClient = createClient({
|
||||||
|
projectId: import.meta.env.PUBLIC_SANITY_PROJECT_ID || 'your-project-id',
|
||||||
|
dataset: import.meta.env.PUBLIC_SANITY_DATASET || 'production',
|
||||||
|
apiVersion: '2024-01-01',
|
||||||
|
useCdn: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
const builder = imageUrlBuilder(sanityClient);
|
||||||
|
|
||||||
|
export function urlFor(source: SanityImageSource) {
|
||||||
|
return builder.image(source);
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- Types ---
|
||||||
|
export interface Project {
|
||||||
|
_id: string;
|
||||||
|
title: string;
|
||||||
|
slug: { current: string };
|
||||||
|
category: 'perenne' | 'event';
|
||||||
|
client: string;
|
||||||
|
date: string;
|
||||||
|
location?: string;
|
||||||
|
description: string;
|
||||||
|
heroImage: SanityImageSource & { alt?: string };
|
||||||
|
gallery: Array<SanityImageSource & {
|
||||||
|
alt?: string;
|
||||||
|
size?: 'small' | 'medium' | 'large';
|
||||||
|
}>;
|
||||||
|
tags?: string[];
|
||||||
|
featured?: boolean;
|
||||||
|
order?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ProcessStep {
|
||||||
|
_id: string;
|
||||||
|
title: string;
|
||||||
|
stepNumber: number;
|
||||||
|
subtitle: string;
|
||||||
|
description: any; // Block content
|
||||||
|
icon?: SanityImageSource;
|
||||||
|
gallery?: Array<SanityImageSource & { alt?: string; caption?: string }>;
|
||||||
|
duration?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- Queries ---
|
||||||
|
export async function getProjects(category?: 'perenne' | 'event'): Promise<Project[]> {
|
||||||
|
const filter = category
|
||||||
|
? `*[_type == "project" && category == "${category}"]`
|
||||||
|
: `*[_type == "project"]`;
|
||||||
|
|
||||||
|
return sanityClient.fetch(`${filter} | order(order asc, date desc) {
|
||||||
|
_id, title, slug, category, client, date, location, description,
|
||||||
|
heroImage { ..., alt },
|
||||||
|
gallery[] { ..., alt, size },
|
||||||
|
tags, featured, order
|
||||||
|
}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function getProjectBySlug(slug: string): Promise<Project | null> {
|
||||||
|
return sanityClient.fetch(
|
||||||
|
`*[_type == "project" && slug.current == $slug][0] {
|
||||||
|
_id, title, slug, category, client, date, location, description,
|
||||||
|
heroImage { ..., alt },
|
||||||
|
gallery[] { ..., alt, size },
|
||||||
|
tags, featured, order
|
||||||
|
}`,
|
||||||
|
{ slug }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function getProcessSteps(): Promise<ProcessStep[]> {
|
||||||
|
return sanityClient.fetch(`*[_type == "processStep"] | order(stepNumber asc) {
|
||||||
|
_id, title, stepNumber, subtitle, description, icon, duration,
|
||||||
|
gallery[] { ..., alt, caption }
|
||||||
|
}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function getFeaturedProjects(): Promise<Project[]> {
|
||||||
|
return sanityClient.fetch(`*[_type == "project" && featured == true] | order(order asc) {
|
||||||
|
_id, title, slug, category, client, date,
|
||||||
|
heroImage { ..., alt },
|
||||||
|
description, tags
|
||||||
|
}`);
|
||||||
|
}
|
||||||
234
src/pages/creations-evenement/[slug].astro
Normal file
234
src/pages/creations-evenement/[slug].astro
Normal file
@ -0,0 +1,234 @@
|
|||||||
|
---
|
||||||
|
import BaseLayout from '../../layouts/BaseLayout.astro';
|
||||||
|
import MasonryGallery from '../../components/MasonryGallery.tsx';
|
||||||
|
import { getMockProjects, getMockProjectBySlug } from '../../lib/mock-data';
|
||||||
|
|
||||||
|
export function getStaticPaths() {
|
||||||
|
const projects = getMockProjects('event');
|
||||||
|
return projects.map(p => ({ params: { slug: p.slug.current } }));
|
||||||
|
}
|
||||||
|
|
||||||
|
const { slug } = Astro.params;
|
||||||
|
const project = getMockProjectBySlug(slug!);
|
||||||
|
|
||||||
|
if (!project) {
|
||||||
|
return Astro.redirect('/creations-evenement');
|
||||||
|
}
|
||||||
|
|
||||||
|
const dateFormatted = new Date(project.date).toLocaleDateString('fr-FR', {
|
||||||
|
year: 'numeric',
|
||||||
|
month: 'long',
|
||||||
|
});
|
||||||
|
---
|
||||||
|
|
||||||
|
<BaseLayout title={`${project.title} — Aurélie Barré`} description={project.description}>
|
||||||
|
<!-- Hero Image -->
|
||||||
|
<section class="project-hero">
|
||||||
|
<div class="project-hero__image">
|
||||||
|
<img src={project.heroImage} alt={project.title} />
|
||||||
|
<div class="project-hero__overlay"></div>
|
||||||
|
</div>
|
||||||
|
<div class="project-hero__content container">
|
||||||
|
<span class="project-hero__client">{project.client}</span>
|
||||||
|
<h1>{project.title}</h1>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Project Info -->
|
||||||
|
<section class="section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="project-meta reveal">
|
||||||
|
<div class="project-meta__item">
|
||||||
|
<span class="project-meta__label">Client</span>
|
||||||
|
<span class="project-meta__value">{project.client}</span>
|
||||||
|
</div>
|
||||||
|
<div class="project-meta__item">
|
||||||
|
<span class="project-meta__label">Date</span>
|
||||||
|
<span class="project-meta__value">{dateFormatted}</span>
|
||||||
|
</div>
|
||||||
|
{project.location && (
|
||||||
|
<div class="project-meta__item">
|
||||||
|
<span class="project-meta__label">Lieu</span>
|
||||||
|
<span class="project-meta__value">{project.location}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div class="project-meta__item">
|
||||||
|
<span class="project-meta__label">Type</span>
|
||||||
|
<span class="project-meta__value">Création événementielle</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="project-description reveal">
|
||||||
|
<p>{project.description}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{project.tags && project.tags.length > 0 && (
|
||||||
|
<div class="project-tags reveal">
|
||||||
|
{project.tags.map(tag => (
|
||||||
|
<span class="project-tag">{tag}</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Gallery (Masonry) -->
|
||||||
|
{project.gallery && project.gallery.length > 0 && (
|
||||||
|
<section class="section" style="background-color: var(--color-bg-alt);">
|
||||||
|
<div class="container">
|
||||||
|
<MasonryGallery
|
||||||
|
client:visible
|
||||||
|
images={project.gallery.map(img => ({
|
||||||
|
src: img.src,
|
||||||
|
alt: img.alt,
|
||||||
|
size: img.size,
|
||||||
|
}))}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<!-- Back link -->
|
||||||
|
<section class="section">
|
||||||
|
<div class="container">
|
||||||
|
<a href="/creations-evenement" class="back-link">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" style="margin-right: 8px;">
|
||||||
|
<path d="M13 8H3M3 8L7 4M3 8L7 12" stroke="currentColor" stroke-width="1.2"/>
|
||||||
|
</svg>
|
||||||
|
Retour aux créations événement
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</BaseLayout>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* Hero */
|
||||||
|
.project-hero {
|
||||||
|
position: relative;
|
||||||
|
height: 70vh;
|
||||||
|
min-height: 500px;
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-hero__image {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-hero__image img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-hero__overlay {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background: linear-gradient(
|
||||||
|
to top,
|
||||||
|
rgba(0, 0, 0, 0.5) 0%,
|
||||||
|
rgba(0, 0, 0, 0.1) 50%,
|
||||||
|
rgba(0, 0, 0, 0) 100%
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-hero__content {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
padding-bottom: var(--space-2xl);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-hero__client {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
letter-spacing: 0.12em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
opacity: 0.7;
|
||||||
|
display: block;
|
||||||
|
margin-bottom: var(--space-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-hero__content h1 {
|
||||||
|
color: white;
|
||||||
|
font-size: clamp(2rem, 5vw, 3.5rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Meta */
|
||||||
|
.project-meta {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
gap: var(--space-lg);
|
||||||
|
padding-bottom: var(--space-xl);
|
||||||
|
border-bottom: 1px solid var(--color-border);
|
||||||
|
margin-bottom: var(--space-xl);
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-meta__label {
|
||||||
|
font-size: 0.7rem;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--color-text-light);
|
||||||
|
display: block;
|
||||||
|
margin-bottom: var(--space-xs);
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-meta__value {
|
||||||
|
font-size: 0.95rem;
|
||||||
|
color: var(--color-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Description */
|
||||||
|
.project-description {
|
||||||
|
margin-bottom: var(--space-xl);
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-description p {
|
||||||
|
font-size: 1.15rem;
|
||||||
|
line-height: 1.8;
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
max-width: 700px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Tags */
|
||||||
|
.project-tags {
|
||||||
|
display: flex;
|
||||||
|
gap: var(--space-sm);
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-tag {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
letter-spacing: 0.04em;
|
||||||
|
color: var(--color-text-light);
|
||||||
|
padding: 4px 12px;
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Back link */
|
||||||
|
.back-link {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
letter-spacing: 0.04em;
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
text-decoration: none;
|
||||||
|
transition: color var(--duration-fast);
|
||||||
|
}
|
||||||
|
|
||||||
|
.back-link:hover {
|
||||||
|
color: var(--color-accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.project-meta {
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-hero {
|
||||||
|
height: 50vh;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
81
src/pages/creations-evenement/index.astro
Normal file
81
src/pages/creations-evenement/index.astro
Normal file
@ -0,0 +1,81 @@
|
|||||||
|
---
|
||||||
|
import BaseLayout from '../../layouts/BaseLayout.astro';
|
||||||
|
import ProjectCard from '../../components/ProjectCard.astro';
|
||||||
|
import { getMockProjects } from '../../lib/mock-data';
|
||||||
|
|
||||||
|
const projects = getMockProjects('event');
|
||||||
|
---
|
||||||
|
|
||||||
|
<BaseLayout title="Créations Événement — Aurélie Barré" description="Découvrez les créations événementielles d'Aurélie Barré : scénographies, pop-ups et événements pour les plus grandes maisons.">
|
||||||
|
<section class="page-hero">
|
||||||
|
<div class="container">
|
||||||
|
<span class="page-hero__label">Portfolio</span>
|
||||||
|
<h1>Créations<br /><em>Événement</em></h1>
|
||||||
|
<p class="page-hero__desc text-secondary">
|
||||||
|
Scénographies éphémères, pop-ups, lancements, conventions —
|
||||||
|
chaque événement est une expérience unique conçue sur mesure.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="projects-grid">
|
||||||
|
{projects.map((project, index) => (
|
||||||
|
<ProjectCard
|
||||||
|
title={project.title}
|
||||||
|
client={project.client}
|
||||||
|
slug={project.slug.current}
|
||||||
|
category={project.category}
|
||||||
|
heroImage={project.heroImage}
|
||||||
|
description={project.description}
|
||||||
|
tags={project.tags}
|
||||||
|
index={index}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</BaseLayout>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.page-hero {
|
||||||
|
padding-top: calc(var(--header-height) + var(--space-3xl));
|
||||||
|
padding-bottom: var(--space-xl);
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-hero__label {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
letter-spacing: 0.12em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--color-text-light);
|
||||||
|
display: block;
|
||||||
|
margin-bottom: var(--space-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-hero h1 {
|
||||||
|
margin-bottom: var(--space-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-hero h1 em {
|
||||||
|
color: var(--color-accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-hero__desc {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
line-height: 1.8;
|
||||||
|
max-width: 600px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.projects-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
gap: var(--space-xl) var(--space-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.projects-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
249
src/pages/index.astro
Normal file
249
src/pages/index.astro
Normal file
@ -0,0 +1,249 @@
|
|||||||
|
---
|
||||||
|
import BaseLayout from '../layouts/BaseLayout.astro';
|
||||||
|
import ProjectCard from '../components/ProjectCard.astro';
|
||||||
|
import { getMockFeaturedProjects } from '../lib/mock-data';
|
||||||
|
|
||||||
|
const featured = getMockFeaturedProjects();
|
||||||
|
const events = featured.filter(p => p.category === 'event');
|
||||||
|
const perennes = featured.filter(p => p.category === 'perenne');
|
||||||
|
---
|
||||||
|
|
||||||
|
<BaseLayout>
|
||||||
|
<!-- Hero Section -->
|
||||||
|
<section class="hero">
|
||||||
|
<div class="container">
|
||||||
|
<div class="hero__content">
|
||||||
|
<h1 class="hero__title">
|
||||||
|
<span class="hero__title-line">Design</span>
|
||||||
|
<span class="hero__title-line hero__title-accent">d'expérience</span>
|
||||||
|
</h1>
|
||||||
|
<p class="hero__subtitle">
|
||||||
|
Aurélie Barré — Directrice artistique & designeuse d'intérieur.<br />
|
||||||
|
Du concept à la réalisation, chaque espace raconte une histoire.
|
||||||
|
</p>
|
||||||
|
<div class="hero__cta">
|
||||||
|
<a href="/processus" class="hero__link">
|
||||||
|
Découvrir mon processus
|
||||||
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" style="margin-left: 8px;">
|
||||||
|
<path d="M3 8H13M13 8L9 4M13 8L9 12" stroke="currentColor" stroke-width="1.2"/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Featured Events -->
|
||||||
|
<section class="section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-header reveal">
|
||||||
|
<span class="section-label">Sélection</span>
|
||||||
|
<h2>Créations Événement</h2>
|
||||||
|
<a href="/creations-evenement" class="section-link">
|
||||||
|
Voir tous les projets
|
||||||
|
<svg width="14" height="14" viewBox="0 0 16 16" fill="none">
|
||||||
|
<path d="M3 8H13M13 8L9 4M13 8L9 12" stroke="currentColor" stroke-width="1.2"/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="projects-grid">
|
||||||
|
{events.slice(0, 4).map((project, index) => (
|
||||||
|
<ProjectCard
|
||||||
|
title={project.title}
|
||||||
|
client={project.client}
|
||||||
|
slug={project.slug.current}
|
||||||
|
category={project.category}
|
||||||
|
heroImage={project.heroImage}
|
||||||
|
description={project.description}
|
||||||
|
tags={project.tags}
|
||||||
|
index={index}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Featured Pérennes -->
|
||||||
|
{perennes.length > 0 && (
|
||||||
|
<section class="section" style="background-color: var(--color-bg-alt);">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-header reveal">
|
||||||
|
<span class="section-label">Sélection</span>
|
||||||
|
<h2>Réalisations Pérennes</h2>
|
||||||
|
<a href="/realisations-perennes" class="section-link">
|
||||||
|
Voir tous les projets
|
||||||
|
<svg width="14" height="14" viewBox="0 0 16 16" fill="none">
|
||||||
|
<path d="M3 8H13M13 8L9 4M13 8L9 12" stroke="currentColor" stroke-width="1.2"/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="projects-grid">
|
||||||
|
{perennes.map((project, index) => (
|
||||||
|
<ProjectCard
|
||||||
|
title={project.title}
|
||||||
|
client={project.client}
|
||||||
|
slug={project.slug.current}
|
||||||
|
category={project.category}
|
||||||
|
heroImage={project.heroImage}
|
||||||
|
description={project.description}
|
||||||
|
tags={project.tags}
|
||||||
|
index={index}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<!-- Process Teaser -->
|
||||||
|
<section class="section process-teaser">
|
||||||
|
<div class="container">
|
||||||
|
<div class="process-teaser__inner reveal">
|
||||||
|
<span class="section-label">Processus</span>
|
||||||
|
<h2>Comment je travaille</h2>
|
||||||
|
<p class="process-teaser__text text-secondary">
|
||||||
|
De la prise de contact à la livraison, chaque projet suit un processus créatif rigoureux
|
||||||
|
qui garantit un résultat à la hauteur de vos ambitions.
|
||||||
|
</p>
|
||||||
|
<div class="process-teaser__steps">
|
||||||
|
<span class="process-teaser__step">01 — Prise de contact</span>
|
||||||
|
<span class="process-teaser__step">02 — Conception & Moodboard</span>
|
||||||
|
<span class="process-teaser__step">03 — Sélection & Sourcing</span>
|
||||||
|
<span class="process-teaser__step">04 — Réalisation</span>
|
||||||
|
<span class="process-teaser__step">05 — Livraison & Retour</span>
|
||||||
|
</div>
|
||||||
|
<a href="/processus" class="hero__link" style="margin-top: 2rem; display: inline-flex;">
|
||||||
|
Découvrir en détail
|
||||||
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" style="margin-left: 8px;">
|
||||||
|
<path d="M3 8H13M13 8L9 4M13 8L9 12" stroke="currentColor" stroke-width="1.2"/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</BaseLayout>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* Hero */
|
||||||
|
.hero {
|
||||||
|
min-height: 90vh;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding-top: var(--header-height);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero__content {
|
||||||
|
max-width: 800px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero__title {
|
||||||
|
margin-bottom: var(--space-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero__title-line {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero__title-accent {
|
||||||
|
font-style: italic;
|
||||||
|
color: var(--color-accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero__subtitle {
|
||||||
|
font-size: clamp(1rem, 2vw, 1.2rem);
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
line-height: 1.8;
|
||||||
|
margin-bottom: var(--space-xl);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero__link {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--color-accent);
|
||||||
|
text-decoration: none;
|
||||||
|
transition: color var(--duration-fast) var(--ease-out);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero__link:hover {
|
||||||
|
color: var(--color-accent-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Section Headers */
|
||||||
|
.section-header {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: baseline;
|
||||||
|
gap: var(--space-md);
|
||||||
|
margin-bottom: var(--space-xl);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-label {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
letter-spacing: 0.12em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--color-text-light);
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-header h2 {
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-link {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
letter-spacing: 0.04em;
|
||||||
|
color: var(--color-accent);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-link:hover {
|
||||||
|
color: var(--color-accent-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Projects Grid */
|
||||||
|
.projects-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
gap: var(--space-xl) var(--space-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.projects-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Process Teaser */
|
||||||
|
.process-teaser__inner {
|
||||||
|
max-width: 700px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.process-teaser__text {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
line-height: 1.8;
|
||||||
|
margin-top: var(--space-md);
|
||||||
|
margin-bottom: var(--space-xl);
|
||||||
|
}
|
||||||
|
|
||||||
|
.process-teaser__steps {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--space-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.process-teaser__step {
|
||||||
|
font-family: var(--font-serif);
|
||||||
|
font-size: 1.1rem;
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
padding-bottom: var(--space-md);
|
||||||
|
border-bottom: 1px solid var(--color-border);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
117
src/pages/processus.astro
Normal file
117
src/pages/processus.astro
Normal file
@ -0,0 +1,117 @@
|
|||||||
|
---
|
||||||
|
import BaseLayout from '../layouts/BaseLayout.astro';
|
||||||
|
import ProcessTimeline from '../components/ProcessTimeline.tsx';
|
||||||
|
import { mockProcessSteps } from '../lib/mock-data';
|
||||||
|
---
|
||||||
|
|
||||||
|
<BaseLayout title="Processus Créatif — Aurélie Barré" description="Découvrez le processus créatif d'Aurélie Barré, de la prise de contact à la livraison de votre projet de design d'intérieur.">
|
||||||
|
<section class="page-hero">
|
||||||
|
<div class="container">
|
||||||
|
<span class="page-hero__label">Méthode</span>
|
||||||
|
<h1>Processus<br /><em>Créatif</em></h1>
|
||||||
|
<p class="page-hero__desc text-secondary">
|
||||||
|
Chaque projet suit un parcours rigoureux en 5 étapes,
|
||||||
|
de la première rencontre à la livraison finale.
|
||||||
|
Une méthode éprouvée pour garantir un résultat à la hauteur de vos attentes.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section process-section">
|
||||||
|
<div class="container">
|
||||||
|
<ProcessTimeline client:visible steps={mockProcessSteps} />
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- CTA -->
|
||||||
|
<section class="section cta-section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="cta-inner reveal">
|
||||||
|
<h2>Un projet en tête ?</h2>
|
||||||
|
<p class="text-secondary">
|
||||||
|
Discutons de vos envies autour d'un café. Chaque projet commence par une conversation.
|
||||||
|
</p>
|
||||||
|
<a href="mailto:contact@aureliebarre.fr" class="cta-link">
|
||||||
|
Prendre contact
|
||||||
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" style="margin-left: 8px;">
|
||||||
|
<path d="M3 8H13M13 8L9 4M13 8L9 12" stroke="currentColor" stroke-width="1.2"/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</BaseLayout>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.page-hero {
|
||||||
|
padding-top: calc(var(--header-height) + var(--space-3xl));
|
||||||
|
padding-bottom: var(--space-xl);
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-hero__label {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
letter-spacing: 0.12em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--color-text-light);
|
||||||
|
display: block;
|
||||||
|
margin-bottom: var(--space-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-hero h1 {
|
||||||
|
margin-bottom: var(--space-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-hero h1 em {
|
||||||
|
color: var(--color-accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-hero__desc {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
line-height: 1.8;
|
||||||
|
max-width: 600px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.process-section {
|
||||||
|
padding-top: var(--space-xl);
|
||||||
|
padding-bottom: var(--space-3xl);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* CTA */
|
||||||
|
.cta-section {
|
||||||
|
background-color: var(--color-bg-alt);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta-inner {
|
||||||
|
text-align: center;
|
||||||
|
max-width: 500px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta-inner h2 {
|
||||||
|
margin-bottom: var(--space-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta-inner p {
|
||||||
|
margin: 0 auto var(--space-xl);
|
||||||
|
font-size: 1.05rem;
|
||||||
|
line-height: 1.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta-link {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--color-accent);
|
||||||
|
text-decoration: none;
|
||||||
|
padding: 12px 32px;
|
||||||
|
border: 1px solid var(--color-accent);
|
||||||
|
transition: all var(--duration-fast) var(--ease-out);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta-link:hover {
|
||||||
|
background-color: var(--color-accent);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
206
src/pages/realisations-perennes/[slug].astro
Normal file
206
src/pages/realisations-perennes/[slug].astro
Normal file
@ -0,0 +1,206 @@
|
|||||||
|
---
|
||||||
|
import BaseLayout from '../../layouts/BaseLayout.astro';
|
||||||
|
import MasonryGallery from '../../components/MasonryGallery.tsx';
|
||||||
|
import { getMockProjects, getMockProjectBySlug } from '../../lib/mock-data';
|
||||||
|
|
||||||
|
export function getStaticPaths() {
|
||||||
|
const projects = getMockProjects('perenne');
|
||||||
|
return projects.map(p => ({ params: { slug: p.slug.current } }));
|
||||||
|
}
|
||||||
|
|
||||||
|
const { slug } = Astro.params;
|
||||||
|
const project = getMockProjectBySlug(slug!);
|
||||||
|
|
||||||
|
if (!project) {
|
||||||
|
return Astro.redirect('/realisations-perennes');
|
||||||
|
}
|
||||||
|
|
||||||
|
const dateFormatted = new Date(project.date).toLocaleDateString('fr-FR', {
|
||||||
|
year: 'numeric',
|
||||||
|
month: 'long',
|
||||||
|
});
|
||||||
|
---
|
||||||
|
|
||||||
|
<BaseLayout title={`${project.title} — Aurélie Barré`} description={project.description}>
|
||||||
|
<!-- Hero Image -->
|
||||||
|
<section class="project-hero">
|
||||||
|
<div class="project-hero__image">
|
||||||
|
<img src={project.heroImage} alt={project.title} />
|
||||||
|
<div class="project-hero__overlay"></div>
|
||||||
|
</div>
|
||||||
|
<div class="project-hero__content container">
|
||||||
|
<span class="project-hero__client">{project.client}</span>
|
||||||
|
<h1>{project.title}</h1>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Project Info -->
|
||||||
|
<section class="section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="project-meta reveal">
|
||||||
|
<div class="project-meta__item">
|
||||||
|
<span class="project-meta__label">Client</span>
|
||||||
|
<span class="project-meta__value">{project.client}</span>
|
||||||
|
</div>
|
||||||
|
<div class="project-meta__item">
|
||||||
|
<span class="project-meta__label">Date</span>
|
||||||
|
<span class="project-meta__value">{dateFormatted}</span>
|
||||||
|
</div>
|
||||||
|
{project.location && (
|
||||||
|
<div class="project-meta__item">
|
||||||
|
<span class="project-meta__label">Lieu</span>
|
||||||
|
<span class="project-meta__value">{project.location}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div class="project-meta__item">
|
||||||
|
<span class="project-meta__label">Type</span>
|
||||||
|
<span class="project-meta__value">Réalisation pérenne</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="project-description reveal">
|
||||||
|
<p>{project.description}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{project.tags && project.tags.length > 0 && (
|
||||||
|
<div class="project-tags reveal">
|
||||||
|
{project.tags.map(tag => (
|
||||||
|
<span class="project-tag">{tag}</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Gallery (Masonry) -->
|
||||||
|
{project.gallery && project.gallery.length > 0 && (
|
||||||
|
<section class="section" style="background-color: var(--color-bg-alt);">
|
||||||
|
<div class="container">
|
||||||
|
<MasonryGallery
|
||||||
|
client:visible
|
||||||
|
images={project.gallery.map(img => ({
|
||||||
|
src: img.src,
|
||||||
|
alt: img.alt,
|
||||||
|
size: img.size,
|
||||||
|
}))}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<!-- Back link -->
|
||||||
|
<section class="section">
|
||||||
|
<div class="container">
|
||||||
|
<a href="/realisations-perennes" class="back-link">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" style="margin-right: 8px;">
|
||||||
|
<path d="M13 8H3M3 8L7 4M3 8L7 12" stroke="currentColor" stroke-width="1.2"/>
|
||||||
|
</svg>
|
||||||
|
Retour aux réalisations pérennes
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</BaseLayout>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.project-hero {
|
||||||
|
position: relative;
|
||||||
|
height: 70vh;
|
||||||
|
min-height: 500px;
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-hero__image {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-hero__image img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-hero__overlay {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.1) 50%, transparent 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-hero__content {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
padding-bottom: var(--space-2xl);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-hero__client {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
letter-spacing: 0.12em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
opacity: 0.7;
|
||||||
|
display: block;
|
||||||
|
margin-bottom: var(--space-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-hero__content h1 {
|
||||||
|
color: white;
|
||||||
|
font-size: clamp(2rem, 5vw, 3.5rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-meta {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
gap: var(--space-lg);
|
||||||
|
padding-bottom: var(--space-xl);
|
||||||
|
border-bottom: 1px solid var(--color-border);
|
||||||
|
margin-bottom: var(--space-xl);
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-meta__label {
|
||||||
|
font-size: 0.7rem;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--color-text-light);
|
||||||
|
display: block;
|
||||||
|
margin-bottom: var(--space-xs);
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-meta__value {
|
||||||
|
font-size: 0.95rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-description { margin-bottom: var(--space-xl); }
|
||||||
|
.project-description p {
|
||||||
|
font-size: 1.15rem;
|
||||||
|
line-height: 1.8;
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
max-width: 700px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-tags { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
|
||||||
|
.project-tag {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
letter-spacing: 0.04em;
|
||||||
|
color: var(--color-text-light);
|
||||||
|
padding: 4px 12px;
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.back-link {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
text-decoration: none;
|
||||||
|
transition: color var(--duration-fast);
|
||||||
|
}
|
||||||
|
.back-link:hover { color: var(--color-accent); }
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.project-meta { grid-template-columns: repeat(2, 1fr); }
|
||||||
|
.project-hero { height: 50vh; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
81
src/pages/realisations-perennes/index.astro
Normal file
81
src/pages/realisations-perennes/index.astro
Normal file
@ -0,0 +1,81 @@
|
|||||||
|
---
|
||||||
|
import BaseLayout from '../../layouts/BaseLayout.astro';
|
||||||
|
import ProjectCard from '../../components/ProjectCard.astro';
|
||||||
|
import { getMockProjects } from '../../lib/mock-data';
|
||||||
|
|
||||||
|
const projects = getMockProjects('perenne');
|
||||||
|
---
|
||||||
|
|
||||||
|
<BaseLayout title="Réalisations Pérennes — Aurélie Barré" description="Découvrez les réalisations pérennes d'Aurélie Barré : aménagements de bureaux, showrooms et espaces de vie.">
|
||||||
|
<section class="page-hero">
|
||||||
|
<div class="container">
|
||||||
|
<span class="page-hero__label">Portfolio</span>
|
||||||
|
<h1>Réalisations<br /><em>Pérennes</em></h1>
|
||||||
|
<p class="page-hero__desc text-secondary">
|
||||||
|
Bureaux, showrooms, espaces de vie — des aménagements durables
|
||||||
|
pensés pour sublimer chaque lieu au quotidien.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="projects-grid">
|
||||||
|
{projects.map((project, index) => (
|
||||||
|
<ProjectCard
|
||||||
|
title={project.title}
|
||||||
|
client={project.client}
|
||||||
|
slug={project.slug.current}
|
||||||
|
category={project.category}
|
||||||
|
heroImage={project.heroImage}
|
||||||
|
description={project.description}
|
||||||
|
tags={project.tags}
|
||||||
|
index={index}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</BaseLayout>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.page-hero {
|
||||||
|
padding-top: calc(var(--header-height) + var(--space-3xl));
|
||||||
|
padding-bottom: var(--space-xl);
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-hero__label {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
letter-spacing: 0.12em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--color-text-light);
|
||||||
|
display: block;
|
||||||
|
margin-bottom: var(--space-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-hero h1 {
|
||||||
|
margin-bottom: var(--space-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-hero h1 em {
|
||||||
|
color: var(--color-accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-hero__desc {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
line-height: 1.8;
|
||||||
|
max-width: 600px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.projects-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
gap: var(--space-xl) var(--space-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.projects-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
229
src/styles/global.css
Normal file
229
src/styles/global.css
Normal file
@ -0,0 +1,229 @@
|
|||||||
|
/* ==========================================================================
|
||||||
|
Aurélie Barré Portfolio — Global Styles
|
||||||
|
Direction: "Galerie Blanche" — Éditorial Light
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/* --- CSS Custom Properties --- */
|
||||||
|
:root {
|
||||||
|
/* Palette */
|
||||||
|
--color-bg: #FAFAF8;
|
||||||
|
--color-bg-alt: #F3F1ED;
|
||||||
|
--color-surface: #FFFFFF;
|
||||||
|
--color-text: #1A1A1A;
|
||||||
|
--color-text-secondary: #6B6B6B;
|
||||||
|
--color-text-light: #9A9A9A;
|
||||||
|
--color-accent: #C4A77D;
|
||||||
|
--color-accent-hover: #B08E5E;
|
||||||
|
--color-border: #E8E6E1;
|
||||||
|
--color-border-light: #F0EEEA;
|
||||||
|
|
||||||
|
/* Typography */
|
||||||
|
--font-serif: 'DM Serif Display', Georgia, 'Times New Roman', serif;
|
||||||
|
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||||
|
|
||||||
|
/* Spacing */
|
||||||
|
--space-xs: 0.25rem;
|
||||||
|
--space-sm: 0.5rem;
|
||||||
|
--space-md: 1rem;
|
||||||
|
--space-lg: 2rem;
|
||||||
|
--space-xl: 4rem;
|
||||||
|
--space-2xl: 6rem;
|
||||||
|
--space-3xl: 8rem;
|
||||||
|
|
||||||
|
/* Layout */
|
||||||
|
--container-max: 1440px;
|
||||||
|
--container-padding: clamp(1.5rem, 4vw, 4rem);
|
||||||
|
--header-height: 80px;
|
||||||
|
|
||||||
|
/* Transitions */
|
||||||
|
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
|
||||||
|
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
|
||||||
|
--duration-fast: 200ms;
|
||||||
|
--duration-normal: 400ms;
|
||||||
|
--duration-slow: 800ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Reset & Base --- */
|
||||||
|
*, *::before, *::after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: var(--font-sans);
|
||||||
|
font-size: 1rem;
|
||||||
|
line-height: 1.7;
|
||||||
|
color: var(--color-text);
|
||||||
|
background-color: var(--color-bg);
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Typography --- */
|
||||||
|
h1, h2, h3, h4 {
|
||||||
|
font-family: var(--font-serif);
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 1.2;
|
||||||
|
letter-spacing: -0.01em;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: clamp(2.5rem, 6vw, 5rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: clamp(1.8rem, 4vw, 3rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: clamp(1.3rem, 2.5vw, 1.8rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
max-width: 65ch;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: color var(--duration-fast) var(--ease-out);
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
color: var(--color-accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
display: block;
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Utilities --- */
|
||||||
|
.container {
|
||||||
|
width: 100%;
|
||||||
|
max-width: var(--container-max);
|
||||||
|
margin: 0 auto;
|
||||||
|
padding-left: var(--container-padding);
|
||||||
|
padding-right: var(--container-padding);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section {
|
||||||
|
padding-top: var(--space-2xl);
|
||||||
|
padding-bottom: var(--space-2xl);
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-accent {
|
||||||
|
color: var(--color-accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-secondary {
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-light {
|
||||||
|
color: var(--color-text-light);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sr-only {
|
||||||
|
position: absolute;
|
||||||
|
width: 1px;
|
||||||
|
height: 1px;
|
||||||
|
padding: 0;
|
||||||
|
margin: -1px;
|
||||||
|
overflow: hidden;
|
||||||
|
clip: rect(0, 0, 0, 0);
|
||||||
|
white-space: nowrap;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Divider --- */
|
||||||
|
.divider {
|
||||||
|
width: 100%;
|
||||||
|
height: 1px;
|
||||||
|
background-color: var(--color-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Reveal Animation (applied via JS) --- */
|
||||||
|
.reveal {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(30px);
|
||||||
|
transition: opacity var(--duration-slow) var(--ease-out),
|
||||||
|
transform var(--duration-slow) var(--ease-out);
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal.visible {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Masonry Grid --- */
|
||||||
|
.masonry-grid {
|
||||||
|
columns: 3;
|
||||||
|
column-gap: var(--space-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.masonry-grid > * {
|
||||||
|
break-inside: avoid;
|
||||||
|
margin-bottom: var(--space-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
.masonry-grid {
|
||||||
|
columns: 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 640px) {
|
||||||
|
.masonry-grid {
|
||||||
|
columns: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Image Hover Effect --- */
|
||||||
|
.img-hover-zoom {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.img-hover-zoom img {
|
||||||
|
transition: transform var(--duration-slow) var(--ease-out);
|
||||||
|
}
|
||||||
|
|
||||||
|
.img-hover-zoom:hover img {
|
||||||
|
transform: scale(1.04);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Page Transitions --- */
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from { opacity: 0; transform: translateY(20px); }
|
||||||
|
to { opacity: 1; transform: translateY(0); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-enter {
|
||||||
|
animation: fadeIn var(--duration-slow) var(--ease-out) both;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Scrollbar --- */
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background: var(--color-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: var(--color-border);
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: var(--color-text-light);
|
||||||
|
}
|
||||||
14
tsconfig.json
Normal file
14
tsconfig.json
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
{
|
||||||
|
"extends": "astro/tsconfigs/strict",
|
||||||
|
"compilerOptions": {
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
"jsxImportSource": "react",
|
||||||
|
"baseUrl": ".",
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["src/*"],
|
||||||
|
"@components/*": ["src/components/*"],
|
||||||
|
"@layouts/*": ["src/layouts/*"],
|
||||||
|
"@lib/*": ["src/lib/*"]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user