refacto: vide-coding to get a terminal look

This commit is contained in:
Gauvain B
2026-04-21 11:49:33 +02:00
parent 4a98c30f09
commit e088991b5d
10 changed files with 1231 additions and 130 deletions

View File

@@ -1,57 +1,39 @@
<!DOCTYPE html>
<html lang="fr">
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gauvain Boiché - Portfolio</title>
<link rel="stylesheet" href="./resources/css/index.css">
<title>Gauvain Boiché Portfolio</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="resources/css/index.css">
</head>
<body>
<header>
<h1>Bienvenue sur mon Portfolio Informatique</h1>
<nav>
<ul>
<li><a href="#projets">Projets</a></li>
<li><a href="#competences">Compétences</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<div id="terminal">
<div id="titlebar">
<span id="titlebar-title">GAUVAIN BOICHÉ — PORTFOLIO TERMINAL</span>
<span id="current-path">~</span>
</div>
<div id="terminal-body">
<div id="tree-view" class="view"></div>
<div id="page-view" class="view hidden">
<div id="page-header"></div>
<div id="page-scroll-area">
<div id="page-content"></div>
</div>
</div>
</div>
<div id="statusbar">
<span id="status-left"></span>
<span id="status-right"></span>
</div>
</div>
<div id="cursor-block"></div>
<section id="projets">
<h2>Mes Projets</h2>
<p>Voici quelques-uns de mes projets récents :</p>
<ul>
<li>Projet 1: Description du projet 1.</li>
<li>Projet 2: Description du projet 2.</li>
<li>Projet 3: Description du projet 3.</li>
</ul>
</section>
<section id="competences">
<h2>Mes Compétences</h2>
<p>Je maîtrise les technologies suivantes :</p>
<ul>
<li>HTML, CSS, JavaScript</li>
<li>Python, Java, C++</li>
<li>Frameworks: React, Angular, Django</li>
</ul>
</section>
<section id="contact">
<h2>Contactez-moi</h2>
<p>Pour toute question ou collaboration, n'hésitez pas à me contacter :</p>
<form action="#" method="post">
<label for="name">Nom:</label><br>
<input type="text" id="name" name="name" required><br><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email" required><br><br>
<input type="submit" value="Envoyer">
</form>
</section>
<footer>
<p>&copy; 2023 Mon Portfolio Informatique. Tous droits réservés.</p>
</footer>
<script src="https://cdn.jsdelivr.net/npm/marked@9.1.6/marked.min.js"></script>
<script src="resources/js/terminal.js"></script>
</body>
</html>