minor updates

pull/2/head
Midnight 2 years ago
parent 8e53e9ad85
commit 810891d117

@ -104,8 +104,8 @@
randomBannerPic = "/homepage/banner.png"; randomBannerPic = "/homepage/banner.png";
</script> </script>
<main class="relative overflow-hidden lg:h-screen @container"> <main class="relative overflow-hidden min-h-screen @container">
<div class="absolute inset-0 w-full h-screen flex flex-col items-center gap-1 justify-center font-bold anim" id="lists"> <div class="absolute inset-0 w-full h-screen flex flex-col items-center gap-1 justify-center font-bold anim opacity-5 dark:opacity-5" id="lists">
</div> </div>
<div class="flex h-full w-full @4xl:p-20 gap-10 py-10 px-5 z-10"> <div class="flex h-full w-full @4xl:p-20 gap-10 py-10 px-5 z-10">
@ -121,7 +121,7 @@
<img src="/helloblue.png" alt="Hello!" class="h-20 popout" /> <img src="/helloblue.png" alt="Hello!" class="h-20 popout" />
</span> </span>
<span class="flex flex-col gap-2 justify-end"> <span class="flex gap-2 flex-wrap items-end">
<h2 class="text-4xl flex gap-2 font-extrabold">I'm <h2 class="text-4xl flex gap-2 font-extrabold">I'm
<span class="flex items-center"> <span class="flex items-center">
{#key name} {#key name}
@ -131,13 +131,14 @@
</span> </span>
</h2> </h2>
<span class="text-3xl font-extralight"> <span class="text-3xl font-extralight">
and I like to make things on the web and i really like to build things
</span> </span>
</span> </span>
</div> </div>
<p class="text-gray-800 dark:text-gray-300 text-lg max-w-[900px]"> <p class="text-gray-800 dark:text-gray-300 text-lg max-w-[900px]">
I'm a {calculateAge(new Date("2001-10-30"))} year old programmer and tech enthusiast from The Netherlands. I'm a {calculateAge(new Date("2001-10-30"))} year old programmer and tech enthusiast from The Netherlands.
Be it making a website, building a computer, or designing a new protocol, I love making things with tech!
<br/><br/> <br/><br/>
Bart Industries is my public digital home. It's a collection of my socials, work experiences and past projects, artworks, hobbies and interests, fursonas and anything else I feel I wanna share with the world. Bart Industries is my public digital home. It's a collection of my socials, work experiences and past projects, artworks, hobbies and interests, fursonas and anything else I feel I wanna share with the world.
<br/><br/> <br/><br/>
@ -152,7 +153,7 @@
</div> </div>
</div> </div>
<span class="hidden @2xl:flex absolute left-0 bottom-0 w-full justify-center mb-20 z-50 text-8xl float text-blue-600"> <span class="hidden @4xl:flex absolute left-0 bottom-0 w-full justify-center mb-20 z-50 text-8xl float text-blue-600">
<img src="/downarrow.png" class="w-10" /> <img src="/downarrow.png" class="w-10" />
</span> </span>
</main> </main>
@ -160,7 +161,6 @@
<style> <style>
.anim { .anim {
user-select: none; user-select: none;
opacity: 2%;
animation: anim; animation: anim;
animation-duration: 200s; animation-duration: 200s;
animation-timing-function: linear; animation-timing-function: linear;

@ -4,12 +4,12 @@
const words1 = [ const words1 = [
"JavaScript", "JavaScript",
"TypeScript", "<b>TypeScript</b>",
"MySQL", "MySQL",
"Laravel", "<b>Laravel</b>",
"PHP", "PHP",
"Livewire", "Livewire",
"NestJS", "<b>NestJS</b>",
"NodeJS", "NodeJS",
"Unity", "Unity",
"Substance Painter", "Substance Painter",
@ -17,12 +17,11 @@
"PostgreSQL", "PostgreSQL",
"TailwindCSS", "TailwindCSS",
"Redis", "Redis",
"Svelte", "<b>Svelte</b>",
]; ];
const words2 = [ const words2 = [
"Svelte", "<b>SvelteKit</b>",
"SvelteKit",
"Python", "Python",
"Django", "Django",
"Vue", "Vue",
@ -30,13 +29,14 @@
"JavaFX", "JavaFX",
"NGINX", "NGINX",
"Docker", "Docker",
"REST", "<b>REST</b>",
"GraphQL", "GraphQL",
"TypeORM", "TypeORM",
"Eloquent", "<b>Eloquent</b>",
"Express", "Express",
"Linux", "Linux",
"Composer", "Composer",
"Bash",
]; ];
const words3 = [ const words3 = [
@ -45,7 +45,7 @@
"Blade", "Blade",
"JSX", "JSX",
"Pug", "Pug",
"Wordpress", "<b>Wordpress</b>",
"Vercel", "Vercel",
"Netlify", "Netlify",
"AWS S3", "AWS S3",
@ -54,6 +54,7 @@
"Fontawesome", "Fontawesome",
"Sass", "Sass",
"Webpack", "Webpack",
"<b>Linux</b>",
]; ];
</script> </script>
@ -249,28 +250,28 @@
</div> </div>
</h3> </h3>
<p class="ttext-gray-800 dark:text-gray-100"> <p class="ttext-gray-800 dark:text-gray-100">
It's a constantly growing list... I can work with anything and love to try out new things and technologies! I have a lot of common knowledge around computer software and hardware and can adapt to anything that may be needed, but here is a constantly growing list of some of my most used things:
</p> </p>
<div id="scroll-container" class="flex gap-1 w-full justify-between text-center text-sm"> <div id="scroll-container" class="flex gap-1 w-full justify-between text-center text-sm">
<div class="inline-flex flex-col gap-1"> <div class="inline-flex flex-col gap-1">
{#each words1 as word} {#each words1 as word}
<p>{word}</p> <p>{@html word}</p>
{/each} {/each}
</div> </div>
<div class="inline-flex flex-col gap-1"> <div class="inline-flex flex-col gap-1">
{#each words2 as word} {#each words2 as word}
<p>{word}</p> <p>{@html word}</p>
{/each} {/each}
</div> </div>
<div class="inline-flex flex-col gap-1"> <div class="inline-flex flex-col gap-1">
{#each words3 as word} {#each words3 as word}
<p>{word}</p> <p>{@html word}</p>
{/each} {/each}
</div> </div>
</div> </div>
<p class="text-gray-800 dark:text-gray-100"> <i class="text-gray-800 dark:text-gray-100 text-sm">
But I can work with anything, and love to try out new things and technologies! Specialties marked in bold.
</p> </i>
</Card> </Card>
</span> </span>
</div> </div>

@ -20,49 +20,58 @@
</h4> </h4>
</div> </div>
<img src="/homepage/sona/blue.png" class="rounded-xl object-cover aspect-square" alt="fursona" /> <img src="/homepage/sona/blue.png" class="rounded-xl object-cover @6xl:aspect-square" alt="fursona" />
<img src="/homepage/sona/MidFingers.jpg" class="rounded-xl object-cover aspect-square" alt="fursona"/> <img src="/homepage/sona/MidFingers.jpg" class="rounded-xl object-cover @6xl:aspect-square" alt="fursona"/>
<img src="/homepage/proxmox.png" class="rounded-xl @6xl:col-span-2" alt="proxmox environment" /> <img src="/homepage/proxmox.png" class="rounded-xl @6xl:col-span-2" alt="proxmox environment" />
<span class="@6xl:col-span-2 flex flex-col gap-2"> <span class="@6xl:col-span-2 flex flex-col gap-2">
<Card> <Card>
<b class="text-xl">Computer tech</b> <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/>
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> </Card>
</span> </span>
<span class="@6xl:row-span-2"> <span class="@6xl:row-span-2">
<Card> <Card>
<b class="text-xl">Furry fandom</b> <b class="text-xl">🦊 Furry fandom</b>
<p> <p>
Being a furry is an important hobby for me. Being a furry is an important hobby and a creative outlet for me.
<br/><br/> <br/><br/>
Mid is my primary fursona out of the many that I have created over the years. He is a fictional anthropomorphic cat with black fur and blue hair and some unusually large whiskers. I use Mid to represent myself with online, an image I have grown comfortable with. I commission artists to create depictions of him to bring him to life, showing and using him on places like this website. Mid is my primary character out of the many that I have created over the years. He is a fictional anthropomorphic cat with black fur and blue hair and some unusually large whiskers. I use Mid to represent myself with online. On the right is also depicted Martin the Pine Marten, and on some pictures further down the website you'll find a few more sonas: Rexouium named Koffie and a protogen called Seffy.
<br/><br/> <br/><br/>
On the right is also depicted Martin the Pine Marten, and on some pictures further down the website you'll find a few more sonas: Rexouium named Koffie and a protogen called Seffy. I commission people to create artistic depictions of my characters to bring them to life, as seen on the images on this page.
</p> </p>
</Card> </Card>
</span> </span>
<img src="/homepage/sona/martin.png" class="rounded-xl object-cover aspect-square" alt="fursona" /> <img src="/homepage/sona/martin.png" class="rounded-xl object-cover @6xl:aspect-square" alt="fursona" />
<img src="/homepage/sona/vr.png" class="@6xl:col-span-2 @6xl:row-span-2 rounded-xl object-cover aspect-square" alt="fursona" /> <img src="/homepage/sona/vr.png" class="@6xl:col-span-2 @6xl:row-span-2 rounded-xl object-cover @6xl:aspect-square" alt="fursona" />
<img src="/homepage/sona/oldmid.png" class="rounded-xl object-cover aspect-square" alt="fursona" /> <img src="/homepage/sona/oldmid.png" class="rounded-xl object-cover @6xl:aspect-square" alt="fursona" />
<img src="/homepage/drone.jpeg" class="rounded-xl object-cover aspect-[3/2] @6xl:col-span-3 @6xl:row-span-2" alt="drone shot" /> <img src="/homepage/drone.jpeg" class="rounded-xl object-cover @6xl:aspect-[3/2] @6xl:col-span-3 @6xl:row-span-2" alt="drone shot" />
<Card> <Card>
<b class="text-xl">Drones</b> <b class="text-xl">🛩️ Drones</b>
<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. I like to go out there and make drone videos and pictures with my DJI drones, enjoying nature outdoors and capturing its beauty.
</p> </p>
</Card> </Card>
<Card>
<b class="text-xl">🥽 Virtual Reality</b>
<p>
One of my biggest gaming passions is the world of VR, a place I've made my second home. More about that can be found in the <a href="#vr" class="a">Virtual Reality</a> section.
</p>
</Card>
</section> </section>
</main> </main>

@ -10,11 +10,11 @@
<article class="grid grid-cols-1 @6xl:grid-cols-4 gap-5"> <article class="grid grid-cols-1 @6xl:grid-cols-4 gap-5">
<img src="/homepage/vr/vr.png" class="rounded-xl @lg:object-cover aspect-[1/2] w-full h-full @6xl:row-span-2" alt="couch" /> <img src="/homepage/vr/vr.png" class="rounded-xl object-cover @6xl:aspect-[1/2] w-full h-full @6xl:row-span-2" alt="couch" />
<img src="/homepage/vr/fancy.png" class="rounded-xl @lg:object-cover aspect-[1/1] w-full h-full" alt="couch" /> <img src="/homepage/vr/fancy.png" class="rounded-xl object-cover @6xl:aspect-[1/1] w-full h-full" alt="couch" />
<div class="@lg:object-cover aspect-[1/1] h-full w-full @6xl:col-span-2 @6xl:row-span-2"> <div class="object-cover @6xl:aspect-[1/1] h-full w-full @6xl:col-span-2 @6xl:row-span-2">
<Card <Card
center={true} center={true}
> >
@ -34,23 +34,23 @@
</Card> </Card>
</div> </div>
<img src="/homepage/vr/mad.png" class="rounded-xl @lg:object-cover aspect-[1/1] w-full h-full" alt="couch" /> <img src="/homepage/vr/mad.png" class="rounded-xl object-cover @6xl:aspect-[1/1] w-full h-full" alt="couch" />
<img src="/homepage/vr/couch.png" class="rounded-xl @lg:object-cover aspect-[3/2] w-full h-full @6xl:col-span-3 @6xl:row-span-2" alt="couch" /> <img src="/homepage/vr/couch.png" class="rounded-xl 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="rounded-xl @lg:object-cover aspect-[1/1] w-full h-full" alt="couch" /> <img src="/homepage/vr/doggo.png" class="rounded-xl object-cover @6xl:aspect-[1/1] w-full h-full" alt="couch" />
<img src="/homepage/vr/bsaber.png" class="rounded-xl @lg:object-cover aspect-[1/1] w-full h-full" alt="couch" /> <img src="/homepage/vr/bsaber.png" class="rounded-xl object-cover @6xl:aspect-[1/1] w-full h-full" alt="couch" />
<img src="/homepage/vr/misty.png" class="rounded-xl @lg:object-cover aspect-[1/1] w-full h-full" alt="couch" /> <img src="/homepage/vr/misty.png" class="rounded-xl object-cover @6xl:aspect-[1/1] w-full h-full" alt="couch" />
<img src="/homepage/vr/lights.png" class="rounded-xl @lg:object-cover aspect-[1/1] w-full h-full" alt="couch" /> <img src="/homepage/vr/lights.png" class="rounded-xl object-cover @6xl:aspect-[1/1] w-full h-full" alt="couch" />
<div class="object-cover aspect-[2/1] h-full w-full @6xl:col-span-2"> <div class="object-cover @6xl:aspect-[2/1] h-full w-full @6xl:col-span-2">
<Card <Card
center={true} center={true}
> >
<h3 class="font-bold text-2xl">Experience and skills</h3> <h3 class="font-bold text-2xl">💪 Experience and skills</h3>
<p> <p>
Because of my adventures in virtual reality I have gained knowledge surrounding things such as: Because of my adventures in virtual reality I have gained knowledge surrounding things such as:
Game development (Unity), texturing (Substance Painter) and animating (Unity Animators). Game development (Unity), texturing (Substance Painter) and animating (Unity Animators).
@ -62,11 +62,11 @@
</Card> </Card>
</div> </div>
<img src="/homepage/vr/furality.png" class="rounded-xl object-cover aspect-[1/1] w-full h-full" alt="couch" /> <img src="/homepage/vr/furality.png" class="rounded-xl object-cover @6xl:aspect-[1/1] w-full h-full" alt="couch" />
<img src="/homepage/vr/fun.png" class="rounded-xl object-cover aspect-[3/2] w-full h-full @6xl:col-span-3 @6xl:row-span-2" alt="couch" /> <img src="/homepage/vr/fun.png" class="rounded-xl object-cover @6xl:aspect-[3/2] w-full h-full @6xl:col-span-3 @6xl:row-span-2" alt="couch" />
<div class="object-cover aspect-[1/1] h-full w-full"> <div class="object-cover @6xl:aspect-[1/1] h-full w-full">
<Card <Card
center={true} center={true}
> >
@ -77,25 +77,25 @@
</Card> </Card>
</div> </div>
<img src="/homepage/vr/meet.png" class="rounded-xl object-cover aspect-[2/1] w-full h-full @6xl:col-span-2" alt="couch" /> <img src="/homepage/vr/meet.png" class="rounded-xl object-cover @6xl:aspect-[2/1] w-full h-full @6xl:col-span-2" alt="couch" />
<img src="/homepage/vr/party.png" class="rounded-xl object-cover aspect-[1/1] w-full h-full" alt="couch" /> <img src="/homepage/vr/party.png" class="rounded-xl object-cover @6xl:aspect-[1/1] w-full h-full" alt="couch" />
<img src="/homepage/vr/guitar.png" class="rounded-xl object-cover aspect-[1/2] w-full h-full @6xl:row-span-2" alt="couch" /> <img src="/homepage/vr/guitar.png" class="rounded-xl object-cover @6xl:aspect-[1/2] w-full h-full @6xl:row-span-2" alt="couch" />
<img src="/homepage/vr/sly.png" class="rounded-xl object-cover aspect-[1/1] w-full h-full" alt="couch" /> <img src="/homepage/vr/sly.png" class="rounded-xl object-cover @6xl:aspect-[1/1] w-full h-full" alt="couch" />
<img src="/homepage/vr/dog.png" class="rounded-xl object-cover aspect-[1/1] w-full h-full @6xl:col-span-2 @6xl:row-span-2" alt="couch" /> <img src="/homepage/vr/dog.png" class="rounded-xl 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="rounded-xl object-cover aspect-[1/1] w-full h-full" alt="couch" /> <img src="/homepage/vr/dj.png" class="rounded-xl object-cover @6xl:aspect-[1/1] w-full h-full" alt="couch" />
<div class="rounded-xl object-cover w-full h-full @6xl:col-span-2 @6xl:block hidden"></div> <div class="rounded-xl object-cover w-full h-full @6xl:col-span-2 @6xl:block hidden"></div>
<img src="/homepage/vr/table.png" class="rounded-xl object-cover aspect-[2/1] w-full h-full @6xl:col-span-2" alt="couch" /> <img src="/homepage/vr/table.png" class="rounded-xl object-cover @6xl:aspect-[2/1] w-full h-full @6xl:col-span-2" alt="couch" />
<div class="rounded-xl object-cover aspect-[1/1] w-full h-full @6xl:block hidden"></div> <div class="rounded-xl object-cover @6xl:aspect-[1/1] w-full h-full @6xl:block hidden"></div>
<img src="/homepage/vr/what.jpg" class="rounded-xl object-cover aspect-[1/1] w-full h-full" alt="couch" /> <img src="/homepage/vr/what.jpg" class="rounded-xl object-cover @6xl:aspect-[1/1] w-full h-full" alt="couch" />
</article> </article>
</section> </section>

Loading…
Cancel
Save