Improve design

main
Midnight 11 months ago
parent e6f2f6d834
commit a8df685320

@ -1,16 +1,22 @@
<script>
export let buttonText = "";
export let buttonRedirect = "_blank";
export let buttonText = '';
export let buttonRedirect = '_blank';
export let buttonHref = null;
export let buttonImage = null;
export let center = false;
let classes = "z-10 flex flex-col group relative h-full hover:shadow-xl duration-150 hover:scale-[101%] hover:-translate-y-1";
let classes =
'z-10 flex flex-col group relative h-full hover:shadow-xl duration-150 hover:scale-[101%] hover:-translate-y-1';
</script>
<div class={classes}>
<span class="h-2 bg-gray-300 dark:bg-gray-700 rounded-t-xl duration-300"></span>
<span class="h-2 bg-gray-300 dark:bg-gray-700 rounded-t-xl duration-300" />
<div class="flex-grow {center ? "justify-center" : ""} flex flex-col gap-5 w-full relative px-10 py-5 duration-300 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-900 dark:to-gray-800">
<div
class="flex-grow {center
? 'justify-center'
: ''} flex flex-col gap-5 w-full relative px-10 py-5 duration-300 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-900 dark:to-gray-800"
>
<slot />
</div>
@ -18,11 +24,16 @@
<a
href={buttonHref}
target={buttonRedirect}
class="rounded-b-xl bg-gray-300 dark:bg-gray-700 py-3 px-5 hover:bg-opacity-100 dark:hover:bg-blue-600 hover:bg-blue-200 duration-300 text-base lg:text-lg font-bold z-40"
class="rounded-b-xl bg-gray-300 dark:bg-gray-700 py-3 px-5 hover:bg-opacity-100 dark:hover:bg-blue-600 hover:bg-blue-200 duration-300 text-base lg:text-lg font-bold z-40 h-14 inline-flex items-center"
>
<span class="px-5">{buttonText}</span>
<div class="inline-flex items-center px-5 gap-2">
{#if buttonImage}
<img src={buttonImage} class="h-8" />
{/if}
<span>{buttonText}</span>
</div>
</a>
{:else}
<span class="h-2 bg-gray-300 dark:bg-gray-700 rounded-b-xl duration-300 z-40"></span>
<span class="h-2 bg-gray-300 dark:bg-gray-700 rounded-b-xl duration-300 z-40" />
{/if}
</div>

@ -1,315 +1,379 @@
<script>
import Card from './Card.svelte';
import Card from "./Card.svelte";
const words = [
"JavaScript",
const words = [
'JavaScript',
"<b class='text-blue-500'>TypeScript</b>",
"MySQL",
'MySQL',
"<b class='text-blue-500'>Laravel</b>",
"PHP",
"Livewire",
'PHP',
'Livewire',
"<b class='text-blue-500'>NestJS</b>",
"NodeJS",
"Unity",
"Substance Painter",
"Blender",
"PostgreSQL",
"TailwindCSS",
"Rust",
"<b class='text-blue-500'>Blazor</b>",
"Redis",
'NodeJS',
'Unity',
'Substance Painter',
'Blender',
'PostgreSQL',
'TailwindCSS',
'Rust',
"<b class='text-blue-500'>Blazor</b>",
'Redis',
"<b class='text-blue-500'>Svelte</b>",
"<b class='text-blue-500'>SvelteKit</b>",
"Python",
"Django",
"Vue",
"<b class='text-blue-500'>SvelteKit</b>",
'Python',
'Django',
'Vue',
"<b class='text-blue-500'>Java</b>",
"<b class='text-blue-500'>C#</b>",
"JavaFX",
"NGINX",
"Docker",
"PayPal API",
"<b class='text-blue-500'>C#</b>",
'JavaFX',
'NGINX',
'Docker',
'PayPal API',
"<b class='text-blue-500'>REST</b>",
"GraphQL",
"TypeORM",
'GraphQL',
'TypeORM',
"<b class='text-blue-500'>Eloquent</b>",
"Express",
"Bash",
".NET",
"Composer",
"AlpineJS",
"Blade",
"JSX",
"Pug",
'Express',
'Bash',
'.NET',
'Composer',
'AlpineJS',
'Blade',
'JSX',
'Pug',
"<b class='text-blue-500'>Wordpress</b>",
"Vercel",
"SEO",
"Netlify",
"AWS S3",
"Backblaze",
"Bootstrap",
"Fontawesome",
"Sass",
".NET Core",
"Webpack",
"<b class='text-blue-500'>Linux</b>",
'Vercel',
'SEO',
'Netlify',
'AWS S3',
'Backblaze',
'Bootstrap',
'Fontawesome',
'Sass',
'.NET Core',
'Webpack',
"<b class='text-blue-500'>Linux</b>",
'Grafana',
'Prometheus'
];
</script>
<section class="relative">
<div class="@container flex flex-col justify-center">
<div class="flex flex-col gap-2 whitepigeon text-white text-center bg-[#3A53FF]">
<h2 class="font-bold text-4xl lg:text-8xl">Portfolio</h2>
<p class="lg:text-lg">A collection of some of the projects and experiences I am most proud of</p>
</div>
<div class="@container flex flex-col justify-center">
<div class="flex flex-col gap-2 whitepigeon text-white text-center">
<h2 class="font-bold text-4xl lg:text-8xl">Portfolio</h2>
<p class="lg:text-lg">
A collection of some of the projects and experiences I am most proud of
</p>
</div>
<div
class="container my-5 lg:my-20 grid grid-cols-1 @2xl:grid-cols-2 @6xl:grid-cols-3 gap-5 justify-between"
>
<div class="absolute top-0 -mt-40" id="portfolio" />
<Card>
<h3 class="text-xl font-bold flex-wrap inline-flex items-center gap-3 justify-between">
<div class="inline-flex gap-3">
<img src="/agroit.png" class="h-8" alt="puppypride" /> Agro IT
</div>
<span class="text-sm font-light">2023 and ongoing</span>
</h3>
<p class="text-sm text-gray-800 dark:text-gray-100">
During my study's internship at Agro IT I developed a user friendly web environment for
their RVDM.<br /><br />
The company liked what I built and wanted to expand upon it, so they hired me after the internship
to finish the prototype and roll it out to clients. Now I work on creating web versions for
all their products.<br /><br />
</p>
<img src="/rvdm.png" class="rounded-xl" alt="Picture of some people from the DevOps Team" />
</Card>
<div class="container my-5 lg:my-20 grid grid-cols-1 @2xl:grid-cols-2 @6xl:grid-cols-3 gap-5 justify-between">
<div class="absolute top-0 -mt-40" id="portfolio"></div>
<span class="@2xl:row-span-2">
<Card
buttonHref="https://puppypride.social"
buttonText="🌐 Visit the Puppy Pride social network"
>
<div class="flex flex-col gap-5">
<span class="flex flex-col gap-5">
<h3
class="text-xl flex-wrap font-bold inline-flex items-center gap -3 justify-between"
>
<div class="inline-flex gap-3">
<img src="/puppypride.png" class="h-8" alt="puppypride" /> Puppy Pride
</div>
<span class="text-sm font-light">2021 and ongoing</span>
</h3>
<p class="text-sm text-gray-800 dark:text-gray-100">
I am the lead developer of Puppy Pride since January of 2021. I develop and maintain
Puppy Pride's social network, servers and events.
<br /><br />
The site was built from the ground up using the TALL (Laravel) stack and sports a large
array of features such as blogging, albums, subscriptions, events, instant messaging,
customizable profiles, feeds, groups and advanced group management, and so on.
<br /><br />
Furthermore I have gotten experience with a lot of real concepts such as advanced dockerization,
deployment, load balancing, caching, server maintenance and more.
<br /><br />
<b>Warning:</b> Puppy Pride is an adult themed social network for people into petplay
based in England. Explicit imagery may be present. Due to the site's content, logging
in is required to view the majority of its features.
</p>
</span>
<span class="flex items-center">
<img src="/homepage/pp.png" alt="puppypride profile page" />
</span>
</div>
</Card>
</span>
<Card>
<h3
class="text-xl font-bold flex-wrap inline-flex items-center gap-3 justify-between"
>
<div class="inline-flex gap-3">
<img
src="/agroit.png"
class="h-8"
alt="puppypride"
/> Agro IT
</div>
<span class="text-sm font-light">2023 and ongoing</span>
</h3>
<p class="text-sm text-gray-800 dark:text-gray-100">
During my study's internship at Agro IT I developed a beautiful and user friendly web environment for their RVDM suite by connecting it to their newly made API and Identity Server.<br/><br/>
The company liked what I had built, and wanted to expand upon it, so they hired me after the internship so I can transform the internship's prototype to something we can roll out and release to clients.<br/><br/>
After that I am expected to build other modules of Agro IT's products into web environments so that their clients will eventually no longer need the older application-style programs.
</p>
</Card>
<Card buttonHref="https://saxion.nl" buttonText="🎓 Open Website">
<h3 class="text-xl font-bold flex-wrap inline-flex items-center gap-3 justify-between">
<div class="inline-flex gap-3">
<img src="/saxion.png" class="h-8 rounded-full" alt="puppypride" /> Saxion University
</div>
<span class="text-sm font-light">2020 to 2024</span>
</h3>
<p class="text-sm text-gray-800 dark:text-gray-100">
I am a year 4 student at the Saxion University of Applied Sciences in The Netherlands
majoring in Software Engineering and expected to graduate in July of 2024.
<br /><br />
During the study I've done several projects for real clients and worked in teams comprised
of people with lots of different backgrounds. I have mostly worked with Java, JavaScript, Python
and C#.
</p>
<img src="homepage/computer.png" class="w-40" />
</Card>
<span class="@xl:row-span-2">
<Card
buttonHref="https://puppypride.social"
buttonText="🌐 Visit the Puppy Pride social network"
>
<div class="flex flex-col gap-5">
<span class="flex flex-col gap-5">
<h3
class="text-xl flex-wrap font-bold inline-flex items-center gap-3 justify-between"
>
<div class="inline-flex gap-3">
<img
src="/puppypride.png"
class="h-8"
alt="puppypride"
/> Puppy Pride
</div>
<span class="text-sm font-light">2021 and ongoing</span>
</h3>
<p class="text-sm text-gray-800 dark:text-gray-100">
I am the lead developer of Puppy Pride since January of 2021. I develop and maintain Puppy Pride's social network, servers and events.
<br/><br/>
The site was built from the ground up using the TALL (Laravel) stack and sports a large array of features such as blogging, albums, subscriptions, events, instant messaging, customizable profiles, feeds, groups and advanced group management, and so on.
<br/><br/>
Furthermore I have gotten experience with a lot of real concepts such as advanced dockerization, deployment, load balancing, caching, server maintenance and more.
<br /><br />
<b>Warning:</b> Puppy Pride is an adult themed social network for people into petplay based in England. Explicit imagery may be present.
Due to the site's content, logging in is required to view the majority of its features.
</p>
</span>
<span class="flex items-center">
<img src="/homepage/pp.png" alt="puppypride profile page" />
</span>
</div>
</Card>
</span>
<span>
<Card buttonHref="https://dubbelnull.com/showcase" buttonText="➡️ View DubbelNull showcase">
<h3 class="text-xl font-bold flex-wrap inline-flex items-center gap-3 justify-between">
<div class="inline-flex gap-3">
<img src="/dubbelnull.png" class="h-10 -my-1 -ml-1" alt="dubbelnull" /> DubbelNull
</div>
<span class="text-sm font-light">2020 and ongoing</span>
</h3>
<p class="text-sm text-gray-800 dark:text-gray-100">
DubbelNull is a family business that does internet based development for small and
medium sized companies, such as creating websites, manage hosting, advice and other
similar things. I have made several websites for clients under this name, and you can
find more of my works on the DubbelNull website.
</p>
</Card>
</span>
<span>
<Card
buttonHref="https://dubbelnull.com/showcase"
buttonText="➡️ View DubbelNull showcase"
>
<h3
class="text-xl font-bold flex-wrap inline-flex items-center gap-3 justify-between"
>
<div class="inline-flex gap-3">
<img
src="/dubbelnull.png"
class="h-10 -my-1 -ml-1"
alt="dubbelnull"
/> DubbelNull
</div>
<span class="text-sm font-light">2020 and ongoing</span>
</h3>
<p class="text-sm text-gray-800 dark:text-gray-100">
DubbelNull is a family business that does internet based development for small and medium sized companies,
such as creating websites, manage hosting, advice and other similar things.
I have made several websites for clients under this name, and you can find more of my works on the DubbelNull website.
</p>
</Card>
</span>
<span class="@xl:row-span-3 @container">
<Card>
<h3 class="text-xl font-bold flex-wrap inline-flex items-center gap-3 justify-between">
<div class="inline-flex gap-3">🏢 Internships</div>
</h3>
<span class="@xl:row-span-2 @container">
<Card>
<h3
class="text-xl font-bold flex-wrap inline-flex items-center gap-3 justify-between"
>
<div class="inline-flex gap-3">
🏢
Internships
</div>
</h3>
<div class="flex flex-col gap-2">
<span class="flex justify-between items-end"
><b class="text-lg">Agro IT - Graduation project</b>
<p class="text-sm">2024</p></span
>
<p class="text-sm text-gray-800 dark:text-gray-100">
I also did my graduation project at Agro IT, where I will build a complete system
around employee management, time tracking and employee payouts that integrates with
existing infrastructure and streamline the administrative process within the company
as well as for customers.
</p>
</div>
<div class="flex flex-col gap-2">
<span class="flex justify-between items-end"><b class="text-lg">Agro IT</b><p class="text-sm">2023</p></span>
<p class="text-sm text-gray-800 dark:text-gray-100">Agro IT is an agricultural software company in The Netherlands. In my 5 month long internship I developed a new modern web app that connected to their existing APIs and made it possible for customers to use their systems from anywhere.</p>
</div>
<div class="flex flex-col gap-2">
<span class="flex justify-between items-end"
><b class="text-lg">Agro IT</b>
<p class="text-sm">2023</p></span
>
<p class="text-sm text-gray-800 dark:text-gray-100">
Agro IT is an agricultural software company in The Netherlands. In my 5 month long
internship I developed a new modern web app that connected to their existing APIs and
made it possible for customers to use their systems from anywhere.
</p>
</div>
<div class="flex flex-col gap-2">
<span class="flex justify-between items-end"><b class="text-lg">Witteveen+Bos</b><p class="text-sm">2022</p></span>
<p class="text-sm text-gray-800 dark:text-gray-100">Witteveen+Bos is a major worldwide agricultural software company. During my internship me and my team developed a generic authentication system in Django that would be used as a customized plug-in template for new projects at the company.</p>
</div>
<div class="flex flex-col gap-2">
<span class="flex justify-between items-end"
><b class="text-lg">Witteveen+Bos</b>
<p class="text-sm">2022</p></span
>
<p class="text-sm text-gray-800 dark:text-gray-100">
Witteveen+Bos is a major worldwide agricultural software company. During my internship
me and my team developed a generic authentication system in Django that would be used
as a customized plug-in template for new projects at the company.
</p>
</div>
<div class="flex flex-col gap-2">
<span class="flex justify-between items-end"><b class="text-lg">AgroVision</b><p class="text-sm">2021</p></span>
<p class="text-sm text-gray-800 dark:text-gray-100">AgroVision is a Dutch software company for farmers. During my internship I worked on an app that generates reports about CO2 usage on farms and informs the farmer on how to reduce thecir emmissions.</p>
</div>
<div class="flex flex-col gap-2">
<span class="flex justify-between items-end"
><b class="text-lg">AgroVision</b>
<p class="text-sm">2021</p></span
>
<p class="text-sm text-gray-800 dark:text-gray-100">
AgroVision is a Dutch software company for farmers. During my internship I worked on
an app that generates reports about CO2 usage on farms and informs the farmer on how
to reduce thecir emmissions.
</p>
</div>
<div class="flex flex-col gap-2">
<span class="flex justify-between items-end"><b class="text-lg">SuiteSeven</b><p class="text-sm">2019</p></span>
<p class="text-sm text-gray-800 dark:text-gray-100">SuitSeven is a local webdevelopment studio. During my internship I worked on the design for a client's website.</p>
</div>
<div class="flex flex-col gap-2">
<span class="flex justify-between items-end"
><b class="text-lg">SuiteSeven</b>
<p class="text-sm">2019</p></span
>
<p class="text-sm text-gray-800 dark:text-gray-100">
SuitSeven is a local webdevelopment studio. During my internship I worked on the
design for a client's website.
</p>
</div>
<div class="flex flex-col gap-2">
<span class="flex justify-between items-end"><b class="text-lg">Profity</b><p class="text-sm">2018</p></span>
<p class="text-sm text-gray-800 dark:text-gray-100">Profity is a software ccompany creating ERP suites for the Dutch steel industry. During my internship I learned the dynamics of a team and the different processes involved in software development.</p>
</div>
</Card>
</span>
<div class="flex flex-col gap-2">
<span class="flex justify-between items-end"
><b class="text-lg">Profity</b>
<p class="text-sm">2018</p></span
>
<p class="text-sm text-gray-800 dark:text-gray-100">
Profity is a software company creating ERP suites for the Dutch steel industry. During
my internship I learned the dynamics of a team and the different processes involved in
software development.
</p>
</div>
</Card>
</span>
<span class="@xl:row-span-2 @container">
<Card>
<h3
class="text-xl font-bold flex-wrap inline-flex items-center gap-3 justify-between"
>
<div class="inline-flex gap-3">
🧑‍💻
Always open
</div>
</h3>
<div class="h-full flex flex-col justify-between">
<p class="text-sm text-gray-800 dark:text-gray-100">
Beyond practical knowledge, I am also a teamplayer. I love discovering new ways and technologies that are proposed to me and like to share ideas and find new solutions to problems together.
<br/><br/>
Most of my experiences listed have happened because people approached me with cool ideas. If you have something you need made and think we could provide value to each other, I would be glad to look at your opportunities.
</p>
<img src="/banner4.png" class="w-full -mb-5" alt="mid"/>
</div>
</Card>
</span>
<span class="@2xl:col-span-2">
<Card
buttonHref="https://furality.org/"
buttonImage="/fox.png"
buttonText="Visit furality.org"
>
<div class="grid grid-cols-2 gap-10">
<div class="w-full">
<h3
class="w-full text-xl font-bold flex-wrap inline-flex items-center gap-3 justify-between"
>
<div class="inline-flex gap-3">
<img src="/furality.png" class="h-10 -my-1 -ml-1" alt="dubbelnull" />
</div>
<span class="text-sm font-light">2023 and ongoing</span>
</h3>
<p class="text-sm text-gray-800 dark:text-gray-100">
Furality is a nonprofit event for the furry fandom held inside VRChat. It is the
largest furcon worldwide by attendees and uses proprietary technology in order to
run its events.
<br /><br />
Since December 2023 I volunteer for Furality Inc. as a Backend Developer. I work together
with the rest of the DevOps Department to work on APIs and systems that use things such
as TypeScript, NestJS, Grafana, Prometheus, RabbitMQ, Authentik, C#, Unity, and more.
<br /><br />
I am mainly tasked with developing Furality's in-house OIDC system and expanding Unity
plugins and tooling.
</p>
</div>
<img
src="/furality-luma.png"
class="rounded-xl w-full"
alt="Picture of some people from the DevOps Team"
/>
</div>
</Card>
</span>
<span class="@xl:row-span-3">
<Card>
<h3
class="text-xl font-bold flex-wrap inline-flex items-center gap-3"
>
<img
src="/homepage/esu.png"
class="h-10 rounded-full bg-black p-1"
alt="esu"
/> Easter System Universe
</h3>
<div class="h-full flex flex-col">
<p class="text-sm text-gray-800 dark:text-gray-100">
For the past years I've worked on building and writing a universe of mysteries called ESU. It is now mature enough to release, with several dimensions and planets on which the natives speak their own unique languages.
<br/><br/>
The universe confronts you with anomalies and alien concepts familiar enough to relate with as they fight for survival in an ever more technological world.
Worlds collide as it becomes ever more apparent that the puppeteers of the world might not be who you think they are, instigating a battle in which you must rely on hope to make it through.
<br/><br/>
The first written story titled "Luther's Throne" is planned to release soon and will be published on this website.
</p>
</div>
<span class="flex items-center">
<img src="/homepage/esubanner.png" alt="cover of act 1" />
</span>
</Card>
</span>
<span class="@xl:row-span-3">
<Card>
<h3 class="text-xl font-bold flex-wrap inline-flex items-center gap-3">
<img src="/homepage/esu.png" class="h-10 rounded-full bg-black p-1" alt="esu" /> Easter System
Universe
</h3>
<div class="flex flex-col pb-10">
<p class="text-sm text-gray-800 dark:text-gray-100">
For the past years I've worked on building and writing a universe of mysteries called
ESU. It is now mature enough to release, with several dimensions and planets on which
the natives speak their own unique languages.
<br /><br />
The universe confronts you with anomalies and alien concepts familiar enough to relate
with as they fight for survival in an ever more technological world. Worlds collide as
it becomes ever more apparent that the puppeteers of the world might not be who you think
they are, instigating a battle in which you must rely on hope to make it through.
<br /><br />
The first written story titled "Luther's Throne" is planned to release soon and will be
published on this website.
</p>
</div>
<span class="flex items-center">
<img src="/homepage/esubanner.png" alt="cover of act 1" />
</span>
</Card>
</span>
<span class="@xl:row-span-2">
<Card>
<h3
class="text-xl font-bold flex-wrap inline-flex items-center gap-3 justify-between"
>
<div class="inline-flex gap-3">
⚔️
Skills
</div>
</h3>
<p class="text-sm text-gray-800 dark:text-gray-100">
I can work with anything and love to try out new things and technologies! I have a lot of common knowledge around computer software and hardware and can adapt to anything that may be needed, but here is a constantly growing list of some of the things I am comfortable on and like working with:
</p>
<div id="scroll-container" class="flex flex-wrap gap-1 w-full text-center">
{#each words as word, key}
<p>
{#if key == words.length - 2}
{@html word} and
{:else if key == words.length - 1}
{@html word}.
{:else}
{@html word},
{/if}
</p>
{/each}
</div>
</Card>
</span>
<span class="@2xl:row-span-2">
<Card>
<h3 class="text-xl font-bold flex-wrap inline-flex items-center gap-3 justify-between">
<div class="inline-flex gap-3">⚔️ Skills</div>
</h3>
<p class="text-sm text-gray-800 dark:text-gray-100">
I can work with a wide range of systems, frameworks and technologies! I have a lot of
common knowledge around computer software and hardware that i can use to quickly adapt
to new languages and frameworks. Here is a constantly expanding list of some of the
things I am comfortable and like working with:
</p>
<div id="scroll-container" class="flex flex-wrap gap-1 w-full text-center">
{#each words as word, key}
<p>
{#if key == words.length - 2}
{@html word} and
{:else if key == words.length - 1}
{@html word}.
{:else}
{@html word},
{/if}
</p>
{/each}
</div>
<p class="text-sm font-bold italic pt-5">... and always eager to try out new things!</p>
</Card>
</span>
<Card
buttonHref="https://prideunbound.uk"
buttonText="📂 See archived 2023 Pride Unbound site"
>
<div class="flex flex-col gap-5">
<h3
class="text-xl font-bold flex-wrap inline-flex items-center gap-3 justify-between"
>
<div class="inline-flex gap-3">
<img
src="/prideunbound.png"
class="h-8 rounded-full"
alt="prideunbound"
/> Pride Unbound
</div>
<span class="text-sm font-light">2023 and ongoing</span>
</h3>
<p class="text-sm text-gray-800 dark:text-gray-100">
Pride Unbound is a convention based in London ran by Puppy Pride. I create and maintain their software and server infrastructure.
The website is custom made with Laravel and has a registration system, payment system, scheduling system, booking system and CMS pages system all managed by the event organisers through a dashboard.
</p>
</div>
</Card>
<span class="@xl:row-span-2 @container">
<Card>
<h3 class="text-xl font-bold flex-wrap inline-flex items-center gap-3 justify-between">
<div class="inline-flex gap-3">🧑‍💻 Always open</div>
</h3>
<div class="h-full flex flex-col justify-between">
<p class="text-sm text-gray-800 dark:text-gray-100">
Beyond practical knowledge, I am also a teamplayer. I love discovering new ways and
technologies that are proposed to me and like to share ideas and find new solutions to
problems together.
<br /><br />
Most of my experiences listed have happened because people approached me with cool ideas.
If you have something you need made and think we could provide value to each other, I would
be glad to look at your opportunities.
</p>
<img src="/banner4.png" class="w-full -mb-5" alt="mid" />
</div>
</Card>
</span>
<Card
buttonHref="https://saxion.nl"
buttonText="🎓 Open Website"
>
<h3
class="text-xl font-bold flex-wrap inline-flex items-center gap-3 justify-between"
>
<div class="inline-flex gap-3">
<img
src="/saxion.png"
class="h-8 rounded-full"
alt="puppypride"
/> Saxion University
</div>
<span class="text-sm font-light">2020 to 2024</span>
</h3>
<p class="text-sm text-gray-800 dark:text-gray-100">
I am a year 4 student at the Saxion University of Applied Sciences in The Netherlands majoring in Software Engineering and expected to graduate in 2024.
During the study I've done numerous projects for real clients and worked in teams comprised of people with many different backgrounds.
Most of my programming knowledge was self researched, but the study has connected me with companies and allowed me to work on real world products like my work at Agro IT.
</p>
</Card>
</div>
</div>
<Card
buttonHref="https://prideunbound.uk"
buttonText="📂 See archived 2023 Pride Unbound site"
>
<div class="flex flex-col gap-5">
<h3 class="text-xl font-bold flex-wrap inline-flex items-center gap-3 justify-between">
<div class="inline-flex gap-3">
<img src="/prideunbound.png" class="h-8 rounded-full" alt="prideunbound" /> Pride Unbound
</div>
<span class="text-sm font-light">2023 and ongoing</span>
</h3>
<p class="text-sm text-gray-800 dark:text-gray-100">
Pride Unbound is a convention based in London ran by Puppy Pride. I create and maintain
their software and server infrastructure. The website is custom made with Laravel and
has a registration system, payment system, scheduling system, booking system and CMS
pages system all managed by the event organisers through a dashboard.
</p>
</div>
</Card>
</div>
</div>
</section>

@ -1,5 +1,6 @@
<script lang="ts">
function calculateAge(birthday) { // birthday is a date
function calculateAge(birthday) {
// birthday is a date
var ageDifMs = Date.now() - birthday;
var ageDate = new Date(ageDifMs); // miliseconds from epoch
return Math.abs(ageDate.getUTCFullYear() - 1970);
@ -7,44 +8,57 @@
</script>
<main class="flex flex-col gap-10 lg:gap-20 container relative fira">
<div class="absolute top-0 -mt-40" id="about"></div>
<div class="absolute top-0 -mt-40" id="about" />
<h3 class="flex gap-5 lg:gap-10 items-end">
<span class="text-3xl lg:text-8xl text-blue-500 font-bold"><b>$</b>about_me</span>
<h3 class="flex gap-5 lg:gap-10 items-end">
<span class="text-3xl lg:text-8xl text-blue-500 font-bold"><b>$</b>about_me</span>
<span class="text-lg lg:text-4xl font-extrabold">== "over mij"</span>
</h3>
<div class="grid lg:grid-cols-5 gap-5">
</h3>
<div class="grid lg:grid-cols-5 gap-5">
<div class="lg:col-span-3 flex flex-col gap-5">
<div class="flex flex-wrap gap-2 bg-black bg-opacity-5 dark:bg-opacity-40 p-5">
<p class="font-bold">
Hey there! I'm Pascal, but my internet name is Mid. Nice to have you here on my website. I'm a {calculateAge(new Date("2001-10-30"))} year old programmer and tech enthusiast from The Netherlands.
If you wanna know a little more about me then here are some of the things I like to do. For my past experience and portfolio visit <a href="#portfolio" class="a">my portfolio section</a>.
Hey there! I'm Pascal, but my internet name is Mid. Nice to have you here on my website.
I'm a {calculateAge(new Date('2001-10-30'))} year old programmer and tech enthusiast from The
Netherlands. If you wanna know a little more about me then here are some of the things I like
to do. For my past experience and portfolio visit
<a href="#portfolio" class="a">my portfolio section</a>.
</p>
</div>
<div class="flex flex-col gap-5 relative text-sm p-5 border-black border-opacity-10 dark:border-opacity-20 border-4">
<span id="about-computers" class="absolute top-0 -mt-40"></span>
<div
class="flex flex-col gap-5 relative text-sm p-5 border-black border-opacity-10 dark:border-opacity-20 border-4"
>
<span id="about-computers" class="absolute top-0 -mt-40" />
<h4 class="text-lg font-bold">🖥 Computers</h4>
<p>
I love everything tech, as was probably obvious. But it goes beyond creating software.
I also built my own computer, and like to maintain hardware. At home I run a server rack equipped with a few Dell processing servers, doing my own research and hosting webservers, bots, multiplayer games and more using software like TrueNAS, Proxmox and Linux.
<br/><br/>
I daily-drive Linux as my operating systems out of a passion for FOSS and often tinker around with things like RAID and backups and getting all my favorite games to run.
I love everything tech, as was probably obvious. But it goes beyond creating software. I
also built my own computer, and like to maintain hardware. At home I run a server rack
equipped with a few Dell processing servers, doing my own research and hosting webservers,
bots, multiplayer games and more using software like TrueNAS, Proxmox and Linux.
<br /><br />
I daily-drive Linux as my operating systems out of a passion for FOSS and often tinker around
with things like RAID and backups and getting all my favorite games to run.
</p>
<img src="/homepage/proxmox.png" alt="proxmox environment" />
</div>
<div class="flex flex-col gap-5 relative text-sm p-5 border-black border-opacity-10 dark:border-opacity-20 border-4">
<span id="about-furry" class="absolute top-0 -mt-40"></span>
<div
class="flex flex-col gap-5 relative text-sm p-5 border-black border-opacity-10 dark:border-opacity-20 border-4"
>
<span id="about-furry" class="absolute top-0 -mt-40" />
<h4 class="text-lg font-bold">🦊 Furry</h4>
<p>
Being a furry is an important hobby and a creative outlet for me. In the digital world I express myself as Mid, an anthropomorphic cat with black fur and blue hair. You'll see him in some places on this website. There are also Martin the pine marten, Seffy the protogen, Koffie the rexouium and many more.
I am currently working on a section that details more about my fluffy life and all of my characters.
Being a furry is an important hobby and a creative outlet for me. In the digital world I
express myself as Mid, an anthropomorphic cat with black fur and blue hair. You'll see him
in some places on this website. There are also Martin the pine marten, Seffy the protogen,
Koffie the rexouium and many more. I am currently working on a section that details more
about my fluffy life and all of my characters.
<!-- For more about my fluffy side there's a section about it <a href="#furry" class="a">here</a>. -->
</p>
@ -55,50 +69,92 @@
</div>
</div>
<div class="flex flex-col gap-5 relative text-sm p-5 border-black border-opacity-10 dark:border-opacity-20 border-4">
<span id="about-drones" class="absolute top-0 -mt-40"></span>
<div
class="flex flex-col gap-5 relative text-sm p-5 border-black border-opacity-10 dark:border-opacity-20 border-4"
>
<span id="about-drones" class="absolute top-0 -mt-40" />
<h4 class="text-lg font-bold">🛩️ Drones</h4>
<p>
I like to go out there and make drone videos and pictures with my DJI drones, enjoying nature outdoors and capturing its beauty. More recently I've made some videos for Allroadevents.nl during a few offroading trips.
I like to go out there and make drone videos and pictures with my DJI drones, enjoying
nature outdoors and capturing its beauty. More recently I've made some videos for
Allroadevents.nl during a few offroading trips.
</p>
<div class="grid grid-cols-2 gap-1">
<img src="/homepage/drone.jpeg" class="object-cover @6xl:aspect-[2/1]" alt="drone shot" />
<img src="/homepage/drone2.jpeg" class="object-cover @6xl:aspect-[2/1]" alt="drone shot" />
<img
src="/homepage/drone2.jpeg"
class="object-cover @6xl:aspect-[2/1]"
alt="drone shot"
/>
</div>
</div>
</div>
<div class="lg:col-span-2 flex flex-col gap-5 overflow-x-hidden pt-10">
<div class="flex flex-col gap-1 text-sm p-5 border-black border-opacity-10 dark:border-opacity-20 border-dashed border-4">
<h4 class="-mt-12 lg:-mt-16 lg:text-lg bg-gray-200 dark:bg-gray-800 -mx-3 text-blue-500 overflow-x-hidden">
<b>////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////</b><br/>
<b>//</b> user details<br/>
<b>////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////</b>
<div
class="flex flex-col gap-1 text-sm p-5 border-black border-opacity-10 dark:border-opacity-20 border-dashed border-4"
>
<h4
class="-mt-12 lg:-mt-16 lg:text-lg bg-gray-100 dark:bg-gray-900 -mx-3 text-blue-500 overflow-x-hidden"
>
<b
>////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////</b
><br />
<b>//</b> user details<br />
<b
>////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////</b
>
</h4>
<span class="h-2"></span>
<span>&lt;age&gt; <bold class="font-bold text-base">{calculateAge(new Date("2001-10-30"))}</bold> &lt;/age&gt;</span>
<span>&lt;pronouns&gt; <bold class="font-bold lg:text-base">he / him</bold> &lt;/pronouns&gt;</span>
<span>&lt;profession&gt; <bold class="font-bold lg:text-base">software engineer</bold> &lt;/profession&gt;</span>
<span>&lt;nationality&gt; <bold class="font-bold lg:text-base">dutch 🇳🇱</bold> &lt;/nationality&gt;</span>
<span class="h-5"></span>
<span class="h-2" />
<span
>&lt;age&gt; <bold class="font-bold text-base"
>{calculateAge(new Date('2001-10-30'))}</bold
> &lt;/age&gt;</span
>
<span
>&lt;pronouns&gt; <bold class="font-bold lg:text-base">he / him</bold> &lt;/pronouns&gt;</span
>
<span
>&lt;profession&gt; <bold class="font-bold lg:text-base">software engineer</bold> &lt;/profession&gt;</span
>
<span
>&lt;nationality&gt; <bold class="font-bold lg:text-base">dutch 🇳🇱</bold> &lt;/nationality&gt;</span
>
<span class="h-5" />
<span>&lt;hobby&gt; <bold class="font-bold lg:text-base">coding</bold> &lt;/hobby&gt;</span>
<span>&lt;hobby&gt; <bold class="font-bold lg:text-base">gaming</bold> &lt;/hobby&gt;</span>
<a href="#about-furry" class="group">&lt;hobby&gt; <bold class="font-bold lg:text-base group-hover:underline text-[#2563EB]">furry</bold> &lt;/hobby&gt;</a>
<span class="h-5"></span>
<span>&lt;favorite&gt; <bold class="font-bold lg:text-base">coffee</bold> &lt;/favorite&gt;</span>
<a href="#about-computers" class="group">&lt;favorite&gt; <bold class="font-bold lg:text-base group-hover:underline text-[#2563EB]">computers</bold> &lt;/favorite&gt;</a>
<a href="#about-drones" class="group">&lt;favorite&gt; <bold class="font-bold lg:text-base group-hover:underline text-[#2563EB]">drones</bold> &lt;/favorite&gt;</a>
<span>&lt;favorite&gt; <bold class="font-bold lg:text-base">3D printing</bold> &lt;/favorite&gt;</span>
<span class="h-5"></span>
<a href="#about-furry" class="group"
>&lt;hobby&gt; <bold class="font-bold lg:text-base group-hover:underline text-[#2563EB]"
>furry</bold
> &lt;/hobby&gt;</a
>
<span class="h-5" />
<span
>&lt;favorite&gt; <bold class="font-bold lg:text-base">coffee</bold> &lt;/favorite&gt;</span
>
<a href="#about-computers" class="group"
>&lt;favorite&gt; <bold
class="font-bold lg:text-base group-hover:underline text-[#2563EB]">computers</bold
> &lt;/favorite&gt;</a
>
<a href="#about-drones" class="group"
>&lt;favorite&gt; <bold
class="font-bold lg:text-base group-hover:underline text-[#2563EB]">drones</bold
> &lt;/favorite&gt;</a
>
<span
>&lt;favorite&gt; <bold class="font-bold lg:text-base">3D printing</bold> &lt;/favorite&gt;</span
>
<span class="h-5" />
<span>&lt;me credits="Digitalizer"&gt;</span>
<img src="/homepage/sona/peaceful.png" alt="fursona" />
<span>&lt;/me&gt;</span>
</div>
</div>
</div>
</div>
</main>

@ -1,10 +1,10 @@
<script>
import Banner from "$lib/home/Banner.svelte";
import Blog from "$lib/home/Blog.svelte";
import Portfolio from "$lib/home/Portfolio.svelte";
import Sona from "$lib/home/Sona.svelte";
import Virtual from "$lib/home/Virtual.svelte";
import Furry from "$lib/home/Furry.svelte";
import Banner from '$lib/home/Banner.svelte';
import Blog from '$lib/home/Blog.svelte';
import Portfolio from '$lib/home/Portfolio.svelte';
import Sona from '$lib/home/Sona.svelte';
import Virtual from '$lib/home/Virtual.svelte';
import Furry from '$lib/home/Furry.svelte';
</script>
<svelte:head>
@ -14,29 +14,31 @@
<main class="overflow-x-hidden flex flex-col">
<Banner />
<div class="bg-gray-200 dark:bg-gray-800">
<Blog/>
<div class="bg-gray-200 dark:bg-gray-800 pb-20">
<Blog />
</div>
<div class="bg-gray-200 dark:bg-gray-800" style="height: 150px; overflow: hidden;"><svg viewBox="0 0 500 150" preserveAspectRatio="none" style="height: 100%; width: 100%;"><path d="M-65.62,-22.99 C146.87,168.99 238.74,166.00 589.37,-22.99 L543.74,181.99 L0.00,150.00 Z" style="stroke: none; fill: rgb(58, 83, 255);"></path></svg></div>
<div class="bg-[#3A53FF] lg:pt-20">
<Portfolio/>
<div
class="bg-gradient-to-b from-gray-200 via-gray-100 dark:via-gray-900 dark:from-gray-800 w-full"
>
<div class="bg-[#3A53FF] rounded-t-[50px] py-20 lg:mx-5 relative">
<div
class="absolute inset-0 w-full h-full bg-no-repeat bg-cover bg-top rounded-t-[50px]"
style="background-image: url('portfoliobackg.svg')"
/>
<Portfolio />
</div>
</div>
<img class="dark:hidden block scale-150 lg:scale-100 bg-[#3A53FF]" src="/homepage/aboutwhite.svg" />
<img class="hidden dark:block scale-150 lg:scale-100 bg-[#3A53FF]" src="/homepage/aboutdark.svg" />
<div class="bg-gray-200 dark:bg-gray-800 pt-20 lg:-mt-20">
<Sona/>
</div>
<img class="scale-150 lg:mx-5 lg:scale-100 -mt-[1px]" src="/homepage/steps.svg" />
<div class="dotsandlines">
<div class="h-[100px] lg:h-[400px] bg-gradient-to-b from-gray-200 dark:from-gray-800"></div>
<div class="py-20">
<Sona />
</div>
<div class="bg-repeat-y bg-contain dotsandlines pb-20">
<Virtual/>
<div class="bg-repeat-y bg-contain dotsandlines py-20">
<Virtual />
</div>
<!-- <Furry/> -->

Binary file not shown.

After

Width:  |  Height:  |  Size: 90 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.3 KiB

@ -1 +0,0 @@
<svg id="visual" viewBox="0 0 1500 200" width="1500" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><path d="M0 47L65 47L65 80L130 80L130 123L196 123L196 148L261 148L261 132L326 132L326 74L391 74L391 104L457 104L457 132L522 132L522 51L587 51L587 126L652 126L652 79L717 79L717 90L783 90L783 103L848 103L848 123L913 123L913 90L978 90L978 52L1043 52L1043 87L1109 87L1109 132L1174 132L1174 116L1239 116L1239 142L1304 142L1304 44L1370 44L1370 156L1435 156L1435 40L1500 40L1500 71L1500 201L1500 201L1435 201L1435 201L1370 201L1370 201L1304 201L1304 201L1239 201L1239 201L1174 201L1174 201L1109 201L1109 201L1043 201L1043 201L978 201L978 201L913 201L913 201L848 201L848 201L783 201L783 201L717 201L717 201L652 201L652 201L587 201L587 201L522 201L522 201L457 201L457 201L391 201L391 201L326 201L326 201L261 201L261 201L196 201L196 201L130 201L130 201L65 201L65 201L0 201Z" fill="#1F2937"></path></svg>

Before

Width:  |  Height:  |  Size: 951 B

@ -1 +0,0 @@
<svg id="visual" viewBox="0 0 1500 200" width="1500" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><path d="M0 47L65 47L65 80L130 80L130 123L196 123L196 148L261 148L261 132L326 132L326 74L391 74L391 104L457 104L457 132L522 132L522 51L587 51L587 126L652 126L652 79L717 79L717 90L783 90L783 103L848 103L848 123L913 123L913 90L978 90L978 52L1043 52L1043 87L1109 87L1109 132L1174 132L1174 116L1239 116L1239 142L1304 142L1304 44L1370 44L1370 156L1435 156L1435 40L1500 40L1500 71L1500 201L1500 201L1435 201L1435 201L1370 201L1370 201L1304 201L1304 201L1239 201L1239 201L1174 201L1174 201L1109 201L1109 201L1043 201L1043 201L978 201L978 201L913 201L913 201L848 201L848 201L783 201L783 201L717 201L717 201L652 201L652 201L587 201L587 201L522 201L522 201L457 201L457 201L391 201L391 201L326 201L326 201L261 201L261 201L196 201L196 201L130 201L130 201L65 201L65 201L0 201Z" fill="#E5E7EB"></path></svg>

Before

Width:  |  Height:  |  Size: 951 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 52 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 88 KiB

@ -0,0 +1 @@
<svg id="visual" viewBox="0 0 1500 200" width="1500" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><path d="M0 94L65 94L65 65L130 65L130 25L196 25L196 161L261 161L261 19L326 19L326 88L391 88L391 169L457 169L457 157L522 157L522 25L587 25L587 139L652 139L652 97L717 97L717 174L783 174L783 141L848 141L848 98L913 98L913 132L978 132L978 189L1043 189L1043 39L1109 39L1109 24L1174 24L1174 124L1239 124L1239 53L1304 53L1304 11L1370 11L1370 60L1435 60L1435 142L1500 142L1500 118L1500 0L1500 0L1435 0L1435 0L1370 0L1370 0L1304 0L1304 0L1239 0L1239 0L1174 0L1174 0L1109 0L1109 0L1043 0L1043 0L978 0L978 0L913 0L913 0L848 0L848 0L783 0L783 0L717 0L717 0L652 0L652 0L587 0L587 0L522 0L522 0L457 0L457 0L391 0L391 0L326 0L326 0L261 0L261 0L196 0L196 0L130 0L130 0L65 0L65 0L0 0Z" fill="#3A53FF"></path></svg>

After

Width:  |  Height:  |  Size: 854 B

@ -1 +0,0 @@
<svg id="visual" viewBox="0 0 1000 200" width="1000" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><path d="M0 61L23.8 61C47.7 61 95.3 61 143 57.5C190.7 54 238.3 47 286 44.3C333.7 41.7 381.3 43.3 428.8 55.2C476.3 67 523.7 89 571.2 99.2C618.7 109.3 666.3 107.7 714 96C761.7 84.3 809.3 62.7 857 61.8C904.7 61 952.3 81 976.2 91L1000 101L1000 201L976.2 201C952.3 201 904.7 201 857 201C809.3 201 761.7 201 714 201C666.3 201 618.7 201 571.2 201C523.7 201 476.3 201 428.8 201C381.3 201 333.7 201 286 201C238.3 201 190.7 201 143 201C95.3 201 47.7 201 23.8 201L0 201Z" fill="#7d89ff"></path><path d="M0 105L23.8 102.8C47.7 100.7 95.3 96.3 143 95.7C190.7 95 238.3 98 286 99.3C333.7 100.7 381.3 100.3 428.8 96.2C476.3 92 523.7 84 571.2 77C618.7 70 666.3 64 714 65.8C761.7 67.7 809.3 77.3 857 81.8C904.7 86.3 952.3 85.7 976.2 85.3L1000 85L1000 201L976.2 201C952.3 201 904.7 201 857 201C809.3 201 761.7 201 714 201C666.3 201 618.7 201 571.2 201C523.7 201 476.3 201 428.8 201C381.3 201 333.7 201 286 201C238.3 201 190.7 201 143 201C95.3 201 47.7 201 23.8 201L0 201Z" fill="#6574ff"></path><path d="M0 124L23.8 126.3C47.7 128.7 95.3 133.3 143 134.8C190.7 136.3 238.3 134.7 286 135.2C333.7 135.7 381.3 138.3 428.8 130.3C476.3 122.3 523.7 103.7 571.2 103.3C618.7 103 666.3 121 714 125.3C761.7 129.7 809.3 120.3 857 110.3C904.7 100.3 952.3 89.7 976.2 84.3L1000 79L1000 201L976.2 201C952.3 201 904.7 201 857 201C809.3 201 761.7 201 714 201C666.3 201 618.7 201 571.2 201C523.7 201 476.3 201 428.8 201C381.3 201 333.7 201 286 201C238.3 201 190.7 201 143 201C95.3 201 47.7 201 23.8 201L0 201Z" fill="#4a5eff"></path><path d="M0 145L23.8 138.3C47.7 131.7 95.3 118.3 143 119.2C190.7 120 238.3 135 286 142.5C333.7 150 381.3 150 428.8 149.8C476.3 149.7 523.7 149.3 571.2 144C618.7 138.7 666.3 128.3 714 122.8C761.7 117.3 809.3 116.7 857 122.2C904.7 127.7 952.3 139.3 976.2 145.2L1000 151L1000 201L976.2 201C952.3 201 904.7 201 857 201C809.3 201 761.7 201 714 201C666.3 201 618.7 201 571.2 201C523.7 201 476.3 201 428.8 201C381.3 201 333.7 201 286 201C238.3 201 190.7 201 143 201C95.3 201 47.7 201 23.8 201L0 201Z" fill="#374df2"></path><path d="M0 135L23.8 140.7C47.7 146.3 95.3 157.7 143 159C190.7 160.3 238.3 151.7 286 146.2C333.7 140.7 381.3 138.3 428.8 142.5C476.3 146.7 523.7 157.3 571.2 161C618.7 164.7 666.3 161.3 714 157.8C761.7 154.3 809.3 150.7 857 147C904.7 143.3 952.3 139.7 976.2 137.8L1000 136L1000 201L976.2 201C952.3 201 904.7 201 857 201C809.3 201 761.7 201 714 201C666.3 201 618.7 201 571.2 201C523.7 201 476.3 201 428.8 201C381.3 201 333.7 201 286 201C238.3 201 190.7 201 143 201C95.3 201 47.7 201 23.8 201L0 201Z" fill="#3043d9"></path><path d="M0 182L23.8 182C47.7 182 95.3 182 143 180.2C190.7 178.3 238.3 174.7 286 171.5C333.7 168.3 381.3 165.7 428.8 165C476.3 164.3 523.7 165.7 571.2 166.8C618.7 168 666.3 169 714 171.8C761.7 174.7 809.3 179.3 857 177C904.7 174.7 952.3 165.3 976.2 160.7L1000 156L1000 201L976.2 201C952.3 201 904.7 201 857 201C809.3 201 761.7 201 714 201C666.3 201 618.7 201 571.2 201C523.7 201 476.3 201 428.8 201C381.3 201 333.7 201 286 201C238.3 201 190.7 201 143 201C95.3 201 47.7 201 23.8 201L0 201Z" fill="#2838c0"></path></svg>

Before

Width:  |  Height:  |  Size: 3.1 KiB

@ -1,2 +0,0 @@
<?xml version="1.0" standalone="no"?>
<svg xmlns:xlink="http://www.w3.org/1999/xlink" id="wave" style="transform:rotate(0deg); transition: 0.3s" viewBox="0 0 1440 290" version="1.1" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="sw-gradient-0" x1="0" x2="0" y1="1" y2="0"><stop stop-color="rgba(58, 83, 255, 1)" offset="0%"/><stop stop-color="rgba(194.454, 202.137, 255, 1)" offset="100%"/></linearGradient></defs><path style="transform:translate(0, 0px); opacity:1" fill="url(#sw-gradient-0)" d="M0,145L40,149.8C80,155,160,164,240,159.5C320,155,400,135,480,149.8C560,164,640,213,720,236.8C800,261,880,261,960,232C1040,203,1120,145,1200,125.7C1280,106,1360,126,1440,125.7C1520,126,1600,106,1680,116C1760,126,1840,164,1920,154.7C2000,145,2080,87,2160,96.7C2240,106,2320,184,2400,203C2480,222,2560,184,2640,145C2720,106,2800,68,2880,48.3C2960,29,3040,29,3120,62.8C3200,97,3280,164,3360,193.3C3440,222,3520,213,3600,217.5C3680,222,3760,242,3840,212.7C3920,184,4000,106,4080,101.5C4160,97,4240,164,4320,183.7C4400,203,4480,174,4560,159.5C4640,145,4720,145,4800,135.3C4880,126,4960,106,5040,106.3C5120,106,5200,126,5280,111.2C5360,97,5440,48,5520,67.7C5600,87,5680,174,5720,217.5L5760,261L5760,290L5720,290C5680,290,5600,290,5520,290C5440,290,5360,290,5280,290C5200,290,5120,290,5040,290C4960,290,4880,290,4800,290C4720,290,4640,290,4560,290C4480,290,4400,290,4320,290C4240,290,4160,290,4080,290C4000,290,3920,290,3840,290C3760,290,3680,290,3600,290C3520,290,3440,290,3360,290C3280,290,3200,290,3120,290C3040,290,2960,290,2880,290C2800,290,2720,290,2640,290C2560,290,2480,290,2400,290C2320,290,2240,290,2160,290C2080,290,2000,290,1920,290C1840,290,1760,290,1680,290C1600,290,1520,290,1440,290C1360,290,1280,290,1200,290C1120,290,1040,290,960,290C880,290,800,290,720,290C640,290,560,290,480,290C400,290,320,290,240,290C160,290,80,290,40,290L0,290Z"/><defs><linearGradient id="sw-gradient-1" x1="0" x2="0" y1="1" y2="0"><stop stop-color="rgba(58, 83, 255, 1)" offset="0%"/><stop stop-color="rgba(191.574, 199.623, 255, 1)" offset="100%"/></linearGradient></defs><path style="transform:translate(0, 50px); opacity:0.9" fill="url(#sw-gradient-1)" d="M0,0L40,19.3C80,39,160,77,240,106.3C320,135,400,155,480,145C560,135,640,97,720,87C800,77,880,97,960,116C1040,135,1120,155,1200,164.3C1280,174,1360,174,1440,169.2C1520,164,1600,155,1680,159.5C1760,164,1840,184,1920,183.7C2000,184,2080,164,2160,169.2C2240,174,2320,203,2400,207.8C2480,213,2560,193,2640,183.7C2720,174,2800,174,2880,178.8C2960,184,3040,193,3120,193.3C3200,193,3280,184,3360,193.3C3440,203,3520,232,3600,203C3680,174,3760,87,3840,43.5C3920,0,4000,0,4080,9.7C4160,19,4240,39,4320,77.3C4400,116,4480,174,4560,203C4640,232,4720,232,4800,193.3C4880,155,4960,77,5040,38.7C5120,0,5200,0,5280,43.5C5360,87,5440,174,5520,203C5600,232,5680,203,5720,188.5L5760,174L5760,290L5720,290C5680,290,5600,290,5520,290C5440,290,5360,290,5280,290C5200,290,5120,290,5040,290C4960,290,4880,290,4800,290C4720,290,4640,290,4560,290C4480,290,4400,290,4320,290C4240,290,4160,290,4080,290C4000,290,3920,290,3840,290C3760,290,3680,290,3600,290C3520,290,3440,290,3360,290C3280,290,3200,290,3120,290C3040,290,2960,290,2880,290C2800,290,2720,290,2640,290C2560,290,2480,290,2400,290C2320,290,2240,290,2160,290C2080,290,2000,290,1920,290C1840,290,1760,290,1680,290C1600,290,1520,290,1440,290C1360,290,1280,290,1200,290C1120,290,1040,290,960,290C880,290,800,290,720,290C640,290,560,290,480,290C400,290,320,290,240,290C160,290,80,290,40,290L0,290Z"/></svg>

Before

Width:  |  Height:  |  Size: 3.4 KiB

@ -1 +0,0 @@
<svg id="visual" viewBox="0 0 2000 500" width="2000" height="500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><path d="M0 312L47.7 311.7C95.3 311.3 190.7 310.7 285.8 327.7C381 344.7 476 379.3 571.2 375C666.3 370.7 761.7 327.3 857 318C952.3 308.7 1047.7 333.3 1143 328.3C1238.3 323.3 1333.7 288.7 1428.8 290.5C1524 292.3 1619 330.7 1714.2 348.2C1809.3 365.7 1904.7 362.3 1952.3 360.7L2000 359L2000 0L1952.3 0C1904.7 0 1809.3 0 1714.2 0C1619 0 1524 0 1428.8 0C1333.7 0 1238.3 0 1143 0C1047.7 0 952.3 0 857 0C761.7 0 666.3 0 571.2 0C476 0 381 0 285.8 0C190.7 0 95.3 0 47.7 0L0 0Z" fill="#141c2b"></path><path d="M0 339L47.7 320.3C95.3 301.7 190.7 264.3 285.8 255.5C381 246.7 476 266.3 571.2 283.5C666.3 300.7 761.7 315.3 857 306.8C952.3 298.3 1047.7 266.7 1143 249C1238.3 231.3 1333.7 227.7 1428.8 222.3C1524 217 1619 210 1714.2 209.7C1809.3 209.3 1904.7 215.7 1952.3 218.8L2000 222L2000 0L1952.3 0C1904.7 0 1809.3 0 1714.2 0C1619 0 1524 0 1428.8 0C1333.7 0 1238.3 0 1143 0C1047.7 0 952.3 0 857 0C761.7 0 666.3 0 571.2 0C476 0 381 0 285.8 0C190.7 0 95.3 0 47.7 0L0 0Z" fill="#161f2e"></path><path d="M0 182L47.7 187.2C95.3 192.3 190.7 202.7 285.8 211.5C381 220.3 476 227.7 571.2 237C666.3 246.3 761.7 257.7 857 246C952.3 234.3 1047.7 199.7 1143 188.5C1238.3 177.3 1333.7 189.7 1428.8 201.2C1524 212.7 1619 223.3 1714.2 218C1809.3 212.7 1904.7 191.3 1952.3 180.7L2000 170L2000 0L1952.3 0C1904.7 0 1809.3 0 1714.2 0C1619 0 1524 0 1428.8 0C1333.7 0 1238.3 0 1143 0C1047.7 0 952.3 0 857 0C761.7 0 666.3 0 571.2 0C476 0 381 0 285.8 0C190.7 0 95.3 0 47.7 0L0 0Z" fill="#192231"></path><path d="M0 105L47.7 110.8C95.3 116.7 190.7 128.3 285.8 134.7C381 141 476 142 571.2 151C666.3 160 761.7 177 857 178.8C952.3 180.7 1047.7 167.3 1143 160.5C1238.3 153.7 1333.7 153.3 1428.8 154.5C1524 155.7 1619 158.3 1714.2 152.2C1809.3 146 1904.7 131 1952.3 123.5L2000 116L2000 0L1952.3 0C1904.7 0 1809.3 0 1714.2 0C1619 0 1524 0 1428.8 0C1333.7 0 1238.3 0 1143 0C1047.7 0 952.3 0 857 0C761.7 0 666.3 0 571.2 0C476 0 381 0 285.8 0C190.7 0 95.3 0 47.7 0L0 0Z" fill="#1c2534"></path><path d="M0 63L47.7 67.7C95.3 72.3 190.7 81.7 285.8 84.5C381 87.3 476 83.7 571.2 81.5C666.3 79.3 761.7 78.7 857 81C952.3 83.3 1047.7 88.7 1143 84.7C1238.3 80.7 1333.7 67.3 1428.8 63.3C1524 59.3 1619 64.7 1714.2 64.8C1809.3 65 1904.7 60 1952.3 57.5L2000 55L2000 0L1952.3 0C1904.7 0 1809.3 0 1714.2 0C1619 0 1524 0 1428.8 0C1333.7 0 1238.3 0 1143 0C1047.7 0 952.3 0 857 0C761.7 0 666.3 0 571.2 0C476 0 381 0 285.8 0C190.7 0 95.3 0 47.7 0L0 0Z" fill="#1f2937"></path></svg>

Before

Width:  |  Height:  |  Size: 2.5 KiB

@ -1 +0,0 @@
<svg id="visual" viewBox="0 0 2000 500" width="2000" height="500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><path d="M0 312L47.7 311.7C95.3 311.3 190.7 310.7 285.8 327.7C381 344.7 476 379.3 571.2 375C666.3 370.7 761.7 327.3 857 318C952.3 308.7 1047.7 333.3 1143 328.3C1238.3 323.3 1333.7 288.7 1428.8 290.5C1524 292.3 1619 330.7 1714.2 348.2C1809.3 365.7 1904.7 362.3 1952.3 360.7L2000 359L2000 0L1952.3 0C1904.7 0 1809.3 0 1714.2 0C1619 0 1524 0 1428.8 0C1333.7 0 1238.3 0 1143 0C1047.7 0 952.3 0 857 0C761.7 0 666.3 0 571.2 0C476 0 381 0 285.8 0C190.7 0 95.3 0 47.7 0L0 0Z" fill="#eff1f3"></path><path d="M0 339L47.7 320.3C95.3 301.7 190.7 264.3 285.8 255.5C381 246.7 476 266.3 571.2 283.5C666.3 300.7 761.7 315.3 857 306.8C952.3 298.3 1047.7 266.7 1143 249C1238.3 231.3 1333.7 227.7 1428.8 222.3C1524 217 1619 210 1714.2 209.7C1809.3 209.3 1904.7 215.7 1952.3 218.8L2000 222L2000 0L1952.3 0C1904.7 0 1809.3 0 1714.2 0C1619 0 1524 0 1428.8 0C1333.7 0 1238.3 0 1143 0C1047.7 0 952.3 0 857 0C761.7 0 666.3 0 571.2 0C476 0 381 0 285.8 0C190.7 0 95.3 0 47.7 0L0 0Z" fill="#eceff1"></path><path d="M0 182L47.7 187.2C95.3 192.3 190.7 202.7 285.8 211.5C381 220.3 476 227.7 571.2 237C666.3 246.3 761.7 257.7 857 246C952.3 234.3 1047.7 199.7 1143 188.5C1238.3 177.3 1333.7 189.7 1428.8 201.2C1524 212.7 1619 223.3 1714.2 218C1809.3 212.7 1904.7 191.3 1952.3 180.7L2000 170L2000 0L1952.3 0C1904.7 0 1809.3 0 1714.2 0C1619 0 1524 0 1428.8 0C1333.7 0 1238.3 0 1143 0C1047.7 0 952.3 0 857 0C761.7 0 666.3 0 571.2 0C476 0 381 0 285.8 0C190.7 0 95.3 0 47.7 0L0 0Z" fill="#eaecef"></path><path d="M0 105L47.7 110.8C95.3 116.7 190.7 128.3 285.8 134.7C381 141 476 142 571.2 151C666.3 160 761.7 177 857 178.8C952.3 180.7 1047.7 167.3 1143 160.5C1238.3 153.7 1333.7 153.3 1428.8 154.5C1524 155.7 1619 158.3 1714.2 152.2C1809.3 146 1904.7 131 1952.3 123.5L2000 116L2000 0L1952.3 0C1904.7 0 1809.3 0 1714.2 0C1619 0 1524 0 1428.8 0C1333.7 0 1238.3 0 1143 0C1047.7 0 952.3 0 857 0C761.7 0 666.3 0 571.2 0C476 0 381 0 285.8 0C190.7 0 95.3 0 47.7 0L0 0Z" fill="#e7eaed"></path><path d="M0 63L47.7 67.7C95.3 72.3 190.7 81.7 285.8 84.5C381 87.3 476 83.7 571.2 81.5C666.3 79.3 761.7 78.7 857 81C952.3 83.3 1047.7 88.7 1143 84.7C1238.3 80.7 1333.7 67.3 1428.8 63.3C1524 59.3 1619 64.7 1714.2 64.8C1809.3 65 1904.7 60 1952.3 57.5L2000 55L2000 0L1952.3 0C1904.7 0 1809.3 0 1714.2 0C1619 0 1524 0 1428.8 0C1333.7 0 1238.3 0 1143 0C1047.7 0 952.3 0 857 0C761.7 0 666.3 0 571.2 0C476 0 381 0 285.8 0C190.7 0 95.3 0 47.7 0L0 0Z" fill="#e5e7eb"></path></svg>

Before

Width:  |  Height:  |  Size: 2.5 KiB

@ -1 +0,0 @@
<svg id="visual" viewBox="0 0 2000 500" width="2000" height="500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><path d="M0 186L47.7 186.3C95.3 186.7 190.7 187.3 285.8 170.3C381 153.3 476 118.7 571.2 123C666.3 127.3 761.7 170.7 857 180C952.3 189.3 1047.7 164.7 1143 169.7C1238.3 174.7 1333.7 209.3 1428.8 207.5C1524 205.7 1619 167.3 1714.2 149.8C1809.3 132.3 1904.7 135.7 1952.3 137.3L2000 139L2000 501L1952.3 501C1904.7 501 1809.3 501 1714.2 501C1619 501 1524 501 1428.8 501C1333.7 501 1238.3 501 1143 501C1047.7 501 952.3 501 857 501C761.7 501 666.3 501 571.2 501C476 501 381 501 285.8 501C190.7 501 95.3 501 47.7 501L0 501Z" fill="#141c2b"></path><path d="M0 159L47.7 177.7C95.3 196.3 190.7 233.7 285.8 242.5C381 251.3 476 231.7 571.2 214.5C666.3 197.3 761.7 182.7 857 191.2C952.3 199.7 1047.7 231.3 1143 249C1238.3 266.7 1333.7 270.3 1428.8 275.7C1524 281 1619 288 1714.2 288.3C1809.3 288.7 1904.7 282.3 1952.3 279.2L2000 276L2000 501L1952.3 501C1904.7 501 1809.3 501 1714.2 501C1619 501 1524 501 1428.8 501C1333.7 501 1238.3 501 1143 501C1047.7 501 952.3 501 857 501C761.7 501 666.3 501 571.2 501C476 501 381 501 285.8 501C190.7 501 95.3 501 47.7 501L0 501Z" fill="#161f2e"></path><path d="M0 316L47.7 310.8C95.3 305.7 190.7 295.3 285.8 286.5C381 277.7 476 270.3 571.2 261C666.3 251.7 761.7 240.3 857 252C952.3 263.7 1047.7 298.3 1143 309.5C1238.3 320.7 1333.7 308.3 1428.8 296.8C1524 285.3 1619 274.7 1714.2 280C1809.3 285.3 1904.7 306.7 1952.3 317.3L2000 328L2000 501L1952.3 501C1904.7 501 1809.3 501 1714.2 501C1619 501 1524 501 1428.8 501C1333.7 501 1238.3 501 1143 501C1047.7 501 952.3 501 857 501C761.7 501 666.3 501 571.2 501C476 501 381 501 285.8 501C190.7 501 95.3 501 47.7 501L0 501Z" fill="#192231"></path><path d="M0 393L47.7 387.2C95.3 381.3 190.7 369.7 285.8 363.3C381 357 476 356 571.2 347C666.3 338 761.7 321 857 319.2C952.3 317.3 1047.7 330.7 1143 337.5C1238.3 344.3 1333.7 344.7 1428.8 343.5C1524 342.3 1619 339.7 1714.2 345.8C1809.3 352 1904.7 367 1952.3 374.5L2000 382L2000 501L1952.3 501C1904.7 501 1809.3 501 1714.2 501C1619 501 1524 501 1428.8 501C1333.7 501 1238.3 501 1143 501C1047.7 501 952.3 501 857 501C761.7 501 666.3 501 571.2 501C476 501 381 501 285.8 501C190.7 501 95.3 501 47.7 501L0 501Z" fill="#1c2534"></path><path d="M0 435L47.7 430.3C95.3 425.7 190.7 416.3 285.8 413.5C381 410.7 476 414.3 571.2 416.5C666.3 418.7 761.7 419.3 857 417C952.3 414.7 1047.7 409.3 1143 413.3C1238.3 417.3 1333.7 430.7 1428.8 434.7C1524 438.7 1619 433.3 1714.2 433.2C1809.3 433 1904.7 438 1952.3 440.5L2000 443L2000 501L1952.3 501C1904.7 501 1809.3 501 1714.2 501C1619 501 1524 501 1428.8 501C1333.7 501 1238.3 501 1143 501C1047.7 501 952.3 501 857 501C761.7 501 666.3 501 571.2 501C476 501 381 501 285.8 501C190.7 501 95.3 501 47.7 501L0 501Z" fill="#1f2937"></path></svg>

Before

Width:  |  Height:  |  Size: 2.8 KiB

@ -1 +0,0 @@
<svg id="visual" viewBox="0 0 2000 500" width="2000" height="500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><path d="M0 186L47.7 186.3C95.3 186.7 190.7 187.3 285.8 170.3C381 153.3 476 118.7 571.2 123C666.3 127.3 761.7 170.7 857 180C952.3 189.3 1047.7 164.7 1143 169.7C1238.3 174.7 1333.7 209.3 1428.8 207.5C1524 205.7 1619 167.3 1714.2 149.8C1809.3 132.3 1904.7 135.7 1952.3 137.3L2000 139L2000 501L1952.3 501C1904.7 501 1809.3 501 1714.2 501C1619 501 1524 501 1428.8 501C1333.7 501 1238.3 501 1143 501C1047.7 501 952.3 501 857 501C761.7 501 666.3 501 571.2 501C476 501 381 501 285.8 501C190.7 501 95.3 501 47.7 501L0 501Z" fill="#eff1f3"></path><path d="M0 159L47.7 177.7C95.3 196.3 190.7 233.7 285.8 242.5C381 251.3 476 231.7 571.2 214.5C666.3 197.3 761.7 182.7 857 191.2C952.3 199.7 1047.7 231.3 1143 249C1238.3 266.7 1333.7 270.3 1428.8 275.7C1524 281 1619 288 1714.2 288.3C1809.3 288.7 1904.7 282.3 1952.3 279.2L2000 276L2000 501L1952.3 501C1904.7 501 1809.3 501 1714.2 501C1619 501 1524 501 1428.8 501C1333.7 501 1238.3 501 1143 501C1047.7 501 952.3 501 857 501C761.7 501 666.3 501 571.2 501C476 501 381 501 285.8 501C190.7 501 95.3 501 47.7 501L0 501Z" fill="#eceff1"></path><path d="M0 316L47.7 310.8C95.3 305.7 190.7 295.3 285.8 286.5C381 277.7 476 270.3 571.2 261C666.3 251.7 761.7 240.3 857 252C952.3 263.7 1047.7 298.3 1143 309.5C1238.3 320.7 1333.7 308.3 1428.8 296.8C1524 285.3 1619 274.7 1714.2 280C1809.3 285.3 1904.7 306.7 1952.3 317.3L2000 328L2000 501L1952.3 501C1904.7 501 1809.3 501 1714.2 501C1619 501 1524 501 1428.8 501C1333.7 501 1238.3 501 1143 501C1047.7 501 952.3 501 857 501C761.7 501 666.3 501 571.2 501C476 501 381 501 285.8 501C190.7 501 95.3 501 47.7 501L0 501Z" fill="#eaecef"></path><path d="M0 393L47.7 387.2C95.3 381.3 190.7 369.7 285.8 363.3C381 357 476 356 571.2 347C666.3 338 761.7 321 857 319.2C952.3 317.3 1047.7 330.7 1143 337.5C1238.3 344.3 1333.7 344.7 1428.8 343.5C1524 342.3 1619 339.7 1714.2 345.8C1809.3 352 1904.7 367 1952.3 374.5L2000 382L2000 501L1952.3 501C1904.7 501 1809.3 501 1714.2 501C1619 501 1524 501 1428.8 501C1333.7 501 1238.3 501 1143 501C1047.7 501 952.3 501 857 501C761.7 501 666.3 501 571.2 501C476 501 381 501 285.8 501C190.7 501 95.3 501 47.7 501L0 501Z" fill="#e7eaed"></path><path d="M0 435L47.7 430.3C95.3 425.7 190.7 416.3 285.8 413.5C381 410.7 476 414.3 571.2 416.5C666.3 418.7 761.7 419.3 857 417C952.3 414.7 1047.7 409.3 1143 413.3C1238.3 417.3 1333.7 430.7 1428.8 434.7C1524 438.7 1619 433.3 1714.2 433.2C1809.3 433 1904.7 438 1952.3 440.5L2000 443L2000 501L1952.3 501C1904.7 501 1809.3 501 1714.2 501C1619 501 1524 501 1428.8 501C1333.7 501 1238.3 501 1143 501C1047.7 501 952.3 501 857 501C761.7 501 666.3 501 571.2 501C476 501 381 501 285.8 501C190.7 501 95.3 501 47.7 501L0 501Z" fill="#e5e7eb"></path></svg>

Before

Width:  |  Height:  |  Size: 2.8 KiB

@ -0,0 +1 @@
<svg id="visual" viewBox="0 0 1000 1000" width="1000" height="1000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><g><g transform="translate(265 706)"><path d="M122.8 -98.8C144.2 -71.2 136 -21 123.6 26.1C111.1 73.2 94.4 117.2 62.2 134.9C30 152.6 -17.6 144 -63.4 124.6C-109.3 105.3 -153.3 75.2 -162.3 36.8C-171.2 -1.5 -145 -48.1 -112.1 -78.3C-79.2 -108.4 -39.6 -122.2 5.6 -126.7C50.8 -131.1 101.5 -126.3 122.8 -98.8Z" fill="#2e4aff"></path></g><g transform="translate(896 620)"><path d="M78.4 -71.8C99 -36.7 111.2 -4.3 107.9 30.4C104.6 65.1 85.8 102 51.8 125.2C17.8 148.3 -31.3 157.7 -71.1 141.1C-110.9 124.5 -141.4 81.8 -142.7 42.3C-143.9 2.8 -116 -33.7 -87.3 -70.6C-58.7 -107.5 -29.3 -144.8 -0.2 -144.7C28.9 -144.5 57.8 -106.9 78.4 -71.8Z" fill="#2e4aff"></path></g><g transform="translate(56 54)"><path d="M99.7 -66C134.2 -36.3 170.6 5.5 169.7 50.5C168.9 95.6 130.7 144 86.9 155.5C43.1 167 -6.4 141.6 -43.7 114.5C-81 87.5 -106 58.7 -113.2 26.1C-120.4 -6.4 -109.8 -42.7 -87.9 -69.6C-66.1 -96.5 -33 -113.9 -0.2 -113.8C32.6 -113.6 65.2 -95.8 99.7 -66Z" fill="#2e4aff"></path></g><g transform="translate(483 281)"><path d="M104.1 -78.2C128.3 -52.6 136.7 -9.8 128.8 31.1C120.8 71.9 96.4 110.7 61.2 127.9C26.1 145.1 -19.8 140.7 -57 121.5C-94.2 102.4 -122.7 68.4 -133.3 28.5C-144 -11.4 -136.7 -57.3 -111.5 -83.1C-86.3 -108.9 -43.2 -114.6 -1.6 -113.4C39.9 -112.1 79.9 -103.8 104.1 -78.2Z" fill="#2e4aff"></path></g><g transform="translate(964 57)"><path d="M69.1 -60.5C88.7 -30.4 103.3 -1.7 103.1 33.3C102.9 68.3 87.9 109.7 61.4 119.3C35 128.8 -2.8 106.5 -34.8 85.9C-66.9 65.2 -93.3 46.3 -100.7 20.9C-108.1 -4.4 -96.6 -36.1 -76.7 -66.3C-56.7 -96.5 -28.4 -125.1 -1.8 -123.6C24.7 -122.2 49.4 -90.6 69.1 -60.5Z" fill="#2e4aff"></path></g></g></svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 336 KiB

Loading…
Cancel
Save