complete site !

src/components/Footer.vue

@@ -0,0 +1,22 @@
+<template>
+    <div class="footer">
+        <p>Made with ❤️ by Unurled. View source on my <a class="git-link" href="https://git.unurled.me/unurled/site">git</a></p>
+    </div>
+</template>
+
+<style>
+
+.footer {
+    position: absolute;
+    bottom: 5vh;
+}
+
+.git-link {
+    color: var(--dark-accent4);
+}
+
+.git-link:hover {
+    color: var(--dark-accent6);
+}
+
+</style>

src/components/HelloWorld.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+defineProps<{ msg: string }>()
+
+const count = ref(0)
+</script>
+
+<template>
+  <h1>{{ msg }}</h1>
+
+  <div class="card">
+    <button type="button" @click="count++">count is {{ count }}</button>
+    <p>
+      Edit
+      <code>components/HelloWorld.vue</code> to test HMR
+    </p>
+  </div>
+
+  <p>
+    Check out
+    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
+      >create-vue</a
+    >, the official Vue + Vite starter
+  </p>
+  <p>
+    Install
+    <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
+    in your IDE for a better DX
+  </p>
+  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
+</template>
+
+<style scoped>
+.read-the-docs {
+  color: #888;
+}
+</style>

src/components/Home.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+
+defineProps<{ name: string }>()
+
+</script>
+
+<script lang="ts">
+var rotate = document.getElementById("rotate");
+
+if (rotate != null) {
+    rotate.style.animation = "rotate 0.4s linear infinite both";
+}
+</script>
+
+<template>
+    <h1 class="name-logo">{{ name }} <span id="rotate" class="rotate-25-cw">👋</span></h1>
+
+</template>
+
+<style>
+
+.name-logo {
+    color: var(--dark-shade7);
+}
+
+.wave {
+    position: relative;
+    animation-name: wave;
+    animation-duration: 4s;
+    animation-iteration-count: infinite;
+}
+
+.rotate-25-cw {
+	-webkit-animation: rotate-25-cw 0.4s linear infinite both;
+	        animation: rotate-25-cw 0.4s linear infinite both;
+}
+
+@-webkit-keyframes rotate-25-cw {
+  0% {
+    -webkit-transform: rotate(0);
+            transform: rotate(0);
+  }
+  100% {
+    -webkit-transform: rotate(25deg);
+            transform: rotate(25deg);
+  }
+}
+@keyframes rotate-25-cw {
+  0% {
+    -webkit-transform: rotate(0);
+            transform: rotate(0);
+  }
+  100% {
+    -webkit-transform: rotate(25deg);
+            transform: rotate(25deg);
+  }
+}
+
+
+@keyframes wave {
+    0% {
+        transform: rotate(25deg);
+    }
+    25% {
+        transform: rotate(-25deg);
+    }
+    50% {
+        transform: rotate(25deg);
+    }
+    75% {
+        transform: rotate(-25deg);
+    }
+    100% {
+        transform: rotate(25deg);
+    }
+}
+
+</style>

src/components/Link.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+
+import { Icon } from '@iconify/vue';
+
+const props = defineProps({
+  isExternal:  { type: Boolean, default: false },
+  href: { type: String, default: '/' },
+  label: { type: String, default: null },
+  icon: { type: String, default: null }
+})
+
+</script>
+
+<template>
+  <div class="display">
+    <a v-if="isExternal" :href="href" target="_blank" class="link">
+    <div class="box"></div>
+    <Icon v-if="icon" :icon="icon" class="text-lg md:text-2xl" />
+    <span v-if="label">{{label}}</span>
+  </a>
+  </div>
+  
+</template>
+
+<style>
+
+.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>

src/components/NavBar.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+
+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 {
+    display: flex;
+    position: fixed;
+    top: 2vh;
+    left: 40%; 
+    align-items: center;
+    justify-content: center;
+}
+
+.links {
+    
+}
+
+</style>

src/components/Project.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+
+const props = defineProps({
+  name:  { type: String, default: "" },
+  description: { type: String, default: "" },
+  link: { type: String, default: null },
+  icon: { type: String, default: null }
+})
+
+</script>
+
+<template>
+    <a  class="card" :href="link">
+        <h1 class="name">{{ name }}</h1>
+        <p class="description">{{ description }}</p>
+        <img :src="icon" >
+    </a>
+</template>
+
+<style>
+
+.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 {
+    color: var(--dark-accent3);
+    transform: translate(0, -8%);
+    color: var(--dark-accent4);
+}
+
+.card:hover .project-link {
+    color: var(--dark-accent3);
+}
+
+</style>