100 lines
3.5 KiB
Vue
100 lines
3.5 KiB
Vue
<template>
|
|
|
|
<section class="projects">
|
|
<h2 class="projects__title">Projets sélectionnés</h2>
|
|
<div class="projects__items">
|
|
<Project
|
|
v-for="project in projects"
|
|
:key="project.title"
|
|
:title="project.title"
|
|
:url="project.url"
|
|
:image="project.image"
|
|
:description="project.description"
|
|
:keywords="project.keywords"
|
|
/>
|
|
</div>
|
|
</section>
|
|
|
|
</template>
|
|
|
|
<script setup>
|
|
|
|
// --------------------------------------------------
|
|
// DATA
|
|
// --------------------------------------------------
|
|
|
|
const projects = [
|
|
{
|
|
title: 'Xiao Wang',
|
|
url: 'https://xiaowang.fr',
|
|
image: {
|
|
'small': '/images/xiao-wang-screenshot-640px.png',
|
|
'medium': '/images/xiao-wang-screenshot-1280px.png',
|
|
'large': '/images/xiao-wang-screenshot-1920px.png',
|
|
},
|
|
description: `Conception d'un site portfolio doté d'une interface d'administration pour l'artiste plasticienne et performeuse Xiao Wang. Définition de l'expérience de navigation et de la charte graphique en concertation avec l'artiste. Développement front-end et back-end.`,
|
|
keywords: ['HTML', 'CSS', 'Javascript', 'PHP', 'Kirby']
|
|
},
|
|
{
|
|
title: 'Danao',
|
|
url: 'https://www.danao.fr',
|
|
image: {
|
|
'small': '/images/danao-screenshot-640px.png',
|
|
'medium': '/images/danao-screenshot-1280px.png',
|
|
'large': '/images/danao-screenshot-1920px.png',
|
|
},
|
|
description: `Refonte partielle du site web de la marque Danao pour le compte de l'<a href="https://148.fr" target="_blank">agence de communication digitale 148</a>. Intégration web et développement front-end à partir des maquettes graphiques réalisées par l'agence et dans le respect de l'identité visuelle de la marque.`,
|
|
keywords: ['HTML', 'CSS', 'Javascript', 'Wordpress']
|
|
},
|
|
{
|
|
title: 'LibreAudio',
|
|
url: 'https://libreaudio.fr',
|
|
image: {
|
|
'small': '/images/libreaudio-screenshot-640px.png',
|
|
'medium': '/images/libreaudio-screenshot-1280px.png',
|
|
'large': '/images/libreaudio-screenshot-1920px.png',
|
|
},
|
|
description: `Création d'une bibliothèque de livres audio gratuite, libre et se voulant accessible aux personnes en situation de handicap. Définition de l'expérience de navigation et de la charte graphique, développement front-end et back-end, enrichissement de la base de données.`,
|
|
keywords: ['HTML', 'CSS', 'Javascript', 'PHP', 'Symfony', 'Open source']
|
|
}
|
|
];
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
// --------------------------------------------------
|
|
// STYLE
|
|
// --------------------------------------------------
|
|
|
|
.projects {
|
|
@include large-section;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 4rem;
|
|
text-align: center;
|
|
|
|
&__title {
|
|
margin: 0 2rem;
|
|
}
|
|
|
|
&__items {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 4rem;
|
|
width: 100%;
|
|
}
|
|
|
|
@media screen and (min-width: $tablet-media-query) {
|
|
gap: 6rem;
|
|
|
|
&__items {
|
|
gap: 6rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
</style>
|