feat: transform site to profile linktree
This commit is contained in:
MANU AVQN
6860
package-lock.json
generated
Normal file
6860
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
BIN
public/emmanuel-bernard.webp
Normal file
BIN
public/emmanuel-bernard.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
@@ -7,8 +7,8 @@ interface Props {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const {
|
const {
|
||||||
title = "Astro Starter Kit",
|
title = "Emmanuel Bernard",
|
||||||
description = "Un starter kit Astro minimal et élégant",
|
description = "Consultant-formateur en AI Automation & Expert n8n",
|
||||||
} = Astro.props;
|
} = Astro.props;
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -24,7 +24,7 @@ const {
|
|||||||
<title>{title}</title>
|
<title>{title}</title>
|
||||||
<meta property="og:title" content={title} />
|
<meta property="og:title" content={title} />
|
||||||
<meta property="og:description" content={description} />
|
<meta property="og:description" content={description} />
|
||||||
<meta property="og:type" content="website" />
|
<meta property="og:type" content="profile" />
|
||||||
|
|
||||||
<!-- Favicon -->
|
<!-- Favicon -->
|
||||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
@@ -37,7 +37,7 @@ const {
|
|||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
/>
|
/>
|
||||||
</head>
|
</head>
|
||||||
<body class="font-sans antialiased bg-white text-gray-900">
|
<body class="font-sans antialiased bg-slate-50 text-gray-900 min-h-screen">
|
||||||
<slot />
|
<slot />
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -1,69 +0,0 @@
|
|||||||
---
|
|
||||||
import BaseLayout from "../layouts/BaseLayout.astro";
|
|
||||||
import Navbar from "../components/Navbar.astro";
|
|
||||||
---
|
|
||||||
|
|
||||||
<BaseLayout
|
|
||||||
title="About - Astro Starter Kit"
|
|
||||||
description="À propos de ce starter kit Astro"
|
|
||||||
>
|
|
||||||
<Navbar />
|
|
||||||
|
|
||||||
<main class="max-w-4xl mx-auto px-6 py-16">
|
|
||||||
<div class="mb-16">
|
|
||||||
<h1 class="text-5xl font-bold tracking-tight mb-4">About ✨</h1>
|
|
||||||
<p class="text-xl text-gray-600 leading-relaxed">
|
|
||||||
Un starter kit pensé pour la simplicité et l'élégance.
|
|
||||||
</p>
|
|
||||||
<div class="mt-4">
|
|
||||||
<span
|
|
||||||
class="inline-block px-3 py-1 text-xs font-medium bg-gray-100 text-gray-700 rounded-full"
|
|
||||||
>
|
|
||||||
v2.0 - Test auto-deploy
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="prose prose-gray max-w-none">
|
|
||||||
<h2 class="text-2xl font-semibold mb-4">Philosophie</h2>
|
|
||||||
<p class="text-gray-600 leading-relaxed mb-8">
|
|
||||||
Ce starter kit adopte une approche minimaliste : fournir une
|
|
||||||
base solide et élégante sans superflu, avec les outils
|
|
||||||
essentiels pour démarrer rapidement un projet web moderne et
|
|
||||||
performant.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<h2 class="text-2xl font-semibold mb-4">Technologies</h2>
|
|
||||||
<ul class="space-y-3 text-gray-600">
|
|
||||||
<li class="flex items-start">
|
|
||||||
<span class="font-medium text-gray-900 mr-2">Astro</span>
|
|
||||||
<span>— Framework web moderne avec génération statique</span
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
<li class="flex items-start">
|
|
||||||
<span class="font-medium text-gray-900 mr-2">React</span>
|
|
||||||
<span
|
|
||||||
>— Bibliothèque UI pour les composants interactifs</span
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
<li class="flex items-start">
|
|
||||||
<span class="font-medium text-gray-900 mr-2"
|
|
||||||
>Tailwind CSS</span
|
|
||||||
>
|
|
||||||
<span>— Framework CSS utility-first</span>
|
|
||||||
</li>
|
|
||||||
<li class="flex items-start">
|
|
||||||
<span class="font-medium text-gray-900 mr-2">Docker</span>
|
|
||||||
<span>— Containerisation pour un déploiement simplifié</span
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<div class="mt-12 pt-8 border-t border-gray-200">
|
|
||||||
<p class="text-sm text-gray-500">
|
|
||||||
Construit avec soin pour la performance et l'élégance.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
</BaseLayout>
|
|
||||||
@@ -1,83 +0,0 @@
|
|||||||
---
|
|
||||||
import BaseLayout from "../layouts/BaseLayout.astro";
|
|
||||||
import Navbar from "../components/Navbar.astro";
|
|
||||||
---
|
|
||||||
|
|
||||||
<BaseLayout
|
|
||||||
title="Contact - Astro Starter Kit"
|
|
||||||
description="Contactez-nous via ce formulaire"
|
|
||||||
>
|
|
||||||
<Navbar />
|
|
||||||
|
|
||||||
<main class="max-w-4xl mx-auto px-6 py-16">
|
|
||||||
<div class="mb-12">
|
|
||||||
<h1 class="text-5xl font-bold tracking-tight mb-4">Contact</h1>
|
|
||||||
<p class="text-xl text-gray-600 leading-relaxed">
|
|
||||||
Envoyez-nous un message, nous serons ravis de vous répondre.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Formulaire -->
|
|
||||||
<form class="max-w-2xl space-y-6">
|
|
||||||
<div>
|
|
||||||
<label
|
|
||||||
for="name"
|
|
||||||
class="block text-sm font-medium text-gray-900 mb-2"
|
|
||||||
>
|
|
||||||
Nom
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="name"
|
|
||||||
name="name"
|
|
||||||
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-900 focus:border-transparent outline-none transition-all"
|
|
||||||
placeholder="Votre nom"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label
|
|
||||||
for="email"
|
|
||||||
class="block text-sm font-medium text-gray-900 mb-2"
|
|
||||||
>
|
|
||||||
Email
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="email"
|
|
||||||
id="email"
|
|
||||||
name="email"
|
|
||||||
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-900 focus:border-transparent outline-none transition-all"
|
|
||||||
placeholder="votre@email.com"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label
|
|
||||||
for="message"
|
|
||||||
class="block text-sm font-medium text-gray-900 mb-2"
|
|
||||||
>
|
|
||||||
Message
|
|
||||||
</label>
|
|
||||||
<textarea
|
|
||||||
id="message"
|
|
||||||
name="message"
|
|
||||||
rows="6"
|
|
||||||
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-900 focus:border-transparent outline-none transition-all resize-none"
|
|
||||||
placeholder="Votre message..."></textarea>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onclick="alert('Ceci est un formulaire de démonstration. Aucune donnée n\'est envoyée.')"
|
|
||||||
class="w-full px-6 py-3 bg-gray-900 text-white font-medium rounded-lg hover:bg-gray-800 transition-colors"
|
|
||||||
>
|
|
||||||
Envoyer le message
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<p class="text-sm text-gray-500 text-center">
|
|
||||||
Note : Ce formulaire est une démonstration et n'envoie aucune
|
|
||||||
donnée.
|
|
||||||
</p>
|
|
||||||
</form>
|
|
||||||
</main>
|
|
||||||
</BaseLayout>
|
|
||||||
@@ -1,80 +1,87 @@
|
|||||||
---
|
---
|
||||||
import BaseLayout from "../layouts/BaseLayout.astro";
|
import BaseLayout from "../layouts/BaseLayout.astro";
|
||||||
import Navbar from "../components/Navbar.astro";
|
|
||||||
|
const links = [
|
||||||
|
{
|
||||||
|
title: "Aussi Vite Que Nécessaire",
|
||||||
|
url: "https://avqn.ch",
|
||||||
|
icon: "🌐",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "LinkedIn",
|
||||||
|
url: "https://www.linkedin.com/in/emmbernard",
|
||||||
|
icon: "💼",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "YouTube",
|
||||||
|
url: "https://www.youtube.com/@emmanuelflux",
|
||||||
|
icon: "🎥",
|
||||||
|
},
|
||||||
|
];
|
||||||
---
|
---
|
||||||
|
|
||||||
<BaseLayout
|
<BaseLayout>
|
||||||
title="Astro Starter Kit"
|
<main class="max-w-2xl mx-auto px-6 py-16 flex flex-col items-center min-h-[80vh] justify-center">
|
||||||
description="Un starter kit minimal et élégant avec Astro, React et Tailwind CSS"
|
<!-- Profile Section -->
|
||||||
>
|
<div class="text-center mb-10">
|
||||||
<Navbar />
|
<div class="mb-6 relative inline-block">
|
||||||
|
<div class="w-28 h-28 sm:w-32 sm:h-32 rounded-full overflow-hidden border-4 border-white mx-auto bg-gray-200">
|
||||||
|
<img
|
||||||
|
src="/emmanuel-bernard.webp"
|
||||||
|
alt="Emmanuel Bernard - Consultant AI Automation & n8n"
|
||||||
|
class="w-full h-full object-cover"
|
||||||
|
onerror="this.src='https://ui-avatars.com/api/?name=Emmanuel+Bernard&background=random&size=256'"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<main class="max-w-4xl mx-auto px-6 py-16">
|
<h1 class="text-3xl sm:text-4xl font-bold tracking-tight text-gray-900 mb-2">
|
||||||
<!-- Hero Section -->
|
Emmanuel Bernard
|
||||||
<div class="mb-16">
|
</h1>
|
||||||
<h1 class="text-5xl font-bold tracking-tight mb-4">
|
|
||||||
Astro Starter Kit
|
|
||||||
</h1>
|
|
||||||
<p class="text-xl text-gray-600 leading-relaxed">
|
|
||||||
Un point de départ minimal et élégant pour vos projets web
|
|
||||||
modernes.
|
|
||||||
</p>
|
|
||||||
<div class="mt-3">
|
|
||||||
<span
|
|
||||||
class="inline-block px-2 py-1 text-xs font-medium bg-gray-100 text-gray-700 rounded"
|
|
||||||
>
|
|
||||||
⚡ Powered by pnpm
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<p class="text-sm text-gray-500 mt-2 italic">
|
|
||||||
✨ Mise à jour de test — Version mobile ready 📱
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Features -->
|
<h2 class="text-xl sm:text-2xl text-[var(--color-accent)] font-semibold mb-6 text-balance">
|
||||||
<div class="space-y-12">
|
Consultant-formateur AI Automation & Expert n8n à Lausanne
|
||||||
<div>
|
</h2>
|
||||||
<h2 class="text-2xl font-semibold mb-3">Performance</h2>
|
|
||||||
<p class="text-gray-600 leading-relaxed">
|
|
||||||
Génération statique ultra-rapide avec Astro. Zéro JavaScript
|
|
||||||
par défaut, hydratation partielle intelligente uniquement
|
|
||||||
quand nécessaire.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
<div class="max-w-lg mx-auto">
|
||||||
<h2 class="text-2xl font-semibold mb-3">Design System</h2>
|
<p class="text-gray-600 leading-relaxed text-base text-balance">
|
||||||
<p class="text-gray-600 leading-relaxed">
|
Avec 20 ans d'expérience technique, j'accompagne les entreprises et les indépendants dans l'automatisation de leurs processus et l'intégration de l'IA pour décupler leur productivité.
|
||||||
Tailwind CSS intégré pour un développement rapide et
|
</p>
|
||||||
cohérent. Typographie soignée avec Inter, design épuré et
|
</div>
|
||||||
moderne.
|
</div>
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
<!-- Links Section -->
|
||||||
<h2 class="text-2xl font-semibold mb-3">
|
<div class="w-full max-w-sm space-y-4">
|
||||||
Prêt pour la production
|
{
|
||||||
</h2>
|
links.map((link) => (
|
||||||
<p class="text-gray-600 leading-relaxed">
|
<a
|
||||||
Build Docker multi-stage optimisé, SEO configuré, structure
|
href={link.url}
|
||||||
claire et extensible.
|
target="_blank"
|
||||||
</p>
|
rel="noopener noreferrer"
|
||||||
</div>
|
class="group block w-full bg-white border border-gray-200 hover:border-[var(--color-accent)] rounded-lg px-6 py-4 transition-colors duration-200"
|
||||||
</div>
|
>
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<span class="flex items-center gap-3 font-medium text-gray-700 group-hover:text-[var(--color-accent)] transition-colors">
|
||||||
|
<span class="text-xl opacity-80 group-hover:opacity-100 transition-opacity">{link.icon}</span>
|
||||||
|
{link.title}
|
||||||
|
</span>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
fill="currentColor"
|
||||||
|
class="w-5 h-5 text-gray-400 group-hover:text-[var(--color-accent)] transition-colors"
|
||||||
|
>
|
||||||
|
<path fill-rule="evenodd" d="M3 10a.75.75 0 01.75-.75h10.638L10.23 5.29a.75.75 0 111.04-1.08l5.5 5.25a.75.75 0 010 1.08l-5.5 5.25a.75.75 0 11-1.04-1.08l4.158-3.96H3.75A.75.75 0 013 10z" clip-rule="evenodd" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- CTA -->
|
<!-- Footer -->
|
||||||
<div class="mt-16 pt-12 border-t border-gray-200">
|
<footer class="mt-16 text-center text-sm text-gray-400">
|
||||||
<div class="flex items-center gap-2 mb-2">
|
<p>© {new Date().getFullYear()} Emmanuel Bernard</p>
|
||||||
<span
|
</footer>
|
||||||
class="inline-block px-2 py-1 text-xs font-medium bg-gray-900 text-white rounded"
|
</main>
|
||||||
>
|
|
||||||
Nouveau
|
|
||||||
</span>
|
|
||||||
<span class="text-sm text-gray-600">Prêt pour vos projets</span>
|
|
||||||
</div>
|
|
||||||
<p class="text-sm text-gray-500">
|
|
||||||
Commencez à construire votre projet dès maintenant.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
</BaseLayout>
|
</BaseLayout>
|
||||||
|
|||||||
Reference in New Issue
Block a user