WIP

package.json

@@ -8,7 +8,7 @@
   },
   "dependencies": {
     "vite": "2.5.1",
-    "vue": "3.2.12"
+    "vue": "3.2.40"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "1.1.5",

src/App.vue

@@ -6,11 +6,27 @@
     <div class="hidden lg:block lg:fixed z-50 right-2 top-2">
       <DarkModeSwitch />
     </div>
-    <Menu />
-    <Contact />
     <div class="main-content max-w-full flex justify-center">
       <div
-        class="w-4/5 flex flex-col gap-12 lg:gap-32 pb-16 py-0 md:py-4 lg:py-8 px-0 sm:px-2 md:px-4 lg:px-8 mt-12 sm:mt-0 overflow-visible"
+        class="
+          flex flex-col
+          justify-center
+          items-center
+          gap-12
+          lg:gap-32
+          pb-16
+          py-0
+          w-full
+          md:py-4
+          lg:py-8
+          px-0
+          sm:px-2
+          md:px-4
+          lg:px-8
+          mt-12
+          sm:mt-0
+          overflow-visible
+        "
       >
         <Projects />
         <Skills />
@@ -27,8 +43,7 @@ import { projects } from './data'
 import Projects from './components/organisms/Projects.vue'
 import Skills from './components/organisms/Skills.vue'
 import Experiences from './components/organisms/Experiences.vue'
-import Contact from './components/molecules/Contact.vue'
-import Menu from './components/molecules/Menu/index.vue'
+import ContactBlock from './components/molecules/ContactBlock.vue'
 import DarkModeSwitch from './components/atoms/DarkModeSwitch.vue'
 import Landing from './components/organisms/Landing.vue'
 import ValuesWall from './components/organisms/Introduction.vue'

src/components/atoms/Icon.vue

@@ -3,35 +3,37 @@
   <img v-else-if="isWebpIcon" :src="imgSource" :alt="kind" />
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { onMounted, ref, h } from 'vue'
+
+export interface IconProps {
+  kind: String
+}
+
 const svgComponent = ref()
 const imgSource = ref('')
 
 const isSvgIcon = ref(false)
 const isWebpIcon = ref(false)
 
-const props = defineProps({
-  kind: String,
-  as: String,
-})
+const props = defineProps<IconProps>()
 
 onMounted(async () => {
   const icons = import.meta.glob('../../assets/icons/*.{svg,webp}')
   isSvgIcon.value = icons[`../../assets/icons/${props.kind}.svg`]
   isWebpIcon.value = icons[`../../assets/icons/${props.kind}.webp`]
 
-  if (!isSvgIcon && !isWebpIcon) {
+  if (!isSvgIcon.value && !isWebpIcon.value) {
     import.meta.env.DEV && console.log(`icon '${props.kind}' is missing from icon folder. Nothing is going to be rendered.`)
     return
   }
 
   if (isSvgIcon.value) {
     const currentIcon = await icons[`../../assets/icons/${props.kind}.svg`]()
-    svgComponent.value = props.as ? h(props.as, {}, currentIcon.default()) : currentIcon.default
+    svgComponent.value = currentIcon.default
   } else if (isWebpIcon.value) {
     const currentIcon = await icons[`../../assets/icons/${props.kind}.webp`]()
-    imgSource.value = props.as ? h(props.as, {}, currentIcon.default()) : currentIcon.default
+    imgSource.value = currentIcon.default
   }
 })
 </script>

src/components/atoms/MouseTracker.vue

@@ -47,7 +47,7 @@ const handleKeyPress = () => {
 <style scoped>
 @media (pointer: fine) {
   .mouse {
-    @apply h-6 w-6 absolute rounded-full ring-2 ring-ab-primary;
+    @apply h-6 w-6 absolute rounded-full ring-2 ring-ab-primary dark:ring-white;
   }
 }
 

src/components/molecules/ContactBlock.vue

@@ -0,0 +1,59 @@
+<template>
+  <ul
+    class="
+      shadow-lg
+      text-ab-primary
+      bg-white
+      dark:bg-ab-primary
+      flex
+      bottom-4
+      lg:bottom-auto lg:top-6 lg:left-6
+      overflow-hidden
+      transition-all
+      duration-500
+      backdrop-filter backdrop-blur-md backdrop-saturate-150
+      gap-1
+      p-2
+      z-20
+      rounded-full
+    "
+  >
+    <li>
+      <button @click="openUrl('https://www.linkedin.com/in/arthur-brière/')" aria-label="linkedin">
+        <Icon kind="linkedin" class="w-8 h-8" />
+      </button>
+    </li>
+    <li>
+      <button @click="call()" aria-label="call">
+        <Icon kind="phone" class="w-4 h-4" />
+      </button>
+    </li>
+    <li>
+      <button @click="email()" aria-label="email">
+        <Icon kind="email" class="w-4 h-4" />
+      </button>
+    </li>
+    <li>
+      <button @click="openCv()" aria-label="cv"><Icon kind="news" class="w-4 h-4" /></button>
+    </li>
+  </ul>
+</template>
+
+<script setup>
+import { openUrl, call, email, openCv } from '../../utils/actions'
+import Icon from '../atoms/Icon.vue'
+</script>
+
+<style lang="scss" scoped>
+.links {
+  .link-label {
+    @apply hidden;
+  }
+}
+
+button {
+  :deep(svg) {
+    @apply w-8 h-8 stroke-current p-1;
+  }
+}
+</style>