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

2
components/AppError.vue
View file

@ -74,7 +74,7 @@
'emoticon' minmax(var(--h1-font-height), auto)
'.' 5rem
'button' auto
/ minmax(30%, auto);
/ minmax(50%, auto);
place-content: center;
place-items: center;
gap: 0.5rem;

105
components/ProjectCard.vue Normal file
View file

@ -0,0 +1,105 @@
<template>
<article class="project-card">
<div class="project-card__screenshot">
<a :href="url" target="_blank" title=""></a>
<img :src="screenshot">
</div>
<div class="project-card__content">
<h3>{{ title }}</h3>
<p>{{ description }}</p>
</div>
</article>
</template>
<script setup>
// --------------------------------------------------
// DATA
// --------------------------------------------------
defineProps({
title: String,
url: String,
screenshot: String,
description: String
});
</script>
<style lang="scss" scoped>
// --------------------------------------------------
// STYLE
// --------------------------------------------------
.project-card {
display: grid;
place-items: start;
&:nth-of-type(odd) {
align-self: flex-start;
grid-template-columns: [screenshot-start] 4fr [content-start] 1fr [screenshot-end] 2fr [content-end];
text-align: end;
}
&:nth-of-type(even) {
align-self: flex-end;
grid-template-columns: [content-start] 2fr [screenshot-start] 1fr [content-end] 4fr [screenshot-end];
}
&__screenshot {
grid-area: screenshot;
position: relative;
display: flex;
a {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 10px;
// background-color: var(--accent-color-transparent);
// backdrop-filter: grayscale(100%) contrast(120%);
backdrop-filter: brightness(90%);
transition:
background-color 200ms ease-in-out,
backdrop-filter 200ms ease-in-out;
&:hover,
&:focus,
&:active {
// background-color: transparent;
backdrop-filter: none;
}
}
img {
border-radius: 10px;
}
}
&__content {
grid-area: content;
z-index: 1;
display: flex;
flex-direction: column;
gap: 0.5rem;
position: sticky;
top: 0;
p {
padding: 1rem;
color: var(--primary-color);
background-color: var(--secondary-color-transparent);
border-radius: 5px;
backdrop-filter: blur(2px);
box-shadow: var(--regular-box-shadow);
}
}
}
</style>

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>