New visuals for vr section and visual improvements

main
Midnight 1 year ago
parent d0b29d2630
commit 0353871b0c

File diff suppressed because one or more lines are too long

@ -3,19 +3,37 @@
export let type = "default"; export let type = "default";
</script> </script>
<div class="@container grid @lg:grid-cols-2 @xl:grid-cols-3 grid-cols-1 flex-wrap gap-3"> <div class="@container grid grid-cols-2 @xl:grid-cols-3 @2xl:grid-cols-4 flex-wrap gap-3">
<Social <Social
url="https://mastodon.social/@midblep" url="https://mastodon.social/@midblep"
title="My profile on the fediverse!" title="My profile on the fediverse!"
icon="🐘" icon="🐘"
text="Mastodon" text="Mastodon"
/> />
<Social
url="https://mastodon.social/@midblep"
title="Bird app (or X?)"
icon="🐦"
text="Twitter (X)"
/>
<Social <Social
url="https://git.bartindustries.com/" url="https://git.bartindustries.com/"
title="Git repositories" title="Git repositories"
icon="🦊" icon="🗃️"
text="Git" text="Git"
/> />
<Social
url="https://gitlab.com/midblep"
title="GitLab repositories"
icon="🦊"
text="GitLab"
/>
<Social
url="https://github.com/midblep"
title="GitHub repositories"
icon="🐙"
text="GitHub"
/>
<Social <Social
url="https://discord.com/users/191525900880183296" url="https://discord.com/users/191525900880183296"
title="Mid#0001" title="Mid#0001"

@ -6,7 +6,7 @@
</script> </script>
<footer <footer
class="@container py-20 px-2 @lg:px-10 bg-white dark:bg-black dark:bg-opacity-50 text-black dark:text-white shadow z-20 flex flex-col gap-10" class="@container py-20 px-2 @lg:px-10 bg-white dark:bg-black dark:bg-opacity-50 text-black dark:text-white z-20 flex flex-col gap-10"
> >
<div class="absolute top-0 -mt-40" id="contact"></div> <div class="absolute top-0 -mt-40" id="contact"></div>

@ -136,7 +136,7 @@
</span> </span>
</div> </div>
<p class="text-gray-800 dark:text-gray-300 text-lg max-w-[900px]"> <p class="text-gray-800 dark:text-gray-300 lg:text-lg max-w-[900px]">
I'm a {calculateAge(new Date("2001-10-30"))} year old programmer and tech enthusiast from The Netherlands. I am an entrepeneur with the dream of creating the next generation of chatting freedom online with my company Flame Software. I'm a {calculateAge(new Date("2001-10-30"))} year old programmer and tech enthusiast from The Netherlands. I am an entrepeneur with the dream of creating the next generation of chatting freedom online with my company Flame Software.
<br/><br/> <br/><br/>
Bart Industries is my public digital home. It's a collection of my socials, work experiences and past projects, artworks, hobbies and interests, fursonas and anything else I feel like sharing with the world. Bart Industries is my public digital home. It's a collection of my socials, work experiences and past projects, artworks, hobbies and interests, fursonas and anything else I feel like sharing with the world.

@ -10,7 +10,7 @@
content: "It has taken me a while to develop, actually over 2.5 years of solo fullstack development with zero experience, but I finally managed to release and deploy the new Puppy Pride social network. There have definitely been ups an downs, and in this post I'd like to touch a little on what it took to get here and the lessons I learned along the way.", content: "It has taken me a while to develop, actually over 2.5 years of solo fullstack development with zero experience, but I finally managed to release and deploy the new Puppy Pride social network. There have definitely been ups an downs, and in this post I'd like to touch a little on what it took to get here and the lessons I learned along the way.",
url: "/blog/releasing-puppy-pride", url: "/blog/releasing-puppy-pride",
date: "August 11th 2023", date: "August 11th 2023",
isNew: true, isNew: false,
}, },
// { // {
// image: "/blog/thepowerofvr.png", // image: "/blog/thepowerofvr.png",
@ -34,7 +34,7 @@
content: "On the web...", content: "On the web...",
url: "/blog/centering-a-div", url: "/blog/centering-a-div",
date: "August 11th 2023", date: "August 11th 2023",
isNew: true, isNew: false,
} }
]; ];

@ -1,6 +1,4 @@
<script lang="ts"> <script lang="ts">
import Card from "./Card.svelte";
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
@ -18,14 +16,13 @@
<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-50 p-5"> <div class="flex flex-wrap gap-2 bg-black bg-opacity-5 dark:bg-opacity-50 p-5">
<p class="text-lg"> <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 want to know a little more about me, here are some of the things I like to do. For my past experience and portfolio, you can go <a href="#portfolio" class="a">here</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> </p>
</div> </div>
<hr class="lg:block hidden opacity-20 w-1/2 mx-auto my-5"/> <div class="flex flex-col gap-5 relative text-sm p-5 border-black border-opacity-10 dark:border-opacity-60 border-4">
<div class="flex flex-col gap-5 relative text-sm p-5 border-black border-opacity-10 dark:border-opacity-40 border-4">
<span id="about-computers" class="absolute top-0 -mt-40"></span> <span id="about-computers" class="absolute top-0 -mt-40"></span>
<h4 class="text-lg font-bold">🖥 Computers</h4> <h4 class="text-lg font-bold">🖥 Computers</h4>
@ -40,18 +37,25 @@
<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-40 border-4"> <div class="flex flex-col gap-5 relative text-sm p-5 border-black border-opacity-10 dark:border-opacity-60 border-4">
<span id="about-furry" class="absolute top-0 -mt-40"></span> <span id="about-furry" class="absolute top-0 -mt-40"></span>
<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 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.
<!-- For more on my fluffy side, there's a section detailing my various characters <a href="#furry" class="a">here</a>. --> 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> </p>
<div class="grid lg:grid-cols-3 gap-1">
<img src="/homepage/sona/hai.png" alt="mid" />
<img src="/homepage/sona/martintrans.png" alt="martin" />
<img src="/homepage/sona/leonard.png" alt="leonard" />
</div>
</div> </div>
<div class="flex flex-col gap-5 relative text-sm p-5 border-black border-opacity-10 dark:border-opacity-40 border-4"> <div class="flex flex-col gap-5 relative text-sm p-5 border-black border-opacity-10 dark:border-opacity-60 border-4">
<span id="about-drones" class="absolute top-0 -mt-40"></span> <span id="about-drones" class="absolute top-0 -mt-40"></span>
<h4 class="text-lg font-bold">🛩️ Drones</h4> <h4 class="text-lg font-bold">🛩️ Drones</h4>
@ -67,12 +71,12 @@
</div> </div>
</div> </div>
<div class="mt-5 lg:mt-0 lg:col-span-2 flex flex-col gap-5"> <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-20 dark:border-opacity-60 border-dashed border-4"> <div class="flex flex-col gap-1 text-sm p-5 border-black border-opacity-20 dark:border-opacity-60 border-dashed border-4">
<h4 class="-mt-12 lg:-mt-16 lg:text-lg bg-gray-200 dark:bg-gray-800 -mx-2 text-blue-500"> <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><br/>
<b>//</b> user details<br/> <b>//</b> user details<br/>
<b>////////////////////////////////////////</b> <b>////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////</b>
</h4> </h4>
<span class="h-2"></span> <span class="h-2"></span>
@ -82,15 +86,19 @@
<span>&lt;nationality&gt; <bold class="font-bold lg:text-base">dutch 🇳🇱</bold> &lt;/nationality&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-5"></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">coding</bold> &lt;/hobby&gt;</span>
<a href="#about-computers" class="group">&lt;hobby&gt; <bold class="font-bold lg:text-base group-hover:underline text-[#2563EB]">computers</bold> &lt;/hobby&gt;</a> <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">&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 class="h-5"></span>
<span>&lt;favorite&gt; <bold class="font-bold lg:text-base">coffee</bold> &lt;/favorite&gt;</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> <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>&lt;favorite&gt; <bold class="font-bold lg:text-base">3D printing</bold> &lt;/favorite&gt;</span>
</div> <span class="h-5"></span>
<img src="/homepage/sona/peaceful.png" alt="fursona" /> <span>&lt;me credits="Digitalizer"&gt;</span>
<img src="/homepage/sona/peaceful.png" alt="fursona" />
<span>&lt;/me&gt;</span>
</div>
</div> </div>
</div> </div>
</main> </main>

@ -1,95 +1,53 @@
<script>
import Card from "./Card.svelte";
</script>
<main class="@container container flex flex-col gap-20 relative"> <main class="@container container flex flex-col gap-20 relative">
<div class="absolute top-0 -mt-40" id="vr"></div> <div class="absolute top-0 -mt-40" id="vr"></div>
<section class="w-full h-full flex flex-col px-5 justify-between gap-10 lg:gap-20"> <section class="w-full h-full flex flex-col px-5 justify-between gap-10 lg:gap-20">
<h2 class="calderious text-6xl text-center @2xl:text-left @2xl:text-8xl text-blue-600">Virtual Reality</h2> <h2 class="lg:hidden block baron text-6xl text-center @2xl:text-left @2xl:text-8xl text-blue-600">Virtual Reality</h2>
<article class="grid grid-cols-1 @6xl:grid-cols-4 gap-5">
<img src="/homepage/vr/vr.png" class="rounded-xl object-cover @6xl:aspect-[1/2] w-full h-full @6xl:row-span-2" alt="couch" />
<img src="/homepage/vr/fancy.png" class="rounded-xl object-cover @6xl:aspect-[1/1] w-full h-full" alt="couch" />
<div class="object-cover @6xl:aspect-[1/1] h-full w-full @6xl:col-span-2 @6xl:row-span-2">
<Card
center={true}
>
<h3 class="font-bold text-2xl">I love Virtual Reality ❤</h3>
<p>
I believe the Metaverse is already here, and it's been here for years. The reason people haven't realized is because the thing companies sell us is not what the metaverse is actually about:
<br/><br/>
<i class="text-lg">
VR is a world of the free where anything is possible. Entire cities erected from a few button clicks. Friendships and communities built on creativity and compassion.
A place where anyone can be what they truly want to be without limitation. A place where humanity's light shines brighter than anywhere else.
</i>
<br/><br/>
And big tech takes those who already built the metaverse for fools, and sells us a future that is the same dull office space we're already dragging ourselves through in the real world.
<br/><br/>
So I joined these passionate and creative minds and started making my own worlds and communities, building a digital home for myself. The pictures here are some of the moments and places the world of VR has allowId me to create and witness.
</p>
</Card>
</div>
<img src="/homepage/vr/mad.png" class="rounded-xl object-cover @6xl:aspect-[1/1] w-full h-full" alt="couch" /> <article class="grid grid-cols-1 @6xl:grid-cols-4 gap-5 relative">
<h2 class="rotate-[177deg] lg:block absolute hidden top-0 left-0 -ml-20 baron text-6xl text-center @2xl:text-left @2xl:text-8xl text-blue-600" style="writing-mode: vertical-rl;">Virtual Reality</h2>
<img src="/homepage/vr/couch.png" class="rounded-xl object-cover @6xl:aspect-[3/2] w-full h-full @6xl:col-span-3 @6xl:row-span-2" alt="couch" /> <img src="/homepage/vr/vr.png" class="skew-x-3 lg:ml-3 object-cover @6xl:aspect-[1/2] w-full h-full @6xl:row-span-2" alt="couch" />
<img src="/homepage/vr/doggo.png" class="rounded-xl object-cover @6xl:aspect-[1/1] w-full h-full" alt="couch" /> <img src="/homepage/vr/fancy.png" class="skew-x-3 object-cover @6xl:aspect-[1/1] w-full h-full" alt="couch" />
<img src="/homepage/vr/bsaber.png" class="rounded-xl 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 lg:p-10 flex flex-col gap-5 text-lg">
<p>
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.
<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>
</div>
<img src="/homepage/vr/misty.png" class="rounded-xl object-cover @6xl:aspect-[1/1] w-full h-full" alt="couch" /> <img src="/homepage/vr/mad.png" class="skew-x-3 lg:ml-5 object-cover @6xl:aspect-[3/1] @6xl:col-span-3 w-full h-full" alt="couch" />
<img src="/homepage/vr/lights.png" class="rounded-xl object-cover @6xl:aspect-[1/1] w-full h-full" alt="couch" /> <img src="/homepage/vr/couch.png" class="skew-x-3 lg:-skew-x-3 lg:-ml-3 object-cover @6xl:aspect-[3/2] w-full h-full @6xl:col-span-3 @6xl:row-span-2" alt="couch" />
<div class="object-cover @6xl:aspect-[2/1] h-full w-full @6xl:col-span-2"> <img src="/homepage/vr/doggo.png" class="skew-x-3 lg:-skew-x-3 object-cover @6xl:aspect-[1/1] w-full h-full" alt="couch" />
<Card
center={true}
>
<h3 class="font-bold text-2xl">💪 Experience and skills</h3>
<p>
Because of my adventures in virtual reality I have gained knowledge surrounding things such as:
Game development (Unity), texturing (Substance Painter) and animating (Unity Animators).
Most of the avatars shown in the pictures are hand-made by me.
<br/><br/>
On top of that, I know my way around the world of VR.
Through my years of running events where people come together and celebrate VR I know the people and where to find them, and how to use VR to create success and push new frontiers.
</p>
</Card>
</div>
<img src="/homepage/vr/furality.png" class="rounded-xl object-cover @6xl:aspect-[1/1] w-full h-full" alt="couch" /> <img src="/homepage/vr/bsaber.png" class="skew-x-3 lg:-skew-x-3lg: lg:-ml-5 object-cover @6xl:aspect-[1/1] w-full h-full" alt="couch" />
<img src="/homepage/vr/fun.png" class="rounded-xl object-cover @6xl:aspect-[3/2] w-full h-full @6xl:col-span-3 @6xl:row-span-2" alt="couch" /> <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-[1/1] h-full w-full"> <div class="object-cover @6xl:aspect-[2/1] h-full w-full @6xl:col-span-2 lg:p-10 flex flex-col gap-5 text-lg">
<Card <p>
center={true} 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/>
<h3 class="font-bold text-2xl">🌍 Worldwide</h3> In my experience auxiliary skills like knowing how to get around on a Linux server, or in this case having knowledge of various 3D computer tools, often come in handy even when working in a completely different field. They make you a more versatile person with a broader range of knowledge that'll help inspire and solve difficult problems with unique solutions.
<p> </p>
Despite the "Metaverse" seemingly failing, the world of VR is huge. Companies like Disney already take it seriously, and every year millions of people from all over the world come together in events to celebrate it.
</p>
</Card>
</div> </div>
<img src="/homepage/vr/meet.png" class="rounded-xl object-cover @6xl:aspect-[2/1] w-full h-full @6xl:col-span-2" alt="couch" /> <img src="/homepage/vr/party.png" class="skew-x-3 lg:ml-2 object-cover @6xl:aspect-[1/1] w-full h-full" alt="couch" />
<img src="/homepage/vr/party.png" class="rounded-xl object-cover @6xl:aspect-[1/1] w-full h-full" alt="couch" />
<img src="/homepage/vr/guitar.png" class="rounded-xl object-cover @6xl:aspect-[1/2] w-full h-full @6xl:row-span-2" alt="couch" /> <img src="/homepage/vr/fun.png" class="skew-x-3 lg:ml-5 object-cover @6xl:aspect-[3/2] w-full h-full @6xl:col-span-3 @6xl:row-span-2" alt="couch" />
<img src="/homepage/vr/sly.png" class="rounded-xl object-cover @6xl:aspect-[1/1] w-full h-full" alt="couch" /> <img src="/homepage/vr/sly.png" class="skew-x-3 lg:ml-7 object-cover @6xl:aspect-[1/1] w-full h-full" alt="couch" />
<img src="/homepage/vr/dog.png" class="rounded-xl object-cover @6xl:aspect-[1/1] w-full h-full @6xl:col-span-2 @6xl:row-span-2" alt="couch" /> <img src="/homepage/vr/dog.png" class="skew-x-3 lg:-skew-x-3 object-cover @6xl:aspect-[1/1] w-full h-full @6xl:col-span-2 @6xl:row-span-2" alt="couch" />
<img src="/homepage/vr/dj.png" class="rounded-xl object-cover @6xl:aspect-[1/1] w-full h-full" alt="couch" /> <img src="/homepage/vr/dj.png" class="skew-x-3 lg:-skew-x-3 lg:ml-2 object-cover @6xl:aspect-[2/1] @6xl:col-span-2 w-full h-full" alt="couch" />
<img src="/homepage/vr/what.jpg" class="rounded-xl object-cover @6xl:aspect-[1/1] w-full h-full" alt="couch" /> <img src="/homepage/vr/what.jpg" class="skew-x-3 lg:-skew-x-3 lg:-ml-3 object-cover @6xl:aspect-[2/1] @6xl:col-span-2 w-full h-full" alt="couch" />
</article> </article>
</section> </section>

@ -23,10 +23,12 @@
<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> <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> </section>
<div class="flex flex-col gap-40 pb-40"> <div class="flex flex-col">
<Portfolio/> <div class="bg-top bg-contain bg-opacity-20" style="background-image: url('/portfolioblobs.svg');">
<Portfolio/>
</div>
<div class="flex flex-col"> <div class="flex flex-col pt-20 lg:pt-0">
<img class="dark:hidden block scale-150 lg:scale-100" src="/homepage/aboutwhite.svg" /> <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="hidden dark:block scale-150 lg:scale-100" src="/homepage/aboutdark.svg" />
@ -34,11 +36,11 @@
<Sona/> <Sona/>
</div> </div>
<img class="dark:hidden block rotate-180 lg:-mt-10 scale-150 lg:scale-100" src="/homepage/aboutwhite.svg" /> <img class="dark:hidden block rotate-180 lg:-mt-10 scale-150 lg:scale-100 dotsandlines bg-repeat-y bg-cover" src="/homepage/aboutwhite.svg" />
<img class="hidden dark:block rotate-180 lg:-mt-10 scale-150 lg:scale-100" src="/homepage/aboutdark.svg" /> <img class="hidden dark:block rotate-180 lg:-mt-10 scale-150 lg:scale-100 dotsandlines bg-repeat-y bg-cover" src="/homepage/aboutdark.svg" />
</div> </div>
<div class="bg-repeat-y bg-contain dotsandlines"> <div class="bg-repeat-y bg-contain dotsandlines py-40">
<Virtual/> <Virtual/>
</div> </div>

@ -1 +1 @@
<svg id="visual" viewBox="0 0 1440 200" width="1440" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><path d="M0 128L80 128L80 78L160 78L160 82L240 82L240 101L320 101L320 139L400 139L400 62L480 62L480 121L560 121L560 80L640 80L640 63L720 63L720 62L800 62L800 125L880 125L880 60L960 60L960 86L1040 86L1040 125L1120 125L1120 94L1200 94L1200 106L1280 106L1280 136L1360 136L1360 97L1440 97L1440 60L1440 201L1440 201L1360 201L1360 201L1280 201L1280 201L1200 201L1200 201L1120 201L1120 201L1040 201L1040 201L960 201L960 201L880 201L880 201L800 201L800 201L720 201L720 201L640 201L640 201L560 201L560 201L480 201L480 201L400 201L400 201L320 201L320 201L240 201L240 201L160 201L160 201L80 201L80 201L0 201Z" fill="#1f2937"></path></svg> <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: 785 B

After

Width:  |  Height:  |  Size: 951 B

@ -1 +1 @@
<svg id="visual" viewBox="0 0 1080 200" width="1080" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><path d="M0 75L60 75L60 129L120 129L120 64L180 64L180 107L240 107L240 91L300 91L300 73L360 73L360 113L420 113L420 138L480 138L480 87L540 87L540 102L600 102L600 90L660 90L660 68L720 68L720 108L780 108L780 65L840 65L840 84L900 84L900 63L960 63L960 118L1020 118L1020 111L1080 111L1080 83L1080 201L1080 201L1020 201L1020 201L960 201L960 201L900 201L900 201L840 201L840 201L780 201L780 201L720 201L720 201L660 201L660 201L600 201L600 201L540 201L540 201L480 201L480 201L420 201L420 201L360 201L360 201L300 201L300 201L240 201L240 201L180 201L180 201L120 201L120 201L60 201L60 201L0 201Z" fill="#E5E7EB"></path></svg> <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: 769 B

After

Width:  |  Height:  |  Size: 951 B

@ -0,0 +1 @@
<svg id="visual" viewBox="0 0 1500 1500" width="1500" height="1500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><g><g transform="translate(1288 1210)"><path d="M139.3 -174.2C171.9 -138.7 183.8 -86.6 195.6 -32.5C207.5 21.5 219.4 77.5 198.7 116.1C178.1 154.7 124.9 175.8 71.3 194.9C17.6 214.1 -36.4 231.2 -77.6 215.3C-118.7 199.3 -147.1 150.3 -164.4 103.2C-181.6 56.1 -187.8 11 -181.5 -33.2C-175.1 -77.3 -156.2 -120.5 -123.8 -156C-91.5 -191.6 -45.8 -219.6 3.8 -224.1C53.4 -228.7 106.7 -209.7 139.3 -174.2Z" fill="#0066ff"></path></g><g transform="translate(1384 242)"><path d="M105.3 -122.8C133.3 -101.9 150.7 -65.8 150.5 -31.7C150.4 2.4 132.7 34.4 114.7 66.8C96.7 99.3 78.4 132.3 51 143.9C23.6 155.5 -13 145.7 -43.3 129.9C-73.6 114.1 -97.8 92.3 -118.3 64.5C-138.9 36.8 -155.9 3.1 -154.9 -31.6C-153.9 -66.4 -134.9 -102.3 -106.1 -123C-77.3 -143.7 -38.6 -149.4 0 -149.4C38.6 -149.4 77.3 -143.7 105.3 -122.8Z" fill="#0066ff"></path></g><g transform="translate(9 1117)"><path d="M122.5 -152C151.7 -121.5 163.5 -76.2 164.3 -34.4C165.1 7.3 155.1 45.5 134.8 75.2C114.6 104.9 84.1 126.1 51.8 134.3C19.6 142.6 -14.4 137.8 -55.1 131.6C-95.8 125.4 -143.2 117.7 -170.2 89.3C-197.3 61 -204.1 11.9 -194.3 -32.6C-184.5 -77.2 -158.2 -117.1 -123 -146.6C-87.9 -176 -44 -194.9 1.4 -196.5C46.7 -198.1 93.3 -182.5 122.5 -152Z" fill="#0066ff"></path></g><g transform="translate(695 1035)"><path d="M75.7 -93.7C97 -72.3 112.5 -47.4 113.2 -23C113.9 1.4 99.7 25.4 84.3 45.5C68.9 65.5 52.2 81.6 29.7 96.1C7.1 110.6 -21.3 123.6 -46.3 118.3C-71.3 113 -92.8 89.5 -107.2 62.8C-121.6 36 -128.8 6 -122 -19.7C-115.3 -45.4 -94.6 -66.7 -72 -87.8C-49.3 -108.9 -24.6 -129.7 1.3 -131.3C27.2 -132.8 54.4 -115 75.7 -93.7Z" fill="#0066ff"></path></g><g transform="translate(142 335)"><path d="M115.2 -135.2C142 -114.8 151.5 -71.6 151.1 -32.7C150.7 6.2 140.5 40.7 124.4 74.7C108.2 108.8 86.1 142.3 54.6 156.6C23.1 171 -17.8 166.1 -53.9 151.5C-89.9 136.8 -121.1 112.4 -142.7 80C-164.2 47.6 -176.2 7.2 -171.9 -32.6C-167.7 -72.5 -147.2 -111.8 -115.9 -131.3C-84.5 -150.9 -42.3 -150.7 1 -151.8C44.2 -153 88.4 -155.5 115.2 -135.2Z" fill="#0066ff"></path></g><g transform="translate(832 458)"><path d="M57 -67.8C69.9 -57 73.7 -35.4 73.6 -16C73.5 3.4 69.3 20.5 62.8 40.4C56.3 60.3 47.3 82.9 29.8 95C12.3 107 -13.9 108.6 -36.4 100.3C-59 92 -77.9 74 -89.5 52.4C-101.1 30.8 -105.4 5.7 -100 -16.5C-94.7 -38.6 -79.8 -58 -61.5 -67.8C-43.2 -77.6 -21.6 -78 0.2 -78.2C22 -78.4 44 -78.6 57 -67.8Z" fill="#0066ff"></path></g></g></svg>

After

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 134 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.0 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 121 KiB

After

Width:  |  Height:  |  Size: 11 MiB

Loading…
Cancel
Save