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

103
assets/styles/main.scss
View file

@ -17,9 +17,8 @@
--extra-bold-font-weight: 800;
--black-font-weight: 900;
--h1-font-size: 2rem;
--h2-font-size: 2rem;
--h3-font-size: 1.2rem;
--button-font-size: 1.4rem;
--h2-font-size: 1.8rem;
--h3-font-size: 1.4rem;
--text-font-size: 1.2rem;
--caption-font-size: 1.1rem;
--footnote-font-size: 1rem;
@ -27,7 +26,6 @@
--h1-font-height: calc(var(--h1-font-size) * var(--line-height));
--h2-font-height: calc(var(--h2-font-size) * var(--line-height));
--h3-font-height: calc(var(--h3-font-size) * var(--line-height));
--button-font-height: calc(var(--button-font-size) * var(--line-height));
--text-font-height: calc(var(--text-font-size) * var(--line-height));
--caption-font-height: calc(var(--caption-font-size) * var(--line-height));
--footnote-font-height: calc(var(--footnote-font-size) * var(--line-height));
@ -37,10 +35,11 @@
--large-content-width: Min(100%, 100rem);
--medium-content-width: Min(100%, 80rem);
--small-content-width: Min(100%, 40rem);
--small-content-width: Min(100%, 60rem);
--regular-icon-size: 2rem;
--regular-icon-wrapper-size: calc(var(--regular-icon-size) + 1rem);
--small-icon-size: calc(var(--text-font-size) * var(--line-height));
--small-icon-size: var(--text-font-height);
--small-icon-wrapper-size: var(--small-icon-size);
--button-with-icon-gap: 0.5rem;
@ -48,25 +47,22 @@
--eerie-black: #212121;
--gray: #7A7A7A;
--white-transparent: hsla(0, 0%, 100%, 0.8);
--night: #141414;
--white-smoke: #F5F5F5;
--emerald: #72C080;
--emerald-transparent: hsla(131, 38%, 60%, 0.5);
--granny-smith-apple: #A3F3B0;
--emerald: #72C080; // hsl(131, 38%, 60%)
--granny-smith-apple: #A3F3B0; // hsl(130, 77%, 80%)
--middle-green: #428F53;
--rajah: #F9B262;
--earth-yellow: #F9B262; // hsl(32, 93%, 68%)
--fawn: #F9BC76; // hsl(32, 92%, 72%)
--primary-color: var(--eerie-black);
--primary-color-light: var(--gray);
--primary-color-dark: black;
--secondary-color: white;
--secondary-color-transparent: var(--white-transparent);
--secondary-color-dark: var(--white-smoke);
--accent-color: var(--emerald);
--accent-color-transparent: var(--emerald-transparent);
--accent-color-light: var(--granny-smith-apple);
--accent-color-dark: var(--middle-green);
--button-gradient: linear-gradient(
--primary-color-dark: var(--night);
--secondary-color: var(--white-smoke);
--primary-accent-color: var(--emerald);
--primary-accent-color-light: var(--granny-smith-apple);
--primary-accent-color-dark: var(--middle-green);
--primary-accent-gradient: linear-gradient(
45deg,
hsl(131deg 38% 60%) 1%,
hsl(131deg 40% 62%) 34%,
@ -79,17 +75,16 @@
hsl(130deg 69% 77%) 83%,
hsl(130deg 77% 80%) 100%
);
--error-color: var(--rajah);
// Shadows
--regular-box-shadow:
0px 0px 2.8px rgba(0, 0, 0, 0.15),
0px 0px 6.7px rgba(0, 0, 0, 0.107),
0px 0px 12.5px rgba(0, 0, 0, 0.089),
0px 0px 22.3px rgba(0, 0, 0, 0.074),
0px 0px 41.8px rgba(0, 0, 0, 0.059),
0px 0px 100px rgba(0, 0, 0, 0.041);
--secondary-accent-color: var(--earth-yellow);
--secondary-accent-light: var(--fawn);
--secondary-accent-gradient: linear-gradient(
5deg,
hsl(32deg 93% 68%) 7%,
hsl(32deg 92% 69%) 65%,
hsl(32deg 92% 70%) 77%,
hsl(32deg 92% 71%) 83%,
hsl(32deg 92% 72%) 100%
);
}
// Media queries
@ -119,14 +114,12 @@ h1 {
h2 {
font-family: var(--title-font-family);
font-size: var(--h2-font-size);
font-weight: var(--medium-font-weight);
}
h3 {
font-family: var(--title-font-family);
font-size: var(--h3-font-size);
font-weight: var(--semi-bold-font-weight);
text-transform: uppercase;
}
p {
@ -134,7 +127,7 @@ p {
}
strong {
font-weight: var(--bold-font-weight);
font-weight: var(--medium-font-weight);
}
em {
@ -147,18 +140,18 @@ em {
a {
color: var(--secondary-color);
text-decoration: underline var(--accent-color);
text-decoration: underline var(--primary-accent-color);
border-radius: 2px;
transition: color 200ms ease-in-out;
&:hover,
&:focus,
&:active {
color: var(--accent-color);
color: var(--primary-accent-color);
}
&:focus-visible {
outline: 1px dashed var(--accent-color-light);
outline: 1px dashed var(--primary-accent-color-light);
outline-offset: 2px;
animation: expand-outline-2px 200ms ease-in-out;
}
@ -179,7 +172,7 @@ ul {
button {
padding: 1rem 1.5rem;
color: var(--primary-color);
background-image: var(--button-gradient);
background-image: var(--primary-accent-gradient);
background-size: 100%;
background-position: right center;
border: none;
@ -199,7 +192,7 @@ button {
}
&:focus-visible {
outline: 1px dashed var(--accent-color-light);
outline: 1px dashed var(--primary-accent-color-light);
outline-offset: 4px;
animation: expand-outline-4px 200ms ease-in-out;
}
@ -211,14 +204,12 @@ button {
align-items: center;
gap: var(--button-with-icon-gap);
&__text,
&-text {
span {
transform: translateX(calc((var(--button-with-icon-gap) + var(--small-icon-size)) / 2));
transition: transform 200ms ease-in-out;
}
&__icon,
&-icon {
svg {
flex-shrink: 0;
opacity: 0;
width: var(--small-icon-size);
@ -229,21 +220,15 @@ button {
transform 200ms ease-in-out;
}
&:hover &__text,
&:hover &-text,
&:focus &__text,
&:focus &-text,
&:active &__text,
&:active &-text {
&:hover span,
&:focus span,
&:active span {
transform: translateX(0);
}
&:hover &__icon,
&:hover &-icon,
&:focus &__icon,
&:focus &-icon,
&:active &__icon,
&:active &-icon {
&:hover svg,
&:focus svg,
&:active svg {
opacity: 1;
transform: translateX(0);
}
@ -285,7 +270,7 @@ form {
&:hover,
&:focus,
&:active {
border: 1px solid var(--accent-color);
border: 1px solid var(--primary-accent-color);
outline: none;
}
}
@ -297,7 +282,7 @@ form {
p {
font-size: var(--caption-font-size);
color: var(--accent-color);
color: var(--primary-accent-color);
}
}
}
@ -311,7 +296,7 @@ section {
padding: 4rem 2rem;
@media screen and (min-width: $tablet-media-query) {
padding: 4rem;
padding: 6rem 4rem;
}
@media screen and (min-width: $desktop-media-query) {

6
components/AppError.vue
View file

@ -12,8 +12,8 @@
<div class="error__emoticon" aria-hidden="true" v-show="isVisible">¯\(°_o)/¯</div>
</Transition>
<button class="error__button" @click="$emit('handleError')">
<span class="error__button-text">Retourner à la page d'accueil</span>
<svg class="error__button-icon" 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">
<span>Retourner à la page d'accueil</span>
<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">
<path d="M 2 8.7 L 12 1 L 22 8.7 L 22 20.8 C 22 22.016 21.006 23 19.778 23 L 4.222 23 C 2.995 23 2 22.016 2 20.8 L 2 8.7 Z"/>
<polyline points="8.667 23 8.667 12 15.333 12 15.333 23"/>
</svg>
@ -89,7 +89,7 @@
grid-area: separator;
width: 100%;
height: 1px;
background-color: var(--accent-color);
background-color: var(--primary-accent-color);
}
&__emoticon {

2
components/AppFooter.vue
View file

@ -94,7 +94,7 @@
}
&-dot {
fill: var(--accent-color);
fill: var(--primary-accent-color);
}
}

18
components/ContactFormValidation.vue
View file

@ -2,8 +2,8 @@
<div class="contact-form-validation">
<button class="contact-form-validation__button" @click="$emit('sendEmail')">
<span class="contact-form-validation__button-text">Envoyer</span>
<svg class="contact-form-validation__button-icon" 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">
<span>Envoyer</span>
<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">
<line x1="23" y1="1" x2="10.9" y2="13.1"/>
<polygon points="23 1 15.3 23 10.9 13.1 1 8.7 23 1"/>
</svg>
@ -13,8 +13,8 @@
</Transition>
<Transition name="fade-in-expand-height">
<div class="contact-form-validation__message" v-show="isValidated" v-click-outside="hideValidationMessage">
<p class="contact-form-validation__message-success" v-if="isSuccessful">Votre message a bien été envoyé !</p>
<p class="contact-form-validation__message-error" v-else>Une erreur est survenue... Vérifiez les champs saisis ou contactez-moi à l'adresse e-mail contact@paulnicoue.com</p>
<p class="contact-form-validation__success" v-if="isSuccessful">Votre message a bien été envoyé !</p>
<p class="contact-form-validation__error" v-else>Une erreur est survenue... Vérifiez les champs saisis ou contactez-moi à l'adresse e-mail contact@paulnicoue.com</p>
</div>
</Transition>
</div>
@ -89,8 +89,8 @@
place-self: center end;
width: 2.5rem;
height: 2.5rem;
border-top: 2px solid var(--accent-color);
border-right: 2px solid var(--accent-color);
border-top: 2px solid var(--primary-accent-color);
border-right: 2px solid var(--primary-accent-color);
border-bottom: 2px solid transparent;
border-radius: 50%;
animation: rotate-360 800ms linear infinite;
@ -98,10 +98,10 @@
&__message {
grid-area: message;
}
&-error {
color: var(--error-color);
}
&__error {
color: var(--secondary-accent-color);
}
}

2
components/HeroArrowDown.vue
View file

@ -24,7 +24,7 @@
display: flex;
justify-content: center;
align-items: center;
background-image: var(--button-gradient);
background-image: var(--primary-accent-gradient);
background-size: 100%;
background-position: right center;
border-radius: 50%;

2
components/HeroTitle.vue
View file

@ -60,7 +60,7 @@
grid-area: separator;
width: 100%;
height: 1px;
background-color: var(--accent-color);
background-color: var(--primary-accent-color);
}
&__job {

88
components/Project.vue Normal file
View file

@ -0,0 +1,88 @@
<template>
<article class="project">
<ProjectImage
class="project__image"
:title="title"
:url="url"
:screenshot="screenshot"
/>
<ProjectData
class="project__data"
:title="title"
:url="url"
:description="description"
:keywords="keywords"
/>
</article>
</template>
<script setup>
// --------------------------------------------------
// DATA
// --------------------------------------------------
defineProps({
title: String,
url: String,
screenshot: String,
description: String,
keywords: Array
});
</script>
<style lang="scss">
// --------------------------------------------------
// STYLE
// --------------------------------------------------
.project {
display: flex;
flex-direction: column;
gap: 2rem;
@media screen and (min-width: $desktop-media-query) {
align-items: center;
gap: 4rem;
&:nth-of-type(odd) {
flex-direction: row;
.project__data {
align-items: flex-end;
text-align: right;
ul {
justify-content: flex-end;
}
}
}
&:nth-of-type(even) {
flex-direction: row-reverse;
.project__data {
align-items: flex-start;
text-align: left;
ul {
justify-content: flex-start;
}
}
}
&__image {
width: 65%;
}
&__data {
width: 35%;
}
}
}
</style>

105
components/ProjectCard.vue
View file

@ -1,105 +0,0 @@
<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>

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>

76
components/ProjectImage.vue Normal file
View file

@ -0,0 +1,76 @@
<template>
<div aria-hidden="true" class="project-image">
<a tabindex="-1" :href="url" target="_blank" :title="`Accéder au site web de ${title}`">
<img :src="screenshot" :alt="`Page d'accueil du site web de ${title}`">
</a>
</div>
</template>
<script setup>
// --------------------------------------------------
// DATA
// --------------------------------------------------
defineProps({
title: String,
url: String,
screenshot: String
});
</script>
<style lang="scss" scoped>
// --------------------------------------------------
// STYLE
// --------------------------------------------------
.project-image {
position: relative;
line-height: 0;
a {
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
&::after {
content: '';
position: absolute;
z-index: -1;
top: 0.4rem;
left: 0.4rem;
width: 100%;
height: 100%;
background-image: var(--secondary-accent-gradient);
background-size: 100%;
border-radius: 10px;
}
img {
border: 1px solid var(--primary-color);
border-radius: 10px;
transition: transform 200ms ease-in-out;
}
}
a:hover,
a:focus,
a:active {
img {
transform: translate(-0.4rem, -0.4rem);
}
}
}
</style>

39
components/ProjectsSection.vue
View file

@ -2,14 +2,15 @@
<section class="projects">
<h2 class="projects__title">Projets sélectionnés</h2>
<div class="projects__cards">
<ProjectCard
<div class="projects__items">
<Project
v-for="project in projects"
:key="project.title"
:title="project.title"
:url="project.url"
:screenshot="project.screenshot"
:description="project.description"
:keywords="project.keywords"
/>
</div>
</section>
@ -27,19 +28,22 @@
title: 'Xiao Wang',
url: 'https://xiaowang.fr',
screenshot: '/images/xiao-wang-screenshot-01.png',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Felis imperdiet proin fermentum leo vel.'
description: `Conception d'un site portfolio doté d'une interface d'administration pour l'artiste plasticienne et performeuse Xiao Wang. Définition de l'expérience de navigation et de la charte graphique en concertation avec l'artiste. Développement front-end et back-end.`,
keywords: ['HTML', 'CSS', 'Javascript', 'PHP', 'Kirby']
},
{
title: 'Danao',
url: 'https://www.danao.fr',
screenshot: '/images/danao-screenshot-01.png',
description: 'Curabitur gravida arcu ac tortor. Id consectetur purus ut faucibus pulvinar elementum integer enim neque. Sit amet dictum sit amet justo donec enim diam vulputate'
description: `Refonte partielle du site web de la marque Danao pour le compte de l'<a href="https://148.fr" target="_blank">agence de communication digitale 148</a>. Intégration web et développement front-end à partir des maquettes graphiques réalisées par l'agence et dans le respect de l'identité visuelle de la marque.`,
keywords: ['HTML', 'CSS', 'Javascript', 'Wordpress']
},
{
title: 'LibreAudio',
url: 'https://libreaudio.fr',
screenshot: '/images/libreaudio-screenshot-01.png',
description: 'Tortor condimentum lacinia quis vel eros donec ac odio. Odio facilisis mauris sit amet massa vitae tortor condimentum lacinia. Egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate.'
description: `Création d'une bibliothèque de livres audio gratuite, libre et se voulant accessible aux personnes en situation de handicap. Définition de l'expérience de navigation et de la charte graphique, développement front-end et back-end, enrichissement de la base de données.`,
keywords: ['HTML', 'CSS', 'Javascript', 'PHP', 'Symfony', 'Open source']
}
];
@ -53,29 +57,32 @@
.projects {
@include large-section;
// position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 4rem;
text-align: center;
// &::after {
// content: '';
// position: absolute;
// bottom: 0;
// left: 10%;
// width: 80%;
// height: 1px;
// background-color: #525252;
// }
&__title {
margin: 0 2rem;
}
&__cards {
&__items {
display: flex;
flex-direction: column;
align-items: center;
gap: 4rem;
width: 100%;
}
@media screen and (min-width: $tablet-media-query) {
gap: 6rem;
&__items {
gap: 6rem;
}
}
}
</style>

26
components/ServicesSection.vue
View file

@ -6,27 +6,27 @@
<svg viewBox="0 0 1139.17088 654.54324" xmlns="http://www.w3.org/2000/svg">
<g>
<rect x="586.171" y="32.543" width="255" height="2" fill="var(--primary-color)"/>
<rect x="796" y="22" width="28" height="28" fill="var(--error-color)"/>
<rect x="796" y="22" width="28" height="28" fill="var(--secondary-accent-color)"/>
<path d="M 841 34 L 807 34 L 807 0 L 841 0 L 841 34 Z M 808.478 32.522 L 839.522 32.522 L 839.522 1.478 L 808.478 1.478 L 808.478 32.522 Z" fill="var(--primary-color)"/>
<rect x="304.171" y="447.543" width="733" height="2" fill="var(--primary-color)"/>
<circle cx="246.827" cy="521.765" r="59.243" fill="var(--secondary-color-dark)"/>
<circle cx="256.46" cy="513.095" r="59.243" fill="var(--error-color)"/>
<circle cx="246.827" cy="521.765" r="59.243" fill="var(--secondary-color)"/>
<circle cx="256.46" cy="513.095" r="59.243" fill="var(--secondary-accent-color)"/>
<path d="M 320.171 654.543 C 253.199 654.543 211.341 582.043 244.827 524.043 C 278.313 466.043 362.029 466.043 395.516 524.043 C 403.151 537.269 407.171 552.272 407.171 567.543 C 407.117 615.569 368.198 654.489 320.171 654.543 Z M 320.171 482.543 C 254.738 482.543 213.843 553.377 246.559 610.043 C 279.276 666.71 361.067 666.71 393.784 610.043 C 401.244 597.122 405.171 582.464 405.171 567.543 C 405.118 520.621 367.094 482.596 320.171 482.543 Z" fill="var(--primary-color)"/>
<rect x="192.672" y="652.543" width="255" height="2" fill="var(--primary-color)"/>
<rect x="406.171" y="560.543" width="733" height="2" fill="var(--primary-color)"/>
<rect x="471" y="550" width="28" height="28" fill="var(--error-color)"/>
<rect x="1078" y="550" width="28" height="28" fill="var(--error-color)"/>
<rect x="471" y="550" width="28" height="28" fill="var(--secondary-accent-color)"/>
<rect x="1078" y="550" width="28" height="28" fill="var(--secondary-accent-color)"/>
<path d="M 516 562 L 482 562 L 482 528 L 516 528 L 516 562 Z M 483.478 560.522 L 514.522 560.522 L 514.522 529.478 L 483.478 529.478 L 483.478 560.522 Z" fill="var(--primary-color)"/>
<path d="M 1123 562 L 1089 562 L 1089 528 L 1123 528 L 1123 562 Z M 1090.478 560.522 L 1121.522 560.522 L 1121.522 529.478 L 1090.478 529.478 L 1090.478 560.522 Z" fill="var(--primary-color)"/>
</g>
<g>
<path d="M 683.793 18.652 L 423.623 18.652 L 423.623 13.29 L 305.652 13.29 L 305.652 18.652 L 44.41 18.652 C 34.691 18.652 26.812 26.531 26.812 36.251 L 26.812 392.503 C 26.812 402.222 34.691 410.101 44.41 410.101 L 683.793 410.101 C 693.512 410.101 701.391 402.222 701.391 392.503 L 701.391 36.251 C 701.391 26.531 693.512 18.652 683.793 18.652 Z" fill="var(--primary-color)"/>
<rect x="50.406" y="49.754" width="627.391" height="353.913" fill="var(--accent-color)"/>
<rect x="50.406" y="49.754" width="627.391" height="353.913" fill="var(--primary-accent-color)"/>
<polygon points="498.374 403.667 50.406 403.667 50.406 49.754 498.374 403.667" opacity="0.1"/>
<circle cx="363.565" cy="33.667" r="6.435" fill="var(--accent-color)"/>
<rect x="614.917" y="56.934" width="24.492" height="24.492" fill="var(--secondary-color-dark)"/>
<circle cx="363.565" cy="33.667" r="6.435" fill="var(--primary-accent-color)"/>
<rect x="614.917" y="56.934" width="24.492" height="24.492" fill="var(--secondary-color)"/>
<path d="M 650.78 92.797 L 621.04 92.797 L 621.04 63.057 L 650.78 63.057 L 650.78 92.797 Z M 622.333 91.504 L 649.487 91.504 L 649.487 64.35 L 622.333 64.35 L 622.333 91.504 Z" fill="var(--primary-color)"/>
<circle cx="148.574" cy="316.876" r="60.307" fill="var(--secondary-color-dark)"/>
<circle cx="148.574" cy="316.876" r="60.307" fill="var(--secondary-color)"/>
<path d="M 163.171 354.543 C 104.667 354.543 68.101 291.21 97.353 240.543 C 126.606 189.877 199.737 189.877 228.989 240.543 C 235.66 252.097 239.171 265.202 239.171 278.543 C 239.124 320.497 205.125 354.496 163.171 354.543 Z M 163.171 204.543 C 106.206 204.543 70.603 266.21 99.085 315.543 C 127.568 364.877 198.775 364.877 227.257 315.543 C 233.752 304.294 237.171 291.533 237.171 278.543 C 237.125 237.693 204.021 204.589 163.171 204.543 Z" fill="var(--primary-color)"/>
<rect x="439.102" y="145.279" width="200.307" height="5.248" fill="var(--primary-color)"/>
<rect x="439.102" y="161.898" width="200.307" height="5.248" fill="var(--primary-color)"/>
@ -38,11 +38,11 @@
</g>
<g>
<path d="M 1057.171 231.958 L 1054.793 231.958 L 1054.793 166.797 C 1054.793 145.968 1037.908 129.083 1017.079 129.083 L 879.025 129.083 C 858.197 129.083 841.312 145.968 841.312 166.797 L 841.312 524.278 C 841.312 545.107 858.197 561.992 879.025 561.992 L 1017.079 561.992 C 1037.908 561.992 1054.793 545.107 1054.793 524.278 L 1054.793 278.341 L 1057.171 278.341 L 1057.171 231.958 Z" fill="var(--primary-color)"/>
<path d="M 1046.761 169.013 L 1046.761 525.973 C 1046.764 541.528 1034.156 554.14 1018.601 554.143 L 879.881 554.143 C 864.326 554.14 851.719 541.528 851.721 525.973 L 851.721 169.013 C 851.723 153.462 864.33 140.855 879.881 140.853 L 896.711 140.853 C 893.124 149.653 899.598 159.284 909.101 159.283 L 988.191 159.283 C 997.695 159.284 1004.169 149.653 1000.581 140.853 L 1018.601 140.853 C 1034.153 140.855 1046.76 153.462 1046.761 169.013 Z" fill="var(--accent-color)"/>
<path d="M 1046.761 169.013 L 1046.761 525.973 C 1046.764 541.528 1034.156 554.14 1018.601 554.143 L 879.881 554.143 C 864.326 554.14 851.719 541.528 851.721 525.973 L 851.721 169.013 C 851.723 153.462 864.33 140.855 879.881 140.853 L 896.711 140.853 C 893.124 149.653 899.598 159.284 909.101 159.283 L 988.191 159.283 C 997.695 159.284 1004.169 149.653 1000.581 140.853 L 1018.601 140.853 C 1034.153 140.855 1046.76 153.462 1046.761 169.013 Z" fill="var(--primary-accent-color)"/>
<path d="M 1046.761 487.853 L 1046.761 525.973 C 1046.764 541.528 1034.156 554.14 1018.601 554.143 L 879.881 554.143 C 864.326 554.14 851.719 541.528 851.721 525.973 L 851.721 333.763 L 968.591 426.093 L 970.591 427.673 L 992.331 444.843 L 994.361 446.453 L 1046.761 487.853 Z" opacity="0.1"/>
<rect x="929.684" y="211.179" width="24.492" height="24.492" fill="var(--secondary-color-dark)"/>
<rect x="929.684" y="211.179" width="24.492" height="24.492" fill="var(--secondary-color)"/>
<path d="M 939.059 217.303 L 939.059 247.043 L 968.799 247.043 L 968.799 217.303 L 939.059 217.303 Z M 967.509 245.753 L 940.349 245.753 L 940.349 218.593 L 967.509 218.593 L 967.509 245.753 Z" fill="var(--primary-color)"/>
<circle cx="937.241" cy="498.707" r="43.868" fill="var(--secondary-color-dark)"/>
<circle cx="937.241" cy="498.707" r="43.868" fill="var(--secondary-color)"/>
<path d="M 950.171 532.543 C 907.832 532.543 881.37 486.71 902.54 450.043 C 923.709 413.377 976.633 413.377 997.803 450.043 C 1002.63 458.404 1005.171 467.889 1005.171 477.543 C 1005.137 507.905 980.533 532.509 950.171 532.543 Z M 950.171 424.543 C 909.372 424.543 883.872 468.71 904.272 504.043 C 924.672 539.377 975.671 539.377 996.071 504.043 C 1000.722 495.986 1003.171 486.847 1003.171 477.543 C 1003.139 448.286 979.429 424.576 950.171 424.543 Z" fill="var(--primary-color)"/>
<rect x="878.621" y="280.875" width="141.24" height="5.248" fill="var(--primary-color)"/>
<rect x="878.621" y="297.494" width="141.24" height="5.248" fill="var(--primary-color)"/>
@ -83,7 +83,7 @@
display: flex;
justify-content: center;
color: var(--primary-color);
background-image: var(--button-gradient);
background-image: var(--primary-accent-gradient);
background-size: 100%;
}

BIN
public/images/libreaudio-screenshot-02.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 313 KiB