improving the about and portfolio sections

pull/2/head
Midnight 2 years ago
parent fd1dcaa5ff
commit ef27dea197

@ -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"
>
<img
src="/logo.png"
class="h-8"
alt="flame"
/> Flame Software
<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,45 +40,60 @@
</p>
</Card>
<Card
buttonHref="https://puppypride.social"
buttonText="🌐 Visit Puppy Pride"
>
<h3
class="text-xl font-bold inline-flex items-center gap-3"
<span class="col-span-2 row-span-1 @container">
<Card
buttonHref="https://puppypride.social"
buttonText="🌐 Visit Puppy Pride"
>
<img
src="/puppypride.png"
class="h-8"
alt="puppypride"
/> Puppy Pride
</h3>
<p class="text-sm text-gray-800 dark:text-gray-100">
I am the core developer of the new Puppy Pride social
network since January 2021, and continue to support and expand
it to this day. The site was built from the ground up
using the TALL stack in PHP (Tailwindcss, Alpine, Livewire and Laravel)
and gave me a lot of experience working with not just PHP and every field inside Laravel,
but also a very large array of different kinds of features and business processes at each step of development.
<br /><br />
Puppy Pride is an adult themed England based social network for people into petplay.
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>
</Card>
<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 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
network since January 2021, and continue to support and expand
it to this day. The site was built from the ground up
using the TALL stack in PHP (Tailwindcss, Alpine, Livewire and Laravel)
and gave me a lot of experience working with not just PHP and every field inside Laravel,
but also a very large array of different kinds of features and business processes at each step of development.
<br /><br />
Puppy Pride is an adult themed England based social network for people into petplay.
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"
>
<img
src="/saxion.png"
class="h-8 rounded-full"
alt="puppypride"
/> Saxion University
<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"
>
<img
src="/dubbelnull.png"
class="h-10 -my-1 -ml-1"
alt="dubbelnull"
/> More websites at DubbelNull
<div class="inline-flex gap-3">
<img
src="/dubbelnull.png"
class="h-10 -my-1 -ml-1"
alt="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"
>
🧑‍💻
Player Stats
<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>

@ -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>
<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>
<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>
</span>
<div class="h-[3px] bg-black bg-opacity-10"></div>
<img src="/homepage/sona/blue.png" class="rounded-xl shadow-lg object-cover aspect-square" alt="fursona" />
<div class="flex flex-col gap-2">
<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>
<img src="/homepage/sona/MidFingers.jpg" class="rounded-xl shadow-lg object-cover aspect-square" alt="fursona"/>
<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>
<img src="/homepage/proxmox.png" class="rounded-xl shadow-lg col-span-2" alt="proxmox environment" />
<div class="flex flex-col gap-2">
<b class="text-xl">Furry fandom</b>
<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>
</Card>
</span>
<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.
</p>
<span class="row-span-2">
<Card>
<b class="text-xl">Furry fandom</b>
<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"/>
</span>
</div>
</div>
<p>
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>
</Card>
</span>
<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" />
<div class="flex flex-col gap-2">
<b class="text-xl">Interested in my skills?</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.
</p>
</div>
</div>
<img src="/homepage/drone.jpeg" class="rounded-xl shadow-lg object-cover aspect-[3/2] col-span-3 row-span-2" alt="drone shot" />
</article>
<Card>
<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>
</Card>
</section>
</main>

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.6 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 367 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.3 MiB

Loading…
Cancel
Save