Working

src/components/Announcement.vue

@@ -1,12 +0,0 @@
-<script setup lang="ts">
-const { $trpc } = useNuxtApp()
-const announcement = await $trpc.announcement.announcement.query()
-</script>
-
-<template>
-  <div v-if="announcement" flex justify-center>
-    <div dark:hover:bg="dark-800/50" hover:bg="gray-100/50" shadow-announcement-light dark:shadow-announcement-dark rounded-md p-4 duration-300 dark:bg-dark-900>
-      <p v-html="announcement.content" />
-    </div>
-  </div>
-</template>

src/components/CommandPalette.vue

@@ -0,0 +1,130 @@
+<script setup lang="ts">
+const isOpen = ref(false)
+const commandPaletteRef = ref()
+
+const router = useRouter()
+const color = useColorMode()
+
+const quickLinks = [
+  { id: 'twitter', label: 'Twitter', icon: 'i-ph-twitter-logo-bold' },
+  { id: 'github', label: 'GitHub', icon: 'i-ph-github-logo-bold' },
+]
+
+const navigations = [
+  { id: 'home', label: 'Home', icon: 'i-ph-house-bold', to: '/', shortcuts: ['H'] },
+  { id: 'about', label: 'About', icon: 'i-ph-user-bold', to: '/about', shortcuts: ['A'] },
+  { id: 'blog', label: 'Blog', icon: 'i-ph-book-bold', to: '/blog', shortcuts: ['B'] },
+  { id: 'work', label: 'Work', icon: 'i-ph-wrench-bold', to: '/work', shortcuts: ['W'] },
+]
+
+const toast = useToast()
+
+const isDark = computed(() => color.preference === 'dark')
+const controls = [
+  {
+    id: 'color',
+    label: 'Toggle Color Mode',
+    icon: isDark ? 'i-ph-moon-bold' : 'i-ph-sun-bold',
+    click: () => {
+      color.preference = color.value === 'dark' ? 'light' : 'dark'
+      toast.add({
+        color: 'primary',
+        title: 'Color mode switched!',
+        icon: isDark.value ? 'i-ph-moon-bold' : 'i-ph-sun-bold',
+      })
+    },
+    shortcuts: ['C'],
+  },
+]
+
+const groups = [{
+  key: 'navigation',
+  label: 'Navigation',
+  inactive: 'Navigation',
+  commands: navigations,
+}, {
+  key: 'quickLinks',
+  label: 'Quick Links',
+  inactive: 'Quick Links',
+  commands: quickLinks,
+}, {
+  key: 'controls',
+  label: 'Controls',
+  inactive: 'Controls',
+  commands: controls,
+}]
+
+const { usingInput } = useShortcuts()
+const canToggleModal = computed(() => isOpen.value || !usingInput.value)
+
+defineShortcuts({
+  meta_k: {
+    usingInput: true,
+    whenever: [canToggleModal],
+    handler: () => {
+      isOpen.value = !isOpen.value
+    },
+  },
+  escape: {
+    usingInput: true,
+    whenever: [isOpen],
+    handler: () => { isOpen.value = false },
+  },
+})
+
+function onSelect(option: any) {
+  if (option.click) {
+    option.click()
+    isOpen.value = false
+  }
+
+  else if (option.to) { router.push(option.to) }
+
+  else if (option.href) { window.open(option.href, '_blank') }
+}
+
+onKeyStroke(true, (event: KeyboardEvent) => {
+  if (!isOpen.value && !usingInput.value) {
+    switch (event.key) {
+      case 'A':
+      case 'a':
+        router.push('/about')
+        break
+      case 'H':
+      case 'h':
+        router.push('/')
+        break
+      case 'W':
+      case 'w':
+        router.push('/work')
+        break
+      case 'B':
+      case 'b':
+        router.push('/blog')
+        break
+      case 'C':
+      case 'c':
+        color.preference = color.value === 'dark' ? 'light' : 'dark'
+        toast.add({
+          color: 'primary',
+          title: 'Color mode switched!',
+          icon: isDark.value ? 'i-ph-moon-bold' : 'i-ph-sun-bold',
+        })
+        break
+    }
+  }
+})
+</script>
+
+<template>
+  <UModal v-model="isOpen">
+    <UCommandPalette
+      ref="commandPaletteRef"
+      :groups="groups"
+      icon=""
+      :autoselect="false"
+      placeholder="Search for apps and commands"
+      @update:model-value="onSelect"
+    />
+  </UModal>
+</template>

src/components/Footer.vue

@@ -1,5 +0,0 @@
-<template>
-  <footer>
-    Footer
-  </footer>
-</template>

src/components/Header.vue

@@ -1,89 +0,0 @@
-<script setup lang="ts">
-const { getThemeTextColor } = useTheme()
-const { y } = useWindowScroll()
-
-const color = useColorMode()
-const toggleColor = () => {
-  color.preference = color.value === 'dark' ? 'light' : 'dark'
-}
-</script>
-
-<template>
-  <header
-    sticky top-0 h-16 duration-300
-    :class="{ 'backdrop-blur-10px backdrop-saturate-180 shadow-header-active-light dark:shadow-header-active-dark': y > 8 }"
-  >
-    <div h-full flex items-center justify-between px-32>
-      <div>
-        Logo
-      </div>
-      <div flex items-center space-x-4>
-        <nav flex space-x-4>
-          <NuxtLink to="/about">
-            About
-          </NuxtLink>
-          <NuxtLink to="/writings">
-            Blog
-          </NuxtLink>
-          <NuxtLink to="/work">
-            Work
-          </NuxtLink>
-          <NuxtLink to="/contact">
-            Contact
-          </NuxtLink>
-          <NuxtLink to="/test">
-            TEST
-          </NuxtLink>
-        </nav>
-        <div h-24px w-1px bg-gray-300 dark:bg-dark-300 />
-        <button
-          role="switch" type="button"
-          relative block h-22px w-10 shrink-0
-          border-1 border-gray-400 rounded-11px border-solid
-          transition-colors-250
-          dark:border-dark-300 hover:border-gray-600 dark:hover:border-dark-100
-          @click.prevent="toggleColor()"
-        >
-          <span
-            rounded="1/2" absolute left-1px top-1px h-18px w-18px transition-transform-250
-            :style="{ transform: `translateX(${color.preference === 'light' ? 0 : 18}px)` }"
-          >
-            <span relative block h-18px w-18px overflow-hidden rounded="1/2" bg-gray-100 dark:bg-dark-400>
-              <Icon
-                name="material-symbols:dark-mode-outline" size="12"
-                :class="color.preference === 'light' ? 'opacity-0' : 'opacity-100'"
-                absolute left-3px top-3px text-black duration-200 dark:text-white
-              />
-              <Icon
-                name="material-symbols:light-mode-outline" size="12"
-                :class="color.preference === 'light' ? 'opacity-100' : 'opacity-0'"
-                absolute left-3px top-3px text-black duration-200 dark:text-white
-              />
-            </span>
-          </span>
-        </button>
-        <div h-24px w-1px bg-gray-300 dark:bg-dark-300 />
-        <div flex space-x-4>
-          <NuxtLink
-            href="https://github.com/ArthurDanjou" target="_blank" text-gray-700 duration-300 dark:text-gray-400
-            :class="`hover:${getThemeTextColor}`"
-          >
-            <Icon name="mdi:github" size="24" />
-          </NuxtLink>
-          <NuxtLink
-            href="https://twitter.com/ArthurDanj" target="_blank" text-gray-700 duration-300 dark:text-gray-400
-            :class="`hover:${getThemeTextColor}`"
-          >
-            <Icon name="mdi:twitter" size="24" />
-          </NuxtLink>
-        </div>
-      </div>
-    </div>
-  </header>
-</template>
-
-<style lang="scss">
-a.router-link-exact-active {
-  color: v-bind(getThemeTextColor)
-}
-</style>

src/components/MainBanner.vue

@@ -0,0 +1,53 @@
+<script setup>
+const socials = [
+  {
+    name: 'mail',
+    icon: 'i-material-symbols-alternate-email',
+    link: 'mailto:arthurdanjou@outlook.fr',
+  },
+  {
+    name: 'twitter',
+    icon: 'i-ph-twitter-logo-bold',
+    link: 'https://twitter.com/ArthurDanj',
+  },
+  {
+    name: 'github',
+    icon: 'i-ph-github-logo-bold',
+    link: 'https://twitter.com/ArthurDanj',
+  },
+  {
+    name: 'linkedin',
+    icon: 'i-ph-linkedin-logo-bold',
+    link: 'https://www.linkedin.com/in/arthurdanjou/',
+  },
+]
+</script>
+
+<template>
+  <div class="w-container lg:my-32">
+    <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
+      </h1>
+      <p class="leading-relaxed text-subtitle">
+        I'm Arthur, a software engineer passionate about artificial intelligence and the cloud but also a mathematics student living in France. I am currently studying mathematics at the Faculty of Sciences of Paris-Saclay.
+      </p>
+      <div class="flex gap-4">
+        <UButton
+          v-for="social in socials"
+          :key="social.name"
+          :icon="social.icon"
+          size="md"
+          :link="social.link"
+          variant="ghost"
+          target="_blank"
+          :ui="{ rounded: 'rounded-full' }"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+
+</style>

src/components/MenuBurger.vue

@@ -1,76 +0,0 @@
-<script lang="ts" setup>
-defineProps<{
-  active: boolean
-}>()
-
-defineEmits<{
-  (e: 'click'): void
-}>()
-</script>
-
-<template>
-  <button
-    type="button"
-    class="menu-burger"
-    :class="{ active }"
-    @click="$emit('click')"
-  >
-    <span class="container">
-      <span class="top" />
-      <span class="middle" />
-      <span class="bottom" />
-    </span>
-  </button>
-</template>
-
-<style scoped>
-.menu-burger {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 48px;
-  height: var(--vp-nav-height);
-}
-
-@media (min-width: 768px) {
-  .menu-burger {
-    display: none;
-  }
-}
-
-.container {
-  position: relative;
-  width: 16px;
-  height: 14px;
-  overflow: hidden;
-}
-
-.menu-burger:hover .top    { top: 0; left: 0; transform: translateX(4px); }
-.menu-burger:hover .middle { top: 6px; left: 0; transform: translateX(0); }
-.menu-burger:hover .bottom { top: 12px; left: 0; transform: translateX(8px); }
-
-.menu-burger.active .top    { top: 6px; transform: translateX(0) rotate(225deg); }
-.menu-burger.active .middle { top: 6px; transform: translateX(16px); }
-.menu-burger.active .bottom { top: 6px; transform: translateX(0) rotate(135deg); }
-
-.menu-burger.active:hover .top,
-.menu-burger.active:hover .middle,
-.menu-burger.active:hover .bottom {
-  background-color: var(--vp-c-text-2);
-  transition: top .25s, background-color .25s, transform .25s;
-}
-
-.top,
-.middle,
-.bottom {
-  position: absolute;
-  width: 16px;
-  height: 2px;
-  background-color: var(--vp-c-text-1);
-  transition: top .25s, background-color .5s, transform .25s;
-}
-
-.top    { top: 0; left: 0; transform: translateX(0); }
-.middle { top: 6px; left: 0; transform: translateX(8px); }
-.bottom { top: 12px; left: 0; transform: translateX(4px); }
-</style>

src/components/header/ColorModeButton.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+const colorMode = useColorMode()
+
+const isDark = computed({
+  get() {
+    return colorMode.value === 'dark'
+  },
+  set() {
+    colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
+  },
+})
+</script>
+
+<template>
+  <UButton
+    :icon="isDark ? 'i-heroicons-moon-20-solid' : 'i-heroicons-sun-20-solid'"
+    variant="solid"
+    aria-label="Theme"
+    color="primary"
+    square
+    size="sm"
+    @click="isDark = !isDark"
+  />
+</template>

src/components/header/ColorPicker.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { useColorStore } from '~/store/color'
+import { ColorsTheme } from '~~/types'
+
+const colors = Object.values(ColorsTheme)
+
+const { setColor, getColor } = useColorStore()
+</script>
+
+<template>
+  <UPopover
+    :open-delay="60"
+    :close-delay="10"
+    :ui="{
+      background: 'bg-white dark:bg-stone-900',
+      ring: 'ring-1 ring-gray-200 dark:ring-stone-800',
+    }"
+  >
+    <UButton trailing-icon="i-heroicons-swatch-20-solid" variant="ghost" color="primary" size="sm" />
+
+    <template #panel>
+      <div class="p-2">
+        <div class="grid grid-cols-5 gap-px">
+          <UTooltip v-for="color in colors" :key="color" :text="color" class="capitalize" :open-delay="500">
+            <UButton
+              color="gray"
+              square
+              :ui="{
+                color: {
+                  gray: {
+                    solid: 'bg-gray-100 dark:bg-stone-800',
+                    ghost: 'hover:bg-gray-50 dark:hover:bg-stone-800/50',
+                  },
+                },
+              }"
+              :variant="color === getColor ? 'solid' : 'ghost'"
+              @click.stop.prevent="setColor(color)"
+            >
+              <span class="inline-block w-3 h-3 rounded-full" :class="`bg-${color}-500`" />
+            </UButton>
+          </UTooltip>
+        </div>
+      </div>
+    </template>
+  </UPopover>
+</template>

src/components/header/Header.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="w-container 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>
+    </div>
+  </div>
+</template>

src/components/header/Logo.vue

@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+
+</script>
+
+<template>
+  <div>
+    LOGO
+  </div>
+</template>
+
+<style>
+
+</style>

src/components/header/MobileNavBar.vue

@@ -0,0 +1,37 @@
+<script lang="ts" setup>
+const isOpen = ref(false)
+</script>
+
+<template>
+  <div class="md:hidden">
+    <div class="p-1 rounded-md bg-black/5 text-sm font-medium text-zinc-700 dark:bg-zinc-800/90 dark:text-zinc-300">
+      <UButton
+        variant="ghost"
+        color="primary"
+        size="sm"
+        icon="i-ph-list-bold"
+        @click="isOpen = true"
+      />
+    </div>
+
+    <USlideover v-model="isOpen">
+      <UCard class="flex flex-col flex-1" :ui="{ body: { base: 'flex-1' }, ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
+        <template #header>
+          <div>
+            Header
+          </div>
+        </template>
+
+        Content
+
+        <template #footer>
+          Footer
+        </template>
+      </UCard>
+    </USlideover>
+  </div>
+</template>
+
+<style>
+
+</style>

src/components/header/NavBar.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+const appConfig = useAppConfig()
+
+function getTextColor() {
+  return `!text-${appConfig.ui.primary}-500`
+}
+
+const items = [
+  [{
+    label: 'Talents',
+    to: '/talents',
+    icon: 'i-ph-users-bold',
+  },
+  {
+    label: 'bookmarks',
+    to: '/bookmarks',
+    icon: 'i-ph-bookmark-simple-bold',
+  }],
+]
+</script>
+
+<template>
+  <header class="hidden md:block pointer-events-auto">
+    <div class="flex items-center h-10 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">
+      <UButton to="/" size="sm" variant="ghost" color="white">
+        Home
+      </UButton>
+      <UButton to="/about" size="sm" variant="ghost" color="white">
+        About
+      </UButton>
+
+      <UButton to="/blog" size="sm" variant="ghost" color="white">
+        Articles
+      </UButton>
+      <UButton to="/work" size="sm" variant="ghost" color="white">
+        Projects
+      </UButton>
+      <UButton to="/uses" size="sm" variant="ghost" color="white">
+        Uses
+      </UButton>
+      <UDropdown mode="hover" :items="items" :popper="{ placement: 'bottom' }">
+        <UButton size="sm" variant="ghost" color="white">
+          Other
+        </UButton>
+      </UDropdown>
+      <UButton to="/contact" size="sm" variant="ghost" color="white">
+        Contact
+      </UButton>
+    </div>
+  </header>
+</template>
+
+<style lang="scss">
+.router-link-exact-active {
+  @apply bg-white/60 dark:bg-black
+}
+</style>