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="absolute top-0 -mt-40" id="portfolio"></div>
<div class="@container container px-5 flex flex-col gap-10 justify-center"> <div class="@container container px-5 flex flex-col gap-10 justify-center">
<div class="flex flex-col gap-5"> <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"> <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> </p>
</div> </div>
@ -19,13 +19,16 @@
buttonText="🔥 Visit early website" buttonText="🔥 Visit early website"
> >
<h3 <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 <div class="inline-flex gap-3">
src="/logo.png" <img
class="h-8" src="/logo.png"
alt="flame" class="h-8"
/> Flame Software alt="flame"
/> Flame Software
</div>
<span class="text-sm font-light">2022 and ongoing</span>
</h3> </h3>
<p class="text-sm text-gray-800 dark:text-gray-100"> <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 Flame Software is a Software-as-a-Service company that is developing a new communications app
@ -37,45 +40,60 @@
</p> </p>
</Card> </Card>
<Card <span class="col-span-2 row-span-1 @container">
buttonHref="https://puppypride.social" <Card
buttonText="🌐 Visit Puppy Pride" buttonHref="https://puppypride.social"
> buttonText="🌐 Visit Puppy Pride"
<h3
class="text-xl font-bold inline-flex items-center gap-3"
> >
<img <div class="grid @xl:grid-cols-2 grid-cols-1 gap-5">
src="/puppypride.png" <span>
class="h-8" <h3
alt="puppypride" class="text-xl font-bold inline-flex items-center gap-3 justify-between"
/> Puppy Pride >
</h3> <div class="inline-flex gap-3">
<p class="text-sm text-gray-800 dark:text-gray-100"> <img
I am the core developer of the new Puppy Pride social src="/puppypride.png"
network since January 2021, and continue to support and expand class="h-8"
it to this day. The site was built from the ground up alt="puppypride"
using the TALL stack in PHP (Tailwindcss, Alpine, Livewire and Laravel) /> Puppy Pride
and gave me a lot of experience working with not just PHP and every field inside Laravel, </div>
but also a very large array of different kinds of features and business processes at each step of development. <span class="text-sm font-light">2021 and ongoing</span>
<br /><br /> </h3>
Puppy Pride is an adult themed England based social network for people into petplay. <p class="text-sm text-gray-800 dark:text-gray-100">
The project is nearing its completion and will be released soon. I am the core developer of the new Puppy Pride social
You may find a beta release public at <a target="_blank" class="a" href="https://beta.puppypride.social">beta.puppypride.social</a>. network since January 2021, and continue to support and expand
</p> it to this day. The site was built from the ground up
</Card> 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 <Card
buttonHref="https://saxion.nl" buttonHref="https://saxion.nl"
buttonText="🎓 Open Website" buttonText="🎓 Open Website"
> >
<h3 <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 <div class="inline-flex gap-3">
src="/saxion.png" <img
class="h-8 rounded-full" src="/saxion.png"
alt="puppypride" class="h-8 rounded-full"
/> Saxion University alt="puppypride"
/> Saxion University
</div>
<span class="text-sm font-light">2020 to 2024</span>
</h3> </h3>
<p class="text-sm text-gray-800 dark:text-gray-100"> <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. 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> </p>
</Card> </Card>
<span></span>
<span class="col-span-1 row-span-1"> <span class="col-span-1 row-span-1">
<Card <Card
buttonHref="https://dubbelnull.com/showcase" buttonHref="https://dubbelnull.com/showcase"
buttonText="➡️ View DubbelNull showcase" buttonText="➡️ View DubbelNull showcase"
> >
<h3 <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 <div class="inline-flex gap-3">
src="/dubbelnull.png" <img
class="h-10 -my-1 -ml-1" src="/dubbelnull.png"
alt="dubbelnull" class="h-10 -my-1 -ml-1"
/> More websites at DubbelNull alt="dubbelnull"
/> DubbelNull
</div>
<span class="text-sm font-light">2020 and ongoing</span>
</h3> </h3>
<p class="text-sm text-gray-800 dark:text-gray-100"> <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, DubbelNull is a family business that does internet based development for small and medium sized companies,
@ -112,17 +131,78 @@
<Card <Card
> >
<h3 <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 🧑‍💻
Player Stats
</div>
</h3> </h3>
<p class="text-sm text-gray-800 dark:text-gray-100"> <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. 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/> <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. 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> </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> </Card>
</span> </span>
</div> </div>

@ -1,4 +1,6 @@
<script> <script>
import Card from "./Card.svelte";
function calculateAge(birthday) { // birthday is a date function calculateAge(birthday) { // birthday is a date
var ageDifMs = Date.now() - birthday; var ageDifMs = Date.now() - birthday;
var ageDate = new Date(ageDifMs); // miliseconds from epoch var ageDate = new Date(ageDifMs); // miliseconds from epoch
@ -9,113 +11,58 @@
<main class="@container container flex flex-col gap-20 relative"> <main class="@container container flex flex-col gap-20 relative">
<div class="absolute top-0 -mt-40" id="about"></div> <div class="absolute top-0 -mt-40" id="about"></div>
<section class="flex flex-col px-5 justify-between gap-10 lg:gap-20"> <section class="grid grid-cols-4 px-5 gap-5">
<article class="flex w-1/2 items-center text-center mx-auto flex-col col-span-2 gap-10"> <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> <h3 class="whitepigeon text-blue-600 font-bold text-6xl">About me</h3>
<h4 class="font-normal text-lg"> <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. 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. :) If you want to know a little more about me, here are some details. :)
</h4> </h4>
</article> </span>
<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>
<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"> <img src="/homepage/sona/MidFingers.jpg" class="rounded-xl shadow-lg object-cover aspect-square" alt="fursona"/>
<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"> <img src="/homepage/proxmox.png" class="rounded-xl shadow-lg col-span-2" alt="proxmox environment" />
<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>
<div class="flex flex-col gap-2"> <span class="col-span-2 flex flex-col gap-2">
<b class="text-xl">Furry fandom</b> <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> <span class="row-span-2">
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. <Card>
</p> <b class="text-xl">Furry fandom</b>
<span class="grid grid-cols-3 gap-1"> <p>
<img src="/homepage/sona/blue.png" class="rounded shadow-lg object-cover aspect-square" alt="fursona" /> Being a furry is an important hobby for me.
<img src="/homepage/sona/pink.png" class="rounded shadow-lg object-cover aspect-square" alt="fursona"/> <br/><br/>
<img src="/homepage/sona/MidFingers.jpg" class="rounded shadow-lg object-cover aspect-square" alt="fursona"/> 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.
</span> <br/><br/>
</div> 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.
</div> </p>
</Card>
</span>
<div class="bg-gray-100 dark:bg-gray-900 p-5 flex flex-col gap-10"> <img src="/homepage/sona/martin.png" class="rounded-xl shadow-lg object-cover aspect-square" alt="fursona" />
<h4 class="whitepigeon text-blue-600 font-bold text-2xl text-center">Details</h4>
<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"> <img src="/homepage/sona/oldmid.png" class="rounded-xl shadow-lg object-cover aspect-square" alt="fursona" />
<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>
<div class="flex flex-col gap-2"> <img src="/homepage/drone.jpeg" class="rounded-xl shadow-lg object-cover aspect-[3/2] col-span-3 row-span-2" alt="drone shot" />
<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>
</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> </section>
</main> </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