Design improvements

main
Midnight 1 year ago
parent 8ba1436c31
commit 5598d01f91

@ -37,53 +37,15 @@
isNew: false,
}
];
onMount(() => {
if(browser) {
const slider: HTMLElement = document.querySelector('.items-blog');
let isDown = false;
let startX;
let scrollLeft;
let lastKnownScrollLeft;
slider.addEventListener('mousedown', (e) => {
isDown = true;
slider.classList.add('active');
startX = e.pageX - slider.offsetLeft;
scrollLeft = slider.scrollLeft;
});
slider.addEventListener('mouseleave', () => {
isDown = false;
slider.classList.remove('active');
});
slider.addEventListener('mouseup', () => {
isDown = false;
slider.classList.remove('active');
});
slider.addEventListener('mousemove', (e) => {
if(!isDown) return;
e.preventDefault();
const x = e.pageX - slider.offsetLeft;
const walk = (x - startX) * 1; //scroll-fast
slider.scrollLeft = scrollLeft - walk;
console.log(walk);
});
slider.addEventListener('wheel', (evt) => {
slider.scrollLeft += evt.deltaY;
if(slider.scrollLeft != lastKnownScrollLeft) evt.preventDefault();
lastKnownScrollLeft = slider.scrollLeft;
});
}
});
</script>
{#if posts.length > 0}
<section class="relative container flex flex-col gap-5 lg:gap-20">
<section class="relative container flex flex-col gap-5 lg:gap-20 py-20">
<div class="absolute top-0 -mt-40" id="blog"></div>
<h2 class="text-center w-full text-4xl lg:text-6xl tracking-[0.2em] lg:tracking-[1em] font-bold">&lt;-- BLOG --&gt;</h2>
<div class="flex flex-col lg:flex-row gap-5 overflow-visible">
<div class="flex flex-col lg:flex-row gap-5">
<span>
<Preview url={posts[0].url} title={posts[0].title} preview={posts[0].content.substring(0, 255) + ( posts[0].content.length > 255 ? "..." : "")} date={posts[0].date} image={posts[0].image} featured={true} isNew={posts[0].isNew} />
@ -92,7 +54,7 @@
{#if posts.length == 1}
<p class="p-10 text-sm opacity-50">No more posts to show...</p>
{:else}
<div class="grid grid-flow-col grid-rows-2 grid-cols-[repeat(12, 400px)] w-full gap-5 overflow-x-scroll pb-5 scrollbar scrollbar-thumb-white dark:scrollbar-thumb-black scrollbar-h-3 scrollbar-track-transparent scrollbar-thumb-rounded-full items-blog">
<div class="grid grid-flow-col grid-rows-2 grid-cols-3 w-full gap-5">
{#each posts as post, key}
{#if key != 0}
<Preview url={post.url} title={post.title} date={post.date} image={post.image} featured={false} isNew={post.isNew} />

@ -4,13 +4,13 @@
export let buttonHref = null;
export let center = false;
let classes = "z-10 flex flex-col group relative h-full";
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-4 bg-blue-600 rounded-t-xl duration-300"></span>
<span class="h-2 bg-gray-300 dark:bg-gray-700 rounded-t-xl duration-300"></span>
<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-800 dark:to-gray-700">
<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,7 +18,7 @@
<a
href={buttonHref}
target={buttonRedirect}
class="rounded-b-xl bg-white dark:bg-black 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"
>
<span class="px-5">{buttonText}</span>
</a>

@ -2,7 +2,7 @@
import Card from "./Card.svelte";
const words1 = [
const words = [
"JavaScript",
"<b>TypeScript</b>",
"MySQL",
@ -20,9 +20,6 @@
"<b>Blazor</b>",
"Redis",
"<b>Svelte</b>",
];
const words2 = [
"<b>SvelteKit</b>",
"Python",
"Django",
@ -32,17 +29,14 @@
"JavaFX",
"NGINX",
"Docker",
"PayPal",
"PayPal API",
"<b>REST</b>",
"GraphQL",
"TypeORM",
"<b>Eloquent</b>",
"Express",
"Bash",
".NET"
];
const words3 = [
".NET",
"Composer",
"AlpineJS",
"Blade",
@ -61,43 +55,39 @@
"Webpack",
"<b>Linux</b>",
];
</script>
<section class="relative">
<div class="absolute top-0 -mt-40" id="portfolio"></div>
<div class="@container container px-5 flex flex-col gap-5 lg:gap-10 justify-center">
<h2 class="fira text-center font-bold text-4xl lg:text-8xl text-blue-500">Portfolio</h2>
<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 my past and current projects and experiences</p>
</div>
<div class="grid grid-cols-1 @2xl:grid-cols-2 @6xl:grid-cols-3 gap-5 justify-between">
<span>
<Card
buttonHref="https://flamesoftware.net/"
buttonText="🔥 Visit early website"
>
<div class="container px-5 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" id="portfolio"></div>
<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="/logo.png"
src="/agroit.png"
class="h-8"
alt="flame"
/> Flame Software
alt="puppypride"
/> Agro IT
</div>
<span class="text-sm font-light">2022 and ongoing</span>
<span class="text-sm font-light">2023 and ongoing</span>
</h3>
<p class="text-sm text-gray-800 dark:text-gray-100">
Flame Software is a Software-as-a-Service company that is developing a new communications app
that intends to revolutionize the way we talk and socialize online.
Our mission is to make the net more connected, more privacy focused, and more healthy for your mental wellbeing.
<br/><br/>
We are currently in our early development stage, where I work as the CTO to lay down the groundworks
for this new app, which will be built using a combination of languages like Rust and TypeScript.
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>
</span>
<span class="@2xl:col-span-1 row-span-2 @container">
<span class="@xl:row-span-2">
<Card
buttonHref="https://puppypride.social"
buttonText="🌐 Visit the Puppy Pride social network"
@ -138,49 +128,6 @@
</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 3 student at the Saxion University of Applied Sciences in The Netherlands majoring in Software Engineering. The study keeps me plenty busy, but now I am combining the study with a Minor Entrepeneurship to build a SaaS product at my new company Flame Software.
<br/><br/>
Even though the university has taught me much about the business life and how to professionally work in teams, nearly all my programming knowledge is self taught at home.
</p>
</Card>
<span>
<Card
buttonHref="https://dubbelnull.com/showcase"
@ -206,23 +153,7 @@
</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">
🧑‍💻
Player Stats
</div>
</h3>
<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/>
In my study at Saxion I have done many projects, including ones for large companies such as AgroVision and Witteveen+Bos, where we worked in teams of people with different backgrounds to create a complete product.
</p>
<img src="/banner4.png" class="w-full -mb-5" alt="mid"/>
</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"
@ -258,7 +189,51 @@
<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>
<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">
🧑‍💻
Player Stats
</div>
</h3>
<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/>
In my study at Saxion I have done many projects, including ones for large companies such as AgroVision and Witteveen+Bos, where we worked in teams of people with different backgrounds to create a complete product.
</p>
<img src="/banner4.png" class="w-full -mb-5" alt="mid"/>
</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>
<span class="@xl:col-span-2">
<Card>
<h3
class="text-xl font-bold flex-wrap inline-flex items-center gap-3 justify-between"
@ -271,23 +246,34 @@
<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 my most used things:
</p>
<div id="scroll-container" class="flex gap-1 w-full justify-between text-center text-sm">
<div class="inline-flex flex-col gap-1">
{#each words1 as word}
<p>{@html word}</p>
{/each}
</div>
<div class="inline-flex flex-col gap-1">
{#each words2 as word}
<p>{@html word}</p>
{/each}
</div>
<div class="inline-flex flex-col gap-1">
{#each words3 as word}
<p>{@html word}</p>
<div id="scroll-container" class="flex flex-wrap gap-1 w-full text-center text-sm">
{#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>
<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>
<p class="text-sm text-gray-800 dark:text-gray-100">
I am always on the look out for new opportunities. If you need something done and you think I can help you, don't fret to <a href="#contact" class="a">contact me</a>.
</p>
</Card>
</div>
</div>

@ -76,9 +76,9 @@
<img src="/homepage/vr/fancy.png" class="skew-x-3 object-cover @6xl:aspect-[1/1] w-full h-full" alt="couch" />
<div class="object-cover @6xl:aspect-[2/1] h-full w-full @6xl:col-span-2 flex flex-col gap-5 text-lg relative">
<div class="absolute inset-0 w-full h-full bg-white skew-x-3"></div>
<div class="absolute inset-0 w-full h-full bg-white dark:bg-black skew-x-3"></div>
<p class="absolute inset-0 w-full h-full lg:p-10">
VR is a world of the free where anything is possible. A place where entire cities can be erected from just a few button clicks. A place where friendships and communities are built on creativity and compassion. A place where anyone can be what they truly want to be without limitation. A place where freedom flourishes and humanity's light shines brighter than anywhere else.
VR is a world where anything is possible. A place where cities can be built with just a few button clicks. A place where friendships and communities are built on creativity and compassion. A place where anyone can be what they want to be without limitation. A place where freedom flourishes and humanity's light shines brighter than anywhere else.
<br/><br/>
Despite what the failures of big-tech's attemps at creating a metaverse may make you think, VR is a very real and very big world consisting of millions of creative individuals with plenty of proven business models.
</p>
@ -95,7 +95,7 @@
<img src="/homepage/vr/meet.png" class="skew-x-3 lg:-ml-3 object-cover @6xl:aspect-[2/1] w-full h-full @6xl:col-span-2" alt="couch" />
<div class="object-cover @6xl:aspect-[2/1] h-full w-full @6xl:col-span-2 flex flex-col gap-5 text-lg lg:-ml-3 relative">
<div class="absolute inset-0 w-full h-full bg-white skew-x-3"></div>
<div class="absolute inset-0 w-full h-full bg-white dark:bg-black skew-x-3"></div>
<p class="absolute inset-0 w-full h-full lg:p-10">
Because of my adventures in virtual reality (and 3D printing) I have gained knowledge surrounding things such as game development, modelling and texturing. Most of the avatars shown in the pictures were hand-made by me.
<br/><br/>

@ -14,23 +14,19 @@
<main class="overflow-x-hidden flex flex-col">
<Banner />
<section class="flex flex-col">
<div class="bg-gray-200 dark:bg-gray-800 py-20">
<div class="bg-gray-200 dark:bg-gray-800">
<Blog/>
</div>
<svg class="hidden dark:block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#1f2937" fill-opacity="1" d="M0,224L48,186.7C96,149,192,75,288,69.3C384,64,480,128,576,133.3C672,139,768,85,864,101.3C960,117,1056,203,1152,234.7C1248,267,1344,245,1392,234.7L1440,224L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z"></path></svg>
<svg class="dark:hidden block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#e5e7eb" fill-opacity="1" d="M0,224L48,186.7C96,149,192,75,288,69.3C384,64,480,128,576,133.3C672,139,768,85,864,101.3C960,117,1056,203,1152,234.7C1248,267,1344,245,1392,234.7L1440,224L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z"></path></svg>
</section>
<img class="dark:hidden block scale-100" src="/homepage/topfadelight.svg" />
<img class="hidden dark:block scale-100" src="/homepage/topfadedark.svg" />
<div class="flex flex-col">
<div class="bg-top bg-contain bg-opacity-20" style="background-image: url('/portfolioblobs.svg');">
<div class="bg-[#3A53FF]">
<Portfolio/>
</div>
<div class="flex flex-col pt-20">
<img class="dark:hidden block scale-150 lg:scale-100" src="/homepage/aboutwhite.svg" />
<img class="hidden dark:block scale-150 lg:scale-100" src="/homepage/aboutdark.svg" />
<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/>
@ -39,14 +35,10 @@
<div class="dotsandlines">
<div class="h-[400px] bg-gradient-to-b from-gray-200 dark:from-gray-800"></div>
</div>
</div>
<div class="bg-repeat-y bg-contain dotsandlines pb-20">
<Virtual/>
</div>
<!-- <hr class="container opacity-10 mx-auto w-1/2"/>
<Furry/> -->
</div>
<!-- <Furry/> -->
</main>

@ -0,0 +1 @@
<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 13L83.3 13C166.7 13 333.3 13 500 13.3C666.7 13.7 833.3 14.3 916.7 14.7L1000 15L1000 0L916.7 0C833.3 0 666.7 0 500 0C333.3 0 166.7 0 83.3 0L0 0Z" fill="#3a53ff"></path><path d="M0 51L83.3 50.7C166.7 50.3 333.3 49.7 500 51.3C666.7 53 833.3 57 916.7 59L1000 61L1000 13L916.7 12.7C833.3 12.3 666.7 11.7 500 11.3C333.3 11 166.7 11 83.3 11L0 11Z" fill="#2950eb"></path><path d="M0 59L83.3 58.7C166.7 58.3 333.3 57.7 500 59.3C666.7 61 833.3 65 916.7 67L1000 69L1000 59L916.7 57C833.3 55 666.7 51 500 49.3C333.3 47.7 166.7 48.3 83.3 48.7L0 49Z" fill="#194bd7"></path><path d="M0 67L83.3 66.7C166.7 66.3 333.3 65.7 500 67C666.7 68.3 833.3 71.7 916.7 73.3L1000 75L1000 67L916.7 65C833.3 63 666.7 59 500 57.3C333.3 55.7 166.7 56.3 83.3 56.7L0 57Z" fill="#0847c2"></path><path d="M0 75L83.3 75C166.7 75 333.3 75 500 76.3C666.7 77.7 833.3 80.3 916.7 81.7L1000 83L1000 73L916.7 71.3C833.3 69.7 666.7 66.3 500 65C333.3 63.7 166.7 64.3 83.3 64.7L0 65Z" fill="#0042ae"></path><path d="M0 101L83.3 101C166.7 101 333.3 101 500 101.7C666.7 102.3 833.3 103.7 916.7 104.3L1000 105L1000 81L916.7 79.7C833.3 78.3 666.7 75.7 500 74.3C333.3 73 166.7 73 83.3 73L0 73Z" fill="#003d9a"></path><path d="M0 109L83.3 109C166.7 109 333.3 109 500 109.7C666.7 110.3 833.3 111.7 916.7 112.3L1000 113L1000 103L916.7 102.3C833.3 101.7 666.7 100.3 500 99.7C333.3 99 166.7 99 83.3 99L0 99Z" fill="#003786"></path><path d="M0 123L83.3 122.3C166.7 121.7 333.3 120.3 500 121C666.7 121.7 833.3 124.3 916.7 125.7L1000 127L1000 111L916.7 110.3C833.3 109.7 666.7 108.3 500 107.7C333.3 107 166.7 107 83.3 107L0 107Z" fill="#013172"></path><path d="M0 137L83.3 136C166.7 135 333.3 133 500 133.3C666.7 133.7 833.3 136.3 916.7 137.7L1000 139L1000 125L916.7 123.7C833.3 122.3 666.7 119.7 500 119C333.3 118.3 166.7 119.7 83.3 120.3L0 121Z" fill="#072b5f"></path><path d="M0 153L83.3 153C166.7 153 333.3 153 500 153.3C666.7 153.7 833.3 154.3 916.7 154.7L1000 155L1000 137L916.7 135.7C833.3 134.3 666.7 131.7 500 131.3C333.3 131 166.7 133 83.3 134L0 135Z" fill="#0d254c"></path><path d="M0 159L83.3 159C166.7 159 333.3 159 500 159.7C666.7 160.3 833.3 161.7 916.7 162.3L1000 163L1000 153L916.7 152.7C833.3 152.3 666.7 151.7 500 151.3C333.3 151 166.7 151 83.3 151L0 151Z" fill="#101e39"></path><path d="M0 201L83.3 201C166.7 201 333.3 201 500 201C666.7 201 833.3 201 916.7 201L1000 201L1000 161L916.7 160.3C833.3 159.7 666.7 158.3 500 157.7C333.3 157 166.7 157 83.3 157L0 157Z" fill="#111827"></path></svg>

After

Width:  |  Height:  |  Size: 2.6 KiB

@ -0,0 +1 @@
<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 13L83.3 13C166.7 13 333.3 13 500 13.3C666.7 13.7 833.3 14.3 916.7 14.7L1000 15L1000 0L916.7 0C833.3 0 666.7 0 500 0C333.3 0 166.7 0 83.3 0L0 0Z" fill="#3a53ff"></path><path d="M0 51L83.3 50.7C166.7 50.3 333.3 49.7 500 51.3C666.7 53 833.3 57 916.7 59L1000 61L1000 13L916.7 12.7C833.3 12.3 666.7 11.7 500 11.3C333.3 11 166.7 11 83.3 11L0 11Z" fill="#4465ff"></path><path d="M0 59L83.3 58.7C166.7 58.3 333.3 57.7 500 59.3C666.7 61 833.3 65 916.7 67L1000 69L1000 59L916.7 57C833.3 55 666.7 51 500 49.3C333.3 47.7 166.7 48.3 83.3 48.7L0 49Z" fill="#5275ff"></path><path d="M0 67L83.3 66.7C166.7 66.3 333.3 65.7 500 67C666.7 68.3 833.3 71.7 916.7 73.3L1000 75L1000 67L916.7 65C833.3 63 666.7 59 500 57.3C333.3 55.7 166.7 56.3 83.3 56.7L0 57Z" fill="#6084ff"></path><path d="M0 75L83.3 75C166.7 75 333.3 75 500 76.3C666.7 77.7 833.3 80.3 916.7 81.7L1000 83L1000 73L916.7 71.3C833.3 69.7 666.7 66.3 500 65C333.3 63.7 166.7 64.3 83.3 64.7L0 65Z" fill="#7093ff"></path><path d="M0 101L83.3 101C166.7 101 333.3 101 500 101.7C666.7 102.3 833.3 103.7 916.7 104.3L1000 105L1000 81L916.7 79.7C833.3 78.3 666.7 75.7 500 74.3C333.3 73 166.7 73 83.3 73L0 73Z" fill="#81a2ff"></path><path d="M0 109L83.3 109C166.7 109 333.3 109 500 109.7C666.7 110.3 833.3 111.7 916.7 112.3L1000 113L1000 103L916.7 102.3C833.3 101.7 666.7 100.3 500 99.7C333.3 99 166.7 99 83.3 99L0 99Z" fill="#93b0ff"></path><path d="M0 123L83.3 122.3C166.7 121.7 333.3 120.3 500 121C666.7 121.7 833.3 124.3 916.7 125.7L1000 127L1000 111L916.7 110.3C833.3 109.7 666.7 108.3 500 107.7C333.3 107 166.7 107 83.3 107L0 107Z" fill="#a5befe"></path><path d="M0 137L83.3 136C166.7 135 333.3 133 500 133.3C666.7 133.7 833.3 136.3 916.7 137.7L1000 139L1000 125L916.7 123.7C833.3 122.3 666.7 119.7 500 119C333.3 118.3 166.7 119.7 83.3 120.3L0 121Z" fill="#b8ccfc"></path><path d="M0 153L83.3 153C166.7 153 333.3 153 500 153.3C666.7 153.7 833.3 154.3 916.7 154.7L1000 155L1000 137L916.7 135.7C833.3 134.3 666.7 131.7 500 131.3C333.3 131 166.7 133 83.3 134L0 135Z" fill="#cbd9fb"></path><path d="M0 159L83.3 159C166.7 159 333.3 159 500 159.7C666.7 160.3 833.3 161.7 916.7 162.3L1000 163L1000 153L916.7 152.7C833.3 152.3 666.7 151.7 500 151.3C333.3 151 166.7 151 83.3 151L0 151Z" fill="#dfe7f8"></path><path d="M0 201L83.3 201C166.7 201 333.3 201 500 201C666.7 201 833.3 201 916.7 201L1000 201L1000 161L916.7 160.3C833.3 159.7 666.7 158.3 500 157.7C333.3 157 166.7 157 83.3 157L0 157Z" fill="#f3f4f6"></path></svg>

After

Width:  |  Height:  |  Size: 2.6 KiB

@ -0,0 +1 @@
<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 33L83.3 34.7C166.7 36.3 333.3 39.7 500 40C666.7 40.3 833.3 37.7 916.7 36.3L1000 35L1000 0L916.7 0C833.3 0 666.7 0 500 0C333.3 0 166.7 0 83.3 0L0 0Z" fill="#1f2937"></path><path d="M0 41L83.3 42.7C166.7 44.3 333.3 47.7 500 48C666.7 48.3 833.3 45.7 916.7 44.3L1000 43L1000 33L916.7 34.3C833.3 35.7 666.7 38.3 500 38C333.3 37.7 166.7 34.3 83.3 32.7L0 31Z" fill="#1b2f49"></path><path d="M0 53L83.3 54.3C166.7 55.7 333.3 58.3 500 59C666.7 59.7 833.3 58.3 916.7 57.7L1000 57L1000 41L916.7 42.3C833.3 43.7 666.7 46.3 500 46C333.3 45.7 166.7 42.3 83.3 40.7L0 39Z" fill="#15355b"></path><path d="M0 61L83.3 62C166.7 63 333.3 65 500 65.7C666.7 66.3 833.3 65.7 916.7 65.3L1000 65L1000 55L916.7 55.7C833.3 56.3 666.7 57.7 500 57C333.3 56.3 166.7 53.7 83.3 52.3L0 51Z" fill="#0c3a6e"></path><path d="M0 69L83.3 70C166.7 71 333.3 73 500 73.7C666.7 74.3 833.3 73.7 916.7 73.3L1000 73L1000 63L916.7 63.3C833.3 63.7 666.7 64.3 500 63.7C333.3 63 166.7 61 83.3 60L0 59Z" fill="#013f80"></path><path d="M0 97L83.3 97.3C166.7 97.7 333.3 98.3 500 98.3C666.7 98.3 833.3 97.7 916.7 97.3L1000 97L1000 71L916.7 71.3C833.3 71.7 666.7 72.3 500 71.7C333.3 71 166.7 69 83.3 68L0 67Z" fill="#004493"></path><path d="M0 105L83.3 105.3C166.7 105.7 333.3 106.3 500 106.3C666.7 106.3 833.3 105.7 916.7 105.3L1000 105L1000 95L916.7 95.3C833.3 95.7 666.7 96.3 500 96.3C333.3 96.3 166.7 95.7 83.3 95.3L0 95Z" fill="#0048a5"></path><path d="M0 119L83.3 119C166.7 119 333.3 119 500 119.7C666.7 120.3 833.3 121.7 916.7 122.3L1000 123L1000 103L916.7 103.3C833.3 103.7 666.7 104.3 500 104.3C333.3 104.3 166.7 103.7 83.3 103.3L0 103Z" fill="#004bb8"></path><path d="M0 131L83.3 131C166.7 131 333.3 131 500 131.3C666.7 131.7 833.3 132.3 916.7 132.7L1000 133L1000 121L916.7 120.3C833.3 119.7 666.7 118.3 500 117.7C333.3 117 166.7 117 83.3 117L0 117Z" fill="#004eca"></path><path d="M0 153L83.3 152.3C166.7 151.7 333.3 150.3 500 149.7C666.7 149 833.3 149 916.7 149L1000 149L1000 131L916.7 130.7C833.3 130.3 666.7 129.7 500 129.3C333.3 129 166.7 129 83.3 129L0 129Z" fill="#1051dc"></path><path d="M0 161L83.3 161C166.7 161 333.3 161 500 160.3C666.7 159.7 833.3 158.3 916.7 157.7L1000 157L1000 147L916.7 147C833.3 147 666.7 147 500 147.7C333.3 148.3 166.7 149.7 83.3 150.3L0 151Z" fill="#2652ee"></path><path d="M0 201L83.3 201C166.7 201 333.3 201 500 201C666.7 201 833.3 201 916.7 201L1000 201L1000 155L916.7 155.7C833.3 156.3 666.7 157.7 500 158.3C333.3 159 166.7 159 83.3 159L0 159Z" fill="#3a53ff"></path></svg>

After

Width:  |  Height:  |  Size: 2.6 KiB

@ -0,0 +1 @@
<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 33L83.3 34.7C166.7 36.3 333.3 39.7 500 40C666.7 40.3 833.3 37.7 916.7 36.3L1000 35L1000 0L916.7 0C833.3 0 666.7 0 500 0C333.3 0 166.7 0 83.3 0L0 0Z" fill="#e5e7eb"></path><path d="M0 41L83.3 42.7C166.7 44.3 333.3 47.7 500 48C666.7 48.3 833.3 45.7 916.7 44.3L1000 43L1000 33L916.7 34.3C833.3 35.7 666.7 38.3 500 38C333.3 37.7 166.7 34.3 83.3 32.7L0 31Z" fill="#d2dbf0"></path><path d="M0 53L83.3 54.3C166.7 55.7 333.3 58.3 500 59C666.7 59.7 833.3 58.3 916.7 57.7L1000 57L1000 41L916.7 42.3C833.3 43.7 666.7 46.3 500 46C333.3 45.7 166.7 42.3 83.3 40.7L0 39Z" fill="#bfcff4"></path><path d="M0 61L83.3 62C166.7 63 333.3 65 500 65.7C666.7 66.3 833.3 65.7 916.7 65.3L1000 65L1000 55L916.7 55.7C833.3 56.3 666.7 57.7 500 57C333.3 56.3 166.7 53.7 83.3 52.3L0 51Z" fill="#adc3f8"></path><path d="M0 69L83.3 70C166.7 71 333.3 73 500 73.7C666.7 74.3 833.3 73.7 916.7 73.3L1000 73L1000 63L916.7 63.3C833.3 63.7 666.7 64.3 500 63.7C333.3 63 166.7 61 83.3 60L0 59Z" fill="#9cb6fb"></path><path d="M0 97L83.3 97.3C166.7 97.7 333.3 98.3 500 98.3C666.7 98.3 833.3 97.7 916.7 97.3L1000 97L1000 71L916.7 71.3C833.3 71.7 666.7 72.3 500 71.7C333.3 71 166.7 69 83.3 68L0 67Z" fill="#8baafe"></path><path d="M0 105L83.3 105.3C166.7 105.7 333.3 106.3 500 106.3C666.7 106.3 833.3 105.7 916.7 105.3L1000 105L1000 95L916.7 95.3C833.3 95.7 666.7 96.3 500 96.3C333.3 96.3 166.7 95.7 83.3 95.3L0 95Z" fill="#7b9cff"></path><path d="M0 119L83.3 119C166.7 119 333.3 119 500 119.7C666.7 120.3 833.3 121.7 916.7 122.3L1000 123L1000 103L916.7 103.3C833.3 103.7 666.7 104.3 500 104.3C333.3 104.3 166.7 103.7 83.3 103.3L0 103Z" fill="#6c8fff"></path><path d="M0 131L83.3 131C166.7 131 333.3 131 500 131.3C666.7 131.7 833.3 132.3 916.7 132.7L1000 133L1000 121L916.7 120.3C833.3 119.7 666.7 118.3 500 117.7C333.3 117 166.7 117 83.3 117L0 117Z" fill="#5d81ff"></path><path d="M0 153L83.3 152.3C166.7 151.7 333.3 150.3 500 149.7C666.7 149 833.3 149 916.7 149L1000 149L1000 131L916.7 130.7C833.3 130.3 666.7 129.7 500 129.3C333.3 129 166.7 129 83.3 129L0 129Z" fill="#5072ff"></path><path d="M0 161L83.3 161C166.7 161 333.3 161 500 160.3C666.7 159.7 833.3 158.3 916.7 157.7L1000 157L1000 147L916.7 147C833.3 147 666.7 147 500 147.7C333.3 148.3 166.7 149.7 83.3 150.3L0 151Z" fill="#4463ff"></path><path d="M0 201L83.3 201C166.7 201 333.3 201 500 201C666.7 201 833.3 201 916.7 201L1000 201L1000 155L916.7 155.7C833.3 156.3 666.7 157.7 500 158.3C333.3 159 166.7 159 83.3 159L0 159Z" fill="#3a53ff"></path></svg>

After

Width:  |  Height:  |  Size: 2.6 KiB

Loading…
Cancel
Save