artapi/app/pages/index.vue

<script setup lang="ts">
const features = [
  {
    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 class="min-h-screen bg-linear-to-b from-gray-50 to-white dark:from-neutral-950 dark:to-neutral-900">
    <!-- Hero Section -->
    <UContainer class="py-16 sm:py-24">
      <div class="text-center">
        <UBadge
          color="primary"
          variant="subtle"
          size="lg"
          class="mb-6"
        >
          Professional API provider for my portfolio
        </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="https://github.com/ArthurDanjou/artapi"
            target="_blank"
            size="xl"
            color="neutral"
            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="success"
            variant="subtle"
          >
            Nuxt 4
          </UBadge>
          <UBadge
            color="primary"
            variant="subtle"
          >
            TypeScript
          </UBadge>
          <UBadge
            color="warning"
            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="flex flex-wrap justify-center gap-6">
        <UCard
          v-for="feature in features"
          :key="feature.title"
          :ui="{
            body: 'p-6'
          }"
          variant="subtle"
          class="w-full md:w-[calc(50%-12px)] lg:w-[calc(50%-12px)]"
        >
          <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="neutral"
          variant="subtle"
          size="lg"
          block
          :ui="{
            base: 'hover:bg-neutral-50 dark:hover:bg-neutral-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 w-full sm:w-3/4 lg:w-1/2 mx-auto">
      <UCard
        :ui="{
          body: 'p-8 sm:p-12'
        }"
        variant="outline"
      >
        <div class="flex gap-8">
          <div class="w-full">
            <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: 'bg-neutral-900 dark:bg-neutral-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>
        <div class="flex flex-col sm:flex-row gap-4 justify-center">
          <UButton
            to="/api/profile"
            target="_blank"
            size="xl"
            color="neutral"
            variant="outline"
            icon="i-heroicons-globe-alt"
          >
            Try the API
          </UButton>
        </div>
      </div>
    </UContainer>
  </div>
</template>