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';
</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 />
</main>

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

@ -102,7 +102,7 @@
randomBannerPic = '/homepage/banner.png';
</script>
<main class="w-full h-full @container">
<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"
>

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

@ -4,18 +4,19 @@
export let buttonHref = null;
export let buttonImage = null;
export let center = false;
export let highlighted = false;
let classes =
'z-10 flex flex-col group relative h-full hover:shadow-xl duration-150 hover:scale-[101%] hover:-translate-y-1';
</script>
<div class={classes}>
<span class="h-2 bg-gray-300 dark:bg-gray-700 rounded-t-xl duration-300" />
<div
class="flex-grow {center
class="flex-grow rounded-t-xl {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 />
</div>
@ -24,7 +25,9 @@
<a
href={buttonHref}
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">
{#if buttonImage}
@ -34,6 +37,10 @@
</div>
</a>
{: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}
</div>

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

@ -58,17 +58,126 @@
];
</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="flex flex-col gap-2 whitepigeon text-center">
<h2 class="font-bold text-4xl lg:text-8xl">Portfolio</h2>
<p class="lg:text-lg">
A collection of some of the projects and experiences I am most proud of
</p>
<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="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" />
@ -128,23 +237,6 @@
</Card>
</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>
<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">
@ -162,116 +254,6 @@
</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-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">
<Card buttonHref="https://furality.org/" buttonText="🦊 Visit furality.org">
<div class="w-full flex flex-col gap-5">
@ -300,7 +282,45 @@
</Card>
</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>
<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
@ -325,7 +345,35 @@
<img src="/homepage/esubanner.png" alt="cover of act 1" />
</span>
</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">
<Card>
@ -346,26 +394,6 @@
</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>
</div>
</div>
</section>

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

@ -2,11 +2,6 @@
<div class="absolute top-0" id="vr" />
<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">
<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"
@ -30,7 +25,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="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">
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
@ -76,7 +71,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="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">
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

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

@ -4,7 +4,7 @@
import '../../app.css';
</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">
<Header />
<slot />

Write Preview
Loading…
Cancel
Save