host/paulnicoue
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add projects section

Browse source
This commit is contained in:
Paul Nicoué 2023-02-21 11:52:22 +01:00
parent a0d337708e
commit 6c9c179283
8 changed files with 210 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

81
components/ProjectsSection.vue Normal file
View file

@ -0,0 +1,81 @@
<template>
<section class="projects">
<h2 class="projects__title">Projets sélectionnés</h2>
<div class="projects__cards">
<ProjectCard
v-for="project in projects"
:key="project.title"
:title="project.title"
:url="project.url"
:screenshot="project.screenshot"
:description="project.description"
/>
</div>
</section>
</template>
<script setup>
// --------------------------------------------------
// DATA
// --------------------------------------------------
const projects = [
{
title: 'Xiao Wang',
url: 'https://xiaowang.fr',
screenshot: '/images/xiao-wang-screenshot-01.png',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Felis imperdiet proin fermentum leo vel.'
},
{
title: 'Danao',
url: 'https://www.danao.fr',
screenshot: '/images/danao-screenshot-01.png',
description: 'Curabitur gravida arcu ac tortor. Id consectetur purus ut faucibus pulvinar elementum integer enim neque. Sit amet dictum sit amet justo donec enim diam vulputate'
},
{
title: 'LibreAudio',
url: 'https://libreaudio.fr',
screenshot: '/images/libreaudio-screenshot-01.png',
description: 'Tortor condimentum lacinia quis vel eros donec ac odio. Odio facilisis mauris sit amet massa vitae tortor condimentum lacinia. Egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate.'
}
];
</script>
<style lang="scss" scoped>
// --------------------------------------------------
// STYLE
// --------------------------------------------------
.projects {
@include large-section;
// position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 4rem;
// &::after {
// content: '';
// position: absolute;
// bottom: 0;
// left: 10%;
// width: 80%;
// height: 1px;
// background-color: #525252;
// }
&__cards {
display: flex;
flex-direction: column;
align-items: center;
gap: 4rem;
width: 100%;
}
}
</style>