refactor: ♻️ minor updates

Author: zedjarvis

components/About.vue

@@ -1,50 +1,77 @@
 <script setup lang="ts">
-
-const isShow = ref(true)
-
+const isShow = ref(true);
 </script>
 
 <template>
   <div class="font-space text-slate-400">
-    <p class="mb-3">Hey there, I'm Ced, a
+    <p class="mb-3">
+      Hey there, I'm Ced, a
       <RoughNotation :is-show="isShow" type="box" color="#f4f" :padding="1">
         software developer
       </RoughNotation>
-      on a mission to unravel the mysteries of coding and problem-solving.
-      The love affair with code began back in 2018 with a curious trial on QPython. Little did I know, it'd mark the
-      start of a bond that's only grown stronger since.
+      on a mission to unravel the mysteries of coding and problem-solving. The
+      love affair with code began back in 2018 with a curious trial on QPython.
+      Little did I know, it'd mark the start of a bond that's only grown
+      stronger since.
     </p>
     <p class="mb-3">
-      From those humble beginnings, I've delved into a fascinating array of projects, diving into an eclectic mix of
-      technologies like
-      <RoughNotation :is-show="isShow" type="circle" color="#ffde57" :padding="2">
+      From those humble beginnings, I've delved into a fascinating array of
+      projects, diving into an eclectic mix of technologies like
+      <RoughNotation
+        :is-show="isShow"
+        type="circle"
+        color="#ffde57"
+        :padding="2"
+      >
         Python
       </RoughNotation>
       , PHP, C,
-      <RoughNotation :is-show="isShow" type="underline" color="#f7df1e" :padding="1">
+      <RoughNotation
+        :is-show="isShow"
+        type="underline"
+        color="#f7df1e"
+        :padding="1"
+      >
         JavaScript
       </RoughNotation>
       ,
-      <RoughNotation :is-show="isShow" type="underline" color="#f4f" :padding="1">
+      <RoughNotation
+        :is-show="isShow"
+        type="underline"
+        color="#f4f"
+        :padding="1"
+      >
         TypeScript
       </RoughNotation>
       , and heavyweight frameworks such as
-      <RoughNotation :is-show="isShow" type="underline" color="#f4f" :padding="1">
+      <RoughNotation
+        :is-show="isShow"
+        type="underline"
+        color="#f4f"
+        :padding="1"
+      >
         Django
       </RoughNotation>
       , React,
-      <RoughNotation :is-show="isShow" type="underline" color="#42b883" :padding="2">
+      <RoughNotation
+        :is-show="isShow"
+        type="underline"
+        color="#42b883"
+        :padding="2"
+      >
         Vue.js
       </RoughNotation>
       , Laravel, and Express.js.
     </p>
     <p class="mb-3">
-      One vital lesson I've learned in this ever-evolving tech landscape is that there's always something new to explore,
-      but that's the best part cause I'm always eager to embrace the challenge of learning.
+      One vital lesson I've learned in this ever-evolving tech landscape is that
+      there's always something new to explore, but that's the best part cause
+      I'm always eager to embrace the challenge of learning.
     </p>
     <p>
-      Whether you've got an exciting project in mind or just fancy a chat, I'm only a message away. Currently seeking
-      a new role in the developer realm. I'm up for the challenge!
+      Whether you've got an exciting project in mind or just fancy a chat, I'm
+      only a message away. Currently seeking a new role in the developer realm.
+      I'm up for the challenge!
       <RoughNotation :is-show="isShow" type="circle" color="aqua" :padding="2">
         <span> Hire me.</span>
       </RoughNotation>
@@ -54,4 +81,4 @@ const isShow = ref(true)
 
 <style scoped>
 /* */
-</style>
+</style>

components/BlogCard.vue

@@ -1,39 +1,58 @@
 <script setup lang="ts">
-
 const props = defineProps<{
-  year: string
-  title: string
-  url: string
-  image: string
-}>()
+  year: string;
+  title: string;
+  url: string;
+  image: string;
+}>();
 
-const { year, title, url, image } = toRefs(props)
+const { year, title, url, image } = toRefs(props);
 </script>
 
 <template>
   <div
-    class="group relative grid grid-cols-8 gap-4 transition-all sm:items-center sm:gap-8 md:gap-4 lg:hover:!opacity-100 lg:group-hover/list:opacity-50">
+    class="group relative grid grid-cols-8 gap-4 transition-all sm:items-center sm:gap-8 md:gap-4 lg:hover:!opacity-100 lg:group-hover/list:opacity-50"
+  >
     <div
-      class="absolute -inset-x-4 -inset-y-4 z-0 hidden rounded-md transition motion-reduce:transition-none lg:-inset-x-6 lg:block lg:group-hover:bg-slate-800/50 lg:group-hover:shadow-[inset_0_1px_0_0_rgba(148,163,184,0.1)] lg:group-hover:drop-shadow-lg">
-    </div>
-    <img alt="Telescope" loading="lazy" width="200" height="48" decoding="async" data-nimg="1"
+      class="absolute -inset-x-4 -inset-y-4 z-0 hidden rounded-md transition motion-reduce:transition-none lg:-inset-x-6 lg:block lg:group-hover:bg-slate-800/50 lg:group-hover:shadow-[inset_0_1px_0_0_rgba(148,163,184,0.1)] lg:group-hover:drop-shadow-lg"
+    ></div>
+    <img
+      alt="Telescope"
+      loading="lazy"
+      width="200"
+      height="48"
+      decoding="async"
+      data-nimg="1"
       class="z-10 col-span-2 rounded border-2 border-slate-200/10 transition group-hover:border-slate-200/30 sm:col-span-2"
-      style="color:transparent"
-      srcset="/_next/image?url=%2Fimages%2Fwriting%2Falgolia-search.jpeg&amp;w=256&amp;q=75 1x, /_next/image?url=%2Fimages%2Fwriting%2Falgolia-search.jpeg&amp;w=640&amp;q=75 2x"
-      :src="image" />
+      style="color: transparent"
+      srcset="
+        /_next/image?url=%2Fimages%2Fwriting%2Falgolia-search.jpeg&amp;w=256&amp;q=75 1x,
+        /_next/image?url=%2Fimages%2Fwriting%2Falgolia-search.jpeg&amp;w=640&amp;q=75 2x
+      "
+      :src="image"
+    />
     <div class="z-10 col-span-6">
       <p class="-mt-1 text-sm font-semibold leading-6">{{ year }}</p>
       <h3 class="-mt-1">
-        <a class="inline-flex items-baseline font-medium leading-tight text-slate-200 hover:text-teal-300 focus-visible:text-teal-300  group/link text-base"
-          :href="url" rel="noreferrer" aria-label="Integrating Algolia Search with WordPress Multisite">
-          <span class="absolute -inset-x-4 -inset-y-2.5 hidden rounded md:-inset-x-6 md:-inset-y-4 lg:block"></span>
+        <a
+          class="inline-flex items-baseline font-medium leading-tight text-slate-200 hover:text-teal-300 focus-visible:text-teal-300 group/link text-base"
+          :href="url"
+          rel="noreferrer"
+          aria-label="Integrating Algolia Search with WordPress Multisite"
+        >
+          <span
+            class="absolute -inset-x-4 -inset-y-2.5 hidden rounded md:-inset-x-6 md:-inset-y-4 lg:block"
+          ></span>
           <span>
             {{ title }}
-            <UIcon name="i-carbon-arrow-up-right" aria-hidden="true"
-              class="inline-block h-4 w-4 shrink-0 transition-transform group-hover/link:-translate-y-1 group-hover/link:translate-x-1 group-focus-visible/link:-translate-y-1 group-focus-visible/link:translate-x-1 motion-reduce:transition-none ml-1 translate-y-px" />
+            <UIcon
+              name="i-carbon-arrow-up-right"
+              aria-hidden="true"
+              class="inline-block h-4 w-4 shrink-0 transition-transform group-hover/link:-translate-y-1 group-hover/link:translate-x-1 group-focus-visible/link:-translate-y-1 group-focus-visible/link:translate-x-1 motion-reduce:transition-none ml-1 translate-y-px"
+            />
           </span>
         </a>
       </h3>
     </div>
   </div>
-</template>
+</template>

components/CardLink.vue

@@ -1,25 +1,33 @@
 <script setup lang="ts">
-
 const props = defineProps<{
-  text: string
-  url: string
-}>()
+  text: string;
+  url: string;
+}>();
 
-const { text, url } = toRefs(props)
+const { text, url } = toRefs(props);
 </script>
 
 <template>
-  <a class="relative mt-2 inline-flex items-center text-sm font-medium text-slate-300 hover:text-teal-300 focus-visible:text-teal-300"
-    :href="url" target="_blank" rel="noreferrer">
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="mr-1 h-3 w-3"
-      aria-hidden="true">
+  <a
+    class="relative mt-2 inline-flex items-center text-sm font-medium text-slate-300 hover:text-teal-300 focus-visible:text-teal-300"
+    :href="url"
+    target="_blank"
+    rel="noreferrer"
+  >
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 20 20"
+      fill="currentColor"
+      class="mr-1 h-3 w-3"
+      aria-hidden="true"
+    >
       <path
-        d="M12.232 4.232a2.5 2.5 0 013.536 3.536l-1.225 1.224a.75.75 0 001.061 1.06l1.224-1.224a4 4 0 00-5.656-5.656l-3 3a4 4 0 00.225 5.865.75.75 0 00.977-1.138 2.5 2.5 0 01-.142-3.667l3-3z">
-      </path>
+        d="M12.232 4.232a2.5 2.5 0 013.536 3.536l-1.225 1.224a.75.75 0 001.061 1.06l1.224-1.224a4 4 0 00-5.656-5.656l-3 3a4 4 0 00.225 5.865.75.75 0 00.977-1.138 2.5 2.5 0 01-.142-3.667l3-3z"
+      ></path>
       <path
-        d="M11.603 7.963a.75.75 0 00-.977 1.138 2.5 2.5 0 01.142 3.667l-3 3a2.5 2.5 0 01-3.536-3.536l1.225-1.224a.75.75 0 00-1.061-1.06l-1.224 1.224a4 4 0 105.656 5.656l3-3a4 4 0 00-.225-5.865z">
-      </path>
+        d="M11.603 7.963a.75.75 0 00-.977 1.138 2.5 2.5 0 01.142 3.667l-3 3a2.5 2.5 0 01-3.536-3.536l1.225-1.224a.75.75 0 00-1.061-1.06l-1.224 1.224a4 4 0 105.656 5.656l3-3a4 4 0 00-.225-5.865z"
+      ></path>
     </svg>
     <span>{{ text }}</span>
   </a>
-</template>
+</template>

components/DesktopPC.vue

@@ -1,13 +1,19 @@
 <script setup lang="ts">
-import { MouseParallax, OrbitControls, useGLTF, useProgress } from '@tresjs/cientos';
-import { TresCanvas, useRenderLoop } from '@tresjs/core';
-import { ACESFilmicToneMapping, BasicShadowMap, SRGBColorSpace } from 'three';
-import { reactive, ref } from 'vue';
-
-const { scene } = await useGLTF('/gaming_desktop_pc/scene.gltf', { draco: true })
-const { hasFinishLoading, progress, items } = await useProgress()
-scene.background = null
+import {
+  MouseParallax,
+  OrbitControls,
+  useGLTF,
+  useProgress,
+} from "@tresjs/cientos";
+import { TresCanvas, useRenderLoop } from "@tresjs/core";
+import { ACESFilmicToneMapping, BasicShadowMap, SRGBColorSpace } from "three";
+import { reactive, ref } from "vue";
 
+const { scene } = await useGLTF("/gaming_desktop_pc/scene.gltf", {
+  draco: true,
+});
+const { hasFinishLoading, progress, items } = await useProgress();
+scene.background = null;
 
 const state = reactive({
   shadows: true,
@@ -17,37 +23,69 @@ const state = reactive({
   toneMapping: ACESFilmicToneMapping,
   toneMappingExposure: 3,
   physicallyCorrectLights: true,
-})
+});
 
-const sphereRef = ref()
-const isMobile = ref(false)
+const sphereRef = ref();
+const isMobile = ref(false);
 
-const { onLoop } = useRenderLoop()
+const { onLoop } = useRenderLoop();
 
 onLoop(({ elapsed }) => {
-  if (!sphereRef.value) return
-  sphereRef.value.position.y += Math.sin(elapsed) * 0.01
-})
+  if (!sphereRef.value) return;
+  sphereRef.value.position.y += Math.sin(elapsed) * 0.01;
+});
 </script>
 
 <template>
-  <div class="bg-transparent h-[400px] cursor-grab hidden md:flex" :class="{ 'w-[90vw]': isMobile, 'w-[650px]': !isMobile }">
-    <TresCanvas v-bind="state" :antialias="true" :preserve-drawing-buffer="true" frameloop="demand">
-      <TresPerspectiveCamera :position="[20, 3, 5]" :fov="32" :near="1" :far="100" :aspect="'width/height'" />
-      <OrbitControls :enable-zoom="false" :min-polar-angle="Math.PI / 2" :max-polar-angle="Math.PI / 2" />
+  <div
+    class="bg-transparent h-[400px] cursor-grab hidden md:flex"
+    :class="{ 'w-[90vw]': isMobile, 'w-[650px]': !isMobile }"
+  >
+    <TresCanvas
+      v-bind="state"
+      :antialias="true"
+      :preserve-drawing-buffer="true"
+      frameloop="demand"
+    >
+      <TresPerspectiveCamera
+        :position="[20, 3, 5]"
+        :fov="32"
+        :near="1"
+        :far="100"
+        :aspect="'width/height'"
+      />
+      <OrbitControls
+        :enable-zoom="false"
+        :min-polar-angle="Math.PI / 2"
+        :max-polar-angle="Math.PI / 2"
+      />
       <TresHemisphereLight :intensity="0.15" ground-color="black" />
-      <TresSpotLight :position="[-20, 50, 10]" :angle="0.12" :penumbra="1" :intensity="1" cast-shadow
-        :shadow-mapsize="1024" />
+      <TresSpotLight
+        :position="[-20, 50, 10]"
+        :angle="0.12"
+        :penumbra="1"
+        :intensity="1"
+        cast-shadow
+        :shadow-mapsize="1024"
+      />
       <TresPointLight :intensity="1" cast-shadow />
       <Suspense>
-        <primitive :object="scene" :scale="isMobile ? 0.7 : 1" :position="isMobile ? [0, -3, -2.2] : [0, -3.25, -1.5]"
-          :rotation="[-0.01, -0.2, -0.1]" />
+        <primitive
+          :object="scene"
+          :scale="isMobile ? 0.7 : 1"
+          :position="isMobile ? [0, -3, -2.2] : [0, -3.25, -1.5]"
+          :rotation="[-0.01, -0.2, -0.1]"
+        />
         <!-- <template #fallback>
           <p>Loading...{{ progress }}</p>
         </template> -->
       </Suspense>
       <MouseParallax :factor="0.5" :ease="3" />
-      <TresDirectionalLight :position="[0, 2, 4]" :intensity=".5" cast-shadow />
+      <TresDirectionalLight
+        :position="[0, 2, 4]"
+        :intensity="0.5"
+        cast-shadow
+      />
     </TresCanvas>
   </div>
-</template>
+</template>