From e42ecdd3a1c398ea11696c51a70823d488f571a4 Mon Sep 17 00:00:00 2001
From: unurled <unurled@unurled.me>
Date: Thu, 25 Jan 2024 11:53:46 +0100
Subject: [PATCH] ?

---
 src/App.vue                |   6 +-
 src/components/Footer.vue  |  17 ++---
 src/components/Home.vue    |   2 +-
 src/components/Link.vue    |  46 ++++++++----
 src/components/NavBar.vue  |  31 +++++---
 src/components/Project.vue |  33 +++++---
 src/main.ts                |   2 +-
 src/views/Home.vue         | 150 +++++++++++++++++++------------------
 8 files changed, 165 insertions(+), 122 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 70dbd8f..b34d567 100644
--- a/src/App.vue
+++ b/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>
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index 0460cfb..b06b76c 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -6,17 +6,14 @@
 
 <style>
 
-.footer {
-    position: absolute;
-    bottom: 5vh;
-}
+@media only screen and (min-width: 768px) {
+    .git-link {
+        color: var(--dark-accent4);
+    }
 
-.git-link {
-    color: var(--dark-accent4);
-}
-
-.git-link:hover {
-    color: var(--dark-accent6);
+    .git-link:hover {
+        color: var(--dark-accent6);
+    }
 }
 
 </style>
\ No newline at end of file
diff --git a/src/components/Home.vue b/src/components/Home.vue
index 57bc026..66fc9c5 100644
--- a/src/components/Home.vue
+++ b/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";
diff --git a/src/components/Link.vue b/src/components/Link.vue
index 77a2beb..68b01ad 100644
--- a/src/components/Link.vue
+++ b/src/components/Link.vue
@@ -25,27 +25,47 @@ const props = defineProps({
 <style>
 
 .display {
-  display: inline-flex;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
 }
 
 .link {
-  padding: .5em;
+  padding: .2em;
   background-color: var(--dark-shade1);
-  -webkit-box-shadow: 0px 0px 20px 10px #2d3139;
-  -moz-box-shadow: 0px 0px 20px 10px #2d3139;
-  box-shadow: 0px 0px 20px 10px #2d3139;
-  text-shadow: 0px 0px 10px var(--dark-accent4);
+  -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: 2rem;
+  font-size: 1rem;
   color: var(--dark-accent4);
-  margin-right: 3em;
   transition: transform .2s;
 }
 
-.link:hover {
-  color: var(--dark-accent1);
-  background-color: var(--dark-accent4);
-  transform: translate(0, 10%);
-}
+@media only screen and (min-width: 768px) {
+  .display {
+    display: inline-flex;
+  }
 
+  .link {
+    padding: .5em;
+    background-color: var(--dark-shade1);
+    -webkit-box-shadow: 0px 0px 20px 10px #2d3139;
+    -moz-box-shadow: 0px 0px 20px 10px #2d3139;
+    box-shadow: 0px 0px 20px 10px #2d3139;
+    text-shadow: 0px 0px 10px var(--dark-accent4);
+    border-radius: 1em;
+    font-size: 2rem;
+    color: var(--dark-accent4);
+    margin-right: 3em;
+    transition: transform .2s;
+  }
+
+  .link:hover {
+    color: var(--dark-accent1);
+    background-color: var(--dark-accent4);
+    transform: translate(0, 10%);
+  }
+}
 </style>
\ No newline at end of file
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index b89fd3d..46cf6e2 100644
--- a/src/components/NavBar.vue
+++ b/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 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>
 
 </template>
 
 <style>
-.nav {
+
+.links {
     display: flex;
-    position: fixed;
-    top: 2vh;
-    left: 40%; 
-    align-items: center;
+    /* position: fixed; */
+    flex-direction: row;
+    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>
\ No newline at end of file
diff --git a/src/components/Project.vue b/src/components/Project.vue
index 299c09a..463ac99 100644
--- a/src/components/Project.vue
+++ b/src/components/Project.vue
@@ -10,7 +10,7 @@ const props = defineProps({
 </script>
 
 <template>
-    <a  class="card" :href="link">
+    <a class="card" :href="link">
         <h1 class="name">{{ name }}</h1>
         <p class="description">{{ description }}</p>
         <img :src="icon" >
@@ -20,24 +20,35 @@ const props = defineProps({
 <style>
 
 .card {
-    width: 25%;
+    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;
-    max-height: 25%;
 }
 
-.card:hover {
-    color: var(--dark-accent3);
-    transform: translate(0, -8%);
-    color: var(--dark-accent4);
-}
+@media only screen and (min-width: 768px) {
+    .card {
+        width: 25%;
+        color: var(--dark-accent2);
+        border: solid;
+        border-radius: 15px;
+        border-color: var(--dark-accent1);
+        margin-bottom: 10px;
+        transition: .5s transform;
+        max-height: 25%;
+    }
 
-.card:hover .project-link {
-    color: var(--dark-accent3);
-}
+    .card:hover {
+      transform: translate(0, -8%);
+        color: var(--dark-accent4);
+    }
 
+    .card:hover .project-link {
+        color: var(--dark-accent3);
+    }
+}
 </style>
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
index 1d1f13f..25c0e6d 100644
--- a/src/main.ts
+++ b/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)
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 0ef8a16..1a22092 100644
--- a/src/views/Home.vue
+++ b/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 {
-  display: flex;
-  animation: appear 5s ease-in-out;
-  animation-iteration-count: 1;
-  opacity: 1;
-  gap: 3em;
-  align-items: center;
+.item-group {
+      display: inline-block;
+      animation: spin 1s infinite ease-in-out;
 }
-
-.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,39 +47,84 @@ onMounted(() => {
   }
 }
 
-.item-group {
-    display: inline-block;
-    animation: spin 1s infinite ease-in-out;
+
+@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;
   }
 
-
-.name-logo {
-  position: fixed;
-  color: var(--dark-shade7);
-  animation: logo 2s ease-in-out;
-  animation-iteration-count: 1;
-  top: 5vh; left: 7.5vw;
-}
-
-@keyframes logo {
-  0% {
-    top: 45vh; 
-    left: 45vw;
-    opacity: 0;
+  .infos {
+    width: 15em;
+    margin-top: 4.5%;
+    flex-shrink: 5;
   }
-  100% {
+
+  .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);
+    animation: logo 2s ease-in-out;
+    animation-iteration-count: 1;
     top: 5vh; left: 7.5vw;
-    opacity: 1;
+  }
+
+  @keyframes spin {
+    0% {
+      transform: rotate(-15deg);
+    }
+    50% {
+      transform: rotate(15deg);
+    }
+    100% {
+      transform: rotate(-15deg);
+    }
+  }
+
+  @keyframes logo {
+    0% {
+      top: 45vh; 
+      left: 45vw;
+      opacity: 0;
+    }
+    100% {
+      top: 5vh; left: 7.5vw;
+      opacity: 1;
+    }
+  }
+
+  @keyframes appear {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
   }
 }
-
-@keyframes appear {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-
 </style>
\ No newline at end of file