Artciles and Uses page

src/components/Footer.vue

@@ -3,7 +3,7 @@ const year = computed(() => new Date().getFullYear())
 </script>
 
 <template>
-  <footer class="w-container flex justify-between py-6 bg-white dark:bg-zinc-900 border-t border-zinc-100 dark:border-zinc-300/10">
+  <footer class="w-container flex justify-between py-4 bg-white dark:bg-zinc-900 border-t border-zinc-100 dark:border-zinc-300/10">
     <div class="w-full duration-300 text-center flex flex-col md:flex-row md:justify-between items-center gap-y-2">
       <p class="text-subtitle text-sm">
         © {{ year }} ArtDanjProduction
@@ -21,7 +21,3 @@ const year = computed(() => new Date().getFullYear())
     </div>
   </footer>
 </template>
-
-<style>
-
-</style>

src/components/MainBanner.vue

@@ -24,7 +24,7 @@ const socials = [
 </script>
 
 <template>
-  <div class="w-container lg:my-32">
+  <div class="w-container lg:my-32 mt-16">
     <div class="max-w-2xl space-y-8">
       <h1 class="text-4xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-5xl !leading-tight">
         Software engineer and mathematics lover
@@ -47,7 +47,3 @@ const socials = [
     </div>
   </div>
 </template>
-
-<style>
-
-</style>

src/components/content/UsesSection.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+defineProps({
+  title: {
+    type: String,
+    default: 'Uses Section title',
+  },
+})
+
+const appConfig = useAppConfig()
+
+function getColor() {
+  return `text-${appConfig.ui.primary}-500`
+}
+</script>
+
+<template>
+  <section class="md:border-l md:border-zinc-100 md:pl-6 md:dark:border-zinc-700/40 mb-16">
+    <div class="grid max-w-3xl grid-cols-1 items-baseline gap-y-8 md:grid-cols-4">
+      <h2 class="text-sm font-semibold" :class="getColor()">
+        {{ title }}
+      </h2>
+      <div class="md:col-span-3">
+        <ul class="space-y-16">
+          <slot />
+        </ul>
+      </div>
+    </div>
+  </section>
+</template>

src/components/content/UsesSlot.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+defineProps({
+  title: {
+    type: String,
+    default: 'Uses Slot title',
+  },
+})
+</script>
+
+<template>
+  <li class="group relative flex flex-col items-start">
+    <h3 class="text-base font-semibold tracking-tight text-zinc-800 dark:text-zinc-100">
+      {{ title }}
+    </h3>
+    <p class="relative z-10 mt-2 text-sm text-zinc-600 dark:text-zinc-400">
+      <slot />
+    </p>
+  </li>
+</template>

src/components/header/Header.vue

@@ -1,15 +1,17 @@
 <template>
-  <header class="w-container z-30 flex justify-between py-6 sticky top-0 left-0 bg-white dark:bg-zinc-900 border-b border-zinc-100 dark:border-zinc-300/10">
-    <Logo />
-    <NavBar />
-    <div class="flex gap-2">
-      <ClientOnly>
-        <div class="flex items-center rounded-md p-1 gap-1 relative bg-black/5 text-sm font-medium text-zinc-700 dark:bg-zinc-800/90 dark:text-zinc-300">
-          <ColorPicker />
-          <ColorModeButton />
-        </div>
-        <MobileNavBar />
-      </ClientOnly>
+  <header class="z-30 sticky top-0 left-0 w-container bg-white dark:bg-zinc-900 border-b border-zinc-100 dark:border-zinc-300/10">
+    <div class="mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl py-4 flex justify-between">
+      <Logo />
+      <NavBar />
+      <div class="flex gap-2">
+        <ClientOnly>
+          <div class="flex items-center rounded-md p-1 gap-1 relative bg-black/5 text-sm font-medium text-zinc-700 dark:bg-zinc-800/90 dark:text-zinc-300">
+            <ColorPicker />
+            <ColorModeButton />
+          </div>
+          <MobileNavBar />
+        </ClientOnly>
+      </div>
     </div>
   </header>
 </template>

src/components/header/Logo.vue

@@ -3,11 +3,7 @@
 </script>
 
 <template>
-  <div>
+  <div class="flex items-center">
     LOGO
   </div>
 </template>
-
-<style>
-
-</style>

src/components/header/MobileNavBar.vue

@@ -105,7 +105,3 @@ function isRoute(path: string) {
     </USlideover>
   </div>
 </template>
-
-<style>
-
-</style>

src/components/header/NavBar.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+const route = useRoute()
 const items = [
   [{
     label: 'Talents',
@@ -27,7 +28,7 @@ const items = [
       <UButton to="/about" size="sm" variant="ghost" color="white">
         About
       </UButton>
-      <UButton to="/writing" size="sm" variant="ghost" color="white">
+      <UButton to="/writing" size="sm" variant="ghost" color="white" :class="{ 'router-link-exact-active': route.path.includes('/writing') }">
         Articles
       </UButton>
       <UButton to="/work" size="sm" variant="ghost" color="white">