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

New design for about section

Browse Source
pull/3/head
Midnight 1 year ago
parent d97a322877
commit b6b9884ae1
8 changed files with 86 additions and 89 deletions
Show Stats Download Patch File Download Diff File

4
src/app.css
View File

File diff suppressed because one or more lines are too long

7
src/lib/home/Furry.svelte
Unescape View File

@ -45,7 +45,7 @@
<div class="absolute top-0 -mt-40" id="furry"></div> <div class="absolute top-0 -mt-40" id="furry"></div>
<div class="flex flex-col gap-10"> <div class="flex flex-col gap-10">
<h3 class="whitepigeon text-blue-600 text-center -rotate-3 font-bold text-4xl @2xl:text-8xl">Party animal</h3> <h3 class="whitepigeon text-blue-600 text-center -rotate-3 font-bold text-6xl @2xl:text-8xl">Party animal</h3>
<p class="text-center opacity-80 text-xl max-w-6xl mx-auto"> <p class="text-center opacity-80 text-xl max-w-6xl mx-auto">
Being a furry is a big part of my life, and my most expensive hobby. Being a furry is a big part of my life, and my most expensive hobby.
@ -72,9 +72,4 @@
</video> </video>
</div> </div>
</div> </div>
<div class="container grid grid-cols-2 gap-10">
<div>Sona</div>
<img src="" alt="Sona name" />
</div>
</main> </main>

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

@ -8,101 +8,89 @@
} }
</script> </script>
<main class="flex flex-col gap-5 container fira"> <main class="flex flex-col gap-10 lg:gap-20 container relative fira">
<h3 class="flex gap-5 items-end">
<span class="text-3xl font-bold">#</span>
<span class="text-4xl">About me</span>
<span class="text-base font-extrabold">//</span>
<span class="text-3xl">over mij</span>
</h3>
<div class="grid grid-cols-5 gap-5">
<div class="col-span-3 flex flex-wrap gap-2 bg-gray-200 dark:bg-gray-700 bg-opacity-50 dark:bg-opacity-50 p-5">
<span>&lt;age&gt;21&lt;/age&gt;</span>
<span>&lt;profession&gt;student software engineer&lt;/profession&gt;</span>
</div>
<div class="col-span-2 flex flex-col gap-5">
<div class="flex flex-col gap-1 text-sm p-5 border-gray-200 dark:border-gray-700 border-opacity-50 border-4 ">
<span>&lt;age&gt; <bold class="font-bold text-base">21</bold> &lt;/age&gt;</span>
<span>&lt;profession&gt; <bold class="font-bold text-base">software engineer</bold> &lt;/profession&gt;</span>
<span>&lt;nationality&gt; <bold class="font-bold text-base">dutch 🇳🇱</bold> &lt;/nationality&gt;</span>
<span class="h-5"></span>
<span>&lt;hobby&gt; <bold class="font-bold text-base">coding</bold> &lt;/hobby&gt;</span>
<span>&lt;hobby&gt; <bold class="font-bold text-base">computers</bold> &lt;/hobby&gt;</span>
<span>&lt;hobby&gt; <bold class="font-bold text-base">furry</bold> &lt;/hobby&gt;</span>
</div>
<div class="grid grid-cols-2 text-sm border-gray-200 dark:border-gray-700 border-opacity-50 border-4">
<img src="/homepage/sona/pink.png" class="object-cover @6xl:aspect-square opacity-80 hover:opacity-100 duration-150" alt="fursona" />
<img src="/homepage/sona/MidFingers.jpg" class="object-cover @6xl:aspect-square opacity-80 hover:opacity-100 duration-150" alt="fursona"/>
</div>
<div class="flex flex-col gap-1 text-sm border-gray-200 dark:border-gray-700 border-opacity-50 border-4">
<button class="w-full p-5 hover:bg-gray-200 dark:hover:bg-gray-700 duration-300 dark:bg-opacity-50 bg-opacity-50">Socials</button>
</div>
</div>
</div>
</main>
<main class="@container container flex flex-col gap-20 relative">
<div class="absolute top-0 -mt-40" id="about"></div> <div class="absolute top-0 -mt-40" id="about"></div>
<section class="grid grid-cols-1 @6xl:grid-cols-4 px-5 gap-5"> <h3 class="flex gap-5 lg:gap-10 items-end">
<div class="@6xl:col-span-2 p-5 flex flex-col gap-10"> <span class="text-3xl lg:text-8xl text-blue-500 font-bold"><b>$</b>about_me</span>
<h3 class="whitepigeon text-blue-600 font-bold text-4xl @2xl:text-6xl">About me</h3> <span class="text-lg lg:text-4xl font-extrabold">== "over mij"</span>
<h4 class="font-normal text-lg"> </h3>
Hello, 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. <div class="grid lg:grid-cols-5 gap-5">
If you want to know a little more about me, here are some details. :) <div class="lg:col-span-3 flex flex-col gap-5">
</h4> <div class="flex flex-wrap gap-2 bg-black bg-opacity-5 dark:bg-opacity-50 p-5">
</div> <p class="text-lg">
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>.
</p>
</div>
<img src="/homepage/sona/pink.png" class="rounded-xl object-cover @6xl:aspect-square" alt="fursona" /> <hr class="lg:block hidden opacity-20 w-1/2 mx-auto my-5"/>
<img src="/homepage/sona/MidFingers.jpg" class="rounded-xl object-cover @6xl:aspect-square" alt="fursona"/> <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>
<img src="/homepage/proxmox.png" class="rounded-xl @6xl:col-span-2" alt="proxmox environment" /> <h4 class="text-lg font-bold">🖥 Computers</h4>
<span class="@6xl:col-span-2 flex flex-col gap-2">
<Card>
<b class="text-xl">🖥 Computer tech</b>
<p> <p>
I love everything tech, as was probably obvious. But it goes beyond creating software. I love everything tech, as was probably obvious. But it goes beyond creating software.
I also built my own computer, and like to maintain hardware. At home I run a server rack equipped with a few Dell processing servers, doing my own research and hosting webservers, bots, multiplayer games and more using software like TrueNAS, Proxmox and Linux. I also built my own computer, and like to maintain hardware. At home I run a server rack equipped with a few Dell processing servers, doing my own research and hosting webservers, bots, multiplayer games and more using software like TrueNAS, Proxmox and Linux.
<br/><br/> <br/><br/>
I daily-drive Linux as my operating systems out of a passion for FOSS and often tinker around with things like RAID and backups and getting all my favorite games to run. I daily-drive Linux as my operating systems out of a passion for FOSS and often tinker around with things like RAID and backups and getting all my favorite games to run.
</p> </p>
</Card>
</span>
<img src="/homepage/sona/martin.png" class="rounded-xl object-cover @6xl:aspect-square" alt="fursona" />
<img src="/homepage/sona/koffie.png" class="rounded-xl object-cover @6xl:aspect-square w-full" alt="fursona" /> <img src="/homepage/proxmox.png" alt="proxmox environment" />
</div>
<img src="/homepage/sona/vr.png" class="@6xl:col-span-2 @6xl:row-span-3 rounded-xl object-cover h-full" alt="fursona" /> <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-furry" class="absolute top-0 -mt-40"></span>
<span class="@6xl:col-span-2"> <h4 class="text-lg font-bold">🦊 Furry</h4>
<Card>
<b class="text-xl">🦊 Furry fandom</b>
<p> <p>
Being a furry is an important hobby and a creative outlet for me. In the digital world I express myself as Mid, he is an anthropomorphic cat with black fur and blue hair and some unusually large whiskers, and he's my main character. You'll see Mid 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>. -->
</p> </p>
</Card> </div>
</span>
<img src="/homepage/sona/car.jpeg" class="rounded-xl object-cover @6xl:aspect-[3/2] @6xl:col-span-2" alt="car image" /> <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-drones" class="absolute top-0 -mt-40"></span>
<img src="/homepage/drone.jpeg" class="rounded-xl object-cover @6xl:aspect-[2/1] @6xl:col-span-2" alt="drone shot" /> <h4 class="text-lg font-bold">🛩️ Drones</h4>
<Card> <p>
<b class="text-xl">🛩️ Drones</b> I like to go out there and make drone videos and pictures with my DJI drones, enjoying nature outdoors and capturing its beauty. More recently I've made some videos for Allroadevents.nl during a few offroading trips.
<p> </p>
I like to go out there and make drone videos and pictures with my DJI drones, enjoying nature outdoors and capturing its beauty.
<br/><br/>
More recently I've made some videos for Allroadevents.nl during a few offroading trips.
</p>
</Card>
<img src="/homepage/drone2.jpeg" class="rounded-xl h-full object-cover" alt="drone shot" /> <div class="grid grid-cols-2 gap-1">
</section> <img src="/homepage/drone.jpeg" class="object-cover @6xl:aspect-[2/1]" alt="drone shot" />
<img src="/homepage/drone2.jpeg" class="object-cover @6xl:aspect-[2/1]" alt="drone shot" />
</div>
</div>
</div>
<div class="mt-5 lg:mt-0 lg:col-span-2 flex flex-col gap-5">
<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">
<b>////////////////////////////////////////</b><br/>
<b>//</b> user details<br/>
<b>////////////////////////////////////////</b>
</h4>
<span class="h-2"></span>
<span>&lt;age&gt; <bold class="font-bold text-base">{calculateAge(new Date("2001-10-30"))}</bold> &lt;/age&gt;</span>
<span>&lt;pronouns&gt; <bold class="font-bold lg:text-base">he / him</bold> &lt;/pronouns&gt;</span>
<span>&lt;profession&gt; <bold class="font-bold lg:text-base">software engineer</bold> &lt;/profession&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>&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>
<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>&lt;favorite&gt; <bold class="font-bold lg:text-base">coffee</bold> &lt;/favorite&gt;</span>
<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>
</div>
<img src="/homepage/sona/peaceful.png" alt="fursona" />
</div>
</div>
</main> </main>

24
src/routes/index.svelte
Unescape View File

@ -15,7 +15,7 @@
<Banner /> <Banner />
<section class="flex flex-col"> <section class="flex flex-col">
<div class="bg-gradient-to-br bg-gray-200 dark:bg-gray-800 py-20"> <div class="bg-gray-200 dark:bg-gray-800 py-20">
<Blog/> <Blog/>
</div> </div>
@ -23,19 +23,27 @@
<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="backg flex flex-col gap-40 pb-40 bg-top bg-cover"> <div class="flex flex-col gap-40 pb-40">
<Portfolio/> <Portfolio/>
<hr class="container opacity-10 mx-auto w-1/2"/> <div class="flex flex-col">
<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" />
<Sona/> <div class="bg-gray-200 dark:bg-gray-800 py-20 lg:-mt-20">
<Sona/>
</div>
<hr class="container opacity-10 mx-auto w-1/2"/> <img class="dark:hidden block rotate-180 lg:-mt-10 scale-150 lg:scale-100" src="/homepage/aboutwhite.svg" />
<img class="hidden dark:block rotate-180 lg:-mt-10 scale-150 lg:scale-100" src="/homepage/aboutdark.svg" />
</div>
<Virtual/> <div class="bg-repeat-y bg-contain dotsandlines">
<Virtual/>
</div>
<hr class="container opacity-10 mx-auto w-1/2"/> <!-- <hr class="container opacity-10 mx-auto w-1/2"/>
<Furry/> <Furry/> -->
</div> </div>
</main> </main>

1
static/homepage/aboutdark.svg
Unescape View File

@ -0,0 +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>
Side by Side

After

Width:  |  Height:  |  Size: 785 B

1
static/homepage/aboutwhite.svg
Unescape View File

@ -0,0 +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>
Side by Side

After

Width:  |  Height:  |  Size: 769 B

BIN
static/homepage/sona/hai.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 474 KiB

BIN
static/homepage/sona/peaceful.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 MiB

Write Preview
Loading…
Cancel
Save