mirror of
https://github.com/ArthurDanjou/artapi.git
synced 2026-01-14 16:44:23 +01:00
290 lines
8.5 KiB
Vue
290 lines
8.5 KiB
Vue
<script setup lang="ts">
|
|
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 class="min-h-screen bg-linear-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"
|
|
>
|
|
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="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="error"
|
|
variant="subtle"
|
|
>
|
|
MCP Protocol
|
|
</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="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: 'p-6'
|
|
}"
|
|
variant="subtle"
|
|
>
|
|
<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-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: 'p-8 sm:p-12'
|
|
}"
|
|
variant="outline"
|
|
>
|
|
<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: '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"
|
|
}
|
|
}
|
|
}</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: '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="neutral"
|
|
variant="outline"
|
|
icon="i-heroicons-globe-alt"
|
|
>
|
|
Try the API
|
|
</UButton>
|
|
</div>
|
|
</div>
|
|
</UContainer>
|
|
</div>
|
|
</template>
|