feat: initial commit

.gitignore

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

.vscode/settings.json

@@ -0,0 +1,95 @@
+{
+  "files.associations": {
+    "*.css": "tailwindcss"
+  },
+  "tailwindCSS.experimental.configFile": "tailwind.config.ts",
+  "tailwindCSS.experimental.classRegex": [
+    [
+      "ui:\\s*{([^)]*)\\s*}",
+      "[\"'`]([^\"'`]*).*?[\"'`]"
+    ],
+    [
+      "/\\*ui\\*/\\s*{([^;]*)}",
+      ":\\s*[\"'`]([^\"'`]*).*?[\"'`]"
+    ]
+  ],
+  "tailwindCSS.classAttributes": [
+    "class",
+    "className",
+    "ngClass",
+    "ui"
+  ],
+
+  // Enable the ESlint flat config support
+  "eslint.experimental.useFlatConfig": true,
+
+  // Disable the default formatter, use eslint instead
+  "prettier.enable": false,
+
+  "editor.formatOnSave": false,
+
+  // Auto fix
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit",
+    "source.organizeImports": "never"
+  },
+
+  // Silent the stylistic rules in you IDE, but still auto fix them
+  "eslint.rules.customizations": [
+    {
+      "rule": "style/*",
+      "severity": "off"
+    },
+    {
+      "rule": "format/*",
+      "severity": "off"
+    },
+    {
+      "rule": "*-indent",
+      "severity": "off"
+    },
+    {
+      "rule": "*-spacing",
+      "severity": "off"
+    },
+    {
+      "rule": "*-spaces",
+      "severity": "off"
+    },
+    {
+      "rule": "*-order",
+      "severity": "off"
+    },
+    {
+      "rule": "*-dangle",
+      "severity": "off"
+    },
+    {
+      "rule": "*-newline",
+      "severity": "off"
+    },
+    {
+      "rule": "*quotes",
+      "severity": "off"
+    },
+    {
+      "rule": "*semi",
+      "severity": "off"
+    }
+  ],
+
+  // Enable eslint for all supported languages
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+    "vue",
+    "html",
+    "markdown",
+    "json",
+    "jsonc",
+    "yaml",
+    "toml"
+  ]
+}

README.md

@@ -0,0 +1,18 @@
+# arthurdufour.dev
+
+This is my personal portfolio website, made with Nuxt (using [Zooper](https://zooper.pages.dev) template)!
+
+![Website preview](./public/preview.jpeg)
+
+## Tech Stack
+
+1. Vue
+2. Tailwind CSS
+3. Nuxt JS
+4. Nuxt Content Module
+5. Shiki JS ES
+
+## Todo
+
+1. Integrate Plausible for privacy-friendly analytics
+2. Create a "uses" page (list of applications / hardware I use and enjoy)

app.config.ts

@@ -0,0 +1,31 @@
+export default defineAppConfig({
+  ui: {
+    primary: 'red',
+    gray: 'neutral',
+    formGroup: {
+      help: 'text-xs mt-1 text-gray-500 dark:text-gray-400',
+      error: 'text-xs mt-1 text-red-500 dark:text-red-400',
+      label: {
+        base: 'text-sm block font-medium text-gray-500 dark:text-gray-200',
+      },
+    },
+    button: {
+      rounded:
+        'rounded-md transition-transform active:scale-x-[0.98] active:scale-y-[0.99]',
+    },
+    modal: {
+      overlay: {
+        background: 'bg-[rgba(0,8,47,.275)] saturate-50',
+      },
+      padding: 'p-0',
+      rounded: 'rounded-t-2xl sm:rounded-xl',
+      transition: {
+        enterFrom: 'opacity-0 translate-y-full sm:translate-y-0 sm:scale-x-95',
+        leaveFrom: 'opacity-100 translate-y-0 sm:scale-x-100',
+      },
+    },
+    container: {
+      constrained: 'max-w-2xl',
+    },
+  },
+})

app.vue

@@ -0,0 +1,32 @@
+<template>
+  <NuxtLoadingIndicator color="#14b8a6" />
+
+  <AppNavbar />
+
+  <div class="h-32" />
+
+  <UContainer>
+    <NuxtPage />
+  </UContainer>
+
+  <div class="h-32" />
+
+  <AppFooter />
+</template>
+
+<style>
+.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>

components/app/ArticleCard.vue

@@ -0,0 +1,45 @@
+<script lang="ts" setup>
+defineProps({
+  article: {
+    type: Object,
+    required: true,
+  },
+})
+
+function getReadableDate(dateString: string) {
+  const date = new Date(dateString)
+
+  return date.toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+  })
+}
+</script>
+
+<template>
+  <NuxtLink :to="article._path" class="group">
+    <article>
+      <time
+        class="relative z-10 order-first mb-3 flex items-center pl-3.5 text-sm text-gray-400 dark:text-gray-500"
+        datetime="2022-09-05"
+      >
+        <span
+          class="absolute inset-y-0 left-0 flex items-center"
+          aria-hidden="true"
+        >
+          <span class="h-4 w-0.5 rounded-full bg-gray-200 dark:bg-gray-500" />
+        </span>
+        {{ getReadableDate(article.published) }}
+      </time>
+
+      <h2 class="text-base font-semibold tracking-tight text-gray-800 group-hover:text-red-600 dark:text-gray-100">
+        {{ article.title }}
+      </h2>
+
+      <p class="relative z-10 mt-2 text-sm text-gray-600 dark:text-gray-400">
+        {{ article.description }}
+      </p>
+    </article>
+  </NuxtLink>
+</template>

components/app/Footer.vue

@@ -0,0 +1,10 @@
+<script lang="ts" setup>
+const year = new Date().getFullYear()
+</script>
+
+<template>
+  <footer class="mx-auto max-w-2xl pb-8 text-center text-sm text-gray-400 dark:text-gray-600">
+    <br>
+    <p>© {{ year }} Arthur Dufour. All rights reserved.</p>
+  </footer>
+</template>

components/app/Header.vue

@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+defineProps({
+  title: {
+    type: String,
+    required: true,
+  },
+  description: {
+    type: String,
+    required: true,
+  },
+})
+</script>
+
+<template>
+  <div>
+    <h1 class="text-2xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100">
+      {{ title }}
+    </h1>
+
+    <p class="mt-6 text-base text-gray-600 dark:text-gray-400">
+      {{ description }}
+    </p>
+  </div>
+</template>

components/app/Navbar.vue

@@ -0,0 +1,72 @@
+<script lang="ts" setup>
+import { useFixedHeader } from 'vue-use-fixed-header'
+
+const headerRef = ref(null)
+const { styles } = useFixedHeader(headerRef)
+
+const items = [
+  {
+    name: 'Home',
+    path: '/',
+    icon: 'solar:home-smile-outline',
+  },
+  {
+    name: 'Projects',
+    path: '/projects',
+    icon: 'solar:folder-with-files-outline',
+  },
+  {
+    name: 'Articles',
+    path: '/articles',
+    icon: 'solar:document-add-outline',
+  },
+  {
+    name: 'Github',
+    path: 'https://github.com/adufr',
+    icon: 'mdi:github',
+  },
+]
+</script>
+
+<template>
+  <div ref="headerRef" :style="styles" class="fixed top-0 z-50 w-full">
+    <nav class="mx-auto max-w-2xl px-4 sm:px-6 lg:px-8">
+      <ul class="my-4 flex items-center rounded-full bg-white/90 px-3 text-sm font-medium text-gray-800 shadow-lg shadow-gray-800/5 ring-1 ring-gray-900/5 backdrop-blur dark:bg-gray-800/90 dark:text-gray-200 dark:ring-white/20">
+        <li v-for="item in items" :key="item.path">
+          <UTooltip
+            :text="item.name"
+            :ui="{ popper: { strategy: 'absolute' } }"
+          >
+            <ULink
+              :to="item.path"
+              class="relative flex items-center justify-center px-3 py-4 transition hover:text-red-500 dark:hover:text-red-400"
+              active-class="text-red-600 dark:text-red-400"
+            >
+              <Icon aria-hidden="true" :name="item.icon" class="z-10 size-5" />
+
+              <span
+                v-if="$route.path === item.path"
+                class="absolute inset-x-1 -bottom-px h-px bg-gradient-to-r from-red-500/0 via-red-500/70 to-red-500/0 dark:from-red-400/0 dark:via-red-400/40 dark:to-red-400/0"
+              />
+
+              <span
+                v-if="$route.path === item.path"
+                class="absolute left-1/2 top-1/2 z-0 size-8 -translate-x-1/2 -translate-y-1/2 rounded-full bg-gray-100 dark:bg-white/10"
+              />
+
+              <span class="sr-only">
+                {{ item.name }}
+              </span>
+            </ULink>
+          </UTooltip>
+        </li>
+
+        <li class="flex-1" />
+
+        <li>
+          <AppThemeToggle />
+        </li>
+      </ul>
+    </nav>
+  </div>
+</template>