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 {

28
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 flex-col gap-2 justify-end">
<h2 class="text-4xl flex gap-2 font-extrabold">I'm
<span class="flex items-center">
{#key name}
<h2 class="text-4xl font-extrabold" in:scale>{name}</h2>
<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" />

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

@ -67,13 +67,14 @@
</p>
</div>
<div class="grid grid-cols-1 @2xl:grid-cols-2 @6xl:grid-cols-3 gap-10 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"
>
<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
@ -93,16 +94,17 @@
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