Content update

pull/2/head
Midnight 1 year ago
parent 473d35be5f
commit 782bde503f

@ -9,6 +9,7 @@
</head> </head>
<body> <body>
<div>%svelte.body%</div> <div>%svelte.body%</div>
<a rel="me" href="https://mastodon.social/@midblep" class="hidden">Mastodon</a>
<script> <script>
if (!("container" in document.documentElement.style)) { if (!("container" in document.documentElement.style)) {
import("https://unpkg.com/container-query-polyfill@^0.2.0"); 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> </script>
{#if type == "default"} {#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 <Social
url="https://twitter.com/midblep" url="https://twitter.com/midblep"
title="The Bird App" title="The Bird App"

@ -15,7 +15,7 @@
target="_blank" 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" 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-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> <span class="text-gray-700 dark:text-gray-300 font-light text-base lg:text-lg text-{align}">{text}</span>
</div> </div>

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

@ -17,7 +17,7 @@
"PostgreSQL", "PostgreSQL",
"TailwindCSS", "TailwindCSS",
"Rust", "Rust",
"Blazor", "<b>Blazor</b>",
"Redis", "Redis",
"<b>Svelte</b>", "<b>Svelte</b>",
]; ];
@ -28,7 +28,7 @@
"Django", "Django",
"Vue", "Vue",
"<b>Java</b>", "<b>Java</b>",
"C#", "<b>C#</b>",
"JavaFX", "JavaFX",
"NGINX", "NGINX",
"Docker", "Docker",
@ -143,6 +143,24 @@
</Card> </Card>
</span> </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 <Card
buttonHref="https://saxion.nl" buttonHref="https://saxion.nl"
buttonText="🎓 Open Website" buttonText="🎓 Open Website"
@ -191,101 +209,92 @@
</Card> </Card>
</span> </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 <div class="inline-flex gap-3">
class="text-xl font-bold flex-wrap inline-flex items-center gap-3 justify-between" 🧑‍💻
> Player Stats
<div class="inline-flex gap-3"> </div>
🧑‍💻 </h3>
Player Stats <p class="text-sm text-gray-800 dark:text-gray-100">
</div> 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.
</h3> <br/><br/>
<p class="text-sm text-gray-800 dark:text-gray-100"> 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.
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. </p>
<br/><br/> <img src="/banner4.png" class="w-full -mb-10" alt="mid"/>
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. </Card>
</p>
<img src="/banner4.png" class="w-full -mb-10" alt="mid"/>
</Card>
</span>
<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 <div class="inline-flex gap-3">
class="text-xl font-bold flex-wrap inline-flex items-center gap-3 justify-between" 🏢
> Internships
<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> </div>
</h3>
<div class="flex flex-col gap-2"> <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> <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">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> <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>
<div class="flex flex-col gap-2"> <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> <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">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> <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>
<div class="flex flex-col gap-2"> <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> <span class="flex justify-between items-end"><b class="text-lg">AgroVision</b><p class="text-sm">2021</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> <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>
<div class="flex flex-col gap-2"> <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> <span class="flex justify-between items-end"><b class="text-lg">SuiteSeven</b><p class="text-sm">2019</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> <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> </div>
</Card>
</span>
<span class="col-span-1 @6xl:row-span-2"> <div class="flex flex-col gap-2">
<Card <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 <div class="inline-flex gap-3">
class="text-xl font-bold flex-wrap inline-flex items-center gap-3 justify-between" ⚔️
> Skills
<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> </div>
<i class="text-gray-800 dark:text-gray-100 text-sm"> </h3>
Specialties marked in bold. <p class="text-sm text-gray-800 dark:text-gray-100">
</i> 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:
</Card> </p>
</span> <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>
</div> </div>
</section> </section>

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

@ -20,7 +20,7 @@
</h4> </h4>
</div> </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"/> <img src="/homepage/sona/MidFingers.jpg" class="rounded-xl object-cover @6xl:aspect-square" alt="fursona"/>
@ -38,25 +38,23 @@
</Card> </Card>
</span> </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> <Card>
<b class="text-xl">🦊 Furry fandom</b> <b class="text-xl">🦊 Furry fandom</b>
<p> <p>
Being a furry is an important hobby and a creative outlet for me. 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.
<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.
</p> </p>
</Card> </Card>
</span> </span>
<img src="/homepage/sona/martin.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/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/drone.jpeg" class="rounded-xl object-cover @6xl: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" />

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

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