WIP

frontend/.vscode/settings.json

@@ -0,0 +1,17 @@
+{
+    "files.associations": {
+        "*.css": "tailwindcss"
+    },
+    "editor.quickSuggestions": {
+        "other": "on",
+        "comments": "off",
+        "strings": "on"
+    },
+    "tailwindCSS.classAttributes": [
+        "class",
+        "ui"
+    ],
+    "tailwindCSS.experimental.classRegex": [
+        ["ui:\\s*{([^)]*)\\s*}", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
+    ]
+}

frontend/app/app.config.ts

@@ -2,7 +2,7 @@ export default defineAppConfig({
   ui: {
     colors: {
       primary: 'indigo',
-      secondary: 'amber',
+      secondary: 'purple',
       neutral: 'slate'
     },
     icons: {

frontend/app/components/AppHeader.vue

@@ -45,7 +45,24 @@
     </template>
 
     <template #body>
-      <UNavigationMenu :items="items" orientation="vertical" class="-mx-2.5" />
+      <UNavigationMenu
+        :items="items"
+        orientation="vertical"
+        class="-mx-2.5"
+      >
+        <template #item="{ item, active }">
+          <NuxtLink
+            :to="item.to"
+            class="flex items-center gap-3 px-2 py-2 text-base font-bold rounded-lg transition-colors"
+            :class="[
+              active ? 'text-primary-500' : 'text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-800'
+            ]"
+          >
+            <icon :name="item.icon" class="w-7 h-7" />
+            <span>{{ item.label }}</span>
+          </NuxtLink>
+        </template>
+      </UNavigationMenu>
     </template>
   </UHeader>
 </template>

frontend/app/pages/index.vue

@@ -1,11 +1,100 @@
 <template>
   <UPage>
-    <UPageHero title="Hello world"/>
-    <UPageBody>
-      Hi!
-    </UPageBody>
-  </UPage>
-<!--   <UContainer class="flex items-center justify-center min-h-screen">
-    <div>Hello world!</div>
-  </UContainer> -->
+    <!-- TODO: Nuxt image module maybe? Some form of lazyloading / smooth loading -->
+    <UPageHero class="bg-[url('/images/bg.jpg')] bg-cover bg-center min-h-screen -mt-16 flex items-center">
+      <template #title>
+        <p class="u-page-hero-title text-white glowy">
+          Hello World.
+        </p>
       </template>
+      <template #description>
+        <p class="u-page-hero-description text-white/95 text-shadow-md text-shadow-black/50">
+          Welcome to my corner of the internet!<br/>
+          Have a look around ;)
+        </p>
+      </template>
+      <template #links>
+        <div class="u-page-hero-links">
+          <UButton
+            size="xl"
+            trailing-icon="i-line-md-arrow-right"
+            color="primary"
+            class="actionbtn text-white/80 bg-gray-900/20 hover:bg-gray-900/15 active:bg-gray-900/30"
+            style="font-family: monospace;"
+            variant="soft"
+          >
+            Let's Go!
+          </UButton>
+        </div>
+      </template>
+    </UPageHero>
+  </UPage>
+</template>
+
+<style lang="css" scoped>
+@keyframes glowyanim {
+  0% {
+    text-shadow:
+      0 0 1em hsla(320, 100%, 50%, 0.2),
+      0 0 0.125em hsla(320, 100%, 60%, 0.3),
+      -1em -0.125em 0.5em hsla(40, 100%, 60%, 0),
+      1em 0.125em 0.5em hsla(200, 100%, 60%, 0);
+  }
+  
+  30% {
+    text-shadow:
+      0 0 1em hsla(320, 100%, 50%, 0.5),
+      0 0 0.125em hsla(320, 100%, 60%, 0.5),
+      -0.5em -0.125em 0.25em hsla(40, 100%, 60%, 0.2),
+      0.5em 0.125em 0.25em hsla(200, 100%, 60%, 0.4);
+  }
+  
+  40% {
+    text-shadow:
+      0 0 1em hsla(320, 100%, 50%, 0.5),
+      0 0 0.125em hsla(320, 100%, 90%, 0.5),
+      -0.25em -0.125em 0.125em hsla(40, 100%, 60%, 0.2),
+      0.25em 0.125em 0.125em hsla(200, 100%, 60%, 0.4);
+  }
+  
+  70% {
+    text-shadow:
+      0 0 1em hsla(320, 100%, 50%, 0.5),
+      0 0 0.125em hsla(320, 100%, 60%, 0.5),
+      0.5em -0.125em 0.25em hsla(40, 100%, 60%, 0.2),
+      -0.5em 0.125em 0.25em hsla(200, 100%, 60%, 0.4);
+  }
+  
+  100% {
+    text-shadow:
+      0 0 1em hsla(320, 100%, 50%, 0.2),
+      0 0 0.125em hsla(320, 100%, 60%, 0.3),
+      1em -0.125em 0.5em hsla(40, 100%, 60%, 0),
+      -1em 0.125em 0.5em hsla(200, 100%, 60%, 0);
+  }
+}
+
+p {
+  font-family: monospace;
+}
+
+p.glowy {
+  margin: auto;
+  font-size: 3.5rem;
+  font-weight: 500;
+  animation: glowyanim 5s 750ms linear infinite;
+  text-align: center;
+  hanging-punctuation: first;
+  text-wrap: balance;
+}
+
+.actionbtn {
+  box-shadow: 3px 3px 3px rgba(0,0,0,0.5) !important;
+}
+.actionbtn:default {
+  box-shadow: 3px 3px 3px rgba(0,0,0,0.5) !important;
+}
+.actionbtn:active {
+  box-shadow: 2px 2px 2px rgba(0,0,0,0.5) !important;
+}
+</style>

frontend/package.json

@@ -19,6 +19,9 @@
   },
   "trustedDependencies": [
     "@parcel/watcher",
-    "unrs-resolver"
+    "esbuild",
+    "sharp",
+    "unrs-resolver",
+    "vue-demi"
   ]
 }