generated from Templates_CodeFirst/templateHtmlCss
somes tests
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
parent
1169f231ce
commit
2cf5112667
@ -1,25 +0,0 @@
|
||||
[](https://codefirst.iut.uca.fr/thibaud.la_riviere-gillet/portfoli)
|
||||
|
||||
# portfolio
|
||||
|
||||
# Mon Portfolio
|
||||
|
||||
Ce dépôt a pour objectif final de contenir et de mettre à jour mon portfolio. Vous pouvez y accéder en utilisant la commande git clone.
|
||||
|
||||
## Utilisation
|
||||
|
||||
Je vous conseille de commencer par lire la page d'accueil du wiki, qui explique les spécificités de ce rendu. Ensuite, examinez dans l'ordre le contexte, les personas ainsi que les user stories de 1 à 3. Étudiez le diagramme de flux pour comprendre la démarche suivie. Enfin, examinez l'interprétation graphique que j'ai faite de ce portfolio avec la maquette.
|
||||
|
||||
Une fois que vous aurez accompli toutes ces étapes, vous pourrez visiter mon portfolio et en comprendre entièrement l'utilisation.
|
||||
|
||||
|
||||
## BUG connnu
|
||||
|
||||
CV.css n'affiche pas le cv
|
||||
Me.md doit etre definis
|
||||
Mont-blanc_LDA ne fonctionne pas
|
||||
si vous trouvez les differentes erreures, veuillez m'en informer
|
||||
|
||||
## Auteurs
|
||||
|
||||
Thibaud La Riviere
|
||||
|
Before Width: | Height: | Size: 674 KiB |
|
Before Width: | Height: | Size: 1.3 MiB |
@ -1,56 +0,0 @@
|
||||
#files_about
|
||||
{
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#About
|
||||
{
|
||||
background-color: #173964;
|
||||
}
|
||||
|
||||
#About:hover #files_about
|
||||
{
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.repertory-box:hover #About
|
||||
{
|
||||
background-color: rgba(36, 36, 36, 0.80);
|
||||
}
|
||||
|
||||
.repertory-box:hover #files_about{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cv a
|
||||
{
|
||||
color: rgb(215, 130, 100, 1.0);
|
||||
}
|
||||
|
||||
.cv p
|
||||
{
|
||||
padding-left: 15%;
|
||||
}
|
||||
|
||||
.cv h1, .cv h3
|
||||
{
|
||||
color: rgb(227, 140, 98, 1.0);
|
||||
}
|
||||
|
||||
|
||||
.cv mark, date
|
||||
{
|
||||
color: rgb(157, 241, 240, 1.0);
|
||||
}
|
||||
|
||||
date
|
||||
{
|
||||
position: absolute;
|
||||
font-weight: bold;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.cv
|
||||
{
|
||||
background-image: url('../../pictures/back_md.jpg');
|
||||
}
|
||||
@ -1,5 +0,0 @@
|
||||
.cv img
|
||||
{
|
||||
float: right;
|
||||
width: 19%;
|
||||
}
|
||||
@ -1,24 +0,0 @@
|
||||
#files_contact
|
||||
{
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#Contact
|
||||
{
|
||||
background-color: #173964;
|
||||
}
|
||||
|
||||
#Contact:hover #files_contact
|
||||
{
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.repertory-box:hover #Contact
|
||||
{
|
||||
background-color: rgba(36, 36, 36, 0.80);
|
||||
}
|
||||
|
||||
.repertory-box:hover #files_contact
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
@ -1,34 +0,0 @@
|
||||
.galerie-container
|
||||
{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.galerie
|
||||
{
|
||||
text-decoration: none;
|
||||
margin: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.galerie img
|
||||
{
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
object-fit: cover;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.galerie:hover:after
|
||||
{
|
||||
content: attr(title);
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
.galerie .image {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
}
|
||||
@ -1,4 +0,0 @@
|
||||
.me
|
||||
{
|
||||
background-color: black;
|
||||
}
|
||||
@ -1,30 +0,0 @@
|
||||
#files_projects
|
||||
{
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#Projects
|
||||
{
|
||||
background-color: #173964;
|
||||
}
|
||||
|
||||
#Projects:hover #files_projects
|
||||
{
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.repertory-box:hover #Projects
|
||||
{
|
||||
background-color: rgba(36, 36, 36, 0.80);
|
||||
}
|
||||
|
||||
.repertory-box:hover #files_projects{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mont_blanc img, .forty-two img
|
||||
{
|
||||
float: right;
|
||||
padding-right: 10%;
|
||||
width: 30%;
|
||||
}
|
||||
@ -1,30 +0,0 @@
|
||||
.Maquette mark
|
||||
{
|
||||
color: indianred;
|
||||
}
|
||||
|
||||
.indentation0
|
||||
{
|
||||
padding-left: 0px;
|
||||
}
|
||||
|
||||
.indentation1
|
||||
{
|
||||
padding-left: 60px;
|
||||
}
|
||||
|
||||
.indentation2
|
||||
{
|
||||
padding-left: 120px;
|
||||
}
|
||||
|
||||
.indentation3
|
||||
{
|
||||
padding-left: 180px;
|
||||
}
|
||||
|
||||
|
||||
.Maquette
|
||||
{
|
||||
background-image: url('../../pictures/back_md.jpg');
|
||||
}
|
||||
@ -1,13 +0,0 @@
|
||||
.mont_blanc
|
||||
{
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 900px)
|
||||
{
|
||||
.mont_blanc
|
||||
{
|
||||
height: auto;
|
||||
bottom: auto;
|
||||
}
|
||||
}
|
||||
@ -1,31 +0,0 @@
|
||||
.forty-two h1, .forty-two h2, .forty-two strong, .forty-two em
|
||||
{
|
||||
opacity: 80%;
|
||||
}
|
||||
|
||||
.forty-two h3
|
||||
{
|
||||
color: rgb(150, 190, 150, 1.0);
|
||||
}
|
||||
|
||||
.forty-two mark
|
||||
{
|
||||
color: rgb(157, 241, 240, 1.0);
|
||||
}
|
||||
|
||||
function
|
||||
{
|
||||
color: #A73964;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.forty-two img
|
||||
{
|
||||
opacity: 80%;
|
||||
}
|
||||
|
||||
.forty-two
|
||||
{
|
||||
background-image: url('../../pictures/back_c.jpg');
|
||||
}
|
||||
|
||||
@ -1,22 +0,0 @@
|
||||
.readme a, .readme em
|
||||
{
|
||||
color: rgb(215, 130, 100, 1.0);
|
||||
}
|
||||
|
||||
.readme p
|
||||
{
|
||||
padding-left: 15%;
|
||||
}
|
||||
|
||||
|
||||
.readme strong
|
||||
{
|
||||
color: rgb(195, 155, 100, 1.0);
|
||||
}
|
||||
|
||||
|
||||
.readme mark
|
||||
{
|
||||
color: rgb(100, 135, 200, 1.0);
|
||||
}
|
||||
|
||||
@ -1,231 +1,159 @@
|
||||
body
|
||||
{
|
||||
background: #011C2D;
|
||||
margin: 0;
|
||||
min-height: 100vh
|
||||
}
|
||||
|
||||
.container
|
||||
{
|
||||
color: #FFF;
|
||||
padding-left: 5%;
|
||||
}
|
||||
|
||||
a
|
||||
{
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
mark
|
||||
{
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
#pion_container
|
||||
{
|
||||
display: none;
|
||||
header .cv-container {
|
||||
position: relative;
|
||||
right: 25%;
|
||||
transform: translateX(50%);
|
||||
}
|
||||
|
||||
#pion_repertory
|
||||
{
|
||||
width: 50px;
|
||||
#cv-download-button {
|
||||
padding: 8px 15px;
|
||||
background: #FFF;
|
||||
color: #173964;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.pictures
|
||||
{
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
padding-left: 1%;
|
||||
width: 64%;
|
||||
z-index: 0;
|
||||
#cv-download-button:hover {
|
||||
background: #1A4D7B;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
.pictures_files:after
|
||||
{
|
||||
content: attr(title);
|
||||
/* Autres styles */
|
||||
body {
|
||||
background: #011C2D;
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
font-family: Arial, sans-serif;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
.readme
|
||||
{
|
||||
background-image: url('../pictures/back_md.jpg');
|
||||
header {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
box-shadow: none;
|
||||
border-bottom: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
header nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
header nav
|
||||
{
|
||||
header .explorer-box {
|
||||
display: flex;
|
||||
height: 250px;
|
||||
width: 600px;
|
||||
position: relative;
|
||||
top: 50px;
|
||||
left: 60px;
|
||||
background: #173964;
|
||||
width: 500px;
|
||||
height: 200px;
|
||||
border: 1px solid #FFF;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
border-style: groove;
|
||||
border-width: 2px;
|
||||
box-shadow: 3px;
|
||||
background: #173964;
|
||||
}
|
||||
|
||||
header .repertory-box
|
||||
{
|
||||
flex: 0 0 170;
|
||||
height: 100%;
|
||||
border-radius: 10px;
|
||||
background-color: rgba(36, 36, 36, 0.80);
|
||||
header .left-pane {
|
||||
background: #2A2A2A;
|
||||
padding: 10px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
header .repertory-box ul
|
||||
{
|
||||
header .right-pane {
|
||||
background: #173964;
|
||||
padding: 10px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
header .left-pane ul, header .right-pane ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header .repertory-box a
|
||||
{
|
||||
display: block;
|
||||
padding: 8px;
|
||||
padding-right: 40px;
|
||||
padding-left: 40px;
|
||||
header .left-pane li, header .right-pane li {
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
header .left-pane a, header .right-pane a {
|
||||
text-decoration: none;
|
||||
color: #FFF;
|
||||
padding: 5px 10px;
|
||||
transition: background-color 0.3s ease;
|
||||
display: block;
|
||||
}
|
||||
|
||||
header .repertory-box a:hover
|
||||
{
|
||||
background: #173964;
|
||||
}
|
||||
|
||||
header .files-box a:hover
|
||||
{
|
||||
background-color: rgba(36, 36, 36, 0.80);
|
||||
}
|
||||
|
||||
header .pictures_files
|
||||
{
|
||||
max-width: 80px;
|
||||
header .left-pane a.active, header .right-pane li:hover {
|
||||
background: #1A4D7B;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
header .pictures_files
|
||||
{
|
||||
header .right-pane .file-item {
|
||||
text-align: center;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 5px;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
header .repertory-box .files-box
|
||||
{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 22%;
|
||||
height: 90%;
|
||||
padding-top: 10px;
|
||||
header .right-pane .file-item img {
|
||||
margin-bottom: -20px;
|
||||
width: 60px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
header .right-pane .file-item a {
|
||||
margin-top: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 15px;
|
||||
display: none;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
header .repertory-box ul.files li
|
||||
{
|
||||
width: 200px;
|
||||
margin: 0px;
|
||||
header .right-pane .file-item:hover {
|
||||
background: #1A4D7B;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
header .repertory-box .files-box ul.files
|
||||
{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
header .right-pane .file-item:hover img,
|
||||
header .right-pane .file-item:hover a {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.repertory:hover .files-box
|
||||
{
|
||||
.container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.cv, .forty-two, .Maquette, .mont_blanc, .readme, .me
|
||||
{
|
||||
background-size: cover;
|
||||
overflow: auto;
|
||||
position: fixed;
|
||||
#content-display {
|
||||
background: #FFF;
|
||||
color: #011C2D;
|
||||
border-radius: 10px;
|
||||
width: 50%;
|
||||
height: 75%;
|
||||
right: 10%;
|
||||
bottom: 0px;
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-width: 2px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 900px)
|
||||
{
|
||||
header nav
|
||||
{
|
||||
display: flex;
|
||||
height: 140px;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
background: #173964;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
border-style: none;
|
||||
}
|
||||
.cv, .forty-two, .Maquette, .mont_blanc, .readme, .me
|
||||
{
|
||||
position: fixed;
|
||||
border-radius: 10px;
|
||||
width: 100%;
|
||||
height: calc(100vh - 140px);
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
}
|
||||
.pictures
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
#pion_container
|
||||
{
|
||||
display: flex;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 550px)
|
||||
{
|
||||
header .repertory-box .files-box ul.files
|
||||
{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-height: 700px)
|
||||
{
|
||||
.pictures
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
|
||||
#pion_container
|
||||
{
|
||||
display: flex;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
width: 50px;
|
||||
}
|
||||
padding: 20px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
max-width: 800px;
|
||||
width: 90%;
|
||||
margin: 20px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.sheet h1, .sheet h2 {
|
||||
border-bottom: 2px solid #011C2D;
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.sheet p, .sheet h3 {
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
@ -1,92 +0,0 @@
|
||||
<!--
|
||||
File: CV.css.html
|
||||
Owner: Thibaud La Riviere
|
||||
License: MIT License
|
||||
-->
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title> It's me </title>
|
||||
<link rel="shortcut icon" href="la_riviere-gilletthibaud-portfolio/pictures/files.jpg" type="image/x-icon">
|
||||
<link type="text/css" rel="stylesheet" href="../css/style.css">
|
||||
<link type="text/css" rel="stylesheet" href="../css/fonts.css">
|
||||
<link type="text/css" rel="stylesheet" href="../css/About/main_about.css">
|
||||
<link type="text/css" rel="stylesheet" href="../css/About/style_cv.css.css">
|
||||
<link type="text/css" rel="stylesheet" href="../css/About/style_img.jpg.css">
|
||||
</head>
|
||||
<header>
|
||||
<nav>
|
||||
<div class="repertory-box">
|
||||
<ul id="repertory">
|
||||
<li class="repertory" id="About">
|
||||
<a> About </a>
|
||||
<div id="files_about" class="files-box">
|
||||
<ul class="files">
|
||||
<li>
|
||||
<a href="CV.css.html" class="pictures_files" title="CV.css">
|
||||
<img src="../pictures/files.jpg" class="pictures_files"
|
||||
alt="CV.css" width="80px" height="65px">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="repertory" id="Projects">
|
||||
<a> Projects </a>
|
||||
<div class="files-box" id="files_projects">
|
||||
<ul class="files">
|
||||
<li>
|
||||
<a href="ft_42.c.html" class="pictures_files" title="ft_42.css">
|
||||
<img src="../pictures/files.jpg" class="pictures_files"
|
||||
alt="ft_42.css" width="80px" height="65px">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="Maquette.html.html" class="pictures_files" title="Maquette.html">
|
||||
<img src="../pictures/files.jpg" class="pictures_files"
|
||||
alt="Maquette.html" width="80px" height="65px">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="Mont-Blanc_LDA.html" class="pictures_files" title="Mont-blanc (LDA)">
|
||||
<img src="../pictures/files.jpg" class="pictures_files"
|
||||
alt="Mont-blanc (LDA)" width="80px" height="65px">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="repertory" id="Contact">
|
||||
<a> Contact </a>
|
||||
<div class="files-box" id="files_contact">
|
||||
<ul class="files">
|
||||
<li>
|
||||
<a href="index_repete.html" class="pictures_files" title="Me.md">
|
||||
<img src="../pictures/files.jpg" class="pictures_files"
|
||||
alt="Me.md" width="80px" height="65px">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="repertory" id="Readme">
|
||||
<a href="../index_repete.html"> Readme </a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="www.chess.com/" >
|
||||
<img src="../pictures/pion.jpg" id="pion_container" target="_blank"
|
||||
alt="Plus.html" width="50px" height="72px">
|
||||
</a>
|
||||
</nav>
|
||||
</header>
|
||||
<body>
|
||||
<div class="readme container">
|
||||
<img src="../pictures/CV.pdf">
|
||||
</div>
|
||||
<a href="www.chess.com/" class="pictures" target="_blank" title="Rencontrons nous autrement :">
|
||||
<img src="../pictures/chessboard.jpg" class="pictures" alt="chessboard" width="auto" height="auto">
|
||||
</a>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,235 +0,0 @@
|
||||
<!--
|
||||
File: Maquette.html.html
|
||||
Owner: Thibaud La Riviere
|
||||
License: MIT License
|
||||
-->
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title> It's me </title>
|
||||
<link rel="shortcut icon" href="la_riviere-gilletthibaud-portfolio/pictures/files.jpg" type="image/x-icon">
|
||||
<link type="text/css" rel="stylesheet" href="../css/style.css">
|
||||
<link type="text/css" rel="stylesheet" href="../css/fonts.css">
|
||||
<link type="text/css" rel="stylesheet" href="../css/Projects/main_projects.css">
|
||||
<link type="text/css" rel="stylesheet" href="../css/Projects/style_Maquette.html.css">
|
||||
</head>
|
||||
<header>
|
||||
<nav>
|
||||
<div class="repertory-box">
|
||||
<ul id="repertory">
|
||||
<li class="repertory" id="About">
|
||||
<a> About </a>
|
||||
<div id="files_about" class="files-box">
|
||||
<ul class="files">
|
||||
<li>
|
||||
<a href="CV.css.html" class="pictures_files" title="CV.css">
|
||||
<img src="../pictures/files.jpg" class="pictures_files"
|
||||
alt="CV.css" width="80px" height="65px">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="repertory" id="Projects">
|
||||
<a> Projects </a>
|
||||
<div class="files-box" id="files_projects">
|
||||
<ul class="files">
|
||||
<li>
|
||||
<a href="ft_42.c.html" class="pictures_files" title="ft_42.css">
|
||||
<img src="../pictures/files.jpg" class="pictures_files"
|
||||
alt="ft_42.css" width="80px" height="65px">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="Maquette.html.html" class="pictures_files" title="Maquette.html">
|
||||
<img src="../pictures/files.jpg" class="pictures_files"
|
||||
alt="Maquette.html" width="80px" height="65px">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="Mont-Blanc_LDA.html" class="pictures_files" title="Mont-blanc (LDA)">
|
||||
<img src="../pictures/files.jpg" class="pictures_files"
|
||||
alt="Mont-blanc (LDA)" width="80px" height="65px">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="repertory" id="Contact">
|
||||
<a> Contact </a>
|
||||
<div class="files-box" id="files_contact">
|
||||
<ul class="files">
|
||||
<li>
|
||||
<a href="index_repete.html" class="pictures_files" title="Me.md">
|
||||
<img src="../pictures/files.jpg" class="pictures_files"
|
||||
alt="Me.md" width="80px" height="65px">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="repertory" id="Readme">
|
||||
<a href="../index_repete.html"> Readme </a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="www.chess.com/" >
|
||||
<img src="../pictures/pion.jpg" id="pion_container" target="_blank"
|
||||
alt="Plus.html" width="50px" height="72px">
|
||||
</a>
|
||||
</nav>
|
||||
</header>
|
||||
<body>
|
||||
<div class="readme container">
|
||||
<h1> <strong> # </strong> Bienvenue sur Mon Portfolio ! </h1>
|
||||
<p>
|
||||
Je suis <strong> ** </strong> Thibaud La Riviere <strong> ** </strong>,
|
||||
un étudiant en première année d'informatique passionné par le monde du développement et de la cuisine.
|
||||
Ce portfolio est une vitrine de mes compétences et de mes projets.
|
||||
N'hésitez pas à explorer et me contacter
|
||||
si vous avez des questions ou des opportunités de collaboration !
|
||||
</p>
|
||||
<h2> <strong> ## </strong> A propos de moi </h2>
|
||||
<p>
|
||||
Étant doté d'un fort intérêt pour les technologies informatiques,
|
||||
je suis à la recherche d'une formation qui me permettra
|
||||
de consolider mes connaissances et mes compétences dans ce domaine.
|
||||
Mon objectif est d'acquérir une solide formation pour être prêt à relever les défis de demain.
|
||||
</p>
|
||||
<h2> <strong> ## </strong> Projets </h2>
|
||||
<p> - [<em> <a href="ft_42.c.html">ft_42 </a>
|
||||
</em>](<strong> ./Projects/ft_42.c </strong>) : </p>
|
||||
<p>
|
||||
Il s'agit d'un concours d'informatique permettant d'accéder à l'école 42.
|
||||
</p>
|
||||
<p> - [<em> <a href="Maquette.html.html">Maquette du Portfoliol </a>
|
||||
</em>](<strong> ./projects/ft_/.//maquette.jpg </strong>) : </p>
|
||||
<p>
|
||||
Il s'agit de la maquette du portfolio que vous êtes en train de lire.
|
||||
</p>
|
||||
<p> - Et pleins d'autres </p>
|
||||
<h2> <strong> ## </strong> Contact </h2>
|
||||
<p> Pour me contacter, vous pouvez m'envoyer un e-mail à </p>
|
||||
<p>
|
||||
[ <em> <a href="../index_repete.html"> larivieregillet12@gmail.com </a>
|
||||
</em>] <br> (<mark> mailto:larivieregillet12@gmail.com </mark>)
|
||||
</p>
|
||||
</div>
|
||||
<div class="Maquette container">
|
||||
<p>
|
||||
<div class="indentation0">
|
||||
<mark><</mark> !DOCTYPE html <mark>></mark> <br>
|
||||
<mark><</mark> html lang="fr" <mark>></mark> <br>
|
||||
</div>
|
||||
<div class="indentation1">
|
||||
<mark><</mark> head <mark>></mark> <br>
|
||||
</div>
|
||||
<div class="indentation2">
|
||||
<mark><</mark> meta charset="UTF-8" <mark>></mark> <br>
|
||||
<mark><</mark> title <mark>></mark> Conception d'un Portfolio
|
||||
<mark><</mark> /title <mark>></mark> <br>
|
||||
</div>
|
||||
<div class="indentation1">
|
||||
<mark><</mark> /head <mark>></mark> <br>
|
||||
<mark><</mark> body <mark>></mark> <br>
|
||||
</div>
|
||||
<div class="indentation2">
|
||||
<mark><</mark> header <mark>></mark> <br>
|
||||
</div>
|
||||
<div class="indentation3">
|
||||
<mark><</mark> h1 <mark>></mark> Conception d'un Portfolio Explorer
|
||||
<mark><</mark> /h1 <mark>></mark> <br>
|
||||
</div>
|
||||
<div class="indentation2">
|
||||
<mark><</mark> /header <mark>></mark> <br>
|
||||
<mark><</mark> section <mark>></mark> <br>
|
||||
</div>
|
||||
<div class="indentation3">
|
||||
<mark><</mark> h2 <mark>></mark> 1. Organisation Intuitive des Contenus
|
||||
<mark><</mark> /h2 <mark>></mark> <br>
|
||||
<mark><</mark> pre <mark>></mark> <br>
|
||||
</div>
|
||||
</p>
|
||||
<div class="indentation3">
|
||||
<pre>
|
||||
La conception de mon Portfolio Explorer a débuté
|
||||
par une organisation logique des informations. En
|
||||
utilisantune structure familière basée sur un
|
||||
explorateur de fichiers que tout le monde utilise
|
||||
au quotidien, j'ai créé un environnement où les
|
||||
visiteurs se sentent instantanément à l'aise.
|
||||
Les catégories claires ("About", "Projects",
|
||||
"Contact") assurent une navigation intuitive.</pre>
|
||||
</div>
|
||||
<p>
|
||||
<div class="indentation3">
|
||||
<mark><</mark> /pre <mark>></mark> <br>
|
||||
<mark><</mark> h2 <mark>></mark> 2. Navigation Simplifiée
|
||||
<mark><</mark> /h2 <mark>></mark> <br>
|
||||
<mark><</mark> pre <mark>></mark> <br>
|
||||
</div>
|
||||
</p>
|
||||
<div class="indentation3">
|
||||
<pre>
|
||||
Les liens ont été soigneusement structurés pour
|
||||
simplifier la navigation. Chaque section du portfolio
|
||||
est accessible en un clic. L'utilisation de liens
|
||||
relatifs permet une compréhension facile, même pour
|
||||
ceux qui ne sont pas familiers avec les technologies web.</pre>
|
||||
</div>
|
||||
<p>
|
||||
<div class="indentation3">
|
||||
<mark><</mark> /pre <mark>></mark> <br>
|
||||
<mark><</mark> h2 <mark>></mark>
|
||||
3. Icônes Visuelles pour une Identification Instantanée
|
||||
<mark><</mark> /h2 <mark>></mark> <br>
|
||||
<mark><</mark> pre <mark>></mark> <br>
|
||||
</div>
|
||||
</p>
|
||||
<div class="indentation3">
|
||||
<pre>
|
||||
L'ajout d'icônes de dossiers apporte une dimension
|
||||
visuelle sympathique à chaque catégorie. Ces petites
|
||||
touches graphiques facilitent l'identification
|
||||
instantanée des sections, créant ainsi une expérience
|
||||
utilisateur plus intuitive. </pre>
|
||||
</div>
|
||||
<p>
|
||||
<div class="indentation3">
|
||||
<mark><</mark> /pre <mark>></mark> <br>
|
||||
<mark><</mark> h2 <mark>></mark>
|
||||
4. Accessibilité Universelle
|
||||
<mark><</mark> /h2> <mark>></mark> <br>
|
||||
<mark><</mark> pre <mark>></mark> <br>
|
||||
</div>
|
||||
</p>
|
||||
<div class="indentation3">
|
||||
<pre>
|
||||
L'objectif principal était de rendre mon portfolio
|
||||
explorer accessible à tous. En utilisant un modèle
|
||||
familier et une navigation simplifiée, j'ai créé un
|
||||
espace où chacun peut explorer mon travail aisément.
|
||||
L'interface conviviale assure une expérience agréable,
|
||||
que l'on soit technophile ou non. </pre>
|
||||
</div>
|
||||
<p>
|
||||
<div class="indentation3">
|
||||
<mark><</mark> /pre <mark>></mark> <br>
|
||||
</div>
|
||||
<div class="indentation2">
|
||||
<mark><</mark> /section <mark>></mark> <br>
|
||||
</div>
|
||||
<div class="indentation1">
|
||||
<mark><</mark> /body <mark>></mark> <br>
|
||||
</div>
|
||||
<div class="indentation0">
|
||||
<mark><</mark> /html> <br>
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
<a href="www.chess.com/" class="pictures" target="_blank" title="Rencontrons nous autrement :">
|
||||
<img src="../pictures/chessboard.jpg" class="pictures" alt="chessboard" width="auto" height="auto">
|
||||
</a>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,145 +0,0 @@
|
||||
<!--
|
||||
File: Mont-blanc_LDA.html
|
||||
Owner: Thibaud La Riviere
|
||||
License: MIT License
|
||||
-->
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title> It's me </title>
|
||||
<link rel="shortcut icon" href="la_riviere-gilletthibaud-portfolio/pictures/files.jpg" type="image/x-icon">
|
||||
<link type="text/css" rel="stylesheet" href="../css/style.css">
|
||||
<link type="text/css" rel="stylesheet" href="../css/fonts.css">
|
||||
<link type="text/css" rel="stylesheet" href="../css/Projects/main_projects.css">
|
||||
<link type="text/css" rel="stylesheet" href="../css/Projects/style_Mont-blanc_LDA.css">
|
||||
</head>
|
||||
<header>
|
||||
<nav>
|
||||
<div class="repertory-box">
|
||||
<ul id="repertory">
|
||||
<li class="repertory" id="About">
|
||||
<a> About </a>
|
||||
<div id="files_about" class="files-box">
|
||||
<ul class="files">
|
||||
<li>
|
||||
<a href="CV.css.html" class="pictures_files" title="CV.css">
|
||||
<img src="../pictures/files.jpg" class="pictures_files"
|
||||
alt="CV.css" width="80px" height="65px">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="repertory" id="Projects">
|
||||
<a> Projects </a>
|
||||
<div class="files-box" id="files_projects">
|
||||
<ul class="files">
|
||||
<li>
|
||||
<a href="ft_42.c.html" class="pictures_files" title="ft_42.css">
|
||||
<img src="../pictures/files.jpg" class="pictures_files"
|
||||
alt="ft_42.css" width="80px" height="65px">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="Maquette.html.html" class="pictures_files" title="Maquette.html">
|
||||
<img src="../pictures/files.jpg" class="pictures_files"
|
||||
alt="Maquette.html" width="80px" height="65px">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="Mont-Blanc_LDA.html" class="pictures_files" title="Mont-blanc (LDA)">
|
||||
<img src="../pictures/files.jpg" class="pictures_files"
|
||||
alt="Mont-blanc (LDA)" width="80px" height="65px">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="repertory" id="Contact">
|
||||
<a> Contact </a>
|
||||
<div class="files-box" id="files_contact">
|
||||
<ul class="files">
|
||||
<li>
|
||||
<a href="index_repete.html" class="pictures_files" title="Me.md">
|
||||
<img src="../pictures/files.jpg" class="pictures_files"
|
||||
alt="Me.md" width="80px" height="65px">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="repertory" id="Readme">
|
||||
<a href="../index_repete.html"> Readme </a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="www.chess.com/" >
|
||||
<img src="../pictures/pion.jpg" id="pion_container" target="_blank"
|
||||
alt="Plus.html" width="50px" height="72px">
|
||||
</a>
|
||||
</nav>
|
||||
</header>
|
||||
<body>
|
||||
<div class="readme container">
|
||||
<h1> <strong> # </strong> Bienvenue sur Mon Portfolio ! </h1>
|
||||
<p>
|
||||
Je suis <strong> ** </strong> Thibaud La Riviere <strong> ** </strong>,
|
||||
un étudiant en première année d'informatique passionné par le monde du développement et de la cuisine.
|
||||
Ce portfolio est une vitrine de mes compétences et de mes projets.
|
||||
N'hésitez pas à explorer et me contacter
|
||||
si vous avez des questions ou des opportunités de collaboration !
|
||||
</p>
|
||||
<h2> <strong> ## </strong> A propos de moi </h2>
|
||||
<p>
|
||||
Étant doté d'un fort intérêt pour les technologies informatiques,
|
||||
je suis à la recherche d'une formation qui me permettra
|
||||
de consolider mes connaissances et mes compétences dans ce domaine.
|
||||
Mon objectif est d'acquérir une solide formation pour être prêt à relever les défis de demain.
|
||||
</p>
|
||||
<h2> <strong> ## </strong> Projets </h2>
|
||||
<p> - [<em> <a href="ft_42.c.html">ft_42 </a>
|
||||
</em>](<strong> ./Projects/ft_42.c </strong>) : </p>
|
||||
<p>
|
||||
Il s'agit d'un concours d'informatique permettant d'accéder à l'école 42.
|
||||
</p>
|
||||
<p> - [<em> <a href="Maquette.html.html">Maquette du Portfoliol </a>
|
||||
</em>](<strong> ./projects/ft_/.//maquette.jpg </strong>) : </p>
|
||||
<p>
|
||||
Il s'agit de la maquette du portfolio que vous êtes en train de lire.
|
||||
</p>
|
||||
<p> - Et pleins d'autres </p>
|
||||
<h2> <strong> ## </strong> Contact </h2>
|
||||
<p> Pour me contacter, vous pouvez m'envoyer un e-mail à </p>
|
||||
<p>
|
||||
[ <em> <a href="../index.html"> larivieregillet12@gmail.com </a>
|
||||
</em>] <br> (<mark> mailto:larivieregillet12@gmail.com </mark>)
|
||||
</p>
|
||||
</div>
|
||||
<div class="mont_blanc container">
|
||||
<p>
|
||||
<img src="../pictures/mont_blanc.jpg" alt="Mont-blanc pastry" width="auto" height="auto">
|
||||
Début du Programme : Recette du Mont Blanc <br> <br>
|
||||
// Ingrédients <br>
|
||||
purée_de_marrons <- 500g <br>
|
||||
crème_liquide <- 250ml <br>
|
||||
sucre_en_poudre <- 2 cuillères_à_soupe <br>
|
||||
extrait_de_vanille <- 1 cuillère_à_café <br>
|
||||
meringues <- 200g <br>
|
||||
chantilly <- quantité_suffisante <br>
|
||||
marrons_glacés <- en_option <br><br>
|
||||
// Étapes <br>
|
||||
créer_crème_de_marrons(purée_de_marrons, extrait_de_vanille) <br>
|
||||
préparer_chantilly(crème_liquide, sucre_en_poudre) <br>
|
||||
écraser_meringues (meringues) <br>
|
||||
assembler_mont_blanc(crème_de_marrons, meringues, chantilly) <br>
|
||||
décorer_avec_marrons_glacés (marrons_glacés) <br> <br>
|
||||
Servir_Mont_Blanc(froid) <br> <br>
|
||||
Fin du Programme <br>
|
||||
</p>
|
||||
</div>
|
||||
<a href="www.chess.com/" class="pictures" target="_blank" title="Rencontrons nous autrement :">
|
||||
<img src="../pictures/chessboard.jpg" class="pictures" alt="chessboard" width="auto" height="auto">
|
||||
</a>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,153 +0,0 @@
|
||||
<!--
|
||||
File: ft_42.c.html
|
||||
Owner: Thibaud La Riviere
|
||||
License: MIT License
|
||||
-->
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title> It's me </title>
|
||||
<link rel="shortcut icon" href="../pictures/files.jpg" type="image/x-icon">
|
||||
<link type="text/css" rel="stylesheet" href="../css/style.css">
|
||||
<link type="text/css" rel="stylesheet" href="../css/fonts.css">
|
||||
<link type="text/css" rel="stylesheet" href="../css/Projects/main_projects.css">
|
||||
<link type="text/css" rel="stylesheet" href="../css/Projects/style_ft_42.c.css">
|
||||
</head>
|
||||
<header>
|
||||
<nav>
|
||||
<div class="repertory-box">
|
||||
<ul id="repertory">
|
||||
<li class="repertory" id="About">
|
||||
<a> A_propos </a>
|
||||
<div id="files_about" class="files-box">
|
||||
<ul class="files">
|
||||
<li>
|
||||
<a href="CV.css.html" class="pictures_files" title="CV.css">
|
||||
<img src="../pictures/files.jpg" class="pictures_files"
|
||||
alt="CV.css" width="80px" height="65px">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="repertory" id="Projects">
|
||||
<a> Projets </a>
|
||||
<div class="files-box" id="files_projects">
|
||||
<ul class="files">
|
||||
<li>
|
||||
<a href="ft_42.c.html" class="pictures_files" title="ft_42.css">
|
||||
<img src="../pictures/files.jpg" class="pictures_files"
|
||||
alt="gantt.c" width="80px" height="65px">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="Maquette.html.html" class="pictures_files" title="Maquette.html">
|
||||
<img src="../pictures/files.jpg" class="pictures_files"
|
||||
alt="Maquette.html" width="80px" height="65px">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="Mont-Blanc_LDA.html" class="pictures_files" title="Mont-blanc (LDA)">
|
||||
<img src="../pictures/files.jpg" class="pictures_files"
|
||||
alt="Mont-blanc (LDA)" width="80px" height="65px">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="repertory" id="Contact">
|
||||
<a> Contact </a>
|
||||
<div class="files-box" id="files_contact">
|
||||
<ul class="files">
|
||||
<li>
|
||||
<a href="index_repete.html" class="pictures_files" title="Me.md">
|
||||
<img src="../pictures/files.jpg" class="pictures_files"
|
||||
alt="Me.md" width="80px" height="65px">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="repertory" id="Readme">
|
||||
<a href="../index_repete.html"> Readme </a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="www.chess.com/" >
|
||||
<img src="../pictures/pion.jpg" id="pion_container" target="_blank"
|
||||
alt="Plus.html" width="50px" height="72px">
|
||||
</a>
|
||||
</nav>
|
||||
</header>
|
||||
<body>
|
||||
<div class="readme container">
|
||||
<h1> <strong> # </strong> Bienvenue sur Mon Portfolio ! </h1>
|
||||
<p>
|
||||
Je suis <strong> ** </strong> Thibaud La Riviere <strong> ** </strong>,
|
||||
un étudiant en première année d'informatique passionné par le monde du développement et de la cuisine.
|
||||
Ce portfolio est une vitrine de mes compétences et de mes projets.
|
||||
N'hésitez pas à explorer et me contacter
|
||||
si vous avez des questions ou des opportunités de collaboration !
|
||||
</p>
|
||||
<h2> <strong> ## </strong> A propos de moi </h2>
|
||||
<p>
|
||||
Étant doté d'un fort intérêt pour les technologies informatiques,
|
||||
je suis à la recherche d'une formation qui me permettra
|
||||
de consolider mes connaissances et mes compétences dans ce domaine.
|
||||
Mon objectif est d'acquérir une solide formation pour être prêt à relever les défis de demain.
|
||||
</p>
|
||||
<h2> <strong> ## </strong> Projets </h2>
|
||||
<p> - [<em> <a href="ft_42.c.html">ft_42 </a>
|
||||
</em>](<strong> ./Projects/ft_42.c </strong>) : </p>
|
||||
<p>
|
||||
Il s'agit d'un concours d'informatique permettant d'accéder à l'école 42.
|
||||
</p>
|
||||
<p> - [<em> <a href="Maquette.html.html">Maquette du Portfoliol </a>
|
||||
</em>](<strong> ./projects/ft_/.//maquette.jpg </strong>) : </p>
|
||||
<p>
|
||||
Il s'agit de la maquette du portfolio que vous êtes en train de lire.
|
||||
</p>
|
||||
<p> - Et pleins d'autres </p>
|
||||
<h2> <strong> ## </strong> Contact </h2>
|
||||
<p> Pour me contacter, vous pouvez m'envoyer un e-mail à </p>
|
||||
<p>
|
||||
[ <em> <a href="../index.html"> larivieregillet12@gmail.com </a>
|
||||
</em>] <br> (<mark> mailto:larivieregillet12@gmail.com </mark>)
|
||||
</p>
|
||||
</div>
|
||||
<div class="forty-two container">
|
||||
<img src="../pictures/42.jpg" alt="42 logo" width="auto" height="auto">
|
||||
<h1> <mark>#</mark> include <mark><</mark> unistd.h <mark>></mark> </h1>
|
||||
<h3> <function> printf </function>
|
||||
(" L'École 42 : Une Aventure Éducative Exceptionnelle "); </h3>
|
||||
<p> /<mark>*</mark> <br>
|
||||
L'école 42 offre une expérience éducative exceptionnelle,
|
||||
repoussant les frontières de l'apprentissage traditionnel.
|
||||
Ici, les étudiants sont immergés dans le monde de la programmation et de la technologie,
|
||||
résolvant des défis complexes et collaborant sur des projets innovants.
|
||||
<br><mark>*</mark>/
|
||||
</p>
|
||||
<h3> <function> printf </function> (" Approche Pédagogique Unique "); </h3>
|
||||
<p> /<mark>*</mark> <br>
|
||||
Cette approche pédagogique unique permet aux apprenants de développer
|
||||
leurs compétences techniques tout en encourageant la créativité et le travail d'équipe.
|
||||
L'école 42 favorise également un environnement inclusif où la diversité est célébrée.
|
||||
<br><mark>*</mark>/
|
||||
</p>
|
||||
<h3> <function> printf </function> (" Cultiver l'Innovation et l'Inclusivité "); </h3>
|
||||
<p> /<mark>*</mark> <br>
|
||||
Les étudiants sont encouragés à explorer, à échouer et à réussir,
|
||||
cultivant ainsi des compétences essentielles pour
|
||||
l'industrie technologique en constante évolution.
|
||||
C'est un lieu où l'éducation devient une aventure stimulante
|
||||
et où les futurs innovateurs trouvent l'inspiration pour façonner
|
||||
le monde numérique de demain.
|
||||
<br><mark>*</mark>/
|
||||
</p>
|
||||
</div>
|
||||
<a href="www.chess.com/" class="pictures" target="_blank" title="Rencontrons nous autrement :">
|
||||
<img src="../pictures/chessboard.jpg" class="pictures" alt="chessboard" width="auto" height="auto">
|
||||
</a>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,121 +0,0 @@
|
||||
<!--
|
||||
File: index_repete.html
|
||||
Owner: Thibaud La Riviere
|
||||
License: MIT License
|
||||
-->
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title> It's me </title>
|
||||
<link rel="shortcut icon" href="pictures/files.jpg" type="image/x-icon">
|
||||
<link type="text/css" rel="stylesheet" href="css/style.css">
|
||||
<link type="text/css" rel="stylesheet" href="css/fonts.css">
|
||||
</head>
|
||||
<header>
|
||||
<nav>
|
||||
<div class="repertory-box">
|
||||
<ul id="repertory">
|
||||
<li class="repertory" id="About">
|
||||
<a> About </a>
|
||||
<div id="files_about" class="files-box">
|
||||
<ul class="files">
|
||||
<li>
|
||||
<a href="html/CV.css.html" class="pictures_files" title="CV.css">
|
||||
<img src="pictures/files.jpg" class="pictures_files"
|
||||
alt="CV.css" width="80px" height="65px">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="repertory" id="Projects">
|
||||
<a> Projects </a>
|
||||
<div class="files-box" id="files_projects">
|
||||
<ul class="files">
|
||||
<li>
|
||||
<a href="html/ft_42.c.html" class="pictures_files" title="ft_42.css">
|
||||
<img src="pictures/files.jpg" class="pictures_files"
|
||||
alt="ft_42.css" width="80px" height="65px">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="html/Maquette.html.html" class="pictures_files" title="Maquette.html">
|
||||
<img src="pictures/files.jpg" class="pictures_files"
|
||||
alt="Maquette.html" width="80px" height="65px">
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="html/Mont-Blanc_LDA.html" class="pictures_files" title="Mont-blanc (LDA)">
|
||||
<img src="pictures/files.jpg" class="pictures_files"
|
||||
alt="Mont-blanc (LDA)" width="80px" height="65px">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="repertory" id="Contact">
|
||||
<a> Contact </a>
|
||||
<div class="files-box" id="files_contact">
|
||||
<ul class="files">
|
||||
<li>
|
||||
<a href="index_repete.html" class="pictures_files" title="Me.md">
|
||||
<img src="pictures/files.jpg" class="pictures_files"
|
||||
alt="Me.md" width="80px" height="65px">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="repertory" id="Readme">
|
||||
<a href="index_repete.html"> Readme </a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="www.chess.com/" >
|
||||
<img src="pictures/pion.jpg" id="pion_container" target="_blank"
|
||||
alt="Plus.html" width="50px" height="72px">
|
||||
</a>
|
||||
</nav>
|
||||
</header>
|
||||
<body>
|
||||
<div class="readme container">
|
||||
<h1> <strong> # </strong> Bienvenue sur Mon Portfolio ! </h1>
|
||||
<p>
|
||||
Je suis <strong> ** </strong> Thibaud La Riviere <strong> ** </strong>,
|
||||
un étudiant en première année d'informatique passionné par le monde du développement et de la cuisine.
|
||||
Ce portfolio est une vitrine de mes compétences et de mes projets.
|
||||
N'hésitez pas à explorer et me contacter
|
||||
si vous avez des questions ou des opportunités de collaboration !
|
||||
</p>
|
||||
<h2> <strong> ## </strong> A propos de moi </h2>
|
||||
<p>
|
||||
Étant doté d'un fort intérêt pour les technologies informatiques,
|
||||
je suis à la recherche d'une formation qui me permettra
|
||||
de consolider mes connaissances et mes compétences dans ce domaine.
|
||||
Mon objectif est d'acquérir une solide formation pour être prêt à relever les défis de demain.
|
||||
</p>
|
||||
<h2> <strong> ## </strong> Projets </h2>
|
||||
<p> - [<em> <a href="html/ft_42.c.html">ft_42 </a>
|
||||
</em>](<strong> ./Projects/ft_42.c </strong>) : </p>
|
||||
<p>
|
||||
Il s'agit d'un concours d'informatique permettant d'accéder à l'école 42.
|
||||
</p>
|
||||
<p> - [<em> <a href="html/Maquette.html.html">Maquette du Portfoliol </a>
|
||||
\</em>](<strong> ./projects/ft_/.//maquette.jpg </strong>) : </p>
|
||||
<p>
|
||||
Il s'agit de la maquette du portfolio que vous êtes en train de lire.
|
||||
</p>
|
||||
<p> - Et pleins d'autres </p>
|
||||
<h2> <strong> ## </strong> Contact </h2>
|
||||
<p> Pour me contacter, vous pouvez m'envoyer un e-mail à </p>
|
||||
<p>
|
||||
[ <em> <a href="index_repete.html"> larivieregillet12@gmail.com </a> </em>]
|
||||
<br> (<mark> mailto:larivieregillet12@gmail.com </mark>)
|
||||
</p>
|
||||
</div>
|
||||
<a href="www.chess.com/" class="pictures" target="_blank" title="Rencontrons nous autrement :">
|
||||
<img src="pictures/chessboard.jpg" class="pictures" alt="chessboard" width="auto" height="auto">
|
||||
</a>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
Binary file not shown.
@ -0,0 +1,122 @@
|
||||
document.addEventListener('DOMContentLoaded', function ()
|
||||
{
|
||||
const globalSections = document.getElementById('global-sections');
|
||||
const subSections = document.getElementById('sub-sections');
|
||||
const contentDisplay = document.getElementById('content-display');
|
||||
|
||||
const sectionsData =
|
||||
{
|
||||
about:
|
||||
{
|
||||
name: 'About',
|
||||
items: []
|
||||
},
|
||||
projects:
|
||||
{
|
||||
name: 'Projects',
|
||||
items: [
|
||||
{
|
||||
filename: 'ft_42',
|
||||
filextension: '.css',
|
||||
title: 'ft_42.css Project',
|
||||
content: 'Contenu du projet ft_42.css',
|
||||
repo: 'https://github.com/user/ft_42'
|
||||
},
|
||||
{
|
||||
filename: 'Maquette',
|
||||
filextension: '.html',
|
||||
title: 'Maquette Project',
|
||||
content: 'Contenu du projet Maquette.html',
|
||||
repo: 'https://github.com/user/Maquette'
|
||||
},
|
||||
{
|
||||
filename: 'Mont-blanc',
|
||||
filextension: '.LDA',
|
||||
title: 'Mont-blanc (LDA) Project',
|
||||
content: 'Contenu du projet Mont-blanc (LDA)',
|
||||
repo: 'https://github.com/user/Mont-blanc'
|
||||
}
|
||||
]
|
||||
},
|
||||
contact:
|
||||
{
|
||||
name: 'Contact',
|
||||
items: []
|
||||
},
|
||||
readme:
|
||||
{
|
||||
name: 'Readme',
|
||||
items: [
|
||||
{
|
||||
filename: 'README',
|
||||
filextension: '.md',
|
||||
title: 'README',
|
||||
content: 'Contenu du README.md',
|
||||
repo: 'https://github.com/user/repo'
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
Object.keys(sectionsData).forEach(key => {
|
||||
const section = sectionsData[key];
|
||||
const li = document.createElement('li');
|
||||
li.classList.add('section');
|
||||
li.setAttribute('data-section', key);
|
||||
li.innerHTML = `<a href="#${key}" class="nav-link">${section.name}</a>`;
|
||||
globalSections.appendChild(li);
|
||||
});
|
||||
|
||||
const sectionElements = document.querySelectorAll('#global-sections .section');
|
||||
|
||||
function displaySectionContent(sectionName)
|
||||
{
|
||||
document.querySelector('.nav-link.active')?.classList.remove('active');
|
||||
document.querySelector(`[data-section="${sectionName}"] .nav-link`).classList.add('active');
|
||||
|
||||
if (sectionName === 'readme')
|
||||
{
|
||||
subSections.innerHTML = '';
|
||||
}
|
||||
|
||||
subSections.innerHTML = '';
|
||||
sectionsData[sectionName].items.forEach(item => {
|
||||
const li = document.createElement('li');
|
||||
li.classList.add('file-item');
|
||||
li.innerHTML = `
|
||||
<img src="thibaudla_riviere-gillet-portfolio/pictures/files/files.png" alt="${item.filename}${item.filextension}" class="file-img" data-content="${item.content}" data-title="${item.title}" data-repo="${item.repo}">
|
||||
<br>
|
||||
<a href="#" class="sub-link" data-content="${item.content}" data-title="${item.title}" data-repo="${item.repo}">${item.filename}${item.filextension}</a>
|
||||
`;
|
||||
subSections.appendChild(li);
|
||||
});
|
||||
}
|
||||
|
||||
sectionElements.forEach(section => {
|
||||
section.addEventListener('click', function ()
|
||||
{
|
||||
const sectionName = this.getAttribute('data-section');
|
||||
displaySectionContent(sectionName);
|
||||
});
|
||||
});
|
||||
|
||||
subSections.addEventListener('click', function (e)
|
||||
{
|
||||
if (e.target.classList.contains('sub-link') || e.target.classList.contains('file-img'))
|
||||
{
|
||||
e.preventDefault();
|
||||
const content = e.target.getAttribute('data-content');
|
||||
const title = e.target.getAttribute('data-title');
|
||||
const repo = e.target.getAttribute('data-repo');
|
||||
contentDisplay.innerHTML = `
|
||||
<div class="sheet">
|
||||
<h1>${title}</h1>
|
||||
<p>${content}</p>
|
||||
<p><a href="${repo}" target="_blank">Repository</a></p>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
});
|
||||
|
||||
displaySectionContent('readme');
|
||||
});
|
||||
|
Before Width: | Height: | Size: 35 KiB |
|
Before Width: | Height: | Size: 278 KiB |
|
Before Width: | Height: | Size: 561 KiB |
|
Before Width: | Height: | Size: 1.2 MiB |
|
Before Width: | Height: | Size: 82 KiB |
|
Before Width: | Height: | Size: 86 KiB |
|
Before Width: | Height: | Size: 1.6 MiB |
|
Before Width: | Height: | Size: 22 KiB |
|
After Width: | Height: | Size: 76 KiB |
|
Before Width: | Height: | Size: 50 KiB |
|
Before Width: | Height: | Size: 312 KiB |
|
Before Width: | Height: | Size: 145 KiB |
Loading…
Reference in new issue