make mouse button and social bar conditionally rendered

src/App.vue

@@ -1,7 +1,7 @@
 <script setup>
 import ThreeCanvas from './components/ThreeCanvas.vue'
 import PortfolioContent from './components/PortfolioContent.vue'
-import SocialBar from './components/SocialBar.vue'
+import VerticalSocialBar from './components/VerticalSocialBar.vue'
 import PortfolioLogo from './components/PortfolioLogo.vue'
 import { ref } from 'vue'
 
@@ -28,7 +28,7 @@ const toggleExperience = () => {
 <template>
   <PortfolioLogo :content="content" :toggle="toggleContent" />
 
-  <SocialBar />
+  <VerticalSocialBar />
 
   <ThreeCanvas v-if="experience.isEnabled" :content="content" />
 

src/components/ContentTechnologies.vue

@@ -19,7 +19,7 @@ import icons from './_export'
 </script>
 
 <template>
-  <h4 class="section-title text-glow">Technologies</h4>
+  <h4 class="section-title text-glow mobile:text-center">Technologies</h4>
 
   <ul class="tech-list">
     <li v-for="(item, index) in icons">

src/components/HorizontalSocialBar.vue

@@ -0,0 +1,15 @@
+<script setup>
+import { links } from '../socialData'
+</script>
+
+<template>
+  <nav class="flex w-full mb-10">
+    <ul class="flex w-full justify-evenly">
+      <li class="" v-for="{ link, iconSrc, alt, text } in links">
+        <a target="_blank" :href="link">
+          <img class="h-9" :src="iconSrc" :alt="alt" />
+        </a>
+      </li>
+    </ul>
+  </nav>
+</template>

src/components/PortfolioBio.vue

@@ -44,12 +44,10 @@ onMounted(() => {
 
     <div class="shadowed-text max-w-full">
       <h2
-        class="typewriter-text my-6 mx-0 text-4xl desktop:text-center tablet:text-xl mobile:text-lg"
+        class="typewriter-text my-6 mx-0 text-4xl tablet:text-center tablet:text-xl mobile:text-lg"
       />
 
-      <h3
-        class="text-lg my-6 mx-0 desktop:text-base tablet:text-sm tablet:text-center"
-      >
+      <h3 class="text-lg my-6 mx-0 tablet:text-base tablet:text-center">
         I build impactful websites that bring success to your business
       </h3>
     </div>

src/components/PortfolioContent.vue

@@ -37,12 +37,14 @@
 </style>
 
 <script setup>
+import { useWindowSize } from '@vueuse/core'
 import PortfolioBio from './PortfolioBio.vue'
 import ScrollAnimatedIcon from './ScrollAnimatedIcon.vue'
 import ContentProjects from './ContentProjects.vue'
 import ContentContributions from './ContentContributions.vue'
 import ContentTechnologies from './ContentTechnologies.vue'
 import ExperienceButton from './ExperienceButton.vue'
+import HorizontalSocialBar from './HorizontalSocialBar.vue'
 import { onMounted, ref, computed } from 'vue'
 
 const {
@@ -61,6 +63,7 @@ const {
 
 const isFirstLoad = ref(false)
 const opacity = computed(() => (isFirstLoad.value ? 1 : 0))
+const { width } = useWindowSize()
 
 onMounted(() =>
   setTimeout(() => {
@@ -75,7 +78,7 @@ onMounted(() =>
       <PortfolioBio />
 
       <div
-        class="flex justify-center gap-x-10 mb-40 mobile:flex-col mobile:gap-y-6 mobile:items-center"
+        class="flex justify-center gap-x-10 mb-40 tablet:flex-col tablet:gap-y-6 tablet:mb-20 tablet:items-center"
       >
         <ExperienceButton
           v-if="experience.isEnabled"
@@ -89,7 +92,8 @@ onMounted(() =>
         />
       </div>
 
-      <ScrollAnimatedIcon />
+      <ScrollAnimatedIcon v-if="width >= 786" />
+      <HorizontalSocialBar v-else />
 
       <section
         class="backdrop-blur-lg grid text-base text-white rounded-lg px-8 py-4 tablet:px-6 tablet:py-2"

src/components/ScrollAnimatedIcon.vue

@@ -18,7 +18,7 @@
 .dot {
   position: absolute;
   top: 10px;
-  left: 8.5px;
+  left: 6.3px;
   width: 7px;
   height: 7px;
   border-radius: 50%;

src/components/SocialBar.vue → src/components/VerticalSocialBar.vue

@@ -33,40 +33,9 @@
   transition: opacity 0.5s, visibility 0.5s linear;
 }
 </style>
-<script setup>
-import githubIcon from '/social-icons/github-icon.png'
-import linkedinIcon from '/social-icons/linkedin-icon.png'
-import mailIcon from '/social-icons/resume-icon.png'
-import cvIcon from '/social-icons/email-icon.png'
-
-import { ref } from 'vue'
 
-const links = ref([
-  {
-    link: 'https://github.com/Vikms95',
-    iconSrc: githubIcon,
-    text: 'Github',
-    alt: 'github',
-  },
-  {
-    link: 'https://www.linkedin.com/in/v%C3%ADctor-mart%C3%ADn-serra-b4003487/',
-    iconSrc: linkedinIcon,
-    text: 'Linkedin',
-    alt: 'linkedin',
-  },
-  {
-    link: 'https://github.com/Vikms95',
-    iconSrc: mailIcon,
-    text: 'Download my resume',
-    alt: 'emails',
-  },
-  {
-    link: 'https://github.com/Vikms95',
-    iconSrc: cvIcon,
-    text: 'Send me an e-mail',
-    alt: 'cv',
-  },
-])
+<script setup>
+import { links } from '../socialData'
 </script>
 
 <template>

src/socialData.js

@@ -0,0 +1,31 @@
+import githubIcon from '/social-icons/github-icon.png'
+import linkedinIcon from '/social-icons/linkedin-icon.png'
+import mailIcon from '/social-icons/resume-icon.png'
+import cvIcon from '/social-icons/email-icon.png'
+
+export const links = [
+  {
+    link: 'https://github.com/Vikms95',
+    iconSrc: githubIcon,
+    text: 'Github',
+    alt: 'github',
+  },
+  {
+    link: 'https://www.linkedin.com/in/v%C3%ADctor-mart%C3%ADn-serra-b4003487/',
+    iconSrc: linkedinIcon,
+    text: 'Linkedin',
+    alt: 'linkedin',
+  },
+  {
+    link: 'https://github.com/Vikms95',
+    iconSrc: mailIcon,
+    text: 'Download my resume',
+    alt: 'emails',
+  },
+  {
+    link: 'https://github.com/Vikms95',
+    iconSrc: cvIcon,
+    text: 'Send me an e-mail',
+    alt: 'cv',
+  },
+]