mirror of
https://github.com/bartvdbraak/hellob.art.git
synced 2025-04-26 17:11:21 +00:00
feat: revamped toolbox page
This commit is contained in:
parent
f032e4b935
commit
e2b5f1078b
10 changed files with 657 additions and 108 deletions
47
src/routes/toolbox/+page.svelte
Normal file
47
src/routes/toolbox/+page.svelte
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
<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>
|
||||
|
||||
<main class="container mx-auto px-4 py-8 text-left">
|
||||
<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">
|
||||
<Canvas>
|
||||
<Scene />
|
||||
</Canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns-1 md:columns-2 lg:columns-3 gap-6 w-full mb-12">
|
||||
{#each tools as tool}
|
||||
<ToolCard
|
||||
name={tool.name}
|
||||
title={tool.title}
|
||||
description={tool.description}
|
||||
logo={tool.logo}
|
||||
toolUrl={tool.toolUrl}
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
</main>
|
||||
37
src/routes/toolbox/Scene.svelte
Normal file
37
src/routes/toolbox/Scene.svelte
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
<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';
|
||||
|
||||
interactivity();
|
||||
const scale = spring(250 * 1);
|
||||
|
||||
let rotation = 0;
|
||||
useFrame((state, delta) => {
|
||||
rotation += delta;
|
||||
});
|
||||
</script>
|
||||
|
||||
<T.PerspectiveCamera
|
||||
makeDefault
|
||||
position={[10, 10, 10]}
|
||||
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={rotation}
|
||||
position.y={-1}
|
||||
position.z={-2}
|
||||
position.x={-1}
|
||||
scale={$scale}
|
||||
on:pointerenter={() => scale.set(250 * 1.5)}
|
||||
on:pointerleave={() => scale.set(250 * 1)}
|
||||
/>
|
||||
</Float>
|
||||
25
src/routes/toolbox/ToolCard.svelte
Normal file
25
src/routes/toolbox/ToolCard.svelte
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
<script lang="ts">
|
||||
export let name: string;
|
||||
export let title: string;
|
||||
export let description: string;
|
||||
export let logo: string;
|
||||
export let toolUrl: string;
|
||||
</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">
|
||||
<img src={logo} alt={name + ' logo'} class="h-12 w-12 rounded-sm object-contain" />
|
||||
<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>
|
||||
|
|
@ -3,7 +3,7 @@ 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>
|
||||
<script lang="ts">
|
||||
import { Group } from 'three';
|
||||
import { T, forwardEventHandlers } from '@threlte/core';
|
||||
import { useGltf } from '@threlte/extras';
|
||||
|
|
@ -22,12 +22,12 @@ Command: npx @threlte/gltf@1.0.0-next.13 ./static/models/kubernetes.glb --transf
|
|||
<T.Mesh
|
||||
geometry={gltf.nodes.Curve.geometry}
|
||||
material={gltf.materials['SVGMat.006']}
|
||||
rotation={[Math.PI / 2, 0, 0.9]}
|
||||
rotation={[Math.PI / 2, 0, 0]}
|
||||
/>
|
||||
<T.Mesh
|
||||
geometry={gltf.nodes.Curve001.geometry}
|
||||
material={gltf.materials['SVGMat.007']}
|
||||
rotation={[Math.PI / 2, 0, 0.9]}
|
||||
rotation={[Math.PI / 2, 0, 0]}
|
||||
/>
|
||||
{:catch error}
|
||||
<slot name="error" {error} />
|
||||
99
src/routes/toolbox/tools-assets.ts
Normal file
99
src/routes/toolbox/tools-assets.ts
Normal file
|
|
@ -0,0 +1,99 @@
|
|||
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';
|
||||
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';
|
||||
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';
|
||||
import PoetryLogo from '$lib/assets/tools/poetry.svg';
|
||||
import MaccyLogo from '$lib/assets/tools/maccy.png';
|
||||
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';
|
||||
import WiresharkLogo from '$lib/assets/tools/wireshark.png';
|
||||
import RectangleLogo from '$lib/assets/tools/rectangle.png';
|
||||
import PyCharmLogo from '$lib/assets/tools/pycharm.svg';
|
||||
import DockerLogo from '$lib/assets/tools/docker.webp';
|
||||
import CyberduckLogo from '$lib/assets/tools/cyberduck.png';
|
||||
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';
|
||||
import KustomizeLogo from '$lib/assets/tools/kustomize.svg';
|
||||
import InkScapeLogo from '$lib/assets/tools/inkscape.svg';
|
||||
import OBSLogo from '$lib/assets/tools/obs.png';
|
||||
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 TerraformLogo from '$lib/assets/tools/terraform.svg';
|
||||
import GitLensLogo from '$lib/assets/tools/gitlens.png';
|
||||
|
||||
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,
|
||||
TerraformLogo,
|
||||
GitLensLogo
|
||||
};
|
||||
446
src/routes/toolbox/tools-cards.ts
Normal file
446
src/routes/toolbox/tools-cards.ts
Normal file
|
|
@ -0,0 +1,446 @@
|
|||
import {
|
||||
AkamaiLogo,
|
||||
ArgoCDLogo,
|
||||
AzureCLILogo,
|
||||
AzureDataStudioLogo,
|
||||
AzureStorageExplorerLogo,
|
||||
BalenaEtcherLogo,
|
||||
BitwardenLogo,
|
||||
BlenderLogo,
|
||||
CloudFlareLogo,
|
||||
CyberduckLogo,
|
||||
DBeaverLogo,
|
||||
DockerLogo,
|
||||
FigmaLogo,
|
||||
GIMPLogo,
|
||||
GitHubLogo,
|
||||
GitLensLogo,
|
||||
HelmLogo,
|
||||
InkScapeLogo,
|
||||
InsomniaLogo,
|
||||
JqLogo,
|
||||
K9sLogo,
|
||||
KarabinerElementsLogo,
|
||||
KeystoreExplorer,
|
||||
KustomizeLogo,
|
||||
MaccyLogo,
|
||||
MeldLogo,
|
||||
MullvadVPNLogo,
|
||||
NmapLogo,
|
||||
NotionLogo,
|
||||
NvmLogo,
|
||||
OBSLogo,
|
||||
OpsGenieLogo,
|
||||
OverleafLogo,
|
||||
PoetryLogo,
|
||||
PyCharmLogo,
|
||||
RectangleLogo,
|
||||
RoyalTSXLogo,
|
||||
SendGridLogo,
|
||||
SlackLogo,
|
||||
Studio3TLogo,
|
||||
SwitchHostsLogo,
|
||||
TerraformLogo,
|
||||
TogglTrackLogo,
|
||||
VimLogo,
|
||||
VisualStudioCodeLogo,
|
||||
WarpLogo,
|
||||
WireGuardLogo,
|
||||
WiresharkLogo
|
||||
} from './tools-assets';
|
||||
|
||||
export interface Tool {
|
||||
name: string;
|
||||
title: string;
|
||||
description: string;
|
||||
logo: string;
|
||||
toolUrl: string;
|
||||
}
|
||||
|
||||
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'
|
||||
},
|
||||
{
|
||||
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'
|
||||
},
|
||||
{
|
||||
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/'
|
||||
},
|
||||
{
|
||||
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'
|
||||
},
|
||||
{
|
||||
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'
|
||||
},
|
||||
{
|
||||
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'
|
||||
},
|
||||
{
|
||||
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'
|
||||
},
|
||||
{
|
||||
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'
|
||||
},
|
||||
{
|
||||
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'
|
||||
},
|
||||
{
|
||||
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'
|
||||
},
|
||||
{
|
||||
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'
|
||||
},
|
||||
{
|
||||
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'
|
||||
},
|
||||
{
|
||||
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'
|
||||
},
|
||||
{
|
||||
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'
|
||||
},
|
||||
{
|
||||
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'
|
||||
},
|
||||
{
|
||||
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'
|
||||
},
|
||||
{
|
||||
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'
|
||||
},
|
||||
{
|
||||
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'
|
||||
},
|
||||
{
|
||||
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'
|
||||
},
|
||||
{
|
||||
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://docs.microsoft.com/sql/azure-data-studio'
|
||||
},
|
||||
{
|
||||
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'
|
||||
},
|
||||
{
|
||||
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://www.rectangle.com'
|
||||
},
|
||||
{
|
||||
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/'
|
||||
},
|
||||
{
|
||||
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'
|
||||
},
|
||||
{
|
||||
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'
|
||||
},
|
||||
{
|
||||
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'
|
||||
},
|
||||
{
|
||||
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/'
|
||||
},
|
||||
{
|
||||
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'
|
||||
},
|
||||
{
|
||||
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'
|
||||
},
|
||||
{
|
||||
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'
|
||||
},
|
||||
{
|
||||
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'
|
||||
},
|
||||
{
|
||||
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'
|
||||
},
|
||||
{
|
||||
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'
|
||||
},
|
||||
{
|
||||
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'
|
||||
},
|
||||
{
|
||||
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'
|
||||
},
|
||||
{
|
||||
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/features/storage-explorer/'
|
||||
},
|
||||
{
|
||||
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'
|
||||
},
|
||||
{
|
||||
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'
|
||||
},
|
||||
{
|
||||
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'
|
||||
},
|
||||
{
|
||||
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'
|
||||
},
|
||||
{
|
||||
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'
|
||||
},
|
||||
{
|
||||
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'
|
||||
},
|
||||
{
|
||||
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://oldj.github.io/SwitchHosts/'
|
||||
},
|
||||
{
|
||||
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'
|
||||
},
|
||||
{
|
||||
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'
|
||||
},
|
||||
{
|
||||
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'
|
||||
},
|
||||
{
|
||||
name: 'Terraform',
|
||||
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: TerraformLogo,
|
||||
toolUrl: 'https://www.terraform.io'
|
||||
},
|
||||
{
|
||||
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'
|
||||
}
|
||||
];
|
||||
|
||||
export default tools;
|
||||
|
|
@ -1,105 +0,0 @@
|
|||
<!-- src/routes/tools/+page.svelte -->
|
||||
<script lang="ts">
|
||||
import { Canvas } from '@threlte/core';
|
||||
import { T } from '@threlte/core';
|
||||
import { ContactShadows, Float, OrbitControls } from '@threlte/extras';
|
||||
import Github from './models/Github.svelte';
|
||||
import TerraformFlat from './models/TerraformFlat.svelte';
|
||||
import Kubernetes from './models/Kubernetes.svelte';
|
||||
import Warp from './models/Warp.svelte';
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>hellob.art — tools</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="Explore essential DevOps tools like Kubernetes, Terraform, Warp, and version control platforms GitHub, Azure DevOps, and GitLab."
|
||||
/>
|
||||
</svelte:head>
|
||||
|
||||
<main class="container mx-auto px-4 py-8 text-left">
|
||||
<h2 class="text-3xl font-bold mb-8">Tools</h2>
|
||||
|
||||
<h2 class="text-2xl font-bold mb-8">Kubernetes</h2>
|
||||
|
||||
<p class="text-lg leading-relaxed mb-8">
|
||||
Kubernetes is an indispensable part of my daily routine, providing powerful container
|
||||
orchestration capabilities for seamless application deployment and scaling. I enhance my
|
||||
Kubernetes workflows with essential tools like k9s for cluster interactions, ArgoCD for
|
||||
GitOps-based continuous delivery, Kustomize for configuration customization, and AKS (Azure
|
||||
Kubernetes Service) for managed solutions. This combination streamlines my tasks and ensures
|
||||
efficient, reliable application management.
|
||||
</p>
|
||||
|
||||
<h2 class="text-2xl font-bold mb-8">Terraform</h2>
|
||||
|
||||
<p class="text-lg leading-relaxed mb-8">
|
||||
Terraform plays a central role in my DevOps toolkit, empowering me to manage and provision
|
||||
infrastructure efficiently as code. It saves valuable time and effort while maintaining
|
||||
consistency across deployments, preventing configuration drift in dynamic cloud environments.
|
||||
The reproductibility that Terraform offers is a game-changer, enabling easy and reliable
|
||||
environment recreation for testing and development. Seamless integration with Azure DevOps
|
||||
allows for streamlined CI/CD pipelines, instilling confidence in continuously delivering
|
||||
infrastructure changes. Embracing Terraform has simplified my daily tasks and enhanced the
|
||||
overall robustness and stability of our cloud infrastructure.
|
||||
</p>
|
||||
|
||||
<div class="h-72">
|
||||
<Canvas>
|
||||
<T.PerspectiveCamera makeDefault position={[-10, 15, 20]} fov={10}>
|
||||
<OrbitControls
|
||||
autoRotate
|
||||
enableZoom={false}
|
||||
enableDamping
|
||||
autoRotateSpeed={0.2}
|
||||
target.y={3}
|
||||
/>
|
||||
</T.PerspectiveCamera>
|
||||
|
||||
<T.DirectionalLight intensity={0.5} position.x={5} position.y={3} />
|
||||
<T.AmbientLight intensity={0.2} />
|
||||
|
||||
<ContactShadows scale={10} blur={2} far={2.5} opacity={0.5} />
|
||||
|
||||
<Float floatIntensity={1} floatingRange={[0, 1]}>
|
||||
<Github position.y={0} position.z={-0.75} scale={50} />
|
||||
</Float>
|
||||
|
||||
<Float floatIntensity={1} floatingRange={[0, 1]}>
|
||||
<TerraformFlat position.y={0} position.z={-8} position.x={-5} scale={10} />
|
||||
</Float>
|
||||
|
||||
<Float floatIntensity={1} floatingRange={[0, 1]}>
|
||||
<Kubernetes position.y={0} position.z={-2} position.x={-5} scale={100} />
|
||||
</Float>
|
||||
|
||||
<Float floatIntensity={1} floatingRange={[0, 1]}>
|
||||
<Warp position.y={0} position.z={-1} position.x={6} scale={8} />
|
||||
</Float>
|
||||
</Canvas>
|
||||
</div>
|
||||
|
||||
<h2 class="text-2xl font-bold mb-8">Warp</h2>
|
||||
|
||||
<p class="text-lg leading-relaxed mb-8">
|
||||
Warp, the high-performance terminal built in Rust, is an essential tool I rely on daily for
|
||||
development and operations. Its full-text editor for commands, visual grouping of outputs into
|
||||
blocks, and enhanced shortcuts have significantly boosted my productivity and made CLI
|
||||
interactions more intuitive. With its impressive speed, multiplatform support, and seamless
|
||||
integration into existing shells, Warp excels in handling complex tasks, making it indispensable
|
||||
for efficient and responsive terminal operations.
|
||||
</p>
|
||||
|
||||
<h2 class="text-2xl font-bold mb-8">GitHub, Azure DevOps and Gitlab</h2>
|
||||
|
||||
<p class="text-lg leading-relaxed mb-8">
|
||||
In my daily work, essential platforms like GitHub, Azure DevOps, and GitLab play a crucial role.
|
||||
For public and personal projects, GitHub provides robust version control and collaboration
|
||||
tools. Azure DevOps, on the other hand, is my preferred choice for private and corporate
|
||||
projects, thanks to seamless integration with Azure services and powerful CI/CD capabilities,
|
||||
optimizing application development and deployment. Additionally, I leverage GitLab for specific
|
||||
projects, benefiting from its strong version control features and CI/CD pipelines. Together,
|
||||
these platforms empower efficient collaboration, project management, and development processes,
|
||||
catering to a wide range of contexts.
|
||||
</p>
|
||||
</main>
|
||||
Loading…
Reference in a new issue