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

Edit projects section

Browse source
This commit is contained in:
Paul Nicoué 2023-03-03 12:00:04 +01:00
parent 6c9c179283
commit 51fe86d804
13 changed files with 380 additions and 208 deletions
Download patch file Download diff file Expand all files Collapse all files

39
components/ProjectsSection.vue
View file

@ -2,14 +2,15 @@
<section class="projects">
<h2 class="projects__title">Projets sélectionnés</h2>
<div class="projects__cards">
<ProjectCard
<div class="projects__items">
<Project
v-for="project in projects"
:key="project.title"
:title="project.title"
:url="project.url"
:screenshot="project.screenshot"
:description="project.description"
:keywords="project.keywords"
/>
</div>
</section>
@ -27,19 +28,22 @@
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.'
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',
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'
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',
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.'
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']
}
];
@ -53,29 +57,32 @@
.projects {
@include large-section;
// position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 4rem;
text-align: center;
// &::after {
// content: '';
// position: absolute;
// bottom: 0;
// left: 10%;
// width: 80%;
// height: 1px;
// background-color: #525252;
// }
&__title {
margin: 0 2rem;
}
&__cards {
&__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>