paulnicoue/components/ProjectData.vue

<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(--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>