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

improving the about and portfolio sections

Browse Source
pull/2/head
Midnight 2 years ago
parent fd1dcaa5ff
commit ef27dea197
7 changed files with 170 additions and 143 deletions
Show Stats Download Patch File Download Diff File

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

@ -7,9 +7,9 @@
<div class="absolute top-0 -mt-40" id="portfolio"></div>
<div class="@container container px-5 flex flex-col gap-10 justify-center">
<div class="flex flex-col gap-5">
<h2 class="font-bold text-4xl">I do a lot of things</h2>
<h2 class="font-bold text-4xl">Portfolio</h2>
<p class="text-lg">
Below are some of the things I currently keep myself busy with and links to places I worked on.
Explore some of my past works, experiences, skills and jobs
</p>
</div>
@ -19,13 +19,16 @@
buttonText="🔥 Visit early website"
>
<h3
class="text-xl font-bold inline-flex items-center gap-3"
class="text-xl font-bold inline-flex items-center gap-3 justify-between"
>
<div class="inline-flex gap-3">
<img
src="/logo.png"
class="h-8"
alt="flame"
/> 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">
Flame Software is a Software-as-a-Service company that is developing a new communications app
@ -37,18 +40,24 @@
</p>
</Card>
<span class="col-span-2 row-span-1 @container">
<Card
buttonHref="https://puppypride.social"
buttonText="🌐 Visit Puppy Pride"
>
<div class="grid @xl:grid-cols-2 grid-cols-1 gap-5">
<span>
<h3
class="text-xl font-bold inline-flex items-center gap-3"
class="text-xl font-bold inline-flex items-center gap-3 justify-between"
>
<div class="inline-flex gap-3">
<img
src="/puppypride.png"
class="h-8"
alt="puppypride"
/> Puppy Pride
</div>
<span class="text-sm font-light">2021 and ongoing</span>
</h3>
<p class="text-sm text-gray-800 dark:text-gray-100">
I am the core developer of the new Puppy Pride social
@ -62,20 +71,29 @@
The project is nearing its completion and will be released soon.
You may find a beta release public at <a target="_blank" class="a" href="https://beta.puppypride.social">beta.puppypride.social</a>.
</p>
</span>
<span class="flex items-center">
<img src="/homepage/pp.png" alt="puppypride profile page" />
</span>
</div>
</Card>
</span>
<Card
buttonHref="https://saxion.nl"
buttonText="🎓 Open Website"
>
<h3
class="text-xl font-bold inline-flex items-center gap-3"
class="text-xl font-bold 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 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.
@ -84,21 +102,22 @@
</p>
</Card>
<span></span>
<span class="col-span-1 row-span-1">
<Card
buttonHref="https://dubbelnull.com/showcase"
buttonText="➡️ View DubbelNull showcase"
>
<h3
class="text-xl font-bold inline-flex items-center gap-3"
class="text-xl font-bold inline-flex items-center gap-3 justify-between"
>
<div class="inline-flex gap-3">
<img
src="/dubbelnull.png"
class="h-10 -my-1 -ml-1"
alt="dubbelnull"
/> More websites at DubbelNull
/> DubbelNull
</div>
<span class="text-sm font-light">2020 and ongoing</span>
</h3>
<p class="text-sm text-gray-800 dark:text-gray-100">
DubbelNull is a family business that does internet based development for small and medium sized companies,
@ -112,17 +131,78 @@
<Card
>
<h3
class="text-xl font-bold inline-flex items-center gap-3"
class="text-xl font-bold inline-flex items-center gap-3 justify-between"
>
<div class="inline-flex gap-3">
🧑‍💻
Player Stats
</div>
</h3>
<p class="text-sm text-gray-800 dark:text-gray-100">
Beyond practical knowledge, I also am a teamplayer. I love discovering new ways and technologies and like to share ideas and find new solutions to problems together.
<br/><br/>
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.
</p>
<img src="/banner4.png" class="w-full -mb-10"/>
<img src="/banner4.png" class="w-full -mb-10" alt="mid"/>
</Card>
</span>
<span class="col-span-1 row-span-2">
<Card
>
<h3
class="text-xl font-bold inline-flex items-center gap-3 justify-between"
>
<div class="inline-flex gap-3">
🏢
Internships
</div>
</h3>
<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">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">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">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">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.</p>
</div>
</Card>
</span>
<span class="col-span-1 row-span-2">
<Card
buttonHref="https://dubbelnull.com/showcase"
buttonText="➡️ View DubbelNull showcase"
>
<h3
class="text-xl font-bold inline-flex items-center gap-3 justify-between"
>
<div class="inline-flex gap-3">
<img
src="/dubbelnull.png"
class="h-10 -my-1 -ml-1"
alt="dubbelnull"
/> Skills
</div>
<span class="text-sm font-light">2020 and ongoing</span>
</h3>
<p class="text-sm text-gray-800 dark:text-gray-100">
DubbelNull is a family business that does internet based development for small and medium sized companies,
such as creating websites, manage hosting, advice and other similar things.
I have made several websites for clients under this name, and you can find more of my works on the DubbelNull website.
</p>
</Card>
</span>
</div>

111
src/lib/home/Sona.svelte
Unescape View File

@ -1,4 +1,6 @@
<script>
import Card from "./Card.svelte";
function calculateAge(birthday) { // birthday is a date
var ageDifMs = Date.now() - birthday;
var ageDate = new Date(ageDifMs); // miliseconds from epoch
@ -9,113 +11,58 @@
<main class="@container container flex flex-col gap-20 relative">
<div class="absolute top-0 -mt-40" id="about"></div>
<section class="flex flex-col px-5 justify-between gap-10 lg:gap-20">
<article class="flex w-1/2 items-center text-center mx-auto flex-col col-span-2 gap-10">
<section class="grid grid-cols-4 px-5 gap-5">
<span class="col-span-2 p-5 flex flex-col gap-10">
<h3 class="whitepigeon text-blue-600 font-bold text-6xl">About me</h3>
<h4 class="font-normal text-lg">
Hello, I'm Pascal, but my internet name is Mid. Nice to have you here on my website! I'm a {calculateAge(new Date("2001-10-30"))} year old programmer and tech enthusiast from The Netherlands.
If you want to know a little more about me, here are some details. :)
</h4>
</article>
<article class="grid grid-cols-3 bg-black bg-opacity-10 gap-[3px]">
<div class="bg-gray-100 dark:bg-gray-900 p-5 flex flex-col gap-10">
<h4 class="whitepigeon text-blue-600 font-bold text-2xl text-center">Experience</h4>
<div class="h-[3px] bg-black bg-opacity-10"></div>
<div class="flex flex-col gap-2">
<span class="flex justify-between items-end"><b class="text-xl">Saxion University</b><p class="text-sm">2020 to 2024</p></span>
<p>HBO-ICT / Bachelor Computer Science</p>
</div>
<div class="flex flex-col gap-2">
<span class="flex justify-between items-end"><b class="text-xl">Self taught</b><p class="text-sm">2016 and ongoing</p></span>
<p>Self taught</p>
</div>
<div class="flex flex-col gap-2">
<span class="flex justify-between items-end"><b class="text-xl">PuppyPride Developer</b><p class="text-sm">2020 and ongoing</p></span>
<p>Self taught</p>
</div>
<div class="flex flex-col gap-2">
<span class="flex justify-between items-end"><b class="text-xl">Internship Witteveen+Bos</b><p class="text-sm">2022</p></span>
<p>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-xl">Internship AgroVision</b><p class="text-sm">2021</p></span>
<p>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 their emmissions.</p>
</div>
<div class="flex flex-col gap-2">
<span class="flex justify-between items-end"><b class="text-xl">Internship SuiteSeven</b><p class="text-sm">2019</p></span>
<p>SuitSeven is a local webdevelopment studio. During my internship I worked on the design for a client's website.</p>
</div>
</span>
<div class="flex flex-col gap-2">
<span class="flex justify-between items-end"><b class="text-xl">Internship Profity</b><p class="text-sm">2018</p></span>
<p>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.</p>
</div>
</div>
<img src="/homepage/sona/blue.png" class="rounded-xl shadow-lg object-cover aspect-square" alt="fursona" />
<div class="bg-gray-100 dark:bg-gray-900 p-5 flex flex-col gap-10">
<h4 class="whitepigeon text-blue-600 font-bold text-2xl text-center">Hobbies</h4>
<img src="/homepage/sona/MidFingers.jpg" class="rounded-xl shadow-lg object-cover aspect-square" alt="fursona"/>
<div class="h-[3px] bg-black bg-opacity-10"></div>
<img src="/homepage/proxmox.png" class="rounded-xl shadow-lg col-span-2" alt="proxmox environment" />
<div class="flex flex-col gap-2">
<span class="col-span-2 flex flex-col gap-2">
<Card>
<b class="text-xl">Computer tech</b>
<p>
I love everything tech, as was probably obvious. But it goes beyond creating software.
I also built my own computer, and like to maintain hardware. At home I run a server rack equipped with a few Dell processing servers, doing my own research and hosting webservers, bots, multiplayer games and more using software like TrueNAS, Proxmox and Linux.
</p>
<img src="/homepage/proxmox.png" class="rounded shadow-lg" alt="proxmox environment" />
</div>
<div class="flex flex-col gap-2">
<b class="text-xl">Drones</b>
<p>
I like to go out there and make drone videos and pictures with my DJI drones, enjoying nature outdoors and capturing its beauty.
</p>
</div>
</Card>
</span>
<div class="flex flex-col gap-2">
<span class="row-span-2">
<Card>
<b class="text-xl">Furry fandom</b>
<p>
Being a furry is an important hobby for me. Mid is my primary fursona out of the many that I have created over the years. He is a fictional anthropomorphic cat with black fur and blue hair and some unusually large whiskers. I use Mid to represent myself with online, an image I have grown comfortable with. I commission artists to create depictions of him to bring him to life, showing and using him on places like this website.
Being a furry is an important hobby for me.
<br/><br/>
Mid is my primary fursona out of the many that I have created over the years. He is a fictional anthropomorphic cat with black fur and blue hair and some unusually large whiskers. I use Mid to represent myself with online, an image I have grown comfortable with. I commission artists to create depictions of him to bring him to life, showing and using him on places like this website.
<br/><br/>
On the right is also depicted Martin the Pine Marten, and on some pictures further down the website you'll find a few more sonas: Rexouium named Koffie and a protogen called Seffy.
</p>
<span class="grid grid-cols-3 gap-1">
<img src="/homepage/sona/blue.png" class="rounded shadow-lg object-cover aspect-square" alt="fursona" />
<img src="/homepage/sona/pink.png" class="rounded shadow-lg object-cover aspect-square" alt="fursona"/>
<img src="/homepage/sona/MidFingers.jpg" class="rounded shadow-lg object-cover aspect-square" alt="fursona"/>
</Card>
</span>
</div>
</div>
<div class="bg-gray-100 dark:bg-gray-900 p-5 flex flex-col gap-10">
<h4 class="whitepigeon text-blue-600 font-bold text-2xl text-center">Details</h4>
<img src="/homepage/sona/martin.png" class="rounded-xl shadow-lg object-cover aspect-square" alt="fursona" />
<div class="h-[3px] bg-black bg-opacity-10"></div>
<img src="/homepage/sona/vr.png" class="col-span-2 row-span-2 rounded-xl shadow-lg object-cover aspect-square" alt="fursona" />
<div class="flex flex-col gap-2">
<b class="text-xl">Find my details</b>
<p>
If you want to visit my social profiles or want to reach out to me, you can do so via the links in my <a href="#contact" class="a">contact form</a> or by emailing me directly at <a class="a" href="mailto:pascalvanginkel@outlook.com">pascalvanginkel@outlook.com</a>.
</p>
</div>
<img src="/homepage/sona/oldmid.png" class="rounded-xl shadow-lg object-cover aspect-square" alt="fursona" />
<img src="/homepage/drone.jpeg" class="rounded-xl shadow-lg object-cover aspect-[3/2] col-span-3 row-span-2" alt="drone shot" />
<div class="flex flex-col gap-2">
<b class="text-xl">Interested in my skills?</b>
<Card>
<b class="text-xl">Drones</b>
<p>
I am open for work opportunities and love to work in teams as well as alone. I can do any kind of web related development. Just shoot me an email or contact me on any of my socials.
I like to go out there and make drone videos and pictures with my DJI drones, enjoying nature outdoors and capturing its beauty.
</p>
</div>
</div>
</article>
</Card>
</section>
</main>

BIN
static/homepage/drone.jpeg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.6 MiB

BIN
static/homepage/pp.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 MiB

BIN
static/homepage/sona/martin.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.8 MiB

BIN
static/homepage/sona/oldmid.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 367 KiB

BIN
static/homepage/sona/vr.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.3 MiB

Write Preview
Loading…
Cancel
Save