121 lines
3.8 KiB
Vue
121 lines
3.8 KiB
Vue
<template>
|
|
|
|
<div class="project-data" data-aos="fade-up">
|
|
<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 1rem;
|
|
text-align: center;
|
|
|
|
&__header {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
|
|
a {
|
|
width: var(--text-font-height);
|
|
height: var(--text-font-height);
|
|
|
|
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>
|