Moved footer, imported one test svg

src/App.vue

@@ -1,175 +1,16 @@
 <script setup>
 import { RouterLink, RouterView } from 'vue-router'
+import app_footer from './components/footer.vue';
 </script>
 
 <template>
   
   <RouterView/>
 
-  <footer>
-    <div id="footer_content">
-
-      <div id="footer_social_networks">
-        <h1>Social networks</h1>
-
-        <a href="#">
-          <div class="footer_social_network_item">
-            <img src="https://picsum.photos/50">
-          </div>
-        </a>
-
-      </div>
-      
-      <nav id="footer_content_links">
-        <h1>Sitemap</h1>
-
-        <div class="footer_links_box">
-          <h2 class="footer_links_box_title">Projects</h2>
-          <ul>
-            <li><p><a href="#">Project 1</a></p></li>
-            <li><p><a href="#">Project 2</a></p></li>
-            <li><p><a href="#">Project 3</a></p></li>
-          </ul>
-        </div>
-
-      </nav> <!-- Footer content links -->
-
-      <div id="footer_contact_div">
-        <h1>Contact</h1>
-        <p>Want to contact me ? Let's have a talk !</p>
-        <div id="footer_contact_button" class="button">Contact</div>
-      </div>
-
-      <div id="footer_picture">
-        <img src="https://picsum.photos/50/50">
-      </div>
-
-    </div> <!-- Footer content -->
-    <p id="footer_little_text">&lt;/&gt; with &lt;3 by Kévin. Copyright...</p>
-  </footer>
+  <app_footer />
 
 </template>
 
 <style scoped>
-  footer{
-      background-color: #2c2b2b;
-      margin-top: 50px;
-      border-top: #EAEAEA 2px solid;
-      height: fit-content;
-      position: relative; /* So img can be absolute */
-  }
-  #footer_content{
-      width: 80%;
-      margin: auto;
-      margin-top: 20px;
-      margin-bottom: 20px;
-      display: flex;
-      flex-direction: row;
-      flex-wrap: wrap;
-      
-      gap: 30px;
-  }
 
-  #footer_content h1{
-      font-size: 1.8em;
-      width: 100%;
-      margin: 0;
-      margin-bottom: 4px;
-      height: fit-content;   
-  }
-
-  #footer_social_networks{
-      width: 15%;
-      min-width: 200px;
-      border: 2px rgb(16, 207, 102) dotted;
-      display: flex;
-      flex-direction: row;
-      flex-wrap: wrap;
-      align-content: flex-start;
-  }
-  .footer_social_network_item{
-      width: 50px;
-      height: 50px;
-      margin: 0;
-      margin-right: 20px;
-      margin-top: 10px;
-  }
-  .footer_social_network_item img{
-      border-radius: 50%;
-      width: 100%;
-      height: 100%;
-  }
-
-  #footer_content_links{
-      display: flex;
-      flex-direction: row;
-      width: 25%;
-      min-width: 250px;
-      flex-wrap: wrap;
-      border: 2px rgb(212, 15, 230) dotted;
-      align-content: flex-start;
-  }
-  .footer_links_box{
-      border: 3px blue dotted;
-      width: fit-content;
-      margin-right: 20px;
-      margin-bottom: 15px;
-  }
-  .footer_links_box_title{
-      font-size: 1.4em;
-      border-bottom: rgb(179, 72, 122) 2px solid;
-      margin: 0;
-      margin-bottom: 2px;
-      margin-top: 2px;
-  }
-  .footer_links_box ul{
-      text-decoration: none;
-      padding: 0;
-      margin: 0;
-      margin-top: 4px;
-  }
-  .footer_links_box li p{
-      margin: 0;
-      font-size: 1.2em;
-      text-decoration: none;
-      margin-bottom: 2px;
-  }
-
-  #footer_contact_div{
-      border: rgb(82, 15, 170) 2px solid;
-      width: 15%;
-      min-width: 160px;
-  }
-  #footer_contact_div h1{
-      width: fit-content !important;
-      margin: auto;
-      margin-bottom: 0;
-  }
-  #footer_contact_div p{
-      margin-top: 10px;
-      margin-bottom: 12px;
-      text-align: center;
-  }
-  #footer_contact_button{
-      background-color: rgb(65, 185, 61);
-      font-size: 1.1em;
-      width: 50%;
-      margin: auto;
-  }
-
-  #footer_little_text{
-      font-size: 0.8em;
-      margin: 0;
-      margin-left: 20px;
-  }
-  #footer_picture{
-      width: 100px;
-      height: 100px;
-      margin-left: auto;
-      border: 2px green dotted;
-  }
-  #footer_picture img{
-      width: 100%;
-      height: 100%;
-  }
 </style>

src/assets/logo.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>

src/components/footer.vue

@@ -0,0 +1,173 @@
+<template>
+  <footer>
+    <div id="footer_content">
+
+      <div id="footer_social_networks">
+        <h1>Social networks</h1>
+
+        <a href="#">
+          <div class="footer_social_network_item">
+            <img src="https://picsum.photos/50">
+          </div>
+        </a>
+
+      </div>
+      
+      <nav id="footer_content_links">
+        <h1>Sitemap</h1>
+
+        <div class="footer_links_box">
+          <h2 class="footer_links_box_title">Projects</h2>
+          <ul>
+            <li><p><a href="#">Project 1</a></p></li>
+            <li><p><a href="#">Project 2</a></p></li>
+            <li><p><a href="#">Project 3</a></p></li>
+          </ul>
+        </div>
+
+      </nav> <!-- Footer content links -->
+
+      <div id="footer_contact_div">
+        <h1>Contact</h1>
+        <p>Want to contact me ? Let's have a talk !</p>
+        <div id="footer_contact_button" class="button">Contact</div>
+      </div>
+
+      <div id="footer_picture">
+        <img src="https://picsum.photos/50/50">
+      </div>
+
+    </div> <!-- Footer content -->
+    <p id="footer_little_text">&lt;/&gt; with &lt;3 by Kévin. Copyright...</p>
+  </footer>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+    footer{
+        background-color: #2c2b2b;
+        margin-top: 50px;
+        border-top: #EAEAEA 2px solid;
+        height: fit-content;
+        position: relative; /* So img can be absolute */
+    }
+    #footer_content{
+        width: 80%;
+        margin: auto;
+        margin-top: 20px;
+        margin-bottom: 20px;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        
+        gap: 30px;
+    }
+
+    #footer_content h1{
+        font-size: 1.8em;
+        width: 100%;
+        margin: 0;
+        margin-bottom: 4px;
+        height: fit-content;   
+    }
+
+    #footer_social_networks{
+        width: 15%;
+        min-width: 200px;
+        border: 2px rgb(16, 207, 102) dotted;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        align-content: flex-start;
+    }
+    .footer_social_network_item{
+        width: 50px;
+        height: 50px;
+        margin: 0;
+        margin-right: 20px;
+        margin-top: 10px;
+    }
+    .footer_social_network_item img{
+        border-radius: 50%;
+        width: 100%;
+        height: 100%;
+    }
+
+    #footer_content_links{
+        display: flex;
+        flex-direction: row;
+        width: 25%;
+        min-width: 250px;
+        flex-wrap: wrap;
+        border: 2px rgb(212, 15, 230) dotted;
+        align-content: flex-start;
+    }
+    .footer_links_box{
+        border: 3px blue dotted;
+        width: fit-content;
+        margin-right: 20px;
+        margin-bottom: 15px;
+    }
+    .footer_links_box_title{
+        font-size: 1.4em;
+        border-bottom: rgb(179, 72, 122) 2px solid;
+        margin: 0;
+        margin-bottom: 2px;
+        margin-top: 2px;
+    }
+    .footer_links_box ul{
+        text-decoration: none;
+        padding: 0;
+        margin: 0;
+        margin-top: 4px;
+    }
+    .footer_links_box li p{
+        margin: 0;
+        font-size: 1.2em;
+        text-decoration: none;
+        margin-bottom: 2px;
+    }
+
+    #footer_contact_div{
+        border: rgb(82, 15, 170) 2px solid;
+        width: 15%;
+        min-width: 160px;
+    }
+    #footer_contact_div h1{
+        width: fit-content !important;
+        margin: auto;
+        margin-bottom: 0;
+    }
+    #footer_contact_div p{
+        margin-top: 10px;
+        margin-bottom: 12px;
+        text-align: center;
+    }
+    #footer_contact_button{
+        background-color: rgb(65, 185, 61);
+        font-size: 1.1em;
+        width: 50%;
+        margin: auto;
+    }
+
+    #footer_little_text{
+        font-size: 0.8em;
+        margin: 0;
+        margin-left: 20px;
+    }
+    #footer_picture{
+        width: 100px;
+        height: 100px;
+        margin-left: auto;
+        border: 2px green dotted;
+    }
+    #footer_picture img{
+        width: 100%;
+        height: 100%;
+    }
+</style>

src/components/home/presentation.vue

@@ -15,14 +15,12 @@
           </p>
         </article>
       </div>
-      <div id="presentation_img"><img src="https://picsum.photos/500/250"></div>
+      <div id="presentation_img"><img :src="welcomeImg"></div>
     </div> <!-- Presentation div -->
 </template>
 
-<script>
-export default {
-
-}
+<script setup>
+  import welcomeImg from "@/assets/svg/welcome.svg";
 </script>
 
 <style>
@@ -55,9 +53,11 @@ export default {
     width: fit-content;
     width: 40%;
     min-width: 500px;
-}
-#presentation_img{
     margin-left: auto;
     margin-top: 20px;
 }
+#presentation_img img{
+    width: 100%;
+    height: 100%;
+}
 </style>