Working on updating my website

2026-01-14 12:14:42 +01:00 · 2024-02-01 19:21:21 +01:00
parent 8df0f6dcda
commit 51cfd5e88e
18 changed files with 1558 additions and 1220 deletions
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -8,7 +8,6 @@ export default defineNuxtConfig({
  modules: [
    '@nuxt/ui',
    'nuxt-auth-utils',
-    '@nuxt/image',
    '@nuxthq/studio',
    '@nuxt/content',
    '@pinia/nuxt',
@@ -27,6 +26,7 @@ export default defineNuxtConfig({
    'components/',
    'components/header',
    'components/resume',
+    'components/maths',
  ],

  content: {
--- a/package.json
+++ b/package.json
@@ -13,34 +13,33 @@
    "lint:fix": "eslint . --fix"
  },
  "dependencies": {
-    "@nuxt/content": "2.10.0",
-    "@nuxt/image": "1.1.0",
-    "@nuxt/ui": "2.11.1",
+    "@ksassnowski/vueclid": "^1.1.0",
+    "@nuxt/content": "2.11.0",
+    "@nuxt/ui": "2.13.0",
    "@pinia/nuxt": "0.5.1",
-    "@prisma/client": "5.7.1",
-    "@vercel/analytics": "1.1.1",
-    "@vercel/speed-insights": "^1.0.2",
-    "nuxt": "3.9.0",
-    "nuxt-auth-utils": "0.0.13",
+    "@prisma/client": "5.9.0",
+    "@vercel/analytics": "1.1.2",
+    "@vercel/speed-insights": "1.0.9",
+    "nuxt": "3.10.0",
+    "nuxt-auth-utils": "0.0.15",
    "pinia": "2.1.7",
    "postcss-custom-properties": "13.3.4",
-    "prisma": "5.7.1",
-    "sass": "1.69.6",
+    "prisma": "5.9.0",
+    "sass": "1.70.0",
    "superjson": "2.2.1",
-    "tailwindcss": "3.4.0",
+    "tailwindcss": "3.4.1",
    "zod": "^3.22.4"
  },
  "devDependencies": {
-    "@antfu/eslint-config": "2.6.1",
-    "@iconify/json": "2.2.164",
-    "@nuxt/devtools": "1.0.6",
+    "@antfu/eslint-config": "2.6.3",
+    "@iconify/json": "2.2.177",
    "@nuxt/eslint-config": "^0.2.0",
-    "@nuxthq/studio": "1.0.6",
+    "@nuxthq/studio": "1.0.10",
    "@pinia-plugin-persistedstate/nuxt": "1.2.0",
    "@tailwindcss/typography": "^0.5.10",
-    "@types/node": "20.10.6",
-    "@vueuse/core": "10.7.1",
-    "@vueuse/nuxt": "10.7.1",
+    "@types/node": "20.11.15",
+    "@vueuse/core": "10.7.2",
+    "@vueuse/nuxt": "10.7.2",
    "eslint": "8.56.0",
    "typescript": "5.3.3"
  }
--- a/src/app.config.ts
+++ b/src/app.config.ts
@@ -1,5 +1,8 @@
 export default defineAppConfig({
  ui: {
+    icons: {
+      dynamic: true,
+    },
    gray: 'neutral',
    primary: 'cyan',
    notifications: {
--- a/src/components/MainPhotos.vue
+++ b/src/components/MainPhotos.vue
@@ -1,20 +0,0 @@
-<script lang="ts" setup>
-
-</script>
-
-<template>
-  <section class="flex justify-center gap-5 overflow-hidden py-4 sm:gap-8 mb-16">
-    <div class="shadow-md relative aspect-[9/10] w-44 flex-none overflow-hidden rounded-xl bg-zinc-100 dark:bg-zinc-800 sm:w-72 sm:rounded-2xl -rotate-2">
-      <NuxtImg class="w-full h-full" src="/img/nature2.jpg" alt="Nature" placeholder />
-    </div>
-    <div class="shadow-md relative aspect-[9/10] w-44 flex-none overflow-hidden rounded-xl bg-zinc-100 dark:bg-zinc-800 sm:w-72 sm:rounded-2xl rotate-2">
-      <NuxtImg class="w-full h-full" src="/img/nature3.jpg" alt="Nature" placeholder />
-    </div>
-    <div class="shadow-md relative aspect-[9/10] w-44 flex-none overflow-hidden rounded-xl bg-zinc-100 dark:bg-zinc-800 sm:w-72 sm:rounded-2xl -rotate-2">
-      <NuxtImg class="w-full h-full" src="/img/nature4.jpg" alt="Nature" placeholder />
-    </div>
-    <div class="shadow-md relative aspect-[9/10] w-44 flex-none overflow-hidden rounded-xl bg-zinc-100 dark:bg-zinc-800 sm:w-72 sm:rounded-2xl rotate-2">
-      <NuxtImg class="w-full h-full" src="/img/nature5.jpg" alt="Nature" placeholder />
-    </div>
-  </section>
-</template>
--- a/src/components/header/NavBar.vue
+++ b/src/components/header/NavBar.vue
@@ -13,9 +13,9 @@ const route = useRoute()
      <UButton to="/about" size="sm" variant="ghost" color="white" :class="{ 'link-active': route.path.includes('/about') }">
        About
      </UButton>
-      <UButton to="/writing" size="sm" variant="ghost" color="white" :class="{ 'link-active': route.path.includes('/writing') }">
+      <!-- <UButton to="/writing" size="sm" variant="ghost" color="white" :class="{ 'link-active': route.path.includes('/writing') }">
        Articles
-      </UButton>
+      </UButton> -->
      <UButton to="/work" size="sm" variant="ghost" color="white" :class="{ 'link-active': route.path.includes('/work') }">
        Projects
      </UButton>
--- a/src/components/maths/MainMaths.vue
+++ b/src/components/maths/MainMaths.vue
@@ -0,0 +1,63 @@
+<script lang="ts" setup>
+import { Angle, Circle, Graph, Label, Line, Point, Vector, Vector2 } from '@ksassnowski/vueclid'
+
+const angle = ref(0)
+useIntervalFn(() => {
+  angle.value = angle.value + 0.01
+}, 10)
+const to = computed(() => Vector2.fromPolar(angle.value, 4))
+</script>
+
+<template>
+  <section class="flex justify-center gap-5 overflow-hidden py-4 sm:gap-8 mb-16">
+    <div>
+      <Graph :domain-x="[-5, 5]" :domain-y="[-5, 5]">
+        <Circle :radius="4" color="hotpink" />
+        <Angle
+          :a="[1, 0]"
+          :b="[0, 0]"
+          :c="to"
+          :radius="1.5"
+          color="#33aabb"
+          :fill="{ light: '#33aabb33', dark: '#33aabb66' }"
+          dashed
+        />
+        <Vector :to="to" />
+      </Graph>
+    </div>
+    <div>
+      <Graph
+        :domain-x="[-1.5, 1.5]"
+        :domain-y="[-1.5, 1.5]"
+        :grid-size="0.5"
+        :units="false"
+      >
+        <Circle :radius="1" color="#aaa" />
+        <Vector :to="[Math.cos(0.8), Math.sin(0.8)]" />
+        <Line
+          :from="[Math.cos(0.8), 0]"
+          :to="[Math.cos(0.8), Math.sin(0.8)]"
+          :line-width="1.5"
+          color="hotpink"
+          dashed
+        />
+        <Line
+          :from="[0, Math.sin(0.8)]"
+          :to="[Math.cos(0.8), Math.sin(0.8)]"
+          :line-width="1.5"
+          color="#33aabb"
+          dashed
+        />
+        <Point :position="[Math.cos(0.8), Math.sin(0.8)]" />
+        <Label :position="[Math.cos(0.8) + 0.2, Math.sin(0.8) + 0.2]" text="M" />
+        <Point :position="[Math.cos(0.8), 0]" color="hotpink" label="cos(x)" />
+        <Point
+          :position="[0, Math.sin(0.8)]"
+          color="#33aabb"
+          label="sin(x)"
+          label-position="top"
+        />
+      </Graph>
+    </div>
+  </section>
+</template>
--- a/src/components/resume/Experience.vue
+++ b/src/components/resume/Experience.vue
@@ -13,24 +13,27 @@ defineProps({
        <div>
          <DateTag :start-date="experience.startDate" :end-date="experience.endDate" />
        </div>
-        <UButton
-          v-if="experience.companyLink"
-          :to="experience.companyLink"
-          variant="link"
-          :padded="false"
-          color="white"
-          size="xl"
-          target="_blank"
-          :label="experience.company"
-          class="my-1 text-base font-semibold tracking-tight text-zinc-800 dark:text-zinc-100"
-        >
-          <template #trailing>
-            <UIcon name="i-ph-arrow-up-right-bold" color="gray" />
-          </template>
-        </UButton>
-        <h1 v-else class="my-1 text-base font-semibold tracking-tight text-zinc-800 dark:text-zinc-100">
-          {{ experience.company }}
-        </h1>
+        <div class="flex items-center my-1">
+          <UButton
+            v-if="experience.companyLink"
+            :to="experience.companyLink"
+            variant="link"
+            :padded="false"
+            color="white"
+            size="xl"
+            target="_blank"
+            :label="experience.company"
+            class="mr-3 text-base font-semibold tracking-tight text-zinc-800 dark:text-zinc-100"
+          >
+            <template #leading>
+              <UIcon name="i-akar-icons-link-chain" color="gray" />
+            </template>
+          </UButton>
+          <h1 v-else class="mr-3 my-1 text-base font-semibold tracking-tight text-zinc-800 dark:text-zinc-100">
+            {{ experience.company }}
+          </h1>
+          <div class="text-subtitle text-xs">{{ experience.location }}</div>
+        </div>
      </div>
    </div>
    <p class="text-justify leading-5 text-sm text-zinc-600 dark:text-zinc-400">
--- a/src/content/educations/self-taught.md
+++ b/src/content/educations/self-taught.md
@@ -1,6 +1,6 @@
 ---
 title: Self-taught learning
-description: Learning programming languages (TypeScript, Rust, Java, Python...) and technologies (VueJS, AdonisJs, Tauri...)
+description: Learning programming languages (TypeScript, Java, Python...) and technologies (VueJS, AdonisJs...)
 location: Bedroom (Remote)
 startDate: August 2015
 endDate: Today
--- a/src/content/experiences/picard.md
+++ b/src/content/experiences/picard.md
@@ -0,0 +1,9 @@
+---
+title: Permanent Contract
+description: Welcoming and advising customers. Restocking, delivering and ordering products.
+company: Picard
+companyLink: https://picard.fr
+location: Rueil-Malmaison, France
+startDate: September 2022
+endDate: Today
+---
--- a/src/content/skills.json
+++ b/src/content/skills.json
@@ -11,6 +11,13 @@
        "light": "skill-icons:python-light"
      }
    },
+    {
+      "name": "R-Lang",
+      "icon": {
+        "dark": "i-skill-icons-r-dark",
+        "light": "i-skill-icons-r-light"
+      }
+    },
    {
      "name": "Java",
      "icon": {
@@ -18,10 +25,6 @@
        "light": "skill-icons:java-light"
      }
    },
-    {
-      "name": "Rust",
-      "icon": "skill-icons:rust"
-    },
    {
      "name": "HTML5",
      "icon": "skill-icons:html"
@@ -80,13 +83,6 @@
        "light": "skill-icons:redis-light"
      }
    },
-    {
-      "name": "RabbitMQ",
-      "icon": {
-        "dark": "skill-icons:rabbitmq-dark",
-        "light": "skill-icons:rabbitmq-light"
-      }
-    },
    {
      "name": "Docker",
      "icon": "skill-icons:docker"
@@ -100,10 +96,10 @@
      "icon": "skill-icons:prisma"
    },
    {
-      "name": "Supabase",
+      "name": "Vercel",
      "icon": {
-        "dark": "skill-icons:supabase-dark",
-        "light": "skill-icons:supabase-light"
+        "dark": "i-skill-icons-vercel-dark",
+        "light": "i-skill-icons-vercel-light"
      }
    }
  ]
--- a/src/layouts/default.vue
+++ b/src/layouts/default.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { SpeedInsights } from '@vercel/speed-insights/nuxt'

+import { configureGraphs } from '@ksassnowski/vueclid'
+
 const appConfig = useAppConfig()
 const getColor = computed(() => appConfig.ui.primary)

@@ -8,6 +10,11 @@ const router = useRouter()
 router.afterEach((route) => {
  useCookie('last-route', { path: '/', default: () => '/' }).value = route.fullPath
 })
+
+const colorMode = useColorMode()
+watch(colorMode, () => {
+  configureGraphs({ darkMode: colorMode.value === 'dark' })
+})
 </script>

 <template>
--- a/src/middleware/redirect.global.ts
+++ b/src/middleware/redirect.global.ts
@@ -0,0 +1,7 @@
+export default defineNuxtRouteMiddleware((to) => {
+  if (to.path === '/bookmarks' || to.path === 'writing') {
+    return navigateTo('/', {
+      redirectCode: 301,
+    })
+  }
+})
--- a/src/pages/about.vue
+++ b/src/pages/about.vue
@@ -14,7 +14,7 @@ const { data: experiences } = await getWorkExperiences()
      <div class="lg:pl-20 flex justify-center">
        <div class="max-w-xs px-2.5 lg:max-w-none">
          <UTooltip text="It's me 👋" :popper="{ offsetDistance: 20 }">
-            <NuxtImg src="/about.jpg" class="border dark:border-0 aspect-square rotate-3 hover:rotate-0 duration-300 rounded-3xl bg-zinc-100 object-cover dark:bg-zinc-800" placeholder />
+            <img src="/about.jpg" class="border dark:border-0 aspect-square rotate-3 hover:rotate-0 duration-300 rounded-3xl bg-zinc-100 object-cover dark:bg-zinc-800">
          </UTooltip>
        </div>
      </div>
--- a/src/pages/guestbook.vue
+++ b/src/pages/guestbook.vue
@@ -148,7 +148,7 @@ async function deleteMessage(id: number) {
        </p>
        <div class="flex items-center gap-4 mt-4">
          <div class="h-8 w-8 rounded-full">
-            <NuxtImg class="w-full h-full rounded-full" :src="message.image" alt="Nature" placeholder />
+            <img class="w-full h-full rounded-full" :src="message.image" alt="Nature">
          </div>
          <p class="font-bold">
            {{ message.username }}
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -8,6 +8,6 @@ useHead({
  <section>
    <Announcement />
    <MainBanner />
-    <MainPhotos />
+    <MainMaths />
  </section>
 </template>
--- a/src/pages/talents.vue
+++ b/src/pages/talents.vue
@@ -198,7 +198,7 @@ async function suggest() {
        >
          <div class="flex">
            <div class="flex gap-6 items-center">
-              <NuxtImg :src="talent.logo" class="z-20 h-12 w-12 rounded-md" placeholder />
+              <img :src="talent.logo" class="z-20 h-12 w-12 rounded-md">
              <div>
                <h2 class="text-base font-semibold text-zinc-800 dark:text-zinc-100">
                  <div class="absolute -inset-y-6 -inset-x-4 z-0 scale-95 bg-zinc-50 opacity-0 transition group-hover:scale-100 group-hover:opacity-100 dark:bg-zinc-800/50 sm:-inset-x-6 sm:rounded-2xl" />
--- a/types.ts
+++ b/types.ts
@@ -107,11 +107,11 @@ export const otherTab = [
      to: '/guestbook',
      icon: 'i-material-symbols-book-2-outline',
    },
-    {
+    /* {
      label: 'Bookmarks',
      to: '/bookmarks',
      icon: 'i-material-symbols-bookmark-add-outline-rounded',
-    },
+    }, */
  ],
 ]

--- a/yarn.lock
+++ b/yarn.lock