Fixes on smaller screen sizes

main
Midnight 1 year ago
parent 7e5c889957
commit c4fd9458c1

@ -3,12 +3,12 @@
<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="lg:hidden block baron 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>
<div class="flex-col hidden lg:flex baron text-5xl text-left text-blue-600 -ml-10"> <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"> <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="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-6xl">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>
@ -46,7 +46,7 @@
<div class="flex gap-5 items-end"> <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="opacity-20 flex-none">Virtual Creativity</h2> <h2 class="opacity-20 flex-none">Virtual Creativity</h2>
<h2 class="flex-none text-6xl">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>
@ -69,15 +69,15 @@
</div> </div>
<article class="grid container grid-cols-1 @6xl:grid-cols-4 gap-5 relative"> <article class="grid container 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> <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/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" /> <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="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 dark:bg-black 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"> <p class="absolute inset-0 w-full h-full lg:p-5 2xl:p-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. 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/> <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. 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.
@ -94,12 +94,12 @@
<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" /> <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="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> <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"> <p class="absolute inset-0 w-full h-full lg:p-5 2xl: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. 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/> <br/><br/>
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. 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> </p>
</div> </div>

Loading…
Cancel
Save