Add uses page

app/components/AppTitle.vue

@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+defineProps({
+  title: {
+    type: String,
+    required: true
+  },
+  description: {
+    type: String,
+    required: true
+  }
+})
+</script>
+
+<template>
+  <div>
+    <h1
+      class="text-2xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100"
+    >
+      {{ title }}
+    </h1>
+    <p class="mt-6 text-base text-gray-600 dark:text-gray-400">
+      {{ description }}
+    </p>
+  </div>
+</template>

app/components/uses/Item.vue

@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+import type { PropType } from 'vue'
+import type { UsesItem } from '#components'
+
+defineProps({
+  item: {
+    type: Object as PropType<typeof UsesItem>,
+    required: true
+  }
+})
+</script>
+
+<template>
+  <li>
+    <p class="text-base font-semibold text-black dark:text-white">
+      {{ item.name }}
+    </p>
+    <p class="text-sm text-gray-600 dark:text-gray-400">
+      {{ item.description }}
+    </p>
+  </li>
+</template>

app/pages/uses.vue

@@ -1,13 +1,58 @@
 <script setup lang="ts">
-
+const description
+  = 'Software I use, gadgets I love, and other things I recommend. Here’s a big list of all of my favorite stuff.'
+useSeoMeta({
+  title: 'Things I use | Arthur Danjou',
+  description
+})
+const { data: items } = await useAsyncData('uses', () =>
+  queryContent('/uses').find()
+)
+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')
 </script>
 
 <template>
-  <div>
-    <h1>Uses</h1>
-  </div>
+  <main>
+    <AppTitle
+      :description="description"
+      title="Uses"
+    />
+    <div class="mt-12 space-y-24">
+      <ul class="space-y-8">
+        <UDivider
+          label="Hardware"
+          size="xs"
+        />
+        <UsesItem
+          v-for="(item, id) in hardware"
+          :key="id"
+          :item="item"
+        />
+      </ul>
+      <ul class="space-y-8">
+        <UDivider
+          label="Software"
+          size="xs"
+        />
+        <UsesItem
+          v-for="(item, id) in software"
+          :key="id"
+          :item="item"
+        />
+      </ul>
+      <ul class="space-y-8">
+        <UDivider
+          label="IDE & Font"
+          size="xs"
+        />
+        <UsesItem
+          v-for="(item, id) in ide"
+          :key="id"
+          :item="item"
+        />
+      </ul>
+    </div>
+  </main>
 </template>
-
-<style scoped>
-
-</style>

content/uses/jetbrains-suite.json

@@ -1,5 +1,5 @@
 {
   "name": "JetBrains Suite (IntelliJ IDEA Ultimate, PyCharm Professional, WebStorm, DataGrip)",
   "description": "I use JetBrains Suite for development for 7 years. It's the best IDEs for Java, Python, JavaScript, SQL, and more. I used this suite to develop and to create this website.",
-  "category": "IDEs"
+  "category": "ide"
 }

content/uses/themes-fonts.json

@@ -1,5 +1,5 @@
 {
   "name": "Theme and Font",
   "description": "My theme is Catppuccin Macchiato, a community-driven pastel theme that aims to be the middle ground between low and high contrast themes. My main fonts are Vercel Geist and JetBrains Mono",
-  "category": "IDEs"
+  "category": "ide"
 }

content/uses/warp.json

@@ -1,5 +1,5 @@
 {
   "name": "Warp",
   "description": "Warp is a modern, Rust-based terminal reimagined with AI and collaborative tools for better productivity. I'm loving it so far!",
-  "category": "hardware"
+  "category": "software"
 }

types.ts

@@ -45,3 +45,8 @@ export const IDEs = [
   { name: 'IntelliJ IDEA Ultimate', icon: 'i-skill-icons-idea-light' },
   { name: 'WebStorm', icon: 'i-skill-icons-webstorm-light' }
 ]
+
+export interface UsesItem {
+  name: string
+  description: string
+}