02 — Les Projets
Ce que j'ai fait
🌐 Site web de recettes — "On cuisine quoi ?"
S — Situation
Dans le cadre d'un projet imposé en première année de Bachelor Informatique au CNAM, je devais mettre en pratique mes bases en HTML/CSS sur un projet réel et complet. J'avais déjà abordé le HTML/CSS en cours, mais jamais sur un projet aussi complet avec navigation inter-pages, formulaire et design cohérent. Le défi : livrer un projet propre, fonctionnel et bien organisé, seul, en seulement 2 jours.
T — Tâche
Le problème à résoudre : créer un site web de recettes multipage, cohérent visuellement et fonctionnel, en partant de zéro. Le site devait inclure :
- Une page d'accueil avec galerie de recettes
- Des pages de recettes individuelles
- Un formulaire de contact opérationnel
- Une page FAQ structurée
A — Action
J'ai d'abord conçu l'arborescence des fichiers sur papier avant de coder, puis avancé page par page en commençant par les éléments communs (header, CSS global).
- Arborescence HTML/CSS séparés par page
- CSS Grid 3 colonnes responsive (mobile → desktop)
- Header commun et navigation inter-pages
- Cartes cliquables avec images intégrées
- Formulaire de contact avec validation HTML5
R — Résultat
Site web complet avec 6 recettes, responsive mobile/tablette/desktop, livré en 2 jours dans les délais imposés. Projet validé dans le cadre du cours, et retenu comme pièce maîtresse de ce portfolio — preuve concrète de ma capacité à mener un projet web de A à Z en autonomie totale.
📸 Aperçu — les recettes du site
Tasty Crousty
Salade César
Couscous
Sushi
💻 Extraits de code
<!-- Grille de recettes --> <div class="grille"> <a href="recette/crousty.html" class="carte"> <div class="carte-image-conteneur"> <img src="image/tastycrousty.jpeg" class="carte-image"/> </div> <div class="carte-texte"> <h2>Tasty Crousty</h2> <p>20 min · 1 personne</p> </div> </a> <!-- ... 5 autres cartes --> </div>
/* Grille responsive 3 colonnes */ .grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 900px; margin: 0 auto; } /* Carte recette */ .carte { border-radius: 15px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); transition: 0.2s; } .carte:hover { transform: translateY(-5px); } /* Header dégradé */ header { background: linear-gradient( 90deg, #59A3E9, #9820F4 ); }
♟️ Jeu de Morpion — Langage C
S — Situation
Dans le cadre de mon cours de programmation en C au CNAM, j'ai dû implémenter un jeu de morpion complet en terminal. Le langage C, avec sa gestion manuelle de la mémoire et son absence de bibliothèques natives pour les interfaces, imposait une rigueur algorithmique stricte. Le défi : modéliser la logique complète du jeu (détection de victoire, alternance des joueurs, validation des saisies) sans aucun framework.
T — Tâche
Concevoir et implémenter un jeu de morpion interactif en ligne de commande capable de :
- Gérer une grille 3×3 représentée en tableau de 9 cases
- Détecter toute combinaison gagnante (lignes, colonnes, diagonales)
- Valider les saisies et refuser les cases déjà prises
- Afficher la grille après chaque coup et annoncer le vainqueur
A — Action
J'ai découpé le problème en fonctions pures et indépendantes, conformément aux bonnes pratiques du C procédural.
- Représentation de la grille sous forme d'un
char[9]initialisé à'_' - 4 fonctions de détection :
ligneIdentique,colonneIdentique,diag1Identique,diag2Identique - Boucle principale avec double condition d'arrêt (victoire ou 9 coups)
- Validation de la saisie en boucle
whileimbriquée
R — Résultat
Programme fonctionnel, robuste et bien structuré : aucun bug de détection de victoire, gestion complète des cas limites (case invalide, partie nulle). Le découpage en fonctions a rendu le code lisible et facilement testable. Ce projet m'a permis de maîtriser la logique procédurale, la manipulation de tableaux en C et la gestion de boucles imbriquées — des fondamentaux essentiels pour un développeur.
🖥️ Aperçu — Déroulement d'une partie
$ ./morpion _ _ _ _ _ _ _ _ _ Joueur x ? 5 _ _ _ _ x _ _ _ _ Joueur o ? 1 o _ _ _ x _ _ _ _ Joueur x ? 9 o _ _ _ x _ _ _ x ...
/* x joue la diagonale */ o _ _ _ x _ _ _ _ Joueur x ? 3 case invalide ou deja prise, rejouer : Joueur x ? 7 o _ _ _ x _ x _ x Joueur x ? 4 o _ _ x x _ x _ x victoire du joueur x !
💻 Extraits de code
/* Vérifie si une ligne est gagnante */ BOOL ligneIdentique(char grille[], int ligne) { char c = grille[ligne * 3]; return (c != '_') && (c == grille[ligne * 3 + 1]) && (c == grille[ligne * 3 + 2]); } /* Vérifie toutes les combinaisons */ BOOL testGagne(char grille[]) { if (ligneIdentique(grille, 0)) return TRUE; if (ligneIdentique(grille, 1)) return TRUE; if (ligneIdentique(grille, 2)) return TRUE; if (colonneIdentique(grille, 0)) return TRUE; if (colonneIdentique(grille, 1)) return TRUE; if (colonneIdentique(grille, 2)) return TRUE; if (diag1Identique(grille)) return TRUE; if (diag2Identique(grille)) return TRUE; return FALSE; }
/* Boucle tant que pas gagné */ while (pasGagne && casesLibres) { afficheGrille(grille); /* Valider la saisie joueur */ casecochee = lireInt(); while (casecochee < 1 || casecochee > 9 || grille[casecochee-1] != '_') { casecochee = lireInt(); } /* Jouer le coup */ grille[casecochee - 1] = joueur; nbCoupsJoues++; if (testGagne(grille)) pasGagne = FALSE; if (nbCoupsJoues == 9) casesLibres = FALSE; /* Alterner les joueurs */ joueur = (joueur == 'x') ? 'o' : 'x'; }