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>
|
||||
import Banner from '$lib/home/Banner.svelte';
|
||||
import Blog from '$lib/home/Blog.svelte';
|
||||
import Portfolio from '$lib/home/Portfolio.svelte';
|
||||
import Sona from '$lib/home/Sona.svelte';
|
||||
import Virtual from '$lib/home/Virtual.svelte';
|
||||
import Furry from '$lib/home/Furry.svelte';
|
||||
import Nav from '$lib/header/Nav.svelte';
|
||||
import Header from '$lib/header/Header.svelte';
|
||||
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>
|
||||
|
||||
<svelte:head>
|
||||
<title>Bart Industries</title>
|
||||
</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>
|
||||
import Banner from '$lib/home/Banner.svelte';
|
||||
import Blog from '$lib/home/Blog.svelte';
|
||||
import Portfolio from '$lib/home/Portfolio.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';
|
||||
import Experience from '$lib/portfolio/Experience.svelte';
|
||||
import Professional from '$lib/portfolio/Professional.svelte';
|
||||
import Projects from '$lib/portfolio/Projects.svelte';
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Bart Industries</title>
|
||||
</svelte:head>
|
||||
|
||||
<main class="flex flex-col mt-20">
|
||||
<Portfolio />
|
||||
<main class="flex flex-col my-20">
|
||||
<Professional />
|
||||
<Experience />
|
||||
<Projects />
|
||||
</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