Add projects section

assets/styles/main.scss

@@ -34,8 +34,8 @@
 
 
     // Dimensions
-
-    --large-content-width: Min(100%, 120rem);
+    
+    --large-content-width: Min(100%, 100rem);
     --medium-content-width: Min(100%, 80rem);
     --small-content-width: Min(100%, 40rem);
     --regular-icon-size: 2rem;
@@ -48,8 +48,10 @@
 
     --eerie-black: #212121;
     --gray: #7A7A7A;
+    --white-transparent: hsla(0, 0%, 100%, 0.8);
     --white-smoke: #F5F5F5;
     --emerald: #72C080;
+    --emerald-transparent: hsla(131, 38%, 60%, 0.5);
     --granny-smith-apple: #A3F3B0;
     --middle-green: #428F53;
     --rajah: #F9B262;
@@ -58,8 +60,10 @@
     --primary-color-light: var(--gray);
     --primary-color-dark: black;
     --secondary-color: white;
+    --secondary-color-transparent: var(--white-transparent);
     --secondary-color-dark: var(--white-smoke);
     --accent-color: var(--emerald);
+    --accent-color-transparent: var(--emerald-transparent);
     --accent-color-light: var(--granny-smith-apple);
     --accent-color-dark: var(--middle-green);
     --button-gradient: linear-gradient(
@@ -76,6 +80,16 @@
         hsl(130deg 77% 80%) 100%
     );
     --error-color: var(--rajah);
+
+    // Shadows
+
+    --regular-box-shadow:
+        0px 0px 2.8px rgba(0, 0, 0, 0.15),
+        0px 0px 6.7px rgba(0, 0, 0, 0.107),
+        0px 0px 12.5px rgba(0, 0, 0, 0.089),
+        0px 0px 22.3px rgba(0, 0, 0, 0.074),
+        0px 0px 41.8px rgba(0, 0, 0, 0.059),
+        0px 0px 100px rgba(0, 0, 0, 0.041);
 }
 
 // Media queries
@@ -105,12 +119,14 @@ h1 {
 h2 {
     font-family: var(--title-font-family);
     font-size: var(--h2-font-size);
+
 }
 
 h3 {
     font-family: var(--title-font-family);
     font-size: var(--h3-font-size);
-    font-weight: var(--medium-font-weight);
+    font-weight: var(--semi-bold-font-weight);
+    text-transform: uppercase;
 }
 
 p {

components/AppError.vue

@@ -74,7 +74,7 @@
             'emoticon' minmax(var(--h1-font-height), auto)
             '.' 5rem
             'button' auto
-            / minmax(30%, auto);
+            / minmax(50%, auto);
         place-content: center;
         place-items: center;
         gap: 0.5rem;

components/ProjectCard.vue

@@ -0,0 +1,105 @@
+<template>
+
+    <article class="project-card">
+        <div class="project-card__screenshot">
+            <a :href="url" target="_blank" title=""></a>
+            <img :src="screenshot">
+        </div>
+        <div class="project-card__content">
+            <h3>{{ title }}</h3>
+            <p>{{ description }}</p>
+        </div>
+    </article>
+
+</template>
+
+<script setup>
+
+    // --------------------------------------------------
+    // DATA
+    // --------------------------------------------------
+
+    defineProps({
+        title: String,
+        url: String,
+        screenshot: String,
+        description: String
+    });
+
+</script>
+
+<style lang="scss" scoped>
+
+    // --------------------------------------------------
+    // STYLE
+    // --------------------------------------------------
+
+    .project-card {
+        display: grid;
+        place-items: start;
+
+        &:nth-of-type(odd) {
+            align-self: flex-start;
+            grid-template-columns: [screenshot-start] 4fr [content-start] 1fr [screenshot-end] 2fr [content-end];
+            text-align: end;
+        }
+
+        &:nth-of-type(even) {
+            align-self: flex-end;
+            grid-template-columns: [content-start] 2fr [screenshot-start] 1fr [content-end] 4fr [screenshot-end];
+        }
+
+        &__screenshot {
+            grid-area: screenshot;
+            position: relative;
+            display: flex;
+            
+            a {
+                content: '';
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                border-radius: 10px;
+                // background-color: var(--accent-color-transparent);
+                // backdrop-filter: grayscale(100%) contrast(120%);
+                backdrop-filter: brightness(90%);
+                transition:
+                    background-color 200ms ease-in-out,
+                    backdrop-filter 200ms ease-in-out;
+
+                &:hover,
+                &:focus,
+                &:active {
+                    // background-color: transparent;
+                    backdrop-filter: none;
+                }
+            }
+
+            img {
+                border-radius: 10px;
+            }
+        }
+
+        &__content {
+            grid-area: content;
+            z-index: 1;
+            display: flex;
+            flex-direction: column;
+            gap: 0.5rem;
+            position: sticky;
+            top: 0;
+
+            p {
+                padding: 1rem;
+                color: var(--primary-color);
+                background-color: var(--secondary-color-transparent);
+                border-radius: 5px;
+                backdrop-filter: blur(2px);
+                box-shadow: var(--regular-box-shadow);
+            }
+        }
+    }
+
+</style>

components/ProjectsSection.vue

@@ -0,0 +1,81 @@
+<template>
+
+    <section class="projects">
+        <h2 class="projects__title">Projets sélectionnés</h2>
+        <div class="projects__cards">
+            <ProjectCard
+                v-for="project in projects"
+                :key="project.title"
+                :title="project.title"
+                :url="project.url"
+                :screenshot="project.screenshot"
+                :description="project.description"
+            />
+        </div>
+    </section>
+
+</template>
+
+<script setup>
+
+    // --------------------------------------------------
+    // DATA
+    // --------------------------------------------------
+
+    const projects = [
+        {
+            title: 'Xiao Wang',
+            url: 'https://xiaowang.fr',
+            screenshot: '/images/xiao-wang-screenshot-01.png',
+            description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Felis imperdiet proin fermentum leo vel.'
+        },
+        {
+            title: 'Danao',
+            url: 'https://www.danao.fr',
+            screenshot: '/images/danao-screenshot-01.png',
+            description: 'Curabitur gravida arcu ac tortor. Id consectetur purus ut faucibus pulvinar elementum integer enim neque. Sit amet dictum sit amet justo donec enim diam vulputate'
+        },
+        {
+            title: 'LibreAudio',
+            url: 'https://libreaudio.fr',
+            screenshot: '/images/libreaudio-screenshot-01.png',
+            description: 'Tortor condimentum lacinia quis vel eros donec ac odio. Odio facilisis mauris sit amet massa vitae tortor condimentum lacinia. Egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate.'
+        }
+    ];
+
+</script>
+
+<style lang="scss" scoped>
+
+    // --------------------------------------------------
+    // STYLE
+    // --------------------------------------------------
+
+    .projects {
+        @include large-section;
+        // position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 4rem;
+
+        // &::after {
+        //     content: '';
+        //     position: absolute;
+        //     bottom: 0;
+        //     left: 10%;
+        //     width: 80%;
+        //     height: 1px;
+        //     background-color: #525252;
+        // }
+
+        &__cards {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 4rem;
+            width: 100%;
+        }
+    }
+
+</style>

pages/index.vue

@@ -3,6 +3,7 @@
     <main>
         <HeroSection class="hero-section" />
         <ServicesSection class="services-section" />
+        <ProjectsSection class="projects-section" />
         <ContactSection class="contact-section" />
     </main>
 
@@ -28,26 +29,9 @@
 
     main {
         width: 100%;
-        display: grid;
-        grid:
-            'hero-section' auto
-            'services-section' auto
-            'contact-section' auto
-            / 1fr;
-        place-content: start center;
-        place-items: start center;
-
-        .hero-section {
-            grid-area: hero-section;
-        }
-
-        .services-section {
-            grid-area: services-section;
-        }
-
-        .contact-section {
-            grid-area: contact-section;
-        }
+        display: flex;
+        flex-direction: column;
+        align-items: center;
     }
 
 </style>