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

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>