gauvain/it_portfolio
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

First init

Browse Source
This commit is contained in:
gauvainboiche
2025-06-27 20:42:41 +02:00
commit f606a2cad1
2 changed files with 154 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
index.html Normal file
View File

@@ -0,0 +1,57 @@
<!DOCTYPE html>
<html lang="fr">
<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">
</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>
<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>
</body>
</html>

97
resources/css/index.css Normal file
View File

@@ -0,0 +1,97 @@
/* Global aspect */
* {
box-sizing: border-box; /* permet de calculer les bordures dans les tailles affichées */
}
/* THEME VERT
:root {
--primary-color: #34cc26;
--secondary-color: #1fe743;
--primary-text-color: #FFFFFF;
--secondary-text-color: #4bb04b;
--background-color: #214e21;
--font-family: 'Inconsolata', monospace;
}
*/
:root {
--primary-color: #34cc26;
--secondary-color: #1fe743;
--primary-text-color: #FFFFFF;
--secondary-text-color: #4bb04b;
--background-color: #454019;
--font-family: 'Inconsolata', monospace;
}
body {
background: var(--background-color);
background: radial-gradient(circle,var(--background-color) 0%, black 100%);
color: var(--primary-text-color);
text-shadow: 0 0 5px var(--secondary-color);
font: 1rem Inconsolata, monospace;
height: 100vh;
width: 100vw;
}
body::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: repeating-linear-gradient(
0deg,
rgba(0, 0, 0, 0.15),
rgba(0, 0, 0, 0.15) 1px,
transparent 1px,
transparent 2px
);
pointer-events: none;
}
::selection {
background: #0080FF;
text-shadow: none;
}
/* Generecis elements */
h1, h2, p, li, form {
width: 75%;
padding: 10px;
margin: 0 auto;
}
h1, h2 {
font-size: 2.5rem;
text-align: center;
color:var(--secondary-text-color);
border: thick double var(--secondary-text-color);
}
p {
font-size: 1.2rem;
line-height: 1.5;
width: 75%;
text-align: justify;
border: solid 1px var(--secondary-text-color);
}
a {
color: var(--primary-color);
text-decoration: none;
transition: color 0.3s ease;
}
a:hover {
color: var(--secondary-color);
text-decoration: none;
transition: color 0.3s ease;
}
/* CLASS elements */
/* ID elements */