bartvdbraak/hellob.art
1
0
Fork 0
mirror of https://github.com/bartvdbraak/hellob.art.git synced 2025-04-26 17:11:21 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: linting and formatting changes

Browse source
This commit is contained in:
Bart van der Braak 2023-08-02 01:37:54 +02:00
parent 3df46b240b
commit 3807145c1d
27 changed files with 262 additions and 189 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
.github/dependabot.yml vendored
View file

@ -1,8 +1,8 @@
version: 2 version: 2
updates: updates:
- package-ecosystem: "github-actions" - package-ecosystem: 'github-actions'
directory: "/" directory: '/'
schedule: schedule:
interval: "weekly" interval: 'weekly'
reviewers: reviewers:
- "bartvdbraak" - 'bartvdbraak'

6
.github/renovate.json vendored
View file

@ -1,5 +1,5 @@
{ {
"$schema": "https://docs.renovatebot.com/renovate-schema.json", "$schema": "https://docs.renovatebot.com/renovate-schema.json",
"extends": ["config:base"], "extends": ["config:base"],
"reviewers": ["bartvdbraak"] "reviewers": ["bartvdbraak"]
} }

2
.github/workflows/unlighthouse-report.yaml vendored
View file

@ -1,6 +1,6 @@
name: Unlighthouse report name: Unlighthouse report
on: [ pull_request ] on: [pull_request]
permissions: permissions:
pull-requests: write pull-requests: write

5
postcss.config.cjs
View file

@ -3,10 +3,7 @@ const tailwindcss = require('tailwindcss');
const autoprefixer = require('autoprefixer'); const autoprefixer = require('autoprefixer');
const config = { const config = {
plugins: [ plugins: [tailwindcss(), autoprefixer]
tailwindcss(),
autoprefixer
]
}; };
module.exports = config; module.exports = config;

34
src/app.html
View file

@ -1,20 +1,20 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.ico" /> <link rel="icon" href="%sveltekit.assets%/favicon.ico" />
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
<link rel="apple-touch-icon" sizes="180x180" href="%sveltekit.assets%/apple-touch-icon.png"> <link rel="apple-touch-icon" sizes="180x180" href="%sveltekit.assets%/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="%sveltekit.assets%/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="32x32" href="%sveltekit.assets%/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="%sveltekit.assets%/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="16x16" href="%sveltekit.assets%/favicon-16x16.png" />
<link rel="manifest" href="%sveltekit.assets%/site.webmanifest"> <link rel="manifest" href="%sveltekit.assets%/site.webmanifest" />
<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> <title></title>
%sveltekit.head% %sveltekit.head%
</head> </head>
<body data-sveltekit-preload-data="hover"> <body data-sveltekit-preload-data="hover">
<div style="display: contents" class="h-full overflow-hidden">%sveltekit.body%</div> <div style="display: contents" class="h-full overflow-hidden">%sveltekit.body%</div>
</body> </body>
</html> </html>

3
src/app.postcss
View file

@ -1,6 +1,6 @@
html, html,
body { body {
@apply h-full overflow-hidden @apply h-full overflow-hidden;
} }
.dark .logo-text-gradient-dark { .dark .logo-text-gradient-dark {
@ -18,4 +18,3 @@ body {
/* Color Stops */ /* Color Stops */
@apply logo-text-gradient-light logo-text-gradient-dark; @apply logo-text-gradient-light logo-text-gradient-dark;
} }

16
src/lib/calculate-age.ts
View file

@ -1,13 +1,13 @@
export function calculateAge(birthdate: string): number { export function calculateAge(birthdate: string): number {
const birthDate = new Date(birthdate); const birthDate = new Date(birthdate);
const currentDate = new Date(); const currentDate = new Date();
let age = currentDate.getFullYear() - birthDate.getFullYear(); let age = currentDate.getFullYear() - birthDate.getFullYear();
const monthDiff = currentDate.getMonth() - birthDate.getMonth(); const monthDiff = currentDate.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && currentDate.getDate() < birthDate.getDate())) { if (monthDiff < 0 || (monthDiff === 0 && currentDate.getDate() < birthDate.getDate())) {
age--; age--;
} }
return age; return age;
} }

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

@ -14,7 +14,8 @@
<ul> <ul>
{#each routes as route} {#each routes as route}
<li class="pb-2"> <li class="pb-2">
<a class="{classesActive(route.url)}" href={route.url} on:click={drawerClose}>{route.label}</a> <a class={classesActive(route.url)} href={route.url} on:click={drawerClose}>{route.label}</a
>
</li> </li>
{/each} {/each}
</ul> </ul>

6
src/lib/components/ProjectCard.svelte
View file

@ -16,7 +16,11 @@
<a class="card bg-initial card-hover overflow-hidden" href={link}> <a class="card bg-initial card-hover overflow-hidden" href={link}>
<header> <header>
<img src={headerImage} class="bg-black/50 w-full aspect-[21/9] object-cover object-top" alt="Post" /> <img
src={headerImage}
class="bg-black/50 w-full aspect-[21/9] object-cover object-top"
alt="Post"
/>
</header> </header>
<div class="p-4 space-y-4"> <div class="p-4 space-y-4">
<header class="h6">{headerSubTitle}</header> <header class="h6">{headerSubTitle}</header>

16
src/lib/components/icons/GitHub.svelte
View file

@ -1 +1,15 @@
<svg class="inline-svg" stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg> <svg
class="inline-svg"
stroke="currentColor"
fill="none"
stroke-width="2"
viewBox="0 0 24 24"
stroke-linecap="round"
stroke-linejoin="round"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
><path
d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"
/></svg
>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 517 B

After

Width:  |  Height:  |  Size: 529 B

19
src/lib/components/icons/Hamburger.svelte
View file

@ -1 +1,18 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-menu"><line x1="4" x2="20" y1="12" y2="12"/><line x1="4" x2="20" y1="6" y2="6"/><line x1="4" x2="20" y1="18" y2="18"/></svg> <svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-menu"
><line x1="4" x2="20" y1="12" y2="12" /><line x1="4" x2="20" y1="6" y2="6" /><line
x1="4"
x2="20"
y1="18"
y2="18"
/></svg
>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 326 B

After

Width:  |  Height:  |  Size: 352 B

13
src/lib/components/icons/LinkedIn.svelte
View file

@ -1 +1,12 @@
<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 1024 1024" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zM349.3 793.7H230.6V411.9h118.7v381.8zm-59.3-434a68.8 68.8 0 1 1 68.8-68.8c-.1 38-30.9 68.8-68.8 68.8zm503.7 434H675.1V608c0-44.3-.8-101.2-61.7-101.2-61.7 0-71.2 48.2-71.2 98v188.9H423.7V411.9h113.8v52.2h1.6c15.8-30 54.5-61.7 112.3-61.7 120.2 0 142.3 79.1 142.3 181.9v209.4z"></path></svg> <svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 1024 1024"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
><path
d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zM349.3 793.7H230.6V411.9h118.7v381.8zm-59.3-434a68.8 68.8 0 1 1 68.8-68.8c-.1 38-30.9 68.8-68.8 68.8zm503.7 434H675.1V608c0-44.3-.8-101.2-61.7-101.2-61.7 0-71.2 48.2-71.2 98v188.9H423.7V411.9h113.8v52.2h1.6c15.8-30 54.5-61.7 112.3-61.7 120.2 0 142.3 79.1 142.3 181.9v209.4z"
/></svg
>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 555 B

After

Width:  |  Height:  |  Size: 564 B

15
src/lib/components/icons/Svelte.svelte
View file

@ -1 +1,14 @@
<svg class="inline-svg" stroke="currentColor" fill="currentColor" stroke-width="0" role="img" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><title></title><path d="M10.354 21.125a4.44 4.44 0 0 1-4.765-1.767 4.109 4.109 0 0 1-.703-3.107 3.898 3.898 0 0 1 .134-.522l.105-.321.287.21a7.21 7.21 0 0 0 2.186 1.092l.208.063-.02.208a1.253 1.253 0 0 0 .226.83 1.337 1.337 0 0 0 1.435.533 1.231 1.231 0 0 0 .343-.15l5.59-3.562a1.164 1.164 0 0 0 .524-.778 1.242 1.242 0 0 0-.211-.937 1.338 1.338 0 0 0-1.435-.533 1.23 1.23 0 0 0-.343.15l-2.133 1.36a4.078 4.078 0 0 1-1.135.499 4.44 4.44 0 0 1-4.765-1.766 4.108 4.108 0 0 1-.702-3.108 3.855 3.855 0 0 1 1.742-2.582l5.589-3.563a4.072 4.072 0 0 1 1.135-.499 4.44 4.44 0 0 1 4.765 1.767 4.109 4.109 0 0 1 .703 3.107 3.943 3.943 0 0 1-.134.522l-.105.321-.286-.21a7.204 7.204 0 0 0-2.187-1.093l-.208-.063.02-.207a1.255 1.255 0 0 0-.226-.831 1.337 1.337 0 0 0-1.435-.532 1.231 1.231 0 0 0-.343.15L8.62 9.368a1.162 1.162 0 0 0-.524.778 1.24 1.24 0 0 0 .211.937 1.338 1.338 0 0 0 1.435.533 1.235 1.235 0 0 0 .344-.151l2.132-1.36a4.067 4.067 0 0 1 1.135-.498 4.44 4.44 0 0 1 4.765 1.766 4.108 4.108 0 0 1 .702 3.108 3.857 3.857 0 0 1-1.742 2.583l-5.589 3.562a4.072 4.072 0 0 1-1.135.499m10.358-17.95C18.484-.015 14.082-.96 10.9 1.068L5.31 4.63a6.412 6.412 0 0 0-2.896 4.295 6.753 6.753 0 0 0 .666 4.336 6.43 6.43 0 0 0-.96 2.396 6.833 6.833 0 0 0 1.168 5.167c2.229 3.19 6.63 4.135 9.812 2.108l5.59-3.562a6.41 6.41 0 0 0 2.896-4.295 6.756 6.756 0 0 0-.665-4.336 6.429 6.429 0 0 0 .958-2.396 6.831 6.831 0 0 0-1.167-5.168Z"></path></svg> <svg
class="inline-svg"
stroke="currentColor"
fill="currentColor"
stroke-width="0"
role="img"
viewBox="0 0 24 24"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
><title /><path
d="M10.354 21.125a4.44 4.44 0 0 1-4.765-1.767 4.109 4.109 0 0 1-.703-3.107 3.898 3.898 0 0 1 .134-.522l.105-.321.287.21a7.21 7.21 0 0 0 2.186 1.092l.208.063-.02.208a1.253 1.253 0 0 0 .226.83 1.337 1.337 0 0 0 1.435.533 1.231 1.231 0 0 0 .343-.15l5.59-3.562a1.164 1.164 0 0 0 .524-.778 1.242 1.242 0 0 0-.211-.937 1.338 1.338 0 0 0-1.435-.533 1.23 1.23 0 0 0-.343.15l-2.133 1.36a4.078 4.078 0 0 1-1.135.499 4.44 4.44 0 0 1-4.765-1.766 4.108 4.108 0 0 1-.702-3.108 3.855 3.855 0 0 1 1.742-2.582l5.589-3.563a4.072 4.072 0 0 1 1.135-.499 4.44 4.44 0 0 1 4.765 1.767 4.109 4.109 0 0 1 .703 3.107 3.943 3.943 0 0 1-.134.522l-.105.321-.286-.21a7.204 7.204 0 0 0-2.187-1.093l-.208-.063.02-.207a1.255 1.255 0 0 0-.226-.831 1.337 1.337 0 0 0-1.435-.532 1.231 1.231 0 0 0-.343.15L8.62 9.368a1.162 1.162 0 0 0-.524.778 1.24 1.24 0 0 0 .211.937 1.338 1.338 0 0 0 1.435.533 1.235 1.235 0 0 0 .344-.151l2.132-1.36a4.067 4.067 0 0 1 1.135-.498 4.44 4.44 0 0 1 4.765 1.766 4.108 4.108 0 0 1 .702 3.108 3.857 3.857 0 0 1-1.742 2.583l-5.589 3.562a4.072 4.072 0 0 1-1.135.499m10.358-17.95C18.484-.015 14.082-.96 10.9 1.068L5.31 4.63a6.412 6.412 0 0 0-2.896 4.295 6.753 6.753 0 0 0 .666 4.336 6.43 6.43 0 0 0-.96 2.396 6.833 6.833 0 0 0 1.168 5.167c2.229 3.19 6.63 4.135 9.812 2.108l5.59-3.562a6.41 6.41 0 0 0 2.896-4.295 6.756 6.756 0 0 0-.665-4.336 6.429 6.429 0 0 0 .958-2.396 6.831 6.831 0 0 0-1.167-5.168Z"
/></svg
>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

14
src/lib/components/icons/Vercel.svelte
View file

@ -1 +1,13 @@
<svg class="inline-svg" stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M3 19h18l-9 -15z"></path></svg> <svg
class="inline-svg"
stroke="currentColor"
fill="none"
stroke-width="2"
viewBox="0 0 24 24"
stroke-linecap="round"
stroke-linejoin="round"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M3 19h18l-9 -15z" /></svg
>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 299 B

After

Width:  |  Height:  |  Size: 303 B

17
src/routes/+layout.svelte
View file

@ -2,7 +2,7 @@
import '@skeletonlabs/skeleton/themes/theme-crimson.css'; import '@skeletonlabs/skeleton/themes/theme-crimson.css';
import '@skeletonlabs/skeleton/styles/skeleton.css'; import '@skeletonlabs/skeleton/styles/skeleton.css';
import '../app.postcss'; 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 Footer from '../lib/components/Footer.svelte';
import Navigation from '../lib/components/Navigation.svelte'; import Navigation from '../lib/components/Navigation.svelte';
import Header from '$lib/components/Header.svelte'; import Header from '$lib/components/Header.svelte';
@ -10,26 +10,23 @@
let routes = [ let routes = [
{ url: '/', label: 'Home' }, { url: '/', label: 'Home' },
{ url: '/projects', label: 'Projects' }, { url: '/projects', label: 'Projects' },
{ url: '/tools', label: 'Tools' }, { url: '/tools', label: 'Tools' }
// { url: '/blog', label: 'Blog' } // { url: '/blog', label: 'Blog' }
]; ];
let progress = 0; let progress = 0;
function handleScroll(event: Event) { function handleScroll(event: Event) {
const { scrollTop, scrollHeight, clientHeight } = event.currentTarget as HTMLElement; const { scrollTop, scrollHeight, clientHeight } = event.currentTarget as HTMLElement;
progress = (scrollTop / (scrollHeight - clientHeight)) * 100; progress = (scrollTop / (scrollHeight - clientHeight)) * 100;
} }
</script> </script>
<Drawer width="w-[280px] md:w-[480px]"> <Drawer width="w-[280px] md:w-[480px]">
<Navigation {routes} /> <Navigation {routes} />
</Drawer> </Drawer>
<AppShell <AppShell slotSidebarLeft="w-0 md:w-40" on:scroll={handleScroll}>
slotSidebarLeft="w-0 md:w-40"
on:scroll={handleScroll}
>
<svelte:fragment slot="header"> <svelte:fragment slot="header">
<Header {progress} /> <Header {progress} />
</svelte:fragment> </svelte:fragment>

21
src/routes/+page.svelte
View file

@ -5,7 +5,10 @@
<svelte:head> <svelte:head>
<title>hellob.art &mdash; home</title> <title>hellob.art &mdash; 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> </svelte:head>
<main class="container mx-auto px-4 py-8 text-left"> <main class="container mx-auto px-4 py-8 text-left">
@ -38,7 +41,11 @@
</p> </p>
</div> </div>
<div class="md:col-span-1 flex justify-end"> <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>
</div> </div>
@ -46,11 +53,11 @@
<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 automation. My passion for streamlining workflows led me to create internal tooling using APIs,
APIs, boosting productivity for myself and my colleagues. Outside of work, I enjoy taking on boosting productivity for myself and my colleagues. Outside of work, I enjoy taking on side
side projects that push my boundaries, expanding my skill set, and exploring new projects that push my boundaries, expanding my skill set, and exploring new technologies. I
technologies. I strongly believe that innovation and continuous learning are key drivers of strongly believe that innovation and continuous learning are key drivers of success in the
success in the ever-evolving tech landscape. 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>

4
src/routes/blog/[slug]/+page.svelte
View file

@ -1,6 +1,6 @@
<script> <script>
/** @type {import('./$types').PageData} */ /** @type {import('./$types').PageData} */
export let data; export let data;
</script> </script>
<svelte:head> <svelte:head>

5
src/routes/projects/+page.svelte
View file

@ -49,7 +49,10 @@
<svelte:head> <svelte:head>
<title>hellob.art &mdash; projects</title> <title>hellob.art &mdash; 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> </svelte:head>
<main class="container mx-auto px-4 py-8 text-left"> <main class="container mx-auto px-4 py-8 text-left">

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

@ -2,7 +2,7 @@
<script lang="ts"> <script lang="ts">
import { Canvas } from '@threlte/core'; import { Canvas } from '@threlte/core';
import { T } 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 Github from './models/Github.svelte';
import TerraformFlat from './models/TerraformFlat.svelte'; import TerraformFlat from './models/TerraformFlat.svelte';
import Kubernetes from './models/Kubernetes.svelte'; import Kubernetes from './models/Kubernetes.svelte';
@ -11,7 +11,10 @@
<svelte:head> <svelte:head>
<title>hellob.art &mdash; tools</title> <title>hellob.art &mdash; 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> </svelte:head>
<main class="container mx-auto px-4 py-8 text-left"> <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.DirectionalLight intensity={0.5} position.x={5} position.y={3} />
<T.AmbientLight intensity={0.2} /> <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} /> <ContactShadows scale={10} blur={2} far={2.5} opacity={0.5} />
<Float floatIntensity={1} floatingRange={[0, 1]}> <Float floatIntensity={1} floatingRange={[0, 1]}>

28
src/routes/tools/models/Github.svelte
View file

@ -4,25 +4,25 @@ Command: npx @threlte/gltf@1.0.0-next.13 ./src/lib/assets/vectors/github.glb --t
--> -->
<script> <script>
import { Group } from 'three' import { Group } from 'three';
import { T, forwardEventHandlers } from '@threlte/core' import { T, forwardEventHandlers } from '@threlte/core';
import { useGltf } from '@threlte/extras' 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> </script>
<T is={ref} dispose={false} {...$$restProps} bind:this={$component}> <T is={ref} dispose={false} {...$$restProps} bind:this={$component}>
{#await gltf} {#await gltf}
<slot name="fallback" /> <slot name="fallback" />
{:then gltf} {:then gltf}
<T.Mesh geometry={gltf.nodes.Github_Mesh.geometry} material={gltf.materials['SVGMat.001']} /> <T.Mesh geometry={gltf.nodes.Github_Mesh.geometry} material={gltf.materials['SVGMat.001']} />
{:catch error} {:catch error}
<slot name="error" {error} /> <slot name="error" {error} />
{/await} {/await}
<slot {ref} /> <slot {ref} />
</T> </T>

46
src/routes/tools/models/Kubernetes.svelte
View file

@ -4,34 +4,34 @@ Command: npx @threlte/gltf@1.0.0-next.13 ./static/models/kubernetes.glb --transf
--> -->
<script> <script>
import { Group } from 'three' import { Group } from 'three';
import { T, forwardEventHandlers } from '@threlte/core' import { T, forwardEventHandlers } from '@threlte/core';
import { useGltf } from '@threlte/extras' 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> </script>
<T is={ref} dispose={false} {...$$restProps} bind:this={$component}> <T is={ref} dispose={false} {...$$restProps} bind:this={$component}>
{#await gltf} {#await gltf}
<slot name="fallback" /> <slot name="fallback" />
{:then gltf} {:then gltf}
<T.Mesh <T.Mesh
geometry={gltf.nodes.Curve.geometry} geometry={gltf.nodes.Curve.geometry}
material={gltf.materials['SVGMat.006']} material={gltf.materials['SVGMat.006']}
rotation={[Math.PI / 2, 0, 0.9]} rotation={[Math.PI / 2, 0, 0.9]}
/> />
<T.Mesh <T.Mesh
geometry={gltf.nodes.Curve001.geometry} geometry={gltf.nodes.Curve001.geometry}
material={gltf.materials['SVGMat.007']} material={gltf.materials['SVGMat.007']}
rotation={[Math.PI / 2, 0, 0.9]} rotation={[Math.PI / 2, 0, 0.9]}
/> />
{:catch error} {:catch error}
<slot name="error" {error} /> <slot name="error" {error} />
{/await} {/await}
<slot {ref} /> <slot {ref} />
</T> </T>

34
src/routes/tools/models/TerraformFlat.svelte
View file

@ -4,28 +4,28 @@ Command: npx @threlte/gltf@1.0.0-next.13 ./static/models/terraform-flat.glb --tr
--> -->
<script> <script>
import { Group } from 'three' import { Group } from 'three';
import { T, forwardEventHandlers } from '@threlte/core' import { T, forwardEventHandlers } from '@threlte/core';
import { useGltf } from '@threlte/extras' 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> </script>
<T is={ref} dispose={false} {...$$restProps} bind:this={$component}> <T is={ref} dispose={false} {...$$restProps} bind:this={$component}>
{#await gltf} {#await gltf}
<slot name="fallback" /> <slot name="fallback" />
{:then gltf} {:then gltf}
<T.Group rotation={[Math.PI / 2, 0, 5]}> <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_1.geometry} material={gltf.materials.SVGMat} />
<T.Mesh geometry={gltf.nodes.Curve_2.geometry} material={gltf.materials['SVGMat.001']} /> <T.Mesh geometry={gltf.nodes.Curve_2.geometry} material={gltf.materials['SVGMat.001']} />
</T.Group> </T.Group>
{:catch error} {:catch error}
<slot name="error" {error} /> <slot name="error" {error} />
{/await} {/await}
<slot {ref} /> <slot {ref} />
</T> </T>

38
src/routes/tools/models/Warp.svelte
View file

@ -4,26 +4,34 @@ Command: npx @threlte/gltf@1.0.0-next.13 ./static/models/warp.glb --transform
--> -->
<script> <script>
import { Group } from 'three' import { Group } from 'three';
import { T, forwardEventHandlers } from '@threlte/core' import { T, forwardEventHandlers } from '@threlte/core';
import { useGltf } from '@threlte/extras' 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> </script>
<T is={ref} dispose={false} {...$$restProps} bind:this={$component}> <T is={ref} dispose={false} {...$$restProps} bind:this={$component}>
{#await gltf} {#await gltf}
<slot name="fallback" /> <slot name="fallback" />
{:then gltf} {:then gltf}
<T.Mesh geometry={gltf.nodes.Warp.geometry} material={gltf.materials.SVGMat} rotation={[Math.PI / 2, 0, 0.3]} /> <T.Mesh
<T.Mesh geometry={gltf.nodes.Warp001.geometry} material={gltf.materials.Gradient} rotation={[Math.PI / 2, 0, 0.3]} /> geometry={gltf.nodes.Warp.geometry}
{:catch error} material={gltf.materials.SVGMat}
<slot name="error" {error} /> rotation={[Math.PI / 2, 0, 0.3]}
{/await} />
<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> </T>

34
static/site.webmanifest
View file

@ -1,19 +1,19 @@
{ {
"name": "", "name": "",
"short_name": "", "short_name": "",
"icons": [ "icons": [
{ {
"src": "/android-chrome-192x192.png", "src": "/android-chrome-192x192.png",
"sizes": "192x192", "sizes": "192x192",
"type": "image/png" "type": "image/png"
}, },
{ {
"src": "/android-chrome-512x512.png", "src": "/android-chrome-512x512.png",
"sizes": "512x512", "sizes": "512x512",
"type": "image/png" "type": "image/png"
} }
], ],
"theme_color": "#ffffff", "theme_color": "#ffffff",
"background_color": "#ffffff", "background_color": "#ffffff",
"display": "standalone" "display": "standalone"
} }

28
tailwind.config.cjs
View file

@ -4,10 +4,7 @@ module.exports = {
darkMode: 'class', darkMode: 'class',
content: [ content: [
'./src/**/*.{html,js,svelte,ts}', './src/**/*.{html,js,svelte,ts}',
require('path').join(require.resolve( require('path').join(require.resolve('@skeletonlabs/skeleton'), '../**/*.{html,js,svelte,ts}')
'@skeletonlabs/skeleton'),
'../**/*.{html,js,svelte,ts}'
)
], ],
theme: { theme: {
extend: { extend: {
@ -15,22 +12,21 @@ module.exports = {
'logo-blue-start': { 'logo-blue-start': {
light: '#314755', light: '#314755',
DEFAULT: '#314755', DEFAULT: '#314755',
dark: '#7196AD', dark: '#7196AD'
}, },
'logo-blue-stop': { 'logo-blue-stop': {
light: '#26a0da', light: '#26a0da',
DEFAULT: '#26a0da', DEFAULT: '#26a0da',
dark: '#7CC6E9', dark: '#7CC6E9'
}, }
}, },
dark: { // <-- Add this section for dark mode classes dark: {
// <-- Add this section for dark mode classes
'logo-text-gradient-dark': { 'logo-text-gradient-dark': {
'@apply': 'from-logo-blue-start-dark to-logo-blue-stop-dark', '@apply': 'from-logo-blue-start-dark to-logo-blue-stop-dark'
}, }
}, }
}, }
}, },
plugins: [ plugins: [...require('@skeletonlabs/skeleton/tailwind/skeleton.cjs')()]
...require('@skeletonlabs/skeleton/tailwind/skeleton.cjs')() };
]
}

6
vite.config.ts
View file

@ -3,7 +3,7 @@ import { defineConfig } from 'vite';
export default defineConfig({ export default defineConfig({
plugins: [sveltekit()], plugins: [sveltekit()],
ssr: { ssr: {
noExternal: ['three'] noExternal: ['three']
} }
}); });