paulnicoue/components/ContactHeader.vue

<template>

    <div class="contact-header">
        <h2 class="contact-header__title">Contact</h2>
        <div class="contact-header__content" data-aos="fade-up">
            <p class="contact-header__text">Contactez-moi à l'adresse e-mail <a href="mailto:contact@paulnicoue.com" target="_blank">contact@paulnicoue.com</a> ou via le formulaire ci-après. Vous pouvez également consulter <a href="https://forgejo.paulnicoue.com/" target="_blank">ma forge logicielle</a>.</p>
            <div class="contact-header__links" aria-hidden="true">
                <!-- <a tabindex="-1" href="https://www.malt.fr/profile/paulnicoue" target="_blank" title="Consulter le profil Malt de Paul Nicoué">
                    <svg viewBox="0 0 24 24" fill="url(#malt-icon-gradient)" xmlns="http://www.w3.org/2000/svg">
                        <defs>
                            <linearGradient id="malt-icon-gradient" gradientUnits="userSpaceOnUse" x1="12" y1="0" x2="12" y2="24" gradientTransform="matrix(0.707651, 0.706562, -1, 1, 15.508194, -8.478749)">
                                <stop offset="0" style="stop-color: rgb(163, 243, 176);"/>
                                <stop offset="1" style="stop-color: rgb(114, 192, 128);"/>
                            </linearGradient>
                        </defs>
                        <path d="M 20.542 3.464 C 18.726 1.654 16.793 2.827 15.581 4.034 L 4.14 15.475 C 2.927 16.687 1.659 18.531 3.57 20.436 C 5.475 22.341 7.313 21.073 8.525 19.86 L 19.967 8.419 C 21.179 7.212 22.352 5.274 20.542 3.464 Z M 9.609 2.994 L 12.034 5.419 L 14.497 2.95 C 14.665 2.782 14.832 2.626 15.006 2.48 C 14.749 1.179 14.006 0 12.028 0 C 10.05 0 9.307 1.184 9.056 2.486 C 9.24 2.648 9.425 2.81 9.609 2.994 Z M 14.497 20.989 L 12.034 18.525 L 9.609 20.944 C 9.425 21.128 9.246 21.302 9.061 21.458 C 9.341 22.788 10.123 24 12.028 24 C 13.939 24 14.726 22.777 15 21.447 C 14.832 21.302 14.665 21.156 14.497 20.989 Z M 8.581 8.866 L 3.911 8.866 C 2.196 8.866 0 9.408 0 11.966 C 0 13.883 1.223 14.665 2.559 14.939 C 2.715 14.76 8.581 8.866 8.581 8.866 Z M 21.514 8.994 C 21.369 9.162 15.486 15.073 15.486 15.073 L 20.089 15.073 C 21.804 15.073 24 14.665 24 11.966 C 24 9.994 22.821 9.251 21.514 8.994 Z M 10.112 7.335 L 10.944 6.503 L 8.525 4.078 C 7.313 2.866 5.475 1.598 3.564 3.508 C 2.168 4.905 2.48 6.268 3.218 7.369 C 3.447 7.352 10.112 7.335 10.112 7.335 Z M 13.95 16.603 L 13.112 17.441 L 15.581 19.905 C 16.793 21.117 18.726 22.291 20.536 20.48 C 21.888 19.128 21.581 17.704 20.832 16.57 C 20.592 16.587 13.95 16.603 13.95 16.603 Z"/>
                    </svg>
                </a> -->
                <a tabindex="-1" href="https://forgejo.paulnicoue.com/" target="_blank" title="Consulter la forge logicielle de Paul Nicoué">
                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <defs>
                            <linearGradient gradientUnits="userSpaceOnUse" x1="11.996" y1="0.036" x2="11.996" y2="24.036" id="gradient-0" gradientTransform="matrix(0.699999, 0.7, -0.999995, 0.999993, 15.638731, -8.433056)">
                                <stop offset="0" style="stop-color: rgb(163, 243, 176);"/>
                                <stop offset="1" style="stop-color: rgb(114, 192, 128);"/>
                            </linearGradient>
                        </defs>
                        <path d="M16.7773 0c1.6018 0 2.9004 1.2986 2.9004 2.9005s-1.2986 2.9004-2.9004 2.9004c-1.0854 0-2.0315-.596-2.5288-1.4787H12.91c-2.3322 0-4.2272 1.8718-4.2649 4.195l-.0007 2.1175a7.0759 7.0759 0 0 1 4.148-1.4205l.1176-.001 1.3385.0002c.4973-.8827 1.4434-1.4788 2.5288-1.4788 1.6018 0 2.9004 1.2986 2.9004 2.9005s-1.2986 2.9004-2.9004 2.9004c-1.0854 0-2.0315-.596-2.5288-1.4787H12.91c-2.3322 0-4.2272 1.8718-4.2649 4.195l-.0007 2.319c.8827.4973 1.4788 1.4434 1.4788 2.5287 0 1.602-1.2986 2.9005-2.9005 2.9005-1.6018 0-2.9004-1.2986-2.9004-2.9005 0-1.0853.596-2.0314 1.4788-2.5287l-.0002-9.9831c0-3.887 3.1195-7.0453 6.9915-7.108l.1176-.001h1.3385C14.7458.5962 15.692 0 16.7773 0ZM7.2227 19.9052c-.6596 0-1.1943.5347-1.1943 1.1943s.5347 1.1943 1.1943 1.1943 1.1944-.5347 1.1944-1.1943-.5348-1.1943-1.1944-1.1943Zm9.5546-10.4644c-.6596 0-1.1944.5347-1.1944 1.1943s.5348 1.1943 1.1944 1.1943c.6596 0 1.1943-.5347 1.1943-1.1943s-.5347-1.1943-1.1943-1.1943Zm0-7.7346c-.6596 0-1.1944.5347-1.1944 1.1943s.5348 1.1943 1.1944 1.1943c.6596 0 1.1943-.5347 1.1943-1.1943s-.5347-1.1943-1.1943-1.1943Z" fill="url(#gradient-0)"/>
                    </svg>
                </a>
            </div>
        </div>
    </div>

</template>

<script setup>
</script>

<style lang="scss" scoped>

    // --------------------------------------------------
    // STYLE
    // --------------------------------------------------

    .contact-header {
        display: grid;
        place-content: start;
        place-items: start;
        gap: 2rem;

        &__content {
            display: grid;
            place-content: start;
            place-items: start;
            gap: 2rem;
        }

        &__links {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 2rem;

            a {
                width: var(--regular-icon-size);
                height: var(--regular-icon-size);
                display: flex;
                justify-content: center;
                align-items: center;

                svg {
                    width: 100%;
                    height: 100%;
                    transition:
                        filter 200ms ease-in-out,
                        transform 200ms ease-in-out;
                }

                &:hover,
                &:focus,
                &:active {

                    svg {
                        filter: brightness(1.1);
                        transform: scale(1.1) rotate(22.5deg);
                    }
                }
            }
        }
    }

</style>