Add: Introduce new IDE 'Cursor' and update ProseImg component

- Added 'Cursor' IDE to the uses page with corresponding images and descriptions.
- Updated ProseImg component to support an optional 'rounded' prop for image styling.
- Removed outdated JetBrains image and replaced it with a new webp format.
- Adjusted layout and spacing in the uses page for better presentation of IDEs.

app/components/content/ProseImg.vue

@@ -1,10 +1,10 @@
 <script lang="ts" setup>
-defineProps<{ src: string, label: string, caption?: string }>()
+defineProps<{ src: string, label: string, caption?: string, rounded?: boolean }>()
 </script>
 
 <template>
   <div class="flex flex-col justify-center items-center prose-none my-8">
-    <img :src="src" :alt="label" class="w-full h-auto m-0 prose-none">
+    <img :src="src" :alt="label" class="w-full h-auto m-0 prose-none" :class="{ 'rounded-lg': rounded }">
     <p class="mt-2 text-sm text-gray-500 dark:text-gray-300 prose-none">
       {{ caption }}
     </p>

app/components/home/Activity.vue

@@ -95,7 +95,7 @@ const getActivity = computed(() => {
         tag="div"
       >
         <template #state>
-          <strong>{{ getActivity.state.split(' ').map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(' ') }}</strong>
+          <strong>{{ getActivity.state!.split(' ').map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(' ') }}</strong>
         </template>
         <template #project>
           <i>{{ getActivity.project.replaceAll('Editing', '') }}</i>

app/pages/uses.vue

@@ -14,6 +14,25 @@ const hardware = items.value!.filter(item => item.category === 'hardware')
 const software = items.value!.filter(item => item.category === 'software')
 const ide = items.value!.filter(item => item.category === 'ide')
 const stack = items.value!.filter(item => item.category === 'stack')
+
+const photos = [
+  {
+    src: '/uses/jetbrains.webp',
+    caption: 'caption.jetbrains',
+  },
+  {
+    src: '/uses/cursor.webp',
+    caption: 'caption.cursor',
+  },
+  {
+    src: '/uses/pycharm.webp',
+    caption: 'caption.pycharm',
+  },
+  {
+    src: '/uses/datagrip.webp',
+    caption: 'caption.datagrip',
+  },
+]
 </script>
 
 <template>
@@ -22,7 +41,7 @@ const stack = items.value!.filter(item => item.category === 'stack')
       :description="t('description')"
       :title="t('title')"
     />
-    <div class="mt-12 space-y-24">
+    <div class="mt-12 space-y-12">
       <UsesList :title="t('hardware')">
         <UsesItem
           v-for="(item, id) in hardware"
@@ -42,16 +61,25 @@ const stack = items.value!.filter(item => item.category === 'stack')
           :label="t('ide')"
           size="xs"
         />
-        <li class="relative">
-          <NuxtImg
-            alt="My IntelliJ IDE"
-            src="/uses/jetbrains.png"
-            class="mx-auto md:w-4/5"
-          />
-          <p class="mt-2 text-sm italic flex gap-2 justify-center items-center">
-            {{ t('intellij') }}
-          </p>
-        </li>
+        <div class="relative">
+          <UCarousel
+            v-slot="{ item }"
+            arrows
+            loop
+            class="rounded-lg"
+            :autoplay="{ delay: 4000 }"
+            :items="photos"
+            prev-icon="i-lucide-chevron-left"
+            next-icon="i-lucide-chevron-right"
+          >
+            <ProseImg
+              rounded
+              :src="item.src"
+              :label="t(item.caption)"
+              :caption="t(item.caption)"
+            />
+          </UCarousel>
+        </div>
         <UsesItem
           v-for="(item, id) in ide"
           :key="id"
@@ -78,7 +106,12 @@ const stack = items.value!.filter(item => item.category === 'stack')
     "software": "Software",
     "ide": "IDE & Font",
     "stack": "Stack",
-    "intellij": "My IntelliJ Idea Ultimate IDE"
+    "caption": {
+      "jetbrains": "My IntelliJ IDE",
+      "cursor": "My Cursor IDE",
+      "pycharm": "My PyCharm IDE",
+      "datagrip": "My DataGrip IDE"
+    }
   },
   "fr": {
     "title": "Mes usages",
@@ -87,7 +120,12 @@ const stack = items.value!.filter(item => item.category === 'stack')
     "software": "Logiciel",
     "ide": "IDE & Police",
     "stack": "Stack",
-    "intellij": "Mon IDE IntelliJ Idea Ultimate"
+    "caption": {
+      "jetbrains": "Mon IDE IntelliJ Idea Ultimate",
+      "cursor": "Mon IDE Cursor",
+      "pycharm": "Mon IDE PyCharm",
+      "datagrip": "Mon IDE DataGrip"
+    }
   },
   "es": {
     "title": "Mis aplicaciones.",
@@ -96,7 +134,12 @@ const stack = items.value!.filter(item => item.category === 'stack')
     "software": "Programas",
     "ide": "IDE y Fuente",
     "stack": "Stack",
-    "intellij": "Mi IDE IntelliJ Idea Ultimate"
+    "caption": {
+      "jetbrains": "Mi IDE IntelliJ Idea Ultimate",
+      "cursor": "Mi IDE Cursor",
+      "pycharm": "Mi IDE PyCharm",
+      "datagrip": "Mi IDE DataGrip"
+    }
   }
 }
 </i18n>

content/uses/cursos.json

@@ -0,0 +1,9 @@
+{
+  "name": "Cursor",
+  "description": {
+    "en": "Built to make me extraordinarily productive, Cursor is the best way to code with AI. It's an excellent IDE for Python, JavaScript, SQL, and more. I heavily use the AI features to boost my productivity.",
+    "fr": "Construit pour me rendre extrêmement productif, Cursor est la meilleure façon de coder avec l'IA. C'est un excellent IDE pour Python, JavaScript, SQL et plus encore. J'utilise énormément les fonctionnalités IA pour augmenter ma productivité.",
+    "es": "Construido para hacerme extraordinariamente productivo, Cursor es la mejor manera de programar con IA. Es un excelente IDE para Python, JavaScript, SQL y más. Utilizo mucho las funciones de IA para aumentar mi productividad."
+  },
+  "category": "ide"
+}

package.json

@@ -25,6 +25,7 @@
     "@nuxthub/core": "^0.8.23",
     "@nuxtjs/google-fonts": "^3.2.0",
     "@nuxtjs/i18n": "9.5.2",
+    "@vueuse/core": "^13.0.0",
     "drizzle-orm": "^0.41.0",
     "h3-zod": "^0.5.3",
     "nuxt": "^3.16.2",
@@ -39,7 +40,6 @@
     "@antfu/eslint-config": "^4.11.0",
     "@tailwindcss/typography": "^0.5.16",
     "@types/node": "^22.14.0",
-    "@vueuse/core": "^13.0.0",
     "@vueuse/math": "^13.0.0",
     "@vueuse/nuxt": "^13.0.0",
     "drizzle-kit": "^0.30.6",

pnpm-lock.yaml

@@ -44,6 +44,9 @@ importers:
       '@nuxtjs/i18n':
         specifier: 9.5.2
         version: 9.5.2(@vue/compiler-dom@3.5.13)(eslint@9.24.0(jiti@2.4.2))(magicast@0.3.5)(rollup@4.36.0)(vue@3.5.13(typescript@5.8.3))
+      '@vueuse/core':
+        specifier: ^13.0.0
+        version: 13.0.0(vue@3.5.13(typescript@5.8.3))
       drizzle-orm:
         specifier: ^0.41.0
         version: 0.41.0(@opentelemetry/api@1.9.0)(better-sqlite3@11.9.1)(gel@2.0.1)(pg@8.13.1)
@@ -81,9 +84,6 @@ importers:
       '@types/node':
         specifier: ^22.14.0
         version: 22.14.0
-      '@vueuse/core':
-        specifier: ^13.0.0
-        version: 13.0.0(vue@3.5.13(typescript@5.8.3))
       '@vueuse/math':
         specifier: ^13.0.0
         version: 13.0.0(vue@3.5.13(typescript@5.8.3))