Improve transitions between components

public/index.html

@@ -9,6 +9,14 @@
       .hidden {
         display: none;
       }
+      .background {
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity .25s ease-out;
+      }
+      .appear {
+        opacity: 1;
+      }
     </style>
     <title><%= htmlWebpackPlugin.options.title %></title>
   </head>
@@ -20,7 +28,7 @@
         continue.</strong
       >
     </noscript>
-    <div class="hidden" id="background">
+    <div class="background hidden" id="background">
       <style>
         css-doodle {
           --color: #e9d8a6,#f4f4f4,#94d2bd,#005f73,#001219;

src/App.vue

@@ -125,16 +125,22 @@ body {
   position: relative;
   color: inherit;
   cursor: pointer;
+  height: 32px;
+  width: 32px;
+  margin-left: -0.5rem;
 
   &--disabled {
     cursor: initial;
   }
 
   &-text {
+    line-height: 1;
+  }
+
+  &-circle {
     position: absolute;
     top: 0;
-    left: 50%;
-    transform: translateX(-50%);
+    left: 0;
   }
 }
 

src/component/Contact.vue

@@ -13,15 +13,17 @@ export default defineComponent({
   <address itemprop="contactPoint" class="contact">
     <h2 class="contact-header">Contact</h2>
     <a
-      class="icon"
+      target="_blank"
+      class="icon icon-email"
       tabindex="0"
       href="mailto:bento-miguel@outlook.com"
       itemprop="email"
     >
       <icon-email />
     </a>
     <a
-      class="icon"
+      target="_blank"
+      class="icon icon-github"
       tabindex="0"
       href="https://github.com/Miguel-Bento-Github"
       itemprop="url"
@@ -30,7 +32,8 @@ export default defineComponent({
     </a>
 
     <a
-      class="icon"
+      target="_blank"
+      class="icon icon-linked"
       tabindex="0"
       href="https://www.linkedin.com/in/miguel-angelo-bento/"
       itemprop="url"
@@ -58,8 +61,10 @@ export default defineComponent({
   display: none;
 }
 
-.icon,
-.icon-email {
+.icon {
+  height: 48px;
+  width: 48px;
+  padding: 0.25rem;
   transition: transform 0.1s ease;
   border: 2px currentColor solid;
   border-radius: 50%;
@@ -68,23 +73,25 @@ export default defineComponent({
     transition: transform 0.25s ease;
     transform: scale(1.1);
   }
-}
 
-.icon {
-  height: 48px;
-  width: 48px;
-  padding: 0.25rem;
+  @media screen and (max-width: 768px) {
+    position: fixed;
 
-  &:nth-child(4) {
-    align-self: flex-start;
-  }
+    &:nth-child(4) {
+      bottom: 3rem;
+      left: 3rem;
+    }
 
-  &:nth-child(3) {
-    align-self: center;
-  }
+    &:nth-child(3) {
+      bottom: 3rem;
+      left: 50%;
+      transform: translateX(-50%);
+    }
 
-  &:nth-child(2) {
-    align-self: flex-end;
+    &:nth-child(2) {
+      bottom: 3rem;
+      right: 3rem;
+    }
   }
 }
 </style>

src/component/icon/Circle.vue

@@ -11,7 +11,6 @@ export default defineComponent({
 <template>
   <svg
     class="svg"
-    :class="{ 'svg--active': isActive }"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     version="1.1"

src/hook/useDoodle.ts

@@ -13,7 +13,13 @@ export const useDoodle = () => {
   watch(isBackgroundActive, () => {
     const background = document.getElementById("background");
     const { matches } = useScreenQuery("(prefers-reduced-motion)");
-    if (background && !matches.value) background.classList.remove("hidden");
+    if (background && !matches.value) {
+      background.classList.remove("hidden");
+
+      setTimeout(() => {
+        background.classList.add("appear");
+      }, 250);
+    }
   });
 
   const toggleBackgroundDoodle = () => {