151 lines
3.5 KiB
Vue
151 lines
3.5 KiB
Vue
<script setup lang="ts">
|
|
useSeoMeta({
|
|
title: 'Projects',
|
|
})
|
|
defineOgImageComponent('Site', {
|
|
title: 'Projects'
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<HeaderBig />
|
|
|
|
<!-- 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/img/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/img/blade-icon.png"/>
|
|
<h3 class="project-link" style="display: flex;">
|
|
<img src="~/assets/img/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/img/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>
|
|
|
|
</template>
|
|
|
|
<style lang="css" scoped>
|
|
#projects-div {
|
|
display: grid;
|
|
grid-auto-flow: column;
|
|
width: fit-content;
|
|
margin: auto;
|
|
|
|
margin-top: 100px;
|
|
|
|
column-gap: 40px;
|
|
}
|
|
|
|
.project-div {
|
|
max-width: 280px;
|
|
width: 280px;
|
|
height: 350px;
|
|
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) {
|
|
#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);
|
|
}
|
|
}
|
|
|
|
</style> |