Mid
/
bartindustries
1
0
Fork 0
Code Issues 1 Pull Requests Releases Activity

Update

Browse Source
main
Midnight 11 months ago
parent e4d078cd3d
commit ebe8fa58e7
5 changed files with 243 additions and 110 deletions
Show Stats Download Patch File Download Diff File

43
src/lib/home/Sona.svelte
Unescape View File

@ -91,6 +91,43 @@
/>
</div>
</div>
<div
class="flex flex-col gap-5 relative text-sm p-5 border-black border-opacity-10 dark:border-opacity-20 border-4"
>
<span id="about-coding" class="absolute top-0 -mt-40" />
<h4 class="text-lg font-bold">🖥️ Coding</h4>
<p>
I have an inherent distate to the endless tools, buildsteps and abstraction layers of the
modern world. Especially prelevant in fields like front-end webdevelopment. My philosophy
on the matter can not be explained better than by Emma Essex, creator of Halley Labs, who
wrote the following on their website:
</p>
<div class="bg-gray-200 p-5 flex gap-5">
<p class="text-6xl font-extrabold">"</p>
<blockquote cite="https://msx.horse/about.php">
as time has gone on, i have become fairly exhausted with the unnecesary bloat in all
things. my desire to better optimize, to work with fewer layers of abstraction, and so
on, continue to lead me back to a strong desire for utilitarian design. there is a
common misconception that stripping things to their roots robs them of personality, or
soul. this is naturally catastrophically untrue. it's just that when you get to that
point, the soul in all things is so bare that you have no choice but to really try to
understand it and interface with it. everything that goes on top is very cute and fun,
but attire is primarily cultural shorthand. as a people, we are better than needing
shorthand to understand or appreciate the soul in things. i encourage everybody to
search for the inherent soul in all things.
</blockquote>
</div>
<p>
I love working with a limited set of tools and create my own way of doing things. Per
example, working around the limitations of chat-based bots on Discord to build out my own
UI and functionalities. Unusual but robus solutions motivate me to continue.
</p>
</div>
</div>
<div class="lg:col-span-2 flex flex-col gap-5 overflow-x-hidden pt-10">
@ -125,7 +162,11 @@
>&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>
<a href="#about-coding" class="group"
>&lt;hobby&gt; <bold class="font-bold lg:text-base group-hover:underline text-[#2563EB]"
>coding</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]"

308
src/lib/home/Virtual.svelte
Unescape View File

@ -1,121 +1,213 @@
<main class="@container flex flex-col gap-20 relative">
<div class="absolute top-0 -mt-40" id="vr"></div>
<section class="w-full h-full flex flex-col justify-between gap-10 @lg:gap-20">
<h2 class="lg:hidden block baron text-6xl text-center @2xl:text-left @2xl:text-8xl text-blue-600">Virtual Reality</h2>
<div class="flex-col hidden lg:flex baron text-2xl lg:text-4xl 2xl:text-5xl text-left text-blue-600 lg:-ml-80 xl:-ml-40 2xl:-ml-10">
<div class="flex gap-5 items-end">
<h2 class="opacity-20 flex-none">Discover</h2>
<h2 class="opacity-20 flex-none">Discover</h2>
<h2 class="opacity-20 flex-none">Discover</h2>
<h2 class="flex-none text-4xl lg:text-5xl 2xl:text-6xl">Discover</h2>
<h2 class="opacity-20 flex-none">Discover</h2>
<h2 class="opacity-20 flex-none">Discover</h2>
<h2 class="opacity-20 flex-none">Discover</h2>
<h2 class="opacity-20 flex-none">Discover</h2>
<h2 class="opacity-20 flex-none">Discover</h2>
<h2 class="opacity-20 flex-none">Discover</h2>
<h2 class="opacity-20 flex-none">Discover</h2>
<h2 class="opacity-20 flex-none">Discover</h2>
<h2 class="opacity-20 flex-none">Discover</h2>
<h2 class="opacity-20 flex-none">Discover</h2>
<h2 class="opacity-20 flex-none">Discover</h2>
<h2 class="opacity-20 flex-none">Discover</h2>
<h2 class="opacity-20 flex-none">Discover</h2>
<h2 class="opacity-20 flex-none">Discover</h2>
<h2 class="opacity-20 flex-none">Discover</h2>
<h2 class="opacity-20 flex-none">Discover</h2>
<h2 class="opacity-20 flex-none">Discover</h2>
<h2 class="opacity-20 flex-none">Discover</h2>
<h2 class="opacity-20 flex-none">Discover</h2>
<h2 class="opacity-20 flex-none">Discover</h2>
<h2 class="opacity-20 flex-none">Discover</h2>
<h2 class="opacity-20 flex-none">Discover</h2>
<h2 class="opacity-20 flex-none">Discover</h2>
<h2 class="opacity-20 flex-none">Discover</h2>
<h2 class="opacity-20 flex-none">Discover</h2>
<h2 class="opacity-20 flex-none">Discover</h2>
<h2 class="opacity-20 flex-none">Discover</h2>
<h2 class="opacity-20 flex-none">Discover</h2>
<h2 class="opacity-20 flex-none">Discover</h2>
<h2 class="opacity-20 flex-none">Discover</h2>
<h2 class="opacity-20 flex-none">Discover</h2>
<h2 class="opacity-20 flex-none">Discover</h2>
<h2 class="opacity-20 flex-none">Discover</h2>
</div>
<div class="flex gap-5 items-end">
<h2 class="opacity-20 flex-none">Virtual Creativity</h2>
<h2 class="opacity-20 flex-none">Virtual Creativity</h2>
<h2 class="flex-none text-4xl lg:text-5xl 2xl:text-6xl">Virtual Creativity</h2>
<h2 class="opacity-20 flex-none">Virtual Creativity</h2>
<h2 class="opacity-20 flex-none">Virtual Creativity</h2>
<h2 class="opacity-20 flex-none">Virtual Creativity</h2>
<h2 class="opacity-20 flex-none">Virtual Creativity</h2>
<h2 class="opacity-20 flex-none">Virtual Creativity</h2>
<h2 class="opacity-20 flex-none">Virtual Creativity</h2>
<h2 class="opacity-20 flex-none">Virtual Creativity</h2>
<h2 class="opacity-20 flex-none">Virtual Creativity</h2>
<h2 class="opacity-20 flex-none">Virtual Creativity</h2>
<h2 class="opacity-20 flex-none">Virtual Creativity</h2>
<h2 class="opacity-20 flex-none">Virtual Creativity</h2>
<h2 class="opacity-20 flex-none">Virtual Creativity</h2>
<h2 class="opacity-20 flex-none">Virtual Creativity</h2>
<h2 class="opacity-20 flex-none">Virtual Creativity</h2>
<h2 class="opacity-20 flex-none">Virtual Creativity</h2>
<h2 class="opacity-20 flex-none">Virtual Creativity</h2>
<h2 class="opacity-20 flex-none">Virtual Creativity</h2>
<h2 class="opacity-20 flex-none">Virtual Creativity</h2>
</div>
</div>
<article class="grid container grid-cols-1 @6xl:grid-cols-4 gap-5 relative">
<h2 class="rotate-[177deg] 2xl: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>
<main class="@container flex flex-col relative">
<div class="absolute top-0 -mt-40" id="vr" />
<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" />
<div class="text-center text-xl font-bold flex flex-col text-[#2563EB] fira @2xl:-mt-60">
<div class="opacity-10 flex w-screen justify-between">
<span>//</span>
<span>//</span>
</div>
<div class="opacity-20 flex w-screen justify-between">
<span>///</span>
<span>///</span>
</div>
<div class="opacity-30 flex w-screen justify-between">
<span>////</span>
<span>////</span>
</div>
<div class="opacity-40 flex w-screen justify-between">
<span>/////</span>
<span>/////</span>
</div>
<div class="opacity-50 flex w-screen justify-between">
<span>//////////</span>
<span>//////////</span>
</div>
<div class="opacity-60 flex w-screen justify-between">
<span>////////////////////</span>
<span>////////////////////</span>
</div>
<div class="opacity-70 flex w-screen justify-between">
<span>//////////////////////////////</span>
<span>//////////////////////////////</span>
</div>
<div class="opacity-80 flex w-screen justify-between">
<span>////////////////////////////////////////</span>
<span>////////////////////////////////////////</span>
</div>
<div class="opacity-90">
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
</div>
<div class="opacity-100">
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
</div>
<div class="opacity-100">
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
</div>
<div class="opacity-100">
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
</div>
<div class="opacity-90">
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
</div>
<div class="opacity-80 flex w-screen justify-between">
<span>////////////////////////////////////////</span>
<span>////////////////////////////////////////</span>
</div>
<div class="opacity-70 flex w-screen justify-between">
<span>//////////////////////////////</span>
<span>//////////////////////////////</span>
</div>
<div class="opacity-60 flex w-screen justify-between">
<span>////////////////////</span>
<span>////////////////////</span>
</div>
<div class="opacity-50 flex w-screen justify-between">
<span>//////////</span>
<span>//////////</span>
</div>
<div class="opacity-40 flex w-screen justify-between">
<span>/////</span>
<span>/////</span>
</div>
<div class="opacity-30 flex w-screen justify-between">
<span>////</span>
<span>////</span>
</div>
<div class="opacity-20 flex w-screen justify-between">
<span>///</span>
<span>///</span>
</div>
<div class="opacity-10 flex w-screen justify-between">
<span>//</span>
<span>//</span>
</div>
</div>
<img src="/homepage/vr/fancy.png" class="skew-x-3 object-cover @6xl:aspect-[1/1] w-full h-full" alt="couch" />
<section class="w-full h-full flex flex-col justify-between gap-10 @2xl:gap-20 @2xl:-mt-40">
<div class="baron text-2xl lg:text-4xl 2xl:text-5xl text-center text-blue-600 mx-auto">
<h2 class="text-4xl lg:text-4xl 2xl:text-6xl">Discover</h2>
<h2 class="text-4xl lg:text-6xl 2xl:text-8xl">Virtual Creativity</h2>
</div>
<div class="object-cover @6xl:aspect-[2/1] h-full w-full @6xl:col-span-2 flex flex-col gap-5 2xl:text-lg relative">
<div class="absolute inset-0 w-full h-full bg-white dark:bg-black skew-x-3"></div>
<article class="grid container grid-cols-1 @6xl:grid-cols-4 gap-5 relative">
<h2
class="rotate-[177deg] 2xl: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/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/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 2xl:text-lg relative"
>
<div class="absolute inset-0 w-full h-full bg-white dark:bg-black skew-x-3" />
<p class="w-full h-full p-5 2xl:p-10 z-10">
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 attempts 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.
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 attempts 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/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/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" />
<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" />
<img src="/homepage/vr/bsaber.png" class="skew-x-3 lg:-skew-x-3 lg:-ml-5 object-cover @6xl:aspect-[1/1] w-full h-full" 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-[2/1] h-full w-full @6xl:col-span-2 flex flex-col gap-5 2xl:text-lg lg:-ml-3 relative">
<div class="absolute inset-0 w-full h-full bg-white dark:bg-black skew-x-3"></div>
<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/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"
/>
<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"
/>
<img
src="/homepage/vr/bsaber.png"
class="skew-x-3 lg:-skew-x-3 lg:-ml-5 object-cover @6xl:aspect-[1/1] w-full h-full"
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-[2/1] h-full w-full @6xl:col-span-2 flex flex-col gap-5 2xl:text-lg lg:-ml-3 relative"
>
<div class="absolute inset-0 w-full h-full bg-white dark:bg-black skew-x-3" />
<p class="w-full h-full p-5 2xl:p-10 z-10">
Because of my adventures in virtual reality 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, and I have created many worlds and systems inside these VR platforms.
<br/><br/>
In my experience auxiliary skills, like in this case having knowledge of the inner workings of the software that makes these emerging technological markets possible, 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.
Because of my adventures in virtual reality 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, and I have created many worlds and systems inside these VR
platforms.
<br /><br />
In my experience auxiliary skills, like in this case having knowledge of the inner workings
of the software that makes these emerging technological markets possible, 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>
</div>
<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/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="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="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="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="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" />
<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/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="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="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="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="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>
</section>
</main>
</main>

2
src/routes/+page.svelte
Unescape View File

@ -37,7 +37,7 @@
<Sona />
</div>
<div class="bg-repeat-y bg-contain dotsandlines py-20">
<div class="bg-repeat-y bg-contain dotsandlines mt-20 mb-20">
<Virtual />
</div>

BIN
static/bg_about.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 693 B

BIN
static/bg_about.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 340 B

Write Preview
Loading…
Cancel
Save