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

Design improvements

Browse Source
main
Midnight 1 year ago
parent 89f7b914af
commit 8ba1436c31
4 changed files with 82 additions and 28 deletions
Show Stats Download Patch File Download Diff File

2
src/lib/Socials.svelte
Unescape View File

@ -3,7 +3,7 @@
export let type = "default";
</script>
<div class="@container grid grid-cols-2 @xl:grid-cols-3 @2xl:grid-cols-4 flex-wrap gap-3">
<div class="@container grid grid-cols-2 @xl:grid-cols-3 @4xl:grid-cols-4 flex-wrap gap-3">
<Social
url="https://mastodon.social/@midblep"
title="My profile on the fediverse!"

17
src/lib/home/Portfolio.svelte
Unescape View File

@ -65,21 +65,8 @@
</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 justify-center">
<div class="flex justify-between relative items-center bg-gradient-to-r from-blue-700 dark:from-blue-700 dark:to-gray-900 to-gray-100 p-5 rounded-xl text-white">
<div class="flex flex-col gap-1">
<h2 class="font-bold text-4xl lg:text-6xl">Portfolio</h2>
<p>
A list of some of my most notable works, experiences, skills and jobs
</p>
</div>
<div class="absolute lg:flex hidden right-5 gap-5">
<img src="/homepage/sona/mid thinking.png" class="h-20 rounded-xl" alt="sticker" />
<img src="/homepage/sona/mid smug.png" class="h-20 rounded-xl" alt="sticker" />
<img src="/homepage/sona/mid blep.png" class="h-20 rounded-xl" alt="sticker" />
<img src="/homepage/sona/mid angry.png" class="h-20 rounded-xl" alt="sticker" />
</div>
</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="grid grid-cols-1 @2xl:grid-cols-2 @6xl:grid-cols-3 gap-5 justify-between">
<span>

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

@ -1,18 +1,83 @@
<main class="@container container flex flex-col gap-20 relative">
<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 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>
<div class="flex-col hidden lg:flex baron text-5xl text-left text-blue-600 -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-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-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 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>
<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 lg:p-10 flex flex-col gap-5 text-lg">
<p>
<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>
<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.
<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.
@ -29,8 +94,9 @@
<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 lg:p-10 flex flex-col gap-5 text-lg">
<p>
<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>
<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/>
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.

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

@ -28,19 +28,20 @@
<Portfolio/>
</div>
<div class="flex flex-col pt-20 lg:pt-0">
<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" />
<div class="bg-gray-200 dark:bg-gray-800 py-20 lg:-mt-20">
<div class="bg-gray-200 dark:bg-gray-800 pt-20 lg:-mt-20">
<Sona/>
</div>
<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 dotsandlines bg-repeat-y bg-cover" src="/homepage/aboutdark.svg" />
<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 py-40">
<div class="bg-repeat-y bg-contain dotsandlines pb-20">
<Virtual/>
</div>

Write Preview
Loading…
Cancel
Save