mirror of
https://github.com/bartvdbraak/hellob.art.git
synced 2025-06-29 07:49:10 +00:00
feat: rewrite all to use shadcn-svelte
This commit is contained in:
parent
0df260c5a5
commit
b13ece80d5
162 changed files with 3268 additions and 2815 deletions
|
|
@ -1,11 +1,23 @@
|
|||
<script lang="ts">
|
||||
import { page } from '$app/stores';
|
||||
import * as PageHeader from '$lib/components/site/page-header';
|
||||
import { buttonVariants } from '$lib/components/ui/button';
|
||||
import { cn } from '$lib/utils';
|
||||
import johnTravoltaGif from '$lib/assets/john-travolta.gif';
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>hellob.art — {$page.error?.message.toLowerCase() || 'error'}</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="h-screen flex justify-center items-center">
|
||||
<h2 class="text-3xl font-bold mb-8">{$page.error?.message || 'An unknown error occurred.'}</h2>
|
||||
<div class="container relative max-w-[980px] pb-10">
|
||||
<PageHeader.Root>
|
||||
<PageHeader.Heading>{$page.error?.message}</PageHeader.Heading>
|
||||
<PageHeader.Description>This page is not available.</PageHeader.Description>
|
||||
<p class="text-sm text-orange-700 dark:text-orange-400">
|
||||
You can try going back to the home page.
|
||||
</p>
|
||||
<div class="flex w-full items-center justify-center space-x-4 py-4">
|
||||
<a href="/" class={cn(buttonVariants())}> Return Home </a>
|
||||
</div>
|
||||
</PageHeader.Root>
|
||||
<section class="flex">
|
||||
<img src={johnTravoltaGif} alt="John travolta unable to find your page" class="mx-auto w-1/2" />
|
||||
</section>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,64 +1,28 @@
|
|||
<script lang="ts">
|
||||
import { Drawer, AppShell, initializeStores } from '@skeletonlabs/skeleton';
|
||||
initializeStores();
|
||||
import '../app.postcss';
|
||||
import Footer from '../lib/components/Footer.svelte';
|
||||
import Navigation from '../lib/components/Navigation.svelte';
|
||||
import Header from '$lib/components/Header.svelte';
|
||||
|
||||
import { fade } from 'svelte/transition';
|
||||
import { dev } from '$app/environment';
|
||||
import { Metadata, SiteFooter, SiteHeader, TailwindIndicator } from '$lib/components/site';
|
||||
import '../styles/globals.css';
|
||||
import { ModeWatcher } from 'mode-watcher';
|
||||
import { fly } from 'svelte/transition';
|
||||
|
||||
export let data;
|
||||
|
||||
$: ({ pathname } = data);
|
||||
|
||||
import { dev } from '$app/environment';
|
||||
import { inject } from '@vercel/analytics';
|
||||
|
||||
inject({ mode: dev ? 'development' : 'production' });
|
||||
|
||||
import { webVitals } from '$lib/vitals';
|
||||
import { browser } from '$app/environment';
|
||||
import { page } from '$app/stores';
|
||||
import routes from '$lib/routes';
|
||||
|
||||
let analyticsId = import.meta.env.VERCEL_ANALYTICS_ID;
|
||||
|
||||
$: if (browser && analyticsId) {
|
||||
webVitals({
|
||||
path: $page.url.pathname,
|
||||
params: $page.params,
|
||||
analyticsId,
|
||||
debug: false
|
||||
});
|
||||
}
|
||||
|
||||
let progress = 0;
|
||||
|
||||
function handleScroll(event: Event) {
|
||||
const { scrollTop, scrollHeight, clientHeight } = event.currentTarget as HTMLElement;
|
||||
progress = (scrollTop / (scrollHeight - clientHeight)) * 100;
|
||||
}
|
||||
</script>
|
||||
|
||||
<Drawer width="w-full" position="top" bgDrawer="bg-black/20 backdrop-blur">
|
||||
<div class="p-5 w-full align-center">
|
||||
<Navigation {routes} />
|
||||
</div>
|
||||
</Drawer>
|
||||
<ModeWatcher />
|
||||
|
||||
<AppShell on:scroll={handleScroll}>
|
||||
<svelte:fragment slot="header">
|
||||
<Header {progress} />
|
||||
</svelte:fragment>
|
||||
<Metadata />
|
||||
|
||||
{#key pathname}
|
||||
<div in:fade={{ duration: 300, delay: 400 }} out:fade={{ duration: 300 }}>
|
||||
<slot />
|
||||
</div>
|
||||
{/key}
|
||||
|
||||
<svelte:fragment slot="pageFooter">
|
||||
<Footer />
|
||||
</svelte:fragment>
|
||||
</AppShell>
|
||||
<div class="relative flex min-h-screen flex-col" id="page">
|
||||
<SiteHeader />
|
||||
<main class="mb-4 flex-1">
|
||||
{#key data.url}
|
||||
<div in:fly={{ x: -200, duration: 200, delay: 200 }} out:fly={{ x: 200, duration: 200 }}>
|
||||
<slot />
|
||||
</div>
|
||||
{/key}
|
||||
</main>
|
||||
<SiteFooter />
|
||||
{#if dev}
|
||||
<TailwindIndicator />
|
||||
{/if}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
export const load = ({ url }) => {
|
||||
const { pathname } = url;
|
||||
|
||||
export function load({ url }) {
|
||||
return {
|
||||
pathname
|
||||
url: url.pathname
|
||||
};
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,145 +1,80 @@
|
|||
<script lang="ts">
|
||||
import { calculateAge } from '$lib/calculate-age';
|
||||
import bartvdbraakImage from '$lib/assets/bartvdbraak.jpg?enhanced';
|
||||
import catWhiskeyImage from '$lib/assets/cat-whiskey.jpg?enhanced';
|
||||
import * as PageHeader from '$lib/components/site/page-header';
|
||||
import { ImageFade } from '$lib/components/site';
|
||||
import { Icons } from '$lib/components/site/icons';
|
||||
import { buttonVariants } from '$lib/components/ui/button';
|
||||
import { siteConfig } from '$lib/config/site';
|
||||
import { cn } from '$lib/utils';
|
||||
</script>
|
||||
|
||||
<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."
|
||||
/>
|
||||
</svelte:head>
|
||||
<div class="container relative max-w-[980px] pb-10">
|
||||
<PageHeader.Root class="pb-8">
|
||||
<PageHeader.Heading>I made this for you</PageHeader.Heading>
|
||||
<PageHeader.Description>
|
||||
Featuring current work and studies in a SvelteKit-based portfolio.
|
||||
</PageHeader.Description>
|
||||
<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>
|
||||
</PageHeader.Root>
|
||||
<section class="flex">
|
||||
<div class="border-grey/15 relative border-y 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
|
||||
>, I've been diving deep into Azure and Azure DevOps. Nailed down certifications like
|
||||
AZ-104 and CKA. I'm not just pushing code, but building and managing solid, scalable
|
||||
cloud setups.
|
||||
</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="py-6 sm:py-8 lg:py-12 md:mt-8 mx-auto max-w-screen-xl px-4 md:px-8">
|
||||
<h2 class="text-3xl font-bold mb-12 z-10">Bart van der Braak</h2>
|
||||
|
||||
<div class="grid gap-8 md:grid-cols-2 lg:gap-12">
|
||||
<div class="relative">
|
||||
<div class="absolute inset-0 bg-repeat"></div>
|
||||
<div class="h-64 overflow-hidden rounded-lg shadow-lg md:h-auto sticky top-10">
|
||||
<enhanced:img
|
||||
src={bartvdbraakImage}
|
||||
alt="Bart van der Braak with a noire effect"
|
||||
class="h-full w-full object-cover profile-fit"
|
||||
/>
|
||||
<div class="flex-1">
|
||||
<ImageFade />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="text-center font-bold text-indigo-500 md:text-left">Who I am</p>
|
||||
|
||||
<h1
|
||||
class="mb-4 text-center text-2xl font-bold light:text-gray-800 sm:text-3xl md:mb-6 md:text-left"
|
||||
>
|
||||
A tech journey
|
||||
</h1>
|
||||
|
||||
<p class="mb-6 text-gray-500 sm:text-lg md:mb-8">
|
||||
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="mb-2 text-center text-xl font-semibold light:text-gray-800 sm:text-2xl md:mb-4 md:text-left"
|
||||
>
|
||||
Present day
|
||||
</h2>
|
||||
|
||||
<p class="mb-6 text-gray-500 sm:text-lg md:mb-8">
|
||||
I'm a passionate DevOps engineer based in Zaandam, Netherlands. At {calculateAge(
|
||||
'1994-10-18'
|
||||
)}
|
||||
years old, I've already gathered a wealth of experience and expertise in the world of technology.
|
||||
From programming in Python, Javascript, and Bash to utilizing cutting-edge technologies provisioned
|
||||
using Terraform, Bicep, and Kubernetes, I've honed my skills to drive efficient and innovative
|
||||
solutions.
|
||||
</p>
|
||||
<p class="mb-6 text-gray-500 sm:text-lg md:mb-8">
|
||||
At <a class="anchor" href="https://www.wearetriple.com/" target="_blank" rel="external"
|
||||
>Triple</a
|
||||
>, I've embraced the world of Azure and Azure DevOps, mastering the intricacies of cloud
|
||||
architecture and deployment. Attaining 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>
|
||||
<hr class="my-20 border-t border-gray-300" />
|
||||
|
||||
<div class="grid gap-8 md:grid-cols-2 lg:gap-12">
|
||||
<div>
|
||||
<p class="text-center font-bold text-indigo-500 md:text-left">What I am about</p>
|
||||
|
||||
<h1
|
||||
class="mb-4 text-center text-2xl font-bold light:text-gray-800 sm:text-3xl md:mb-6 md:text-left"
|
||||
>
|
||||
Cats, code and automation
|
||||
</h1>
|
||||
|
||||
<p class="mb-6 text-gray-500 sm:text-lg md: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.
|
||||
</p>
|
||||
|
||||
<h2
|
||||
class="mb-2 text-center text-xl font-semibold light:text-gray-800 sm:text-2xl md:mb-4 md:text-left"
|
||||
>
|
||||
Friendly whiskers and collaboration
|
||||
</h2>
|
||||
|
||||
<p class="mb-6 text-gray-500 sm:text-lg md:mb-8">
|
||||
When I'm not wrapped up in cooking up techie stuff, you might catch me just hanging out with
|
||||
two things I absolutely love: cats and whiskey. There's just something about chilling with
|
||||
cats, their funny antics always put a smile on my face. And as for whiskey, I'm all about
|
||||
those fancy flavors and the whole art of making it. Both of these things? They're my way of
|
||||
kicking back, recharging, and letting my creative juices flow.
|
||||
</p>
|
||||
<p class="mb-6 text-gray-500 sm:text-lg md:mb-8">
|
||||
But hey, that's not all there is to me! I'm all about going on crazy adventures with my
|
||||
tight-knit crew of pals, and my amazing girlfriend who's known me since I was a little tike.
|
||||
</p>
|
||||
<p class="mb-6 text-gray-500 sm:text-lg md:mb-8">
|
||||
I'm always eager to collaborate on exciting projects and explore new opportunities. Whether
|
||||
it's discussing data-driven ideas, cloud architecture, or just sharing cute cat pictures,
|
||||
I'd love to connect with like-minded individuals. Feel free to reach out to me through the
|
||||
provided contact information. Let's work together to create something extraordinary!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="relative">
|
||||
<div class="absolute inset-0 bg-gradient-to-tr from-blue-500 to-transparent bg-repeat"></div>
|
||||
<div class="h-64 overflow-hidden rounded-lg bg-gray-100 shadow-lg md:h-auto sticky top-10">
|
||||
<enhanced:img
|
||||
src={catWhiskeyImage}
|
||||
loading="lazy"
|
||||
alt="Poes (my cat) and a bottle of Lagavulin 8 (whiskey) with a noire effect"
|
||||
class="h-full w-full object-cover cat-fit"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.profile-fit {
|
||||
object-position: 50% 10%;
|
||||
}
|
||||
.cat-fit {
|
||||
object-position: 50% 50%;
|
||||
}
|
||||
.bg-repeat {
|
||||
background-image: radial-gradient(#4e46e589 1px, transparent 0);
|
||||
background-size: 20px 20px;
|
||||
background-position: -6px -6px;
|
||||
transform: translate(-2.5%, -2.5%);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
6
src/routes/+page.ts
Normal file
6
src/routes/+page.ts
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
/** @type {import('./$types').PageLoad} */
|
||||
export function load() {
|
||||
return {
|
||||
title: `Home`
|
||||
};
|
||||
}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
<svelte:head>
|
||||
<title>hellob.art — blog</title>
|
||||
</svelte:head>
|
||||
|
||||
<main class="container mx-auto px-4 py-8 text-left">
|
||||
<h2 class="text-3xl font-bold mb-8">Blog posts</h2>
|
||||
</main>
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
<script>
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>hellob.art —</title>
|
||||
</svelte:head>
|
||||
|
||||
<!-- <h1>{data.title}</h1>
|
||||
<div>{@html data.content}</div> -->
|
||||
|
|
@ -1,52 +1,17 @@
|
|||
<script>
|
||||
import ProjectCard from './ProjectCard.svelte';
|
||||
import projects from './projects-cards';
|
||||
<script lang="ts">
|
||||
import * as PageHeader from '$lib/components/site/page-header';
|
||||
import { Projects } from '$lib/components/site/projects';
|
||||
</script>
|
||||
|
||||
<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."
|
||||
/>
|
||||
</svelte:head>
|
||||
<div class="container relative max-w-[980px]">
|
||||
<PageHeader.Root class="pb-8">
|
||||
<PageHeader.Heading>Projects I've realized</PageHeader.Heading>
|
||||
<PageHeader.Description>
|
||||
Explore some of the projects I worked on in the past.
|
||||
</PageHeader.Description>
|
||||
</PageHeader.Root>
|
||||
|
||||
<div class="py-6 sm:py-8 lg:py-12 md:mt-8 mx-auto max-w-screen-xl px-4 md:px-8">
|
||||
<h2 class="text-3xl font-bold mb-8">Projects</h2>
|
||||
|
||||
<p class="text-lg leading-relaxed mb-8">
|
||||
Here, you'll find a curated collection of projects that I've either created or contributed to as
|
||||
a passionate DevOps engineer and developer. This portfolio encompasses a diverse range of
|
||||
endeavors, including both public and private projects. With a mix of open-source contributions
|
||||
and private collaborations from my corporate endeavors, this showcase represents my dedication
|
||||
to pushing the boundaries of innovation in various domains.
|
||||
</p>
|
||||
|
||||
<div class="w-full text-token grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{#each projects as { link, headerImage, headerSubTitle, title, description, logo, contributors, date }}
|
||||
{#if link}
|
||||
<a href={link}>
|
||||
<ProjectCard
|
||||
{headerImage}
|
||||
{headerSubTitle}
|
||||
{title}
|
||||
{description}
|
||||
{logo}
|
||||
{contributors}
|
||||
{date}
|
||||
/>
|
||||
</a>
|
||||
{:else}
|
||||
<ProjectCard
|
||||
{headerImage}
|
||||
{headerSubTitle}
|
||||
{title}
|
||||
{description}
|
||||
{logo}
|
||||
{contributors}
|
||||
{date}
|
||||
/>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
<section class="flex justify-center">
|
||||
<Projects />
|
||||
</section>
|
||||
</div>
|
||||
|
|
|
|||
6
src/routes/projects/+page.ts
Normal file
6
src/routes/projects/+page.ts
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
/** @type {import('./$types').PageLoad} */
|
||||
export function load() {
|
||||
return {
|
||||
title: `Projects`
|
||||
};
|
||||
}
|
||||
|
|
@ -1,45 +0,0 @@
|
|||
<script lang="ts">
|
||||
import { Avatar } from '@skeletonlabs/skeleton';
|
||||
|
||||
import type { Project } from './projects-cards';
|
||||
|
||||
export let headerImage: Project['headerImage'];
|
||||
export let headerSubTitle: Project['headerSubTitle'];
|
||||
export let title: Project['title'];
|
||||
export let description: Project['description'];
|
||||
export let logo: Project['logo'];
|
||||
export let contributors: Project['contributors'];
|
||||
export let date: Project['date'];
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="card border border-white/10 bg-white/5 shadow-xl duration-200 hover:bg-white/10 hover:shadow-2xl rounded overflow-hidden"
|
||||
>
|
||||
<header>
|
||||
<enhanced:img
|
||||
src={headerImage}
|
||||
class="bg-black/50 w-full aspect-[21/9] object-cover object-top"
|
||||
alt={headerSubTitle}
|
||||
loading="lazy"
|
||||
/>
|
||||
</header>
|
||||
<div class="p-4 space-y-4">
|
||||
<header class="h6 opacity-50">{headerSubTitle}</header>
|
||||
<span class="h3" data-toc-ignore>{title}</span>
|
||||
<article>
|
||||
<p>
|
||||
{description}
|
||||
</p>
|
||||
</article>
|
||||
</div>
|
||||
<hr class="opacity-50" />
|
||||
<footer class="p-4 flex justify-start items-center space-x-4">
|
||||
<div class="flex-auto flex justify-between items-center">
|
||||
<Avatar src={logo} width="w-8" />
|
||||
{#each contributors as contributor}
|
||||
<Avatar src={contributor.imageSrc} width="w-8" />
|
||||
{/each}
|
||||
<small>{new Date(date).toLocaleDateString()}</small>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
|
@ -1,71 +0,0 @@
|
|||
import keyweaveImage from '$lib/assets/projects/keyweave-terminal.jpg?enhanced';
|
||||
import keyweaveLogo from '$lib/assets/projects/keyweave-logo.png';
|
||||
import videowallImage from '$lib/assets/projects/videowall.jpg?enhanced';
|
||||
import videowallLogo from '$lib/assets/projects/videowall-logo.png';
|
||||
import ticketDashboardImage from '$lib/assets/projects/ticketdashboard.png?enhanced';
|
||||
import ticketDashboardLogo from '$lib/assets/projects/triple-logo.png';
|
||||
import zaantjeImage from '$lib/assets/projects/zaantje.png?enhanced';
|
||||
import zaantjeLogo from '$lib/assets/projects/zaantje-logo.png';
|
||||
|
||||
interface Contributor {
|
||||
name: string;
|
||||
imageSrc: string;
|
||||
}
|
||||
|
||||
export interface Project {
|
||||
link?: string;
|
||||
headerImage: string;
|
||||
headerSubTitle: string;
|
||||
title: string;
|
||||
description: string;
|
||||
logo: string;
|
||||
contributors: Contributor[];
|
||||
date: string;
|
||||
}
|
||||
|
||||
const projects: Project[] = [
|
||||
{
|
||||
link: 'https://github.com/bartvdbraak/keyweave',
|
||||
headerImage: keyweaveImage,
|
||||
headerSubTitle: 'Open Source Project',
|
||||
title: 'Keyweave',
|
||||
description: `Keyweave is an open-source tool crafted in Rust to seamlessly fetch secrets from Azure Key Vault
|
||||
and weave them into a convenient .env file.`,
|
||||
logo: keyweaveLogo,
|
||||
contributors: [],
|
||||
date: '11-05-2023'
|
||||
},
|
||||
{
|
||||
headerImage: videowallImage,
|
||||
headerSubTitle: 'Private Project',
|
||||
title: 'Videowall',
|
||||
description: `An internal application to control an impressive 6x5 monitor setup with a user-friendly
|
||||
frontend built with React and Next.js utilizing a powerful backend developed in Golang.`,
|
||||
logo: videowallLogo,
|
||||
contributors: [],
|
||||
date: '05-31-2022'
|
||||
},
|
||||
{
|
||||
headerImage: ticketDashboardImage,
|
||||
headerSubTitle: 'Private Project',
|
||||
title: 'Ticket Dashboard',
|
||||
description: `Web app that consolidates tickets from various sources into one view for easy navigation, filters, and search for efficient
|
||||
ticket management. Developed with Next.js for frontend and Golang for backend.`,
|
||||
logo: ticketDashboardLogo,
|
||||
contributors: [],
|
||||
date: '12-14-2021'
|
||||
},
|
||||
{
|
||||
link: 'https://zaantje.com',
|
||||
headerImage: zaantjeImage,
|
||||
headerSubTitle: 'Personal Project',
|
||||
title: 'Zaantje',
|
||||
description: `A SPA crafted with Nuxt.js and Vue.js, backed by Sanity CMS, taking you
|
||||
on a virtual tour of Zaandam, showcasing locations of famous music videos.`,
|
||||
logo: zaantjeLogo,
|
||||
contributors: [],
|
||||
date: '01-01-2020'
|
||||
}
|
||||
];
|
||||
|
||||
export default projects;
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
import { SITE_URL } from '$lib/site-config';
|
||||
|
||||
/** @type {import('@sveltejs/kit').RequestHandler} */
|
||||
export async function GET() {
|
||||
const pages = ['projects', 'toolbox'];
|
||||
const body = sitemap(pages);
|
||||
|
||||
return new Response(body, {
|
||||
headers: {
|
||||
'Cache-Control': `public, max-age=${86400}`, // 24 hours
|
||||
'Content-Type': 'application/xml'
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const sitemap = (pages: string[]) => `<?xml version="1.0" encoding="UTF-8" ?>
|
||||
<urlset
|
||||
xmlns="https://www.sitemaps.org/schemas/sitemap/0.9"
|
||||
xmlns:news="https://www.google.com/schemas/sitemap-news/0.9"
|
||||
xmlns:xhtml="https://www.w3.org/1999/xhtml"
|
||||
xmlns:mobile="https://www.google.com/schemas/sitemap-mobile/1.0"
|
||||
xmlns:image="https://www.google.com/schemas/sitemap-image/1.1"
|
||||
xmlns:video="https://www.google.com/schemas/sitemap-video/1.1"
|
||||
>
|
||||
<url>
|
||||
<loc>${SITE_URL}</loc>
|
||||
<changefreq>daily</changefreq>
|
||||
<priority>0.7</priority>
|
||||
</url>
|
||||
${pages
|
||||
.map(
|
||||
(page) => `
|
||||
<url>
|
||||
<loc>${SITE_URL}/${page}</loc>
|
||||
<changefreq>daily</changefreq>
|
||||
<priority>0.7</priority>
|
||||
</url>
|
||||
`
|
||||
)
|
||||
.join('')}
|
||||
</urlset>`;
|
||||
|
|
@ -1,34 +1,17 @@
|
|||
<script>
|
||||
import TimelineItem from './TimelineItem.svelte';
|
||||
import timelineItems from './timeline-items';
|
||||
<script lang="ts">
|
||||
import * as PageHeader from '$lib/components/site/page-header';
|
||||
import { Timeline } from '$lib/components/site/timeline';
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>hellob.art — timeline</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="A timeline showing a multitude of endeavors in my career, education as well as personal
|
||||
milestones."
|
||||
/>
|
||||
</svelte:head>
|
||||
<div class="container relative max-w-[980px]">
|
||||
<PageHeader.Root class="pb-8">
|
||||
<PageHeader.Heading>Experiences through time</PageHeader.Heading>
|
||||
<PageHeader.Description>
|
||||
Achievements in my education, career and personal life.
|
||||
</PageHeader.Description>
|
||||
</PageHeader.Root>
|
||||
|
||||
<div class="py-6 sm:py-8 lg:py-12 md:mt-8 mx-auto max-w-screen-xl px-4 md:px-8">
|
||||
<h2 class="text-3xl font-bold mb-8">Timeline</h2>
|
||||
|
||||
<div class="grid grid-cols-1 gap-4 md:grid-cols-3 pb-2">
|
||||
<div class="md:col-span-2">
|
||||
<p class="text-lg leading-relaxed mb-8">
|
||||
A timeline showing a multitude of endeavors in my career, education as well as personal
|
||||
milestones.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="space-y-8 relative before:absolute before:inset-0 before:ml-5 before:-translate-x-px md:before:mx-auto md:before:translate-x-0 before:h-full before:w-0.5 before:bg-gradient-to-b before:from-transparent before:via-slate-300 before:to-transparent"
|
||||
>
|
||||
{#each timelineItems as { title, logo, description, date }}
|
||||
<TimelineItem {title} {logo} {description} {date} />
|
||||
{/each}
|
||||
</div>
|
||||
<section>
|
||||
<Timeline />
|
||||
</section>
|
||||
</div>
|
||||
|
|
|
|||
6
src/routes/timeline/+page.ts
Normal file
6
src/routes/timeline/+page.ts
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
/** @type {import('./$types').PageLoad} */
|
||||
export function load() {
|
||||
return {
|
||||
title: `Timeline`
|
||||
};
|
||||
}
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
<script lang="ts">
|
||||
import type { TimelineItem } from './timeline-items';
|
||||
|
||||
export let title: TimelineItem['title'];
|
||||
export let logo: TimelineItem['logo'];
|
||||
export let description: TimelineItem['description'];
|
||||
export let date: TimelineItem['date'];
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group is-active"
|
||||
>
|
||||
<div
|
||||
class="flex items-center justify-center w-10 h-10 rounded-full border border-white bg-slate-300 gro up-[.is-active]:bg-emerald-500 text-slate-500 group-[.is-active]:text-emerald-50 shadow shrink-0 md:order-1 md:group-odd:-translate-x-1/2 md:group-even:translate-x-1/2 overflow-hidden"
|
||||
>
|
||||
<img src={logo} alt="{title} logo" loading="lazy" />
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] border border-white/10 bg-white/5 p-4 shadow-xl duration-200 hover:bg-white/10 hover:shadow-2xl rounded"
|
||||
>
|
||||
<div class="flex items-center justify-between space-x-2 mb-1">
|
||||
<div class="font-bold">{title}</div>
|
||||
<time class="font-caveat font-medium text-">{date}</time>
|
||||
</div>
|
||||
<div class="text-slate-500">
|
||||
{description}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,69 +0,0 @@
|
|||
import linuxFoundationLogo from '$lib/assets/timeline/linuxfoundation.svg';
|
||||
import microsoftLogo from '$lib/assets/timeline/microsoft.svg';
|
||||
import tripleLogo from '$lib/assets/timeline/triple.svg';
|
||||
import urbanDealLogo from '$lib/assets/timeline/urbandeal.svg';
|
||||
import diastaseLogo from '$lib/assets/timeline/diastase.svg';
|
||||
import vuLogo from '$lib/assets/timeline/vu.svg';
|
||||
import bijlmerweideLogo from '$lib/assets/timeline/bijlmerweide.svg';
|
||||
|
||||
export interface TimelineItem {
|
||||
title: string;
|
||||
logo: string;
|
||||
link?: string;
|
||||
image?: string;
|
||||
description: string;
|
||||
date: string;
|
||||
}
|
||||
|
||||
const timelineItems: TimelineItem[] = [
|
||||
{
|
||||
title: 'The Linux Foundation',
|
||||
logo: linuxFoundationLogo,
|
||||
description: 'Certified Kubernetes Administrator',
|
||||
date: '2022'
|
||||
},
|
||||
{
|
||||
title: 'Microsoft Certified',
|
||||
logo: microsoftLogo,
|
||||
description: 'Administrator Associate (AZ-104)',
|
||||
date: '2021'
|
||||
},
|
||||
{
|
||||
title: 'Triple',
|
||||
logo: tripleLogo,
|
||||
description: 'DevOps Engineer',
|
||||
date: '2021'
|
||||
},
|
||||
{
|
||||
title: 'Urban Deal',
|
||||
logo: urbanDealLogo,
|
||||
description: 'Full Stack Developer',
|
||||
date: '2019'
|
||||
},
|
||||
{
|
||||
title: 'Diastase Netwerk',
|
||||
logo: diastaseLogo,
|
||||
description: 'Volunteer Web Administrator',
|
||||
date: '2019'
|
||||
},
|
||||
{
|
||||
title: 'Vrije Universiteit Amsterdam',
|
||||
logo: vuLogo,
|
||||
description: 'Master Information Sciences',
|
||||
date: '2018'
|
||||
},
|
||||
{
|
||||
title: 'Kinderboerderij Bijlmerweide',
|
||||
logo: bijlmerweideLogo,
|
||||
description: 'Volunteer Web Administrator',
|
||||
date: '2016'
|
||||
},
|
||||
{
|
||||
title: 'Vrije Universiteit Amsterdam',
|
||||
logo: vuLogo,
|
||||
description: 'Bachelor Information Sciences',
|
||||
date: '2014'
|
||||
}
|
||||
];
|
||||
|
||||
export default timelineItems;
|
||||
|
|
@ -1,45 +0,0 @@
|
|||
<script lang="ts">
|
||||
import { Canvas } from '@threlte/core';
|
||||
import Scene from './Scene.svelte';
|
||||
import ToolCard from './ToolCard.svelte';
|
||||
import tools from './tools-cards';
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>hellob.art — toolbox</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="Explore essential DevOps tools like Kubernetes, Terraform, Warp, and version control platforms such as GitHub."
|
||||
/>
|
||||
</svelte:head>
|
||||
|
||||
<div class="py-6 sm:py-8 lg:py-12 md:mt-8 mx-auto max-w-screen-xl px-4 md:px-8">
|
||||
<h2 class="text-3xl font-bold mb-8">Toolbox</h2>
|
||||
|
||||
<div class="grid grid-cols-1 gap-4 md:grid-cols-3 pb-2">
|
||||
<div class="md:col-span-2">
|
||||
<p class="text-lg leading-relaxed mb-8">
|
||||
Welcome to the Toolbox, a comprehensive collection of the tools, applications, and software
|
||||
that fuel my daily work as a Developer and DevOps Engineer. From code creation to continuous
|
||||
integration, these are the technologies that enable me to build, test, and deploy with
|
||||
efficiency and precision. Explore the list below to understand my tech stack and maybe even
|
||||
discover something new for your own toolkit!
|
||||
</p>
|
||||
</div>
|
||||
<div class="md:col-span-1 flex justify-end">
|
||||
<div class="h-60 md:h-full w-full">
|
||||
<Canvas>
|
||||
<Scene />
|
||||
</Canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul class="columns-1 md:columns-2 lg:columns-3 gap-6 w-full mb-12">
|
||||
{#each tools as { name, title, description, logo, toolUrl, enhanced }}
|
||||
<li>
|
||||
<ToolCard {name} {title} {description} {logo} {toolUrl} {enhanced} />
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -1,97 +0,0 @@
|
|||
<script lang="ts">
|
||||
import { T, useFrame } from '@threlte/core';
|
||||
import { Float } from '@threlte/extras';
|
||||
import Kubernetes from './models/Kubernetes.svelte';
|
||||
|
||||
import { interactivity } from '@threlte/extras';
|
||||
import { spring } from 'svelte/motion';
|
||||
import GithubFluid from './models/GithubFluid.svelte';
|
||||
import Warp from './models/Warp.svelte';
|
||||
import TerraformFlat from './models/TerraformFlat.svelte';
|
||||
|
||||
interactivity();
|
||||
|
||||
const githubScale = spring(1);
|
||||
let githubRotation = 0;
|
||||
useFrame((state, delta) => {
|
||||
githubRotation += 0.5 * delta;
|
||||
});
|
||||
|
||||
const kubernetesScale = spring(1);
|
||||
let kubernetesRotation = 30;
|
||||
useFrame((state, delta) => {
|
||||
kubernetesRotation += 0.3 * delta;
|
||||
});
|
||||
|
||||
const warpScale = spring(1);
|
||||
let warpRotation = 10;
|
||||
useFrame((state, delta) => {
|
||||
warpRotation += 0.2 * delta;
|
||||
});
|
||||
|
||||
const terraformScale = spring(1);
|
||||
let terraformRotation = 90;
|
||||
useFrame((state, delta) => {
|
||||
terraformRotation += 0.6 * delta;
|
||||
});
|
||||
</script>
|
||||
|
||||
<T.PerspectiveCamera
|
||||
makeDefault
|
||||
position={[10, 5, 8]}
|
||||
on:create={({ ref }) => {
|
||||
ref.lookAt(0, 1, 0);
|
||||
}}
|
||||
/>
|
||||
<T.DirectionalLight intensity={0.5} position.x={2} position.y={3} />
|
||||
<T.AmbientLight intensity={0.9} />
|
||||
<Float floatIntensity={2} floatingRange={[0, 1]}>
|
||||
<Kubernetes
|
||||
rotation.y={kubernetesRotation}
|
||||
position.y={-4}
|
||||
position.z={-2}
|
||||
position.x={-4}
|
||||
scale={$kubernetesScale}
|
||||
on:pointerenter={() => kubernetesScale.set(1.3)}
|
||||
on:pointerleave={() => kubernetesScale.set(1)}
|
||||
/>
|
||||
</Float>
|
||||
|
||||
<Float floatIntensity={2} floatingRange={[0, 0.5]}>
|
||||
<GithubFluid
|
||||
rotation.y={githubRotation}
|
||||
position.y={0}
|
||||
position.z={-4}
|
||||
position.x={3}
|
||||
scale={$githubScale}
|
||||
on:pointerenter={() => githubScale.set(1.3)}
|
||||
on:pointerleave={() => githubScale.set(1)}
|
||||
/>
|
||||
</Float>
|
||||
|
||||
<Float floatIntensity={2} floatingRange={[0.2, 0.3]}>
|
||||
<Warp
|
||||
rotation.y={warpRotation}
|
||||
position.y={0}
|
||||
position.z={2}
|
||||
position.x={-8}
|
||||
scale={$warpScale}
|
||||
on:pointerenter={() => warpScale.set(1.3)}
|
||||
on:pointerleave={() => warpScale.set(1)}
|
||||
/>
|
||||
</Float>
|
||||
|
||||
<Float floatIntensity={2} floatingRange={[0.2, 0.3]}>
|
||||
<TerraformFlat
|
||||
rotation.y={terraformRotation}
|
||||
position.y={-2}
|
||||
position.z={-4}
|
||||
position.x={-6}
|
||||
scale={$terraformScale}
|
||||
on:pointerenter={() => terraformScale.set(1.3)}
|
||||
on:pointerleave={() => terraformScale.set(1)}
|
||||
/>
|
||||
</Float>
|
||||
|
||||
<!-- <T.AxesHelper></T.AxesHelper>
|
||||
<T.GridHelper></T.GridHelper> -->
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
<script lang="ts">
|
||||
import type { Tool } from './tools-cards';
|
||||
|
||||
export let name: Tool['name'];
|
||||
export let title: Tool['title'];
|
||||
export let description: Tool['description'];
|
||||
export let logo: Tool['logo'];
|
||||
export let toolUrl: Tool['toolUrl'];
|
||||
export let enhanced: Tool['enhanced'];
|
||||
</script>
|
||||
|
||||
<a
|
||||
href={toolUrl}
|
||||
target="_blank"
|
||||
rel="external"
|
||||
class="mb-6 inline-block h-full w-full rounded-md border border-white/10 bg-white/5 p-4 shadow-xl duration-200 hover:bg-white/10 hover:shadow-2xl"
|
||||
>
|
||||
<div class="flex flex-col gap-6">
|
||||
<div class="flex gap-6">
|
||||
{#if enhanced}
|
||||
<enhanced:img
|
||||
src={logo}
|
||||
alt={name + ' logo'}
|
||||
class="h-12 w-12 rounded-sm object-contain"
|
||||
loading="lazy"
|
||||
/>
|
||||
{:else}
|
||||
<img
|
||||
src={logo}
|
||||
alt={name + ' logo'}
|
||||
class="h-12 w-12 rounded-sm object-contain"
|
||||
loading="lazy"
|
||||
/>
|
||||
{/if}
|
||||
<div class="grow">
|
||||
<h4 class="mb-0">{name}</h4>
|
||||
<p class="text-faded text-sm font-normal">{title}</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-faded mt-0 text-base font-normal">{description}</p>
|
||||
</div>
|
||||
</a>
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
<!--
|
||||
Auto-generated by: https://github.com/threlte/threlte/tree/main/packages/gltf
|
||||
Command: npx @threlte/gltf@1.0.0-next.13 ./src/lib/assets/vectors/github.glb --transform
|
||||
-->
|
||||
|
||||
<script>
|
||||
import { Group } from 'three';
|
||||
import { T, forwardEventHandlers } from '@threlte/core';
|
||||
import { useGltf } from '@threlte/extras';
|
||||
|
||||
export const ref = new Group();
|
||||
|
||||
const gltf = useGltf('/models/github-transformed.glb', { useDraco: true });
|
||||
|
||||
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}
|
||||
|
||||
<slot {ref} />
|
||||
</T>
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
<!--
|
||||
Auto-generated by: https://github.com/threlte/threlte/tree/main/packages/gltf
|
||||
Command: npx @threlte/gltf@1.0.0-next.13 ./static/models/github-fluid.glb --transform
|
||||
-->
|
||||
|
||||
<script>
|
||||
import { Group } from 'three';
|
||||
import { T, forwardEventHandlers } from '@threlte/core';
|
||||
import { useGltf } from '@threlte/extras';
|
||||
|
||||
export const ref = new Group();
|
||||
const initialScale = 30;
|
||||
|
||||
const gltf = useGltf('/models/github-fluid-transformed.glb', { useDraco: true });
|
||||
|
||||
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.circle4.geometry}
|
||||
material={gltf.materials['SVGMat.010']}
|
||||
position={[0.0 * initialScale, 0.0 * initialScale, 0 * initialScale]}
|
||||
rotation={[Math.PI / 2, 0, 0]}
|
||||
scale={initialScale}
|
||||
/>
|
||||
<T.Mesh
|
||||
geometry={gltf.nodes.path4.geometry}
|
||||
material={gltf.materials['SVGMat.012']}
|
||||
position={[-0.017 * initialScale, -0.02 * initialScale, 0 * initialScale]}
|
||||
rotation={[Math.PI / 2, 0, 0]}
|
||||
scale={initialScale}
|
||||
/>
|
||||
{:catch error}
|
||||
<slot name="error" {error} />
|
||||
{/await}
|
||||
|
||||
<slot {ref} />
|
||||
</T>
|
||||
|
||||
<!-- position={[0.06 * initialScale, 0.06 * initialScale, 0 * initialScale]}
|
||||
|
||||
position={[0.045 * initialScale, 0.04 * initialScale, 0 * initialScale]} -->
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
<!--
|
||||
Auto-generated by: https://github.com/threlte/threlte/tree/main/packages/gltf
|
||||
Command: npx @threlte/gltf@1.0.0-next.13 ./static/models/kubernetes.glb --transform
|
||||
-->
|
||||
|
||||
<script lang="ts">
|
||||
import { Group } from 'three';
|
||||
import { T, forwardEventHandlers } from '@threlte/core';
|
||||
import { useGltf } from '@threlte/extras';
|
||||
|
||||
export const ref = new Group();
|
||||
const initialScale = 250;
|
||||
const offsetOrigin: [number, number, number] = [-0.0091, -0.0086, 0.0007];
|
||||
const multipliedOffset: [number, number, number] = [
|
||||
offsetOrigin[0] * initialScale,
|
||||
offsetOrigin[1] * initialScale,
|
||||
offsetOrigin[2] * initialScale
|
||||
];
|
||||
|
||||
const gltf = useGltf('/models/kubernetes-transformed.glb', { useDraco: true });
|
||||
|
||||
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]}
|
||||
position={multipliedOffset}
|
||||
scale={initialScale}
|
||||
/>
|
||||
<T.Mesh
|
||||
geometry={gltf.nodes.Curve001.geometry}
|
||||
material={gltf.materials['SVGMat.007']}
|
||||
rotation={[Math.PI / 2, 0, 0]}
|
||||
position={multipliedOffset}
|
||||
scale={initialScale}
|
||||
/>
|
||||
{:catch error}
|
||||
<slot name="error" {error} />
|
||||
{/await}
|
||||
|
||||
<slot {ref} />
|
||||
</T>
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
<!--
|
||||
Auto-generated by: https://github.com/threlte/threlte/tree/main/packages/gltf
|
||||
Command: npx @threlte/gltf@1.0.0-next.13 ./static/models/terraform-flat.glb --transform
|
||||
-->
|
||||
|
||||
<script lang="ts">
|
||||
import { Group } from 'three';
|
||||
import { T, forwardEventHandlers } from '@threlte/core';
|
||||
import { useGltf } from '@threlte/extras';
|
||||
|
||||
export const ref = new Group();
|
||||
const initialScale = 30;
|
||||
const offsetOrigin: [number, number, number] = [-0.1, 0, -0.034];
|
||||
const multipliedOffset: [number, number, number] = [
|
||||
offsetOrigin[0] * initialScale,
|
||||
offsetOrigin[1] * initialScale,
|
||||
offsetOrigin[2] * initialScale
|
||||
];
|
||||
|
||||
const gltf = useGltf('/models/terraform-flat-transformed.glb', { useDraco: true });
|
||||
|
||||
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}
|
||||
position={multipliedOffset}
|
||||
scale={initialScale}
|
||||
/>
|
||||
<T.Mesh
|
||||
geometry={gltf.nodes.Curve_2.geometry}
|
||||
material={gltf.materials['SVGMat.001']}
|
||||
position={multipliedOffset}
|
||||
scale={initialScale}
|
||||
/>
|
||||
</T.Group>
|
||||
{:catch error}
|
||||
<slot name="error" {error} />
|
||||
{/await}
|
||||
|
||||
<slot {ref} />
|
||||
</T>
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
<!--
|
||||
Auto-generated by: https://github.com/threlte/threlte/tree/main/packages/gltf
|
||||
Command: npx @threlte/gltf@1.0.0-next.13 ./static/models/warp.glb --transform
|
||||
-->
|
||||
|
||||
<script lang="ts">
|
||||
import { Group } from 'three';
|
||||
import { T, forwardEventHandlers } from '@threlte/core';
|
||||
import { useGltf } from '@threlte/extras';
|
||||
|
||||
export const ref = new Group();
|
||||
const initialScale = 20;
|
||||
const offsetOrigin: [number, number, number] = [-0.1, 0, -0.034];
|
||||
const multipliedOffset: [number, number, number] = [
|
||||
offsetOrigin[0] * initialScale,
|
||||
offsetOrigin[1] * initialScale,
|
||||
offsetOrigin[2] * initialScale
|
||||
];
|
||||
|
||||
const gltf = useGltf('/models/warp-transformed.glb', { useDraco: true });
|
||||
|
||||
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]}
|
||||
position={multipliedOffset}
|
||||
scale={initialScale}
|
||||
/>
|
||||
<T.Mesh
|
||||
geometry={gltf.nodes.Warp001.geometry}
|
||||
material={gltf.materials.Gradient}
|
||||
rotation={[Math.PI / 2, 0, 0.3]}
|
||||
position={multipliedOffset}
|
||||
scale={initialScale}
|
||||
/>
|
||||
{:catch error}
|
||||
<slot name="error" {error} />
|
||||
{/await}
|
||||
|
||||
<slot {ref} />
|
||||
</T>
|
||||
|
|
@ -1,544 +0,0 @@
|
|||
import gitHubLogo from '$lib/assets/tools/github.svg';
|
||||
import overleafLogo from '$lib/assets/tools/overleaf.svg';
|
||||
import argoCDLogo from '$lib/assets/tools/argocd.svg';
|
||||
import studio3TLogo from '$lib/assets/tools/studio3t.svg';
|
||||
import warpLogo from '$lib/assets/tools/warp.svg';
|
||||
import k9sLogo from '$lib/assets/tools/k9s.png?enhanced';
|
||||
import figmaLogo from '$lib/assets/tools/figma.svg';
|
||||
import azureCLILogo from '$lib/assets/tools/azure-cli.svg';
|
||||
import keystoreExplorer from '$lib/assets/tools/keystore-exporer.png?enhanced';
|
||||
import togglTrackLogo from '$lib/assets/tools/toggl-track.svg';
|
||||
import helmLogo from '$lib/assets/tools/helm.svg';
|
||||
import royalTSXLogo from '$lib/assets/tools/royal-tsx.png?enhanced';
|
||||
import poetryLogo from '$lib/assets/tools/poetry.svg';
|
||||
import maccyLogo from '$lib/assets/tools/maccy.png?enhanced';
|
||||
import balenaEtcherLogo from '$lib/assets/tools/balena-etcher.svg';
|
||||
import sendGridLogo from '$lib/assets/tools/sendgrid.svg';
|
||||
import insomniaLogo from '$lib/assets/tools/insomnia.svg';
|
||||
import blenderLogo from '$lib/assets/tools/blender.svg';
|
||||
import bitwardenLogo from '$lib/assets/tools/bitwarden.svg';
|
||||
import azureDataStudioLogo from '$lib/assets/tools/azure-data-studio.png?enhanced';
|
||||
import wiresharkLogo from '$lib/assets/tools/wireshark.png?enhanced';
|
||||
import rectangleLogo from '$lib/assets/tools/rectangle.png?enhanced';
|
||||
import pyCharmLogo from '$lib/assets/tools/pycharm.svg';
|
||||
import dockerLogo from '$lib/assets/tools/docker.webp?enhanced';
|
||||
import cyberduckLogo from '$lib/assets/tools/cyberduck.png?enhanced';
|
||||
import mullvadVPNLogo from '$lib/assets/tools/mullvad-vpn.svg';
|
||||
import jqLogo from '$lib/assets/tools/jq.svg';
|
||||
import akamaiLogo from '$lib/assets/tools/akamai.svg';
|
||||
import cloudFlareLogo from '$lib/assets/tools/cloudflare.svg';
|
||||
import visualStudioCodeLogo from '$lib/assets/tools/visual-studio-code.svg';
|
||||
import opsGenieLogo from '$lib/assets/tools/opsgenie.svg';
|
||||
import vimLogo from '$lib/assets/tools/vim.svg';
|
||||
import notionLogo from '$lib/assets/tools/notion.svg';
|
||||
import nvmLogo from '$lib/assets/tools/nvm.svg';
|
||||
import gIMPLogo from '$lib/assets/tools/gimp.svg';
|
||||
import azureStorageExplorerLogo from '$lib/assets/tools/azure-storage-explorer.svg';
|
||||
import meldLogo from '$lib/assets/tools/meld.svg';
|
||||
import karabinerElementsLogo from '$lib/assets/tools/karabiner-elements.png?enhanced';
|
||||
import kustomizeLogo from '$lib/assets/tools/kustomize.svg';
|
||||
import inkScapeLogo from '$lib/assets/tools/inkscape.svg';
|
||||
import oBSLogo from '$lib/assets/tools/obs.svg';
|
||||
import wireGuardLogo from '$lib/assets/tools/wireguard.svg';
|
||||
import switchHostsLogo from '$lib/assets/tools/switchhosts.svg';
|
||||
import slackLogo from '$lib/assets/tools/slack.svg';
|
||||
import nmapLogo from '$lib/assets/tools/nmap.svg';
|
||||
import dBeaverLogo from '$lib/assets/tools/dbeaver.svg';
|
||||
import openTofuLogo from '$lib/assets/tools/opentofu.svg';
|
||||
import gitLensLogo from '$lib/assets/tools/gitlens.png?enhanced';
|
||||
|
||||
export {
|
||||
gitHubLogo,
|
||||
overleafLogo,
|
||||
argoCDLogo,
|
||||
studio3TLogo,
|
||||
warpLogo,
|
||||
k9sLogo,
|
||||
figmaLogo,
|
||||
azureCLILogo,
|
||||
keystoreExplorer,
|
||||
togglTrackLogo,
|
||||
helmLogo,
|
||||
royalTSXLogo,
|
||||
poetryLogo,
|
||||
maccyLogo,
|
||||
balenaEtcherLogo,
|
||||
sendGridLogo,
|
||||
insomniaLogo,
|
||||
blenderLogo,
|
||||
bitwardenLogo,
|
||||
azureDataStudioLogo,
|
||||
rectangleLogo,
|
||||
pyCharmLogo,
|
||||
dockerLogo,
|
||||
cyberduckLogo,
|
||||
mullvadVPNLogo,
|
||||
jqLogo,
|
||||
akamaiLogo,
|
||||
cloudFlareLogo,
|
||||
visualStudioCodeLogo,
|
||||
opsGenieLogo,
|
||||
vimLogo,
|
||||
notionLogo,
|
||||
nvmLogo,
|
||||
gIMPLogo,
|
||||
azureStorageExplorerLogo,
|
||||
meldLogo,
|
||||
karabinerElementsLogo,
|
||||
kustomizeLogo,
|
||||
inkScapeLogo,
|
||||
oBSLogo,
|
||||
wireGuardLogo,
|
||||
switchHostsLogo,
|
||||
wiresharkLogo,
|
||||
slackLogo,
|
||||
nmapLogo,
|
||||
dBeaverLogo,
|
||||
openTofuLogo,
|
||||
gitLensLogo
|
||||
};
|
||||
|
||||
export interface Tool {
|
||||
name: string;
|
||||
title: string;
|
||||
description: string;
|
||||
logo: string;
|
||||
toolUrl: string;
|
||||
enhanced: boolean;
|
||||
}
|
||||
|
||||
const tools: Tool[] = [
|
||||
{
|
||||
name: 'GitHub',
|
||||
title: 'A complete developer platform',
|
||||
description:
|
||||
'A platform for hosting and collaborating on code, providing version control, issue tracking, and code review.',
|
||||
logo: gitHubLogo,
|
||||
toolUrl: 'https://github.com',
|
||||
enhanced: false
|
||||
},
|
||||
{
|
||||
name: 'Overleaf',
|
||||
title: 'Online LaTeX Editor',
|
||||
description:
|
||||
'Overleaf provides a collaborative environment for writing and publishing LaTeX documents. I use it for crafting scientific papers, technical documents, and more.',
|
||||
logo: overleafLogo,
|
||||
toolUrl: 'https://www.overleaf.com',
|
||||
enhanced: false
|
||||
},
|
||||
{
|
||||
name: 'ArgoCD',
|
||||
title: 'Declarative GitOps Continuous Delivery',
|
||||
description:
|
||||
'ArgoCD is vital for deploying applications in a declarative way, using Git as the source of truth. It helps me to manage and automate deployments across different environments.',
|
||||
logo: argoCDLogo,
|
||||
toolUrl: 'https://argoproj.github.io/cd/',
|
||||
enhanced: false
|
||||
},
|
||||
{
|
||||
name: 'Studio 3T',
|
||||
title: 'MongoDB Development Tool',
|
||||
description:
|
||||
'Studio 3T simplifies working with MongoDB, providing useful features for managing databases, collections, and queries.',
|
||||
logo: studio3TLogo,
|
||||
toolUrl: 'https://www.studio3t.com',
|
||||
enhanced: false
|
||||
},
|
||||
{
|
||||
name: 'Warp',
|
||||
title: 'Fast and Secure VPN',
|
||||
description:
|
||||
'Warp is a modern, Rust-based terminal with AI built in so you and your team can build great software, faster.',
|
||||
logo: warpLogo,
|
||||
toolUrl: 'https://warp.dev',
|
||||
enhanced: false
|
||||
},
|
||||
{
|
||||
name: 'k9s',
|
||||
title: 'Kubernetes Terminal',
|
||||
description:
|
||||
'k9s is a Kubernetes terminal that provides an easy interface to interact with clusters, aiding in managing and observing Kubernetes resources.',
|
||||
logo: k9sLogo,
|
||||
toolUrl: 'https://k9scli.io',
|
||||
enhanced: true
|
||||
},
|
||||
{
|
||||
name: 'Figma',
|
||||
title: 'Collaborative Design Tool',
|
||||
description:
|
||||
'Figma is a collaborative design tool that helps in creating, testing, and sharing user interfaces for applications and websites.',
|
||||
logo: figmaLogo,
|
||||
toolUrl: 'https://www.figma.com',
|
||||
enhanced: false
|
||||
},
|
||||
{
|
||||
name: 'Azure CLI',
|
||||
title: 'Command-line Interface for Azure',
|
||||
description:
|
||||
'Azure CLI is a command-line interface for managing Azure resources, enabling quick administration of my Azure-hosted applications and services.',
|
||||
logo: azureCLILogo,
|
||||
toolUrl: 'https://docs.microsoft.com/cli/azure',
|
||||
enhanced: false
|
||||
},
|
||||
{
|
||||
name: 'KeyStore Explorer',
|
||||
title: 'GUI-based Key & Certificate Management Tool',
|
||||
description:
|
||||
'KeyStore Explorer is a GUI-based tool to manage cryptographic keys and certificates, helping in development and testing phases.',
|
||||
logo: keystoreExplorer,
|
||||
toolUrl: 'https://keystore-explorer.org',
|
||||
enhanced: true
|
||||
},
|
||||
{
|
||||
name: 'Toggl Track',
|
||||
title: 'Time Tracking Tool',
|
||||
description:
|
||||
'Toggl Track is a time tracking tool that assists in managing my daily tasks and tracking productivity.',
|
||||
logo: togglTrackLogo,
|
||||
toolUrl: 'https://www.toggl.com/track',
|
||||
enhanced: false
|
||||
},
|
||||
{
|
||||
name: 'Helm',
|
||||
title: 'Kubernetes Package Manager',
|
||||
description:
|
||||
'Helm is a Kubernetes package manager that simplifies the deployment and management of applications on Kubernetes clusters.',
|
||||
logo: helmLogo,
|
||||
toolUrl: 'https://helm.sh',
|
||||
enhanced: false
|
||||
},
|
||||
{
|
||||
name: 'Royal TSX',
|
||||
title: 'Connection Management Tool',
|
||||
description:
|
||||
'Royal TSX is a connection management tool that provides easy and secure access to remote systems.',
|
||||
logo: royalTSXLogo,
|
||||
toolUrl: 'https://www.royalapps.com/ts/mac/features',
|
||||
enhanced: true
|
||||
},
|
||||
{
|
||||
name: 'Poetry',
|
||||
title: 'Python Dependency Management Tool',
|
||||
description:
|
||||
'Poetry is a Python dependency management tool that simplifies package management and project environment setup.',
|
||||
logo: poetryLogo,
|
||||
toolUrl: 'https://python-poetry.org',
|
||||
enhanced: false
|
||||
},
|
||||
{
|
||||
name: 'Maccy',
|
||||
title: 'Clipboard Manager for macOS',
|
||||
description:
|
||||
'Maccy is a lightweight clipboard manager for macOS that improves productivity by keeping a history of the clipboard.',
|
||||
logo: maccyLogo,
|
||||
toolUrl: 'https://maccy.app',
|
||||
enhanced: true
|
||||
},
|
||||
{
|
||||
name: 'Balena Etcher',
|
||||
title: 'USB and SD Card Writing Tool',
|
||||
description:
|
||||
'Balena Etcher is a USB and SD card writing tool used to flash OS images onto memory cards or drives.',
|
||||
logo: balenaEtcherLogo,
|
||||
toolUrl: 'https://www.balena.io/etcher',
|
||||
enhanced: false
|
||||
},
|
||||
{
|
||||
name: 'SendGrid',
|
||||
title: 'Email Delivery Service',
|
||||
description:
|
||||
'SendGrid is an email delivery service that facilitates the sending of transactional or marketing emails.',
|
||||
logo: sendGridLogo,
|
||||
toolUrl: 'https://sendgrid.com',
|
||||
enhanced: false
|
||||
},
|
||||
{
|
||||
name: 'Insomnia',
|
||||
title: 'REST Client',
|
||||
description:
|
||||
'Insomnia is a powerful REST client that aids in testing, debugging, and interacting with HTTP APIs.',
|
||||
logo: insomniaLogo,
|
||||
toolUrl: 'https://insomnia.rest',
|
||||
enhanced: false
|
||||
},
|
||||
{
|
||||
name: 'Blender',
|
||||
title: '3D Modeling and Animation Software',
|
||||
description:
|
||||
'Blender is a 3D modeling and animation software used for creating and rendering 3D graphics and animations.',
|
||||
logo: blenderLogo,
|
||||
toolUrl: 'https://www.blender.org',
|
||||
enhanced: false
|
||||
},
|
||||
{
|
||||
name: 'Bitwarden',
|
||||
title: 'Open-source Password Manager',
|
||||
description:
|
||||
'Bitwarden is an open-source password manager that securely stores and manages passwords across devices.',
|
||||
logo: bitwardenLogo,
|
||||
toolUrl: 'https://bitwarden.com',
|
||||
enhanced: false
|
||||
},
|
||||
{
|
||||
name: 'Azure Data Studio',
|
||||
title: 'Cross-platform Database Tool',
|
||||
description:
|
||||
'Azure Data Studio is a cross-platform database tool that provides a modern editor experience for managing data across multiple sources.',
|
||||
logo: azureDataStudioLogo,
|
||||
toolUrl: 'https://azure.microsoft.com/products/data-studio',
|
||||
enhanced: true
|
||||
},
|
||||
{
|
||||
name: 'Wireshark',
|
||||
title: 'Network Protocol Analyzer',
|
||||
description:
|
||||
'Wireshark is a network protocol analyzer that helps me inspect and troubleshoot network traffic, providing in-depth insights.',
|
||||
logo: wiresharkLogo,
|
||||
toolUrl: 'https://www.wireshark.org',
|
||||
enhanced: true
|
||||
},
|
||||
{
|
||||
name: 'Rectangle',
|
||||
title: 'Window Management Tool for macOS',
|
||||
description:
|
||||
'Rectangle is a window management tool for macOS that provides keyboard shortcuts for resizing and organizing windows efficiently.',
|
||||
logo: rectangleLogo,
|
||||
toolUrl: 'https://rectangleapp.com/',
|
||||
enhanced: true
|
||||
},
|
||||
{
|
||||
name: 'PyCharm',
|
||||
title: 'Integrated Development Environment for Python',
|
||||
description:
|
||||
'An Integrated Development Environment (IDE) for Python, providing intelligent code assistance and debugging tools.',
|
||||
logo: pyCharmLogo,
|
||||
toolUrl: 'https://www.jetbrains.com/pycharm/',
|
||||
enhanced: false
|
||||
},
|
||||
{
|
||||
name: 'Docker',
|
||||
title: 'Containerization Platform',
|
||||
description:
|
||||
'A platform that enables the development, shipment, and running of applications inside containers, ensuring consistency across environments.',
|
||||
logo: dockerLogo,
|
||||
toolUrl: 'https://www.docker.com',
|
||||
enhanced: true
|
||||
},
|
||||
{
|
||||
name: 'Cyberduck',
|
||||
title: 'Server and Cloud Storage Browser',
|
||||
description:
|
||||
'A libre server and cloud storage browser for Mac and Windows, supporting various protocols and cloud providers.',
|
||||
logo: cyberduckLogo,
|
||||
toolUrl: 'https://cyberduck.io',
|
||||
enhanced: true
|
||||
},
|
||||
{
|
||||
name: 'Mullvad VPN',
|
||||
title: 'VPN Service',
|
||||
description:
|
||||
'A VPN service that prioritizes privacy and anonymity, keeping my online activities secure and private.',
|
||||
logo: mullvadVPNLogo,
|
||||
toolUrl: 'https://mullvad.net',
|
||||
enhanced: false
|
||||
},
|
||||
{
|
||||
name: 'jq',
|
||||
title: 'Command-line JSON Processor',
|
||||
description:
|
||||
'A lightweight and flexible command-line JSON processor, essential for parsing and manipulating JSON data in the shell.',
|
||||
logo: jqLogo,
|
||||
toolUrl: 'https://stedolan.github.io/jq/',
|
||||
enhanced: false
|
||||
},
|
||||
{
|
||||
name: 'Akamai',
|
||||
title: 'Global Content Delivery Network',
|
||||
description:
|
||||
'A global content delivery network, cybersecurity, and cloud service company, providing web and internet security services.',
|
||||
logo: akamaiLogo,
|
||||
toolUrl: 'https://www.akamai.com',
|
||||
enhanced: false
|
||||
},
|
||||
{
|
||||
name: 'CloudFlare',
|
||||
title: 'Content Delivery Network and Security Services',
|
||||
description:
|
||||
'A company that offers CDN services, DDoS mitigation, and distributed domain name server services to optimize and secure online content.',
|
||||
logo: cloudFlareLogo,
|
||||
toolUrl: 'https://www.cloudflare.com',
|
||||
enhanced: false
|
||||
},
|
||||
{
|
||||
name: 'Visual Studio Code',
|
||||
title: 'Code Editor',
|
||||
description:
|
||||
'A free, open-source code editor that offers powerful tools for code development, debugging, and extensions for various programming languages.',
|
||||
logo: visualStudioCodeLogo,
|
||||
toolUrl: 'https://code.visualstudio.com',
|
||||
enhanced: false
|
||||
},
|
||||
{
|
||||
name: 'OpsGenie',
|
||||
title: 'Alert and On-Call Management Platform',
|
||||
description:
|
||||
'An alert and on-call management platform that ensures critical alerts are never missed, improving incident response times.',
|
||||
logo: opsGenieLogo,
|
||||
toolUrl: 'https://www.atlassian.com/software/opsgenie',
|
||||
enhanced: false
|
||||
},
|
||||
{
|
||||
name: 'vim',
|
||||
title: 'Text Editor',
|
||||
description:
|
||||
'A highly configurable and efficient text editor that I use for editing code and text files from the command line.',
|
||||
logo: vimLogo,
|
||||
toolUrl: 'https://www.vim.org',
|
||||
enhanced: false
|
||||
},
|
||||
{
|
||||
name: 'Notion',
|
||||
title: 'Collaboration Platform',
|
||||
description:
|
||||
'A collaboration platform that combines note-taking, task management, and workflow management.',
|
||||
logo: notionLogo,
|
||||
toolUrl: 'https://www.notion.so',
|
||||
enhanced: false
|
||||
},
|
||||
{
|
||||
name: 'nvm',
|
||||
title: 'Node.js Version Manager',
|
||||
description:
|
||||
'A Node.js version manager that simplifies the installation and management of multiple Node.js versions.',
|
||||
logo: nvmLogo,
|
||||
toolUrl: 'https://github.com/nvm-sh/nvm',
|
||||
enhanced: false
|
||||
},
|
||||
{
|
||||
name: 'GIMP',
|
||||
title: 'Open-source Graphics Editor',
|
||||
description:
|
||||
'An open-source raster graphics editor used for tasks such as photo retouching, image editing, and composition.',
|
||||
logo: gIMPLogo,
|
||||
toolUrl: 'https://www.gimp.org',
|
||||
enhanced: false
|
||||
},
|
||||
{
|
||||
name: 'Azure Storage Explorer',
|
||||
title: 'Azure Storage Management Application',
|
||||
description: 'A standalone app that facilitates the management of Azure storage data.',
|
||||
logo: azureStorageExplorerLogo,
|
||||
toolUrl: 'https://azure.microsoft.com/products/storage/storage-explorer',
|
||||
enhanced: false
|
||||
},
|
||||
{
|
||||
name: 'Meld',
|
||||
title: 'Visual Diff and Merge Tool',
|
||||
description:
|
||||
'A visual diff and merge tool that provides clear comparisons between files and directories.',
|
||||
logo: meldLogo,
|
||||
toolUrl: 'https://meldmerge.org',
|
||||
enhanced: false
|
||||
},
|
||||
{
|
||||
name: 'Karabiner Elements',
|
||||
title: 'Keyboard Customizer for macOS',
|
||||
description:
|
||||
'A powerful keyboard customizer for macOS, providing multiple customization options for the keyboard.',
|
||||
logo: karabinerElementsLogo,
|
||||
toolUrl: 'https://karabiner-elements.pqrs.org',
|
||||
enhanced: true
|
||||
},
|
||||
{
|
||||
name: 'Kustomize',
|
||||
title: 'Kubernetes Configuration Customizer',
|
||||
description:
|
||||
'A template-free way to customize application configuration that simplifies the customization of Kubernetes YAML configuration files.',
|
||||
logo: kustomizeLogo,
|
||||
toolUrl: 'https://kustomize.io',
|
||||
enhanced: false
|
||||
},
|
||||
{
|
||||
name: 'InkScape',
|
||||
title: 'Open-source Vector Graphics Editor',
|
||||
description:
|
||||
'An open-source vector graphics editor, enabling the creation and editing of vector images.',
|
||||
logo: inkScapeLogo,
|
||||
toolUrl: 'https://inkscape.org',
|
||||
enhanced: false
|
||||
},
|
||||
{
|
||||
name: 'OBS',
|
||||
title: 'Open Broadcaster Software',
|
||||
description:
|
||||
'Open Broadcaster Software, a free and open-source tool for video recording and live streaming.',
|
||||
logo: oBSLogo,
|
||||
toolUrl: 'https://obsproject.com',
|
||||
enhanced: false
|
||||
},
|
||||
{
|
||||
name: 'WireGuard',
|
||||
title: 'Modern VPN Protocol',
|
||||
description:
|
||||
'A modern VPN protocol that aims for simplicity and speed, facilitating secure connections.',
|
||||
logo: wireGuardLogo,
|
||||
toolUrl: 'https://www.wireguard.com',
|
||||
enhanced: false
|
||||
},
|
||||
{
|
||||
name: 'SwitchHosts',
|
||||
title: 'Hosts File Manager',
|
||||
description:
|
||||
'An App for managing and switching hosts files, allowing me to easily switch between different environments.',
|
||||
logo: switchHostsLogo,
|
||||
toolUrl: 'https://switchhosts.vercel.app/',
|
||||
enhanced: false
|
||||
},
|
||||
{
|
||||
name: 'Slack',
|
||||
title: 'Collaboration Hub',
|
||||
description:
|
||||
'A collaboration hub that connects my work with the people I work with through channels, where communication and files are placed in one place.',
|
||||
logo: slackLogo,
|
||||
toolUrl: 'https://slack.com',
|
||||
enhanced: false
|
||||
},
|
||||
{
|
||||
name: 'nmap',
|
||||
title: 'Network Security Scanner',
|
||||
description:
|
||||
'A security scanner used to discover hosts and services on a computer network, providing a detailed view of the network.',
|
||||
logo: nmapLogo,
|
||||
toolUrl: 'https://nmap.org',
|
||||
enhanced: false
|
||||
},
|
||||
{
|
||||
name: 'DBeaver',
|
||||
title: 'Universal Database Tool',
|
||||
description:
|
||||
'A universal database tool for developers and database administrators that supports all popular databases.',
|
||||
logo: dBeaverLogo,
|
||||
toolUrl: 'https://dbeaver.io',
|
||||
enhanced: false
|
||||
},
|
||||
{
|
||||
name: 'OpenTofu',
|
||||
title: 'Infrastructure as Code Tool',
|
||||
description:
|
||||
'An open-source infrastructure as code tool that enables the automated creation, modification, and versioning of complex infrastructures.',
|
||||
logo: openTofuLogo,
|
||||
toolUrl: 'https://opentofu.org',
|
||||
enhanced: false
|
||||
},
|
||||
{
|
||||
name: 'GitLens',
|
||||
title: 'Git Extension for Visual Studio Code',
|
||||
description:
|
||||
'An extension for Visual Studio Code that supercharges the Git capabilities, providing advanced blame annotations, code lens, and more.',
|
||||
logo: gitLensLogo,
|
||||
toolUrl: 'https://gitlens.amod.io',
|
||||
enhanced: true
|
||||
}
|
||||
];
|
||||
|
||||
export default tools;
|
||||
17
src/routes/tools/+page.svelte
Normal file
17
src/routes/tools/+page.svelte
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
<script lang="ts">
|
||||
import * as PageHeader from '$lib/components/site/page-header';
|
||||
import { Tools } from '$lib/components/site/tools';
|
||||
</script>
|
||||
|
||||
<div class="container relative max-w-[980px]">
|
||||
<PageHeader.Root class="pb-8">
|
||||
<PageHeader.Heading>Inside my toolbox</PageHeader.Heading>
|
||||
<PageHeader.Description>
|
||||
Tools, applications, and software that fuels my development and operations work.
|
||||
</PageHeader.Description>
|
||||
</PageHeader.Root>
|
||||
|
||||
<section class="flex justify-center">
|
||||
<Tools />
|
||||
</section>
|
||||
</div>
|
||||
6
src/routes/tools/+page.ts
Normal file
6
src/routes/tools/+page.ts
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
/** @type {import('./$types').PageLoad} */
|
||||
export function load() {
|
||||
return {
|
||||
title: `Tools`
|
||||
};
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue