mirror of
https://github.com/bartvdbraak/hellob.art.git
synced 2025-04-26 09:01:21 +00:00
96 lines
3.4 KiB
Svelte
96 lines
3.4 KiB
Svelte
<script lang="ts">
|
|
import { page } from '$app/stores';
|
|
import { Icons, ImageFadeCarousel, SiteHeader } from '$lib/components/site';
|
|
import { buttonVariants } from '$lib/components/ui/button';
|
|
import { siteConfig } from '$lib/config/site';
|
|
import { cn } from '$lib/utils';
|
|
|
|
import catImg from '$lib/assets/root-cat.jpg';
|
|
import meImg from '$lib/assets/root-me.jpg';
|
|
import { Cat, PersonStanding } from 'lucide-svelte';
|
|
|
|
const images = [
|
|
{
|
|
src: meImg,
|
|
alt: 'Portrait of Bart van der Braak',
|
|
style: 'object-[50%_10%]',
|
|
icon: PersonStanding
|
|
},
|
|
{
|
|
src: catImg,
|
|
alt: 'Noire yawning cat and a bottle of whiskey with glass',
|
|
style: '',
|
|
icon: Cat
|
|
}
|
|
];
|
|
|
|
$: title = $page.data.title;
|
|
$: subTitle = $page.data.subTitle;
|
|
</script>
|
|
|
|
<SiteHeader {title} {subTitle}>
|
|
<p class="text-center text-sm text-green-700 dark:text-green-400">
|
|
Inspired by others, I share my open-source derived work with the community.
|
|
</p>
|
|
<div class="flex w-full items-center justify-center space-x-4 py-4 md:pb-10">
|
|
<a href="/projects" class={cn(buttonVariants())}> My Projects </a>
|
|
<a
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
href={siteConfig.links.gitHubProfile}
|
|
class={cn(buttonVariants({ variant: 'outline' }))}
|
|
>
|
|
<Icons.gitHub class="mr-2 h-4 w-4" />
|
|
GitHub
|
|
</a>
|
|
</div>
|
|
</SiteHeader>
|
|
<section class="flex">
|
|
<div class="border-grey/15 relative border-t pb-16 pt-10 dark:border-white/20">
|
|
<div
|
|
class="pointer-events-none absolute left-[00%] top-0 h-40 w-[100%] select-none overflow-hidden"
|
|
>
|
|
<div
|
|
class="absolute left-0 top-40 h-96 w-full -translate-y-full [background-image:radial-gradient(closest-side,rgba(123,175,224,0.12)_0%,transparent_100%)]"
|
|
></div>
|
|
</div>
|
|
<sup class="mb-1 text-base text-blue-400 empty:hidden">Introduction</sup>
|
|
<h2 class="text-5xl font-bold">
|
|
Building confidence and containers<span class="text-blue-400">.</span>
|
|
</h2>
|
|
<div class="text-md mt-12 flex flex-col gap-8 md:flex-row">
|
|
<div class="flex-1 empty:hidden">
|
|
<p>
|
|
I'm a DevOps and Platform Engineering enthusiast from Zaandam, The Netherlands. Started my
|
|
journey in Information Sciences at the Vrije Universiteit Amsterdam, quickly learning and
|
|
adopting Python, Javascript and Linux. These days, I'm also working alot with Terraform,
|
|
Bicep, and Kubernetes, creating cloud infra solutions that are sustainable.
|
|
</p>
|
|
<p class="mt-2">
|
|
Over at <a
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
class="font-medium underline underline-offset-4"
|
|
href="https://www.wearetriple.com">Triple</a
|
|
>, my role involves providing services to clients including HEINEKEN, BAM, and citizenM. I
|
|
utilize tools like Akamai, Azure, Azure DevOps and SendGrid to create and maintain robust,
|
|
scalable cloud infrastructures. For operational purposes, I employ technologies like
|
|
SaltStack, PRTG, and LogicMonitor.
|
|
</p>
|
|
<p class="mt-2">
|
|
I love to work on personal projects or playing games with friends. Beyond the screens, you
|
|
can catch me vibing to vinyl, watching movies, hitting concerts and festivals.
|
|
</p>
|
|
<p class="mt-2">
|
|
When the dust settles, my life is all about sharing laughs with my oversized cat and with
|
|
my amazing girlfriend. I also enjoy a good whiskey, and I'm always up for a chat or down
|
|
to help.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="flex-1">
|
|
<ImageFadeCarousel {images} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|