Improve mobile and add ESU to portfolio

main
Midnight 1 year ago
parent c4fd9458c1
commit 51d5693379

@ -6,7 +6,7 @@
</script> </script>
<footer <footer
class="@container py-20 px-2 @lg:px-10 bg-white dark:bg-black dark:bg-opacity-50 text-black dark:text-white z-20 flex flex-col gap-10" class="@container py-20 bg-white dark:bg-black dark:bg-opacity-50 text-black dark:text-white z-20 flex flex-col gap-10"
> >
<div class="absolute top-0 -mt-40" id="contact"></div> <div class="absolute top-0 -mt-40" id="contact"></div>

@ -22,7 +22,6 @@
function toggle() { function toggle() {
dropdown.classList.toggle("flex"); dropdown.classList.toggle("flex");
dropdown.classList.toggle("hidden"); dropdown.classList.toggle("hidden");
console.log(dropdown);
} }
</script> </script>

@ -139,22 +139,21 @@
</div> </div>
<p class="text-gray-800 dark:text-gray-300 lg:text-lg max-w-[800px]"> <p class="text-gray-800 dark:text-gray-300 lg:text-lg max-w-[800px]">
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 the webdevelopment studio called DubbelNull. 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 am motivated by creating software that provides useful services to people which improves their lives. I am motivated by creating reliable software that makes a difference and improves the lives of people through unique 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 poke 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.
If you want to contact me you can find my details <a href="#contact" class="a">here</a>.
</p> </p>
<Socials type="default" /> <Socials type="default" />
</div>
</div>
<!-- <span class="hidden @4xl:flex absolute left-0 bottom-0 w-full justify-center mb-20 z-50 text-8xl float text-blue-600"> <span class="hidden 2xl:flex justify-center text-8xl float text-blue-600">
<img src="/downarrow.png" class="w-10" /> <img src="/downarrow.png" class="w-10" />
</span> --> </span>
</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> <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>
<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="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>

@ -30,7 +30,6 @@
const x = e.pageX - slider.offsetLeft; const x = e.pageX - slider.offsetLeft;
const walk = (x - startX) * 1; //scroll-fast const walk = (x - startX) * 1; //scroll-fast
slider.scrollLeft = scrollLeft - walk; slider.scrollLeft = scrollLeft - walk;
console.log(walk);
}); });
slider.addEventListener('wheel', (evt) => { slider.addEventListener('wheel', (evt) => {
slider.scrollLeft += evt.deltaY; slider.scrollLeft += evt.deltaY;

@ -4,12 +4,12 @@
const words = [ const words = [
"JavaScript", "JavaScript",
"<b>TypeScript</b>", "<b class='text-blue-500'>TypeScript</b>",
"MySQL", "MySQL",
"<b>Laravel</b>", "<b class='text-blue-500'>Laravel</b>",
"PHP", "PHP",
"Livewire", "Livewire",
"<b>NestJS</b>", "<b class='text-blue-500'>NestJS</b>",
"NodeJS", "NodeJS",
"Unity", "Unity",
"Substance Painter", "Substance Painter",
@ -17,23 +17,23 @@
"PostgreSQL", "PostgreSQL",
"TailwindCSS", "TailwindCSS",
"Rust", "Rust",
"<b>Blazor</b>", "<b class='text-blue-500'>Blazor</b>",
"Redis", "Redis",
"<b>Svelte</b>", "<b class='text-blue-500'>Svelte</b>",
"<b>SvelteKit</b>", "<b class='text-blue-500'>SvelteKit</b>",
"Python", "Python",
"Django", "Django",
"Vue", "Vue",
"<b>Java</b>", "<b class='text-blue-500'>Java</b>",
"<b>C#</b>", "<b class='text-blue-500'>C#</b>",
"JavaFX", "JavaFX",
"NGINX", "NGINX",
"Docker", "Docker",
"PayPal API", "PayPal API",
"<b>REST</b>", "<b class='text-blue-500'>REST</b>",
"GraphQL", "GraphQL",
"TypeORM", "TypeORM",
"<b>Eloquent</b>", "<b class='text-blue-500'>Eloquent</b>",
"Express", "Express",
"Bash", "Bash",
".NET", ".NET",
@ -42,7 +42,7 @@
"Blade", "Blade",
"JSX", "JSX",
"Pug", "Pug",
"<b>Wordpress</b>", "<b class='text-blue-500'>Wordpress</b>",
"Vercel", "Vercel",
"SEO", "SEO",
"Netlify", "Netlify",
@ -53,7 +53,7 @@
"Sass", "Sass",
".NET Core", ".NET Core",
"Webpack", "Webpack",
"<b>Linux</b>", "<b class='text-blue-500'>Linux</b>",
]; ];
</script> </script>
@ -64,7 +64,7 @@
<p class="lg:text-lg">A collection of some of the projects and experiences I am most proud of</p> <p class="lg:text-lg">A collection of some of the projects and experiences I am most proud of</p>
</div> </div>
<div class="container px-5 my-5 lg:my-20 grid grid-cols-1 @2xl:grid-cols-2 @6xl:grid-cols-3 gap-5 justify-between"> <div class="container my-5 lg:my-20 grid grid-cols-1 @2xl:grid-cols-2 @6xl:grid-cols-3 gap-5 justify-between">
<div class="absolute top-0 -mt-40" id="portfolio"></div> <div class="absolute top-0 -mt-40" id="portfolio"></div>
<Card> <Card>
@ -206,30 +206,34 @@
</Card> </Card>
</span> </span>
<Card <span class="@xl:row-span-3">
buttonHref="https://saxion.nl" <Card>
buttonText="🎓 Open Website"
>
<h3 <h3
class="text-xl font-bold flex-wrap inline-flex items-center gap-3 justify-between" class="text-xl font-bold flex-wrap inline-flex items-center gap-3"
> >
<div class="inline-flex gap-3">
<img <img
src="/saxion.png" src="/homepage/esu.png"
class="h-8 rounded-full" class="h-10 rounded-full bg-black p-1"
alt="puppypride" alt="esu"
/> Saxion University /> Easter System Universe
</div>
<span class="text-sm font-light">2020 to 2024</span>
</h3> </h3>
<div class="h-full flex flex-col">
<p class="text-sm text-gray-800 dark:text-gray-100"> <p class="text-sm text-gray-800 dark:text-gray-100">
I am a year 4 student at the Saxion University of Applied Sciences in The Netherlands majoring in Software Engineering and expected to graduate in 2024. 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.
During the study I've done numerous projects for real clients and worked in teams comprised of people with many different backgrounds. <br/><br/>
Most of my programming knowledge was self researched, but the study has connected me with companies and allowed me to work on real world products like my work at Agro IT. 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> </p>
</div>
<span class="flex items-center">
<img src="/homepage/esubanner.png" alt="cover of act 1" />
</span>
</Card> </Card>
</span>
<span class="@xl:col-span-2"> <span class="@xl:row-span-2">
<Card> <Card>
<h3 <h3
class="text-xl font-bold flex-wrap inline-flex items-center gap-3 justify-between" class="text-xl font-bold flex-wrap inline-flex items-center gap-3 justify-between"
@ -242,7 +246,7 @@
<p class="text-sm text-gray-800 dark:text-gray-100"> <p class="text-sm text-gray-800 dark:text-gray-100">
I can work with anything and love to try out new things and technologies! I have a lot of common knowledge around computer software and hardware and can adapt to anything that may be needed, but here is a constantly growing list of some of the things I am comfortable on and like working with: I can work with anything and love to try out new things and technologies! I have a lot of common knowledge around computer software and hardware and can adapt to anything that may be needed, but here is a constantly growing list of some of the things I am comfortable on and like working with:
</p> </p>
<div id="scroll-container" class="flex flex-wrap gap-1 w-full text-center text-sm"> <div id="scroll-container" class="flex flex-wrap gap-1 w-full text-center">
{#each words as word, key} {#each words as word, key}
<p> <p>
{#if key == words.length - 2} {#if key == words.length - 2}
@ -281,6 +285,29 @@
</p> </p>
</div> </div>
</Card> </Card>
<Card
buttonHref="https://saxion.nl"
buttonText="🎓 Open Website"
>
<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 am a year 4 student at the Saxion University of Applied Sciences in The Netherlands majoring in Software Engineering and expected to graduate in 2024.
During the study I've done numerous projects for real clients and worked in teams comprised of people with many different backgrounds.
Most of my programming knowledge was self researched, but the study has connected me with companies and allowed me to work on real world products like my work at Agro IT.
</p>
</Card>
</div> </div>
</div> </div>
</section> </section>

@ -1,7 +1,7 @@
<main class="@container flex flex-col gap-20 relative"> <main class="@container flex flex-col gap-20 relative">
<div class="absolute top-0 -mt-40" id="vr"></div> <div class="absolute top-0 -mt-40" id="vr"></div>
<section class="w-full h-full flex flex-col px-5 justify-between gap-10 @lg:gap-20"> <section class="w-full h-full flex flex-col justify-between gap-10 @lg:gap-20">
<h2 class="lg:hidden block baron text-6xl text-center @2xl:text-left @2xl:text-8xl text-blue-600">Virtual Reality</h2> <h2 class="lg:hidden block baron text-6xl text-center @2xl:text-left @2xl:text-8xl text-blue-600">Virtual Reality</h2>
<div class="flex-col hidden lg:flex baron text-2xl lg:text-4xl 2xl:text-5xl text-left text-blue-600 lg:-ml-80 xl:-ml-40 2xl:-ml-10"> <div class="flex-col hidden lg:flex baron text-2xl lg:text-4xl 2xl:text-5xl text-left text-blue-600 lg:-ml-80 xl:-ml-40 2xl:-ml-10">
<div class="flex gap-5 items-end"> <div class="flex gap-5 items-end">
@ -77,7 +77,7 @@
<div class="object-cover @6xl:aspect-[2/1] h-full w-full @6xl:col-span-2 flex flex-col gap-5 2xl:text-lg relative"> <div class="object-cover @6xl:aspect-[2/1] h-full w-full @6xl:col-span-2 flex flex-col gap-5 2xl:text-lg relative">
<div class="absolute inset-0 w-full h-full bg-white dark:bg-black skew-x-3"></div> <div class="absolute inset-0 w-full h-full bg-white dark:bg-black skew-x-3"></div>
<p class="absolute inset-0 w-full h-full lg:p-5 2xl:p-10"> <p class="w-full h-full p-5 2xl:p-10 z-10">
VR is a world where anything is possible. A place where cities can be built with just a few button clicks. A place where friendships and communities are built on creativity and compassion. A place where anyone can be what they want to be without limitation. A place where freedom flourishes and humanity's light shines brighter than anywhere else. VR is a world where anything is possible. A place where cities can be built with just a few button clicks. A place where friendships and communities are built on creativity and compassion. A place where anyone can be what they want to be without limitation. A place where freedom flourishes and humanity's light shines brighter than anywhere else.
<br/><br/> <br/><br/>
Despite what the failures of big-tech's attempts at creating a metaverse may make you think, VR is a very real and very big world consisting of millions of creative individuals with plenty of proven business models. Despite what the failures of big-tech's attempts at creating a metaverse may make you think, VR is a very real and very big world consisting of millions of creative individuals with plenty of proven business models.
@ -96,7 +96,7 @@
<div class="object-cover @6xl:aspect-[2/1] h-full w-full @6xl:col-span-2 flex flex-col gap-5 2xl:text-lg lg:-ml-3 relative"> <div class="object-cover @6xl:aspect-[2/1] h-full w-full @6xl:col-span-2 flex flex-col gap-5 2xl:text-lg lg:-ml-3 relative">
<div class="absolute inset-0 w-full h-full bg-white dark:bg-black skew-x-3"></div> <div class="absolute inset-0 w-full h-full bg-white dark:bg-black skew-x-3"></div>
<p class="absolute inset-0 w-full h-full lg:p-5 2xl:p-10"> <p class="w-full h-full p-5 2xl:p-10 z-10">
Because of my adventures in virtual reality I have gained knowledge surrounding things such as game development, modelling and texturing. Most of the avatars shown in the pictures were hand-made by me, and I have created many worlds and systems inside these VR platforms. Because of my adventures in virtual reality I have gained knowledge surrounding things such as game development, modelling and texturing. Most of the avatars shown in the pictures were hand-made by me, and I have created many worlds and systems inside these VR platforms.
<br/><br/> <br/><br/>
In my experience auxiliary skills, like in this case having knowledge of the inner workings of the software that makes these emerging technological markets possible, often come in handy even when working in a completely different field. They make you a more versatile person with a broader range of knowledge that'll help inspire and solve difficult problems with unique solutions. In my experience auxiliary skills, like in this case having knowledge of the inner workings of the software that makes these emerging technological markets possible, often come in handy even when working in a completely different field. They make you a more versatile person with a broader range of knowledge that'll help inspire and solve difficult problems with unique solutions.

@ -32,7 +32,7 @@
</div> </div>
<div class="dotsandlines"> <div class="dotsandlines">
<div class="h-[400px] bg-gradient-to-b from-gray-200 dark:from-gray-800"></div> <div class="h-[100px] lg:h-[400px] bg-gradient-to-b from-gray-200 dark:from-gray-800"></div>
</div> </div>
<div class="bg-repeat-y bg-contain dotsandlines pb-20"> <div class="bg-repeat-y bg-contain dotsandlines pb-20">

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 687 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 350 KiB

Loading…
Cancel
Save