81 lines
2.5 KiB
Vue
81 lines
2.5 KiB
Vue
<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>
|