feat: add artist portrait

redte-ch · Jul 30, 2024 · 71fa680 · 71fa680
1 parent 48ac2df
commit 71fa680
Show file tree

Hide file tree

Showing 12 changed files with 188 additions and 90 deletions.
diff --git a/public/images/logo.jpg b/public/images/logo.jpg
diff --git a/public/images/roberto.jpg b/public/images/roberto.jpg
diff --git a/src/components/Bio.astro b/src/components/Bio.astro
@@ -1,7 +1,78 @@
 ---
-const { text } = Astro.props
+const { title, text, figure: { src, alt, caption } } = Astro.props
 ---
 
 <section class="Bio">
-    <p>{text}</p>
-</section>
+    <article class="Bio-article">
+        <h1 class="Bio-article-h1">{title}</h1>
+        <p class="Bio-article-p">{text}</p>
+    </article>
+
+    <article class="Bio-article-sm">
+        <h1 class="Bio-article-h1">{title}</h1>
+        <p class="Bio-article-p">{text}</p>
+    </article>
+
+    <article class="Bio-article-md">
+        <h1 class="Bio-article-h1">{title}</h1>
+        <p class="Bio-article-p">{text}</p>
+    </article>
+
+    <figure class="Bio-figure">
+        <img class="Bio-figure-img" src={src} alt={alt} />
+        <figcaption class="Bio-figure-figcaption">{caption}</figcaption>
+    </figure>
+
+    <figure class="Bio-figure-sm">
+        <img class="Bio-figure-img" src={src} alt={alt} />
+        <figcaption class="Bio-figure-figcaption">{caption}</figcaption>
+    </figure>
+
+    <figure class="Bio-figure-md">
+        <img class="Bio-figure-img" src={src} alt={alt} />
+        <figcaption class="Bio-figure-figcaption">{caption}</figcaption>
+    </figure>
+</section>
+
+<style>
+    .Bio-article {
+        @apply block sm:hidden;
+    }
+
+    .Bio-article-sm {
+        @apply hidden sm:inline-block md:hidden;
+        @apply align-top;
+        @apply w-1/2;
+    }
+
+    .Bio-article-md {
+        @apply hidden md:inline-block;
+        @apply align-top;
+        @apply w-2/3;
+    }
+
+    .Bio-article-h1 {
+        @apply sr-only;
+    }
+
+    .Bio-figure {
+        @apply block sm:hidden;
+        @apply pt-8;
+        margin: 0 auto;
+        max-width: 322px;
+    }
+
+    .Bio-figure-sm {
+        @apply hidden sm:inline-block md:hidden;
+        @apply w-1/2;
+        @apply pt-1 pl-8;
+        max-width: 282px;
+    }
+
+    .Bio-figure-md {
+        @apply hidden md:inline-block;
+        @apply w-1/3;
+        @apply pt-1 pl-8;
+        max-width: 143px;
+    }
+</style>
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
@@ -1,16 +1,11 @@
 ---
-const footerItems = [
-    {
-        text: 'redtech',
-        href: 'https://redte.ch',
-    }
-]
+const { items } = Astro.props
 ---
 
 <footer class="Footer">
     <p class="Footer-p">
         <span class="Footer-p-span">; </span>
-        {footerItems.map(({text, href}) => (
+        {items.map(({text, href}) => (
             <a class="Footer-p-a" href={href}>{text}</a>
         ))}
 

diff --git a/src/components/Head.astro b/src/components/Head.astro
@@ -1,13 +1,7 @@
 ---
 import "../styles/global.css"
-const title = "Maison Quiroga"
-const author = "Roberto Quiroga Valdovinos"
-const description = `
-    Roberto Quiroga Valdovinos. 
-    Artiste peintre. 
-    Œuvres et contact : @maisonquiroga (Instagram). 
-    Exposition permanente : Lautaro Rosas 558 Cerro Alegre, Valparaíso, Chili.
-`
+
+const { title, author, description } = Astro.props
 ---
 
 <head>

diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -1,42 +1,38 @@
 ---
 import Logo from './Logo.astro';
+
+const { logo: { alt, src} } = Astro.props
+const h1 = {
+    '*': 'RQV',
+    sm: 'Roberto',
+    md: 'Quiroga',
+    lg: 'Valdovinos'
+}
+const h2 = {
+    '*': 'Peintre',
+    sm: 'Artiste',
+    md: 'Valparaíso',
+    lg: 'Chili'
+
+}
 ---
 
 <header class="Header">
-    <Logo src="/images/logo.jpg" alt="Logo de Maison Quiroga"/>
-
-    <h1 class="Header-h1">
-        RQV
-    </h1>
-
-    <h1 class="Header-h1-sm">
-        Roberto
-    </h1>
-
-    <h1 class="Header-h1-md">
-        Roberto Quiroga
-    </h1>
-
-    <h1 class="Header-h1-lg">
-        Roberto Quiroga Valdovinos
-    </h1>
-
-    <h2 class="Header-h2">
-        Peintre.
-    </h2>
-
-    <h2 class="Header-h2-sm">
-        Artiste peintre.
-    </h2>
-
+    <Logo alt={alt} src={src}/>
+    <h1 class="Header-h1">{h1['*']}</h1>
+    <h1 class="Header-h1-sm">{h1.sm}</h1>
+    <h1 class="Header-h1-md">{h1.sm + " " + h1.md}</h1>
+    <h1 class="Header-h1-lg">{h1.sm + " " + h1.md + " " + h1.lg}</h1>
+    <h2 class="Header-h2">{h2['*']}.</h2>
+    <h2 class="Header-h2-sm">{h2.sm + " " + h2['*']}.</h2>
     <h2 class="Header-h2-md">
-        Artiste peintre.
-        <span class="Header-h2--light">Valparaíso.</span>
+        {h2.sm + " " + h2['*']}.
+        <span class="Header-h2--light">{h2.md}.</span>
     </h2>
 
     <h2 class="Header-h2-lg">
-        Artiste peintre.
-        <span class="Header-h2--light">Valparaíso, Chili.</span>
+        {h2.sm + " " + h2['*']}.
+        <span class="Header-h2--light">{h2.md}, {h2.lg}.</span>
     </h2>
 </header>
 

diff --git a/src/components/Logo.astro b/src/components/Logo.astro
@@ -1,14 +1,9 @@
 ---
-const { src, alt, ...rest } = Astro.props
+const { src, alt } = Astro.props
 ---
 
 <div class="Logo">
-    <img
-        class="Logo-img"
-        src={ src }
-        alt={ alt }
-        { ...rest }
-    />
+    <img class="Logo-img" src={ src } alt={ alt }/>
 </div>
 
 <style>

diff --git a/src/components/Nav.astro b/src/components/Nav.astro
@@ -1,25 +1,24 @@
 ---
-const navItems = [
-    {
-        text: '/Œuvres choisies',
-        href: 'https://www.instagram.com/maisonquiroga/'
-    },
-    {
-        text: '/Contact',
-        href: 'mailto:[email protected]'
-    }
-]
+const { items } = Astro.props
 ---
 
 <nav class="Nav">
-    {navItems.map(({ text, href }) => (
+    {items.map(({ text, href }) => (
         <a class="Nav-a" href={href}>{text}</a>
+        <a class="Nav-a-sm" href={href}>{text}</a>
     ))}
 </nav>
 
 <style>
     .Nav-a {
+        @apply pr-4;
+        @apply text-sm;
+        @apply inline-block sm:hidden;
+    }
+
+    .Nav-a-sm {
         @apply pr-8;
         @apply text-lg;
+        @apply hidden sm:inline-block;
     }
 </style>
diff --git a/src/components/Social.astro b/src/components/Social.astro
diff --git a/src/layouts/Home.astro b/src/layouts/Home.astro
@@ -3,16 +3,60 @@ import Head from "../components/Head.astro"
 import Header from "../components/Header.astro"
 import Nav from "../components/Nav.astro"
 import Footer from "../components/Footer.astro"
+
+const head = {
+    title: "Maison Quiroga",
+    author: "Roberto Quiroga Valdovinos",
+    description: `
+        Roberto Quiroga Valdovinos. Artiste peintre. Œuvres et contact : 
+        @maisonquiroga (Instagram). Exposition permanente : Lautaro Rosas 558 
+        Cerro Alegre, Valparaíso, Chili.
+    `
+}
+
+const header = {
+    logo: {
+        alt: 'Logo de Maison Quiroga',
+        src: '/images/logo.jpg'
+    }
+}
+
+const navItems = [
+    {
+        text: '/Œuvres choisies',
+        href: 'https://www.instagram.com/maisonquiroga/'
+    },
+    {
+        text: '/Contact',
+        href: 'mailto:[email protected]'
+    },
+    {
+        text: '/Adresse',
+        href: 'https://www.openstreetmap.org/way/1304668361'
+    }
+]
+
+const footerItems = [
+    {
+        text: 'redtech',
+        href: 'https://redte.ch',
+    }
+]
 ---
 
 <html lang="fr">
-    <Head />
+    <Head
+        title={head.title}
+        author={head.author}
+        description={head.description}
+    />
+
     <body>
         <main>
-            <Header />
-            <Nav />
+            <Header logo={header.logo}/>
+            <Nav items={navItems}/>
             <slot />
-            <Footer />
+            <Footer items={footerItems}/>
         </main>
     </body>
 </html>
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -2,21 +2,29 @@
 import Home from "../layouts/Home.astro"
 import Bio from "../components/Bio.astro"
 
-const bio = `
-    Né en 1953 à Viña del Mar, Chili, Roberto Quiroga Valdovinos a reçu
-    sa formation d'art à l'Escuela de Bellas Artes de Viña del Mar en
-    1970 et à l'Université de Concepción en 1973. Il a étudié sous la
-    direction de Teresa Vidal, Ismael Pinto, Julio Escamez, Tole
-    Peralta, Albino Echeverría, et Maisner Ordoñez. À la suite du
-    sanglant coup d'État de 1973, il s'est vu contraint de quitter le
-    pays pour emprunter le chemin de l'exil, ce qui a imprimé une
-    marque décisive sur son œuvre. Aujourd'hui, il dirige la Galerie
-    Lugar Inamible et expose ses travaux au Café Zeit.
-`
+const bio = {
+    title: 'Biographie de Roberto Quiroga Valdovinos',
+    text: `
+        Né en 1953 à Viña del Mar, Chili, Roberto Quiroga Valdovinos a reçu
+        sa formation d'art à l'Escuela de Bellas Artes de Viña del Mar en
+        1970 et à l'Université de Concepción en 1973. Il a étudié sous la
+        direction de Teresa Vidal, Ismael Pinto, Julio Escamez, Tole
+        Peralta, Albino Echeverría, et Maisner Ordoñez. À la suite du
+        sanglant coup d'État de 1973, il s'est vu contraint de quitter le
+        pays pour emprunter le chemin de l'exil, ce qui a imprimé une
+        marque décisive sur son œuvre. Aujourd'hui, il dirige la Galerie
+        Lugar Inamible et expose ses travaux au Café Zeit.
+    `,
+    figure: {
+        src: "/images/roberto.jpg",
+        alt: "Roberto Quiroga Valdovinos",
+        caption: "Portrait de Roberto Quiroga Valdovinos en 2024 à Valparaíso"
+    }
+}
 ---
 
 <Home>
-    <Bio text={bio} />
+    <Bio title={bio.title} text={bio.text} figure={bio.figure}/>
 
     <section class="block-v">
         <h3>[Expositions personnelles]</h3>

diff --git a/src/styles/_base.css b/src/styles/_base.css
@@ -17,4 +17,8 @@ main {
 
 header, nav, section, footer {
     @apply pt-8 pl-8 pr-8 !important;
+}
+
+figcaption {
+    @apply sr-only !important;
 }