update

2026-03-23 23:17:53 +01:00
83 changed files with 1292 additions and 17 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -21,6 +21,3 @@ pnpm-debug.log*
 *.njsproj
 *.sln
 *.sw?
-
-#dockerfile
-Dockerfile
--- a/25
+++ b/25
@@ -0,0 +1,25 @@
+# 1. Build
+FROM node:20-alpine AS build
+WORKDIR /app
+
+COPY package*.json ./
+RUN npm install
+
+COPY . .
+RUN npm run build
+
+# 2. Serveur nginx
+FROM nginx:alpine
+
+# Supprime la config par défaut
+RUN rm /etc/nginx/conf.d/default.conf
+
+# Ajoute ta config
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+# Copie le build
+COPY --from=build /app/dist /usr/share/nginx/html
+
+EXPOSE 8080
+
+CMD ["nginx", "-g", "daemon off;"]
--- a/README.md
+++ b/README.md
--- a/babel.config.js
+++ b/babel.config.js
--- a/htaccess/.htaccess
+++ b/htaccess/.htaccess
@@ -1,10 +0,0 @@
-<IfModule mod_rewrite.c>
-  RewriteEngine On
-  RewriteCond %{SERVER_PORT} !=443
-  RewriteRule ^(.*)$ https://www.raffiskender.com/$1 [R=301,L]
-  RewriteBase /
-  RewriteRule ^index\.html$ - [L]
-  RewriteCond %{REQUEST_FILENAME} !-f
-  RewriteCond %{REQUEST_FILENAME} !-d
-  RewriteRule . /index.html [L]
-</IfModule>
--- a/jsconfig.json
+++ b/jsconfig.json
--- a/nginx.conf
+++ b/nginx.conf
@@ -0,0 +1,19 @@
+ server {
+    listen 8080;
+
+    server_name localhost;
+
+    root /usr/share/nginx/html;
+    index index.html;
+
+    # SPA Vue → fallback obligatoire
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+
+    # cache des assets (optionnel mais recommandé)
+    location /assets/ {
+        expires 1y;
+        add_header Cache-Control "public, immutable";
+    }
+}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/image.ico
+++ b/public/image.ico
--- a/public/index.html
+++ b/public/index.html
@@ -4,7 +4,9 @@
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <meta name="description" content="Here is Raffi's portfolio. It shows who I am and showcases some of my projects.">
    <link rel="icon" href="<%= BASE_URL %>image.ico">
+    
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
--- a/src/App.vue
+++ b/src/App.vue
--- a/src/Deprecated/1000_F_61701485_5SzZENMxHmd4n7oQZuqTRXcjqEgZkkIg.jpg
+++ b/src/Deprecated/1000_F_61701485_5SzZENMxHmd4n7oQZuqTRXcjqEgZkkIg.jpg
--- a/src/Deprecated/Card.vue
+++ b/src/Deprecated/Card.vue
@@ -0,0 +1,140 @@
+<template>
+  <div class="card" @click="isFlipped = !isFlipped" :class="{ flipped: isFlipped }">
+    <div class="card-content">
+      <div class="card-back">
+        <div class="card-back__frame"></div>
+      </div>
+      <div class="card-front">
+        <div class="card-front__frame">
+          <div class="card-front__content"
+          :class="{ animate: isFlipped }"
+          v-bind:style= "{ 'background-image': 'url(' + require('../assets/' + bg ) + ')'}">
+            <h3>{{ title }}</h3>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { defineProps, ref } from 'vue';
+//import { useCardsStore } from '@/stores/cards'
+
+const isFlipped = ref(false)
+
+// const cardsStore = useCardsStore()
+
+// const toggleCard = (id) => {
+//   isFlipped.value = !isFlipped.value
+//   cardsStore.reset();
+//   const functionName = 'toggleCard' + id
+//   cardsStore.toggleCard1();
+  
+//}
+
+const props = defineProps({
+  title: String,
+  bg : String,
+  //id : Number
+});
+
+</script>
+
+<style lang="scss">
+.card {
+  position: relative;
+  transform-style: preserve-3d;
+  width: 200px;
+  height: 300px;
+  transition: 1.5s;
+  transform-origin: center;
+  cursor: pointer;
+}
+
+.card-content {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100%;
+  transition: 1.5s;
+  transform-style: preserve-3d;
+  backface-visibility: hidden;
+}
+
+.flipped .card-content {
+  transform: rotateY(180deg);
+}
+
+.card-back,
+.card-front {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  backface-visibility: hidden;
+  display: grid;
+  place-items: center;
+}
+
+.card-back__frame {
+  transform-style: preserve-3d;
+  height: 100%;
+  width: 100%;
+  background-position: center;
+  background-image: url(../assets/back.svg);
+}
+
+.card-front__frame {
+  background-image: url(../assets/face.svg);
+  background-position: center;
+  height: 100%;
+  width: 100%;
+  transform-style: preserve-3d;
+  //overflow: hidden;
+  
+  display: grid;
+  place-items: center;
+  transform: translateZ(-2px);
+}
+
+.card-front__content {
+  display: grid;
+  place-items: center;
+  transform: translateZ(-0px);
+  background-color: rgb(117, 148, 138);
+  height: 88%;
+  width: 80%;
+  transform-style: preserve-3d;
+  border-radius: 12px;
+  border: solid black 5px;
+  //overflow: hidden; /* a pb here, it dismiss the translate Z*/
+  position : relative;
+  
+  background-size: 300%;
+  background-position: 500px 500px;
+  
+  transition : 2s;
+  
+  &.animate{
+    background-position: center;
+  }
+
+  }
+
+
+h3 {
+  transform: translateZ(-60px) rotateY(180deg);
+  font-size: 2em;
+  font-weight: bold;
+  color: rgb(255, 31, 31);
+  text-align: center;
+  line-height: 1.5;
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+
+</style>
--- a/src/Deprecated/Card_WhoAmI.vue
+++ b/src/Deprecated/Card_WhoAmI.vue
@@ -0,0 +1,129 @@
+<template>
+  <div class="card" @click="isFlipped = !isFlipped" :class="{ flipped: isFlipped }">
+    <div class="card-content">
+      <div class="card-back">
+        <div class="card-back__frame"></div>
+      </div>
+      <div class="card-front">
+        <div class="card-front__frame">
+          <div class="card-front__content"
+          :class="{ animate: isFlipped }">
+            <h3>Who <br> Am <br> I&nbsp; ?<br></h3>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { defineProps, ref } from 'vue';
+
+const props = defineProps({
+  title: String,
+});
+
+const isFlipped = ref(false);
+</script>
+
+<style lang="scss" scoped>
+.card {
+  position: relative;
+  transform-style: preserve-3d;
+  width: 200px;
+  height: 300px;
+  transition: 1.5s;
+  transform-origin: center;
+  cursor: pointer;
+}
+
+.card-content {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100%;
+  transition: 1.5s;
+  transform-style: preserve-3d;
+  backface-visibility: hidden;
+}
+
+.flipped .card-content {
+  transform: rotateY(180deg);
+}
+
+.card-back,
+.card-front {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  backface-visibility: hidden;
+  display: grid;
+  place-items: center;
+}
+
+.card-back__frame {
+  transform-style: preserve-3d;
+  height: 100%;
+  width: 100%;
+  background-position: center;
+  background-image: url(../assets/back.svg);
+}
+
+.card-front__frame {
+  background-image: url(../assets/face.svg);
+  background-position: center;
+  height: 100%;
+  width: 100%;
+  transform-style: preserve-3d;
+  //overflow: hidden;
+  
+  display: grid;
+  place-items: center;
+  transform: translateZ(-2px);
+}
+
+.card-front__content {
+  display: grid;
+  place-items: center;
+  transform: translateZ(-0px);
+  background-color: rgb(117, 148, 138);
+  height: 88%;
+  width: 80%;
+  transform-style: preserve-3d;
+  border-radius: 12px;
+  border: solid black 5px;
+  //overflow: hidden; /* a pb here, it dismiss the translate Z*/
+  position : relative;
+  background: rgba(76, 175, 80, 0.9); /* Green background with 30% opacity */
+  background-image: url('../assets/question.png');
+  background-size: 200%;
+  background-position: 500px 500px;
+  
+  transition : 2s;
+  
+  &.animate{
+    background-position: left;
+  }
+
+}
+
+
+h3 {
+  transform: translateZ(-60px) rotateY(180deg);
+  padding:0.25rem 1rem;
+  font-size: 2em;
+  font-weight: bold;
+  color: rgb(255, 31, 31);
+  text-align: center;
+  line-height: 1.5;
+  border-radius: 5px;
+  font-family: Arial, Helvetica, sans-serif;
+  background-color: rgba(0, 0, 0, 0.486);
+  box-shadow: 0px 0px 15px rgb(0, 0, 0);
+}
+
+</style>
--- a/src/Deprecated/Cards.vue
+++ b/src/Deprecated/Cards.vue
@@ -0,0 +1,174 @@
+<script setup>
+import Name from './Name.vue';
+import { useBurgerStore } from '@/stores/burger';
+//import { Ref } from 'vue';
+
+const burger = useBurgerStore()
+
+const turnMyCard = (event) => {  
+  let link = event.currentTarget
+  link.classList.add('turned')
+}
+</script>
+
+<template>
+
+  <div class="images-grid-gallery">
+    <a class="image-link" href="#"
+    @click="turnMyCard($event)"
+    >
+      <div class="image-container" data-label="Who am I">
+        <img class="image hide"
+          src="@/assets/MaPhoto.jpg"
+          alt=""
+          >
+        <img class="image_background"
+          src="@/assets/question.png"
+          alt="">
+      </div>
+    </a>
+    <a class="image-link" href="#">
+      <div class="image-container" data-label="Who am I">
+        <img class="image_background" src="@/assets/question.png" alt="">
+      </div>
+    </a>
+    <a class="image-link" href="#">
+      <div class="image-container" data-label="Who am I">
+        <img class="image_background" src="@/assets/question.png" alt="">
+      </div>
+    </a>
+    <a class="image-link" href="#">
+      <div class="image-container" data-label="Who am I">
+        <img class="image_background" src="@/assets/question.png" alt="">
+      </div>
+    </a>
+
+
+  </div>
+</template>
+
+<style lang="scss">
+@import url("https://fonts.googleapis.com/css?family=Lora:400,400i,700");
+
+@import '@/style/colors.scss';
+
+  .images-grid-gallery {
+    //max-width: $maxWidth;
+    margin: 0 1em;
+    display: grid;
+    grid-template-columns: repeat (2, 1fr);
+    //grid-auto-columns: minmax(10px, auto);
+    gap:1em;
+    //border : 3px solid white;
+    height:100vh;
+  }
+  
+  .image-link {
+    display: flex;
+    border : 3px solid white;
+    background : white;
+    border-radius: 10px;
+    margin:0 auto;
+    margin-bottom: 1em;
+    width: $imageWidth;
+    overflow: hidden;
+    transform: rotateY(0deg);
+    transition: 1s;
+    &.turned{
+      transform: rotateY(180deg);
+    }
+    & > .image-container {
+      border : 3px solid white;
+      border-radius: 22px;
+      overflow: hidden;
+      opacity: 1;
+    }
+    
+    &:nth-child(1), &:nth-child(2){
+      aspect-ratio: 1/1;
+      aspect-ratio: 8/11;
+    }
+    &:nth-child(3), &:nth-child(4){
+      aspect-ratio: 8/11;
+    }
+
+    @for $i from 1 to 5 {
+      &:nth-child(#{$i}) > .image-container > .image_background{
+        transform:scale(1.0);
+        transition: 0.5s;
+        position:relative;
+        bottom:-400px;
+        left:-120px;
+        animation-duration: 1000ms;
+        animation-name: show-gallery;
+        animation-timing-function: cubic-bezier(0.2, 0.9, 0.44, 1);
+        animation-delay: $i*200 + 1000ms;
+        animation-fill-mode: forwards;
+        
+      }
+    }
+    &:hover .image_background{
+      transform: scale(1.1);
+    }
+    &:hover > .image_background:before {
+        opacity: 1;
+        left: -5px;
+        top: 50px;          
+    }
+  }   
+
+  .hide{
+    display : none;
+  }
+
+  @media (min-width: 720px){
+    .images-grid-gallery{
+      grid-template-columns: repeat(4, 1fr);
+    }
+  }
+
+  @keyframes show-gallery {
+    0%{
+      
+    }
+    100%{
+      bottom: 300px;;
+    }
+  }
+  // @keyframes menu-shake{
+  //     from {
+  //         //opacity: 0;
+  //         filter: drop-shadow(-150px 0px 10px #4d0000);
+  //         //background-color: rgb(99, 0, 0);
+  //     }
+  //     10%{
+  //       //opacity: 50%;
+  //       filter: drop-shadow(150px 0px 3px #4d0000);
+  //     }
+  //     20%{
+  //       filter: drop-shadow(-100px 0px 3px #4d0000);
+        
+  //     }
+  //     30%{
+  //       filter: drop-shadow(50px 0px 3px #4d0000);
+        
+  //     }
+  //     40%{
+  //       filter: drop-shadow(-25px 0px 3px #4d0000);
+        
+  //     }
+  //     50%{
+  //       filter: drop-shadow(10px 0px 3px #4d0000);
+        
+  //     }
+  //     80%{
+        
+  //       filter: drop-shadow(-10px 0px 3px #4d0000);
+  //     }
+  //     100%{
+  //       //opacity : 100%;
+  //       filter: drop-shadow(0px 0px 3px #4d0000);
+        
+  //     }
+  //   }
+</style>
--- a/src/Deprecated/MenuCards.vue
+++ b/src/Deprecated/MenuCards.vue
@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <Card
+      title="Who Am I&nbsp;?"
+      bg="question.png"
+      ></Card>
+      <Card
+      title="Technos I use"
+      bg="legos_vrac.png"
+      ></Card>
+      <Card
+      title="Projects"
+      bg="legos_maison.jpg"
+    ></Card>
+  </div>
+</template>
+
+<script setup>
+//import Card_WhoAmI from './Card_WhoAmI.vue';
+import Card from './Card.vue';
+
+</script>
+
+<style lang="scss" scoped>
+
+div{
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+}
+  
+</style>
--- a/src/Deprecated/OldMenu.vue
+++ b/src/Deprecated/OldMenu.vue
@@ -0,0 +1,227 @@
+<script setup>
+import Name from './Name.vue';
+import { useBurgerStore } from '@/stores/burger';
+//import { Ref } from 'vue';
+
+const burger = useBurgerStore()
+
+</script>
+
+<template>
+
+  <div class="menu">
+    <div class="menu-inner">
+      <div class="prez">
+        <Name/>
+      </div>
+      <!-- <ul class="menu-nav">
+        <li class="menu-nav-item"><a class="menu-nav-link" href="#"><span>
+              <div>Who&nbspam&nbspI</div>
+            </span></a></li>
+        <li class="menu-nav-item"><a class="menu-nav-link" href="#"><span>
+              <div>Projects</div>
+            </span></a></li>
+        <li class="menu-nav-item"><a class="menu-nav-link" href="#"><span>
+              <div>Networks</div>
+            </span></a></li>
+        <li class="menu-nav-item"><a class="menu-nav-link" href="#"><span>
+              <div>Contact</div>
+            </span></a></li>
+      </ul> -->
+      <!-- <div class="title">
+      
+        <p>Introducing myself...</p>
+      </div> -->
+      <div class="gallery">
+        <div class="images">
+          <a class="image-link" href="#">
+            <div class="image" data-label="Who am I"><img src="../assets/question.png" alt=""></div>
+          </a>
+          <a class="image-link" href="#">
+            <div class="image" data-label="Sun"><img src="https://i.loli.net/2019/11/16/FLnzi5Kq4tkRZSm.jpg" alt=""></div>
+          </a>
+          <a class="image-link" href="#">
+            <div class="image" data-label="Tree"><img src="https://i.loli.net/2019/10/18/uXF1Kx7lzELB6wf.jpg" alt=""></div>
+          </a>
+          <a class="image-link" href="#">
+            <div class="image" data-label="Sky"><img src="https://i.loli.net/2019/10/18/buDT4YS6zUMfHst.jpg" alt=""></div>
+          </a>
+        </div>
+    </div>
+  </div>
+
+</div>
+</template>
+
+<style lang="scss">
+@import url("https://fonts.googleapis.com/css?family=Lora:400,400i,700");
+
+
+
+
+.menu {
+  //z-index: 1;
+  
+  //position: fixed;
+  padding-top: 4em;
+  //top: 0;
+  //left: 0;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  background: #1a1e23;
+  opacity: 0;
+  //overflow: auto;
+  //visibility:visible;
+  transition: 0.3s;
+
+  &-nav {
+    display: flex;
+    flex-wrap: wrap;
+    margin: 0;
+    padding: 0;
+    text-align: center;
+    list-style-type: none;
+
+    &-item {
+      flex: 1;
+    }
+
+    &-link {
+      position: relative;
+      display: inline-flex;
+      font-size: 2rem;
+      color: white;
+      text-decoration: none;
+
+      span {
+        overflow: hidden;
+
+        div {
+          transform: translateY(105%);
+          margin: 0.25em 0.5em;
+        }
+      }
+
+      &::after {
+        position: absolute;
+        content: "";
+        top: 100%;
+        left: 0;
+        width: 100%;
+        height: 3px;
+        background: var(--primary-color);
+        transform: scaleX(0);
+        transform-origin: right;
+        transition: transform 0.5s;
+      }
+
+      &:hover::after {
+        transform: scaleX(0);
+        transform-origin: left;
+      }
+    }
+  }
+
+  .gallery {
+    margin-top: 50px;
+    text-align: center;
+  }
+
+
+  .images {
+    margin-top: 36px;
+    display: flex;
+    flex-wrap:wrap;
+    // flex-direction: row;
+    justify-content: center;
+    align-items: center;
+
+    .image-link {
+      //min-width: px;
+      width: 20vw;
+      margin: 0 12px;
+      overflow: hidden;
+
+      .image {
+        position: relative;
+        transition: 0.6s;
+
+        &::before {
+          position: absolute;
+          content: attr(data-label);
+          //display: block;
+          top: -50px;
+          left: -0px;
+          z-index: 1;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          height: 50px;
+          width: 20vw;
+          color: rgb(218, 218, 218);
+          background: rgba(0, 0, 0, 0.6);
+          opacity: 1;
+          padding : 0 0.2em;
+          transition: 0.5s;
+          transition-delay: 0.2s;
+        }
+      }
+
+      &:hover .image {
+        transform: scale(1.1);
+
+        &::before {
+          opacity: 1;
+          left: -5px;
+          top: 5px;          
+        }
+      }
+    }
+
+    img {
+      height: 250px;
+      transform: translateY(105%);
+    }
+  }
+}
+
+  @keyframes menu-shake{
+      from {
+          //opacity: 0;
+          filter: drop-shadow(-150px 0px 10px #4d0000);
+          //background-color: rgb(99, 0, 0);
+      }
+      10%{
+        //opacity: 50%;
+        filter: drop-shadow(150px 0px 3px #4d0000);
+      }
+      20%{
+        filter: drop-shadow(-100px 0px 3px #4d0000);
+        
+      }
+      30%{
+        filter: drop-shadow(50px 0px 3px #4d0000);
+        
+      }
+      40%{
+        filter: drop-shadow(-25px 0px 3px #4d0000);
+        
+      }
+      50%{
+        filter: drop-shadow(10px 0px 3px #4d0000);
+        
+      }
+      80%{
+        
+        filter: drop-shadow(-10px 0px 3px #4d0000);
+      }
+      100%{
+        //opacity : 100%;
+        filter: drop-shadow(0px 0px 3px #4d0000);
+        
+      }
+    }
+</style>
--- a/src/Deprecated/Prez.vue
+++ b/src/Deprecated/Prez.vue
@@ -0,0 +1,19 @@
+<script>
+
+</script>
+
+<template>
+  <div class = "prez">
+    <h2>
+      Faisons connaissance
+    </h2>
+    <p>
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eligendi, alias sed. Distinctio accusantium nam laboriosam velit. Unde, ea cum maiores voluptas voluptates molestias harum consectetur fugiat modi qui, ipsum vel illum officiis fuga quibusdam. Quis perspiciatis doloremque provident! Rerum a voluptate quo earum officiis debitis molestiae nam, soluta nesciunt provident.
+    </p>
+  </div>
+  
+</template>
+
+<style lang="sass" scope>
+
+</style>
--- a/src/Deprecated/back.svg
+++ b/src/Deprecated/back.svg
@@ -0,0 +1,215 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="200"
+   height="300"
+   viewBox="0 0 52.916666 79.374999"
+   version="1.1"
+   id="svg2964"
+   sodipodi:docname="back.svg"
+   inkscape:version="1.0.2 (e86c870879, 2021-01-15)">
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1005"
+     id="namedview878"
+     showgrid="false"
+     inkscape:zoom="1.337684"
+     inkscape:cx="187.21052"
+     inkscape:cy="45.376874"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg2964"
+     units="px"
+     inkscape:document-rotation="0" />
+  <defs
+     id="defs2958" />
+  <metadata
+     id="metadata2961">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     id="g52"
+     transform="matrix(0.22468205,0,0,-0.22688749,2.9932142,1.0903296)">
+    <path
+       d="m 0,0 h 208.874 c 4.687,0 8.516,-3.83 8.516,-8.516 v -323.201 c 0,-4.686 -3.829,-8.517 -8.516,-8.517 H 0 c -4.686,0 -8.516,3.831 -8.516,8.517 V -8.516 C -8.516,-3.83 -4.686,0 0,0"
+       style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none"
+       id="path54" />
+  </g>
+  <g
+     id="g56"
+     transform="matrix(0.22468205,0,0,-0.22688749,51.232427,1.6162318)">
+    <path
+       d="m 0,0 c 1.655,-1.557 2.69,-3.761 2.69,-6.198 v -323.201 c 0,-4.686 -3.829,-8.517 -8.516,-8.517 H -214.7 c -2.609,0 -4.949,1.188 -6.515,3.048 z"
+       style="fill:#e7e8e9;fill-opacity:1;fill-rule:evenodd;stroke:none"
+       id="path58" />
+  </g>
+  <g
+     id="g60"
+     transform="matrix(0.22468205,0,0,-0.22688749,6.5866219,4.9671332)">
+    <path
+       d="m 0,0 h 176.886 c 4.085,0 7.423,-3.337 7.423,-7.424 v -291.211 c 0,-4.085 -3.338,-7.424 -7.423,-7.424 H 0 c -4.085,0 -7.422,3.339 -7.422,7.424 V -7.424 C -7.422,-3.338 -4.085,0 0,0"
+       style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none"
+       id="path62" />
+  </g>
+  <g
+     id="g64"
+     transform="matrix(0.22468205,0,0,-0.22688749,6.5866219,4.9671332)"
+     style="fill:#2b9580;fill-opacity:1">
+    <path
+       d="m 0,0 h 176.886 c 4.085,0 7.423,-3.337 7.423,-7.424 v -291.211 c 0,-4.085 -3.338,-7.424 -7.423,-7.424 H 0 c -4.085,0 -7.422,3.339 -7.422,7.424 V -7.424 C -7.422,-3.338 -4.085,0 0,0"
+       style="fill:#2b9580;fill-opacity:1;fill-rule:evenodd;stroke:none"
+       id="path66" />
+  </g>
+  <g
+     id="g68"
+     transform="matrix(0.22468205,0,0,-0.22688749,47.995298,6.5646935)"
+     style="fill:#277c6b;fill-opacity:1">
+    <path
+       d="m 0,0 c 0.007,-0.126 0.01,-0.253 0.01,-0.382 v -291.212 c 0,-4.085 -3.338,-7.424 -7.423,-7.424 h -176.886 c -4.085,0 -7.422,3.339 -7.422,7.424 v 1.373 z"
+       style="fill:#277c6b;fill-opacity:1;fill-rule:evenodd;stroke:none"
+       id="path70" />
+  </g>
+  <g
+     id="g72"
+     transform="matrix(0.22468205,0,0,-0.22688749,2.9932142,1.4019369)">
+    <path
+       d="m 0,0 h 208.874 c 3.928,0 7.142,-3.215 7.142,-7.143 v -323.2 c 0,-3.928 -3.214,-7.144 -7.142,-7.144 H 0 c -3.928,0 -7.142,3.216 -7.142,7.144 v 323.2 C -7.142,-3.215 -3.928,0 0,0 m 0.001,6.179 h 208.872 c 7.328,0 13.323,-5.995 13.323,-13.323 v -323.199 c 0,-7.328 -5.995,-13.321 -13.323,-13.321 H 0.001 c -7.328,0 -13.323,5.993 -13.323,13.321 V -7.144 c 0,7.328 5.995,13.323 13.323,13.323"
+       style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none"
+       id="path74" />
+  </g>
+  <g
+     id="g76"
+     transform="matrix(0.22468205,0,0,-0.22688749,6.5866219,5.2785134)">
+    <path
+       d="m 0,0 h 176.886 c 3.329,0 6.051,-2.722 6.051,-6.051 v -291.212 c 0,-3.328 -2.722,-6.05 -6.051,-6.05 H 0 c -3.328,0 -6.049,2.722 -6.049,6.05 V -6.051 C -6.049,-2.722 -3.328,0 0,0 m 0.001,6.177 h 176.885 c 6.727,0 12.23,-5.501 12.23,-12.228 v -291.212 c 0,-6.727 -5.503,-12.23 -12.23,-12.23 H 0.001 c -6.726,0 -12.229,5.503 -12.229,12.23 V -6.051 c 0,6.727 5.503,12.228 12.229,12.228"
+       style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none"
+       id="path78" />
+  </g>
+  <g
+     id="g80"
+     transform="matrix(0.22468205,0,0,-0.22688749,26.3974,60.691743)">
+    <path
+       d="M 0,0 62.646,-62.648 54.047,-62.786 0,-8.739 -54.973,-63.712 c -3.049,0.017 -5.943,0.043 -8.661,0.078 z m 0,40.518 96.802,-96.802 c -1.131,-2.058 -2.836,-3.487 -4.317,-4.421 L 0,31.779 -92.151,-60.37 c -1.829,1.256 -3.154,2.87 -4.11,4.63 z"
+       style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none"
+       id="path82" />
+  </g>
+  <g
+     id="g84"
+     transform="matrix(0.22468205,0,0,-0.22688749,26.3974,62.808039)">
+    <path
+       d="M 0,0 49.845,49.845 H 41.108 L 0,8.737 -41.108,49.845 h -8.739 z M 0,-40.518 90.363,49.845 H 81.627 L 0,-31.78 -81.627,49.845 h -8.739 z"
+       style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none"
+       id="path86" />
+  </g>
+  <g
+     id="g88"
+     transform="matrix(0.22468205,0,0,-0.22688749,26.3974,18.683208)">
+    <path
+       d="M 0,0 62.646,62.646 54.047,62.786 0,8.738 -54.973,63.71 c -3.049,-0.018 -5.943,-0.043 -8.661,-0.077 z m 0,-40.52 96.802,96.804 c -1.131,2.058 -2.836,3.486 -4.317,4.421 L 0,-31.781 -92.151,60.368 c -1.829,-1.256 -3.154,-2.871 -4.11,-4.628 z"
+       style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none"
+       id="path90" />
+  </g>
+  <g
+     id="g92"
+     transform="matrix(0.22468205,0,0,-0.22688749,26.3974,16.567165)">
+    <path
+       d="M 0,0 49.845,-49.847 H 41.108 L 0,-8.739 -41.108,-49.847 h -8.739 z M 0,40.519 90.363,-49.847 H 81.627 L 0,31.78 -81.627,-49.847 h -8.739 z"
+       style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none"
+       id="path94" />
+  </g>
+  <path
+     d="m 25.764178,32.384966 h 1.388535 v 14.604977 h -1.388535 z"
+     style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.225782"
+     id="path96" />
+  <g
+     id="g98"
+     transform="matrix(0.22468205,0,0,-0.22688749,26.458176,28.967155)">
+    <path
+       d="M 0,0 10.639,-10.639 0,-21.279 l -10.638,10.64 z"
+       style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none"
+       id="path100" />
+  </g>
+  <g
+     id="g102"
+     transform="matrix(0.22468205,0,0,-0.22688749,26.458176,45.580219)">
+    <path
+       d="M 0,0 10.639,-10.64 0,-21.279 -10.638,-10.64 Z"
+       style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none"
+       id="path104" />
+  </g>
+  <path
+     d="M 33.690062,40.38865 H 19.226829 v -1.402166 h 14.463233 z"
+     style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.225782"
+     id="path106" />
+  <g
+     id="g108"
+     transform="matrix(0.22468205,0,0,-0.22688749,37.074672,39.68759)">
+    <path
+       d="M 0,0 -10.641,-10.638 -21.279,0 -10.641,10.639 Z"
+       style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none"
+       id="path110" />
+  </g>
+  <g
+     id="g112"
+     transform="matrix(0.22468205,0,0,-0.22688749,20.622846,39.68759)">
+    <path
+       d="M 0,0 -10.638,-10.638 -21.277,0 -10.638,10.639 Z"
+       style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none"
+       id="path114" />
+  </g>
+  <g
+     id="g116"
+     transform="matrix(0.22468205,0,0,-0.22688749,40.135246,39.68759)">
+    <path
+       d="M 0,0 -5.029,-5.029 -10.057,0 -5.029,5.029 Z"
+       style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none"
+       id="path118" />
+  </g>
+  <g
+     id="g120"
+     transform="matrix(0.22468205,0,0,-0.22688749,41.849278,39.68759)">
+    <path
+       d="M 0,0 -2.157,-2.156 -4.314,0 -2.157,2.157 Z"
+       style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none"
+       id="path122" />
+  </g>
+  <g
+     id="g124"
+     transform="matrix(0.22468205,0,0,-0.22688749,12.781106,39.68759)">
+    <path
+       d="M 0,0 5.029,-5.029 10.057,0 5.029,5.029 Z"
+       style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none"
+       id="path126" />
+  </g>
+  <g
+     id="g128"
+     transform="matrix(0.22468205,0,0,-0.22688749,11.067569,39.68759)">
+    <path
+       d="M 0,0 2.157,-2.156 4.313,0 2.157,2.157 Z"
+       style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none"
+       id="path130" />
+  </g>
+</svg>
--- a/src/Deprecated/face.svg
+++ b/src/Deprecated/face.svg
@@ -0,0 +1,87 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="200"
+   height="300"
+   viewBox="0 0 52.916666 79.374999"
+   version="1.1"
+   id="svg2964"
+   sodipodi:docname="face.svg"
+   inkscape:version="1.0.2 (e86c870879, 2021-01-15)">
+  <rect
+     style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.86016;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     id="rect1067"
+     width="52.916664"
+     height="79.375"
+     x="0"
+     y="-1e-06"
+     ry="4.6153121" />
+  <g
+     id="g965"
+     transform="matrix(0.22468205,0,0,-0.22688749,51.232424,1.6162327)">
+    <path
+       d="m 0,0 c 1.655,-1.557 2.69,-3.761 2.69,-6.198 v -323.201 c 0,-4.686 -3.829,-8.517 -8.516,-8.517 H -214.7 c -2.609,0 -4.949,1.188 -6.515,3.048 l 13.82594,20.92925 7.27488,-7.76589 182.844792,1.31488 4.142578,4.36599 -0.699128,295.09452 z"
+       style="fill:#e7e8e9;fill-opacity:1;fill-rule:evenodd;stroke:none"
+       id="path963"
+       sodipodi:nodetypes="cssssccccccc" />
+  </g>
+  <g
+     id="g969"
+     transform="matrix(0.22468205,0,0,-0.22688749,2.9932137,1.4019372)"
+     style="fill:#000000;fill-opacity:1;stroke-width:0.99959033;stroke-miterlimit:4;stroke-dasharray:none;stroke:none;stroke-opacity:1">
+    <path
+       d="m 0,0 h 208.874 c 3.928,0 7.142,-3.215 7.142,-7.143 v -323.2 c 0,-3.928 -3.214,-7.144 -7.142,-7.144 H 0 c -3.928,0 -7.142,3.216 -7.142,7.144 v 323.2 C -7.142,-3.215 -3.928,0 0,0 m 0.001,6.179 h 208.872 c 7.328,0 13.323,-5.995 13.323,-13.323 v -323.199 c 0,-7.328 -5.995,-13.321 -13.323,-13.321 H 0.001 c -7.328,0 -13.323,5.993 -13.323,13.321 V -7.144 c 0,7.328 5.995,13.323 13.323,13.323"
+       style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.99959033;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path967" />
+  </g>
+  <rect
+     style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:1.54807706;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     id="rect1029"
+     width="43.43111"
+     height="69.889442"
+     x="4.7427778"
+     y="4.7427783"
+     rx="2.6795108" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1005"
+     id="namedview878"
+     showgrid="false"
+     inkscape:zoom="1.8917709"
+     inkscape:cx="89.622571"
+     inkscape:cy="137.14202"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg2964"
+     units="px"
+     inkscape:document-rotation="0" />
+  <defs
+     id="defs2958" />
+  <metadata
+     id="metadata2961">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+</svg>
--- a/src/assets/CV-favicon.svg
+++ b/src/assets/CV-favicon.svg
--- a/src/assets/MaPhoto.jpg
+++ b/src/assets/MaPhoto.jpg
--- a/src/assets/arrow
+++ b/src/assets/arrow
--- a/src/assets/arrow-list.svg
+++ b/src/assets/arrow-list.svg
--- a/src/assets/bulle.svg
+++ b/src/assets/bulle.svg
--- a/src/assets/burger.svg
+++ b/src/assets/burger.svg
--- a/src/assets/by.svg
+++ b/src/assets/by.svg
--- a/src/assets/images/LDC/LDC_screenshot_1.png
+++ b/src/assets/images/LDC/LDC_screenshot_1.png
--- a/src/assets/images/LDC/LDC_screenshot_2.png
+++ b/src/assets/images/LDC/LDC_screenshot_2.png
--- a/src/assets/images/LDC/LDC_screenshot_3.png
+++ b/src/assets/images/LDC/LDC_screenshot_3.png
--- a/src/assets/images/pop/Screenshot_pop1.webp
+++ b/src/assets/images/pop/Screenshot_pop1.webp
--- a/src/assets/images/pop/Screenshot_pop2.webp
+++ b/src/assets/images/pop/Screenshot_pop2.webp
--- a/src/assets/images/pop/Screenshot_pop3.webp
+++ b/src/assets/images/pop/Screenshot_pop3.webp
--- a/src/assets/images/pop/back.webp
+++ b/src/assets/images/pop/back.webp
--- a/src/assets/lego_bridge.png
+++ b/src/assets/lego_bridge.png
--- a/src/assets/legos_maison.jpg
+++ b/src/assets/legos_maison.jpg
--- a/src/assets/legos_maison2.jpg
+++ b/src/assets/legos_maison2.jpg
--- a/src/assets/legos_vrac.jpg
+++ b/src/assets/legos_vrac.jpg
--- a/src/assets/legos_vrac.png
+++ b/src/assets/legos_vrac.png
--- a/src/assets/legos_vrac_solo.png
+++ b/src/assets/legos_vrac_solo.png
--- a/src/assets/legos_vrac_solo2.png
+++ b/src/assets/legos_vrac_solo2.png
--- a/src/assets/mailbox.svg
+++ b/src/assets/mailbox.svg
--- a/src/assets/maison.svg
+++ b/src/assets/maison.svg
--- a/src/assets/meme.png
+++ b/src/assets/meme.png
--- a/src/assets/meme1.png
+++ b/src/assets/meme1.png
--- a/src/assets/memeWink.png
+++ b/src/assets/memeWink.png
--- a/src/assets/mika-signe.svg
+++ b/src/assets/mika-signe.svg
--- a/src/assets/networks.svg
+++ b/src/assets/networks.svg
--- a/src/assets/points.svg
+++ b/src/assets/points.svg
--- a/src/assets/portfolio-mini.svg
+++ b/src/assets/portfolio-mini.svg
--- a/src/assets/question.png
+++ b/src/assets/question.png
--- a/src/assets/question3.png
+++ b/src/assets/question3.png
--- a/src/assets/questionSolo.png
+++ b/src/assets/questionSolo.png
--- a/src/assets/raffi.svg
+++ b/src/assets/raffi.svg
--- a/src/assets/vecteezy_set-of-hand-drawn-question-marks-doodle-questions-marks_6058847.jpg
+++ b/src/assets/vecteezy_set-of-hand-drawn-question-marks-doodle-questions-marks_6058847.jpg
--- a/src/components/Burger.vue
+++ b/src/components/Burger.vue
--- a/src/components/Button.vue
+++ b/src/components/Button.vue
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
--- a/src/components/Footer_1.vue
+++ b/src/components/Footer_1.vue
--- a/src/components/Menu.vue
+++ b/src/components/Menu.vue
--- a/src/components/Modal.vue
+++ b/src/components/Modal.vue
--- a/src/components/Name.vue
+++ b/src/components/Name.vue
--- a/src/components/Spinner.vue
+++ b/src/components/Spinner.vue
--- a/src/ici.txt
+++ b/src/ici.txt
--- a/src/main.js
+++ b/src/main.js
--- a/src/reset.css
+++ b/src/reset.css
--- a/src/services/form.js
+++ b/src/services/form.js
@@ -3,15 +3,22 @@ import axios from "axios";
 export const formService =
 {
  // Propriété qui stocke la BASE URL de notre API
-	base_url : "https://orange-firefly-f5a4.raffiskender.workers.dev/",
+	//base_url : "http://192.168.42.124/projets_wordpress/BOPortfolio/wordpress/wp-json/",
+	//base_url : "http://192.168.1.41/projets_wordpress/BOPortfolio/wordpress/wp-json/",
+	base_url : "https://bo-portfolio.raffiskender.com/wp-json/",
+	//base_url : "http://localhost/projets_wordpress/BOPortfolio/wordpress/wp-json/",
  
  // Retrieve data from backend
  async sendMessage(token, payload)
 	{
+    //console.log(token, payload);
+    
+    
+    
    const response = await axios.post(
-			this.base_url,
+			this.base_url + "bo-portfolio/v1/submitForm",
 			{
-        token,
+        token: token,
        json: payload
 			},
 			
@@ -20,4 +27,14 @@ export const formService =
    });
    return response.data;
  },
-}
+}
+
+// async verifyRecaptcha(token){
+
+
+//   return fetch(VERIFY_URL, {
+//     method: "POST",
+//     headers: { "Content-Type": "application/x-www-form-urlencoded" },
+//     body: `secret=${SECRET_KEY}&response=${req.body['g-recaptcha-response']}`,
+//   })
+// },
--- a/src/stores/burger.js
+++ b/src/stores/burger.js
--- a/src/style/colors.scss
+++ b/src/style/colors.scss
--- a/src/style/shared_old.scss
+++ b/src/style/shared_old.scss
--- a/src/style/widths.scss
+++ b/src/style/widths.scss
--- a/src/views/404.vue
+++ b/src/views/404.vue
--- a/src/views/Contact.vue
+++ b/src/views/Contact.vue
@@ -59,6 +59,7 @@ const onSubmit = () => {
    {action: 'submit'})
    .then( async (token) => {
      const response = await formService.sendMessage(token, payload)
+      //console.log(response)
      if (response === true){
        awaiting.value = false;
        name.value = '';
--- a/src/views/I_am
+++ b/src/views/I_am
@@ -0,0 +1,72 @@
+<script setup>
+import { onMounted } from 'vue';
+import { useBurgerStore } from '@/stores/burger'
+const burger = useBurgerStore();
+onMounted(() => {
+  burger.check()
+    //console.log("Mounted")
+})
+
+</script>
+
+<template>
+  <div class="content">
+    <div class="title">
+      <div class="logo"></div>
+      <h3>Talking about code</h3> 
+    </div>
+  <p>As you guessed, my name is Raffi. I have been working in the beautiful world of maintenance for 20 years, where I have learned a lot about logic. Throughout my life, both for professional purposes and for fun, I have learned several programming languages. Here are some of them: Video Designer, Twido Soft, Zelio Soft, PL7. When I was younger, I also dabbled in Turbo Pascal, Qbasic, and more recently, during the confinement, I explored a bit of C.</p>
+
+<p>In 2022, I took a five-month training course to further my knowledge of web programming. During this time, I learned HTML, CSS, JavaScript, WordPress, Vue.js, PHP, SQL, database management, and much more! After completing the training, I continued to work independently to delve deeper into WordPress API-REST and gain a better understanding of what can be achieved with Vue.js. Now, I feel prepared to move forward!</p>
+<p>I'm accustomed to working with deadlines, challenges, and all kinds of unforeseen circumstances. I thrive in situations that push me out of my comfort zone and require quick thinking. As a native French speaker, I'm also fluent in English and Turkish, allowing me to communicate effectively in multiple languages. I enjoy discovering new things and seizing opportunities to learn and grow. With my experience and language skills, I'm ready to take on new challenges and contribute to motivating projects.</p>
+  </div>
+</template>
+<style lang="scss" scoped>
+@import '../style/colors.scss';
+
+
+.content{  
+  & .title{
+    & > .logo{
+      background-image: url('../assets/questionSolo.png');
+      background-size: 80%;
+    }
+  }
+  & > p{
+  
+    color : $main-normal;
+    opacity: 1;
+    padding:1em 1.25em 0em 1em;
+    line-height: 1.5em;
+    animation: text 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95);
+  }
+}
+
+@keyframes text{
+  0%{
+    opacity : 0;
+  }
+  33%{
+    opacity : 0;
+  }
+  100%{
+    opacity:1;
+  }
+}
+
+@keyframes image_show{
+  0%{
+    opacity: 0;
+    left: 0;
+  }
+  33%{
+    opacity: 0;
+    left: 0;    
+  }
+}
+@media (width < 600px){
+  .content{
+    width: 95%;
+  }
+}
+</style>
--- a/src/views/Index.vue
+++ b/src/views/Index.vue
--- a/src/views/Networks.vue
+++ b/src/views/Networks.vue
--- a/src/views/Profile.vue
+++ b/src/views/Profile.vue
--- a/src/views/Projects.vue
+++ b/src/views/Projects.vue
--- a/src/views/Projects1.vue
+++ b/src/views/Projects1.vue
@@ -0,0 +1,130 @@
+<script setup>
+import { onMounted, ref } from 'vue';
+import { useBurgerStore } from '@/stores/burger'
+const burger = useBurgerStore();
+onMounted(() => {
+  burger.check();
+})
+
+const items = ref([
+  { id:1,
+    selected : true,
+    name : "Poils O pattes",
+    bg_image : "url('https://picsum.photos/id/20/200/300')"
+  },
+  { id:2,
+   selected : false,
+    name : "courses",
+    bg_image : "url('https://picsum.photos/id/23/200/300')"
+      }
+    ]);
+
+const background = () => {
+  //console.log(items)
+  for (const item of items.value) {
+    if (item.selected)
+      return item.bg_image    
+  };
+}
+</script>
+
+<template>
+  <div class="content">
+    <div class="title">
+      <div class="logo">
+      </div>
+      <h3><span>Projects</span></h3> 
+    </div>
+    <div class = "slider">
+      <div class="projects-banner"
+      :style="{backgroundImage : background()}"
+      >
+        <div class="arrow left">
+          &#12296; 
+        </div>
+        <div class="tab">
+          <h4 class="project-name">Poils O Pattes</h4>
+          <h4 class="project-name toto">Poils O Pattes</h4>
+        <!--  v-for="item in items"
+          v-bind:key="items.id">
+          <h4 class="project-name"
+          :style="{opacity:item.selected ? 1 : 0, width : item.selected ? '100%' : 0, display:item.selected ? 'block' : 'none'}" >{{item.name}}</h4>
+        -->
+        </div>
+        <!-- <h4 class="project-title poils" v-else-if="items[1].selected" >Pas POP</h4> -->
+        <div class="arrow right">
+          &#12297;
+        </div>
+      </div>
+      <div class="project-content">
+        <p class="project-description">
+          A grooming salon management project undertaken with a team of 5 people over a duration of one month. I had the pleasure of contributing to it as a backend coder and scrum master...
+        </p>
+        <iframe class="video" src="https://www.youtube.com/embed/Q3WiRGLeXSQ?start=2329" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@import '../style/colors.scss';
+.content{
+  & > .title {
+    & .logo{
+      background-image: url('../assets/maison.svg');
+      background-size: 70%;
+    }
+  }
+}
+p{
+  margin: 0 0.5em;
+  line-height: 1.3em;
+}
+.video{
+  display: block;
+  width: 90%;
+  aspect-ratio: 560/315;
+  margin:auto;
+}
+.projects-banner{
+ // position:relative;
+  margin: 1em 0.5em;
+  height:3em;
+  width: 90%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  //background-image: url('https://picsum.photos/seed/picsum/200/300');
+  background-size: 90%;
+  background-repeat: no-repeat;
+  background-position: center;
+  &.tab{
+  }
+}
+
+h4.project-name{
+  width: 0%;
+  //position:absolute;
+  display: inline;
+  border: 1px solid blueviolet;  
+  font-family: 'acme', Arial, Helvetica, sans-serif;
+  font-size:1.7em;
+  letter-spacing: 0.1em;
+  color:$page-bg;
+  text-align: center;
+}
+.arrow{
+  color:white;
+  font-weight: bold;
+  border: 1px solid red;
+  &.left{
+    
+  }
+}
+.tab{
+  overflow-x: hidden;
+  & > .project-name{
+  }
+}
+
+</style>
--- a/src/views/Technologies.vue
+++ b/src/views/Technologies.vue
--- a/vue.config.js
+++ b/vue.config.js