mirror of
https://github.com/bartvdbraak/hellob.art.git
synced 2025-04-27 09:31:21 +00:00
feat: change page container and content
This commit is contained in:
parent
d58f0d707e
commit
a29ccf0dc2
4 changed files with 123 additions and 58 deletions
BIN
src/lib/assets/cat-whiskey.jpg
Normal file
BIN
src/lib/assets/cat-whiskey.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 677 KiB |
|
|
@ -1,6 +1,7 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { calculateAge } from '$lib/calculate-age';
|
import { calculateAge } from '$lib/calculate-age';
|
||||||
import bartvdbraakImage from '$lib/assets/bartvdbraak.jpg';
|
import bartvdbraakImage from '$lib/assets/bartvdbraak.jpg';
|
||||||
|
import catWhiskeyImage from '$lib/assets/cat-whiskey.jpg';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<svelte:head>
|
<svelte:head>
|
||||||
|
|
@ -11,71 +12,135 @@
|
||||||
/>
|
/>
|
||||||
</svelte:head>
|
</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-4">About Me</h2>
|
<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="grid gap-8 md:grid-cols-2 lg:gap-12">
|
||||||
<div class="md:col-span-2">
|
<div class="relative">
|
||||||
<p class="text-lg leading-relaxed mb-8">
|
<div class="absolute inset-0 bg-gradient-to-tr from-blue-500 to-transparent bg-repeat"></div>
|
||||||
Welcome to my homepage! I'm a passionate DevOps engineer based in Zaandam, Netherlands. At {calculateAge(
|
<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'
|
'1994-10-18'
|
||||||
)}
|
)}
|
||||||
years old, I've already gathered a wealth of experience and expertise in the world of technology.
|
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
|
From programming in Python, Javascript, and Bash to utilizing cutting-edge technologies provisioned
|
||||||
Terraform, Bicep, and Kubernetes, I've honed my skills to drive efficient and innovative solutions.
|
using Terraform, Bicep, and Kubernetes, I've honed my skills to drive efficient and innovative
|
||||||
My journey in the tech industry began during my Information Sciences studies, where I fell in
|
solutions.
|
||||||
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>
|
</p>
|
||||||
|
<p class="mb-6 text-gray-500 sm:text-lg md:mb-8">
|
||||||
<h2 class="text-3xl font-bold mb-4">Empowering the Cloud with Azure</h2>
|
At <a class="anchor" href="https://www.wearetriple.com/" target="_blank" rel="external"
|
||||||
|
>Triple</a
|
||||||
<p class="text-lg leading-relaxed mb-8">
|
>, I've embraced the world of Azure and Azure DevOps, mastering the intricacies of cloud
|
||||||
My career took off when I joined Triple as a DevOps Engineer. At Triple, I've embraced the
|
architecture and deployment. Attaining certifications like AZ-104 and CKA has further
|
||||||
world of Azure and Azure DevOps, mastering the intricacies of cloud architecture and
|
solidified my expertise, empowering me to build and manage robust, scalable, and secure
|
||||||
deployment. Holding certifications like AZ-104 and CKA has further solidified my expertise,
|
cloud environments. My proficiency in containerization and Kubernetes has allowed me to take
|
||||||
empowering me to build and manage robust, scalable, and secure cloud environments. My
|
application development to new heights, ensuring seamless and efficient deployment at scale.
|
||||||
proficiency in containerization and Kubernetes has allowed me to take application
|
|
||||||
development to new heights, ensuring seamless and efficient deployment at scale.
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</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>
|
</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">
|
<h1
|
||||||
As a DevOps engineer, I thrive on solving complex challenges with the power of code and
|
class="mb-4 text-center text-2xl font-bold light:text-gray-800 sm:text-3xl md:mb-6 md:text-left"
|
||||||
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
|
Cats, code and automation
|
||||||
projects that push my boundaries, expanding my skill set, and exploring new technologies. I
|
</h1>
|
||||||
strongly believe that innovation and continuous learning are key drivers of success in the
|
|
||||||
ever-evolving tech landscape.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<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">
|
<h2
|
||||||
When I'm not busy crafting technological solutions, you'll often find me indulging in two of my
|
class="mb-2 text-center text-xl font-semibold light:text-gray-800 sm:text-2xl md:mb-4 md:text-left"
|
||||||
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
|
Friendly whiskers and collaboration
|
||||||
intricate flavors and the artistry behind its production. I find both interests to be a
|
</h2>
|
||||||
delightful way to unwind and recharge my creative energies.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<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">
|
<div class="relative">
|
||||||
I'm always eager to collaborate on exciting projects and explore new opportunities. Whether it's
|
<div class="absolute inset-0 bg-gradient-to-tr from-blue-500 to-transparent bg-repeat"></div>
|
||||||
discussing data-driven ideas, cloud architecture, or just sharing cute cat pictures, I'd love to
|
<div class="h-64 overflow-hidden rounded-lg bg-gray-100 shadow-lg md:h-auto sticky top-10">
|
||||||
connect with like-minded individuals. Feel free to reach out to me through the provided contact
|
<img
|
||||||
information. Let's work together to create something extraordinary!
|
src={catWhiskeyImage}
|
||||||
</p>
|
loading="lazy"
|
||||||
</main>
|
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>
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@
|
||||||
/>
|
/>
|
||||||
</svelte:head>
|
</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>
|
<h2 class="text-3xl font-bold mb-8">Projects</h2>
|
||||||
|
|
||||||
<p class="text-lg leading-relaxed mb-8">
|
<p class="text-lg leading-relaxed mb-8">
|
||||||
|
|
@ -49,4 +49,4 @@
|
||||||
{/if}
|
{/if}
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -13,7 +13,7 @@
|
||||||
/>
|
/>
|
||||||
</svelte:head>
|
</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>
|
<h2 class="text-3xl font-bold mb-8">Toolbox</h2>
|
||||||
|
|
||||||
<div class="grid grid-cols-1 gap-4 md:grid-cols-3 pb-2">
|
<div class="grid grid-cols-1 gap-4 md:grid-cols-3 pb-2">
|
||||||
|
|
@ -46,4 +46,4 @@
|
||||||
/>
|
/>
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue