diff --git a/.idea/php.xml b/.idea/php.xml
index 8e445c2..dbf4328 100644
--- a/.idea/php.xml
+++ b/.idea/php.xml
@@ -10,12 +10,27 @@
     <option name="highlightLevel" value="WARNING" />
     <option name="transferred" value="true" />
   </component>
-  <component name="PhpProjectSharedConfiguration" php_language_level="7.0">
+  <component name="PhpCodeSniffer">
+    <phpcs_settings>
+      <phpcs_by_interpreter asDefaultInterpreter="true" interpreter_id="4bd9484f-d78e-4315-b899-c673e4a83c70" timeout="30000" />
+    </phpcs_settings>
+  </component>
+  <component name="PhpProjectSharedConfiguration" php_language_level="8.4">
     <option name="suggestChangeDefaultLanguageLevel" value="false" />
   </component>
+  <component name="PhpStan">
+    <PhpStan_settings>
+      <phpstan_by_interpreter asDefaultInterpreter="true" interpreter_id="4bd9484f-d78e-4315-b899-c673e4a83c70" timeout="60000" />
+    </PhpStan_settings>
+  </component>
   <component name="PhpStanOptionsConfiguration">
     <option name="transferred" value="true" />
   </component>
+  <component name="Psalm">
+    <Psalm_settings>
+      <psalm_fixer_by_interpreter asDefaultInterpreter="true" interpreter_id="4bd9484f-d78e-4315-b899-c673e4a83c70" timeout="60000" />
+    </Psalm_settings>
+  </component>
   <component name="PsalmOptionsConfiguration">
     <option name="transferred" value="true" />
   </component>
diff --git a/configure/autoloader/autoload.php b/configure/autoloader/autoload.php
index d3342ae..87b86fa 100644
--- a/configure/autoloader/autoload.php
+++ b/configure/autoloader/autoload.php
@@ -7,6 +7,23 @@ spl_autoload_register(function ($className) {
 
         'Portfolio\\Source\\Design\\Controller\\Home\\' => __DIR__ . '/../../source/design/controller/home/',
         'Portfolio\\Source\\Design\\Controller\\Home\\Read\\' => __DIR__ . '/../../source/design/controller/home/read',
+
+        'Portfolio\\Source\\Design\\Controller\\About\\' => __DIR__ . '/../../source/design/controller/about/',
+        'Portfolio\\Source\\Design\\Controller\\About\\Read\\' => __DIR__ . '/../../source/design/controller/about/read',
+
+        'Portfolio\\Source\\Design\\Controller\\Project\\' => __DIR__ . '/../../source/design/controller/project/',
+        'Portfolio\\Source\\Design\\Controller\\Project\\Read\\' => __DIR__ . '/../../source/design/controller/project/read',
+
+        'Portfolio\\Source\\Design\\Controller\\Experience\\' => __DIR__ . '/../../source/design/controller/experience/',
+        'Portfolio\\Source\\Design\\Controller\\Experience\\Read\\' => __DIR__ . '/../../source/design/controller/experience/read',
+
+        'Portfolio\\Source\\Design\\Controller\\Tech\\' => __DIR__ . '/../../source/design/controller/tech/',
+        'Portfolio\\Source\\Design\\Controller\\Tech\\Read\\' => __DIR__ . '/../../source/design/controller/tech/read',
+
+        'Portfolio\\Source\\Design\\Controller\\Contact\\' => __DIR__ . '/../../source/design/controller/contact/',
+        'Portfolio\\Source\\Design\\Controller\\Contact\\Read\\' => __DIR__ . '/../../source/design/controller/contact/read',
+
+        'Portfolio\\Source\\Design\\Controller\\' => __DIR__ . '/../../source/design/controller/',
     ];
 
     // Parcourir les namespaces définis pour trouver une correspondance
diff --git a/public/asset/script/script.js b/public/asset/script/script.js
new file mode 100644
index 0000000..928cbf7
--- /dev/null
+++ b/public/asset/script/script.js
@@ -0,0 +1,11 @@
+document.addEventListener("DOMContentLoaded", () => {
+    const menuToggle = document.getElementById("menu-toggle");
+    const navbar = document.getElementById("navbar");
+
+    // Ouvre et ferme le menu burger
+    menuToggle.addEventListener("click", () => {
+        navbar.classList.toggle("active");
+        const isExpanded = navbar.classList.contains("active");
+        menuToggle.setAttribute("aria-expanded", isExpanded.toString());
+    });
+});
diff --git a/public/asset/style/style.css b/public/asset/style/style.css
new file mode 100644
index 0000000..8c124ac
--- /dev/null
+++ b/public/asset/style/style.css
@@ -0,0 +1,122 @@
+/* Styles de base */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f4f4f4;
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+    overflow-x: hidden; /* Empêche le débordement horizontal */
+}
+
+header {
+    background-color: #333;
+    color: #fff;
+    display: flex;
+    justify-content: space-between; /* Aligne le logo et le menu burger */
+    align-items: center;
+    padding: 1rem;
+    position: relative;
+    width: 100%;
+}
+
+#logo h1 {
+    margin-left: 1rem;
+    text-align: left;
+    font-size: 1.5rem;
+}
+
+/* Bouton menu burger */
+#menu-toggle {
+    display: none;
+    font-size: 1.8rem;
+    background: none;
+    border: none;
+    color: #fff;
+    cursor: pointer;
+}
+
+/* Navbar */
+#navbar {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: auto;
+    margin-right: 1rem;
+}
+
+#navbar ul {
+    list-style: none;
+    display: flex;
+    gap: 2rem;
+    padding: 0;
+    margin: 0;
+}
+
+#navbar a {
+    color: #fff;
+    text-decoration: none;
+    font-weight: bold;
+}
+
+#navbar a:hover {
+    text-decoration: underline;
+}
+
+#navbar ul li a.active {
+    border-bottom: 2px solid #fff; /* Indique la page active */
+}
+
+/* Section principale */
+section {
+    padding: 2rem;
+    text-align: center;
+    flex-grow: 1;
+}
+
+footer {
+    text-align: center;
+    padding: 1rem;
+    background-color: #333;
+    color: #fff;
+    width: 100%;
+    margin-top: auto;
+}
+
+/* Navbar en mode mobile */
+@media (max-width: 980px) {
+    #menu-toggle {
+        display: block; /* Affiche le menu burger */
+    }
+
+    #navbar {
+        display: none; /* Cache la navbar par défaut */
+        position: absolute;
+        top: 60px; /* Position sous le header */
+        right: 0;
+        background-color: #333;
+        padding: 1rem;
+        flex-direction: column; /* Empile les liens */
+        width: 200px; /* Largeur du menu */
+        max-width: 100%; /* Empêche les débordements */
+    }
+
+    #navbar.active {
+        display: flex; /* Affiche la navbar lorsqu'elle est activée */
+    }
+
+    #navbar ul {
+        flex-direction: column; /* Les liens sont empilés */
+        gap: 1rem;
+        text-align: right;
+    }
+
+    #navbar a {
+        text-align: right;
+    }
+}
diff --git a/public/index.php b/public/index.php
index c64b5da..b2b8cfd 100644
--- a/public/index.php
+++ b/public/index.php
@@ -10,4 +10,7 @@ $router = new Router($_GET['url']);
 $router->get('/', 'Portfolio\Source\Design\Controller\Home\Index@index');
 $router->get('/home/:id', 'Portfolio\Source\Design\Controller\Home\Read\Read@read');
 
-$router ->run();
\ No newline at end of file
+$router->get('/about', 'Portfolio\Source\Design\Controller\About\Index@index');
+$router->get('/about/:id', 'Portfolio\Source\Design\Controller\About\Read\Read@read');
+
+$router->run();
\ No newline at end of file
diff --git a/source/design/controller/Base.php b/source/design/controller/Base.php
deleted file mode 100644
index 69fbe37..0000000
--- a/source/design/controller/Base.php
+++ /dev/null
@@ -1,11 +0,0 @@
-<?php
-
-namespace Portfolio\Source\Design\Controller;
-
-class Base
-{
-    public function show(string $path, array $params = null)
-    {
-
-    }
-}
\ No newline at end of file
diff --git a/source/design/controller/about/index.php b/source/design/controller/about/index.php
new file mode 100644
index 0000000..a323839
--- /dev/null
+++ b/source/design/controller/about/index.php
@@ -0,0 +1,14 @@
+<?php
+
+namespace Portfolio\Source\Design\Controller\About;
+
+use Portfolio\Source\Design\Controller\Base;
+
+class Index extends Base
+{
+    public function index(): void
+    {
+        // Affiche la vue portfolio/template/about/index.html dans le layout portfolio/template/base.html
+        $this->show('about.index');
+    }
+}
\ No newline at end of file
diff --git a/source/design/controller/about/read/read.php b/source/design/controller/about/read/read.php
new file mode 100644
index 0000000..1ff685f
--- /dev/null
+++ b/source/design/controller/about/read/read.php
@@ -0,0 +1,13 @@
+<?php
+
+namespace Portfolio\Source\Design\Controller\About\Read;
+
+use Portfolio\Source\Design\Controller\Base;
+
+class Read extends Base
+{
+    public function read(int $id)
+    {
+        return $this->show('about.read.read', ['id' => $id]);
+    }
+}
\ No newline at end of file
diff --git a/source/design/controller/base.php b/source/design/controller/base.php
new file mode 100644
index 0000000..f408cd9
--- /dev/null
+++ b/source/design/controller/base.php
@@ -0,0 +1,44 @@
+<?php
+
+namespace Portfolio\Source\Design\Controller;
+
+class Base
+{
+    protected string $layout = 'portfolio/template/base.html';
+
+    public function show(string $path, array $params = null): void
+    {
+        // Conversion du chemin en fichier HTML
+        $viewPath = dirname(__DIR__, 3) . '/template/' . str_replace('.', '/', $path) . '.html';
+
+        if (!is_file($viewPath)) {
+            echo "Vue introuvable : $viewPath<br>";
+            print_r(scandir(dirname($viewPath)));
+            exit;
+        }
+
+        $viewContent = file_get_contents($viewPath);
+
+        // Remplacer les variables dynamiques dans la vue
+        if ($params) {
+            foreach ($params as $key => $value) {
+                $viewContent = str_replace('{{ ' . $key . ' }}', htmlspecialchars($value), $viewContent);
+            }
+        }
+
+        $layoutPath = dirname(__DIR__, 3) . '/template/base.html';
+
+        // Charger le layout principal
+        if (!file_exists($layoutPath)) {
+            throw new \Exception("Layout introuvable : $layoutPath");
+        }
+
+        $layoutContent = file_get_contents($layoutPath);
+
+        // Injecter le contenu de la vue dans le layout
+        $finalHtml = str_replace('{{ content }}', $viewContent, $layoutContent);
+
+        // Afficher le rendu final
+        echo $finalHtml;
+    }
+}
\ No newline at end of file
diff --git a/source/design/controller/contact/index.php b/source/design/controller/contact/index.php
new file mode 100644
index 0000000..821c3b5
--- /dev/null
+++ b/source/design/controller/contact/index.php
@@ -0,0 +1,14 @@
+<?php
+
+namespace Portfolio\Source\Design\Controller\Contact;
+
+use Portfolio\Source\Design\Controller\Base;
+
+class Index extends Base
+{
+    public function index(): void
+    {
+        // Affiche la vue portfolio/template/contact/index.html dans le layout portfolio/template/base.html
+        $this->show('contact.index');
+    }
+}
\ No newline at end of file
diff --git a/source/design/controller/contact/read/read.php b/source/design/controller/contact/read/read.php
new file mode 100644
index 0000000..f81fe75
--- /dev/null
+++ b/source/design/controller/contact/read/read.php
@@ -0,0 +1,13 @@
+<?php
+
+namespace Portfolio\Source\Design\Controller\contact\Read;
+
+use Portfolio\Source\Design\Controller\Base;
+
+class Read extends Base
+{
+    public function read(int $id)
+    {
+        return $this->show('contact.read.read', ['id' => $id]);
+    }
+}
\ No newline at end of file
diff --git a/source/design/controller/contact/send/sendContactController.php b/source/design/controller/contact/send/sendContactController.php
deleted file mode 100644
index e50ba7a..0000000
--- a/source/design/controller/contact/send/sendContactController.php
+++ /dev/null
@@ -1,10 +0,0 @@
-<?php
-
-namespace portfolio\source\design\controller;
-
-class sendContactController extends BaseController
-{
-    public function sendContact() {
-        return $this->show('contact.send');
-    }
-}
\ No newline at end of file
diff --git a/source/design/controller/experience/index.php b/source/design/controller/experience/index.php
new file mode 100644
index 0000000..58fcfec
--- /dev/null
+++ b/source/design/controller/experience/index.php
@@ -0,0 +1,14 @@
+<?php
+
+namespace Portfolio\Source\Design\Controller\Experience;
+
+use Portfolio\Source\Design\Controller\Base;
+
+class Index extends Base
+{
+    public function index(): void
+    {
+        // Affiche la vue portfolio/template/experience/index.html dans le layout portfolio/template/base.html
+        $this->show('experience.index');
+    }
+}
\ No newline at end of file
diff --git a/source/design/controller/experience/read/read.php b/source/design/controller/experience/read/read.php
new file mode 100644
index 0000000..f811a89
--- /dev/null
+++ b/source/design/controller/experience/read/read.php
@@ -0,0 +1,13 @@
+<?php
+
+namespace Portfolio\Source\Design\Controller\Experience\Read;
+
+use Portfolio\Source\Design\Controller\Base;
+
+class Read extends Base
+{
+    public function read(int $id)
+    {
+        return $this->show('experience.read.read', ['id' => $id]);
+    }
+}
\ No newline at end of file
diff --git a/source/design/controller/home/index.php b/source/design/controller/home/index.php
index bb9d94f..1059fe8 100644
--- a/source/design/controller/home/index.php
+++ b/source/design/controller/home/index.php
@@ -1,13 +1,14 @@
 <?php
 
-namespace Portfolio\source\design\controller\home;
+namespace Portfolio\Source\Design\Controller\Home;
 
 use Portfolio\Source\Design\Controller\Base;
 
 class Index extends Base
 {
-    public function index()
+    public function index(): void
     {
-        return $this->show('home.index');
+        // Affiche la vue portfolio/template/home/index.html dans le layout portfolio/template/base.html
+        $this->show('home.index');
     }
 }
\ No newline at end of file
diff --git a/source/design/controller/home/read/read.php b/source/design/controller/home/read/read.php
index 8e3f0f9..27b237c 100644
--- a/source/design/controller/home/read/read.php
+++ b/source/design/controller/home/read/read.php
@@ -8,6 +8,6 @@ class Read extends Base
 {
     public function read(int $id)
     {
-        return $this->show('home.read', compact(['id']));
+        return $this->show('home.read.read', ['id' => $id]);
     }
 }
\ No newline at end of file
diff --git a/source/design/controller/project/index.php b/source/design/controller/project/index.php
new file mode 100644
index 0000000..2fd91c5
--- /dev/null
+++ b/source/design/controller/project/index.php
@@ -0,0 +1,14 @@
+<?php
+
+namespace Portfolio\Source\Design\Controller\Project;
+
+use Portfolio\Source\Design\Controller\Base;
+
+class Index extends Base
+{
+    public function index(): void
+    {
+        // Affiche la vue portfolio/template/project/index.html dans le layout portfolio/template/base.html
+        $this->show('project.index');
+    }
+}
\ No newline at end of file
diff --git a/source/design/controller/project/read/read.php b/source/design/controller/project/read/read.php
new file mode 100644
index 0000000..33eb23c
--- /dev/null
+++ b/source/design/controller/project/read/read.php
@@ -0,0 +1,13 @@
+<?php
+
+namespace Portfolio\Source\Design\Controller\Project\Read;
+
+use Portfolio\Source\Design\Controller\Base;
+
+class Read extends Base
+{
+    public function read(int $id)
+    {
+        return $this->show('project.read.read', ['id' => $id]);
+    }
+}
\ No newline at end of file
diff --git a/source/design/controller/tech/index.php b/source/design/controller/tech/index.php
new file mode 100644
index 0000000..20a53e7
--- /dev/null
+++ b/source/design/controller/tech/index.php
@@ -0,0 +1,14 @@
+<?php
+
+namespace Portfolio\Source\Design\Controller\Tech;
+
+use Portfolio\Source\Design\Controller\Base;
+
+class Index extends Base
+{
+    public function index(): void
+    {
+        // Affiche la vue portfolio/template/tech/index.html dans le layout portfolio/template/base.html
+        $this->show('tech.index');
+    }
+}
\ No newline at end of file
diff --git a/source/design/controller/tech/read/read.php b/source/design/controller/tech/read/read.php
new file mode 100644
index 0000000..b8b2fed
--- /dev/null
+++ b/source/design/controller/tech/read/read.php
@@ -0,0 +1,13 @@
+<?php
+
+namespace Portfolio\Source\Design\Controller\Tech\Read;
+
+use Portfolio\Source\Design\Controller\Base;
+
+class Read extends Base
+{
+    public function read(int $id)
+    {
+        return $this->show('tech.read.read', ['id' => $id]);
+    }
+}
\ No newline at end of file
diff --git a/template/about/index.html b/template/about/index.html
new file mode 100644
index 0000000..e805ab5
--- /dev/null
+++ b/template/about/index.html
@@ -0,0 +1,20 @@
+<header>
+    <div id="logo">
+        <h1>SERMAND Maxim</h1>
+    </div>
+    <button id="menu-toggle" aria-expanded="false">&#9776;</button>
+    <nav id="navbar">
+        <ul>
+            <li><a href="http://localhost/portfolio/">Accueil</a></li>
+            <li><a href="http://localhost/portfolio/about/" class="active">À propos</a></li>
+            <li><a href="http://localhost/portfolio/project/">Projets</a></li>
+            <li><a href="http://localhost/portfolio/experience/">Expériences</a></li>
+            <li><a href="http://localhost/portfolio/tech">Veilles technologiques</a></li>
+            <li><a href="http://localhost/portfolio/contact/">Contacts</a></li>
+        </ul>
+    </nav>
+</header>
+<main>
+    <h1>À propos</h1>
+    <p>Je suis Maxim, un développeur passionné par les nouvelles technologies et le développement d'applications.</p>
+</main>
\ No newline at end of file
diff --git a/template/about/read/read.html b/template/about/read/read.html
new file mode 100644
index 0000000..4c89fcf
--- /dev/null
+++ b/template/about/read/read.html
@@ -0,0 +1,2 @@
+<h2>Détail de l'article</h2>
+<p>Identifiant : {{ id }}</p>
\ No newline at end of file
diff --git a/template/base.html b/template/base.html
index 9dfff06..7796602 100644
--- a/template/base.html
+++ b/template/base.html
@@ -1,25 +1,18 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="fr">
 <head>
-  <meta charset="UTF-8">
-  <title>Title</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mon Portfolio</title>
+    <link rel="stylesheet" href="http://localhost/portfolio/public/asset/style/style.css">
 </head>
 <body>
 
-<header>
-
-</header>
-
-<aside>
-
-</aside>
-
-<main>
-  {{ content }}
-</main>
+{{ content }}
 
 <footer>
-
+    <p>&copy; SERMAND Maxim, 2025. Tous droits réservés.</p>
 </footer>
+<script src="http://localhost/portfolio/public/asset/script/script.js"></script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/template/contact/index.html b/template/contact/index.html
new file mode 100644
index 0000000..ee7de6c
--- /dev/null
+++ b/template/contact/index.html
@@ -0,0 +1,20 @@
+<header>
+    <div id="logo">
+        <h1>SERMAND Maxim</h1>
+    </div>
+    <button id="menu-toggle" aria-expanded="false">&#9776;</button>
+    <nav id="navbar">
+        <ul>
+            <li><a href="http://localhost/portfolio/">Accueil</a></li>
+            <li><a href="http://localhost/portfolio/about/">À propos</a></li>
+            <li><a href="http://localhost/portfolio/project/">Projets</a></li>
+            <li><a href="http://localhost/portfolio/experience/">Expériences</a></li>
+            <li><a href="http://localhost/portfolio/tech">Veilles technologiques</a></li>
+            <li><a href="http://localhost/portfolio/contact/" class="active">Contacts</a></li>
+        </ul>
+    </nav>
+</header>
+<main>
+    <h1>À propos</h1>
+    <p>Je suis Maxim, un développeur passionné par les nouvelles technologies et le développement d'applications.</p>
+</main>
\ No newline at end of file
diff --git a/template/contact/read/read.html b/template/contact/read/read.html
new file mode 100644
index 0000000..4c89fcf
--- /dev/null
+++ b/template/contact/read/read.html
@@ -0,0 +1,2 @@
+<h2>Détail de l'article</h2>
+<p>Identifiant : {{ id }}</p>
\ No newline at end of file
diff --git a/template/experience/index.html b/template/experience/index.html
new file mode 100644
index 0000000..bcbfc9b
--- /dev/null
+++ b/template/experience/index.html
@@ -0,0 +1,20 @@
+<header>
+    <div id="logo">
+        <h1>SERMAND Maxim</h1>
+    </div>
+    <button id="menu-toggle" aria-expanded="false">&#9776;</button>
+    <nav id="navbar">
+        <ul>
+            <li><a href="http://localhost/portfolio/">Accueil</a></li>
+            <li><a href="http://localhost/portfolio/about/">À propos</a></li>
+            <li><a href="http://localhost/portfolio/project/">Projets</a></li>
+            <li><a href="http://localhost/portfolio/experience/" class="active">Expériences</a></li>
+            <li><a href="http://localhost/portfolio/tech">Veilles technologiques</a></li>
+            <li><a href="http://localhost/portfolio/contact/">Contacts</a></li>
+        </ul>
+    </nav>
+</header>
+<main>
+    <h1>À propos</h1>
+    <p>Je suis Maxim, un développeur passionné par les nouvelles technologies et le développement d'applications.</p>
+</main>
\ No newline at end of file
diff --git a/template/experience/read/read.html b/template/experience/read/read.html
new file mode 100644
index 0000000..4c89fcf
--- /dev/null
+++ b/template/experience/read/read.html
@@ -0,0 +1,2 @@
+<h2>Détail de l'article</h2>
+<p>Identifiant : {{ id }}</p>
\ No newline at end of file
diff --git a/template/home/index.html b/template/home/index.html
new file mode 100644
index 0000000..f47da59
--- /dev/null
+++ b/template/home/index.html
@@ -0,0 +1,20 @@
+<header>
+    <div id="logo">
+        <h1>SERMAND Maxim</h1>
+    </div>
+    <button id="menu-toggle" aria-expanded="false">&#9776;</button>
+    <nav id="navbar">
+        <ul>
+            <li><a href="http://localhost/portfolio/" class="active">Accueil</a></li>
+            <li><a href="http://localhost/portfolio/about/">À propos</a></li>
+            <li><a href="http://localhost/portfolio/project/">Projets</a></li>
+            <li><a href="http://localhost/portfolio/experience/">Expériences</a></li>
+            <li><a href="http://localhost/portfolio/tech/">Veilles technologiques</a></li>
+            <li><a href="http://localhost/portfolio/contact/">Contacts</a></li>
+        </ul>
+    </nav>
+</header>
+<main>
+    <h1>Bienvenue sur mon portfolio</h1>
+    <p>Voici la page d'accueil de l'application.</p>
+</main>
\ No newline at end of file
diff --git a/template/home/read/read.html b/template/home/read/read.html
index 9d4de35..4c89fcf 100644
--- a/template/home/read/read.html
+++ b/template/home/read/read.html
@@ -1 +1,2 @@
-<p>content</p>
\ No newline at end of file
+<h2>Détail de l'article</h2>
+<p>Identifiant : {{ id }}</p>
\ No newline at end of file
diff --git a/template/project/index.html b/template/project/index.html
new file mode 100644
index 0000000..8decd20
--- /dev/null
+++ b/template/project/index.html
@@ -0,0 +1,20 @@
+<header>
+    <div id="logo">
+        <h1>SERMAND Maxim</h1>
+    </div>
+    <button id="menu-toggle" aria-expanded="false">&#9776;</button>
+    <nav id="navbar">
+        <ul>
+            <li><a href="http://localhost/portfolio/">Accueil</a></li>
+            <li><a href="http://localhost/portfolio/about/">À propos</a></li>
+            <li><a href="http://localhost/portfolio/project/" class="active">Projets</a></li>
+            <li><a href="http://localhost/portfolio/experience/">Expériences</a></li>
+            <li><a href="http://localhost/portfolio/tech/">Veilles technologiques</a></li>
+            <li><a href="http://localhost/portfolio/contact/">Contacts</a></li>
+        </ul>
+    </nav>
+</header>
+<main>
+    <h1>À propos</h1>
+    <p>Je suis Maxim, un développeur passionné par les nouvelles technologies et le développement d'applications.</p>
+</main>
\ No newline at end of file
diff --git a/template/project/read/read.html b/template/project/read/read.html
new file mode 100644
index 0000000..4c89fcf
--- /dev/null
+++ b/template/project/read/read.html
@@ -0,0 +1,2 @@
+<h2>Détail de l'article</h2>
+<p>Identifiant : {{ id }}</p>
\ No newline at end of file
diff --git a/template/tech/index.html b/template/tech/index.html
new file mode 100644
index 0000000..fa12b06
--- /dev/null
+++ b/template/tech/index.html
@@ -0,0 +1,20 @@
+<header>
+    <div id="logo">
+        <h1>SERMAND Maxim</h1>
+    </div>
+    <button id="menu-toggle" aria-expanded="false">&#9776;</button>
+    <nav id="navbar">
+        <ul>
+            <li><a href="http://localhost/portfolio/">Accueil</a></li>
+            <li><a href="http://localhost/portfolio/about/">À propos</a></li>
+            <li><a href="http://localhost/portfolio/project/">Projets</a></li>
+            <li><a href="http://localhost/portfolio/experience/">Expériences</a></li>
+            <li><a href="http://localhost/portfolio/tech" class="active">Veilles technologiques</a></li>
+            <li><a href="http://localhost/portfolio/contact/">Contacts</a></li>
+        </ul>
+    </nav>
+</header>
+<main>
+    <h1>À propos</h1>
+    <p>Je suis Maxim, un développeur passionné par les nouvelles technologies et le développement d'applications.</p>
+</main>
\ No newline at end of file
diff --git a/template/tech/read/read.html b/template/tech/read/read.html
new file mode 100644
index 0000000..4c89fcf
--- /dev/null
+++ b/template/tech/read/read.html
@@ -0,0 +1,2 @@
+<h2>Détail de l'article</h2>
+<p>Identifiant : {{ id }}</p>
\ No newline at end of file