From 5598d01f9163d6391d86c812b01238449f8cc304 Mon Sep 17 00:00:00 2001 From: Mid Date: Fri, 6 Oct 2023 15:04:34 +0200 Subject: [PATCH] Design improvements --- src/lib/home/Blog.svelte | 44 +---- src/lib/home/Card.svelte | 8 +- src/lib/home/Portfolio.svelte | 280 +++++++++++++--------------- src/lib/home/Virtual.svelte | 6 +- src/routes/+page.svelte | 48 ++--- static/homepage/bottomfadedark.svg | 1 + static/homepage/bottomfadelight.svg | 1 + static/homepage/topfadedark.svg | 1 + static/homepage/topfadelight.svg | 1 + 9 files changed, 167 insertions(+), 223 deletions(-) create mode 100644 static/homepage/bottomfadedark.svg create mode 100644 static/homepage/bottomfadelight.svg create mode 100644 static/homepage/topfadedark.svg create mode 100644 static/homepage/topfadelight.svg diff --git a/src/lib/home/Blog.svelte b/src/lib/home/Blog.svelte index dfd23b5..40eb6cf 100644 --- a/src/lib/home/Blog.svelte +++ b/src/lib/home/Blog.svelte @@ -37,53 +37,15 @@ isNew: false, } ]; - - onMount(() => { - if(browser) { - const slider: HTMLElement = document.querySelector('.items-blog'); - let isDown = false; - let startX; - let scrollLeft; - let lastKnownScrollLeft; - - slider.addEventListener('mousedown', (e) => { - isDown = true; - slider.classList.add('active'); - startX = e.pageX - slider.offsetLeft; - scrollLeft = slider.scrollLeft; - }); - slider.addEventListener('mouseleave', () => { - isDown = false; - slider.classList.remove('active'); - }); - slider.addEventListener('mouseup', () => { - isDown = false; - slider.classList.remove('active'); - }); - slider.addEventListener('mousemove', (e) => { - if(!isDown) return; - e.preventDefault(); - const x = e.pageX - slider.offsetLeft; - const walk = (x - startX) * 1; //scroll-fast - slider.scrollLeft = scrollLeft - walk; - console.log(walk); - }); - slider.addEventListener('wheel', (evt) => { - slider.scrollLeft += evt.deltaY; - if(slider.scrollLeft != lastKnownScrollLeft) evt.preventDefault(); - lastKnownScrollLeft = slider.scrollLeft; - }); - } - }); {#if posts.length > 0} -
+

<-- BLOG -->

-
+
255 ? "..." : "")} date={posts[0].date} image={posts[0].image} featured={true} isNew={posts[0].isNew} /> @@ -92,7 +54,7 @@ {#if posts.length == 1}

No more posts to show...

{:else} -
+
{#each posts as post, key} {#if key != 0} diff --git a/src/lib/home/Card.svelte b/src/lib/home/Card.svelte index 1d0184f..3ec5f61 100644 --- a/src/lib/home/Card.svelte +++ b/src/lib/home/Card.svelte @@ -4,13 +4,13 @@ export let buttonHref = null; export let center = false; - let classes = "z-10 flex flex-col group relative h-full"; + let classes = "z-10 flex flex-col group relative h-full hover:shadow-xl duration-150 hover:scale-[101%] hover:-translate-y-1";
- + -
+
@@ -18,7 +18,7 @@ {buttonText} diff --git a/src/lib/home/Portfolio.svelte b/src/lib/home/Portfolio.svelte index c5b10e1..4b80f7a 100644 --- a/src/lib/home/Portfolio.svelte +++ b/src/lib/home/Portfolio.svelte @@ -2,7 +2,7 @@ import Card from "./Card.svelte"; - const words1 = [ + const words = [ "JavaScript", "TypeScript", "MySQL", @@ -20,10 +20,7 @@ "Blazor", "Redis", "Svelte", - ]; - - const words2 = [ - "SvelteKit", + "SvelteKit", "Python", "Django", "Vue", @@ -32,18 +29,15 @@ "JavaFX", "NGINX", "Docker", - "PayPal", + "PayPal API", "REST", "GraphQL", "TypeORM", "Eloquent", "Express", "Bash", - ".NET" - ]; - - const words3 = [ - "Composer", + ".NET", + "Composer", "AlpineJS", "Blade", "JSX", @@ -61,43 +55,39 @@ "Webpack", "Linux", ]; - +
-
-
-

Portfolio

+
+
+

Portfolio

+

A collection of some of my past and current projects and experiences

+
-
- - +
+ + +

-

-
- flame Flame Software -
- 2022 and ongoing -

-

- Flame Software is a Software-as-a-Service company that is developing a new communications app - that intends to revolutionize the way we talk and socialize online. - Our mission is to make the net more connected, more privacy focused, and more healthy for your mental wellbeing. -

- We are currently in our early development stage, where I work as the CTO to lay down the groundworks - for this new app, which will be built using a combination of languages like Rust and TypeScript. -

- - +
+ puppypride Agro IT +
+ 2023 and ongoing + +

+ During my study's internship at Agro IT I developed a beautiful and user friendly web environment for their RVDM suite by connecting it to their newly made API and Identity Server.

+ The company liked what I had built, and wanted to expand upon it, so they hired me after the internship so I can transform the internship's prototype to something we can roll out and release to clients.

+ After that I am expected to build other modules of Agro IT's products into web environments so that their clients will eventually no longer need the older application-style programs. +

+ - + - -

-
- puppypride Agro IT -
- 2023 and ongoing -

-

- During my study's internship at Agro IT I developed a beautiful and user friendly web environment for their RVDM suite by connecting it to their newly made API and Identity Server.

- The company liked what I had built, and wanted to expand upon it, so they hired me after the internship so I can transform the internship's prototype to something we can roll out and release to clients.

- After that I am expected to build other modules of Agro IT's products into web environments so that their clients will eventually no longer need the older application-style programs. -

- - - -

-
- puppypride Saxion University -
- 2020 to 2024 -

-

- I am a year 3 student at the Saxion University of Applied Sciences in The Netherlands majoring in Software Engineering. The study keeps me plenty busy, but now I am combining the study with a Minor Entrepeneurship to build a SaaS product at my new company Flame Software. -

- Even though the university has taught me much about the business life and how to professionally work in teams, nearly all my programming knowledge is self taught at home. -

- - - + + +

+
+ 🏢 + Internships +
+

+ +
+ Agro IT

2023

 +

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.

+
+ +
+ Witteveen+Bos

2022

 +

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.

+
+ +
+ AgroVision

2021

 +

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.

+
+ +
+ SuiteSeven

2019

 +

SuitSeven is a local webdevelopment studio. During my internship I worked on the design for a client's website.

+
+ +
+ Profity

2018

 +

Profity is a software ccompany 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.

+
+ + + + + +

+
+ 🧑‍💻 + Player Stats +
+

+

+ 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. +

+ In my study at Saxion I have done many projects, including ones for large companies such as AgroVision and Witteveen+Bos, where we worked in teams of people with different backgrounds to create a complete product. +

+ mid + + + +

- 🧑‍💻 - Player Stats + puppypride Saxion University
+ 2020 to 2024

- 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. -

- In my study at Saxion I have done many projects, including ones for large companies such as AgroVision and Witteveen+Bos, where we worked in teams of people with different backgrounds to create a complete product. + 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.

- mid - -

-
- 🏢 - Internships + + +

+
+ ⚔️ + Skills +
+

+

+ 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 my most used things: +

+
+ {#each words as word, key} +

+ {#if key == words.length - 2} + {@html word} and + {:else if key == words.length - 1} + {@html word}. + {:else} + {@html word}, + {/if} +

+ {/each}
-

- -
- Agro IT

2023

 -

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.

-
- -
- Witteveen+Bos

2022

 -

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.

-
- -
- AgroVision

2021

 -

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.

-
- -
- SuiteSeven

2019

 -

SuitSeven is a local webdevelopment studio. During my internship I worked on the design for a client's website.

-
- -
- Profity

2018

 -

Profity is a software ccompany 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.

-
- + +

- ⚔️ - Skills + 🤝 + Always open

- 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 my most used things: + I am always on the look out for new opportunities. If you need something done and you think I can help you, don't fret to contact me.

-
-
- {#each words1 as word} -

{@html word}

- {/each} -
-
- {#each words2 as word} -

{@html word}

- {/each} -
-
- {#each words3 as word} -

{@html word}

- {/each} -
-
diff --git a/src/lib/home/Virtual.svelte b/src/lib/home/Virtual.svelte index 9d24ec7..0597da6 100644 --- a/src/lib/home/Virtual.svelte +++ b/src/lib/home/Virtual.svelte @@ -76,9 +76,9 @@ couch
-
+

- VR is a world of the free where anything is possible. A place where entire cities can be erected from 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 truly 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.

Despite what the failures of big-tech's attemps 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.

@@ -95,7 +95,7 @@ couch
-
+

Because of my adventures in virtual reality (and 3D printing) 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.

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index db81f00..7a3fbf7 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -14,39 +14,31 @@

-
-
- -
- - - -
- -
-
- -
+
+ +
-
- - + + -
- -
+
+ +
-
-
-
-
+ + -
- -
+
+ +
- +
+
+ +
\ No newline at end of file diff --git a/static/homepage/bottomfadedark.svg b/static/homepage/bottomfadedark.svg new file mode 100644 index 0000000..a5eabfa --- /dev/null +++ b/static/homepage/bottomfadedark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/homepage/bottomfadelight.svg b/static/homepage/bottomfadelight.svg new file mode 100644 index 0000000..4ccbf8a --- /dev/null +++ b/static/homepage/bottomfadelight.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/homepage/topfadedark.svg b/static/homepage/topfadedark.svg new file mode 100644 index 0000000..9f69af8 --- /dev/null +++ b/static/homepage/topfadedark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/homepage/topfadelight.svg b/static/homepage/topfadelight.svg new file mode 100644 index 0000000..999edd8 --- /dev/null +++ b/static/homepage/topfadelight.svg @@ -0,0 +1 @@ + \ No newline at end of file