Improve design

main
Midnight 11 months ago
parent e6f2f6d834
commit a8df685320

@ -1,16 +1,22 @@
<script> <script>
export let buttonText = ""; export let buttonText = '';
export let buttonRedirect = "_blank"; export let buttonRedirect = '_blank';
export let buttonHref = null; export let buttonHref = null;
export let buttonImage = null;
export let center = false; 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> </script>
<div class={classes}> <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 /> <slot />
</div> </div>
@ -18,11 +24,16 @@
<a <a
href={buttonHref} href={buttonHref}
target={buttonRedirect} 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> </a>
{:else} {: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} {/if}
</div> </div>

@ -1,315 +1,379 @@
<script> <script>
import Card from './Card.svelte';
import Card from "./Card.svelte"; const words = [
'JavaScript',
const words = [
"JavaScript",
"<b class='text-blue-500'>TypeScript</b>", "<b class='text-blue-500'>TypeScript</b>",
"MySQL", 'MySQL',
"<b class='text-blue-500'>Laravel</b>", "<b class='text-blue-500'>Laravel</b>",
"PHP", 'PHP',
"Livewire", 'Livewire',
"<b class='text-blue-500'>NestJS</b>", "<b class='text-blue-500'>NestJS</b>",
"NodeJS", 'NodeJS',
"Unity", 'Unity',
"Substance Painter", 'Substance Painter',
"Blender", 'Blender',
"PostgreSQL", 'PostgreSQL',
"TailwindCSS", 'TailwindCSS',
"Rust", 'Rust',
"<b class='text-blue-500'>Blazor</b>", "<b class='text-blue-500'>Blazor</b>",
"Redis", 'Redis',
"<b class='text-blue-500'>Svelte</b>", "<b class='text-blue-500'>Svelte</b>",
"<b class='text-blue-500'>SvelteKit</b>", "<b class='text-blue-500'>SvelteKit</b>",
"Python", 'Python',
"Django", 'Django',
"Vue", 'Vue',
"<b class='text-blue-500'>Java</b>", "<b class='text-blue-500'>Java</b>",
"<b class='text-blue-500'>C#</b>", "<b class='text-blue-500'>C#</b>",
"JavaFX", 'JavaFX',
"NGINX", 'NGINX',
"Docker", 'Docker',
"PayPal API", 'PayPal API',
"<b class='text-blue-500'>REST</b>", "<b class='text-blue-500'>REST</b>",
"GraphQL", 'GraphQL',
"TypeORM", 'TypeORM',
"<b class='text-blue-500'>Eloquent</b>", "<b class='text-blue-500'>Eloquent</b>",
"Express", 'Express',
"Bash", 'Bash',
".NET", '.NET',
"Composer", 'Composer',
"AlpineJS", 'AlpineJS',
"Blade", 'Blade',
"JSX", 'JSX',
"Pug", 'Pug',
"<b class='text-blue-500'>Wordpress</b>", "<b class='text-blue-500'>Wordpress</b>",
"Vercel", 'Vercel',
"SEO", 'SEO',
"Netlify", 'Netlify',
"AWS S3", 'AWS S3',
"Backblaze", 'Backblaze',
"Bootstrap", 'Bootstrap',
"Fontawesome", 'Fontawesome',
"Sass", 'Sass',
".NET Core", '.NET Core',
"Webpack", 'Webpack',
"<b class='text-blue-500'>Linux</b>", "<b class='text-blue-500'>Linux</b>",
'Grafana',
'Prometheus'
]; ];
</script> </script>
<section class="relative"> <section class="relative">
<div class="@container flex flex-col justify-center"> <div class="@container flex flex-col justify-center">
<div class="flex flex-col gap-2 whitepigeon text-white text-center bg-[#3A53FF]"> <div class="flex flex-col gap-2 whitepigeon text-white text-center">
<h2 class="font-bold text-4xl lg:text-8xl">Portfolio</h2> <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> <p class="lg:text-lg">
</div> 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"> <span class="@2xl:row-span-2">
<div class="absolute top-0 -mt-40" id="portfolio"></div> <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> <Card buttonHref="https://saxion.nl" buttonText="🎓 Open Website">
<h3 <h3 class="text-xl font-bold flex-wrap inline-flex items-center gap-3 justify-between">
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 class="inline-flex gap-3"> </div>
<img <span class="text-sm font-light">2020 to 2024</span>
src="/agroit.png" </h3>
class="h-8" <p class="text-sm text-gray-800 dark:text-gray-100">
alt="puppypride" I am a year 4 student at the Saxion University of Applied Sciences in The Netherlands
/> Agro IT majoring in Software Engineering and expected to graduate in July of 2024.
</div> <br /><br />
<span class="text-sm font-light">2023 and ongoing</span> During the study I've done several projects for real clients and worked in teams comprised
</h3> of people with lots of different backgrounds. I have mostly worked with Java, JavaScript, Python
<p class="text-sm text-gray-800 dark:text-gray-100"> and C#.
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/> </p>
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/> <img src="homepage/computer.png" class="w-40" />
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. </Card>
</p>
</Card>
<span class="@xl:row-span-2"> <span>
<Card <Card buttonHref="https://dubbelnull.com/showcase" buttonText="➡️ View DubbelNull showcase">
buttonHref="https://puppypride.social" <h3 class="text-xl font-bold flex-wrap inline-flex items-center gap-3 justify-between">
buttonText="🌐 Visit the Puppy Pride social network" <div class="inline-flex gap-3">
> <img src="/dubbelnull.png" class="h-10 -my-1 -ml-1" alt="dubbelnull" /> DubbelNull
<div class="flex flex-col gap-5"> </div>
<span class="flex flex-col gap-5"> <span class="text-sm font-light">2020 and ongoing</span>
<h3 </h3>
class="text-xl flex-wrap font-bold inline-flex items-center gap-3 justify-between" <p class="text-sm text-gray-800 dark:text-gray-100">
> DubbelNull is a family business that does internet based development for small and
<div class="inline-flex gap-3"> medium sized companies, such as creating websites, manage hosting, advice and other
<img similar things. I have made several websites for clients under this name, and you can
src="/puppypride.png" find more of my works on the DubbelNull website.
class="h-8" </p>
alt="puppypride" </Card>
/> Puppy Pride </span>
</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> <span class="@xl:row-span-3 @container">
<Card <Card>
buttonHref="https://dubbelnull.com/showcase" <h3 class="text-xl font-bold flex-wrap inline-flex items-center gap-3 justify-between">
buttonText="➡️ View DubbelNull showcase" <div class="inline-flex gap-3">🏢 Internships</div>
> </h3>
<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-2 @container"> <div class="flex flex-col gap-2">
<Card> <span class="flex justify-between items-end"
<h3 ><b class="text-lg">Agro IT - Graduation project</b>
class="text-xl font-bold flex-wrap inline-flex items-center gap-3 justify-between" <p class="text-sm">2024</p></span
> >
<div class="inline-flex gap-3"> <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
Internships around employee management, time tracking and employee payouts that integrates with
</div> existing infrastructure and streamline the administrative process within the company
</h3> as well as for customers.
</p>
</div>
<div class="flex flex-col gap-2"> <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> <span class="flex justify-between items-end"
<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> ><b class="text-lg">Agro IT</b>
</div> <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"> <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> <span class="flex justify-between items-end"
<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> ><b class="text-lg">Witteveen+Bos</b>
</div> <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"> <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> <span class="flex justify-between items-end"
<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> ><b class="text-lg">AgroVision</b>
</div> <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"> <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> <span class="flex justify-between items-end"
<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> ><b class="text-lg">SuiteSeven</b>
</div> <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"> <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> <span class="flex justify-between items-end"
<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> ><b class="text-lg">Profity</b>
</div> <p class="text-sm">2018</p></span
</Card> >
</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"> <span class="@2xl:col-span-2">
<Card> <Card
<h3 buttonHref="https://furality.org/"
class="text-xl font-bold flex-wrap inline-flex items-center gap-3 justify-between" buttonImage="/fox.png"
> buttonText="Visit furality.org"
<div class="inline-flex gap-3"> >
🧑‍💻 <div class="grid grid-cols-2 gap-10">
Always open <div class="w-full">
</div> <h3
</h3> class="w-full text-xl font-bold flex-wrap inline-flex items-center gap-3 justify-between"
<div class="h-full flex flex-col justify-between"> >
<p class="text-sm text-gray-800 dark:text-gray-100"> <div class="inline-flex gap-3">
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. <img src="/furality.png" class="h-10 -my-1 -ml-1" alt="dubbelnull" />
<br/><br/> </div>
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. <span class="text-sm font-light">2023 and ongoing</span>
</p> </h3>
<img src="/banner4.png" class="w-full -mb-5" alt="mid"/> <p class="text-sm text-gray-800 dark:text-gray-100">
</div> Furality is a nonprofit event for the furry fandom held inside VRChat. It is the
</Card> largest furcon worldwide by attendees and uses proprietary technology in order to
</span> 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"> <span class="@xl:row-span-3">
<Card> <Card>
<h3 <h3 class="text-xl font-bold flex-wrap inline-flex items-center gap-3">
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
<img </h3>
src="/homepage/esu.png" <div class="flex flex-col pb-10">
class="h-10 rounded-full bg-black p-1" <p class="text-sm text-gray-800 dark:text-gray-100">
alt="esu" For the past years I've worked on building and writing a universe of mysteries called
/> Easter System Universe ESU. It is now mature enough to release, with several dimensions and planets on which
</h3> the natives speak their own unique languages.
<div class="h-full flex flex-col"> <br /><br />
<p class="text-sm text-gray-800 dark:text-gray-100"> The universe confronts you with anomalies and alien concepts familiar enough to relate
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. with as they fight for survival in an ever more technological world. Worlds collide as
<br/><br/> it becomes ever more apparent that the puppeteers of the world might not be who you think
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. they are, instigating a battle in which you must rely on hope to make it through.
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 />
<br/><br/> The first written story titled "Luther's Throne" is planned to release soon and will be
The first written story titled "Luther's Throne" is planned to release soon and will be published on this website. published on this website.
</p> </p>
</div> </div>
<span class="flex items-center"> <span class="flex items-center">
<img src="/homepage/esubanner.png" alt="cover of act 1" /> <img src="/homepage/esubanner.png" alt="cover of act 1" />
</span> </span>
</Card> </Card>
</span> </span>
<span class="@xl:row-span-2"> <span class="@2xl:row-span-2">
<Card> <Card>
<h3 <h3 class="text-xl font-bold flex-wrap inline-flex items-center gap-3 justify-between">
class="text-xl font-bold flex-wrap inline-flex items-center gap-3 justify-between" <div class="inline-flex gap-3">⚔️ Skills</div>
> </h3>
<div class="inline-flex gap-3"> <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
Skills common knowledge around computer software and hardware that i can use to quickly adapt
</div> to new languages and frameworks. Here is a constantly expanding list of some of the
</h3> things I am comfortable and like working with:
<p class="text-sm text-gray-800 dark:text-gray-100"> </p>
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: <div id="scroll-container" class="flex flex-wrap gap-1 w-full text-center">
</p> {#each words as word, key}
<div id="scroll-container" class="flex flex-wrap gap-1 w-full text-center"> <p>
{#each words as word, key} {#if key == words.length - 2}
<p> {@html word} and
{#if key == words.length - 2} {:else if key == words.length - 1}
{@html word} and {@html word}.
{:else if key == words.length - 1} {:else}
{@html word}. {@html word},
{:else} {/if}
{@html word}, </p>
{/if} {/each}
</p> </div>
{/each} <p class="text-sm font-bold italic pt-5">... and always eager to try out new things!</p>
</div> </Card>
</Card> </span>
</span>
<Card <span class="@xl:row-span-2 @container">
buttonHref="https://prideunbound.uk" <Card>
buttonText="📂 See archived 2023 Pride Unbound site" <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>
<div class="flex flex-col gap-5"> </h3>
<h3 <div class="h-full flex flex-col justify-between">
class="text-xl font-bold flex-wrap inline-flex items-center gap-3 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
<div class="inline-flex gap-3"> technologies that are proposed to me and like to share ideas and find new solutions to
<img problems together.
src="/prideunbound.png" <br /><br />
class="h-8 rounded-full" Most of my experiences listed have happened because people approached me with cool ideas.
alt="prideunbound" If you have something you need made and think we could provide value to each other, I would
/> Pride Unbound be glad to look at your opportunities.
</div> </p>
<span class="text-sm font-light">2023 and ongoing</span> <img src="/banner4.png" class="w-full -mb-5" alt="mid" />
</h3> </div>
<p class="text-sm text-gray-800 dark:text-gray-100"> </Card>
Pride Unbound is a convention based in London ran by Puppy Pride. I create and maintain their software and server infrastructure. </span>
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>
<Card <Card
buttonHref="https://saxion.nl" buttonHref="https://prideunbound.uk"
buttonText="🎓 Open Website" buttonText="📂 See archived 2023 Pride Unbound site"
> >
<h3 <div class="flex flex-col gap-5">
class="text-xl font-bold flex-wrap inline-flex items-center gap-3 justify-between" <h3 class="text-xl font-bold flex-wrap inline-flex items-center gap-3 justify-between">
> <div class="inline-flex gap-3">
<div class="inline-flex gap-3"> <img src="/prideunbound.png" class="h-8 rounded-full" alt="prideunbound" /> Pride Unbound
<img </div>
src="/saxion.png" <span class="text-sm font-light">2023 and ongoing</span>
class="h-8 rounded-full" </h3>
alt="puppypride" <p class="text-sm text-gray-800 dark:text-gray-100">
/> Saxion University Pride Unbound is a convention based in London ran by Puppy Pride. I create and maintain
</div> their software and server infrastructure. The website is custom made with Laravel and
<span class="text-sm font-light">2020 to 2024</span> has a registration system, payment system, scheduling system, booking system and CMS
</h3> pages system all managed by the event organisers through a dashboard.
<p class="text-sm text-gray-800 dark:text-gray-100"> </p>
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. </div>
During the study I've done numerous projects for real clients and worked in teams comprised of people with many different backgrounds. </Card>
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. </div>
</p> </div>
</Card>
</div>
</div>
</section> </section>

@ -1,5 +1,6 @@
<script lang="ts"> <script lang="ts">
function calculateAge(birthday) { // birthday is a date function calculateAge(birthday) {
// birthday is a date
var ageDifMs = Date.now() - birthday; var ageDifMs = Date.now() - birthday;
var ageDate = new Date(ageDifMs); // miliseconds from epoch var ageDate = new Date(ageDifMs); // miliseconds from epoch
return Math.abs(ageDate.getUTCFullYear() - 1970); return Math.abs(ageDate.getUTCFullYear() - 1970);
@ -7,44 +8,57 @@
</script> </script>
<main class="flex flex-col gap-10 lg:gap-20 container relative fira"> <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"> <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-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> <span class="text-lg lg:text-4xl font-extrabold">== "over mij"</span>
</h3> </h3>
<div class="grid lg:grid-cols-5 gap-5"> <div class="grid lg:grid-cols-5 gap-5">
<div class="lg:col-span-3 flex flex-col 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"> <div class="flex flex-wrap gap-2 bg-black bg-opacity-5 dark:bg-opacity-40 p-5">
<p class="font-bold"> <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. Hey there! I'm Pascal, but my internet name is Mid. Nice to have you here on my website.
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>. 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> </p>
</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"> <div
<span id="about-computers" class="absolute top-0 -mt-40"></span> 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> <h4 class="text-lg font-bold">🖥 Computers</h4>
<p> <p>
I love everything tech, as was probably obvious. But it goes beyond creating software. I love everything tech, as was probably obvious. But it goes beyond creating software. I
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. also built my own computer, and like to maintain hardware. At home I run a server rack
<br/><br/> equipped with a few Dell processing servers, doing my own research and hosting webservers,
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. 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> </p>
<img src="/homepage/proxmox.png" alt="proxmox environment" /> <img src="/homepage/proxmox.png" alt="proxmox environment" />
</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"> <div
<span id="about-furry" class="absolute top-0 -mt-40"></span> 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> <h4 class="text-lg font-bold">🦊 Furry</h4>
<p> <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. Being a furry is an important hobby and a creative outlet for me. In the digital world I
I am currently working on a section that details more about my fluffy life and all of my characters. 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>. --> <!-- For more about my fluffy side there's a section about it <a href="#furry" class="a">here</a>. -->
</p> </p>
@ -55,50 +69,92 @@
</div> </div>
</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"> <div
<span id="about-drones" class="absolute top-0 -mt-40"></span> 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> <h4 class="text-lg font-bold">🛩️ Drones</h4>
<p> <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> </p>
<div class="grid grid-cols-2 gap-1"> <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/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>
</div> </div>
<div class="lg:col-span-2 flex flex-col gap-5 overflow-x-hidden pt-10"> <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"> <div
<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"> class="flex flex-col gap-1 text-sm p-5 border-black border-opacity-10 dark:border-opacity-20 border-dashed border-4"
<b>////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////</b><br/> >
<b>//</b> user details<br/> <h4
<b>////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////</b> 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> </h4>
<span class="h-2"></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
<span>&lt;pronouns&gt; <bold class="font-bold lg:text-base">he / him</bold> &lt;/pronouns&gt;</span> >&lt;age&gt; <bold class="font-bold text-base"
<span>&lt;profession&gt; <bold class="font-bold lg:text-base">software engineer</bold> &lt;/profession&gt;</span> >{calculateAge(new Date('2001-10-30'))}</bold
<span>&lt;nationality&gt; <bold class="font-bold lg:text-base">dutch 🇳🇱</bold> &lt;/nationality&gt;</span> > &lt;/age&gt;</span
<span class="h-5"></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">coding</bold> &lt;/hobby&gt;</span>
<span>&lt;hobby&gt; <bold class="font-bold lg:text-base">gaming</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> <a href="#about-furry" class="group"
<span class="h-5"></span> >&lt;hobby&gt; <bold class="font-bold lg:text-base group-hover:underline text-[#2563EB]"
<span>&lt;favorite&gt; <bold class="font-bold lg:text-base">coffee</bold> &lt;/favorite&gt;</span> >furry</bold
<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> > &lt;/hobby&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 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>&lt;me credits="Digitalizer"&gt;</span> <span>&lt;me credits="Digitalizer"&gt;</span>
<img src="/homepage/sona/peaceful.png" alt="fursona" /> <img src="/homepage/sona/peaceful.png" alt="fursona" />
<span>&lt;/me&gt;</span> <span>&lt;/me&gt;</span>
</div> </div>
</div> </div>
</div> </div>
</main> </main>

@ -1,10 +1,10 @@
<script> <script>
import Banner from "$lib/home/Banner.svelte"; import Banner from '$lib/home/Banner.svelte';
import Blog from "$lib/home/Blog.svelte"; import Blog from '$lib/home/Blog.svelte';
import Portfolio from "$lib/home/Portfolio.svelte"; import Portfolio from '$lib/home/Portfolio.svelte';
import Sona from "$lib/home/Sona.svelte"; import Sona from '$lib/home/Sona.svelte';
import Virtual from "$lib/home/Virtual.svelte"; import Virtual from '$lib/home/Virtual.svelte';
import Furry from "$lib/home/Furry.svelte"; import Furry from '$lib/home/Furry.svelte';
</script> </script>
<svelte:head> <svelte:head>
@ -14,29 +14,31 @@
<main class="overflow-x-hidden flex flex-col"> <main class="overflow-x-hidden flex flex-col">
<Banner /> <Banner />
<div class="bg-gray-200 dark:bg-gray-800"> <div class="bg-gray-200 dark:bg-gray-800 pb-20">
<Blog/> <Blog />
</div> </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-gradient-to-b from-gray-200 via-gray-100 dark:via-gray-900 dark:from-gray-800 w-full"
<div class="bg-[#3A53FF] lg:pt-20"> >
<Portfolio/> <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> </div>
<img class="dark:hidden block scale-150 lg:scale-100 bg-[#3A53FF]" src="/homepage/aboutwhite.svg" /> <img class="scale-150 lg:mx-5 lg:scale-100 -mt-[1px]" src="/homepage/steps.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>
<div class="dotsandlines"> <div class="py-20">
<div class="h-[100px] lg:h-[400px] bg-gradient-to-b from-gray-200 dark:from-gray-800"></div> <Sona />
</div> </div>
<div class="bg-repeat-y bg-contain dotsandlines pb-20"> <div class="bg-repeat-y bg-contain dotsandlines py-20">
<Virtual/> <Virtual />
</div> </div>
<!-- <Furry/> --> <!-- <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