diff --git a/src/lib/assets/cat-whiskey.jpg b/src/lib/assets/cat-whiskey.jpg
new file mode 100644
index 0000000..1afec72
Binary files /dev/null and b/src/lib/assets/cat-whiskey.jpg differ
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 53c62c4..5eab7b1 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,6 +1,7 @@
<script lang="ts">
import { calculateAge } from '$lib/calculate-age';
import bartvdbraakImage from '$lib/assets/bartvdbraak.jpg';
+ import catWhiskeyImage from '$lib/assets/cat-whiskey.jpg';
</script>
<svelte:head>
@@ -11,71 +12,135 @@
/>
</svelte:head>
-<main class="container mx-auto px-4 py-8 text-left">
- <h2 class="text-3xl font-bold mb-4">About Me</h2>
+<div class="py-6 sm:py-8 lg:py-12 md:mt-8 mx-auto max-w-screen-xl px-4 md:px-8">
+ <h2 class="text-3xl font-bold mb-12 z-10">Bart van der Braak</h2>
- <div class="grid grid-cols-1 gap-4 md:grid-cols-3">
- <div class="md:col-span-2">
- <p class="text-lg leading-relaxed mb-8">
- Welcome to my homepage! I'm a passionate DevOps engineer based in Zaandam, Netherlands. At {calculateAge(
+ <div class="grid gap-8 md:grid-cols-2 lg:gap-12">
+ <div class="relative">
+ <div class="absolute inset-0 bg-gradient-to-tr from-blue-500 to-transparent bg-repeat"></div>
+ <div class="h-64 overflow-hidden rounded-lg bg-gray-100 shadow-lg md:h-auto sticky top-10">
+ <img
+ src={bartvdbraakImage}
+ loading="lazy"
+ alt="Bart van der Braak with a noire effect"
+ class="h-full w-full object-cover profile-fit"
+ />
+ </div>
+ </div>
+
+ <div>
+ <p class="text-center font-bold text-indigo-500 md:text-left">Who I am</p>
+
+ <h1
+ class="mb-4 text-center text-2xl font-bold light:text-gray-800 sm:text-3xl md:mb-6 md:text-left"
+ >
+ A tech journey
+ </h1>
+
+ <p class="mb-6 text-gray-500 sm:text-lg md:mb-8">
+ My journey in the tech industry began during my Information Sciences studies, where I fell
+ in love with data-driven projects and statistical learning. This passion led me to explore
+ languages like Python and LaTeX, enabling me to bring ideas to life through powerful data
+ management and visualization.
+ </p>
+
+ <h2
+ class="mb-2 text-center text-xl font-semibold light:text-gray-800 sm:text-2xl md:mb-4 md:text-left"
+ >
+ Present day
+ </h2>
+
+ <p class="mb-6 text-gray-500 sm:text-lg md:mb-8">
+ I'm a passionate DevOps engineer based in Zaandam, Netherlands. At {calculateAge(
'1994-10-18'
)}
years old, I've already gathered a wealth of experience and expertise in the world of technology.
- From programming in Python, Javascript, and Bash to utilizing cutting-edge technologies like
- Terraform, Bicep, and Kubernetes, I've honed my skills to drive efficient and innovative solutions.
- My journey in the tech industry began during my Information Sciences studies, where I fell in
- love with data-driven projects and statistical learning. This passion led me to explore languages
- like Python and LaTeX, enabling me to bring ideas to life through powerful data management and
- visualization.
+ From programming in Python, Javascript, and Bash to utilizing cutting-edge technologies provisioned
+ using Terraform, Bicep, and Kubernetes, I've honed my skills to drive efficient and innovative
+ solutions.
</p>
-
- <h2 class="text-3xl font-bold mb-4">Empowering the Cloud with Azure</h2>
-
- <p class="text-lg leading-relaxed mb-8">
- My career took off when I joined Triple as a DevOps Engineer. At Triple, I've embraced the
- world of Azure and Azure DevOps, mastering the intricacies of cloud architecture and
- deployment. Holding certifications like AZ-104 and CKA has further solidified my expertise,
- empowering me to build and manage robust, scalable, and secure cloud environments. My
- proficiency in containerization and Kubernetes has allowed me to take application
- development to new heights, ensuring seamless and efficient deployment at scale.
+ <p class="mb-6 text-gray-500 sm:text-lg md:mb-8">
+ At <a class="anchor" href="https://www.wearetriple.com/" target="_blank" rel="external"
+ >Triple</a
+ >, I've embraced the world of Azure and Azure DevOps, mastering the intricacies of cloud
+ architecture and deployment. Attaining certifications like AZ-104 and CKA has further
+ solidified my expertise, empowering me to build and manage robust, scalable, and secure
+ cloud environments. My proficiency in containerization and Kubernetes has allowed me to take
+ application development to new heights, ensuring seamless and efficient deployment at scale.
</p>
</div>
- <div class="md:col-span-1 flex justify-end">
- <img
- src={bartvdbraakImage}
- alt="Bart van der Braak with a noire effect"
- class="max-w-1/3 mb-4 object-cover"
- />
- </div>
</div>
+ <hr class="my-20 border-t border-gray-300" />
- <h2 class="text-3xl font-bold mb-4">Solving Problems with Code and Automation</h2>
+ <div class="grid gap-8 md:grid-cols-2 lg:gap-12">
+ <div>
+ <p class="text-center font-bold text-indigo-500 md:text-left">What I am about</p>
- <p class="text-lg leading-relaxed mb-8">
- As a DevOps engineer, I thrive on solving complex challenges with the power of code and
- automation. My passion for streamlining workflows led me to create internal tooling using APIs,
- boosting productivity for myself and my colleagues. Outside of work, I enjoy taking on side
- projects that push my boundaries, expanding my skill set, and exploring new technologies. I
- strongly believe that innovation and continuous learning are key drivers of success in the
- ever-evolving tech landscape.
- </p>
+ <h1
+ class="mb-4 text-center text-2xl font-bold light:text-gray-800 sm:text-3xl md:mb-6 md:text-left"
+ >
+ Cats, code and automation
+ </h1>
- <h2 class="text-3xl font-bold mb-4">Cat Lover and Whiskey Enthusiast</h2>
+ <p class="mb-6 text-gray-500 sm:text-lg md:mb-8">
+ As a DevOps engineer, I thrive on solving complex challenges with the power of code and
+ automation. My passion for streamlining workflows led me to create internal tooling using
+ APIs, boosting productivity for myself and my colleagues. Outside of work, I enjoy taking on
+ side projects that push my boundaries, expanding my skill set, and exploring new
+ technologies. I strongly believe that innovation and continuous learning are key drivers of
+ success in the ever-evolving tech landscape.
+ </p>
- <p class="text-lg leading-relaxed mb-8">
- When I'm not busy crafting technological solutions, you'll often find me indulging in two of my
- favorite passions: cats and whiskey. There's something special about the companionship of cats,
- and their playful antics never fail to bring joy to my day. As for whiskey, I appreciate the
- intricate flavors and the artistry behind its production. I find both interests to be a
- delightful way to unwind and recharge my creative energies.
- </p>
+ <h2
+ class="mb-2 text-center text-xl font-semibold light:text-gray-800 sm:text-2xl md:mb-4 md:text-left"
+ >
+ Friendly whiskers and collaboration
+ </h2>
- <h2 class="text-3xl font-bold mb-4">Let's Connect</h2>
+ <p class="mb-6 text-gray-500 sm:text-lg md:mb-8">
+ When I'm not wrapped up in cooking up techie stuff, you might catch me just hanging out with
+ two things I absolutely love: cats and whiskey. There's just something about chilling with
+ cats, their funny antics always put a smile on my face. And as for whiskey, I'm all about
+ those fancy flavors and the whole art of making it. Both of these things? They're my way of
+ kicking back, recharging, and letting my creative juices flow.
+ </p>
+ <p class="mb-6 text-gray-500 sm:text-lg md:mb-8">
+ But hey, that's not all there is to me! I'm all about going on crazy adventures with my
+ tight-knit crew of pals, and my amazing girlfriend who's known me since I was a little tike.
+ </p>
+ <p class="mb-6 text-gray-500 sm:text-lg md:mb-8">
+ I'm always eager to collaborate on exciting projects and explore new opportunities. Whether
+ it's discussing data-driven ideas, cloud architecture, or just sharing cute cat pictures,
+ I'd love to connect with like-minded individuals. Feel free to reach out to me through the
+ provided contact information. Let's work together to create something extraordinary!
+ </p>
+ </div>
- <p class="text-lg leading-relaxed">
- I'm always eager to collaborate on exciting projects and explore new opportunities. Whether it's
- discussing data-driven ideas, cloud architecture, or just sharing cute cat pictures, I'd love to
- connect with like-minded individuals. Feel free to reach out to me through the provided contact
- information. Let's work together to create something extraordinary!
- </p>
-</main>
+ <div class="relative">
+ <div class="absolute inset-0 bg-gradient-to-tr from-blue-500 to-transparent bg-repeat"></div>
+ <div class="h-64 overflow-hidden rounded-lg bg-gray-100 shadow-lg md:h-auto sticky top-10">
+ <img
+ src={catWhiskeyImage}
+ loading="lazy"
+ alt="Poes (my cat) and a bottle of Lagavulin 8 (whiskey) with a noire effect"
+ class="h-full w-full object-cover cat-fit"
+ />
+ </div>
+ </div>
+ </div>
+</div>
+
+<style>
+ .profile-fit {
+ object-position: 50% 10%;
+ }
+ .cat-fit {
+ object-position: 50% 50%;
+ }
+ .bg-repeat {
+ background-image: radial-gradient(#4e46e589 1px, transparent 0);
+ background-size: 20px 20px;
+ background-position: -6px -6px;
+ transform: translate(-2.5%, -2.5%);
+ }
+</style>
diff --git a/src/routes/projects/+page.svelte b/src/routes/projects/+page.svelte
index cff81ac..7b0568c 100644
--- a/src/routes/projects/+page.svelte
+++ b/src/routes/projects/+page.svelte
@@ -11,7 +11,7 @@
/>
</svelte:head>
-<main class="container mx-auto px-4 py-8 text-left">
+<div class="py-6 sm:py-8 lg:py-12 md:mt-8 mx-auto max-w-screen-xl px-4 md:px-8">
<h2 class="text-3xl font-bold mb-8">Projects</h2>
<p class="text-lg leading-relaxed mb-8">
@@ -49,4 +49,4 @@
{/if}
{/each}
</div>
-</main>
+</div>
diff --git a/src/routes/toolbox/+page.svelte b/src/routes/toolbox/+page.svelte
index 1d2ab52..4fd9adc 100644
--- a/src/routes/toolbox/+page.svelte
+++ b/src/routes/toolbox/+page.svelte
@@ -13,7 +13,7 @@
/>
</svelte:head>
-<main class="container mx-auto px-4 py-8 text-left">
+<div class="py-6 sm:py-8 lg:py-12 md:mt-8 mx-auto max-w-screen-xl px-4 md:px-8">
<h2 class="text-3xl font-bold mb-8">Toolbox</h2>
<div class="grid grid-cols-1 gap-4 md:grid-cols-3 pb-2">
@@ -46,4 +46,4 @@
/>
{/each}
</div>
-</main>
+</div>