You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
214 lines
9.3 KiB
214 lines
9.3 KiB
<main class="@container flex flex-col relative">
|
|
<div class="absolute top-0 -mt-40" id="vr" />
|
|
|
|
<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>
|
|
|
|
<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>
|
|
|
|
<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.
|
|
</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" />
|
|
<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.
|
|
</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"
|
|
/>
|
|
</article>
|
|
</section>
|
|
</main>
|