Pour faire suite au tutoriel complet : AIDER + Ollama : Installer l’IA locale pour le développement, voici un exemple concret d’utilisation de l’IA en local. On va construire un mini-portfolio de A à Z, toujours en local, avec Ollama + Qwen (Qwen2.5-Coder), piloté depuis le terminal avec Aider.
Je vous donne : les prérequis, chaque commande à lancer, puis tous les prompts à coller dans Aider pour générer le site, tester et le déployer rapidement.
Pré-requis rapides
Voici un résumé succinct des prérequis vus dans le tutoriel précédent :
- Git installé.
- Python 3.9+ (pour Aider) et
pip/pipx. - Un terminal (macOS/Linux/WSL/Windows).
- Ollama pour servir le modèle local (par défaut sur
http://localhost:11434). - Aider (AI pair-programmer en CLI). Aider sait se connecter à Ollama et fournit des commandes
/add,/architect,/diff, etc. - Qwen2.5-Coder (excellent modèle code dispo dans la librairie Ollama, tailles 0.5B → 32B).
Installer Ollama + Qwen2.5-Coder
macOS / Windows : téléchargez et installez depuis la page officielle (suivre l’installeur).
Linux :
curl -fsSL https://ollama.com/install.sh | shPuis vous téléchargez le modèle (choisissez une taille selon votre RAM/VRAM ; 7b passe souvent partout) :
ollama pull qwen2.5-coder:7b
# (ou) ollama pull qwen2.5-coder:14bVérifiez que le serveur écoute (par défaut http://localhost:11434) :
ollama listInstaller Aider (méthode recommandée)
Aider conseille de l’isoler (pipx / aider-install) pour éviter les conflits de dépendances :
# Option A (simple) :
pipx install aider-chat
# Option B (meta-installer conseillé par Aider) :
pip install -U aider-install && aider-installNote : Aider sait régler automatiquement une fenêtre de contexte large côté Ollama, donc pas besoin de bidouiller
num_ctxpour notre usage de base.
Préparer le dossier du projet
cd desktop
mkdir mon-portfolio && cd mon-portfolio
git init
# on crée des fichiers vides que Aider remplira :
touch index.html styles.css script.js README.mdCe code vous permet de préparer un nouvel espace de travail sur votre bureau pour créer un site web. La première commande crée un dossier nommé mon-portfolio et vous place dedans. Ensuite, git init initialise un dépôt Git pour suivre vos fichiers et vos modifications.
Enfin, les commandes touch créent quatre fichiers vides : index.html pour la structure du site, styles.csspour le design, script.js pour les interactions, et README.md pour décrire le projet.
Lancer Aider relié à Ollama + Qwen Coder
Sachant qu’Ollama tourne en local (défaut), lancez la commande suivante :
ollama serve
aider --model ollama/qwen2.5-coder:7b index.html styles.css script.js README.mdLes prompts à écrire dans Aider
Aider affiche une invite >.
Collez les messages ci-dessous dans l’ordre.
Des formations informatique pour tous !
Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…
Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.
Découvrez mes formations Qui suis-je ?Prompt 1 — Plan d’architecture
/architect
Tu es l’architecte du projet. Objectif : un portfolio statique simple, moderne, accessible, SEO-friendly.
Secteurs :
- sections : Hero (nom + job + CTA), À propos, Projets (grille 6 cartes), Compétences (icônes/puces), Contact (mailto).
- responsive mobile-first, nav sticky avec scroll doux, dark mode (prefers-color-scheme + toggle JS), performances 90+ Lighthouse.
- SEO : balises <title>, meta description, Open Graph de base, structure sémantique correcte <header>/<main>/<section>/<footer>, h1 unique.
- Accessibilité : contrastes, focus visibles, libellés ARIA si besoin, ordre tabulation OK.
- Tech : HTML/CSS/JS vanilla, CSS variables, système de grilles, animations légères (prefers-reduced-motion respectée).
Détaille le plan de fichiers, les composants de chaque section et la checklist d’acceptation. Ne code rien pour l’instant.Vous recevrez un premier retour :
Plan de Fichiers
1 index.html
• Structure du document HTML avec sections principales.
• Balises <title>, meta description, Open Graph.
• Structure sémantique correcte (<header>, <main>, <section>, <footer>).
• H1 unique.
2 styles.css
• Styles globaux (reset, variables, etc.).
• Styles spécifiques pour chaque section.
• Responsive mobile-first.
• Nav sticky avec scroll doux.
• Dark mode (prefers-color-scheme + toggle JS).
• Performances 90+ Lighthouse.
3 script.js
• Logique du dark mode.
• Scroll doux.
• Animations légères (respecte prefers-reduced-motion).
4 README.md
• Documentation technique et instructions d'utilisation.
Composants de Chaque Section
1 Hero Section
• Nom
• Job
• CTA (Call To Action)
2 À propos Section
• Texte biographique
• Image ou illustration
3 Projets Section
• Grille 6 cartes
• Chaque carte avec titre, description et lien vers le projet
4 Compétences Section
• Icônes/puces représentant les compétences
5 Contact Section
• Formulaire de contact (nom, email, message)
• Bouton d'envoi
• Liens sociaux
Checklist d’Acceptation
1 Structure HTML
• <title> et meta description correctement définis.
• Structure sémantique (<header>, <main>, <section>, <footer>).
• H1 unique.
2 Responsivité
• Responsive mobile-first
• Nav sticky avec scroll doux
3 Dark Mode
• Utilisation de prefers-color-scheme
• Bouton pour activer/désactiver le mode sombre
4 Performances
• Performances 90+ Lighthouse
5 SEO
• Open Graph de base
• Contrastes suffisants
• Focus visibles sur les éléments interactifs
• Ordre tabulation correct
6 Accessibilité
• Libellés ARIA si nécessaire
• Ordre tabulation OK
7 Technologie
• HTML/CSS/JS vanilla
• CSS variables
• Système de grilles
• Animations légères (respecte prefers-reduced-motion)
Instructions pour le Développement
1 index.html
• Créez les sections principales (<header>, <main>, <section>, <footer>).
• Ajoutez les éléments HTML nécessaires pour chaque section.
2 styles.css
• Reset CSS
• Variables CSS
• Styles globaux (typographie, couleurs, etc.)
• Styles spécifiques pour chaque section
• Responsive mobile-first
• Nav sticky avec scroll doux
• Dark mode (prefers-color-scheme + toggle JS)
• Performances 90+ Lighthouse
3 script.js
• Logique du dark mode
• Scroll doux
• Animations légères (respecte prefers-reduced-motion)
4 README.md
• Documentez les instructions d'utilisation et la structure du projet.
Exemples de Code
index.html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio</title>
<meta name="description" content="Mon portfolio professionnel">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<!-- Hero Section -->
<section id="hero">
<h1>Nom Prénom</h1>
<p>Job Title</p>
<a href="#" class="cta">CTA</a>
</section>
</header>
<main>
<!-- À propos Section -->
<section id="about">
<h2>A propos de moi</h2>
<p>Texte biographique...</p>
</section>
<!-- Projets Section -->
<section id="projects">
<h2>Mes projets</h2>
<div class="grid">
<!-- 6 cartes ici -->
</div>
</section>
<!-- Compétences Section -->
<section id="skills">
<h2>Compétences</h2>
<ul>
<!-- Icônes/puces ici -->
</ul>
</section>
<!-- Contact Section -->
<section id="contact">
<h2>Contactez-moi</h2>
<form action="#" method="post">
<label for="name">Nom:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="message">Message:</label>
<textarea id="message" name="message" required></textarea>
<button type="submit">Envoyer</button>
</form>
</section>
</main>
<footer>
<!-- Liens sociaux ici -->
</footer>
<script src="script.js"></script>
</body>
</html>
styles.css
/* Reset CSS */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
color: #333;
background-color: #fff;
transition: background-color 0.3s ease;
}
/* Variables CSS */
:root {
--primary-color: #007bff;
--secondary-color: #6c757d;
--background-color: #fff;
--text-color: #333;
}
body.dark-mode {
background-color: #343a40;
color: #fff;
}
/* Styles globaux */
header, main, footer {
padding: 2rem;
}
.cta {
display: inline-block;
padding: 1rem 2rem;
background-color: var(--primary-color);
color: white;
text-decoration: none;
border-radius: 5px;
}
/* Styles spécifiques */
#hero {
/* Styles pour la section Hero */
}
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
/* Responsive mobile-first */
@media (max-width: 768px) {
.grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* Dark mode */
body.dark-mode {
/* Styles pour le mode sombre */
}
script.js
document.addEventListener('DOMContentLoaded', () => {
const darkModeToggle = document.querySelector('.dark-mode-toggle');
const body = document.body;
// Initialiser le mode sombre si le navigateur le préfère
if (window.matchMedia && window.matchMedia('(prefers-color-scheme:
dark)').matches) {
body.classList.add('dark-mode');
}
// Ajouter un écouteur d'événement pour le bouton de bascule du mode sombre
darkModeToggle.addEventListener('change', () => {
if (body.classList.contains('dark-mode')) {
body.classList.remove('dark-mode');
} else {
body.classList.add('dark-mode');
}
});
});
README.md
# Portfolio Statique
Ce projet est un portfolio statique simple, moderne et accessible.
## Structure du Projet
- `index.html`: Contient la structure HTML du portfolio.
- `styles.css`: Contient les styles CSS globaux et spécifiques pour chaque
section.
- `script.js`: Contient la logique JavaScript pour le mode sombre et d'autres
fonctionnalités.
## Installation
1. Clonez ce dépôt sur votre machine locale.
2. Ouvrez le fichier `index.html` dans un navigateur.
## Contribuer
Contribuez au projet en soumettant des pull requests ou en créant des issues.
## License
Ce projet est sous licence MIT.
Ces instructions et exemples de code devraient vous aider à démarrer la
construction de votre portfolio statique. N'hésitez pas à me poser d'autres
questions si nécessaire.
Tokens: 423 sent, 1.9k received.On pourrait penser qu’AIDER est bloqué, mais, en réalité, Aider ne bloque pas : ce que vous voyez est la réponse de votre modèle (Qwen via Ollama) au prompt /architect.
À ce stade, il a bien généré :
- le plan de fichiers (index.html, styles.css, script.js, README.md)
- la liste des composants (Hero, À propos, Projets, Compétences, Contact)
- la checklist d’acceptation
C’est exactement ce qui était attendu : il ne devait pas coder mais décrire l’architecture.
Vous pouvez maintenant lancer le deuxième prompt pour passer à l’implémentation du squelette HTML/CSS/JS :
Prompt 2 — Génération du squelette HTML/CSS/JS
/code
Crée et remplis :
- index.html : squelette complet avec sections décrites, balises SEO/OG, favicon fictive, liens vers styles.css et script.js.
- styles.css : reset léger, variables CSS (couleurs claires/sombres), typographies système, container responsive, grille des cartes projets, nav sticky, dark mode, animations réduites si prefers-reduced-motion.
- script.js : menu burger mobile, scroll doux, toggle dark mode (localStorage), injection dynamique des cartes depuis un tableau JS provisoire.
Contraintes :
- HTML valide, sémantique, h1 unique dans le Hero.
- Pas de framework, pas d’icônes externes obligatoires.
- Ajoute du contenu de demo : 6 projets (titre, tags, lien, description courte).
- Mets une meta description ~160 caractères pertinente.
Explique ce que tu génères, puis applique les diff nécessaires.Prompt 3 — Données projets externalisées
/code
Ajoute un fichier projects.json (tableau d’objets {title, description, tags[], url}).
Modifie script.js pour charger projects.json via fetch (avec fallback si 404), puis construire la grille dynamiquement.
Mets à jour index.html pour indiquer que la section Projets est alimentée par projects.json.Prompt 4 — Accessibilité & perf
/code
Améliore l’accessibilité et la perf :
- États : focus/hover visibles, tailles de police adaptées, contrastes AA.
- Images lazy-loading, tailles explicites, pas de CLS.
- Réduit CSS inutile, minifie basiquement via commentaires retirés, et propose une variante "styles.min.css" générée par Aider si pertinent.
- Ajoute un aria-label aux liens externes des projets, et rel="noopener".
- Ajoute une skip link “Aller au contenu”.
Applique les changements et explique.Prompt 5 — README de projet
/code
Remplis README.md avec :
- but du projet,
- stack,
- comment lancer un serveur local (python -m http.server),
- comment contribuer,
- checklists accessibilité/SEO,
- licence MIT par défaut.Prompt 6 — Nettoyage & commit
/diff
Explique-moi le diff global. Puis effectue un commit avec un message clair de release initiale.Besoin d’ajuster ? Utilisez ensuite :
/ls(voir les fichiers),/add FILE(ajouter un fichier),/drop FILE(le retirer du contexte),/undo(annuler le dernier commit Aider),/diff(voir les modifs),/model(changer de modèle),/editor-model(séparer architect vs editor). aider.chat
Tester en local
Dans un autre terminal à la racine du projet :
python -m http.server 8000
# puis ouvre http://localhost:8000Itérer (quelques prompts utiles)
Affiner le Hero
/code
Dans index.html/styles.css, fais un Hero plein écran avec un CTA “Voir mes projets”, gradient discret, et un alignement centré vertical. Ajoute une micro-anim sur le CTA (réduite si prefers-reduced-motion). Ajouter un formulaire de contact (mailto)
/code
Dans la section Contact, ajoute un petit formulaire (nom, email, message) qui ouvre un mailto: structuré côté client. Pas de backend. Valide côté JS. 
Déploiement rapide (GitHub Pages, optionnel)
git branch -M main
git remote add origin https://github.com/<ton-user>/mon-portfolio.git
git push -u origin mainSur GitHub → Settings → Pages → Deploy from a branch → main → /root.
- Changer l’URL Ollama si ce n’est pas localhost :
export OLLAMA_API_BASE="http://<host>:11434"(valeur par défaut côté clients compatibles :http://localhost:11434). - Aider + Ollama : pas besoin d’ouvrir
ollama runà la main ; Aider parle à l’API Ollama et gère la fenêtre de contexte pour éviter les troncatures silencieuses. - Liste des commandes Aider :
/helpdans la session, ou la page des in-chat commands.
Récapitulatif des seules commandes shell indispensables
# 1) Installer Ollama (voir page officielle) puis :
ollama pull qwen2.5-coder:7b
# 2) Installer Aider
pipx install aider-chat
# (ou) pip install -U aider-install && aider-install
# 3) Créer le projet
mkdir mon-portfolio && cd mon-portfolio
git init
touch index.html styles.css script.js README.md
# 4) Lancer Aider connecté à Qwen Coder via Ollama
aider --model ollama/qwen2.5-coder:7b index.html styles.css script.js README.md
# 5) (dans Aider) Colle les prompts 1→6 ci-dessus
# 6) Tester en local
python -m http.server 8000
En conclusion, ce tutoriel vous a guidé pas à pas pour créer un portfolio simple, moderne et accessible grâce à Aider et Ollama. Vous disposez désormais d’une base solide comprenant la structure HTML, le style CSS, les interactions en JavaScript et une bonne optimisation SEO.
Ce projet vous permet non seulement de mettre en avant vos compétences, mais aussi d’acquérir une méthodologie claire pour développer d’autres sites web efficacement et en toute autonomie.
Pour information, il est tout à fait possible, depuis les mêmes prompts, d’utiliser VS Code et Gemini pour coder ce portfolio.
