Working on updating my website

2026-01-14 20:19:35 +01:00 · 2024-02-01 19:21:21 +01:00
parent 8df0f6dcda
commit 51cfd5e88e
18 changed files with 1558 additions and 1220 deletions
--- 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" />