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

make site mobile friendly

Browse Source
pull/2/head
Midnight 2 years ago
parent dcaa3899d1
commit 2ebc0b5328
6 changed files with 103 additions and 91 deletions
Show Stats Download Patch File Download Diff File

2
src/lib/header/NavButton.svelte
Unescape View File

@ -34,6 +34,8 @@
if(url == "/") current = givenUrl == "/";
if(url != "/") current = givenUrl.includes(url);
current = false;
if(current == true) {
classes += " text-white bg-white bg-opacity-10";
} else {

38
src/lib/home/Banner.svelte
Unescape View File

@ -70,6 +70,12 @@
"Midnight"
];
function calculateAge(birthday) { // birthday is a date
var ageDifMs = Date.now() - birthday;
var ageDate = new Date(ageDifMs); // miliseconds from epoch
return Math.abs(ageDate.getUTCFullYear() - 1970);
}
onMount(() => {
for(let j = 0; j < 20; j++) {
let list = document.createElement('div');
@ -109,20 +115,21 @@
class="h-[80vh] w-auto @xl:block hidden z-10"
/>
<div class="flex flex-col py-20 h-full gap-20 z-10">
<div class="flex flex-col py-20 h-full gap-10 z-10">
<div class="flex flex-col gap-10">
<span>
<img src="/helloblue.png" alt="Hello!" class="h-20 popout" />
</span>
<span class="flex flex-wrap gap-2 items-end">
<h2 class="text-4xl font-extrabold">I'm</h2>
<span class="flex items-center">
{#key name}
<h2 class="text-4xl font-extrabold" in:scale>{name}</h2>
{/key}
<h2 class="text-4xl font-extrabold">,</h2>
</span>
<span class="flex flex-col gap-2 justify-end">
<h2 class="text-4xl flex gap-2 font-extrabold">I'm
<span class="flex items-center">
{#key name}
<span in:scale>{name}</span>
{/key}
<h2 class="text-4xl font-extrabold">,</h2>
</span>
</h2>
<span class="text-3xl font-extralight">
and I like to make things on the web
</span>
@ -130,14 +137,15 @@
</div>
<p class="text-gray-800 dark:text-gray-300 text-lg max-w-[900px]">
I go by many names, which is why I named this place Bart Industries. It is my public digital home, a collection of my socials, work experiences,
past-time projects, artworks, hobbies, random blogposts, fursonas and anything else I feel I wanna share with the world.
I'm a {calculateAge(new Date("2001-10-30"))} year old programmer and tech enthusiast from The Netherlands.
<br/><br/>
For my skills and experiences I implore you to visit my <a href="#portfolio" class="a">portfolio section</a>,
I am always excited to explore new technologies and opportunities.
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/>
If you are interested in my work or want to contact me
you can reach out via one of my socials below or send me an email via the <a href="#contact" class="a">contact form</a>.
To know more about me you can visit the <a href="#about" class="a">about section</a>.
<br/>
For some of my skills and experiences you can visit my <a href="#portfolio" class="a">portfolio section</a>.
<br/>
If you want to contact me you can reach out via one of my socials below or <a href="mailto:pascalvanginkel@outlook.com" class="a">send me an email</a>.
</p>
<Socials type="default" />

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

@ -67,42 +67,44 @@
</p>
</div>
<div class="grid grid-cols-1 @2xl:grid-cols-2 @6xl:grid-cols-3 gap-10 justify-between">
<Card
buttonHref="https://flamesoftware.net/"
buttonText="🔥 Visit early website"
>
<h3
class="text-xl font-bold inline-flex items-center gap-3 justify-between"
<div class="grid grid-cols-1 @2xl:grid-cols-2 @6xl:grid-cols-3 gap-5 justify-between">
<span>
<Card
buttonHref="https://flamesoftware.net/"
buttonText="🔥 Visit early website"
>
<div class="inline-flex gap-3">
<img
src="/logo.png"
class="h-8"
alt="flame"
/> Flame Software
</div>
<span class="text-sm font-light">2022 and ongoing</span>
</h3>
<p class="text-sm text-gray-800 dark:text-gray-100">
Flame Software is a Software-as-a-Service company that is developing a new communications app
that intends to revolutionize the way we talk and socialize online.
Our mission is to make the net more connected, more privacy focused, and more healthy for your nmind.
<br/><br/>
We are currently in our early development stage, where I work as the CTO to lay down the groundworks
for this new app, which will be built using a combination of languages like Rust and TypeScript.
</p>
</Card>
<h3
class="text-xl font-bold flex-wrap inline-flex items-center gap-3 justify-between"
>
<div class="inline-flex gap-3">
<img
src="/logo.png"
class="h-8"
alt="flame"
/> Flame Software
</div>
<span class="text-sm font-light">2022 and ongoing</span>
</h3>
<p class="text-sm text-gray-800 dark:text-gray-100">
Flame Software is a Software-as-a-Service company that is developing a new communications app
that intends to revolutionize the way we talk and socialize online.
Our mission is to make the net more connected, more privacy focused, and more healthy for your nmind.
<br/><br/>
We are currently in our early development stage, where I work as the CTO to lay down the groundworks
for this new app, which will be built using a combination of languages like Rust and TypeScript.
</p>
</Card>
</span>
<span class="col-span-2 row-span-1 @container">
<span class="@2xl:col-span-2 row-span-1 @container">
<Card
buttonHref="https://puppypride.social"
buttonText="🌐 Visit Puppy Pride"
>
<div class="grid @xl:grid-cols-2 grid-cols-1 gap-5">
<span>
<span class="flex flex-col gap-5">
<h3
class="text-xl font-bold inline-flex items-center gap-3 justify-between"
class="text-xl flex-wrap font-bold inline-flex items-center gap-3 justify-between"
>
<div class="inline-flex gap-3">
<img
@ -138,7 +140,7 @@
buttonText="🎓 Open Website"
>
<h3
class="text-xl font-bold inline-flex items-center gap-3 justify-between"
class="text-xl font-bold flex-wrap inline-flex items-center gap-3 justify-between"
>
<div class="inline-flex gap-3">
<img
@ -156,13 +158,13 @@
</p>
</Card>
<span class="col-span-1 row-span-1">
<span>
<Card
buttonHref="https://dubbelnull.com/showcase"
buttonText="➡️ View DubbelNull showcase"
>
<h3
class="text-xl font-bold inline-flex items-center gap-3 justify-between"
class="text-xl font-bold flex-wrap inline-flex items-center gap-3 justify-between"
>
<div class="inline-flex gap-3">
<img
@ -181,11 +183,11 @@
</Card>
</span>
<span class="row-span-2">
<span class="@6xl:row-span-2">
<Card
>
<h3
class="text-xl font-bold inline-flex items-center gap-3 justify-between"
class="text-xl font-bold flex-wrap inline-flex items-center gap-3 justify-between"
>
<div class="inline-flex gap-3">
🧑‍💻
@ -201,11 +203,11 @@
</Card>
</span>
<span class="col-span-1 row-span-2">
<span class="col-span-1 @6xl:row-span-2">
<Card
>
<h3
class="text-xl font-bold inline-flex items-center gap-3 justify-between"
class="text-xl font-bold flex-wrap inline-flex items-center gap-3 justify-between"
>
<div class="inline-flex gap-3">
🏢
@ -235,11 +237,11 @@
</Card>
</span>
<span class="col-span-1 row-span-2">
<span class="col-span-1 @6xl:row-span-2">
<Card
>
<h3
class="text-xl font-bold inline-flex items-center gap-3 justify-between"
class="text-xl font-bold flex-wrap inline-flex items-center gap-3 justify-between"
>
<div class="inline-flex gap-3">
⚔️

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

@ -11,22 +11,22 @@
<main class="@container container flex flex-col gap-20 relative">
<div class="absolute top-0 -mt-40" id="about"></div>
<section class="grid grid-cols-4 px-5 gap-5">
<span class="col-span-2 p-5 flex flex-col gap-10">
<h3 class="whitepigeon text-blue-600 font-bold text-6xl">About me</h3>
<section class="grid grid-cols-1 @6xl:grid-cols-4 px-5 gap-5">
<div class="@6xl:col-span-2 p-5 flex flex-col gap-10">
<h3 class="whitepigeon text-blue-600 font-bold text-4xl @2xl:text-6xl">About me</h3>
<h4 class="font-normal text-lg">
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.
If you want to know a little more about me, here are some details. :)
</h4>
</span>
</div>
<img src="/homepage/sona/blue.png" class="rounded-xl shadow-lg object-cover aspect-square" alt="fursona" />
<img src="/homepage/sona/blue.png" class="rounded-xl object-cover aspect-square" alt="fursona" />
<img src="/homepage/sona/MidFingers.jpg" class="rounded-xl shadow-lg object-cover aspect-square" alt="fursona"/>
<img src="/homepage/sona/MidFingers.jpg" class="rounded-xl object-cover aspect-square" alt="fursona"/>
<img src="/homepage/proxmox.png" class="rounded-xl shadow-lg col-span-2" alt="proxmox environment" />
<img src="/homepage/proxmox.png" class="rounded-xl @6xl:col-span-2" alt="proxmox environment" />
<span class="col-span-2 flex flex-col gap-2">
<span class="@6xl:col-span-2 flex flex-col gap-2">
<Card>
<b class="text-xl">Computer tech</b>
<p>
@ -36,7 +36,7 @@
</Card>
</span>
<span class="row-span-2">
<span class="@6xl:row-span-2">
<Card>
<b class="text-xl">Furry fandom</b>
@ -50,13 +50,13 @@
</Card>
</span>
<img src="/homepage/sona/martin.png" class="rounded-xl shadow-lg object-cover aspect-square" alt="fursona" />
<img src="/homepage/sona/martin.png" class="rounded-xl object-cover aspect-square" alt="fursona" />
<img src="/homepage/sona/vr.png" class="col-span-2 row-span-2 rounded-xl shadow-lg 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 aspect-square" alt="fursona" />
<img src="/homepage/sona/oldmid.png" class="rounded-xl shadow-lg object-cover aspect-square" alt="fursona" />
<img src="/homepage/sona/oldmid.png" class="rounded-xl object-cover aspect-square" alt="fursona" />
<img src="/homepage/drone.jpeg" class="rounded-xl shadow-lg object-cover aspect-[3/2] col-span-3 row-span-2" alt="drone shot" />
<img src="/homepage/drone.jpeg" class="rounded-xl object-cover aspect-[3/2] @6xl:col-span-3 @6xl:row-span-2" alt="drone shot" />
<Card>
<b class="text-xl">Drones</b>

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

@ -6,15 +6,15 @@
<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">
<h2 class="calderious text-8xl text-blue-600">Virtual Reality</h2>
<h2 class="calderious text-6xl text-center @2xl:text-left @2xl:text-8xl text-blue-600">Virtual Reality</h2>
<article class="grid grid-cols-1 @lg: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 shadow-lg @lg:object-cover @lg:aspect-[1/2] w-full h-full @lg:col-span-1 @lg:row-span-2" alt="couch" />
<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/fancy.png" class="rounded-xl shadow-lg @lg:object-cover @lg:aspect-[1/1] w-full h-full @lg:col-span-1 @lg:row-span-1" alt="couch" />
<img src="/homepage/vr/fancy.png" class="rounded-xl @lg:object-cover aspect-[1/1] w-full h-full" alt="couch" />
<div class="@lg:object-cover @lg:aspect-[1/1] h-full w-full @lg:col-span-2 @lg:row-span-2">
<div class="@lg:object-cover aspect-[1/1] h-full w-full @6xl:col-span-2 @6xl:row-span-2">
<Card
center={true}
>
@ -34,19 +34,19 @@
</Card>
</div>
<img src="/homepage/vr/mad.png" class="rounded-xl shadow-lg @lg:object-cover @lg:aspect-[1/1] w-full h-full @lg:col-span-1 @lg:row-span-1" alt="couch" />
<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/couch.png" class="rounded-xl shadow-lg @lg:object-cover @lg:aspect-[3/2] w-full h-full @lg:col-span-3 @lg:row-span-2" 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/doggo.png" class="rounded-xl shadow-lg @lg:object-cover @lg:aspect-[1/1] w-full h-full @lg:col-span-1 @lg:row-span-1" 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/bsaber.png" class="rounded-xl shadow-lg @lg:object-cover @lg:aspect-[1/1] w-full h-full @lg:col-span-1 @lg:row-span-1" 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/misty.png" class="rounded-xl shadow-lg @lg:object-cover @lg:aspect-[1/1] w-full h-full @lg:col-span-1 @lg:row-span-1" 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/lights.png" class="rounded-xl shadow-lg @lg:object-cover @lg:aspect-[1/1] w-full h-full @lg:col-span-1 @lg:row-span-1" alt="couch" />
<img src="/homepage/vr/lights.png" class="rounded-xl @lg:object-cover aspect-[1/1] w-full h-full" alt="couch" />
<div class="object-cover @lg:aspect-[2/1] h-full w-full @lg:col-span-2 @lg:row-span-1">
<div class="object-cover aspect-[2/1] h-full w-full @6xl:col-span-2">
<Card
center={true}
>
@ -62,11 +62,11 @@
</Card>
</div>
<img src="/homepage/vr/furality.png" class="rounded-xl shadow-lg object-cover @lg:aspect-[1/1] w-full h-full @lg:col-span-1 @lg:row-span-1" alt="couch" />
<img src="/homepage/vr/furality.png" class="rounded-xl object-cover aspect-[1/1] w-full h-full" alt="couch" />
<img src="/homepage/vr/fun.png" class="rounded-xl shadow-lg object-cover @lg:aspect-[3/2] w-full h-full @lg:col-span-3 @lg:row-span-2" 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" />
<div class="object-cover @lg:aspect-[1/1] h-full w-full @lg:col-span-1 @lg:row-span-1">
<div class="object-cover aspect-[1/1] h-full w-full">
<Card
center={true}
>
@ -77,25 +77,25 @@
</Card>
</div>
<img src="/homepage/vr/meet.png" class="rounded-xl shadow-lg object-cover @lg:aspect-[2/1] w-full h-full @lg:col-span-2 @lg:row-span-1" alt="couch" />
<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/party.png" class="rounded-xl shadow-lg object-cover @lg:aspect-[1/1] w-full h-full @lg:col-span-1 @lg:row-span-1" 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/guitar.png" class="rounded-xl shadow-lg object-cover @lg:aspect-[1/2] w-full h-full @lg:col-span-1 @lg:row-span-2" 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/sly.png" class="rounded-xl shadow-lg object-cover @lg:aspect-[1/1] w-full h-full @lg:col-span-1 @lg:row-span-1" 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/dog.png" class="rounded-xl shadow-lg object-cover @lg:aspect-[1/1] w-full h-full @lg:col-span-2 @lg:row-span-2" 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/dj.png" class="rounded-xl shadow-lg object-cover @lg:aspect-[1/1] w-full h-full @lg:col-span-1 @lg:row-span-1" alt="couch" />
<img src="/homepage/vr/dj.png" class="rounded-xl object-cover aspect-[1/1] w-full h-full" alt="couch" />
<div class="rounded-xl object-cover @lg:aspect-[2/1] w-full h-full col-span-2 @lg:row-span-1"></div>
<div class="rounded-xl object-cover aspect-[1/1] w-full h-full @6xl:block hidden"></div>
<img src="/homepage/vr/table.png" class="rounded-xl shadow-lg object-cover @lg:aspect-[2/1] w-full h-full col-span-2 @lg:row-span-1" alt="couch" />
<img src="/homepage/vr/table.png" class="rounded-xl object-cover aspect-[2/1] w-full h-full @6xl:col-span-2" alt="couch" />
<div class="rounded-xl object-cover @lg:aspect-[1/1] w-full h-full col-span-1 @lg:row-span-1"></div>
<div class="rounded-xl object-cover aspect-[1/1] w-full h-full @6xl:block hidden"></div>
<img src="/homepage/vr/what.jpg" class="rounded-xl shadow-lg object-cover @lg:aspect-[1/1] w-full h-full col-span-1 @lg:row-span-1" alt="couch" />
<img src="/homepage/vr/what.jpg" class="rounded-xl object-cover aspect-[1/1] w-full h-full" alt="couch" />
</article>
</section>

2
tailwind.config.cjs
Unescape View File

@ -4,7 +4,7 @@ module.exports = {
theme: {
container: {
center: true,
padding: '2rem',
padding: '1rem',
screens: {
sm: '100%',
md: '100%',

Write Preview
Loading…
Cancel
Save