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

121
components/ProjectData.vue Normal file
View file

@ -0,0 +1,121 @@
<template>
<div class="project-data">
<div class="project-data__header">
<h3>{{ title }}</h3>
<a :href="url" target="_blank" :title="`Accéder au site web de ${title}`">
<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(1.2, 0, 0, 1.2, -2.400001, -2.400001)">
<path d="M 18 13 L 18 19 C 18 20.105 17.105 21 16 21 L 5 21 C 3.895 21 3 20.105 3 19 L 3 8 C 3 6.895 3.895 6 5 6 L 11 6"/>
<polyline points="15 3 21 3 21 9"/>
<line x1="10" y1="14" x2="21" y2="3"/>
</g>
</svg>
</a>
</div>
<p v-html="description"></p>
<ul>
<li v-for="keyword in keywords">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(1.126687, 0, 0, 1.126687, -1.053373, -1.050698)">
<path d="M 20.59 13.41 L 13.42 20.58 C 12.639 21.362 11.371 21.362 10.59 20.58 L 2 12 L 2 2 L 12 2 L 20.59 10.59 C 21.365 11.37 21.365 12.63 20.59 13.41 Z"/>
<line x1="7" y1="7" x2="7.01" y2="7"/>
</g>
</svg>
<span>{{ keyword }}</span>
</li>
</ul>
</div>
</template>
<script setup>
// --------------------------------------------------
// DATA
// --------------------------------------------------
defineProps({
title: String,
url: String,
description: String,
keywords: Array
});
</script>
<style lang="scss" scoped>
// --------------------------------------------------
// STYLE
// --------------------------------------------------
.project-data {
display: flex;
flex-direction: column;
gap: 1rem;
margin: 0 2rem;
text-align: center;
&__header {
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
a {
width: var(--small-icon-wrapper-size);
height: var(--small-icon-wrapper-size);
svg {
width: var(--h3-font-size);
height: var(--h3-font-size);
stroke: var(--primary-accent-color);
transition: transform 200ms ease-in-out;
}
&:hover,
&:focus,
&:active {
svg {
transform: translate(0.1rem, -0.1rem);
}
}
}
}
ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
column-gap: 1rem;
row-gap: 0.5rem;
list-style: none;
font-family: var(--title-font-family);
font-size: var(--footnote-font-size);
font-weight: var(--semi-bold-font-weight);
li {
display: flex;
align-items: center;
gap: 0.2rem;
svg {
width: var(--footnote-font-size);
height: var(--footnote-font-size);
stroke: var(--primary-color-light);
}
}
}
@media screen and (min-width: $tablet-media-query) {
margin: 0 4rem;
}
@media screen and (min-width: $desktop-media-query) {
margin: 0;
}
}
</style>