vhaudiquet/vhaudiquet.fr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added 'projects' category to site :)
pipeline / build-and-push-images (push) Successful in 35s
Details

Browse Source
This commit is contained in:
Valentin Haudiquet
2025-06-19 18:52:07 +02:00
parent e726de5a30
commit 847de104f6
5 changed files with 169 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/blade-icon.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.6 KiB

src/assets/material-symbols--list-alt-outline.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M8 17q.425 0 .713-.288T9 16t-.288-.712T8 15t-.712.288T7 16t.288.713T8 17m0-4q.425 0 .713-.288T9 12t-.288-.712T8 11t-.712.288T7 12t.288.713T8 13m0-4q.425 0 .713-.288T9 8t-.288-.712T8 7t-.712.288T7 8t.288.713T8 9m3 8h6v-2h-6zm0-4h6v-2h-6zm0-4h6V7h-6zM5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h14q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21zm0-2h14V5H5zM5 5v14z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 494 B

src/index.html
+3 -3
View File
@@ -30,9 +30,9 @@
<!-- Links --> <!-- Links -->
<div id="links-div"> <div id="links-div">
<a href="/blog" style="grid-column: 1;"> <a href="/projects" style="grid-column: 1;">
<img src="/assets/fluent-mdl2_blog.svg" class="link-image"/> <img src="/assets/material-symbols--list-alt-outline.svg" class="link-image"/>
<p class="link-text">Blog</p> <p class="link-text">Projects</p>
</a> </a>
<a href="https://github.com/vhaudiquet/" style="grid-column: 2;"> <a href="https://github.com/vhaudiquet/" style="grid-column: 2;">
src/projects/index.html
+85
View File
@@ -0,0 +1,85 @@
<!DOCTYPE html>
<head>
<title>Valentin Haudiquet</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="/stylesheets/style.css">
<link rel="icon" type="image/png" href="/assets/favicon.ico_256x256.png">
<!-- Inter font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<!-- Header -->
<div id="header-div">
<img src="/assets/photo_web.JPG" id="header-img"/>
<div id="header-text-container">
<h1>Valentin Haudiquet</h1>
<h4>Computer science student at ENS Rennes</h4>
<p id="header-paragraph">Interested in operating systems, virtualization, computer architecture, embedded systems</p>
</div>
</div>
<!-- Projects -->
<div id="projects-div">
<!-- BuildPath -->
<a href="https://buildpath.win">
<div class="project-div">
<h2 class="project-title">BuildPath</h2>
<img class="project-img" src="https://buildpath.win/favicon.svg"/>
<h3 class="project-link">https://buildpath.win</h3>
<p class="project-desc">a tool for League of Legends champions runes and build paths</p>
</div>
</a>
<!-- homeprod -->
<a href="https://github.com/vhaudiquet/homeprod">
<div class="project-div">
<h2 class="project-title">homeprod</h2>
<img class="project-img" src="https://vhaudiquet.fr/public/github_assets/homeprod/p330_sff.png"/>
<h3 class="project-link" style="display: flex;">
<img src="/assets/github-mark.png" width="16px" style="margin: auto; display: block; margin-right: 4px;"/>
vhaudiquet/homeprod
</h3>
<p class="project-desc">personal home production environment</p>
</div>
</a>
<!-- BladePlayer -->
<a href="https://github.com/vhaudiquet/BladePlayer">
<div class="project-div">
<h2 class="project-title">Blade Player</h2>
<img class="project-img" src="/assets/blade-icon.png"/>
<h3 class="project-link" style="display: flex;">
<img src="/assets/github-mark.png" width="16px" style="margin: auto; display: block; margin-right: 4px;"/>
vhaudiquet/BladePlayer
</h3>
<p class="project-desc">android music player that plays from multiple sources</p>
</div>
</a>
<!-- vhaudiquet.fr -->
<a href="https://vhaudiquet.fr">
<div class="project-div">
<h2 class="project-title">vhaudiquet.fr</h2>
<img class="project-img" src="/assets/favicon.ico_256x256.png"/>
<h3 class="project-link" style="display: flex;">
https://vhaudiquet.fr
</h3>
<p class="project-desc">this website: my personal website with information, CV, projects</p>
</div>
</a>
</div>
</div>
</body>
src/stylesheets/style.css
+80
View File
@@ -130,6 +130,73 @@ strong {
font-size: 26px; font-size: 26px;
} }
#projects-div {
display: grid;
grid-auto-flow: column;
width: fit-content;
margin: auto;
margin-top: 100px;
column-gap: 40px;
}
.project-div {
max-width: 250px;
width: 250px;
height: 300px;
background-color: #FEFEFE;
border-radius: 12px;
border: 1px solid #E0E0E0;
box-shadow: 5px 2px 2px #E0E0E0;
padding: 10px;
}
.project-div:hover {
background-color: #EEEEEE;
}
.project-title {
width: fit-content;
margin: auto;
font-weight: 400;
font-size: 30px;
color: black;
}
.project-img {
max-width: 140px;
max-height: 140px;
/* width: fit-content; */
margin: auto;
display: block;
margin-top: 10px;
}
.project-link {
font-size: 12px;
width: fit-content;
font-weight: 400;
margin: auto;
margin-top: 8px;
color: black;
}
.project-desc {
font-size: 16px;
margin-left: 5px;
margin-top: 30px;
font-weight: 300;
color: black;
text-align: center;
}
@media only screen and (max-width: 1000px) { @media only screen and (max-width: 1000px) {
/* Tablet, small screens version */ /* Tablet, small screens version */
#header-img { #header-img {
@@ -163,6 +230,19 @@ strong {
margin: auto; margin: auto;
margin-top: 100px; margin-top: 100px;
} }
#projects-div {
grid-auto-flow: row;
row-gap: 40px;
grid-template-columns: repeat(2, 270px);
}
}
@media only screen and (max-width: 650px) {
#projects-div {
margin-top: 50px;
grid-template-columns: repeat(1, 270px);
}
} }
@media only screen and (max-width: 450px) { @media only screen and (max-width: 450px) {