?

src/App.vue

@@ -1,15 +1,17 @@
 <script setup lang="ts">
+
 import NavBar from "./components/NavBar.vue"
 import Footer from "./components/Footer.vue"
 
 </script>
 
 <template>
-  <NavBar />
+  <NavBar class="navbar" />
   <router-view />
   <Footer />
-
 </template>
 
 <style scoped>
+@media only screen and (min-width: 768px) {
+}
 </style>

src/components/Footer.vue

@@ -6,11 +6,7 @@
 
 <style>
 
-.footer {
+@media only screen and (min-width: 768px) {
-    position: absolute;
-    bottom: 5vh;
-}
-
     .git-link {
         color: var(--dark-accent4);
     }
@@ -18,5 +14,6 @@
     .git-link:hover {
         color: var(--dark-accent6);
     }
+}
 
 </style>

src/components/Home.vue

@@ -5,7 +5,7 @@ defineProps<{ name: string }>()
 </script>
 
 <script lang="ts">
-var rotate = document.getElementById("rotate");
+const rotate = document.getElementById("rotate");
 
 if (rotate != null) {
     rotate.style.animation = "rotate 0.4s linear infinite both";

src/components/Link.vue

@@ -24,6 +24,26 @@ const props = defineProps({
 
 <style>
 
+.display {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+}
+
+.link {
+  padding: .2em;
+  background-color: var(--dark-shade1);
+  -webkit-box-shadow: 0px 0px 10px 5px #2d3139;
+  -moz-box-shadow: 0px 0px 10px 5px #2d3139;
+  box-shadow: 0px 0px 10px 5px #2d3139;
+  text-shadow: 0px 0px 5px var(--dark-accent4);
+  border-radius: 1em;
+  font-size: 1rem;
+  color: var(--dark-accent4);
+  transition: transform .2s;
+}
+
+@media only screen and (min-width: 768px) {
   .display {
     display: inline-flex;
   }
@@ -47,5 +67,5 @@ const props = defineProps({
     background-color: var(--dark-accent4);
     transform: translate(0, 10%);
   }
-
+}
 </style>

src/components/NavBar.vue

@@ -5,24 +5,33 @@ import Link from './Link.vue';
 </script>
 
 <template>
-    <div class="nav">
     <div class="links">
         <Link href="https://unurled.me" :isExternal="true" label="Website"  icon="mdi:web" />
         <Link href="https://github.com/unurled" :isExternal="true" label="Github"  icon="feather:github"/>
         <Link href="https://git.unurled.me/unurled" :isExternal="true" label="Git"  icon="mdi:git"/>
     </div>
-    </div>
 
 </template>
 
 <style>
-.nav {
+
+.links {
     display: flex;
-    position: fixed;
+    /* position: fixed; */
-    top: 2vh;
+    flex-direction: row;
-    left: 40%; 
+    flex-wrap: wrap;
+    gap: 1em;
+    justify-content: center;
+    width: 75vw;
+}
+
+@media only screen and (min-width: 768px) {
+    .links {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
         align-items: center;
         justify-content: center;
     }
-
+}
 </style>

src/components/Project.vue

@@ -19,6 +19,18 @@ const props = defineProps({
 
 <style>
 
+.card {
+    display: flex;
+    flex-direction: column;
+    color: var(--dark-accent2);
+    border: solid;
+    border-radius: 15px;
+    border-color: var(--dark-accent1);
+    margin-bottom: 10px;
+    transition: .5s transform;
+}
+
+@media only screen and (min-width: 768px) {
     .card {
         width: 25%;
         color: var(--dark-accent2);
@@ -31,7 +43,6 @@ const props = defineProps({
     }
 
     .card:hover {
-    color: var(--dark-accent3);
       transform: translate(0, -8%);
         color: var(--dark-accent4);
     }
@@ -39,5 +50,5 @@ const props = defineProps({
     .card:hover .project-link {
         color: var(--dark-accent3);
     }
-
+}
 </style>

src/main.ts

@@ -1,7 +1,7 @@
 import './style.css'
 import './hex.css'
 import { createApp } from 'vue'
-import { router } from './router/index'
+import { router } from './router'
 import App from './App.vue'
 
 const app = createApp(App)

src/views/Home.vue

@@ -1,15 +1,7 @@
 <script setup lang="ts">
 
-import { onMounted, ref } from 'vue'
-
 import Project from '../components/Project.vue'
 
-const isShowing = ref(false)
-onMounted(() => {
-  // setup animations to start when on mount
-  isShowing.value = true
-})
-
 </script>
 
 <template>
@@ -39,43 +31,10 @@ onMounted(() => {
 
 <style>
 
-.main-content {
+.item-group {
-  display: flex;
+      display: inline-block;
-  animation: appear 5s ease-in-out;
+      animation: spin 1s infinite ease-in-out;
-  animation-iteration-count: 1;
-  opacity: 1;
-  gap: 3em;
-  align-items: center;
 }
-
-.infos {
-  position: absolute;
-  width: 15em;
-  left: 5em;
-  margin-top: 4.5%;
-  flex-grow: 1;
-}
-
-.separator {
-  position: absolute;
-  left: 25rem;
-  margin-top: 4.5%;
-  height: 60vh;
-  width: 5px;
-  border-radius: 150000px;
-  background-color: var(--dark-shade7);
-  flex-grow: 5;
-}
-
-.projects {
-  position: absolute;
-  left: 30rem;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  gap: 10px;
-}
-
 @keyframes spin {
   0% {
     transform: rotate(-15deg);
@@ -88,12 +47,45 @@ onMounted(() => {
   }
 }
 
+
+@media only screen and (min-width: 768px) {
+  .main-content {
+    display: flex;
+    animation: appear 5s ease-in-out;
+    animation-iteration-count: 1;
+    opacity: 1;
+    gap: 3em;
+    align-items: center;
+  }
+
+  .infos {
+    width: 15em;
+    margin-top: 4.5%;
+    flex-shrink: 5;
+  }
+
+  .separator {
+    left: 25rem;
+    margin-top: 4.5%;
+    height: 60vh;
+    width: 5px;
+    border-radius: 150000px;
+    background-color: var(--dark-shade7);
+    flex-grow: 5;
+  }
+
+  .projects {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 10px;
+  }
+
   .item-group {
       display: inline-block;
       animation: spin 1s infinite ease-in-out;
     }
 
-
   .name-logo {
     position: fixed;
     color: var(--dark-shade7);
@@ -102,6 +94,18 @@ onMounted(() => {
     top: 5vh; left: 7.5vw;
   }
 
+  @keyframes spin {
+    0% {
+      transform: rotate(-15deg);
+    }
+    50% {
+      transform: rotate(15deg);
+    }
+    100% {
+      transform: rotate(-15deg);
+    }
+  }
+
   @keyframes logo {
     0% {
       top: 45vh; 
@@ -122,5 +126,5 @@ onMounted(() => {
       opacity: 1;
     }
   }
-
+}
 </style>