Content update

pull/2/head
Midnight 11 months ago
parent 473d35be5f
commit 782bde503f

@ -9,6 +9,7 @@
</head>
<body>
<div>%svelte.body%</div>
<a rel="me" href="https://mastodon.social/@midblep" class="hidden">Mastodon</a>
<script>
if (!("container" in document.documentElement.style)) {
import("https://unpkg.com/container-query-polyfill@^0.2.0");

@ -1,53 +0,0 @@
<script>
import { onMount } from "svelte";
import { getCookie } from "./helpers/cookies";
function close() {
document.cookie = "closedConstruction=true";
let classes = document.querySelector("#item").classList;
classes.add("hidden");
}
function shouldShow() {
let cookie = getCookie("closedConstruction");
let classes = document.querySelector("#item").classList;
console.log(cookie);
if (cookie != "true") {
classes.add("block");
classes.remove("hidden");
} else {
classes.add("hidden");
classes.remove("block");
}
}
onMount(() => {
shouldShow();
});
</script>
<section
class="relative py-2 text-center bg-amber-500 text-white hidden"
id="item"
>
<div
class="container flex lg:flex-row flex-col justify-between items-center"
>
<h2 class="text-xl font-bold text-left">🚧 Under Construction 🏗️</h2>
<p class="lg:text-right text-sm px-2 lg:px-0">
I started making this a few days ago after I realized I haven't had
a good personal website in a while. Please bear with me as I fill
this up and make it look better!
</p>
</div>
<div
class="absolute inset-0 z-10 h-full flex items-start lg:items-center justify-end pt-2 lg:pt-0 pr-3"
>
<button type="none" on:click={close}> </button>
</div>
</section>

@ -4,7 +4,7 @@
</script>
{#if type == "default"}
<div class="@container grid @lg:grid-cols-5 grid-cols-1 flex-wrap gap-3">
<div class="@container grid @lg:grid-cols-4 grid-cols-1 flex-wrap gap-3">
<Social
url="https://twitter.com/midblep"
title="The Bird App"

@ -15,7 +15,7 @@
target="_blank"
class="rounded-xl bg-opacity-50 hover:bg-opacity-100 bg-slate-300 dark:bg-slate-800 hover:bg-blue-400 dark:hover:bg-blue-600 hover:scale-95 duration-150 shadow"
>
<div class="flex flex-wrap gap-1 items-center justify-{justify} p-3 lg:p-5">
<div class="flex gap-2 items-center justify-{justify} p-2 lg:p-5">
<span class="text-2xl lg:text-5xl">{icon}</span>
<span class="text-gray-700 dark:text-gray-300 font-light text-base lg:text-lg text-{align}">{text}</span>
</div>

@ -115,7 +115,7 @@
class="h-[80vh] w-auto @xl:block hidden z-10"
/>
<div class="flex flex-col py-20 h-full gap-10 z-10">
<div class="flex flex-col py-10 h-full gap-10 z-10">
<div class="flex flex-col gap-10">
<span>
<img src="/helloblue.png" alt="Hello!" class="h-20 popout" />
@ -153,9 +153,9 @@
</div>
</div>
<span class="hidden @4xl: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" />
</span>
</span> -->
</main>
<style>

@ -17,7 +17,7 @@
"PostgreSQL",
"TailwindCSS",
"Rust",
"Blazor",
"<b>Blazor</b>",
"Redis",
"<b>Svelte</b>",
];
@ -28,7 +28,7 @@
"Django",
"Vue",
"<b>Java</b>",
"C#",
"<b>C#</b>",
"JavaFX",
"NGINX",
"Docker",
@ -143,6 +143,24 @@
</Card>
</span>
<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="/agroit.png"
class="h-8"
alt="puppypride"
/> Agro IT
</div>
<span class="text-sm font-light">2023 and ongoing</span>
</h3>
<p class="text-sm text-gray-800 dark:text-gray-100">
After an internship at Agro IT where I developed a new web-based client for their RVDM suite, the company liked my work so much that they hired me to finalise and ship it to customers. After that I am expected to continue modernising other parts and modules of their systems to the new website-based environments.
</p>
</Card>
<Card
buttonHref="https://saxion.nl"
buttonText="🎓 Open Website"
@ -191,101 +209,92 @@
</Card>
</span>
<span class="@6xl:row-span-2">
<Card
<Card>
<h3
class="text-xl font-bold flex-wrap inline-flex items-center gap-3 justify-between"
>
<h3
class="text-xl font-bold flex-wrap inline-flex items-center gap-3 justify-between"
>
<div class="inline-flex gap-3">
🧑‍💻
Player Stats
</div>
</h3>
<p class="text-sm text-gray-800 dark:text-gray-100">
Beyond practical knowledge, I am also a teamplayer. I love discovering new ways and technologies that are proposed to me and like to share ideas and find new solutions to problems together.
<br/><br/>
In my study at Saxion I have done many projects, including ones for large companies such as AgroVision and Witteveen+Bos, where we worked in teams of people with different backgrounds to create a complete product.
</p>
<img src="/banner4.png" class="w-full -mb-10" alt="mid"/>
</Card>
</span>
<div class="inline-flex gap-3">
🧑‍💻
Player Stats
</div>
</h3>
<p class="text-sm text-gray-800 dark:text-gray-100">
Beyond practical knowledge, I am also a teamplayer. I love discovering new ways and technologies that are proposed to me and like to share ideas and find new solutions to problems together.
<br/><br/>
In my study at Saxion I have done many projects, including ones for large companies such as AgroVision and Witteveen+Bos, where we worked in teams of people with different backgrounds to create a complete product.
</p>
<img src="/banner4.png" class="w-full -mb-10" alt="mid"/>
</Card>
<span class="col-span-1 @6xl:row-span-2">
<Card
<Card>
<h3
class="text-xl font-bold flex-wrap inline-flex items-center gap-3 justify-between"
>
<h3
class="text-xl font-bold flex-wrap inline-flex items-center gap-3 justify-between"
>
<div class="inline-flex gap-3">
🏢
Internships
</div>
</h3>
<div class="flex flex-col gap-2">
<span class="flex justify-between items-end"><b class="text-lg">Agro IT</b><p class="text-sm">2023</p></span>
<p class="text-sm">Agro IT is an agricultural software company in The Netherlands. In my 5 month long internship I developed a new modern web app that connected to their existing rVDM suites.</p>
<div class="inline-flex gap-3">
🏢
Internships
</div>
</h3>
<div class="flex flex-col gap-2">
<span class="flex justify-between items-end"><b class="text-lg">Witteveen+Bos</b><p class="text-sm">2022</p></span>
<p class="text-sm">Witteveen+Bos is a major worldwide agricultural software company. During my internship me and my team developed a generic authentication system in Django that would be used as a customized plug-in template for new projects at the company.</p>
</div>
<div class="flex flex-col gap-2">
<span class="flex justify-between items-end"><b class="text-lg">Agro IT</b><p class="text-sm">2023</p></span>
<p class="text-sm text-gray-800 dark:text-gray-100">Agro IT is an agricultural software company in The Netherlands. In my 5 month long internship I developed a new modern web app that connected to their existing rVDM suites.</p>
</div>
<div class="flex flex-col gap-2">
<span class="flex justify-between items-end"><b class="text-lg">AgroVision</b><p class="text-sm">2021</p></span>
<p class="text-sm">AgroVision is a Dutch software company for farmers. During my internship I worked on an app that generates reports about CO2 usage on farms and informs the farmer on how to reduce thecir emmissions.</p>
</div>
<div class="flex flex-col gap-2">
<span class="flex justify-between items-end"><b class="text-lg">Witteveen+Bos</b><p class="text-sm">2022</p></span>
<p class="text-sm text-gray-800 dark:text-gray-100">Witteveen+Bos is a major worldwide agricultural software company. During my internship me and my team developed a generic authentication system in Django that would be used as a customized plug-in template for new projects at the company.</p>
</div>
<div class="flex flex-col gap-2">
<span class="flex justify-between items-end"><b class="text-lg">SuiteSeven</b><p class="text-sm">2019</p></span>
<p class="text-sm">SuitSeven is a local webdevelopment studio. During my internship I worked on the design for a client's website.</p>
</div>
<div class="flex flex-col gap-2">
<span class="flex justify-between items-end"><b class="text-lg">AgroVision</b><p class="text-sm">2021</p></span>
<p class="text-sm text-gray-800 dark:text-gray-100">AgroVision is a Dutch software company for farmers. During my internship I worked on an app that generates reports about CO2 usage on farms and informs the farmer on how to reduce thecir emmissions.</p>
</div>
<div class="flex flex-col gap-2">
<span class="flex justify-between items-end"><b class="text-lg">Profity</b><p class="text-sm">2018</p></span>
<p class="text-sm">Profity is a software ccompany creating ERP suites for the Dutch steel industry. During my internship I learned the dynamics of a team and the different processes involved in software development.</p>
</div>
</Card>
</span>
<div class="flex flex-col gap-2">
<span class="flex justify-between items-end"><b class="text-lg">SuiteSeven</b><p class="text-sm">2019</p></span>
<p class="text-sm text-gray-800 dark:text-gray-100">SuitSeven is a local webdevelopment studio. During my internship I worked on the design for a client's website.</p>
</div>
<span class="col-span-1 @6xl:row-span-2">
<Card
<div class="flex flex-col gap-2">
<span class="flex justify-between items-end"><b class="text-lg">Profity</b><p class="text-sm">2018</p></span>
<p class="text-sm text-gray-800 dark:text-gray-100">Profity is a software ccompany creating ERP suites for the Dutch steel industry. During my internship I learned the dynamics of a team and the different processes involved in software development.</p>
</div>
</Card>
<Card>
<h3
class="text-xl font-bold flex-wrap inline-flex items-center gap-3 justify-between"
>
<h3
class="text-xl font-bold flex-wrap inline-flex items-center gap-3 justify-between"
>
<div class="inline-flex gap-3">
⚔️
Skills
</div>
</h3>
<p class="ttext-gray-800 dark:text-gray-100">
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>
<div id="scroll-container" class="flex gap-1 w-full justify-between text-center text-sm">
<div class="inline-flex flex-col gap-1">
{#each words1 as word}
<p>{@html word}</p>
{/each}
</div>
<div class="inline-flex flex-col gap-1">
{#each words2 as word}
<p>{@html word}</p>
{/each}
</div>
<div class="inline-flex flex-col gap-1">
{#each words3 as word}
<p>{@html word}</p>
{/each}
</div>
<div class="inline-flex gap-3">
⚔️
Skills
</div>
<i class="text-gray-800 dark:text-gray-100 text-sm">
Specialties marked in bold.
</i>
</Card>
</span>
</h3>
<p class="text-sm text-gray-800 dark:text-gray-100">
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>
<div id="scroll-container" class="flex gap-1 w-full justify-between text-center text-sm">
<div class="inline-flex flex-col gap-1">
{#each words1 as word}
<p>{@html word}</p>
{/each}
</div>
<div class="inline-flex flex-col gap-1">
{#each words2 as word}
<p>{@html word}</p>
{/each}
</div>
<div class="inline-flex flex-col gap-1">
{#each words3 as word}
<p>{@html word}</p>
{/each}
</div>
</div>
<i class="text-gray-800 dark:text-gray-100 text-sm">
Specialties marked in bold.
</i>
</Card>
</div>
</div>
</section>

@ -3,14 +3,10 @@
import { slide } from "svelte/transition";
let texts = [
"keep on creating",
"work on what you love",
"be yourself for yourself",
"overcome your challenges",
"push yourself forward",
"dare to dare",
"go out there and live",
"stop using twitter"
"keep on creating, creativitiy is our humanity",
"work on what you love and the rest will come later",
"be yourself, for yourself",
"stand by yourself"
];
let text = texts[0];
@ -20,7 +16,7 @@
setInterval(() => {
text = texts[i % texts.length];
i++;
}, 3000);
}, 5000);
});
</script>

@ -20,7 +20,7 @@
</h4>
</div>
<img src="/homepage/sona/blue.png" class="rounded-xl object-cover @6xl:aspect-square" alt="fursona" />
<img src="/homepage/sona/pink.png" class="rounded-xl object-cover @6xl:aspect-square" alt="fursona" />
<img src="/homepage/sona/MidFingers.jpg" class="rounded-xl object-cover @6xl:aspect-square" alt="fursona"/>
@ -38,25 +38,23 @@
</Card>
</span>
<span class="@6xl:row-span-2">
<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/sona/vr.png" class="@6xl:col-span-2 @6xl:row-span-3 rounded-xl object-cover h-full" alt="fursona" />
<span class="@6xl:col-span-2">
<Card>
<b class="text-xl">🦊 Furry fandom</b>
<p>
Being a furry is an important hobby and a creative outlet for me.
<br/><br/>
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/>
I commission people to create artistic depictions of my characters to bring them to life, as seen on the images on this page.
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.
</p>
</Card>
</span>
<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 @6xl:aspect-square" alt="fursona" />
<img src="/homepage/sona/oldmid.png" class="rounded-xl object-cover @6xl:aspect-square" alt="fursona" />
<img src="/homepage/sona/car.jpeg" class="rounded-xl object-cover @6xl:aspect-[3/2] @6xl:col-span-2" alt="car image" />
<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" />

@ -89,12 +89,6 @@
<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>
<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 @6xl:aspect-[1/1] w-full h-full @6xl:block hidden"></div>
<img src="/homepage/vr/what.jpg" class="rounded-xl object-cover @6xl:aspect-[1/1] w-full h-full" alt="couch" />
</article>

@ -29,8 +29,6 @@
<Virtual/>
</section>
<hr class="container my-10 opacity-10" />
<section class="py-20 mb-40">
<Quote/>
</section>

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 643 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 29 KiB

Loading…
Cancel
Save