bartvdbraak/hellob.art
1
0
Fork 0
mirror of https://github.com/bartvdbraak/hellob.art.git synced 2025-04-27 17:41:21 +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
Show stats 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>
<!-- ---- / ---- --> <!-- ---- / ---- -->

50
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,37 +10,46 @@
<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>
<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"> <p class="text-lg leading-relaxed mb-8">
Welcome to my homepage! I'm a passionate DevOps engineer based in Zaandam, Netherlands. At {calculateAge("1994-10-18")} Welcome to my homepage! I'm a passionate DevOps engineer based in Zaandam, Netherlands. At {calculateAge(
years old, I've already gathered a wealth of experience and expertise in the world of '1994-10-18'
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 years old, I've already gathered a wealth of experience and expertise in the world of technology.
innovative solutions. My journey in the tech industry began during my Information Sciences From programming in Python, Javascript, and Bash to utilizing cutting-edge technologies like
studies, where I fell in love with data-driven projects and statistical learning. This passion Terraform, Bicep, and Kubernetes, I've honed my skills to drive efficient and innovative solutions.
led me to explore languages like Python and LaTeX, enabling me to bring ideas to life through My journey in the tech industry began during my Information Sciences studies, where I fell in
powerful data management and visualization. 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>
<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"> <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 My career took off when I joined Triple as a DevOps Engineer. At Triple, I've embraced the
of Azure and Azure DevOps, mastering the intricacies of cloud architecture and deployment. world of Azure and Azure DevOps, mastering the intricacies of cloud architecture and
Holding certifications like AZ-104 and CKA has further solidified my expertise, empowering me to deployment. Holding certifications like AZ-104 and CKA has further solidified my expertise,
build and manage robust, scalable, and secure cloud environments. My proficiency in empowering me to build and manage robust, scalable, and secure cloud environments. My
containerization and Kubernetes has allowed me to take application development to new heights, proficiency in containerization and Kubernetes has allowed me to take application
ensuring seamless and efficient deployment at scale. development to new heights, ensuring seamless and efficient deployment at scale.
</p> </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>

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>