Social links

src/assets/img/github.svg

@@ -0,0 +1,2 @@
+<?xml version='1.0' encoding='utf-8'?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 5000 5000" style="enable-background:new 0 0 5000 5000;"> <style type="text/css"> .st0{fill:#4C4C4C;} .st1{fill:#FFFFFF;} </style> <rect class="st0" width="5000" height="5000"/> <g> <circle class="st0" cx="2500" cy="2495.9" r="1675.1"/> <path class="st1" d="M2500,789c-943.8,0-1708.2,764.4-1708.2,1708.2c0,755.9,489,1394.3,1168,1620.7 c85.4,14.9,117.4-36.3,117.4-81.1c0-40.6-2.1-175.1-2.1-318.2c-429.2,79-540.2-104.6-574.4-200.7 c-19.2-49.1-102.5-200.7-175.1-241.3c-59.8-32-145.2-111-2.1-113.2c134.5-2.1,230.6,123.8,262.6,175.1 c153.7,258.4,399.3,185.8,497.5,140.9c14.9-111,59.8-185.8,108.9-228.5c-380.1-42.7-777.2-190-777.2-843.4 c0-185.8,66.2-339.5,175.1-459.1c-17.1-42.7-76.9-217.8,17.1-452.7c0,0,143.1-44.8,469.8,175.1c136.7-38.4,281.9-57.7,427.1-57.7 s290.4,19.2,427.1,57.7c326.7-222.1,469.8-175.1,469.8-175.1c94,234.9,34.2,410,17.1,452.7c108.9,119.6,175.1,271.2,175.1,459.1 c0,655.5-399.3,800.7-779.4,843.4c61.9,53.4,115.3,155.9,115.3,316c0,228.5-2.1,412.1-2.1,469.8c0,44.8,32,98.2,117.4,81.1 c674.7-226.3,1163.7-866.9,1163.7-1620.7C4208.2,1553.4,3443.8,789,2500,789z"/> </g> </svg>

src/assets/img/mail.svg

@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   enable-background="new -0.258 -0.548 123.547 123.539"
+   viewBox="-0.258 -0.548 123.539 123.555"
+   version="1.1"
+   id="svg1055"
+   sodipodi:docname="mail.svg"
+   width="123.539"
+   height="123.555"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1059" />
+  <sodipodi:namedview
+     id="namedview1057"
+     pagecolor="#ffffff"
+     bordercolor="#999999"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     inkscape:zoom="3.7912402"
+     inkscape:cx="68.05161"
+     inkscape:cy="54.203898"
+     inkscape:window-width="1674"
+     inkscape:window-height="749"
+     inkscape:window-x="710"
+     inkscape:window-y="206"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg1055" />
+  <path
+     d="M 108.515,-0.548 H 14.484 c -8.148,0 -14.742,6.609 -14.742,14.766 v 94.023 c 0,8.148 6.594,14.766 14.742,14.766 h 94.031 c 8.148,0 14.766,-6.617 14.766,-14.766 V 14.218 C 123.28,6.062 116.663,-0.548 108.515,-0.548 Z"
+     fill="#231f20"
+     id="path1049"
+     inkscape:label="path1049" />
+  <path
+     d="M 99.140859,83.690996 76.509059,61.038833 99.139973,38.386671 v 45.304325 z m -70.681546,4.301839 22.672525,-22.630914 0.968556,0.926945 c 5.353616,5.104837 13.860793,5.104837 18.985993,0 L 72.062025,65.32031 94.83902,87.992835 Z M 24.392088,38.386671 46.989359,61.038833 24.351362,83.690996 Z M 94.797409,34.063584 66.957188,61.882557 c -2.828643,2.849891 -7.89187,2.787032 -10.803734,-0.110667 L 28.500924,34.063584 Z M 18.243441,27.88041 V 94.08659 H 105.49756 V 27.88041 Z"
+     fill="#ffffff"
+     id="path1053"
+     style="stroke-width:0.885334" />
+</svg>

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>