Edit projects section

components/ProjectImage.vue

@@ -0,0 +1,76 @@
+<template>
+
+    <div aria-hidden="true" class="project-image">
+        <a tabindex="-1" :href="url" target="_blank" :title="`Accéder au site web de ${title}`">
+            <img :src="screenshot" :alt="`Page d'accueil du site web de ${title}`">
+        </a>
+    </div>
+
+</template>
+
+<script setup>
+
+    // --------------------------------------------------
+    // DATA
+    // --------------------------------------------------
+
+    defineProps({
+        title: String,
+        url: String,
+        screenshot: String
+    });
+
+</script>
+
+<style lang="scss" scoped>
+
+    // --------------------------------------------------
+    // STYLE
+    // --------------------------------------------------
+
+    .project-image {
+        position: relative;
+        line-height: 0;
+
+        a {
+
+            &::before {
+                content: '';
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+            }
+
+            &::after {
+                content: '';
+                position: absolute;
+                z-index: -1;
+                top: 0.4rem;
+                left: 0.4rem;
+                width: 100%;
+                height: 100%;
+                background-image: var(--secondary-accent-gradient);
+                background-size: 100%;
+                border-radius: 10px;
+            }
+            
+            img {
+                border: 1px solid var(--primary-color);
+                border-radius: 10px;
+                transition: transform 200ms ease-in-out;
+            }
+        }
+
+        a:hover,
+        a:focus,
+        a:active {
+
+            img {
+                transform: translate(-0.4rem, -0.4rem);
+            }
+        }
+    }
+
+</style>