Initial commit

app/components/AppFooter.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+const socials = [
+  {
+    icon: 'i-ph-x-logo-bold',
+    label: 'Twitter',
+    link: 'https://twitter.com/ArthurDanj',
+  },
+  {
+    icon: 'i-ph-github-logo-bold',
+    label: 'GitHub',
+    link: 'https://github.com/ArthurDanjou',
+  },
+  {
+    icon: 'i-ph-linkedin-logo-bold',
+    label: 'LinkedIn',
+    link: 'https://www.linkedin.com/in/arthurdanjou/',
+  }
+]
+</script>
+
+<template>
+  <footer class="mb-16">
+    <div class="flex justify-center my-8">
+      <UDivider class="md:w-2/3" size="2xs" type="solid" />
+    </div>
+    <div>
+      <h3>Find me on:</h3>
+      <div class="flex gap-4 my-4">
+        <HomeLink
+          v-for="social in socials"
+          :key="social.label"
+          :icon="social.icon"
+          :label="social.label"
+          :href="social.link"
+        />
+      </div>
+      <div class="flex gap-2">
+        <h4>Or send me an email:</h4>
+        <HomeLink
+          label="arthurdanjou@outlook.fr"
+          href="mailto:arthurdanjou@outlook.fr"
+          blanked />
+      </div>
+    </div>
+  </footer>
+</template>

app/components/AppHeader.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+const colorMode = useColorMode()
+const isDark = ref(colorMode.value === 'dark')
+watch(isDark, () => {
+  colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
+})
+
+const navs = [
+  {
+    label: 'home',
+    to: '/',
+    icon: 'i-ph-house-bold'
+  },
+  {
+    label: 'uses',
+    to: '/uses',
+    icon: 'i-ph-briefcase-bold'
+  },
+  {
+    label: 'writings',
+    to: '/writings',
+    icon: 'i-ph-newspaper-bold'
+  },
+  {
+    label: 'resume',
+    to: '/resume.pdf',
+    target: '_blank',
+    icon: 'i-ph-person-arms-spread-bold'
+  }
+]
+</script>
+
+<template>
+  <header class="flex justify-between my-8">
+    <div>
+      Logo
+    </div>
+    <div class="flex gap-2 items-center">
+      <div v-for="nav in navs" :key="nav.label">
+        <UTooltip :text="nav.label">
+          <UButton
+            :icon="nav.icon"
+            :to="nav.to"
+            variant="link"
+            color="gray"
+            size="sm"
+            :target="nav.target ? nav.target : '_self'"
+            dynamic
+          />
+        </UTooltip>
+      </div>
+      <ClientOnly>
+        <UTooltip text="switch theme">
+          <UButton
+            :icon="isDark ? 'i-lucide:moon' : 'i-lucide:sun'"
+            variant="link"
+            color="gray"
+            size="sm"
+            @click="isDark = !isDark"
+          />
+        </UTooltip>
+      </ClientOnly>
+    </div>
+  </header>
+</template>

app/components/content/AIcon.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+defineProps({
+  icon: {
+    type: String,
+    required: true,
+  }
+})
+</script>
+
+<template>
+  <div class="inline">
+    <UIcon class="mb-1 mr-1" :name="icon" :dynamic="true" />
+    <span class="sofia font-medium">
+      <slot />
+    </span>
+  </div>
+</template>

app/components/home/Link.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+defineProps({
+  label: {
+    type: String,
+    required: true
+  },
+  href: {
+    type: String,
+    required: true
+  },
+  icon: {
+    type: String,
+  },
+  blanked: {
+    type: Boolean,
+    default: false
+  }
+})
+</script>
+
+<template>
+  <NuxtLink
+    :href="href"
+    :target="blanked ? '_blank' : '_self'"
+    class="sofia border-b border-gray-200 hover:border-black duration-300 dark:border-neutral-800 dark:hover:border-white flex gap-1 items-center pb-.5"
+  >
+    <Icon v-if="icon" :name="icon" size="20"/>
+    <span class="font-bold text-md text-black dark:text-white">{{ label }}</span>
+  </NuxtLink>
+</template>