Working on updating my website

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: {

package.json

@@ -13,34 +13,33 @@
     "lint:fix": "eslint . --fix"
   },
   "dependencies": {
-    "@nuxt/content": "2.10.0",
+    "@ksassnowski/vueclid": "^1.1.0",
-    "@nuxt/image": "1.1.0",
+    "@nuxt/content": "2.11.0",
-    "@nuxt/ui": "2.11.1",
+    "@nuxt/ui": "2.13.0",
     "@pinia/nuxt": "0.5.1",
-    "@prisma/client": "5.7.1",
+    "@prisma/client": "5.9.0",
-    "@vercel/analytics": "1.1.1",
+    "@vercel/analytics": "1.1.2",
-    "@vercel/speed-insights": "^1.0.2",
+    "@vercel/speed-insights": "1.0.9",
-    "nuxt": "3.9.0",
+    "nuxt": "3.10.0",
-    "nuxt-auth-utils": "0.0.13",
+    "nuxt-auth-utils": "0.0.15",
     "pinia": "2.1.7",
     "postcss-custom-properties": "13.3.4",
-    "prisma": "5.7.1",
+    "prisma": "5.9.0",
-    "sass": "1.69.6",
+    "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",
+    "@antfu/eslint-config": "2.6.3",
-    "@iconify/json": "2.2.164",
+    "@iconify/json": "2.2.177",
-    "@nuxt/devtools": "1.0.6",
     "@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",
+    "@types/node": "20.11.15",
-    "@vueuse/core": "10.7.1",
+    "@vueuse/core": "10.7.2",
-    "@vueuse/nuxt": "10.7.1",
+    "@vueuse/nuxt": "10.7.2",
     "eslint": "8.56.0",
     "typescript": "5.3.3"
   }

src/app.config.ts

@@ -1,5 +1,8 @@
 export default defineAppConfig({
   ui: {
+    icons: {
+      dynamic: true,
+    },
     gray: 'neutral',
     primary: 'cyan',
     notifications: {

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>

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>

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>

src/components/resume/Experience.vue

@@ -13,24 +13,27 @@ defineProps({
         <div>
           <DateTag :start-date="experience.startDate" :end-date="experience.endDate" />
         </div>
-        <UButton
+        <div class="flex items-center my-1">
-          v-if="experience.companyLink"
+          <UButton
-          :to="experience.companyLink"
+            v-if="experience.companyLink"
-          variant="link"
+            :to="experience.companyLink"
-          :padded="false"
+            variant="link"
-          color="white"
+            :padded="false"
-          size="xl"
+            color="white"
-          target="_blank"
+            size="xl"
-          :label="experience.company"
+            target="_blank"
-          class="my-1 text-base font-semibold tracking-tight text-zinc-800 dark:text-zinc-100"
+            :label="experience.company"
-        >
+            class="mr-3 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 #leading>
-          </template>
+              <UIcon name="i-akar-icons-link-chain" color="gray" />
-        </UButton>
+            </template>
-        <h1 v-else class="my-1 text-base font-semibold tracking-tight text-zinc-800 dark:text-zinc-100">
+          </UButton>
-          {{ experience.company }}
+          <h1 v-else class="mr-3 my-1 text-base font-semibold tracking-tight text-zinc-800 dark:text-zinc-100">
-        </h1>
+            {{ 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">

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

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
+---

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",
+        "dark": "i-skill-icons-vercel-dark",
-        "light": "skill-icons:supabase-light"
+        "light": "i-skill-icons-vercel-light"
       }
     }
   ]

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>

src/middleware/redirect.global.ts

@@ -0,0 +1,7 @@
+export default defineNuxtRouteMiddleware((to) => {
+  if (to.path === '/bookmarks' || to.path === 'writing') {
+    return navigateTo('/', {
+      redirectCode: 301,
+    })
+  }
+})

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>

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 }}

src/pages/index.vue

@@ -8,6 +8,6 @@ useHead({
   <section>
     <Announcement />
     <MainBanner />
-    <MainPhotos />
+    <MainMaths />
   </section>
 </template>

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" />

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',
-    },
+    }, */
   ],
 ]