Working on updating my website

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