Rework index and docs pages with @nuxt/ui components

Co-authored-by: ArthurDanjou <29738535+ArthurDanjou@users.noreply.github.com>

app/pages/docs.vue

@@ -0,0 +1,414 @@
+<script setup lang="ts">
+const { data: _docs } = await useAsyncData('docs', () =>
+  queryCollection('docs').first()
+)
+
+const tools = [
+  {
+    name: 'activity',
+    description: 'Real-time current activity and status of Arthur Danjou, including what he\'s currently working on.',
+    inputs: []
+  },
+  {
+    name: 'resume-link',
+    description: 'Retrieves a direct download link to Arthur Danjou\'s professional resume in the specified language.',
+    inputs: [{ name: 'lang', type: 'string', description: 'The language for the resume: \'en\' for English or \'fr\' for French' }]
+  },
+  {
+    name: 'stats',
+    description: 'Detailed coding statistics and analytics from WakaTime, including programming languages, time spent coding, and productivity metrics.',
+    inputs: []
+  },
+  {
+    name: 'status-page',
+    description: 'Real-time status, uptime monitoring, and incident reports for Arthur Danjou\'s homelab infrastructure, powered by UptimeKuma.',
+    inputs: []
+  },
+  {
+    name: 'uses-by-category',
+    description: 'Retrieves a filtered list of tools, software, and hardware used by Arthur Danjou based on a specific category.',
+    inputs: [{ name: 'categoryName', type: 'string', description: 'The category to filter by: \'homelab\', \'ide\', \'hardware\', or \'software\'' }]
+  },
+  {
+    name: 'weather',
+    description: 'Get current weather for a city.',
+    inputs: [{ name: 'city', type: 'string', description: 'City name' }]
+  }
+]
+
+const prompts = [
+  { name: 'activity', description: 'Retrieve Arthur Danjou\'s current real-time activity status' },
+  { name: 'contact', description: 'Retrieve contact information and social media links' },
+  { name: 'hobbies', description: 'Retrieve information about hobbies and interests' },
+  { name: 'languages', description: 'Retrieve languages spoken with proficiency levels' },
+  { name: 'profile', description: 'Retrieve comprehensive professional profile information' },
+  { name: 'projects', description: 'Retrieve list of personal and professional projects' },
+  { name: 'resume', description: 'Request and retrieve professional resume in specified language' },
+  { name: 'skills', description: 'Retrieve comprehensive list of technical skills' },
+  { name: 'stats', description: 'Retrieve detailed coding statistics from WakaTime' },
+  { name: 'status-page', description: 'Retrieve real-time status page of homelab infrastructure' },
+  { name: 'uses-by-category', description: 'Retrieve tools, software, and hardware by category' }
+]
+
+const resources = [
+  { uri: 'resource://artmcp/profile', title: 'Professional Profile', description: 'Biography, location, availability, career goals' },
+  { uri: 'resource://artmcp/contact', title: 'Contact Information', description: 'Email, LinkedIn, GitHub, social media links' },
+  { uri: 'resource://artmcp/education', title: 'Education', description: 'Degrees, institutions, academic achievements' },
+  { uri: 'resource://artmcp/experiences', title: 'Experiences', description: 'Professional work experiences and roles' },
+  { uri: 'resource://artmcp/hobbies', title: 'Hobbies & Interests', description: 'Personal hobbies and passions' },
+  { uri: 'resource://artmcp/languages', title: 'Spoken Languages', description: 'Languages with proficiency levels' },
+  { uri: 'resource://artmcp/projects', title: 'Projects Portfolio', description: 'Technical projects and achievements' },
+  { uri: 'resource://artmcp/skills', title: 'Skills', description: 'Technical skills and tools mastered' },
+  { uri: 'resource://artmcp/uses', title: 'Tech Stack & Tools', description: 'Tools, software, and hardware used' }
+]
+
+const apiEndpoints = [
+  { method: 'GET', path: '/api/profile', description: 'Profile information' },
+  { method: 'GET', path: '/api/contact', description: 'Contact information' },
+  { method: 'GET', path: '/api/skills', description: 'Technical skills' },
+  { method: 'GET', path: '/api/experiences', description: 'Work experiences' },
+  { method: 'GET', path: '/api/education', description: 'Education background' },
+  { method: 'GET', path: '/api/projects', description: 'Projects portfolio' },
+  { method: 'GET', path: '/api/languages', description: 'Spoken languages' },
+  { method: 'GET', path: '/api/hobbies', description: 'Hobbies and interests' },
+  { method: 'GET', path: '/api/uses', description: 'Tech stack and tools' },
+  { method: 'GET', path: '/api/activity', description: 'Real-time activity' },
+  { method: 'GET', path: '/api/wakatime', description: 'Coding statistics' },
+  { method: 'GET', path: '/api/status-page', description: 'Status page' },
+  { method: 'GET', path: '/api/resumes/{en|fr}', description: 'Download resume' }
+]
+</script>
+
+<template>
+  <div class="min-h-screen bg-gray-50 dark:bg-gray-900">
+    <!-- Hero Header -->
+    <div class="bg-gradient-to-br from-primary to-primary-600 dark:from-primary-900 dark:to-primary-800">
+      <UContainer class="py-16">
+        <div class="text-center text-white">
+          <UBadge
+            color="white"
+            variant="subtle"
+            size="lg"
+            class="mb-4"
+          >
+            Model Context Protocol
+          </UBadge>
+          <h1 class="text-4xl sm:text-5xl font-bold mb-4">
+            ArtMCP Documentation
+          </h1>
+          <p class="text-xl text-white/90 mb-8 max-w-2xl mx-auto">
+            Complete documentation for ArtMCP - Arthur Danjou's Model Context Protocol Server
+          </p>
+          <div class="flex flex-col sm:flex-row gap-4 justify-center">
+            <UButton
+              to="/"
+              size="lg"
+              color="white"
+              variant="solid"
+              icon="i-heroicons-arrow-left"
+            >
+              Back to Home
+            </UButton>
+            <UButton
+              to="https://github.com/ArthurDanjou/artapi"
+              target="_blank"
+              size="lg"
+              color="white"
+              variant="outline"
+              icon="i-simple-icons-github"
+            >
+              View on GitHub
+            </UButton>
+          </div>
+        </div>
+      </UContainer>
+    </div>
+
+    <!-- Main Content -->
+    <UContainer class="py-12">
+      <!-- Overview -->
+      <UCard
+        class="mb-8"
+        :ui="{ body: { padding: 'p-8' } }"
+      >
+        <h2 class="text-3xl font-bold mb-4">
+          What is ArtMCP?
+        </h2>
+        <p class="text-lg text-gray-600 dark:text-gray-400 mb-4">
+          ArtMCP provides AI assistants and applications with structured access to Arthur Danjou's professional information through the Model Context Protocol. This includes:
+        </p>
+        <div class="grid md:grid-cols-2 gap-4">
+          <div class="flex items-start gap-3">
+            <UIcon
+              name="i-heroicons-check-circle"
+              class="w-6 h-6 text-green-500 flex-shrink-0 mt-0.5"
+            />
+            <div>
+              <p class="font-medium">
+                Comprehensive profile data and biography
+              </p>
+            </div>
+          </div>
+          <div class="flex items-start gap-3">
+            <UIcon
+              name="i-heroicons-check-circle"
+              class="w-6 h-6 text-green-500 flex-shrink-0 mt-0.5"
+            />
+            <div>
+              <p class="font-medium">
+                Work experiences and professional background
+              </p>
+            </div>
+          </div>
+          <div class="flex items-start gap-3">
+            <UIcon
+              name="i-heroicons-check-circle"
+              class="w-6 h-6 text-green-500 flex-shrink-0 mt-0.5"
+            />
+            <div>
+              <p class="font-medium">
+                Portfolio of projects and achievements
+              </p>
+            </div>
+          </div>
+          <div class="flex items-start gap-3">
+            <UIcon
+              name="i-heroicons-check-circle"
+              class="w-6 h-6 text-green-500 flex-shrink-0 mt-0.5"
+            />
+            <div>
+              <p class="font-medium">
+                Technical skills and expertise
+              </p>
+            </div>
+          </div>
+          <div class="flex items-start gap-3">
+            <UIcon
+              name="i-heroicons-check-circle"
+              class="w-6 h-6 text-green-500 flex-shrink-0 mt-0.5"
+            />
+            <div>
+              <p class="font-medium">
+                Education and academic background
+              </p>
+            </div>
+          </div>
+          <div class="flex items-start gap-3">
+            <UIcon
+              name="i-heroicons-check-circle"
+              class="w-6 h-6 text-green-500 flex-shrink-0 mt-0.5"
+            />
+            <div>
+              <p class="font-medium">
+                Real-time activity and coding statistics
+              </p>
+            </div>
+          </div>
+        </div>
+      </UCard>
+
+      <!-- Quick Start -->
+      <UCard
+        class="mb-8"
+        :ui="{ body: { padding: 'p-8' } }"
+      >
+        <h2 class="text-3xl font-bold mb-6">
+          Quick Start
+        </h2>
+        <p class="text-gray-600 dark:text-gray-400 mb-6">
+          Get started with ArtMCP in seconds by installing it in your favorite AI assistant:
+        </p>
+
+        <div class="grid md:grid-cols-2 gap-6">
+          <div>
+            <h3 class="text-xl font-semibold mb-4">
+              MCP Configuration
+            </h3>
+            <UCard :ui="{ body: { padding: 'p-4' }, background: 'bg-gray-900 dark:bg-gray-950' }">
+              <pre class="text-sm text-gray-100 overflow-x-auto"><code>{
+  "mcpServers": {
+    "artmcp": {
+      "url": "https://api.arthurdanjou.fr/mcp/mcp"
+    }
+  }
+}</code></pre>
+            </UCard>
+          </div>
+
+          <div>
+            <h3 class="text-xl font-semibold mb-4">
+              Direct Connection
+            </h3>
+            <UCard :ui="{ body: { padding: 'p-4' }, background: 'bg-gray-900 dark:bg-gray-950' }">
+              <pre class="text-sm text-gray-100 overflow-x-auto"><code>https://api.arthurdanjou.fr/mcp/mcp</code></pre>
+            </UCard>
+            <p class="text-sm text-gray-600 dark:text-gray-400 mt-2">
+              Use this URL to connect your MCP client directly
+            </p>
+          </div>
+        </div>
+      </UCard>
+
+      <!-- Tools Section -->
+      <UCard
+        class="mb-8"
+        :ui="{ body: { padding: 'p-8' } }"
+      >
+        <h2 class="text-3xl font-bold mb-4">
+          Tools
+        </h2>
+        <p class="text-gray-600 dark:text-gray-400 mb-6">
+          Executable functions that AI assistants can call to perform actions or retrieve dynamic data.
+        </p>
+
+        <UAccordion
+          :items="tools.map(tool => ({
+            label: tool.name,
+            icon: 'i-heroicons-wrench-screwdriver',
+            defaultOpen: false,
+            content: tool.description,
+            slot: 'tool-' + tool.name
+          }))"
+        >
+          <template
+            v-for="tool in tools"
+            :key="tool.name"
+            #[`tool-${tool.name}`]
+          >
+            <div class="p-4">
+              <p class="text-gray-700 dark:text-gray-300 mb-4">
+                {{ tool.description }}
+              </p>
+              <div
+                v-if="tool.inputs.length > 0"
+                class="border-t border-gray-200 dark:border-gray-700 pt-4"
+              >
+                <h4 class="font-semibold mb-2">
+                  Inputs:
+                </h4>
+                <ul class="space-y-2">
+                  <li
+                    v-for="input in tool.inputs"
+                    :key="input.name"
+                    class="flex gap-2"
+                  >
+                    <UBadge
+                      color="blue"
+                      variant="subtle"
+                    >
+                      {{ input.name }}
+                    </UBadge>
+                    <span class="text-sm text-gray-600 dark:text-gray-400">{{ input.description }}</span>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </template>
+        </UAccordion>
+      </UCard>
+
+      <!-- Prompts Section -->
+      <UCard
+        class="mb-8"
+        :ui="{ body: { padding: 'p-8' } }"
+      >
+        <h2 class="text-3xl font-bold mb-4">
+          Prompts
+        </h2>
+        <p class="text-gray-600 dark:text-gray-400 mb-6">
+          Pre-configured conversation starters that guide AI assistants on how to query specific information.
+        </p>
+
+        <div class="grid md:grid-cols-2 gap-4">
+          <UCard
+            v-for="prompt in prompts"
+            :key="prompt.name"
+            :ui="{ body: { padding: 'p-4' }, ring: 'ring-1 ring-gray-200 dark:ring-gray-800' }"
+          >
+            <div class="flex items-start gap-3">
+              <UIcon
+                name="i-heroicons-chat-bubble-left-right"
+                class="w-5 h-5 text-primary flex-shrink-0 mt-0.5"
+              />
+              <div>
+                <h3 class="font-semibold mb-1">
+                  {{ prompt.name }}
+                </h3>
+                <p class="text-sm text-gray-600 dark:text-gray-400">
+                  {{ prompt.description }}
+                </p>
+              </div>
+            </div>
+          </UCard>
+        </div>
+      </UCard>
+
+      <!-- Resources Section -->
+      <UCard
+        class="mb-8"
+        :ui="{ body: { padding: 'p-8' } }"
+      >
+        <h2 class="text-3xl font-bold mb-4">
+          Resources
+        </h2>
+        <p class="text-gray-600 dark:text-gray-400 mb-6">
+          Static or semi-static data endpoints that provide structured information.
+        </p>
+
+        <div class="space-y-3">
+          <UCard
+            v-for="resource in resources"
+            :key="resource.uri"
+            :ui="{ body: { padding: 'p-4' }, ring: 'ring-1 ring-gray-200 dark:ring-gray-800' }"
+          >
+            <div class="flex flex-col gap-2">
+              <div class="flex items-center gap-2">
+                <UIcon
+                  name="i-heroicons-document-text"
+                  class="w-5 h-5 text-primary"
+                />
+                <h3 class="font-semibold">
+                  {{ resource.title }}
+                </h3>
+              </div>
+              <code class="text-xs text-gray-600 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded">
+                {{ resource.uri }}
+              </code>
+              <p class="text-sm text-gray-600 dark:text-gray-400">
+                {{ resource.description }}
+              </p>
+            </div>
+          </UCard>
+        </div>
+      </UCard>
+
+      <!-- API Endpoints Section -->
+      <UCard :ui="{ body: { padding: 'p-8' } }">
+        <h2 class="text-3xl font-bold mb-4">
+          REST API Endpoints
+        </h2>
+        <p class="text-gray-600 dark:text-gray-400 mb-6">
+          All resources are also available as REST API endpoints for direct HTTP access.
+        </p>
+
+        <div class="space-y-2">
+          <div
+            v-for="endpoint in apiEndpoints"
+            :key="endpoint.path"
+            class="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+          >
+            <UBadge
+              color="green"
+              variant="subtle"
+              class="font-mono text-xs"
+            >
+              {{ endpoint.method }}
+            </UBadge>
+            <code class="text-sm font-mono text-gray-900 dark:text-gray-100 flex-1">{{ endpoint.path }}</code>
+            <span class="text-sm text-gray-600 dark:text-gray-400">{{ endpoint.description }}</span>
+          </div>
+        </div>
+      </UCard>
+    </UContainer>
+  </div>
+</template>

app/pages/index.vue

@@ -1,19 +1,283 @@
 <script setup lang="ts">
-const { data: index } = await useAsyncData('index', () =>
+const { data: _index } = await useAsyncData('index', () =>
   queryCollection('index').first()
 )
+
+const features = [
+  {
+    icon: 'i-heroicons-cpu-chip',
+    title: 'MCP Server Integration',
+    description: 'Connect AI assistants directly through the Model Context Protocol for real-time profile access.'
+  },
+  {
+    icon: 'i-heroicons-code-bracket',
+    title: 'REST API Endpoints',
+    description: 'Clean, well-documented API endpoints for seamless integration into your applications.'
+  },
+  {
+    icon: 'i-heroicons-chart-bar',
+    title: 'Real-Time Data',
+    description: 'Live updates on activity, coding statistics, and homelab status.'
+  },
+  {
+    icon: 'i-heroicons-user-circle',
+    title: 'Comprehensive Profile',
+    description: 'Detailed information about skills, experiences, education, projects, and more.'
+  },
+  {
+    icon: 'i-heroicons-bolt',
+    title: 'Edge Deployment',
+    description: 'Deployed on Cloudflare Workers for ultra-fast global access.'
+  },
+  {
+    icon: 'i-heroicons-shield-check',
+    title: 'Type-Safe & Validated',
+    description: 'Built with TypeScript and Zod for robust data validation.'
+  }
+]
+
+const resources = [
+  { label: 'Profile', icon: 'i-heroicons-user', to: '/api/profile' },
+  { label: 'Skills', icon: 'i-heroicons-academic-cap', to: '/api/skills' },
+  { label: 'Projects', icon: 'i-heroicons-rocket-launch', to: '/api/projects' },
+  { label: 'Experiences', icon: 'i-heroicons-briefcase', to: '/api/experiences' },
+  { label: 'Education', icon: 'i-heroicons-book-open', to: '/api/education' },
+  { label: 'Activity', icon: 'i-heroicons-clock', to: '/api/activity' }
+]
 </script>
 
 <template>
-  <div>
-    <ContentRenderer
-      v-if="index"
-      :value="index"
-    />
-    <div
-      v-else
+  <div class="min-h-screen bg-gradient-to-b from-gray-50 to-white dark:from-gray-950 dark:to-gray-900">
+    <!-- Hero Section -->
+    <UContainer class="py-16 sm:py-24">
+      <div class="text-center">
+        <UBadge
+          color="primary"
+          variant="subtle"
+          size="lg"
+          class="mb-6"
         >
-      Loading index page...
+          Professional API & MCP Server
+        </UBadge>
+
+        <h1 class="text-5xl sm:text-6xl font-bold text-gray-900 dark:text-white mb-6">
+          Welcome to <span class="text-primary">ArtAPI</span>
+        </h1>
+
+        <p class="text-xl text-gray-600 dark:text-gray-400 mb-4 max-w-3xl mx-auto">
+          Professional API and Model Context Protocol server by
+          <span class="font-semibold text-gray-900 dark:text-white">Arthur Danjou</span>
+        </p>
+
+        <p class="text-lg text-gray-500 dark:text-gray-500 mb-8 max-w-2xl mx-auto">
+          Data Science & Applied AI student at Paris Dauphine-PSL University, passionate about machine learning and mathematical modelling
+        </p>
+
+        <div class="flex flex-col sm:flex-row gap-4 justify-center mb-12">
+          <UButton
+            to="/docs"
+            size="xl"
+            icon="i-heroicons-book-open"
+            class="shadow-lg"
+          >
+            MCP Documentation
+          </UButton>
+          <UButton
+            to="https://github.com/ArthurDanjou/artapi"
+            target="_blank"
+            size="xl"
+            color="gray"
+            variant="outline"
+            icon="i-simple-icons-github"
+          >
+            View on GitHub
+          </UButton>
         </div>
+
+        <div class="flex flex-wrap gap-3 justify-center text-sm">
+          <UBadge
+            color="blue"
+            variant="subtle"
+          >
+            Nuxt 4
+          </UBadge>
+          <UBadge
+            color="green"
+            variant="subtle"
+          >
+            MCP Protocol
+          </UBadge>
+          <UBadge
+            color="purple"
+            variant="subtle"
+          >
+            TypeScript
+          </UBadge>
+          <UBadge
+            color="orange"
+            variant="subtle"
+          >
+            Edge Deployed
+          </UBadge>
+        </div>
+      </div>
+    </UContainer>
+
+    <!-- Features Grid -->
+    <UContainer class="py-16">
+      <div class="text-center mb-12">
+        <h2 class="text-3xl font-bold text-gray-900 dark:text-white mb-4">
+          Key Features
+        </h2>
+        <p class="text-lg text-gray-600 dark:text-gray-400">
+          Everything you need to access professional profile data programmatically
+        </p>
+      </div>
+
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        <UCard
+          v-for="feature in features"
+          :key="feature.title"
+          :ui="{
+            body: { padding: 'p-6' },
+            ring: 'ring-1 ring-gray-200 dark:ring-gray-800',
+            shadow: 'shadow-lg hover:shadow-xl transition-shadow duration-300'
+          }"
+        >
+          <div class="flex flex-col items-start gap-4">
+            <div class="p-3 rounded-lg bg-primary/10">
+              <UIcon
+                :name="feature.icon"
+                class="w-6 h-6 text-primary"
+              />
+            </div>
+            <div>
+              <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">
+                {{ feature.title }}
+              </h3>
+              <p class="text-gray-600 dark:text-gray-400">
+                {{ feature.description }}
+              </p>
+            </div>
+          </div>
+        </UCard>
+      </div>
+    </UContainer>
+
+    <!-- Quick Access Resources -->
+    <UContainer class="py-16">
+      <div class="text-center mb-12">
+        <h2 class="text-3xl font-bold text-gray-900 dark:text-white mb-4">
+          Available Resources
+        </h2>
+        <p class="text-lg text-gray-600 dark:text-gray-400">
+          Quick access to API endpoints
+        </p>
+      </div>
+
+      <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
+        <UButton
+          v-for="resource in resources"
+          :key="resource.label"
+          :to="resource.to"
+          target="_blank"
+          color="gray"
+          variant="outline"
+          size="lg"
+          block
+          :ui="{
+            padding: { lg: 'px-4 py-6' },
+            base: 'hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors duration-200'
+          }"
+        >
+          <div class="flex flex-col items-center gap-2">
+            <UIcon
+              :name="resource.icon"
+              class="w-6 h-6"
+            />
+            <span class="text-sm font-medium">{{ resource.label }}</span>
+          </div>
+        </UButton>
+      </div>
+    </UContainer>
+
+    <!-- Getting Started -->
+    <UContainer class="py-16">
+      <UCard
+        :ui="{
+          body: { padding: 'p-8 sm:p-12' },
+          ring: 'ring-1 ring-gray-200 dark:ring-gray-800',
+          background: 'bg-gradient-to-br from-primary/5 to-primary/10 dark:from-primary/10 dark:to-primary/20'
+        }"
+      >
+        <div class="grid md:grid-cols-2 gap-8">
+          <div>
+            <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">
+              For AI Assistants (MCP)
+            </h3>
+            <p class="text-gray-600 dark:text-gray-400 mb-4">
+              Configure your MCP client to connect to my server:
+            </p>
+            <UCard :ui="{ body: { padding: 'p-4' }, background: 'bg-gray-900 dark:bg-gray-950' }">
+              <pre class="text-sm text-gray-100 overflow-x-auto"><code>{
+  "mcpServers": {
+    "artmcp": {
+      "url": "https://api.arthurdanjou.fr/mcp/mcp"
+    }
+  }
+}</code></pre>
+            </UCard>
+          </div>
+
+          <div>
+            <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">
+              For Developers (REST API)
+            </h3>
+            <p class="text-gray-600 dark:text-gray-400 mb-4">
+              Use REST API endpoints in your applications:
+            </p>
+            <UCard :ui="{ body: { padding: 'p-4' }, background: 'bg-gray-900 dark:bg-gray-950' }">
+              <pre class="text-sm text-gray-100 overflow-x-auto"><code># Get profile information
+curl https://api.arthurdanjou.fr/api/profile
+
+# Get technical skills
+curl https://api.arthurdanjou.fr/api/skills</code></pre>
+            </UCard>
+          </div>
+        </div>
+      </UCard>
+    </UContainer>
+
+    <!-- Footer CTA -->
+    <UContainer class="py-16">
+      <div class="text-center">
+        <h2 class="text-3xl font-bold text-gray-900 dark:text-white mb-4">
+          Ready to Get Started?
+        </h2>
+        <p class="text-lg text-gray-600 dark:text-gray-400 mb-8">
+          Explore the full documentation or try the API now
+        </p>
+        <div class="flex flex-col sm:flex-row gap-4 justify-center">
+          <UButton
+            to="/docs"
+            size="xl"
+            icon="i-heroicons-arrow-right"
+            trailing
+          >
+            Read Documentation
+          </UButton>
+          <UButton
+            to="/api/profile"
+            target="_blank"
+            size="xl"
+            color="gray"
+            variant="outline"
+            icon="i-heroicons-globe-alt"
+          >
+            Try the API
+          </UButton>
+        </div>
+      </div>
+    </UContainer>
   </div>
 </template>

app/pages/mcp.vue

@@ -1,134 +0,0 @@
-<script setup lang="ts">
-const { data: mcp } = await useAsyncData('mcp', () =>
-  queryCollection('mcp').first()
-)
-</script>
-
-<template>
-  <div class="mcp-page">
-    <ContentRenderer
-      v-if="mcp"
-      :value="mcp"
-      class="content"
-    />
-    <div
-      v-else
-      class="loading"
-    >
-      Loading mcp...
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.mcp-page {
-  max-width: 800px;
-  margin: 0 auto;
-  padding: 2rem;
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-  line-height: 1.6;
-  color: #333;
-}
-
-.loading {
-  text-align: center;
-  padding: 2rem;
-  color: #666;
-}
-
-.content :deep(h1) {
-  font-size: 2.5rem;
-  margin-bottom: 1rem;
-  color: #1a1a1a;
-  border-bottom: 2px solid #e5e5e5;
-  padding-bottom: 0.5rem;
-}
-
-.content :deep(h2) {
-  font-size: 1.75rem;
-  margin-top: 2rem;
-  margin-bottom: 1rem;
-  color: #2a2a2a;
-}
-
-.content :deep(h3) {
-  font-size: 1.25rem;
-  margin-top: 1.5rem;
-  margin-bottom: 0.5rem;
-  color: #3a3a3a;
-}
-
-.content :deep(p) {
-  margin-bottom: 1rem;
-}
-
-.content :deep(hr) {
-  border: none;
-  border-top: 1px solid #e5e5e5;
-  margin: 2rem 0;
-}
-
-.content :deep(code) {
-  background-color: #f5f5f5;
-  padding: 0.2em 0.4em;
-  border-radius: 3px;
-  font-size: 0.9em;
-  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
-}
-
-.content :deep(pre) {
-  background-color: #1e1e1e;
-  color: #d4d4d4;
-  padding: 1rem;
-  border-radius: 6px;
-  overflow-x: auto;
-  margin: 1rem 0;
-}
-
-.content :deep(pre code) {
-  background-color: transparent;
-  padding: 0;
-  color: inherit;
-}
-
-.content :deep(ul),
-.content :deep(ol) {
-  margin-bottom: 1rem;
-  padding-left: 1.5rem;
-}
-
-.content :deep(li) {
-  margin-bottom: 0.5rem;
-}
-
-.content :deep(a) {
-  color: #0066cc;
-  text-decoration: none;
-}
-
-.content :deep(a:hover) {
-  text-decoration: underline;
-}
-
-.content :deep(strong) {
-  font-weight: 600;
-}
-
-@media (max-width: 768px) {
-  .mcp-page {
-    padding: 1rem;
-  }
-
-  .content :deep(h1) {
-    font-size: 1.75rem;
-  }
-
-  .content :deep(h2) {
-    font-size: 1.5rem;
-  }
-
-  .content :deep(h3) {
-    font-size: 1.1rem;
-  }
-}
-</style>

content/docs.md

@@ -1,14 +1,18 @@
 ---
 title: ArtMCP Documentation
-description: Documentation for ArtMCP - Arthur Danjou's Model Context Protocol Server
+description: Complete documentation for ArtMCP - Arthur Danjou's Model Context Protocol Server
 mcp: https://api.arthurdanjou.fr/mcp
 ---
 
 # ArtMCP Documentation
 
-Welcome to **ArtMCP**, a comprehensive [Model Context Protocol (MCP)](https://modelcontextprotocol.io) server exposing professional profile information about Arthur Danjou. Built with [Nuxt](https://nuxt.com) and deployed on [NuxtHub](https://hub.nuxt.com) at the Edge.
+**Model Context Protocol Server** for Arthur Danjou's Professional Profile
 
-## Installation
+Welcome to the complete documentation for **ArtMCP**, a comprehensive [Model Context Protocol (MCP)](https://modelcontextprotocol.io) server that exposes professional profile information about Arthur Danjou. Built with [Nuxt](https://nuxt.com) and deployed at the Edge on [NuxtHub](https://hub.nuxt.com).
+
+## Quick Start
+
+Get started with ArtMCP in seconds by installing it in your favorite AI assistant:
 
 ::install-button{:url="mcp"}
 ::
@@ -16,9 +20,18 @@ Welcome to **ArtMCP**, a comprehensive [Model Context Protocol (MCP)](https://mo
 ::install-button{:url="mcp" ide="vscode"}
 ::
 
-## Overview
+## What is ArtMCP?
 
-ArtMCP provides AI assistants and applications with structured access to Arthur Danjou's professional information through the Model Context Protocol. This includes profile data, skills, experiences, projects, and real-time activity information.
+ArtMCP provides AI assistants and applications with structured access to Arthur Danjou's professional information through the Model Context Protocol. This includes:
+
+- 👤 Comprehensive profile data and biography
+- 💼 Work experiences and professional background
+- 🚀 Portfolio of projects and achievements
+- 📊 Technical skills and expertise
+- 🎓 Education and academic background
+- 📈 Real-time activity and coding statistics
+- 🛠️ Tools, hardware, and software setup
+- And much more...
 
 ---
 

content/index.md

@@ -1 +1,88 @@
-INDEX PAGE
+---
+title: Welcome to ArtAPI
+description: Professional API and MCP Server by Arthur Danjou - Data Science & Applied AI Student
+---
+
+# Welcome to ArtAPI
+
+**Professional API & MCP Server** by Arthur Danjou
+
+Hi! I'm Arthur Danjou, a Data Science & Applied AI student at Paris Dauphine-PSL University, passionate about machine learning and mathematical modelling. This API provides programmatic access to my professional profile, projects, and real-time activity.
+
+## What is this?
+
+ArtAPI is a comprehensive **REST API** and **Model Context Protocol (MCP) Server** that exposes my professional information in a structured, machine-readable format. It's designed to be used by AI assistants, applications, and developers who want to access my profile data programmatically.
+
+## Key Features
+
+### 🤖 MCP Server Integration
+Connect AI assistants directly to my professional profile through the Model Context Protocol. Get real-time access to my skills, projects, experiences, and current activity.
+
+### 🔌 REST API Endpoints
+Access all resources through clean, well-documented REST API endpoints. Perfect for integrations, portfolio displays, and custom applications.
+
+### 📊 Real-Time Data
+Get live updates on my current activity, coding statistics from WakaTime, and homelab status through UptimeKuma integration.
+
+### 🎯 Comprehensive Profile
+Access detailed information about my skills, work experiences, education, projects, languages, hobbies, and more.
+
+## Getting Started
+
+### For AI Assistants (MCP)
+Configure your MCP client to connect to my server and get instant access to my professional profile:
+
+```json
+{
+  "mcpServers": {
+    "artmcp": {
+      "url": "https://api.arthurdanjou.fr/mcp/mcp"
+    }
+  }
+}
+```
+
+### For Developers (REST API)
+Use the REST API endpoints to integrate my profile data into your applications:
+
+```bash
+# Get profile information
+curl https://api.arthurdanjou.fr/api/profile
+
+# Get technical skills
+curl https://api.arthurdanjou.fr/api/skills
+
+# Get current activity
+curl https://api.arthurdanjou.fr/api/activity
+```
+
+## Explore More
+
+- **[MCP Documentation](/docs)** - Detailed documentation for the Model Context Protocol server
+- **[GitHub Repository](https://github.com/ArthurDanjou/artapi)** - View the source code and contribute
+- **[My Portfolio](https://go.arthurdanjou.fr/portfolio)** - Visit my personal website
+
+## Available Resources
+
+- 👤 **Profile** - Biography, location, availability, career goals
+- 💼 **Experiences** - Work history and professional roles
+- 🚀 **Projects** - Portfolio of personal and professional projects
+- 📊 **Skills** - Technical skills, languages, and frameworks
+- 🎓 **Education** - Academic background and degrees
+- 🌐 **Languages** - Spoken languages with proficiency levels
+- 🎨 **Hobbies** - Personal interests and activities
+- 📞 **Contact** - Professional contact information
+- 🛠️ **Uses** - Tools, hardware, and software setup
+
+## Technical Stack
+
+Built with modern web technologies:
+- **Nuxt 4** with Nitro for server-side rendering
+- **@nuxt/content** for content management
+- **@nuxtjs/mcp-toolkit** for MCP server implementation
+- **NuxtHub** for edge deployment on Cloudflare Workers
+- **Zod** for schema validation
+
+---
+
+*Powered by Nuxt and the Model Context Protocol*

nuxt.config.ts

@@ -5,7 +5,8 @@ export default defineNuxtConfig({
     '@nuxt/eslint',
     '@nuxt/content',
     '@nuxtjs/mcp-toolkit',
-    'nuxt-studio'
+    'nuxt-studio',
+    '@nuxt/ui'
   ],
 
   devtools: {
@@ -16,6 +17,13 @@ export default defineNuxtConfig({
     }
   },
 
+  content: {
+    database: {
+      type: 'd1',
+      bindingName: 'artapi'
+    }
+  },
+
   runtimeConfig: {
     discord: {
       userId: '',
@@ -51,13 +59,6 @@ export default defineNuxtConfig({
     }
   },
 
-  content: {
-    database: {
-      type: 'd1',
-      bindingName: 'artapi'
-    }
-  },
-
   hub: {
     cache: true,
     db: 'sqlite'
@@ -75,7 +76,7 @@ export default defineNuxtConfig({
   mcp: {
     name: 'ArtMCP',
     version: '1.0.0',
-    browserRedirect: '/mcp'
+    browserRedirect: '/docs'
   },
 
   studio: {

package.json

@@ -14,6 +14,7 @@
   "dependencies": {
     "@nuxt/content": "3.9.0",
     "@nuxt/eslint": "1.12.1",
+    "@nuxt/ui": "^4.2.1",
     "@nuxthub/core": "0.10.1",
     "@nuxtjs/mcp-toolkit": "0.5.2",
     "better-sqlite3": "12.5.0",
@@ -26,6 +27,8 @@
     "zod": "4.2.1"
   },
   "devDependencies": {
+    "@iconify-json/heroicons": "^1.2.3",
+    "@iconify-json/simple-icons": "^1.2.63",
     "@nuxt/eslint-config": "1.12.1",
     "eslint": "9.39.2",
     "typescript": "5.9.3",

worker-configuration.d.ts

@@ -8604,7 +8604,7 @@ type AIGatewayHeaders = {
     [key: string]: string | number | boolean | object;
 };
 type AIGatewayUniversalRequest = {
-    provider: AIGatewayProviders | string; // eslint-disable-line
+    provider: AIGatewayProviders | string;  
     endpoint: string;
     headers: Partial<AIGatewayHeaders>;
     query: unknown;
@@ -8620,7 +8620,7 @@ declare abstract class AiGateway {
         gateway?: UniversalGatewayOptions;
         extraHeaders?: object;
     }): Promise<Response>;
-    getUrl(provider?: AIGatewayProviders | string): Promise<string>; // eslint-disable-line
+    getUrl(provider?: AIGatewayProviders | string): Promise<string>;  
 }
 interface AutoRAGInternalError extends Error {
 }