fix images

Dockerfile

@@ -1,9 +1,19 @@
-FROM node:lts-alpine as builder
+# stage1 as builder
+FROM node:16-alpine as builder
+# Copy the package.json and install dependencies
+COPY package*.json ./
+RUN npm install
+# Copy rest of the files
+COPY . .
+# Build the project
+RUN npm run build
 
-WORKDIR /app
-COPY . ./
-RUN npm install && npm run build
 
-FROM nginx:alpine
-
-COPY --from=builder /app/dist /usr/share/nginx/html
+FROM nginx:alpine as production-build
+COPY nginx.conf /etc/nginx/nginx.conf
+## Remove default nginx index page
+RUN rm -rf /usr/share/nginx/html/*
+# Copy from the stage 1
+COPY --from=builder /dist /usr/share/nginx/html/nested-app
+EXPOSE 8080
+ENTRYPOINT ["nginx", "-g", "daemon off;"]

nginx.conf

@@ -1,20 +1,16 @@
-worker_processes 1;
+worker_processes 4;
 
-events {
-    worker_connections 1024;
-}
+events { worker_connections 1024; }
 
 http {
-    include /etc/nginx/mime.types;
-
     server {
-        listen 8000;
-        server_name localhost;
+        listen 8080;
+        root  /usr/share/nginx/html/nested-app;
+        include /etc/nginx/mime.types;
 
-        location / {
+        location /nested-app/ {
             root  /usr/share/nginx/html;
-            index  index.html;
-            try_files $uri $uri/ /index.html;
+            try_files $uri $uri/ /nested-app/index.html;
         }
     }
 }

src/App.vue

@@ -85,9 +85,7 @@ const progress = ref(0);
 const visibleTextIndex = ref(0);
 // Function to check if middle text is visible
 const checkVisibleTextIndex = () => {
-  console.log(visibleTextIndex.value)
   const textElements = document.querySelectorAll('.magic-div > span');
-  console.log(textElements)// Selecting all <p> elements
   textElements.forEach((element, index) => {
     const bounding = element.getBoundingClientRect(); // Getting the position of each <p> element
     if (bounding.top <= window.innerHeight - 500 && bounding.bottom >= 0) {

src/components/GridSkill.vue

@@ -46,7 +46,7 @@ const skills = [
 <template>
   <div class="grid gap-5 xl:grid-cols-3 md:grid-cols-2 sm:grid-cols-1 grid-cols-1">
     <SkillCell v-for="(skill, index) in skills" :key="index" :title="skill.title" :text="skill.text" class="group">
-      <img :src="`/images/${ skill.image}`" :height="60" :width="60"
+      <img :src="`/images/${skill.image}`" :height="60" :width="60"
            class="h-7 w-7 group-hover:scale-110 transition-all ease-in duration-500 group-hover:brightness-200"
            :alt="skill.alt">
     </SkillCell>

src/components/HeaderContainer.vue

@@ -6,14 +6,12 @@ import {Vue3Lottie} from "vue3-lottie";
 import CopyJson from '../assets/lotties/Animation - 1714933994295.json'
 import { ref } from "vue";
 function openCV(){
-  console.log('openCV')
   window.open('files/cv.pdf', '_blank');
 }
 const copyAnimation = ref(null)
 const display = ref(false)
 
 function copyEmail(event) {
-  console.log('copyEmail');
   navigator.clipboard.writeText('delanierlucas@gmail.com');
   if(!display.value) {
     const rect = event.target.getBoundingClientRect(); // Récupérer les coordonnées du bouton cliqué