<script setup lang="ts">
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>