Ce portfolio n'a pas été codé à la main ligne par ligne, ni assemblé sur un constructeur de sites classique. Il a été conçu en collaboration avec Claude, l'assistant IA d'Anthropic, à travers Claude Code et son système de skills, puis déployé sur Vercel avec un nom de domaine Ionos. Voici, en toute transparence, comment la magie opère.
La stack complète
Cinq briques technologiques se combinent pour transformer une simple idée en site web professionnel :
1. Claude Code, l'ingénieur IA
Claude Code est un agent IA qui s'exécute directement dans le terminal. Il lit les fichiers, écrit du code HTML, CSS et JavaScript, exécute des commandes et raisonne sur l'architecture du projet. Il suffit de décrire ce que l'on veut en langage naturel pour qu'il produise un site complet, structuré et fonctionnel.
2. Les skills, l'expertise spécialisée
Les skills sont des modules d'expertise que Claude peut activer à la demande. Plus de 70 sont installés sur ce compte : design frontend, copywriting, SEO, sécurité, stratégie produit, marketing... Pendant la construction, le skill impeccable a analysé chaque fichier en temps réel pour détecter les défauts de design et garantir un rendu professionnel.
3. GitHub, le versioning
Le code est versionné avec git et poussé sur un dépôt GitHub. Chaque modification est tracée, réversible et collaborative. C'est la colonne vertébrale du projet.
4. Vercel, le déploiement automatique
Chaque push sur GitHub déclenche un déploiement automatique sur Vercel. Le site est en ligne en quelques secondes, avec HTTPS, CDN mondial et headers de sécurité configurés via vercel.json. Aucun serveur à gérer.
5. Ionos, le nom de domaine
Le domaine keirle.eu est enregistré chez Ionos, avec les DNS pointant vers Vercel. C'est ce qui permet d'accéder au site via une adresse propre et professionnelle plutôt qu'une URL technique.
SEO et visibilité
Un site invisible ne sert à rien. Dès la première version, le référencement a été traité comme une priorité :
- Google Search Console : le site est enregistré et vérifié pour suivre son indexation, détecter les erreurs de crawl et surveiller les performances de recherche
- Schema.org (JSON-LD) : des données structurées décrivent le profil, les articles et le site pour que Google comprenne le contenu et affiche des résultats enrichis
- Sitemap XML et robots.txt : les moteurs de recherche savent exactement quelles pages explorer
- Balises meta, Open Graph et Twitter Cards : chaque page est optimisée pour le partage sur les réseaux sociaux et les résultats de recherche
- URLs canoniques et liens internes : une architecture propre qui évite le contenu dupliqué
Le processus, étape par étape
- Brief : une description en français des objectifs (design, blog, formulaire, sections)
- Lecture du contexte : Claude analyse le CV en PDF et le code existant du site
- Génération : rédaction du HTML, du CSS et du JavaScript, création des articles
- Contrôle qualité : le skill de design vérifie chaque fichier et corrige les imperfections
- Audit de sécurité : analyse des headers HTTP, du CSP, du formulaire et des données exposées
- Publication : commit, push sur GitHub, déploiement automatique via Vercel
Ce que ce projet m'a appris : résilience et persévérance
Construire un site avec l'IA ne veut pas dire que tout fonctionne du premier coup. Le parcours a été semé d'obstacles qui ont demandé de la persévérance :
- Des déploiements qui échouent pour un email git mal configuré
- Des configurations DNS qui mettent des heures à se propager
- Des headers de sécurité qui fonctionnent en local mais pas en production
- Un design qui rend bien sur desktop mais casse sur mobile
- Des itérations de SEO pour comprendre pourquoi Google n'indexe pas certaines pages
Chaque problème a été une occasion d'apprendre. L'IA accélère, mais elle ne supprime pas le besoin de comprendre ce qu'on fait. La résilience, c'est justement savoir que le chemin ne sera pas linéaire et continuer quand même.
Le regard d'ingénieur : repérer les erreurs invisibles
L'un des apports les plus précieux de Claude Code n'est pas la génération de code, c'est l'audit. Un regard d'ingénieur, même artificiel, permet de repérer des erreurs qu'un non-technicien ne voit pas :
- Un dépôt GitHub public avec des données sensibles : le fichier CLAUDE.md contenait des instructions confidentielles visibles par tout le monde. Claude l'a détecté et supprimé du dépôt
- Une adresse email en clair dans le code source : n'importe quel bot pouvait la récolter pour du spam. Remplacée par un token anonyme
- Des headers de sécurité absents : pas de protection contre le clickjacking, le MIME sniffing ou l'accès aux capteurs du téléphone. Corrigé via la configuration serveur
- Un formulaire sans captcha : une porte ouverte au spam automatisé
- Des pages légales RGPD vides : un formulaire qui collecte des données sans politique de confidentialité, c'est un risque juridique
Ces erreurs ne sont pas rares. Elles sont partout, sur des milliers de sites. Avoir accès à un regard technique rigoureux, c'est transformer un site vitrine en un produit solide.
Les fonctionnalités techniques
- Un globe 3D animé dessiné sur <canvas> en JavaScript pur
- Un réseau de particules interactif avec flux de données en arrière-plan
- Une animation de réseau de neurones pour la section IA
- Une timeline de parcours animée au scroll
- Un formulaire de contact sécurisé (token hashé, captcha, honeypot)
- Un sélecteur de langue FR/EN et un design entièrement responsive, sans framework
- Des headers de sécurité complets (CSP, X-Frame-Options, Permissions-Policy)
- Un SEO technique soigné (schema.org, sitemap, meta tags, Open Graph)
Le tout en HTML, CSS et JavaScript natifs : léger, rapide et durable. Une démonstration que l'IA bien utilisée ne produit pas de la complexité inutile, mais de la simplicité efficace.
This portfolio wasn't hand-coded line by line, nor assembled on a classic website builder. It was designed in collaboration with Claude, Anthropic's AI assistant, through Claude Code and its skills system, then deployed on Vercel with a custom Ionos domain. Here, in full transparency, is how the magic works.
The full stack
Five technology building blocks combine to turn a simple idea into a professional website:
1. Claude Code, the AI engineer
Claude Code is an AI agent that runs directly in the terminal. It reads files, writes HTML, CSS and JavaScript, runs commands and reasons about the project's architecture. You just describe what you want in natural language and it produces a complete, structured and functional site.
2. Skills, the specialised expertise
Skills are expertise modules Claude can activate on demand. Over 70 are installed on this account: frontend design, copywriting, SEO, security, product strategy, marketing... During the build, the impeccable skill analysed every file in real time to detect design flaws and ensure a professional result.
3. GitHub, versioning
Code is versioned with git and pushed to a GitHub repository. Every change is tracked, reversible and collaborative. It's the backbone of the project.
4. Vercel, automatic deployment
Every push to GitHub triggers an automatic deployment on Vercel. The site goes live in seconds, with HTTPS, a global CDN and security headers configured via vercel.json. No server to manage.
5. Ionos, the domain name
The domain keirle.eu is registered with Ionos, with DNS pointing to Vercel. This is what makes the site accessible via a clean, professional address rather than a technical URL.
SEO and visibility
An invisible site is a useless site. From the first version, search engine optimisation was treated as a priority:
- Google Search Console: the site is registered and verified to monitor indexation, detect crawl errors and track search performance
- Schema.org (JSON-LD): structured data describes the profile, articles and site so Google understands the content and can display rich results
- XML sitemap and robots.txt: search engines know exactly which pages to crawl
- Meta tags, Open Graph and Twitter Cards: every page is optimised for social sharing and search results
- Canonical URLs and internal links: a clean architecture that avoids duplicate content
The process, step by step
- Brief: a description of the goals (design, blog, form, sections)
- Reading the context: Claude analyses the CV PDF and the site's existing code
- Generation: writing the HTML, CSS and JavaScript, creating the articles
- Quality control: the design skill checks every file and fixes imperfections
- Security audit: analysing HTTP headers, CSP, the contact form and exposed data
- Publishing: commit, push to GitHub, automatic deployment via Vercel
What this project taught me: resilience and persistence
Building a site with AI doesn't mean everything works first time. The journey was full of obstacles that demanded persistence:
- Deployments failing because of a misconfigured git email
- DNS configurations taking hours to propagate
- Security headers working locally but not in production
- A design that looked great on desktop but broke on mobile
- SEO iterations to understand why Google wasn't indexing certain pages
Every problem was a chance to learn. AI accelerates, but it doesn't remove the need to understand what you're doing. Resilience means knowing the path won't be linear and carrying on regardless.
The engineer's eye: spotting invisible mistakes
One of the most valuable contributions of Claude Code isn't code generation, it's the audit. An engineer's eye, even an artificial one, catches mistakes a non-technical person simply cannot see:
- A public GitHub repo with sensitive data: the CLAUDE.md file contained confidential instructions visible to everyone. Claude detected it and removed it from the repository
- A plain-text email address in the source code: any bot could harvest it for spam. Replaced with an anonymous token
- Missing security headers: no protection against clickjacking, MIME sniffing or access to phone sensors. Fixed via server configuration
- A form with no captcha: an open door to automated spam
- Empty GDPR legal pages: a form collecting personal data without a privacy policy is a legal risk
These mistakes are not rare. They exist on thousands of sites. Having access to a rigorous technical review turns a showcase site into a solid product.
Technical features
- An animated 3D globe drawn on <canvas> in pure JavaScript
- An interactive particle network with data flows in the background
- A neural-network animation for the AI section
- A scroll-driven animated career timeline
- A secured contact form (hashed token, captcha, honeypot)
- An FR/EN language switcher and a fully responsive design, no framework
- Full security headers (CSP, X-Frame-Options, Permissions-Policy)
- Thorough technical SEO (schema.org, sitemap, meta tags, Open Graph)
All in native HTML, CSS and JavaScript: light, fast and durable. A demonstration that AI, used well, doesn't produce needless complexity but effective simplicity.