@ -1,76 +1,74 @@
< script > < script >
import Socials from "$lib/Socials.svelte" ;
import Socials from '$lib/Socials.svelte' ;
import { onMount } from "svelte" ;
import { onMount } from 'svelte' ;
import { fade , blur , fly , slide , scale } from "svelte/transition" ;
import { fade , blur , fly , slide , scale } from 'svelte/transition' ;
import { quintOut } from "svelte/easing" ;
import { quintOut } from 'svelte/easing' ;
let name = "Midnight" ;
let name = 'Midnight' ;
const array = [
const array = [
"/banner1.png" ,
'/banner1.png' ,
"/banner2.png" ,
'/banner2.png' ,
"/banner3.png" ,
'/banner3.png' ,
"/banner4.png" ,
'/banner4.png' ,
"/banner5.jpeg" ,
'/banner5.jpeg' ,
"/banner6.png" ,
'/banner6.png' ,
"/banner7.png" ,
'/banner7.png' ,
"/banner8.png",
'/banner8.png'
];
];
const words = [
const words = [
"JavaScript",
'JavaScript',
"TypeScript",
'TypeScript',
"MySQL",
'MySQL',
"Laravel",
'Laravel',
"PHP",
'PHP',
"Livewire",
'Livewire',
"NestJS",
'NestJS',
"NodeJS",
'NodeJS',
"Unity",
'Unity',
"Substance Painter",
'Substance Painter',
"Blender",
'Blender',
"PostgreSQL",
'PostgreSQL',
"TailwindCSS",
'TailwindCSS',
"Bootstrap",
'Bootstrap',
"Fontawesome",
'Fontawesome',
"Sass",
'Sass',
"Webpack",
'Webpack',
"Redis",
'Redis',
"Svelte",
'Svelte',
"SvelteKit",
'SvelteKit',
"Python",
'Python',
"Django",
'Django',
"Vue",
'Vue',
"Java",
'Java',
"JavaFX",
'JavaFX',
"NGINX",
'NGINX',
"Docker",
'Docker',
"REST",
'REST',
"GraphQL",
'GraphQL',
"TypeORM",
'TypeORM',
"Eloquent",
'Eloquent',
"Express",
'Express',
"Linux",
'Linux',
"Composer",
'Composer',
"AlpineJS",
'AlpineJS',
"Blade",
'Blade',
"JSX",
'JSX',
"Pug",
'Pug',
"Wordpress",
'Wordpress',
"Vercel",
'Vercel',
"Netlify",
'Netlify',
"AWS S3",
'AWS S3',
"Backblaze"
'Backblaze',
'EntityFramework',
'.NET Core'
];
];
const names = [
const names = ['Pascal', 'Mid', 'Midblep', 'Midnight'];
"Pascal",
"Mid",
"Midblep",
"Midnight"
];
function calculateAge(birthday) { // birthday is a date
function calculateAge(birthday) {
// birthday is a date
var ageDifMs = Date.now() - birthday;
var ageDifMs = Date.now() - birthday;
var ageDate = new Date(ageDifMs); // miliseconds from epoch
var ageDate = new Date(ageDifMs); // miliseconds from epoch
return Math.abs(ageDate.getUTCFullYear() - 1970);
return Math.abs(ageDate.getUTCFullYear() - 1970);
@ -79,13 +77,13 @@
onMount(() => {
onMount(() => {
for (let j = 0; j < 20 ; j ++) {
for (let j = 0; j < 20 ; j ++) {
let list = document.createElement('div');
let list = document.createElement('div');
list.classList.add('flex', "gap-2" );
list.classList.add('flex', 'gap-2' );
for (let i = 0; i < 20 ; i ++) {
for (let i = 0; i < 20 ; i ++) {
const word = words[Math.floor(Math.random() * words.length)];
const word = words[Math.floor(Math.random() * words.length)];
let element = document.createElement('span');
let element = document.createElement('span');
element.innerHTML = word;
element.innerHTML = word;
element.classList.add("text-9xl", "p-10", "whitespace-nowrap" );
element.classList.add('text-9xl', 'p-10', 'whitespace-nowrap' );
list.appendChild(element);
list.appendChild(element);
}
}
@ -101,62 +99,81 @@
});
});
let randomBannerPic = array[Math.floor(Math.random() * array.length)];
let randomBannerPic = array[Math.floor(Math.random() * array.length)];
randomBannerPic = "/homepage/banner.png" ;
randomBannerPic = '/homepage/banner.png' ;
< / script > < / script >
< main class = "relative overflow-hidden min-h-screen @container" > < main class = "w-full h-full @container" >
< 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" >
< section
< / div >
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 = "flex h-full w-full @4xl:p-20 gap-20 p-5 z-10" >
< div
< div class = "items-start @7xl:block hidden z-10" >
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"
< img
id="lists"
src={ randomBannerPic }
alt="mid"
class="w-[40vw] z-10"
/>
/>
< / div >
< div class = "flex flex-col py-5 h-full gap-10 z-10" >
< div class = "flex h-full w-full @4xl:p-20 gap-20 p-5 z-10" >
< div class = "flex flex-col gap-10" >
< div class = "items-start @7xl:block hidden z-10 w-full" >
< span >
< img src = { randomBannerPic } alt="mid" class = "w-[40vw] z-10" />
< img src = "/helloblue.png" alt = "Hello!" class = "h-20 popout" / >
< / div >
< / span >
< span class = "flex gap-2 flex-wrap items-end" >
< div class = "flex flex-col py-5 h-full gap-10 z-10 w-full" >
< h2 class = "text-4xl flex gap-2 font-extrabold" > I'm
< 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" >
< span class = "flex items-center" >
{ #key name }
{ #key name }
< span in:scale > { name } </ span >
< span in:scale > { name } </ span >
{ /key }
{ /key }
< h2 class = "text-4xl font-extrabold" > ,< / h2 >
< / span >
< / span >
< / h2 >
< / h2 >
< span class = "text-3xl font-extralight" >
and i really like to build things
< / span >
< / span >
< / div >
< / div >
< p class = "text-gray-800 dark:text-gray-300 lg:text-lg max-w-[800px]" >
< 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 an entrepreneurial spirit and own a webdevelopment studio called DubbelNull.
I'm a { calculateAge ( new Date ( '2001-10-30' ))} year old programmer and tech enthusiast from The
I am motivated by creating reliable software that makes a difference and improves the lives of people through unique solutions.
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 / >
< 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.
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 / >
< br / > < br / >
Feel free to have a look around and learn about who I am and the things I've worked on.
Feel free to have a look around and learn about who I am and the things I've worked on.
< / p >
< / p >
< Socials type = "default" / >
< Socials stay = "light" type = "default" / >
< span class = "hidden 2xl:flex justify-center text-8xl float text-blue-600" >
< img src = "/downarrow.png" class = "w-10" / >
< / span >
< / div >
< / div >
< / div >
< / div >
< svg class = "dark:hidden block absolute left-0 bottom-0 right-0" xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 1440 320" > < path fill = "#e5e7eb" 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" > < / path > < / svg >
< div class = "hidden @2xl:block" >
< svg class = "hidden dark:block absolute left-0 bottom-0 right-0" xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 1440 320" > < path fill = "#1f2937" 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" > < / path > < / svg >
< 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 > < / main >
< style > < style >
