parent
46f4176948
commit
d3b2bfe314
@ -1,250 +0,0 @@
|
|||||||
<script>
|
|
||||||
import Socials from '$lib/Socials.svelte';
|
|
||||||
import { onMount } from 'svelte';
|
|
||||||
import { fade, blur, fly, slide, scale } from 'svelte/transition';
|
|
||||||
import { quintOut } from 'svelte/easing';
|
|
||||||
|
|
||||||
let name = 'Midnight';
|
|
||||||
|
|
||||||
const array = [
|
|
||||||
'/banner1.png',
|
|
||||||
'/banner2.png',
|
|
||||||
'/banner3.png',
|
|
||||||
'/banner4.png',
|
|
||||||
'/banner5.jpeg',
|
|
||||||
'/banner6.png',
|
|
||||||
'/banner7.png',
|
|
||||||
'/banner8.png'
|
|
||||||
];
|
|
||||||
|
|
||||||
const words = [
|
|
||||||
'JavaScript',
|
|
||||||
'TypeScript',
|
|
||||||
'MySQL',
|
|
||||||
'Laravel',
|
|
||||||
'PHP',
|
|
||||||
'Livewire',
|
|
||||||
'NestJS',
|
|
||||||
'NodeJS',
|
|
||||||
'Unity',
|
|
||||||
'Substance Painter',
|
|
||||||
'Blender',
|
|
||||||
'PostgreSQL',
|
|
||||||
'TailwindCSS',
|
|
||||||
'Bootstrap',
|
|
||||||
'Fontawesome',
|
|
||||||
'Sass',
|
|
||||||
'Webpack',
|
|
||||||
'Redis',
|
|
||||||
'Svelte',
|
|
||||||
'SvelteKit',
|
|
||||||
'Python',
|
|
||||||
'Django',
|
|
||||||
'Vue',
|
|
||||||
'Java',
|
|
||||||
'JavaFX',
|
|
||||||
'NGINX',
|
|
||||||
'Docker',
|
|
||||||
'REST',
|
|
||||||
'GraphQL',
|
|
||||||
'TypeORM',
|
|
||||||
'Eloquent',
|
|
||||||
'Express',
|
|
||||||
'Linux',
|
|
||||||
'Composer',
|
|
||||||
'AlpineJS',
|
|
||||||
'Blade',
|
|
||||||
'JSX',
|
|
||||||
'Pug',
|
|
||||||
'Wordpress',
|
|
||||||
'Vercel',
|
|
||||||
'Netlify',
|
|
||||||
'AWS S3',
|
|
||||||
'Backblaze',
|
|
||||||
'EntityFramework',
|
|
||||||
'.NET Core'
|
|
||||||
];
|
|
||||||
|
|
||||||
const names = ['Pascal', 'Mid', 'Midblep', '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');
|
|
||||||
list.classList.add('flex', 'gap-2');
|
|
||||||
|
|
||||||
for (let i = 0; i < 20; i++) {
|
|
||||||
const word = words[Math.floor(Math.random() * words.length)];
|
|
||||||
let element = document.createElement('span');
|
|
||||||
element.innerHTML = word;
|
|
||||||
element.classList.add('text-9xl', 'p-10', 'whitespace-nowrap');
|
|
||||||
|
|
||||||
list.appendChild(element);
|
|
||||||
}
|
|
||||||
|
|
||||||
document.getElementById('lists').appendChild(list);
|
|
||||||
}
|
|
||||||
|
|
||||||
let i = 0;
|
|
||||||
setInterval(() => {
|
|
||||||
name = names[i % 4];
|
|
||||||
i++;
|
|
||||||
}, 3000);
|
|
||||||
});
|
|
||||||
|
|
||||||
let randomBannerPic = array[Math.floor(Math.random() * array.length)];
|
|
||||||
randomBannerPic = '/homepage/banner.png';
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<main class="w-full h-full lg:px-2 xl:px-5 @container">
|
|
||||||
<section
|
|
||||||
class="bg-[#3A53FF] @2xl:rounded-t-[40px] relative overflow-hidden @container text-white"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="absolute inset-0 w-full h-full bg-no-repeat bg-cover bg-top opacity-50 rounded-t-[40px]"
|
|
||||||
style="background-image: url('portfoliobackg.svg')"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<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 class="flex h-full w-full @4xl:p-20 gap-20 p-5 z-10">
|
|
||||||
<div class="items-start @7xl:block hidden z-10 w-full">
|
|
||||||
<img src={randomBannerPic} alt="mid" class="w-[40vw] z-10" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex flex-col py-5 h-full gap-10 z-10 w-full">
|
|
||||||
<div class="flex flex-col gap-2">
|
|
||||||
<p class="text-4xl font-bold"><span class="whitepigeon">Hello</span></p>
|
|
||||||
<h2 class="text-6xl flex gap-2 font-extralight">
|
|
||||||
I'm
|
|
||||||
<span class="flex items-center">
|
|
||||||
{#key name}
|
|
||||||
<span in:scale>{name}</span>
|
|
||||||
{/key}
|
|
||||||
</span>
|
|
||||||
</h2>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p class="lg:text-lg @2xl:mb-10">
|
|
||||||
I'm a {calculateAge(new Date('2001-10-30'))} year old programmer and tech enthusiast from The
|
|
||||||
Netherlands. I have a Bachelor of Science degree in Software Engineering and run a development
|
|
||||||
company called DubbelNull. During the week I work at Agro IT and build software that improves
|
|
||||||
the lives of people through efficient solutions.
|
|
||||||
<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 like
|
|
||||||
sharing with the world.
|
|
||||||
<br /><br />
|
|
||||||
Feel free to have a look around and learn about who I am and the things I've worked on.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<Socials stay="light" type="default" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="hidden @2xl:block">
|
|
||||||
<svg
|
|
||||||
class="dark:hidden block absolute left-0 bottom-0 right-0 scale-105 -ml-5"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
viewBox="0 0 1440 320"
|
|
||||||
><path
|
|
||||||
fill="#fff"
|
|
||||||
fill-opacity="1"
|
|
||||||
d="M0,96L48,96C96,96,192,96,288,112C384,128,480,160,576,176C672,192,768,192,864,213.3C960,235,1056,277,1152,266.7C1248,256,1344,192,1392,160L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"
|
|
||||||
/></svg
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
class="hidden dark:block absolute left-0 bottom-0 right-0 scale-105 -ml-5"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
viewBox="0 0 1440 320"
|
|
||||||
><path
|
|
||||||
fill="#000"
|
|
||||||
fill-opacity="1"
|
|
||||||
d="M0,96L48,96C96,96,192,96,288,112C384,128,480,160,576,176C672,192,768,192,864,213.3C960,235,1056,277,1152,266.7C1248,256,1344,192,1392,160L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"
|
|
||||||
/></svg
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.anim {
|
|
||||||
user-select: none;
|
|
||||||
animation: anim;
|
|
||||||
animation-duration: 200s;
|
|
||||||
animation-timing-function: linear;
|
|
||||||
animation-iteration-count: infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes anim {
|
|
||||||
0% {
|
|
||||||
transform: translate(100%, -100%) rotate(-30deg);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: translate(-100%, 100%) rotate(-30deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.popout {
|
|
||||||
animation: popout;
|
|
||||||
animation-duration: 1s;
|
|
||||||
animation-timing-function: ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes popout {
|
|
||||||
0% {
|
|
||||||
transform: scale(1) rotate(0deg);
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
transform: scale(1.2) rotate(-5deg);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: scale(1) rotate(0deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes float {
|
|
||||||
0% {
|
|
||||||
padding-top: 0px;
|
|
||||||
padding-bottom: 10px;
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
padding-top: 10px;
|
|
||||||
padding-bottom: 0px;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
padding-top: 0px;
|
|
||||||
padding-bottom: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.float {
|
|
||||||
animation: float;
|
|
||||||
animation-duration: 2s;
|
|
||||||
animation-iteration-count: infinite;
|
|
||||||
animation-timing-function: ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes float {
|
|
||||||
0% {
|
|
||||||
padding-top: 0px;
|
|
||||||
padding-bottom: 30px;
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
padding-top: 10px;
|
|
||||||
padding-bottom: 20px;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
padding-top: 0px;
|
|
||||||
padding-bottom: 30px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,399 +0,0 @@
|
|||||||
<script>
|
|
||||||
import Card from './Card.svelte';
|
|
||||||
|
|
||||||
const words = [
|
|
||||||
'JavaScript',
|
|
||||||
"<b class='text-blue-500'>TypeScript</b>",
|
|
||||||
'MySQL',
|
|
||||||
"<b class='text-blue-500'>Laravel</b>",
|
|
||||||
'PHP',
|
|
||||||
'Livewire',
|
|
||||||
"<b class='text-blue-500'>NestJS</b>",
|
|
||||||
'NodeJS',
|
|
||||||
'Unity',
|
|
||||||
'Substance Painter',
|
|
||||||
'Blender',
|
|
||||||
'PostgreSQL',
|
|
||||||
'TailwindCSS',
|
|
||||||
'Rust',
|
|
||||||
"<b class='text-blue-500'>Blazor</b>",
|
|
||||||
'Redis',
|
|
||||||
"<b class='text-blue-500'>Svelte</b>",
|
|
||||||
"<b class='text-blue-500'>SvelteKit</b>",
|
|
||||||
'Python',
|
|
||||||
'Django',
|
|
||||||
'Vue',
|
|
||||||
"<b class='text-blue-500'>Java</b>",
|
|
||||||
"<b class='text-blue-500'>C#</b>",
|
|
||||||
'JavaFX',
|
|
||||||
'NGINX',
|
|
||||||
'Docker',
|
|
||||||
'PayPal API',
|
|
||||||
"<b class='text-blue-500'>REST</b>",
|
|
||||||
'GraphQL',
|
|
||||||
'TypeORM',
|
|
||||||
"<b class='text-blue-500'>Eloquent</b>",
|
|
||||||
'Express',
|
|
||||||
'Bash',
|
|
||||||
'.NET',
|
|
||||||
'Composer',
|
|
||||||
'AlpineJS',
|
|
||||||
'Blade',
|
|
||||||
'JSX',
|
|
||||||
'Pug',
|
|
||||||
"<b class='text-blue-500'>Wordpress</b>",
|
|
||||||
'Vercel',
|
|
||||||
'SEO',
|
|
||||||
'Netlify',
|
|
||||||
'AWS S3',
|
|
||||||
'Backblaze',
|
|
||||||
'Bootstrap',
|
|
||||||
'Fontawesome',
|
|
||||||
'Sass',
|
|
||||||
'.NET Core',
|
|
||||||
'Webpack',
|
|
||||||
"<b class='text-blue-500'>Linux</b>",
|
|
||||||
'Grafana',
|
|
||||||
'Prometheus'
|
|
||||||
];
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<section>
|
|
||||||
<div class="bg-[#3A53FF] h-80 absolute left-0 right-0 top-0" />
|
|
||||||
<img
|
|
||||||
class="absolute left-0 right-0 top-80 w-screen scale-150 z-0 lg:scale-100"
|
|
||||||
src="/homepage/steps.svg"
|
|
||||||
alt="Header"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div class="@container flex flex-col justify-center">
|
|
||||||
<h2 class="font-bold text-4xl lg:text-8xl baron">Experience</h2>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="mt-5 mb-5 lg:mb-20 grid grid-cols-1 @2xl:grid-cols-2 @4xl:grid-cols-3 @7xl:grid-cols-4 gap-5 justify-between"
|
|
||||||
>
|
|
||||||
<div class="absolute top-0 -mt-40" id="portfolio" />
|
|
||||||
|
|
||||||
<span class="@2xl:row-span-3">
|
|
||||||
<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="/saxion.png" class="h-8 rounded-full" alt="puppypride" /> Saxion University
|
|
||||||
</div>
|
|
||||||
<span class="text-sm font-light">2020 to 2024</span>
|
|
||||||
</h3>
|
|
||||||
<p class="text-sm text-gray-800 dark:text-gray-100">
|
|
||||||
I obtained a Bachelor of Science majoring in Software Engineering at the Saxion
|
|
||||||
University of Applied Sciences in The Netherlands. During the study I've done a
|
|
||||||
multitude of projects for clients and worked in teams comprised of people with lots of
|
|
||||||
different backgrounds. I have mostly worked with Java, JavaScript, Python and C#, and
|
|
||||||
also have professional and practical skills with many sysadmin tasks.
|
|
||||||
</p>
|
|
||||||
<img src="homepage/sona/MidFingers.jpg" class="w-full rounded-xl" />
|
|
||||||
</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">Agro IT - Graduation Project</div>
|
|
||||||
<span class="text-sm font-light">2024</span>
|
|
||||||
</h3>
|
|
||||||
<p class="text-sm text-gray-800 dark:text-gray-100">
|
|
||||||
I also did my graduation project at Agro IT, where I built a complete system around
|
|
||||||
employee management, time tracking and employee payouts that integrates with existing
|
|
||||||
infrastructure and streamline the administrative process within the company as well as for
|
|
||||||
customers.
|
|
||||||
</p>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<Card>
|
|
||||||
<h3 class="text-xl font-bold flex-wrap inline-flex items-center gap-3 justify-between">
|
|
||||||
<div class="inline-flex gap-3">Xential - University Project</div>
|
|
||||||
<span class="text-sm font-light">2023</span>
|
|
||||||
</h3>
|
|
||||||
<p class="text-sm text-gray-800 dark:text-gray-100">// insert text here</p>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<Card>
|
|
||||||
<h3 class="text-xl font-bold flex-wrap inline-flex items-center gap-3 justify-between">
|
|
||||||
<div class="inline-flex gap-3">Agro IT - Internship Project</div>
|
|
||||||
<span class="text-sm font-light">2023</span>
|
|
||||||
</h3>
|
|
||||||
<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 APIs and made
|
|
||||||
it possible for customers to use their systems from anywhere.
|
|
||||||
</p>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<Card>
|
|
||||||
<h3 class="text-xl font-bold flex-wrap inline-flex items-center gap-3 justify-between">
|
|
||||||
<div class="inline-flex gap-3">Witteveen+Bos - University Project</div>
|
|
||||||
<span class="text-sm font-light">2022</span>
|
|
||||||
</h3>
|
|
||||||
<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>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<Card>
|
|
||||||
<h3 class="text-xl font-bold flex-wrap inline-flex items-center gap-3 justify-between">
|
|
||||||
<div class="inline-flex gap-3">AgroVision - University Project</div>
|
|
||||||
<span class="text-sm font-light">2021</span>
|
|
||||||
</h3>
|
|
||||||
<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>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<Card>
|
|
||||||
<h3 class="text-xl font-bold flex-wrap inline-flex items-center gap-3 justify-between">
|
|
||||||
<div class="inline-flex gap-3">SuiteSeven - Internship</div>
|
|
||||||
<span class="text-sm font-light">2019</span>
|
|
||||||
</h3>
|
|
||||||
<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>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<Card>
|
|
||||||
<h3 class="text-xl font-bold flex-wrap inline-flex items-center gap-3 justify-between">
|
|
||||||
<div class="inline-flex gap-3">Profity - Internship</div>
|
|
||||||
<span class="text-sm font-light">2018</span>
|
|
||||||
</h3>
|
|
||||||
<p class="text-sm text-gray-800 dark:text-gray-100">
|
|
||||||
Profity is a software company 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>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h2 class="font-bold text-4xl lg:text-8xl baron">Companies</h2>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="mt-5 mb-5 lg:mb-20 grid grid-cols-1 @2xl:grid-cols-2 @4xl:grid-cols-3 @7xl:grid-cols-4 gap-5 justify-between"
|
|
||||||
>
|
|
||||||
<div class="absolute top-0 -mt-40" id="portfolio" />
|
|
||||||
|
|
||||||
<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">
|
|
||||||
During an internship at Agro IT I developed a web environment for RVDM, a realtime manure
|
|
||||||
transport compliance system. The company liked what I built and hired me to develop it
|
|
||||||
further as a sidejob. I then developed another system for hour and work registration for
|
|
||||||
my graduation project, and was hired to continue as a software engineer after my studies.
|
|
||||||
Now I help Agro IT transition their products to the cloud and develop new systems for
|
|
||||||
customers.
|
|
||||||
</p>
|
|
||||||
<img src="/rvdm.png" class="rounded-xl" alt="Picture of some people from the DevOps Team" />
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<span class="@2xl:row-span-2">
|
|
||||||
<Card
|
|
||||||
buttonHref="https://puppypride.social"
|
|
||||||
buttonText="🌐 Visit the Puppy Pride social network"
|
|
||||||
>
|
|
||||||
<div class="flex flex-col gap-5">
|
|
||||||
<span class="flex flex-col gap-5">
|
|
||||||
<h3
|
|
||||||
class="text-xl flex-wrap font-bold inline-flex items-center gap -3 justify-between"
|
|
||||||
>
|
|
||||||
<div class="inline-flex gap-3">
|
|
||||||
<img src="/puppypride.png" class="h-8" alt="puppypride" /> Puppy Pride
|
|
||||||
</div>
|
|
||||||
<span class="text-sm font-light">2021 and ongoing</span>
|
|
||||||
</h3>
|
|
||||||
<p class="text-sm text-gray-800 dark:text-gray-100">
|
|
||||||
I am the lead developer of Puppy Pride since January of 2021. I develop and maintain
|
|
||||||
Puppy Pride's social network, servers and events.
|
|
||||||
<br /><br />
|
|
||||||
The site was built from the ground up using the TALL (Laravel) stack and sports a large
|
|
||||||
array of features such as blogging, albums, subscriptions, events, instant messaging,
|
|
||||||
customizable profiles, feeds, groups and advanced group management, and so on.
|
|
||||||
<br /><br />
|
|
||||||
Furthermore I have gotten experience with a lot of real concepts such as advanced dockerization,
|
|
||||||
deployment, load balancing, caching, server maintenance and more.
|
|
||||||
<br /><br />
|
|
||||||
<b>Warning:</b> Puppy Pride is an adult themed social network for people into petplay
|
|
||||||
based in England. Explicit imagery may be present. Due to the site's content, logging
|
|
||||||
in is required to view the majority of its features.
|
|
||||||
</p>
|
|
||||||
</span>
|
|
||||||
<span class="flex items-center">
|
|
||||||
<img src="/homepage/pp.png" alt="puppypride profile page" />
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<span>
|
|
||||||
<Card buttonHref="https://dubbelnull.com/showcase" buttonText="➡️ View DubbelNull showcase">
|
|
||||||
<h3 class="text-xl font-bold flex-wrap inline-flex items-center gap-3 justify-between">
|
|
||||||
<div class="inline-flex gap-3">
|
|
||||||
<img src="/dubbelnull.png" class="h-10 -my-1 -ml-1" alt="dubbelnull" /> DubbelNull
|
|
||||||
</div>
|
|
||||||
<span class="text-sm font-light">2020 and ongoing</span>
|
|
||||||
</h3>
|
|
||||||
<p class="text-sm text-gray-800 dark:text-gray-100">
|
|
||||||
DubbelNull is a family business that does internet based development for small and
|
|
||||||
medium sized companies, such as creating websites, manage hosting, advice and other
|
|
||||||
similar things. I have made several websites for clients under this name, and you can
|
|
||||||
find more of my works on the DubbelNull website.
|
|
||||||
</p>
|
|
||||||
</Card>
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<span class="@2xl:col-span-1">
|
|
||||||
<Card buttonHref="https://furality.org/" buttonText="🦊 Visit furality.org">
|
|
||||||
<div class="w-full flex flex-col gap-5">
|
|
||||||
<h3
|
|
||||||
class="w-full text-xl font-bold flex-wrap inline-flex items-center gap-3 justify-between"
|
|
||||||
>
|
|
||||||
<div class="inline-flex gap-3">
|
|
||||||
<img src="/fox.png" class="h-8" alt="furality" /> Furality
|
|
||||||
</div>
|
|
||||||
<span class="text-sm font-light">2023 and ongoing</span>
|
|
||||||
</h3>
|
|
||||||
<p class="text-sm text-gray-800 dark:text-gray-100">
|
|
||||||
Furality is a nonprofit organisation that organises Furality Online Experience
|
|
||||||
(F.O.X.), the largest online furry convention in the world hosted inside VRChat.
|
|
||||||
<br /><br />
|
|
||||||
Since December 2023 I volunteer for Furality Inc. as a Backend Developer. I work together
|
|
||||||
with the rest of the DevOps Department to work on APIs and systems that use things such
|
|
||||||
as TypeScript, NestJS, Grafana, Prometheus, RabbitMQ, Authentik, C#, Unity, and more.
|
|
||||||
<br /><br />
|
|
||||||
I am mainly tasked with developing Furality's in-house OIDC system, and expanding Furality's
|
|
||||||
Unity plugins. But I also work on upgrading and scaling queue runners, updating existing
|
|
||||||
APIs that connect with Discord, Patreon, VRChat and others to run the convention itself,
|
|
||||||
and maintaining databases and infrastructure surrounding the systems.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<Card
|
|
||||||
buttonHref="https://prideunbound.uk"
|
|
||||||
buttonText="📂 See archived 2023 Pride Unbound site"
|
|
||||||
>
|
|
||||||
<div class="flex flex-col gap-5">
|
|
||||||
<h3 class="text-xl font-bold flex-wrap inline-flex items-center gap-3 justify-between">
|
|
||||||
<div class="inline-flex gap-3">
|
|
||||||
<img src="/prideunbound.png" class="h-8 rounded-full" alt="prideunbound" /> Pride Unbound
|
|
||||||
</div>
|
|
||||||
<span class="text-sm font-light">2023 and ongoing</span>
|
|
||||||
</h3>
|
|
||||||
<p class="text-sm text-gray-800 dark:text-gray-100">
|
|
||||||
Pride Unbound is a convention based in London ran by Puppy Pride. I create and maintain
|
|
||||||
their software and server infrastructure. The website is custom made with Laravel and
|
|
||||||
has a registration system, payment system, scheduling system, booking system and CMS
|
|
||||||
pages system all managed by the event organisers through a dashboard.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<Card>
|
|
||||||
<div class="flex flex-col gap-5">
|
|
||||||
<h3 class="text-xl font-bold flex-wrap inline-flex items-center gap-3 justify-between">
|
|
||||||
<div class="inline-flex gap-3">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">// insert here</p>
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h2 class="font-bold text-4xl lg:text-8xl baron">Skills</h2>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="mt-5 mb-5 lg:mb-20 grid grid-cols-1 @2xl:grid-cols-2 @4xl:grid-cols-3 @7xl:grid-cols-4 gap-5 justify-between"
|
|
||||||
>
|
|
||||||
<div class="absolute top-0 -mt-40" id="portfolio" />
|
|
||||||
|
|
||||||
<span class="@xl:row-span-3">
|
|
||||||
<Card>
|
|
||||||
<h3 class="text-xl font-bold flex-wrap inline-flex items-center gap-3">
|
|
||||||
<img src="/homepage/esu.png" class="h-10 rounded-full bg-black p-1" alt="esu" /> Easter System
|
|
||||||
Universe
|
|
||||||
</h3>
|
|
||||||
<div class="flex flex-col pb-10">
|
|
||||||
<p class="text-sm text-gray-800 dark:text-gray-100">
|
|
||||||
For the past years I've worked on building and writing a universe of mysteries called
|
|
||||||
ESU. It is now mature enough to release, with several dimensions and planets on which
|
|
||||||
the natives speak their own unique languages.
|
|
||||||
<br /><br />
|
|
||||||
The universe confronts you with anomalies and alien concepts familiar enough to relate
|
|
||||||
with as they fight for survival in an ever more technological world. Worlds collide as
|
|
||||||
it becomes ever more apparent that the puppeteers of the world might not be who you think
|
|
||||||
they are, instigating a battle in which you must rely on hope to make it through.
|
|
||||||
<br /><br />
|
|
||||||
The first written story titled "Luther's Throne" is planned to release soon and will be
|
|
||||||
published on this website.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<span class="flex items-center">
|
|
||||||
<img src="/homepage/esubanner.png" alt="cover of act 1" />
|
|
||||||
</span>
|
|
||||||
</Card>
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<span class="@2xl:row-span-2">
|
|
||||||
<Card>
|
|
||||||
<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="text-sm text-gray-800 dark:text-gray-100">
|
|
||||||
I can work with a wide range of systems, frameworks and technologies! I have a lot of
|
|
||||||
common knowledge around computer software and hardware that i can use to quickly adapt
|
|
||||||
to new languages and frameworks. Here is a constantly expanding list of some of the
|
|
||||||
things I am comfortable and like working with:
|
|
||||||
</p>
|
|
||||||
<div id="scroll-container" class="flex flex-wrap gap-1 w-full text-center">
|
|
||||||
{#each words as word, key}
|
|
||||||
<p>
|
|
||||||
{#if key == words.length - 2}
|
|
||||||
{@html word} and
|
|
||||||
{:else if key == words.length - 1}
|
|
||||||
{@html word}.
|
|
||||||
{:else}
|
|
||||||
{@html word},
|
|
||||||
{/if}
|
|
||||||
</p>
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
<p class="text-sm font-bold italic pt-5">... and always eager to try out new things!</p>
|
|
||||||
</Card>
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<span class="@xl:row-span-2 @container">
|
|
||||||
<Card>
|
|
||||||
<h3 class="text-xl font-bold flex-wrap inline-flex items-center gap-3 justify-between">
|
|
||||||
<div class="inline-flex gap-3">🧑💻 Always open</div>
|
|
||||||
</h3>
|
|
||||||
<div class="h-full flex flex-col justify-between">
|
|
||||||
<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 />
|
|
||||||
Most of my experiences listed have happened because people approached me with cool ideas.
|
|
||||||
If you have something you need made and think we could provide value to each other, I would
|
|
||||||
be glad to look at your opportunities.
|
|
||||||
</p>
|
|
||||||
<img src="/banner4.png" class="w-full -mb-5" alt="mid" />
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
@ -0,0 +1,131 @@
|
|||||||
|
<script>
|
||||||
|
import Card from '$lib/home/Card.svelte';
|
||||||
|
import Section from '$lib/portfolio/Section.svelte';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Section title="experience">
|
||||||
|
<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">
|
||||||
|
During an internship at Agro IT I developed a web environment for RVDM, a realtime manure
|
||||||
|
transport compliance system. The company liked what I built and hired me to develop it further
|
||||||
|
as a sidejob. I then developed another system for hour and work registration for my graduation
|
||||||
|
project, and was hired to continue as a software engineer after my studies. Now I help Agro IT
|
||||||
|
transition their products to the cloud and develop new systems for customers.
|
||||||
|
</p>
|
||||||
|
<img src="/rvdm.png" class="rounded-xl" alt="Picture of some people from the DevOps Team" />
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<span class="@2xl:row-span-2">
|
||||||
|
<Card
|
||||||
|
buttonHref="https://puppypride.social"
|
||||||
|
buttonText="🌐 Visit the Puppy Pride social network"
|
||||||
|
>
|
||||||
|
<div class="flex flex-col gap-5">
|
||||||
|
<span class="flex flex-col gap-5">
|
||||||
|
<h3 class="text-xl flex-wrap font-bold inline-flex items-center gap -3 justify-between">
|
||||||
|
<div class="inline-flex gap-3">
|
||||||
|
<img src="/puppypride.png" class="h-8" alt="puppypride" /> Puppy Pride
|
||||||
|
</div>
|
||||||
|
<span class="text-sm font-light">2021 and ongoing</span>
|
||||||
|
</h3>
|
||||||
|
<p class="text-sm text-gray-800 dark:text-gray-100">
|
||||||
|
I am the lead developer of Puppy Pride since January of 2021. I develop and maintain
|
||||||
|
Puppy Pride's social network, servers and events.
|
||||||
|
<br /><br />
|
||||||
|
The site was built from the ground up using the TALL (Laravel) stack and sports a large array
|
||||||
|
of features such as blogging, albums, subscriptions, events, instant messaging, customizable
|
||||||
|
profiles, feeds, groups and advanced group management, and so on.
|
||||||
|
<br /><br />
|
||||||
|
Furthermore I have gotten experience with a lot of real concepts such as advanced dockerization,
|
||||||
|
deployment, load balancing, caching, server maintenance and more.
|
||||||
|
<br /><br />
|
||||||
|
<b>Warning:</b> Puppy Pride is an adult themed social network for people into petplay based
|
||||||
|
in England. Explicit imagery may be present. Due to the site's content, logging in is required
|
||||||
|
to view the majority of its features.
|
||||||
|
</p>
|
||||||
|
</span>
|
||||||
|
<span class="flex items-center">
|
||||||
|
<img src="/homepage/pp.png" alt="puppypride profile page" />
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<span>
|
||||||
|
<Card buttonHref="https://dubbelnull.com/showcase" buttonText="➡️ View DubbelNull showcase">
|
||||||
|
<h3 class="text-xl font-bold flex-wrap inline-flex items-center gap-3 justify-between">
|
||||||
|
<div class="inline-flex gap-3">
|
||||||
|
<img src="/dubbelnull.png" class="h-10 -my-1 -ml-1" alt="dubbelnull" /> DubbelNull
|
||||||
|
</div>
|
||||||
|
<span class="text-sm font-light">2020 and ongoing</span>
|
||||||
|
</h3>
|
||||||
|
<p class="text-sm text-gray-800 dark:text-gray-100">
|
||||||
|
DubbelNull is a family business that does internet based development for small and medium
|
||||||
|
sized companies, such as creating websites, manage hosting, advice and other similar things.
|
||||||
|
I have made several websites for clients under this name, and you can find more of my works
|
||||||
|
on the DubbelNull website.
|
||||||
|
</p>
|
||||||
|
</Card>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<span class="@2xl:col-span-1">
|
||||||
|
<Card buttonHref="https://furality.org/" buttonText="🦊 Visit furality.org">
|
||||||
|
<div class="w-full flex flex-col gap-5">
|
||||||
|
<h3
|
||||||
|
class="w-full text-xl font-bold flex-wrap inline-flex items-center gap-3 justify-between"
|
||||||
|
>
|
||||||
|
<div class="inline-flex gap-3">
|
||||||
|
<img src="/fox.png" class="h-8" alt="furality" /> Furality
|
||||||
|
</div>
|
||||||
|
<span class="text-sm font-light">2023 and ongoing</span>
|
||||||
|
</h3>
|
||||||
|
<p class="text-sm text-gray-800 dark:text-gray-100">
|
||||||
|
Furality is a nonprofit organisation that organises Furality Online Experience (F.O.X.),
|
||||||
|
the largest online furry convention in the world hosted inside VRChat.
|
||||||
|
<br /><br />
|
||||||
|
Since December 2023 I volunteer for Furality Inc. as a Backend Developer. I work together with
|
||||||
|
the rest of the DevOps Department to work on APIs and systems that use things such as TypeScript,
|
||||||
|
NestJS, Grafana, Prometheus, RabbitMQ, Authentik, C#, Unity, and more.
|
||||||
|
<br /><br />
|
||||||
|
I am mainly tasked with developing Furality's in-house OIDC system, and expanding Furality's
|
||||||
|
Unity plugins. But I also work on upgrading and scaling queue runners, updating existing APIs
|
||||||
|
that connect with Discord, Patreon, VRChat and others to run the convention itself, and maintaining
|
||||||
|
databases and infrastructure surrounding the systems.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<Card buttonHref="https://prideunbound.uk" buttonText="📂 See archived 2023 Pride Unbound site">
|
||||||
|
<div class="flex flex-col gap-5">
|
||||||
|
<h3 class="text-xl font-bold flex-wrap inline-flex items-center gap-3 justify-between">
|
||||||
|
<div class="inline-flex gap-3">
|
||||||
|
<img src="/prideunbound.png" class="h-8 rounded-full" alt="prideunbound" /> Pride Unbound
|
||||||
|
</div>
|
||||||
|
<span class="text-sm font-light">2023 and ongoing</span>
|
||||||
|
</h3>
|
||||||
|
<p class="text-sm text-gray-800 dark:text-gray-100">
|
||||||
|
Pride Unbound is a convention based in London ran by Puppy Pride. I create and maintain
|
||||||
|
their software and server infrastructure. The website is custom made with Laravel and has a
|
||||||
|
registration system, payment system, scheduling system, booking system and CMS pages system
|
||||||
|
all managed by the event organisers through a dashboard.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<div class="flex flex-col gap-5">
|
||||||
|
<h3 class="text-xl font-bold flex-wrap inline-flex items-center gap-3 justify-between">
|
||||||
|
<div class="inline-flex gap-3">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">// insert here</p>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
</Section>
|
||||||
@ -0,0 +1,104 @@
|
|||||||
|
<script>
|
||||||
|
import Card from '$lib/home/Card.svelte';
|
||||||
|
import Section from '$lib/portfolio/Section.svelte';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Section title="programming">
|
||||||
|
<span class="@2xl:row-span-3">
|
||||||
|
<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="/saxion.png" class="h-8 rounded-full" alt="puppypride" /> Saxion University
|
||||||
|
</div>
|
||||||
|
<span class="text-sm font-light">2020 to 2024</span>
|
||||||
|
</h3>
|
||||||
|
<p class="text-sm text-gray-800 dark:text-gray-100">
|
||||||
|
I obtained a Bachelor of Science majoring in Software Engineering at the Saxion University
|
||||||
|
of Applied Sciences in The Netherlands. During the study I've done a multitude of projects
|
||||||
|
for clients and worked in teams comprised of people with lots of different backgrounds. I
|
||||||
|
have mostly worked with Java, JavaScript, Python and C#, and also have professional and
|
||||||
|
practical skills with many sysadmin tasks.
|
||||||
|
</p>
|
||||||
|
<img src="homepage/sona/MidFingers.jpg" class="w-full rounded-xl" />
|
||||||
|
</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">Agro IT - Graduation Project</div>
|
||||||
|
<span class="text-sm font-light">2024</span>
|
||||||
|
</h3>
|
||||||
|
<p class="text-sm text-gray-800 dark:text-gray-100">
|
||||||
|
I also did my graduation project at Agro IT, where I built a complete system around employee
|
||||||
|
management, time tracking and employee payouts that integrates with existing infrastructure
|
||||||
|
and streamline the administrative process within the company as well as for customers.
|
||||||
|
</p>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<h3 class="text-xl font-bold flex-wrap inline-flex items-center gap-3 justify-between">
|
||||||
|
<div class="inline-flex gap-3">Xential - University Project</div>
|
||||||
|
<span class="text-sm font-light">2023</span>
|
||||||
|
</h3>
|
||||||
|
<p class="text-sm text-gray-800 dark:text-gray-100">// insert text here</p>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<h3 class="text-xl font-bold flex-wrap inline-flex items-center gap-3 justify-between">
|
||||||
|
<div class="inline-flex gap-3">Agro IT - Internship Project</div>
|
||||||
|
<span class="text-sm font-light">2023</span>
|
||||||
|
</h3>
|
||||||
|
<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 APIs and made it possible
|
||||||
|
for customers to use their systems from anywhere.
|
||||||
|
</p>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<h3 class="text-xl font-bold flex-wrap inline-flex items-center gap-3 justify-between">
|
||||||
|
<div class="inline-flex gap-3">Witteveen+Bos - University Project</div>
|
||||||
|
<span class="text-sm font-light">2022</span>
|
||||||
|
</h3>
|
||||||
|
<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>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<h3 class="text-xl font-bold flex-wrap inline-flex items-center gap-3 justify-between">
|
||||||
|
<div class="inline-flex gap-3">AgroVision - University Project</div>
|
||||||
|
<span class="text-sm font-light">2021</span>
|
||||||
|
</h3>
|
||||||
|
<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>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<h3 class="text-xl font-bold flex-wrap inline-flex items-center gap-3 justify-between">
|
||||||
|
<div class="inline-flex gap-3">SuiteSeven - Internship</div>
|
||||||
|
<span class="text-sm font-light">2019</span>
|
||||||
|
</h3>
|
||||||
|
<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>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<h3 class="text-xl font-bold flex-wrap inline-flex items-center gap-3 justify-between">
|
||||||
|
<div class="inline-flex gap-3">Profity - Internship</div>
|
||||||
|
<span class="text-sm font-light">2018</span>
|
||||||
|
</h3>
|
||||||
|
<p class="text-sm text-gray-800 dark:text-gray-100">
|
||||||
|
Profity is a software company 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>
|
||||||
|
</Card>
|
||||||
|
</Section>
|
||||||
@ -0,0 +1,137 @@
|
|||||||
|
<script>
|
||||||
|
import Card from '$lib/home/Card.svelte';
|
||||||
|
import Section from '$lib/portfolio/Section.svelte';
|
||||||
|
|
||||||
|
const words = [
|
||||||
|
'JavaScript',
|
||||||
|
"<b class='text-blue-500'>TypeScript</b>",
|
||||||
|
'MySQL',
|
||||||
|
"<b class='text-blue-500'>Laravel</b>",
|
||||||
|
'PHP',
|
||||||
|
'Livewire',
|
||||||
|
"<b class='text-blue-500'>NestJS</b>",
|
||||||
|
'NodeJS',
|
||||||
|
'Unity',
|
||||||
|
'Substance Painter',
|
||||||
|
'Blender',
|
||||||
|
'PostgreSQL',
|
||||||
|
'TailwindCSS',
|
||||||
|
'Rust',
|
||||||
|
"<b class='text-blue-500'>Blazor</b>",
|
||||||
|
'Redis',
|
||||||
|
"<b class='text-blue-500'>Svelte</b>",
|
||||||
|
"<b class='text-blue-500'>SvelteKit</b>",
|
||||||
|
'Python',
|
||||||
|
'Django',
|
||||||
|
'Vue',
|
||||||
|
"<b class='text-blue-500'>Java</b>",
|
||||||
|
"<b class='text-blue-500'>C#</b>",
|
||||||
|
'JavaFX',
|
||||||
|
'NGINX',
|
||||||
|
'Docker',
|
||||||
|
'PayPal API',
|
||||||
|
"<b class='text-blue-500'>REST</b>",
|
||||||
|
'GraphQL',
|
||||||
|
'TypeORM',
|
||||||
|
"<b class='text-blue-500'>Eloquent</b>",
|
||||||
|
'Express',
|
||||||
|
'Bash',
|
||||||
|
'.NET',
|
||||||
|
'Composer',
|
||||||
|
'AlpineJS',
|
||||||
|
'Blade',
|
||||||
|
'JSX',
|
||||||
|
'Pug',
|
||||||
|
"<b class='text-blue-500'>Wordpress</b>",
|
||||||
|
'Vercel',
|
||||||
|
'SEO',
|
||||||
|
'Netlify',
|
||||||
|
'AWS S3',
|
||||||
|
'Backblaze',
|
||||||
|
'Bootstrap',
|
||||||
|
'Fontawesome',
|
||||||
|
'Sass',
|
||||||
|
'.NET Core',
|
||||||
|
'Webpack',
|
||||||
|
"<b class='text-blue-500'>Linux</b>",
|
||||||
|
'Grafana',
|
||||||
|
'Prometheus'
|
||||||
|
];
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Section title="projects">
|
||||||
|
<span class="@xl:row-span-3">
|
||||||
|
<Card>
|
||||||
|
<h3 class="text-xl font-bold flex-wrap inline-flex items-center gap-3">
|
||||||
|
<img src="/homepage/esu.png" class="h-10 rounded-full bg-black p-1" alt="esu" /> Easter System
|
||||||
|
Universe
|
||||||
|
</h3>
|
||||||
|
<div class="flex flex-col pb-10">
|
||||||
|
<p class="text-sm text-gray-800 dark:text-gray-100">
|
||||||
|
For the past years I've worked on building and writing a universe of mysteries called ESU.
|
||||||
|
It is now mature enough to release, with several dimensions and planets on which the
|
||||||
|
natives speak their own unique languages.
|
||||||
|
<br /><br />
|
||||||
|
The universe confronts you with anomalies and alien concepts familiar enough to relate with
|
||||||
|
as they fight for survival in an ever more technological world. Worlds collide as it becomes
|
||||||
|
ever more apparent that the puppeteers of the world might not be who you think they are, instigating
|
||||||
|
a battle in which you must rely on hope to make it through.
|
||||||
|
<br /><br />
|
||||||
|
The first written story titled "Luther's Throne" is planned to release soon and will be published
|
||||||
|
on this website.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<span class="flex items-center">
|
||||||
|
<img src="/homepage/esubanner.png" alt="cover of act 1" />
|
||||||
|
</span>
|
||||||
|
</Card>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<span class="@2xl:row-span-2">
|
||||||
|
<Card>
|
||||||
|
<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="text-sm text-gray-800 dark:text-gray-100">
|
||||||
|
I can work with a wide range of systems, frameworks and technologies! I have a lot of common
|
||||||
|
knowledge around computer software and hardware that i can use to quickly adapt to new
|
||||||
|
languages and frameworks. Here is a constantly expanding list of some of the things I am
|
||||||
|
comfortable and like working with:
|
||||||
|
</p>
|
||||||
|
<div id="scroll-container" class="flex flex-wrap gap-1 w-full text-center">
|
||||||
|
{#each words as word, key}
|
||||||
|
<p>
|
||||||
|
{#if key == words.length - 2}
|
||||||
|
{@html word} and
|
||||||
|
{:else if key == words.length - 1}
|
||||||
|
{@html word}.
|
||||||
|
{:else}
|
||||||
|
{@html word},
|
||||||
|
{/if}
|
||||||
|
</p>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
<p class="text-sm font-bold italic pt-5">... and always eager to try out new things!</p>
|
||||||
|
</Card>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<span class="@xl:row-span-2 @container">
|
||||||
|
<Card>
|
||||||
|
<h3 class="text-xl font-bold flex-wrap inline-flex items-center gap-3 justify-between">
|
||||||
|
<div class="inline-flex gap-3">🧑💻 Always open</div>
|
||||||
|
</h3>
|
||||||
|
<div class="h-full flex flex-col justify-between">
|
||||||
|
<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 />
|
||||||
|
Most of my experiences listed have happened because people approached me with cool ideas. If
|
||||||
|
you have something you need made and think we could provide value to each other, I would be
|
||||||
|
glad to look at your opportunities.
|
||||||
|
</p>
|
||||||
|
<img src="/banner4.png" class="w-full -mb-5" alt="mid" />
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
</span>
|
||||||
|
</Section>
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
<script>
|
||||||
|
export let title = '';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<img
|
||||||
|
class="scale-150 w-full -mt-20 rotate-180 lg:scale-100"
|
||||||
|
src="/homepage/steps.svg"
|
||||||
|
alt="Header"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div class="@container flex flex-col justify-center bg-[#3A53FF] px-10 pb-40 -mt-1" id={title}>
|
||||||
|
<h2 class="font-bold text-4xl text-center lg:text-8xl baron mb-20 text-white">{title}</h2>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="grid grid-cols-1 @2xl:grid-cols-2 @4xl:grid-cols-3 @7xl:grid-cols-4 gap-5 justify-between"
|
||||||
|
>
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<img class="scale-150 w-full lg:scale-100" src="/homepage/steps.svg" alt="Header" />
|
||||||
@ -1,16 +1,254 @@
|
|||||||
<script>
|
<script>
|
||||||
import Banner from '$lib/home/Banner.svelte';
|
import Socials from '$lib/Socials.svelte';
|
||||||
import Blog from '$lib/home/Blog.svelte';
|
import { onMount } from 'svelte';
|
||||||
import Portfolio from '$lib/home/Portfolio.svelte';
|
import { fade, blur, fly, slide, scale } from 'svelte/transition';
|
||||||
import Sona from '$lib/home/Sona.svelte';
|
import { quintOut } from 'svelte/easing';
|
||||||
import Virtual from '$lib/home/Virtual.svelte';
|
|
||||||
import Furry from '$lib/home/Furry.svelte';
|
let name = 'Midnight';
|
||||||
import Nav from '$lib/header/Nav.svelte';
|
|
||||||
import Header from '$lib/header/Header.svelte';
|
const array = [
|
||||||
|
'/banner1.png',
|
||||||
|
'/banner2.png',
|
||||||
|
'/banner3.png',
|
||||||
|
'/banner4.png',
|
||||||
|
'/banner5.jpeg',
|
||||||
|
'/banner6.png',
|
||||||
|
'/banner7.png',
|
||||||
|
'/banner8.png'
|
||||||
|
];
|
||||||
|
|
||||||
|
const words = [
|
||||||
|
'JavaScript',
|
||||||
|
'TypeScript',
|
||||||
|
'MySQL',
|
||||||
|
'Laravel',
|
||||||
|
'PHP',
|
||||||
|
'Livewire',
|
||||||
|
'NestJS',
|
||||||
|
'NodeJS',
|
||||||
|
'Unity',
|
||||||
|
'Substance Painter',
|
||||||
|
'Blender',
|
||||||
|
'PostgreSQL',
|
||||||
|
'TailwindCSS',
|
||||||
|
'Bootstrap',
|
||||||
|
'Fontawesome',
|
||||||
|
'Sass',
|
||||||
|
'Webpack',
|
||||||
|
'Redis',
|
||||||
|
'Svelte',
|
||||||
|
'SvelteKit',
|
||||||
|
'Python',
|
||||||
|
'Django',
|
||||||
|
'Vue',
|
||||||
|
'Java',
|
||||||
|
'JavaFX',
|
||||||
|
'NGINX',
|
||||||
|
'Docker',
|
||||||
|
'REST',
|
||||||
|
'GraphQL',
|
||||||
|
'TypeORM',
|
||||||
|
'Eloquent',
|
||||||
|
'Express',
|
||||||
|
'Linux',
|
||||||
|
'Composer',
|
||||||
|
'AlpineJS',
|
||||||
|
'Blade',
|
||||||
|
'JSX',
|
||||||
|
'Pug',
|
||||||
|
'Wordpress',
|
||||||
|
'Vercel',
|
||||||
|
'Netlify',
|
||||||
|
'AWS S3',
|
||||||
|
'Backblaze',
|
||||||
|
'EntityFramework',
|
||||||
|
'.NET Core'
|
||||||
|
];
|
||||||
|
|
||||||
|
const names = ['Pascal', 'Mid', 'Midblep', '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');
|
||||||
|
list.classList.add('flex', 'gap-2');
|
||||||
|
|
||||||
|
for (let i = 0; i < 20; i++) {
|
||||||
|
const word = words[Math.floor(Math.random() * words.length)];
|
||||||
|
let element = document.createElement('span');
|
||||||
|
element.innerHTML = word;
|
||||||
|
element.classList.add('text-9xl', 'p-10', 'whitespace-nowrap');
|
||||||
|
|
||||||
|
list.appendChild(element);
|
||||||
|
}
|
||||||
|
|
||||||
|
document.getElementById('lists').appendChild(list);
|
||||||
|
}
|
||||||
|
|
||||||
|
let i = 0;
|
||||||
|
setInterval(() => {
|
||||||
|
name = names[i % 4];
|
||||||
|
i++;
|
||||||
|
}, 3000);
|
||||||
|
});
|
||||||
|
|
||||||
|
let randomBannerPic = array[Math.floor(Math.random() * array.length)];
|
||||||
|
randomBannerPic = '/homepage/banner.png';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<svelte:head>
|
<svelte:head>
|
||||||
<title>Bart Industries</title>
|
<title>Bart Industries</title>
|
||||||
</svelte:head>
|
</svelte:head>
|
||||||
|
|
||||||
<Banner />
|
<main class="w-full h-full lg:px-2 xl:px-5 @container">
|
||||||
|
<section
|
||||||
|
class="bg-[#3A53FF] @2xl:rounded-t-[40px] relative overflow-hidden @container text-white"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="absolute inset-0 w-full h-full bg-no-repeat bg-cover bg-top opacity-50 rounded-t-[40px]"
|
||||||
|
style="background-image: url('portfoliobackg.svg')"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<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 class="flex h-full w-full @4xl:p-20 gap-20 p-5 z-10">
|
||||||
|
<div class="items-start @7xl:block hidden z-10 w-full">
|
||||||
|
<img src={randomBannerPic} alt="mid" class="w-[40vw] z-10" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-col py-5 h-full gap-10 z-10 w-full">
|
||||||
|
<div class="flex flex-col gap-2">
|
||||||
|
<p class="text-4xl font-bold"><span class="whitepigeon">Hello</span></p>
|
||||||
|
<h2 class="text-6xl flex gap-2 font-extralight">
|
||||||
|
I'm
|
||||||
|
<span class="flex items-center">
|
||||||
|
{#key name}
|
||||||
|
<span in:scale>{name}</span>
|
||||||
|
{/key}
|
||||||
|
</span>
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="lg:text-lg @2xl:mb-10">
|
||||||
|
I'm a {calculateAge(new Date('2001-10-30'))} year old programmer and tech enthusiast from The
|
||||||
|
Netherlands. I have a Bachelor of Science degree in Software Engineering and run a development
|
||||||
|
company called DubbelNull. During the week I work at Agro IT and build software that improves
|
||||||
|
the lives of people through efficient solutions.
|
||||||
|
<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 like
|
||||||
|
sharing with the world.
|
||||||
|
<br /><br />
|
||||||
|
Feel free to have a look around and learn about who I am and the things I've worked on.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<Socials type="default" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="hidden @2xl:block">
|
||||||
|
<svg
|
||||||
|
class="dark:hidden block absolute left-0 bottom-0 right-0 scale-105 -ml-5"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 1440 320"
|
||||||
|
><path
|
||||||
|
fill="#fff"
|
||||||
|
fill-opacity="1"
|
||||||
|
d="M0,96L48,96C96,96,192,96,288,112C384,128,480,160,576,176C672,192,768,192,864,213.3C960,235,1056,277,1152,266.7C1248,256,1344,192,1392,160L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"
|
||||||
|
/></svg
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="hidden dark:block absolute left-0 bottom-0 right-0 scale-105 -ml-5"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 1440 320"
|
||||||
|
><path
|
||||||
|
fill="#000"
|
||||||
|
fill-opacity="1"
|
||||||
|
d="M0,96L48,96C96,96,192,96,288,112C384,128,480,160,576,176C672,192,768,192,864,213.3C960,235,1056,277,1152,266.7C1248,256,1344,192,1392,160L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"
|
||||||
|
/></svg
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.anim {
|
||||||
|
user-select: none;
|
||||||
|
animation: anim;
|
||||||
|
animation-duration: 200s;
|
||||||
|
animation-timing-function: linear;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes anim {
|
||||||
|
0% {
|
||||||
|
transform: translate(100%, -100%) rotate(-30deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translate(-100%, 100%) rotate(-30deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.popout {
|
||||||
|
animation: popout;
|
||||||
|
animation-duration: 1s;
|
||||||
|
animation-timing-function: ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes popout {
|
||||||
|
0% {
|
||||||
|
transform: scale(1) rotate(0deg);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: scale(1.2) rotate(-5deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: scale(1) rotate(0deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes float {
|
||||||
|
0% {
|
||||||
|
padding-top: 0px;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
padding-top: 10px;
|
||||||
|
padding-bottom: 0px;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
padding-top: 0px;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.float {
|
||||||
|
animation: float;
|
||||||
|
animation-duration: 2s;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
animation-timing-function: ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes float {
|
||||||
|
0% {
|
||||||
|
padding-top: 0px;
|
||||||
|
padding-bottom: 30px;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
padding-top: 10px;
|
||||||
|
padding-bottom: 20px;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
padding-top: 0px;
|
||||||
|
padding-bottom: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@ -1,17 +1,15 @@
|
|||||||
<script>
|
<script>
|
||||||
import Banner from '$lib/home/Banner.svelte';
|
import Experience from '$lib/portfolio/Experience.svelte';
|
||||||
import Blog from '$lib/home/Blog.svelte';
|
import Professional from '$lib/portfolio/Professional.svelte';
|
||||||
import Portfolio from '$lib/home/Portfolio.svelte';
|
import Projects from '$lib/portfolio/Projects.svelte';
|
||||||
import Sona from '$lib/home/Sona.svelte';
|
|
||||||
import Virtual from '$lib/home/Virtual.svelte';
|
|
||||||
import Furry from '$lib/home/Furry.svelte';
|
|
||||||
import Footer from '$lib/footer/Footer.svelte';
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<svelte:head>
|
<svelte:head>
|
||||||
<title>Bart Industries</title>
|
<title>Bart Industries</title>
|
||||||
</svelte:head>
|
</svelte:head>
|
||||||
|
|
||||||
<main class="flex flex-col mt-20">
|
<main class="flex flex-col my-20">
|
||||||
<Portfolio />
|
<Professional />
|
||||||
|
<Experience />
|
||||||
|
<Projects />
|
||||||
</main>
|
</main>
|
||||||
|
|||||||
@ -0,0 +1,11 @@
|
|||||||
|
<script>
|
||||||
|
import Virtual from '$lib/home/Virtual.svelte';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<svelte:head>
|
||||||
|
<title>Bart Industries</title>
|
||||||
|
</svelte:head>
|
||||||
|
|
||||||
|
<main class="flex flex-col mt-20 gap-40">
|
||||||
|
<Virtual />
|
||||||
|
</main>
|
||||||
Loading…
Reference in new issue