Phase 5 — Outillage & production

#20 Projet final

Construire un site responsive complet

Projet final : site portfolio

Mettez tout en pratique en construisant un site portfolio complet et responsive. Ce projet utilise toutes les compétences HTML & CSS du cours.

Structure du projet

Structure des fichiers

portfolio/
  index.html
  about.html
  projects.html
  src/
    scss/
      _variables.scss
      _mixins.scss
      _reset.scss
      _base.scss
      _header.scss
      _hero.scss
      _projects.scss
      _footer.scss
      main.scss
  dist/
    css/
      main.css
  images/
  package.json

Structure HTML

index.html

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mon Portfolio</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="dist/css/main.css">
</head>
<body>
  <header class="header">
    <nav class="nav">
      <a href="/" class="nav__logo">Portfolio</a>
      <ul class="nav__links">
        <li><a href="#projets">Projets</a></li>
        <li><a href="#a-propos">À propos</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <section class="hero">...</section>
    <section class="projects" id="projets">...</section>
    <section class="about" id="a-propos">...</section>
    <section class="contact" id="contact">...</section>
  </main>

  <footer class="footer">...</footer>
</body>
</html>

Configuration Sass

main.scss

@use "variables" as *;
@use "mixins" as *;
@use "reset";
@use "base";
@use "header";
@use "hero";
@use "projects";
@use "footer";

_variables.scss

$color-primary: #3b82f6;
$color-text: #1a1a2e;
$color-muted: #6b6b85;
$color-bg: #f8f7f4;
$font-sans: "Inter", system-ui, sans-serif;
$radius: 12px;
$shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);

Grille responsive

_projects.scss

.projects {
  padding: 64px 24px;
  max-width: 1200px;
  margin: 0 auto;

  &__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
  }

  &__card {
    border-radius: $radius;
    overflow: hidden;
    box-shadow: $shadow;
    transition: transform 0.3s ease;

    &:hover {
      transform: translateY(-4px);
    }
  }
}

Build et déploiement

Étapes de build

# Installer les dépendances
npm install sass autoprefixer postcss postcss-cli cssnano

# Développement avec watch
npm run dev

# Build de production
npm run build

# Déployer le dossier dist/ sur votre hébergeur

À vous de jouer

Essayez les commandes ci-dessous pour créer et builder votre portfolio :

terminal — npm

Leçon 19Performance