Initial commit

app/app.config.ts

@@ -0,0 +1,12 @@
+export default defineAppConfig({
+  ui: {
+    gray: 'neutral',
+    primary: 'gray',
+    container: {
+      constrained: 'max-w-3xl',
+    },
+    icons: {
+      dynamic: true,
+    }
+  }
+})

app/app.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+useSeoMeta({
+  title: 'Arthur Danjou - Maths lover',
+  description: 'A Nuxt template to build your full-stack application on the edge.'
+})
+</script>
+
+<template>
+  <NuxtLoadingIndicator color="#14b8a6" />
+  <UContainer>
+    <AppHeader />
+    <NuxtPage />
+    <AppFooter />
+  </UContainer>
+</template>
+
+<style>
+body {
+  font-family: 'DM Sans', sans-serif;
+  @apply h-full w-full p-0 m-0 text-[#374151] dark:text-[#d1d5db];
+}
+
+.sofia {
+  font-family: 'Sofia Sans', sans-serif;
+}
+
+.page-enter-active,
+.page-leave-active {
+  transition: all 0.2s;
+}
+
+.page-leave-to {
+  opacity: 0;
+  transform: translateY(-5px);
+}
+
+.page-enter-from {
+  opacity: 0;
+  transform: translateY(5px);
+}
+</style>

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>

app/pages/index.vue

@@ -0,0 +1,5 @@
+<template>
+  <main class="!max-w-none prose dark:prose-invert mt-12">
+    <ContentDoc path="/" />
+  </main>
+</template>

app/pages/uses.vue

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

app/pages/writings/index.vue

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