bartvdbraak/hellob.art
1
0
Fork 0
mirror of https://github.com/bartvdbraak/hellob.art.git synced 2025-10-30 03:39:09 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #73 from bartvdbraak/feat/3js-tools

Browse source 
3js additions
This commit is contained in:
Bart van der Braak 2023-07-29 17:24:30 +02:00 • committed by GitHub
commit efa6099958
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 49 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/app.html
View file

@ -11,6 +11,7 @@
<link rel="mask-icon" href="%sveltekit.assets%/safari-pinned-tab.svg" color="#5bbad5"> <link rel="mask-icon" href="%sveltekit.assets%/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c"> <meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff"> <meta name="theme-color" content="#ffffff">
<title></title>
%sveltekit.head% %sveltekit.head%
</head> </head>
<body data-sveltekit-preload-data="hover"> <body data-sveltekit-preload-data="hover">

BIN
src/lib/assets/bartvdbraak_profile_noire.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 375 KiB

2
src/lib/components/Header.svelte
View file

@ -22,7 +22,7 @@
</svelte:fragment> </svelte:fragment>
<svelte:fragment slot="trail"> <svelte:fragment slot="trail">
<a <a
href="https://github.com/bartvdbraak/hellob.art" href="https://github.com/bartvdbraak"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
class="btn-icon variant-primary"><GitHub /></a class="btn-icon variant-primary"><GitHub /></a

2
src/lib/components/Navigation.svelte
View file

@ -10,7 +10,7 @@
} }
</script> </script>
<nav class="list-nav p-4"> <nav class="list-nav p-3">
<ul> <ul>
{#each routes as route} {#each routes as route}
<li> <li>

4
src/routes/+layout.svelte
View file

@ -27,7 +27,7 @@
</Drawer> </Drawer>
<AppShell <AppShell
slotSidebarLeft="w-0 md:w-52" slotSidebarLeft="w-0 md:w-40"
on:scroll={handleScroll} on:scroll={handleScroll}
> >
<svelte:fragment slot="header"> <svelte:fragment slot="header">
@ -37,7 +37,7 @@
<Navigation {routes} /> <Navigation {routes} />
</svelte:fragment> </svelte:fragment>
<!-- Router Slot --> <!-- Router Slot -->
<div class="container p-10 mx-auto"> <div class="container p-4 mx-auto">
<slot /> <slot />
</div> </div>
<!-- ---- / ---- --> <!-- ---- / ---- -->

64
src/routes/+page.svelte
View file

@ -1,5 +1,6 @@
<script lang='ts'> <script lang="ts">
import { calculateAge } from '$lib/calculate-age'; import { calculateAge } from '$lib/calculate-age';
import picture from '$lib/assets/bartvdbraak_profile_noire.jpg';
</script> </script>
<svelte:head> <svelte:head>
@ -9,39 +10,48 @@
<main class="container mx-auto px-4 py-8 text-left"> <main class="container mx-auto px-4 py-8 text-left">
<h2 class="text-3xl font-bold mb-4">About Me</h2> <h2 class="text-3xl font-bold mb-4">About Me</h2>
<p class="text-lg leading-relaxed mb-8"> <div class="grid grid-cols-1 gap-4 md:grid-cols-3">
Welcome to my homepage! I'm a passionate DevOps engineer based in Zaandam, Netherlands. At {calculateAge("1994-10-18")} <div class="md:col-span-2">
years old, I've already gathered a wealth of experience and expertise in the world of <p class="text-lg leading-relaxed mb-8">
technology. From programming in Python, Javascript, and Bash to utilizing cutting-edge Welcome to my homepage! I'm a passionate DevOps engineer based in Zaandam, Netherlands. At {calculateAge(
technologies like Terraform, Bicep, and Kubernetes, I've honed my skills to drive efficient and '1994-10-18'
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 years old, I've already gathered a wealth of experience and expertise in the world of technology.
led me to explore languages like Python and LaTeX, enabling me to bring ideas to life through From programming in Python, Javascript, and Bash to utilizing cutting-edge technologies like
powerful data management and visualization. Terraform, Bicep, and Kubernetes, I've honed my skills to drive efficient and innovative solutions.
</p> 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="text-3xl font-bold mb-4">Empowering the Cloud with Azure</h2> <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>
<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>
</div>
<div class="md:col-span-1 flex justify-end">
<img src={picture} alt="Bart van der Braak with a noire effect" class="max-w-1/3 mb-4 object-cover" />
</div>
</div>
<h2 class="text-3xl font-bold mb-4">Solving Problems with Code and Automation</h2> <h2 class="text-3xl font-bold mb-4">Solving Problems with Code and Automation</h2>
<p class="text-lg leading-relaxed mb-8"> <p class="text-lg leading-relaxed mb-8">
As a DevOps engineer, I thrive on solving complex challenges with the power of code and 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, automation. My passion for streamlining workflows led me to create internal tooling using
boosting productivity for myself and my colleagues. Outside of work, I enjoy taking on side APIs, boosting productivity for myself and my colleagues. Outside of work, I enjoy taking on
projects that push my boundaries, expanding my skill set, and exploring new technologies. I side projects that push my boundaries, expanding my skill set, and exploring new
strongly believe that innovation and continuous learning are key drivers of success in the technologies. I strongly believe that innovation and continuous learning are key drivers of
ever-evolving tech landscape. success in the ever-evolving tech landscape.
</p> </p>
<h2 class="text-3xl font-bold mb-4">Cat Lover and Whiskey Enthusiast</h2> <h2 class="text-3xl font-bold mb-4">Cat Lover and Whiskey Enthusiast</h2>
<p class="text-lg leading-relaxed mb-8"> <p class="text-lg leading-relaxed mb-8">

1
src/routes/tools/+page.svelte
View file

@ -13,6 +13,5 @@
<Canvas> <Canvas>
<Scene /> <Scene />
<Github3d />
</Canvas> </Canvas>
</main> </main>

9
src/routes/tools/Scene.svelte
View file

@ -21,6 +21,8 @@
}} }}
/> />
<T.DirectionalLight position={[0, 10, 10]} />
<T.Mesh <T.Mesh
rotation.y={rotation} rotation.y={rotation}
position.y={1} position.y={1}
@ -30,13 +32,16 @@
on:click={() => scale.set(3)} on:click={() => scale.set(3)}
> >
<T.BoxGeometry args={[1, 2, 1]} /> <T.BoxGeometry args={[1, 2, 1]} />
<T.MeshBasicMaterial color={[0, 0, 0]} /> <T.MeshBasicMaterial color={[255, 255, 255]} />
</T.Mesh> </T.Mesh>
<Github3d <Github3d
position={[0, 0, 0]} position={[0, 0, 0]}
scale={$scale} scale={$scale}
on:pointerenter={() => scale.set(1.5)} on:pointerenter={() => scale.set(1.5)}
on:pointerleave={() => scale.set(1)} on:pointerleave={() => scale.set(1)}
on:click={() => scale.set(3)} on:click={() => scale.set(3)}
/> >
</Github3d>