Social links

src/components/footer.vue

@@ -5,11 +5,8 @@
       <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>
+        <social v-for="(e,i) in networks" :key="i" :img="e.img" 
+          :routerLink="e.routerLink" :link="e.link" class="footer_social_network_item" />
 
       </div>
       
@@ -42,13 +39,29 @@
   </footer>
 </template>
 
-<script>
-export default {
+<script setup>
+  import social from './home/libs/social.vue';
 
-}
+  import mailSvg from '@/assets/img/mail.svg';
+  import lineImg from '@/assets/img/line.png';
+  import githubSvg from '@/assets/img/github.svg';
+
+  const networks = [{
+    img:githubSvg,
+    routerLink:false,
+    link:"#"
+  },{
+    img:lineImg,
+    routerLink:false,
+    link:"#"
+  },{
+    img:mailSvg,
+    routerLink:true,
+    link:"#"
+  }];
 </script>
 
-<style>
+<style scoped>
     footer{
         background-color: #2c2b2b;
         margin-top: 50px;
@@ -87,14 +100,9 @@ export default {
     .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%;
+        margin: 0 !important;
+        margin-right: 20px !important;
+        margin-top: 10px !important;
     }
 
     #footer_content_links{

src/components/home/libs/social.vue

@@ -0,0 +1,43 @@
+<template>
+    <div class="network">
+        <RouterLink v-if="routerLink" :to="link">
+            <img :src="img">
+        </RouterLink>
+        <a v-else :href="link" target="_blank">
+            <img :src="img">
+        </a>
+    </div>
+</template>
+
+<script setup>
+    import { RouterLink } from 'vue-router';
+
+    defineProps({
+        img: {
+            type:String,
+            required:true
+        },
+        link:{
+            type:String,
+            required: true
+        },
+        routerLink:{
+            required:false,
+            type:Boolean,
+            default:false
+        }
+    })
+</script>
+
+<style scoped>
+.network{
+    height: 50px;
+    width: 50px;
+    margin-left: 15px;
+}
+.network img{
+    border-radius: 50%;
+    height: 100%;
+    width: 100%;
+}
+</style>

src/components/home/welcome.vue

@@ -11,32 +11,42 @@
                 <dynamicOccupation id="dynamic_occupation" :sentences="occupations" />
               </div>
               <div id="social_networks" class="test">
-                <div class="network">
-                  <img src="https://picsum.photos/50">
-                </div>
-                <div class="network">
-                  <img src="https://picsum.photos/50">
-                </div>
-                <div class="network">
-                  <img src="https://picsum.photos/50">
-                </div>
+                <social v-for="(e,i) in networks" :key="i" :img="e.img" :routerLink="e.routerLink" :link="e.link" />
               </div>
             </div>
-
         </div> <!-- Name div -->
     </div> <!-- Welcome Div -->
 </template>
 
 <script setup>
   import dynamicOccupation from './dynamicOccupation.vue';
+  import social from './libs/social.vue';
   import {useI18n} from 'vue-i18n';
 
+  import mailSvg from '@/assets/img/mail.svg';
+  import lineImg from '@/assets/img/line.png';
+  import githubSvg from '@/assets/img/github.svg';
+
   const i18n = useI18n();
 
   const occupations = [
   i18n.t('home.occupation.ai'), i18n.t('home.occupation.fullstack'),
   i18n.t('home.occupation.student')
   ]
+
+  const networks = [{
+      img:githubSvg,
+      routerLink:false,
+      link:"#"
+    },{
+      img:lineImg,
+      routerLink:false,
+      link:"#"
+  },{
+      img:mailSvg,
+      routerLink:true,
+      link:"#"
+    }];
 </script>
 
 <style scoped>
@@ -95,13 +105,5 @@
     display: flex;
     flex-direction: row;
 }
-.network{
-    height: 50px;
-    width: 50px;
-    margin-left: 15px;
-}
-.network img{
-    border-radius: 50%;
-}
 
 </style>