Mid
/
bartindustries
1
0
Fork 0
Code Issues 1 Pull Requests Releases Activity

Improve portfolio page

Browse Source
main
Midnight 5 months ago
parent c00c0e03fb
commit 46f4176948
6 changed files with 204 additions and 172 deletions
Show Stats Download Patch File Download Diff File

4
src/lib/header/Header.svelte
Unescape View File

@ -2,6 +2,8 @@
import Nav from './Nav.svelte'; import Nav from './Nav.svelte';
</script> </script>
<main class="px-5 w-full from-blue-700 to-blue-900 dark:bg-opacity-50 text-black dark:text-white"> <main
class="px-5 z-20 w-full from-blue-700 to-blue-900 dark:bg-opacity-50 text-black dark:text-white"
>
<Nav /> <Nav />
</main> </main>

2
src/lib/home/Banner.svelte
Unescape View File

@ -102,7 +102,7 @@
randomBannerPic = '/homepage/banner.png'; randomBannerPic = '/homepage/banner.png';
</script> </script>
<main class="w-full h-full @container"> <main class="w-full h-full lg:px-2 xl:px-5 @container">
<section <section
class="bg-[#3A53FF] @2xl:rounded-t-[40px] relative overflow-hidden @container text-white" class="bg-[#3A53FF] @2xl:rounded-t-[40px] relative overflow-hidden @container text-white"
> >

19
src/lib/home/Card.svelte
Unescape View File

@ -4,18 +4,19 @@
export let buttonHref = null; export let buttonHref = null;
export let buttonImage = null; export let buttonImage = null;
export let center = false; export let center = false;
export let highlighted = false;
let classes = let classes =
'z-10 flex flex-col group relative h-full hover:shadow-xl duration-150 hover:scale-[101%] hover:-translate-y-1'; 'z-10 flex flex-col group relative h-full hover:shadow-xl duration-150 hover:scale-[101%] hover:-translate-y-1';
</script> </script>
<div class={classes}> <div class={classes}>
<span class="h-2 bg-gray-300 dark:bg-gray-700 rounded-t-xl duration-300" />
<div <div
class="flex-grow {center class="flex-grow rounded-t-xl {center
? 'justify-center' ? 'justify-center'
: ''} flex flex-col gap-5 w-full relative px-10 py-5 duration-300 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-900 dark:to-gray-800" : ''} flex flex-col gap-5 w-full relative px-10 py-5 duration-300 {highlighted
? 'bg-blue-500'
: 'bg-gray-100 dark:bg-gray-900'}"
> >
<slot /> <slot />
</div> </div>
@ -24,7 +25,9 @@
<a <a
href={buttonHref} href={buttonHref}
target={buttonRedirect} target={buttonRedirect}
class="rounded-b-xl bg-gray-300 dark:bg-gray-700 py-3 px-5 hover:bg-opacity-100 dark:hover:bg-blue-600 hover:bg-blue-200 duration-300 text-base lg:text-lg font-bold z-40 h-14 inline-flex items-center" class="rounded-b-xl {highlighted
? 'bg-blue-500'
: 'bg-gray-300 dark:bg-gray-700'} py-3 px-5 hover:bg-opacity-100 dark:hover:bg-blue-600 hover:bg-blue-200 duration-300 text-base lg:text-lg font-bold z-40 h-14 inline-flex items-center"
> >
<div class="inline-flex items-center px-5 gap-2"> <div class="inline-flex items-center px-5 gap-2">
{#if buttonImage} {#if buttonImage}
@ -34,6 +37,10 @@
</div> </div>
</a> </a>
{:else} {:else}
<span class="h-2 bg-gray-300 dark:bg-gray-700 rounded-b-xl duration-300 z-40" /> <span
class="h-2 {highlighted
? 'bg-blue-500'
: 'bg-gray-300 dark:bg-gray-700'} rounded-b-xl duration-300 z-40"
/>
{/if} {/if}
</div> </div>

338
src/lib/home/Portfolio.svelte
Unescape View File

@ -58,17 +58,126 @@
]; ];
</script> </script>
<section class="relative"> <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"> <div class="@container flex flex-col justify-center">
<div class="flex flex-col gap-2 whitepigeon text-center"> <h2 class="font-bold text-4xl lg:text-8xl baron">Experience</h2>
<h2 class="font-bold text-4xl lg:text-8xl">Portfolio</h2>
<p class="lg:text-lg"> <div
A collection of some of the projects and experiences I am most proud of 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> </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> </div>
<h2 class="font-bold text-4xl lg:text-8xl baron">Companies</h2>
<div <div
class="my-5 lg:my-20 grid grid-cols-1 @2xl:grid-cols-2 @4xl:grid-cols-3 @7xl:grid-cols-4 gap-5 justify-between" 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" /> <div class="absolute top-0 -mt-40" id="portfolio" />
@ -128,23 +237,6 @@
</Card> </Card>
</span> </span>
<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 obtained a Bachelor in HBO-ICT (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/computer.png" class="w-40" />
</Card>
<span> <span>
<Card buttonHref="https://dubbelnull.com/showcase" buttonText="➡️ View DubbelNull showcase"> <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"> <h3 class="text-xl font-bold flex-wrap inline-flex items-center gap-3 justify-between">
@ -162,116 +254,6 @@
</Card> </Card>
</span> </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-1 @xl:col-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">🏢 Internships</div>
</h3>
<div class="grid grid-cols-2 gap-10">
<div class="flex flex-col gap-2">
<span class="flex justify-between items-end"
><b class="text-lg">Agro IT - Graduation project</b>
<p class="text-sm">2024</p></span
>
<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>
</div>
<div class="flex flex-col gap-2">
<span class="flex justify-between items-end"
><b class="text-lg">Agro IT - 3rd year internship</b>
<p class="text-sm">2023</p></span
>
<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>
</div>
<div class="flex flex-col gap-2">
<span class="flex justify-between items-end"
><b class="text-lg">Witteveen+Bos</b>
<p class="text-sm">2022</p></span
>
<p class="text-sm text-gray-800 dark:text-gray-100">
Witteveen+Bos is a major worldwide agricultural software company. During my
internship me and my team developed a generic authentication system in Django that
would be used as a customized plug-in template for new projects at the company.
</p>
</div>
<div class="flex flex-col gap-2">
<span class="flex justify-between items-end"
><b class="text-lg">AgroVision</b>
<p class="text-sm">2021</p></span
>
<p class="text-sm text-gray-800 dark:text-gray-100">
AgroVision is a Dutch software company for farmers. During my internship I worked on
an app that generates reports about CO2 usage on farms and informs the farmer on how
to reduce thecir emmissions.
</p>
</div>
<div class="flex flex-col gap-2">
<span class="flex justify-between items-end"
><b class="text-lg">SuiteSeven</b>
<p class="text-sm">2019</p></span
>
<p class="text-sm text-gray-800 dark:text-gray-100">
SuitSeven is a local webdevelopment studio. During my internship I worked on the
design for a client's website.
</p>
</div>
<div class="flex flex-col gap-2">
<span class="flex justify-between items-end"
><b class="text-lg">Profity</b>
<p class="text-sm">2018</p></span
>
<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>
</div>
</div>
</Card>
</span>
<span class="@2xl:col-span-1"> <span class="@2xl:col-span-1">
<Card buttonHref="https://furality.org/" buttonText="🦊 Visit furality.org"> <Card buttonHref="https://furality.org/" buttonText="🦊 Visit furality.org">
<div class="w-full flex flex-col gap-5"> <div class="w-full flex flex-col gap-5">
@ -300,7 +282,45 @@
</Card> </Card>
</span> </span>
<!-- <span class="@xl:row-span-3"> <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> <Card>
<h3 class="text-xl font-bold flex-wrap inline-flex items-center gap-3"> <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 <img src="/homepage/esu.png" class="h-10 rounded-full bg-black p-1" alt="esu" /> Easter System
@ -325,7 +345,35 @@
<img src="/homepage/esubanner.png" alt="cover of act 1" /> <img src="/homepage/esubanner.png" alt="cover of act 1" />
</span> </span>
</Card> </Card>
</span> --> </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"> <span class="@xl:row-span-2 @container">
<Card> <Card>
@ -346,26 +394,6 @@
</div> </div>
</Card> </Card>
</span> </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>
</div> </div>
</div> </div>
</section> </section>

9
src/lib/home/Virtual.svelte
Unescape View File

@ -2,11 +2,6 @@
<div class="absolute top-0" id="vr" /> <div class="absolute top-0" id="vr" />
<section class="w-full h-full flex flex-col justify-between gap-10 @2xl:gap-20"> <section class="w-full h-full flex flex-col justify-between gap-10 @2xl:gap-20">
<div class="baron text-2xl lg:text-4xl 2xl:text-5xl text-center text-blue-600 mx-auto">
<h2 class="text-4xl lg:text-4xl 2xl:text-6xl">Discover</h2>
<h2 class="text-4xl lg:text-6xl 2xl:text-8xl">Virtual Creativity</h2>
</div>
<article class="grid container grid-cols-1 @6xl:grid-cols-4 gap-5 relative"> <article class="grid container grid-cols-1 @6xl:grid-cols-4 gap-5 relative">
<h2 <h2
class="rotate-[177deg] 2xl:block absolute hidden top-0 left-0 -ml-20 baron text-6xl text-center @2xl:text-left @2xl:text-8xl text-blue-600" class="rotate-[177deg] 2xl:block absolute hidden top-0 left-0 -ml-20 baron text-6xl text-center @2xl:text-left @2xl:text-8xl text-blue-600"
@ -30,7 +25,7 @@
<div <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" 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 class="absolute inset-0 w-full h-full bg-neutral-200 dark:bg-neutral-900 skew-x-3" />
<p class="w-full h-full p-5 2xl:p-10 z-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 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 few button clicks. A place where friendships and communities are built on creativity and
@ -76,7 +71,7 @@
<div <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" 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 class="absolute inset-0 w-full h-full bg-neutral-200 dark:bg-neutral-900 skew-x-3" />
<p class="w-full h-full p-5 2xl:p-10 z-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 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 such as game development, modelling and texturing. Most of the avatars shown in the

2
src/routes/(pages)/+layout.svelte
Unescape View File

@ -4,7 +4,7 @@
import '../../app.css'; import '../../app.css';
</script> </script>
<div class="bg-white h-screen overflow-y-auto dark:bg-black text-black dark:text-white"> <div class="bg-white h-screen overflow-y-auto dark:bg-black text-black dark:text-white relative">
<div class="w-full min-h-screen max-w-[2000px] flex flex-col mx-auto"> <div class="w-full min-h-screen max-w-[2000px] flex flex-col mx-auto">
<Header /> <Header />
<slot /> <slot />

Write Preview
Loading…
Cancel
Save