Thème Astro portfolio pour designer, bilingue, avec études de cas et SEO prêt

Ce thème s’adresse aux designers indépendants et aux petits studios qui veulent montrer leur travail sur un site rapide, en français et en anglais, sans repartir d’une page blanche. Il fournit un portfolio complet construit avec Astro : études de cas détaillées, disciplines, services, pages À propos et Contact, avec le SEO technique déjà en place. L’accueil porte en titre principal votre nom et votre métier. Chaque étude de cas s’affiche sur un aplat de couleur, avec une typographie éditoriale et un accent prune, en clair comme en sombre. Si vous quittez un site existant, par exemple sur Webflow ou WordPress, un guide de migration et un contrôle de couverture vous aident à garder vos anciennes adresses.

Le thème aide à garder vos URL ; il ne garantit aucun classement. Il n’importe pas votre ancien contenu : vous le convertissez en Markdown en suivant le guide.

• 9 gabarits de page, en français et en anglais : accueil, liste des études de cas paginée, étude de cas, discipline, services, à propos, contact, page simple et page introuvable, plus un flux RSS par langue.
• Une page d’étude de cas complète : fil d’Ariane, fiche du projet (client, année, rôle, livrables), sommaire tiré des titres de section, chiffres clés, galerie, liens vers l’étude précédente et la suivante. Le contexte, la méthode et les résultats s’écrivent dans le corps Markdown.
• 2 langues d’origine : le français à la racine, l’anglais sous /en, avec des paires hreflang entre traductions publiées. Une page sans traduction n’en émet pas, et le sélecteur de langue renvoie alors vers l’autre accueil. Le code accepte d’autres langues.
• Un seul fichier de configuration, theme.config.ts : adresse du site, langue par défaut, nom du site, titre d’accueil, description et métier par langue, éditeur pour les données structurées (personne, prestataire ou organisation), nombre d’études de cas par page de liste et motif de permalien de chaque type de page.
• Des aplats de couleur par étude de cas : la couleur suit la position du projet dans la grille, selon un cycle réglable dans src/styles/tokens.css. Un champ plate dans le frontmatter d’une étude de cas impose sa couleur.
• La mécanique pour les moteurs de recherche, produite par une seule table de routes : URL canoniques sans barre oblique finale, paires hreflang réciproques, noindex possible page par page, plan de site qui écarte les pages à ne pas indexer, robots.txt et données structurées JSON-LD (WebSite, Article, CollectionPage, ProfilePage, ContactPage, WebPage avec ses Service, FAQPage, BreadcrumbList).
• Des redirections dans un seul fichier, redirects.json, écrites dans dist/_redirects pour l’hébergeur, avec une page de repli pour chaque adresse redirigée si l’hébergeur ne lit pas ce fichier.
• Deux contrôles à lancer avant la mise en ligne : npm run check:seo vérifie les canoniques, les paires hreflang, le plan de site, le JSON-LD, les liens internes et les redirections ; npm run check:coverage compare vos anciennes URL (export « Pages » de la Search Console, liste d’URL ou plan de site) au site construit et liste celles qui tomberaient en erreur.
• Un guide de migration en français et en anglais (docs/migration.fr.md et docs/migration.md) : inventaire des anciennes URL, export du contenu depuis Webflow ou WordPress, correspondance des champs avec le frontmatter, slugs recopiés à l’identique, permaliens et redirections, contrôle de couverture avant la bascule.
• Un portfolio de démonstration inventé, celui d’une designer fictive avec des clients fictifs : 8 études de cas en français et 6 en anglais, dont 6 paires de traductions. Les images de la démo sont dessinées à partir des tokens du thème ; aucune n’a été générée par IA. La démo construite compte 36 pages HTML, et redirects.json y contient 3 redirections d’exemple. L’adresse de la démo est example.com : remplacez tout le contenu par le vôtre.
• La version 1.0.0, avec son journal des modifications, et 119 fichiers au total.

Fichiers du thème :

• À la racine : README.md, README.fr.md, CHANGELOG.md, package.json, package-lock.json, .nvmrc, theme.config.ts, astro.config.mjs, tsconfig.json et redirects.json.
• src/content/ : études de cas, disciplines, services et pages, un dossier par langue.
• src/components/, src/layouts/, src/lib/, src/pages/ et src/styles/ : le code du thème.
• src/assets/ : images de démonstration.
• integrations/ : écriture de _redirects et _headers.
• scripts/ : check-seo.mjs et check-coverage.mjs.
• docs/ : guide de migration en français et en anglais, export d’exemple.

Le texte de la licence, LICENCE.txt, est à la racine de l’archive téléchargée.

Fabrication et IA

Le code du thème (gabarits Astro, CSS, scripts de contrôle), les contenus de démonstration et les guides ont été produits avec un assistant d’IA, puis relus et contrôlés avant la mise en vente : construction, vérification des types, contrôles SEO, accessibilité en clair et en sombre, contrastes et absence de défilement horizontal. Aucune image n’a été générée par IA.

• Prérequis : Node 22.23.4 ou plus récent. C’est la version minimale demandée par Astro 7 : avec un Node plus ancien, l’installation affiche un avertissement et la construction échoue. Le fichier .nvmrc indique la version de développement du thème.
• Astro 7, sortie entièrement statique, sans aucun JavaScript envoyé au navigateur (0 Ko côté client) : les seules balises <script> portent les données JSON-LD.
• Markdown pour le contenu, avec un frontmatter strict : un champ inconnu, un slug en double dans une langue ou une discipline inconnue fait échouer la construction en nommant les fichiers.
• TypeScript pour la configuration et le code du thème.
• CSS sans framework, sur des tokens de design (couleurs, échelle typographique, espacements, rayons) réunis dans src/styles/tokens.css. Les modes clair et sombre suivent le réglage du système du visiteur, sans bouton.
• Polices : Bodoni Moda pour les titres et Albert Sans pour le texte, sous licence SIL Open Font License 1.1, référencées par npm et installées avec les dépendances. Aucun fichier de police dans l’archive, aucune requête vers un service de polices externe.
• Hébergement : tout hébergeur statique qui sert projets/mon-projet.html à l’adresse /projets/mon-projet et lit _redirects et _headers. En option, l’adaptateur Node d’Astro sert de vraies redirections permanentes depuis l’application, avec le même redirects.json.

À savoir avant l’achat :

• Le thème ne convertit pas votre ancien portfolio : le guide explique l’export, la conversion en Markdown et la correspondance des champs.
• Réglez site dans theme.config.ts sur votre adresse définitive avant la construction finale : canoniques, plan de site et hreflang en dépendent, et une adresse laissée sur celle de la démo passe tous les contrôles sans alerte.
• Le contrôle de couverture compare les chemins sans hôte ni barre finale. La redirection de l’hôte non canonique (avec ou sans www) se règle chez votre hébergeur.
• Non inclus : importeur automatique, MDX, recherche, commentaires, formulaire de lettre d’information, bouton clair ou sombre, boutons de partage, redirections à joker.

Le thème est vendu avec la licence commerciale : vous pouvez l’utiliser et le modifier pour votre portfolio et pour les sites de vos clients, mais pas revendre, partager ni redistribuer ses fichiers, même modifiés, ni les publier comme thème ou modèle réutilisable, dépôt public compris. Les polices gardent leur propre licence.

• Pour présenter les mêmes études de cas en rendez-vous : le modèle de présentation pour designers freelances.
• Pour un blog éditorial plutôt qu’un portfolio, avec la même méthode de migration : le thème Astro blog éditorial bilingue.

1.0.0 (11 novembre 2026) : première version.