mirror of
https://github.com/bartvdbraak/hellob.art.git
synced 2025-06-29 07:49:10 +00:00
refactor: linting and formatting changes
This commit is contained in:
parent
3df46b240b
commit
3807145c1d
27 changed files with 262 additions and 189 deletions
|
|
@ -2,7 +2,7 @@
|
|||
import '@skeletonlabs/skeleton/themes/theme-crimson.css';
|
||||
import '@skeletonlabs/skeleton/styles/skeleton.css';
|
||||
import '../app.postcss';
|
||||
import { AppShell, Drawer, ProgressBar, drawerStore } from '@skeletonlabs/skeleton';
|
||||
import { AppShell, Drawer } from '@skeletonlabs/skeleton';
|
||||
import Footer from '../lib/components/Footer.svelte';
|
||||
import Navigation from '../lib/components/Navigation.svelte';
|
||||
import Header from '$lib/components/Header.svelte';
|
||||
|
|
@ -10,26 +10,23 @@
|
|||
let routes = [
|
||||
{ url: '/', label: 'Home' },
|
||||
{ url: '/projects', label: 'Projects' },
|
||||
{ url: '/tools', label: 'Tools' },
|
||||
{ url: '/tools', label: 'Tools' }
|
||||
// { url: '/blog', label: 'Blog' }
|
||||
];
|
||||
|
||||
let progress = 0;
|
||||
|
||||
function handleScroll(event: Event) {
|
||||
const { scrollTop, scrollHeight, clientHeight } = event.currentTarget as HTMLElement;
|
||||
progress = (scrollTop / (scrollHeight - clientHeight)) * 100;
|
||||
}
|
||||
function handleScroll(event: Event) {
|
||||
const { scrollTop, scrollHeight, clientHeight } = event.currentTarget as HTMLElement;
|
||||
progress = (scrollTop / (scrollHeight - clientHeight)) * 100;
|
||||
}
|
||||
</script>
|
||||
|
||||
<Drawer width="w-[280px] md:w-[480px]">
|
||||
<Navigation {routes} />
|
||||
</Drawer>
|
||||
|
||||
<AppShell
|
||||
slotSidebarLeft="w-0 md:w-40"
|
||||
on:scroll={handleScroll}
|
||||
>
|
||||
<AppShell slotSidebarLeft="w-0 md:w-40" on:scroll={handleScroll}>
|
||||
<svelte:fragment slot="header">
|
||||
<Header {progress} />
|
||||
</svelte:fragment>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,10 @@
|
|||
|
||||
<svelte:head>
|
||||
<title>hellob.art — home</title>
|
||||
<meta name="description" content="Meet Bart, a passionate DevOps engineer from Zaandam, Netherlands. With expertise in Azure, Kubernetes, and automation, he loves solving challenges through code. Discover his journey, interests in cats and whiskey, and how to connect with him for exciting collaborations.">
|
||||
<meta
|
||||
name="description"
|
||||
content="Meet Bart, a passionate DevOps engineer from Zaandam, Netherlands. With expertise in Azure, Kubernetes, and automation, he loves solving challenges through code. Discover his journey, interests in cats and whiskey, and how to connect with him for exciting collaborations."
|
||||
/>
|
||||
</svelte:head>
|
||||
|
||||
<main class="container mx-auto px-4 py-8 text-left">
|
||||
|
|
@ -38,21 +41,25 @@
|
|||
</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" />
|
||||
<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>
|
||||
|
||||
<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.
|
||||
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>
|
||||
|
||||
|
||||
<h2 class="text-3xl font-bold mb-4">Cat Lover and Whiskey Enthusiast</h2>
|
||||
|
||||
<p class="text-lg leading-relaxed mb-8">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<script>
|
||||
/** @type {import('./$types').PageData} */
|
||||
export let data;
|
||||
/** @type {import('./$types').PageData} */
|
||||
export let data;
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
|
|
@ -8,4 +8,4 @@
|
|||
</svelte:head>
|
||||
|
||||
<!-- <h1>{data.title}</h1>
|
||||
<div>{@html data.content}</div> -->
|
||||
<div>{@html data.content}</div> -->
|
||||
|
|
|
|||
|
|
@ -49,7 +49,10 @@
|
|||
|
||||
<svelte:head>
|
||||
<title>hellob.art — projects</title>
|
||||
<meta name="description" content="Explore a diverse collection of web applications and virtual tours in the portfolio of a passionate DevOps engineer. Discover innovative projects in React, Golang, Next.js, and more.">
|
||||
<meta
|
||||
name="description"
|
||||
content="Explore a diverse collection of web applications and virtual tours in the portfolio of a passionate DevOps engineer. Discover innovative projects in React, Golang, Next.js, and more."
|
||||
/>
|
||||
</svelte:head>
|
||||
|
||||
<main class="container mx-auto px-4 py-8 text-left">
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<script lang="ts">
|
||||
import { Canvas } from '@threlte/core';
|
||||
import { T } from '@threlte/core';
|
||||
import { ContactShadows, Float, Grid, OrbitControls } from '@threlte/extras';
|
||||
import { ContactShadows, Float, OrbitControls } from '@threlte/extras';
|
||||
import Github from './models/Github.svelte';
|
||||
import TerraformFlat from './models/TerraformFlat.svelte';
|
||||
import Kubernetes from './models/Kubernetes.svelte';
|
||||
|
|
@ -11,7 +11,10 @@
|
|||
|
||||
<svelte:head>
|
||||
<title>hellob.art — tools</title>
|
||||
<meta name="description" content="Explore essential DevOps tools like Kubernetes, Terraform, Warp, and version control platforms GitHub, Azure DevOps, and GitLab.">
|
||||
<meta
|
||||
name="description"
|
||||
content="Explore essential DevOps tools like Kubernetes, Terraform, Warp, and version control platforms GitHub, Azure DevOps, and GitLab."
|
||||
/>
|
||||
</svelte:head>
|
||||
|
||||
<main class="container mx-auto px-4 py-8 text-left">
|
||||
|
|
@ -56,15 +59,6 @@
|
|||
<T.DirectionalLight intensity={0.5} position.x={5} position.y={3} />
|
||||
<T.AmbientLight intensity={0.2} />
|
||||
|
||||
<!-- <Grid
|
||||
position.y={-0.001}
|
||||
cellColor="#ffffff"
|
||||
sectionColor="#ffffff"
|
||||
sectionThickness={0}
|
||||
fadeDistance={40}
|
||||
cellSize={2}
|
||||
/> -->
|
||||
|
||||
<ContactShadows scale={10} blur={2} far={2.5} opacity={0.5} />
|
||||
|
||||
<Float floatIntensity={1} floatingRange={[0, 1]}>
|
||||
|
|
|
|||
|
|
@ -4,25 +4,25 @@ Command: npx @threlte/gltf@1.0.0-next.13 ./src/lib/assets/vectors/github.glb --t
|
|||
-->
|
||||
|
||||
<script>
|
||||
import { Group } from 'three'
|
||||
import { T, forwardEventHandlers } from '@threlte/core'
|
||||
import { useGltf } from '@threlte/extras'
|
||||
import { Group } from 'three';
|
||||
import { T, forwardEventHandlers } from '@threlte/core';
|
||||
import { useGltf } from '@threlte/extras';
|
||||
|
||||
export const ref = new Group()
|
||||
export const ref = new Group();
|
||||
|
||||
const gltf = useGltf('/models/github-transformed.glb', { useDraco: true })
|
||||
const gltf = useGltf('/models/github-transformed.glb', { useDraco: true });
|
||||
|
||||
const component = forwardEventHandlers()
|
||||
const component = forwardEventHandlers();
|
||||
</script>
|
||||
|
||||
<T is={ref} dispose={false} {...$$restProps} bind:this={$component}>
|
||||
{#await gltf}
|
||||
<slot name="fallback" />
|
||||
{:then gltf}
|
||||
<T.Mesh geometry={gltf.nodes.Github_Mesh.geometry} material={gltf.materials['SVGMat.001']} />
|
||||
{:catch error}
|
||||
<slot name="error" {error} />
|
||||
{/await}
|
||||
{#await gltf}
|
||||
<slot name="fallback" />
|
||||
{:then gltf}
|
||||
<T.Mesh geometry={gltf.nodes.Github_Mesh.geometry} material={gltf.materials['SVGMat.001']} />
|
||||
{:catch error}
|
||||
<slot name="error" {error} />
|
||||
{/await}
|
||||
|
||||
<slot {ref} />
|
||||
<slot {ref} />
|
||||
</T>
|
||||
|
|
|
|||
|
|
@ -4,34 +4,34 @@ Command: npx @threlte/gltf@1.0.0-next.13 ./static/models/kubernetes.glb --transf
|
|||
-->
|
||||
|
||||
<script>
|
||||
import { Group } from 'three'
|
||||
import { T, forwardEventHandlers } from '@threlte/core'
|
||||
import { useGltf } from '@threlte/extras'
|
||||
import { Group } from 'three';
|
||||
import { T, forwardEventHandlers } from '@threlte/core';
|
||||
import { useGltf } from '@threlte/extras';
|
||||
|
||||
export const ref = new Group()
|
||||
export const ref = new Group();
|
||||
|
||||
const gltf = useGltf('/models/kubernetes-transformed.glb', { useDraco: true })
|
||||
const gltf = useGltf('/models/kubernetes-transformed.glb', { useDraco: true });
|
||||
|
||||
const component = forwardEventHandlers()
|
||||
const component = forwardEventHandlers();
|
||||
</script>
|
||||
|
||||
<T is={ref} dispose={false} {...$$restProps} bind:this={$component}>
|
||||
{#await gltf}
|
||||
<slot name="fallback" />
|
||||
{:then gltf}
|
||||
<T.Mesh
|
||||
geometry={gltf.nodes.Curve.geometry}
|
||||
material={gltf.materials['SVGMat.006']}
|
||||
rotation={[Math.PI / 2, 0, 0.9]}
|
||||
/>
|
||||
<T.Mesh
|
||||
geometry={gltf.nodes.Curve001.geometry}
|
||||
material={gltf.materials['SVGMat.007']}
|
||||
rotation={[Math.PI / 2, 0, 0.9]}
|
||||
/>
|
||||
{:catch error}
|
||||
<slot name="error" {error} />
|
||||
{/await}
|
||||
{#await gltf}
|
||||
<slot name="fallback" />
|
||||
{:then gltf}
|
||||
<T.Mesh
|
||||
geometry={gltf.nodes.Curve.geometry}
|
||||
material={gltf.materials['SVGMat.006']}
|
||||
rotation={[Math.PI / 2, 0, 0.9]}
|
||||
/>
|
||||
<T.Mesh
|
||||
geometry={gltf.nodes.Curve001.geometry}
|
||||
material={gltf.materials['SVGMat.007']}
|
||||
rotation={[Math.PI / 2, 0, 0.9]}
|
||||
/>
|
||||
{:catch error}
|
||||
<slot name="error" {error} />
|
||||
{/await}
|
||||
|
||||
<slot {ref} />
|
||||
<slot {ref} />
|
||||
</T>
|
||||
|
|
|
|||
|
|
@ -4,28 +4,28 @@ Command: npx @threlte/gltf@1.0.0-next.13 ./static/models/terraform-flat.glb --tr
|
|||
-->
|
||||
|
||||
<script>
|
||||
import { Group } from 'three'
|
||||
import { T, forwardEventHandlers } from '@threlte/core'
|
||||
import { useGltf } from '@threlte/extras'
|
||||
import { Group } from 'three';
|
||||
import { T, forwardEventHandlers } from '@threlte/core';
|
||||
import { useGltf } from '@threlte/extras';
|
||||
|
||||
export const ref = new Group()
|
||||
export const ref = new Group();
|
||||
|
||||
const gltf = useGltf('/models/terraform-flat-transformed.glb', { useDraco: true })
|
||||
const gltf = useGltf('/models/terraform-flat-transformed.glb', { useDraco: true });
|
||||
|
||||
const component = forwardEventHandlers()
|
||||
const component = forwardEventHandlers();
|
||||
</script>
|
||||
|
||||
<T is={ref} dispose={false} {...$$restProps} bind:this={$component}>
|
||||
{#await gltf}
|
||||
<slot name="fallback" />
|
||||
{:then gltf}
|
||||
<T.Group rotation={[Math.PI / 2, 0, 5]}>
|
||||
<T.Mesh geometry={gltf.nodes.Curve_1.geometry} material={gltf.materials.SVGMat} />
|
||||
<T.Mesh geometry={gltf.nodes.Curve_2.geometry} material={gltf.materials['SVGMat.001']} />
|
||||
</T.Group>
|
||||
{:catch error}
|
||||
<slot name="error" {error} />
|
||||
{/await}
|
||||
{#await gltf}
|
||||
<slot name="fallback" />
|
||||
{:then gltf}
|
||||
<T.Group rotation={[Math.PI / 2, 0, 5]}>
|
||||
<T.Mesh geometry={gltf.nodes.Curve_1.geometry} material={gltf.materials.SVGMat} />
|
||||
<T.Mesh geometry={gltf.nodes.Curve_2.geometry} material={gltf.materials['SVGMat.001']} />
|
||||
</T.Group>
|
||||
{:catch error}
|
||||
<slot name="error" {error} />
|
||||
{/await}
|
||||
|
||||
<slot {ref} />
|
||||
<slot {ref} />
|
||||
</T>
|
||||
|
|
|
|||
|
|
@ -4,26 +4,34 @@ Command: npx @threlte/gltf@1.0.0-next.13 ./static/models/warp.glb --transform
|
|||
-->
|
||||
|
||||
<script>
|
||||
import { Group } from 'three'
|
||||
import { T, forwardEventHandlers } from '@threlte/core'
|
||||
import { useGltf } from '@threlte/extras'
|
||||
import { Group } from 'three';
|
||||
import { T, forwardEventHandlers } from '@threlte/core';
|
||||
import { useGltf } from '@threlte/extras';
|
||||
|
||||
export const ref = new Group()
|
||||
export const ref = new Group();
|
||||
|
||||
const gltf = useGltf('/models/warp-transformed.glb', { useDraco: true })
|
||||
const gltf = useGltf('/models/warp-transformed.glb', { useDraco: true });
|
||||
|
||||
const component = forwardEventHandlers()
|
||||
const component = forwardEventHandlers();
|
||||
</script>
|
||||
|
||||
<T is={ref} dispose={false} {...$$restProps} bind:this={$component}>
|
||||
{#await gltf}
|
||||
<slot name="fallback" />
|
||||
{:then gltf}
|
||||
<T.Mesh geometry={gltf.nodes.Warp.geometry} material={gltf.materials.SVGMat} rotation={[Math.PI / 2, 0, 0.3]} />
|
||||
<T.Mesh geometry={gltf.nodes.Warp001.geometry} material={gltf.materials.Gradient} rotation={[Math.PI / 2, 0, 0.3]} />
|
||||
{:catch error}
|
||||
<slot name="error" {error} />
|
||||
{/await}
|
||||
{#await gltf}
|
||||
<slot name="fallback" />
|
||||
{:then gltf}
|
||||
<T.Mesh
|
||||
geometry={gltf.nodes.Warp.geometry}
|
||||
material={gltf.materials.SVGMat}
|
||||
rotation={[Math.PI / 2, 0, 0.3]}
|
||||
/>
|
||||
<T.Mesh
|
||||
geometry={gltf.nodes.Warp001.geometry}
|
||||
material={gltf.materials.Gradient}
|
||||
rotation={[Math.PI / 2, 0, 0.3]}
|
||||
/>
|
||||
{:catch error}
|
||||
<slot name="error" {error} />
|
||||
{/await}
|
||||
|
||||
<slot {ref} />
|
||||
<slot {ref} />
|
||||
</T>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue