refactor: enhance some tool img

This commit is contained in:
Bart van der Braak 2023-11-21 00:41:06 +01:00
parent d63bee294b
commit adb54514cf
5 changed files with 285 additions and 224 deletions

View file

@ -23,28 +23,28 @@
</p> </p>
<div class="w-full text-token grid grid-cols-1 md:grid-cols-2 gap-4"> <div class="w-full text-token grid grid-cols-1 md:grid-cols-2 gap-4">
{#each projects as project} {#each projects as { link, headerImage, headerSubTitle, title, description, logo, contributors, date }}
{#if project.link} {#if link}
<a href={project.link}> <a href={link}>
<ProjectCard <ProjectCard
headerImage={project.headerImage} {headerImage}
headerSubTitle={project.headerSubTitle} {headerSubTitle}
title={project.title} {title}
description={project.description} {description}
logo={project.logo} {logo}
contributors={project.contributors} {contributors}
date={project.date} {date}
/> />
</a> </a>
{:else} {:else}
<ProjectCard <ProjectCard
headerImage={project.headerImage} {headerImage}
headerSubTitle={project.headerSubTitle} {headerSubTitle}
title={project.title} {title}
description={project.description} {description}
logo={project.logo} {logo}
contributors={project.contributors} {contributors}
date={project.date} {date}
/> />
{/if} {/if}
{/each} {/each}

View file

@ -1,11 +1,11 @@
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 videowallImage from '$lib/assets/projects/videowall.jpg?enhanced';
import videowallLogo from '$lib/assets/projects/videowall-logo.png'; import videowallLogo from '$lib/assets/projects/videowall-logo.png';
import ticketDashboardImage from '$lib/assets/projects/ticketdashboard.png?enhanced'; import ticketDashboardImage from '$lib/assets/projects/ticketdashboard.png?enhanced';
import ticketDashboardLogo from '$lib/assets/projects/triple-logo.png'; import ticketDashboardLogo from '$lib/assets/projects/triple-logo.png';
import zaantjeImage from '$lib/assets/projects/zaantje.png?enhanced'; import zaantjeImage from '$lib/assets/projects/zaantje.png?enhanced';
import zaantjeLogo from '$lib/assets/projects/zaantje-logo.png'; import zaantjeLogo from '$lib/assets/projects/zaantje-logo.png';
import keyweaveImage from '$lib/assets/projects/keyweave-terminal.jpg?enhanced';
import keyweaveLogo from '$lib/assets/projects/keyweave-logo.png';
interface Contributor { interface Contributor {
name: string; name: string;

View file

@ -36,9 +36,9 @@
</div> </div>
<ul class="columns-1 md:columns-2 lg:columns-3 gap-6 w-full mb-12"> <ul class="columns-1 md:columns-2 lg:columns-3 gap-6 w-full mb-12">
{#each tools as { name, title, description, logo, toolUrl }} {#each tools as { name, title, description, logo, toolUrl, enhanced }}
<li> <li>
<ToolCard {name} {title} {description} {logo} {toolUrl} /> <ToolCard {name} {title} {description} {logo} {toolUrl} {enhanced} />
</li> </li>
{/each} {/each}
</ul> </ul>

View file

@ -1,9 +1,12 @@
<script lang="ts"> <script lang="ts">
export let name: string; import type { Tool } from './tools-cards';
export let title: string;
export let description: string; export let name: Tool['name'];
export let logo: string; export let title: Tool['title'];
export let toolUrl: string; export let description: Tool['description'];
export let logo: Tool['logo'];
export let toolUrl: Tool['toolUrl'];
export let enhanced: Tool['enhanced'];
</script> </script>
<a <a
@ -14,12 +17,21 @@
> >
<div class="flex flex-col gap-6"> <div class="flex flex-col gap-6">
<div class="flex gap-6"> <div class="flex gap-6">
<img {#if enhanced}
src={logo} <enhanced:img
alt={name + ' logo'} src={logo}
class="h-12 w-12 rounded-sm object-contain" alt={name + ' logo'}
loading="lazy" 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"> <div class="grow">
<h4 class="mb-0">{name}</h4> <h4 class="mb-0">{name}</h4>
<p class="text-faded text-sm font-normal">{title}</p> <p class="text-faded text-sm font-normal">{title}</p>

View file

@ -1,101 +1,101 @@
import GitHubLogo from '$lib/assets/tools/github.svg'; import gitHubLogo from '$lib/assets/tools/github.svg';
import OverleafLogo from '$lib/assets/tools/overleaf.svg'; import overleafLogo from '$lib/assets/tools/overleaf.svg';
import ArgoCDLogo from '$lib/assets/tools/argocd.svg'; import argoCDLogo from '$lib/assets/tools/argocd.svg';
import Studio3TLogo from '$lib/assets/tools/studio3t.svg'; import studio3TLogo from '$lib/assets/tools/studio3t.svg';
import WarpLogo from '$lib/assets/tools/warp.svg'; import warpLogo from '$lib/assets/tools/warp.svg';
import K9sLogo from '$lib/assets/tools/k9s.png'; import k9sLogo from '$lib/assets/tools/k9s.png?enhanced';
import FigmaLogo from '$lib/assets/tools/figma.svg'; import figmaLogo from '$lib/assets/tools/figma.svg';
import AzureCLILogo from '$lib/assets/tools/azure-cli.svg'; import azureCLILogo from '$lib/assets/tools/azure-cli.svg';
import KeystoreExplorer from '$lib/assets/tools/keystore-exporer.png'; import keystoreExplorer from '$lib/assets/tools/keystore-exporer.png?enhanced';
import TogglTrackLogo from '$lib/assets/tools/toggl-track.svg'; import togglTrackLogo from '$lib/assets/tools/toggl-track.svg';
import HelmLogo from '$lib/assets/tools/helm.svg'; import helmLogo from '$lib/assets/tools/helm.svg';
import RoyalTSXLogo from '$lib/assets/tools/royal-tsx.png'; import royalTSXLogo from '$lib/assets/tools/royal-tsx.png?enhanced';
import PoetryLogo from '$lib/assets/tools/poetry.svg'; import poetryLogo from '$lib/assets/tools/poetry.svg';
import MaccyLogo from '$lib/assets/tools/maccy.png'; import maccyLogo from '$lib/assets/tools/maccy.png?enhanced';
import BalenaEtcherLogo from '$lib/assets/tools/balena-etcher.svg'; import balenaEtcherLogo from '$lib/assets/tools/balena-etcher.svg';
import SendGridLogo from '$lib/assets/tools/sendgrid.svg'; import sendGridLogo from '$lib/assets/tools/sendgrid.svg';
import InsomniaLogo from '$lib/assets/tools/insomnia.svg'; import insomniaLogo from '$lib/assets/tools/insomnia.svg';
import BlenderLogo from '$lib/assets/tools/blender.svg'; import blenderLogo from '$lib/assets/tools/blender.svg';
import BitwardenLogo from '$lib/assets/tools/bitwarden.svg'; import bitwardenLogo from '$lib/assets/tools/bitwarden.svg';
import AzureDataStudioLogo from '$lib/assets/tools/azure-data-studio.png'; import azureDataStudioLogo from '$lib/assets/tools/azure-data-studio.png?enhanced';
import WiresharkLogo from '$lib/assets/tools/wireshark.png'; import wiresharkLogo from '$lib/assets/tools/wireshark.png?enhanced';
import RectangleLogo from '$lib/assets/tools/rectangle.png'; import rectangleLogo from '$lib/assets/tools/rectangle.png?enhanced';
import PyCharmLogo from '$lib/assets/tools/pycharm.svg'; import pyCharmLogo from '$lib/assets/tools/pycharm.svg';
import DockerLogo from '$lib/assets/tools/docker.webp'; import dockerLogo from '$lib/assets/tools/docker.webp?enhanced';
import CyberduckLogo from '$lib/assets/tools/cyberduck.png'; import cyberduckLogo from '$lib/assets/tools/cyberduck.png?enhanced';
import MullvadVPNLogo from '$lib/assets/tools/mullvad-vpn.svg'; import mullvadVPNLogo from '$lib/assets/tools/mullvad-vpn.svg';
import JqLogo from '$lib/assets/tools/jq.svg'; import jqLogo from '$lib/assets/tools/jq.svg';
import AkamaiLogo from '$lib/assets/tools/akamai.svg'; import akamaiLogo from '$lib/assets/tools/akamai.svg';
import CloudFlareLogo from '$lib/assets/tools/cloudflare.svg'; import cloudFlareLogo from '$lib/assets/tools/cloudflare.svg';
import VisualStudioCodeLogo from '$lib/assets/tools/visual-studio-code.svg'; import visualStudioCodeLogo from '$lib/assets/tools/visual-studio-code.svg';
import OpsGenieLogo from '$lib/assets/tools/opsgenie.svg'; import opsGenieLogo from '$lib/assets/tools/opsgenie.svg';
import VimLogo from '$lib/assets/tools/vim.svg'; import vimLogo from '$lib/assets/tools/vim.svg';
import NotionLogo from '$lib/assets/tools/notion.svg'; import notionLogo from '$lib/assets/tools/notion.svg';
import NvmLogo from '$lib/assets/tools/nvm.svg'; import nvmLogo from '$lib/assets/tools/nvm.svg';
import GIMPLogo from '$lib/assets/tools/gimp.svg'; import gIMPLogo from '$lib/assets/tools/gimp.svg';
import AzureStorageExplorerLogo from '$lib/assets/tools/azure-storage-explorer.svg'; import azureStorageExplorerLogo from '$lib/assets/tools/azure-storage-explorer.svg';
import MeldLogo from '$lib/assets/tools/meld.svg'; import meldLogo from '$lib/assets/tools/meld.svg';
import KarabinerElementsLogo from '$lib/assets/tools/karabiner-elements.png'; import karabinerElementsLogo from '$lib/assets/tools/karabiner-elements.png?enhanced';
import KustomizeLogo from '$lib/assets/tools/kustomize.svg'; import kustomizeLogo from '$lib/assets/tools/kustomize.svg';
import InkScapeLogo from '$lib/assets/tools/inkscape.svg'; import inkScapeLogo from '$lib/assets/tools/inkscape.svg';
import OBSLogo from '$lib/assets/tools/obs.svg'; import oBSLogo from '$lib/assets/tools/obs.svg';
import WireGuardLogo from '$lib/assets/tools/wireguard.svg'; import wireGuardLogo from '$lib/assets/tools/wireguard.svg';
import SwitchHostsLogo from '$lib/assets/tools/switchhosts.svg'; import switchHostsLogo from '$lib/assets/tools/switchhosts.svg';
import SlackLogo from '$lib/assets/tools/slack.svg'; import slackLogo from '$lib/assets/tools/slack.svg';
import NmapLogo from '$lib/assets/tools/nmap.svg'; import nmapLogo from '$lib/assets/tools/nmap.svg';
import DBeaverLogo from '$lib/assets/tools/dbeaver.svg'; import dBeaverLogo from '$lib/assets/tools/dbeaver.svg';
import OpenTofuLogo from '$lib/assets/tools/opentofu.svg'; import openTofuLogo from '$lib/assets/tools/opentofu.svg';
import GitLensLogo from '$lib/assets/tools/gitlens.png'; import gitLensLogo from '$lib/assets/tools/gitlens.png?enhanced';
export { export {
GitHubLogo, gitHubLogo,
OverleafLogo, overleafLogo,
ArgoCDLogo, argoCDLogo,
Studio3TLogo, studio3TLogo,
WarpLogo, warpLogo,
K9sLogo, k9sLogo,
FigmaLogo, figmaLogo,
AzureCLILogo, azureCLILogo,
KeystoreExplorer, keystoreExplorer,
TogglTrackLogo, togglTrackLogo,
HelmLogo, helmLogo,
RoyalTSXLogo, royalTSXLogo,
PoetryLogo, poetryLogo,
MaccyLogo, maccyLogo,
BalenaEtcherLogo, balenaEtcherLogo,
SendGridLogo, sendGridLogo,
InsomniaLogo, insomniaLogo,
BlenderLogo, blenderLogo,
BitwardenLogo, bitwardenLogo,
AzureDataStudioLogo, azureDataStudioLogo,
RectangleLogo, rectangleLogo,
PyCharmLogo, pyCharmLogo,
DockerLogo, dockerLogo,
CyberduckLogo, cyberduckLogo,
MullvadVPNLogo, mullvadVPNLogo,
JqLogo, jqLogo,
AkamaiLogo, akamaiLogo,
CloudFlareLogo, cloudFlareLogo,
VisualStudioCodeLogo, visualStudioCodeLogo,
OpsGenieLogo, opsGenieLogo,
VimLogo, vimLogo,
NotionLogo, notionLogo,
NvmLogo, nvmLogo,
GIMPLogo, gIMPLogo,
AzureStorageExplorerLogo, azureStorageExplorerLogo,
MeldLogo, meldLogo,
KarabinerElementsLogo, karabinerElementsLogo,
KustomizeLogo, kustomizeLogo,
InkScapeLogo, inkScapeLogo,
OBSLogo, oBSLogo,
WireGuardLogo, wireGuardLogo,
SwitchHostsLogo, switchHostsLogo,
WiresharkLogo, wiresharkLogo,
SlackLogo, slackLogo,
NmapLogo, nmapLogo,
DBeaverLogo, dBeaverLogo,
OpenTofuLogo, openTofuLogo,
GitLensLogo gitLensLogo
}; };
export interface Tool { export interface Tool {
@ -104,6 +104,7 @@ export interface Tool {
description: string; description: string;
logo: string; logo: string;
toolUrl: string; toolUrl: string;
enhanced: boolean;
} }
const tools: Tool[] = [ const tools: Tool[] = [
@ -112,383 +113,431 @@ const tools: Tool[] = [
title: 'A complete developer platform', title: 'A complete developer platform',
description: description:
'A platform for hosting and collaborating on code, providing version control, issue tracking, and code review.', 'A platform for hosting and collaborating on code, providing version control, issue tracking, and code review.',
logo: GitHubLogo, logo: gitHubLogo,
toolUrl: 'https://github.com' toolUrl: 'https://github.com',
enhanced: false
}, },
{ {
name: 'Overleaf', name: 'Overleaf',
title: 'Online LaTeX Editor', title: 'Online LaTeX Editor',
description: description:
'Overleaf provides a collaborative environment for writing and publishing LaTeX documents. I use it for crafting scientific papers, technical documents, and more.', 'Overleaf provides a collaborative environment for writing and publishing LaTeX documents. I use it for crafting scientific papers, technical documents, and more.',
logo: OverleafLogo, logo: overleafLogo,
toolUrl: 'https://www.overleaf.com' toolUrl: 'https://www.overleaf.com',
enhanced: false
}, },
{ {
name: 'ArgoCD', name: 'ArgoCD',
title: 'Declarative GitOps Continuous Delivery', title: 'Declarative GitOps Continuous Delivery',
description: 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.', '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, logo: argoCDLogo,
toolUrl: 'https://argoproj.github.io/cd/' toolUrl: 'https://argoproj.github.io/cd/',
enhanced: false
}, },
{ {
name: 'Studio 3T', name: 'Studio 3T',
title: 'MongoDB Development Tool', title: 'MongoDB Development Tool',
description: description:
'Studio 3T simplifies working with MongoDB, providing useful features for managing databases, collections, and queries.', 'Studio 3T simplifies working with MongoDB, providing useful features for managing databases, collections, and queries.',
logo: Studio3TLogo, logo: studio3TLogo,
toolUrl: 'https://www.studio3t.com' toolUrl: 'https://www.studio3t.com',
enhanced: false
}, },
{ {
name: 'Warp', name: 'Warp',
title: 'Fast and Secure VPN', title: 'Fast and Secure VPN',
description: description:
'Warp is a modern, Rust-based terminal with AI built in so you and your team can build great software, faster.', 'Warp is a modern, Rust-based terminal with AI built in so you and your team can build great software, faster.',
logo: WarpLogo, logo: warpLogo,
toolUrl: 'https://warp.dev' toolUrl: 'https://warp.dev',
enhanced: false
}, },
{ {
name: 'k9s', name: 'k9s',
title: 'Kubernetes Terminal', title: 'Kubernetes Terminal',
description: description:
'k9s is a Kubernetes terminal that provides an easy interface to interact with clusters, aiding in managing and observing Kubernetes resources.', 'k9s is a Kubernetes terminal that provides an easy interface to interact with clusters, aiding in managing and observing Kubernetes resources.',
logo: K9sLogo, logo: k9sLogo,
toolUrl: 'https://k9scli.io' toolUrl: 'https://k9scli.io',
enhanced: true
}, },
{ {
name: 'Figma', name: 'Figma',
title: 'Collaborative Design Tool', title: 'Collaborative Design Tool',
description: description:
'Figma is a collaborative design tool that helps in creating, testing, and sharing user interfaces for applications and websites.', 'Figma is a collaborative design tool that helps in creating, testing, and sharing user interfaces for applications and websites.',
logo: FigmaLogo, logo: figmaLogo,
toolUrl: 'https://www.figma.com' toolUrl: 'https://www.figma.com',
enhanced: false
}, },
{ {
name: 'Azure CLI', name: 'Azure CLI',
title: 'Command-line Interface for Azure', title: 'Command-line Interface for Azure',
description: description:
'Azure CLI is a command-line interface for managing Azure resources, enabling quick administration of my Azure-hosted applications and services.', 'Azure CLI is a command-line interface for managing Azure resources, enabling quick administration of my Azure-hosted applications and services.',
logo: AzureCLILogo, logo: azureCLILogo,
toolUrl: 'https://docs.microsoft.com/cli/azure' toolUrl: 'https://docs.microsoft.com/cli/azure',
enhanced: false
}, },
{ {
name: 'KeyStore Explorer', name: 'KeyStore Explorer',
title: 'GUI-based Key & Certificate Management Tool', title: 'GUI-based Key & Certificate Management Tool',
description: description:
'KeyStore Explorer is a GUI-based tool to manage cryptographic keys and certificates, helping in development and testing phases.', 'KeyStore Explorer is a GUI-based tool to manage cryptographic keys and certificates, helping in development and testing phases.',
logo: KeystoreExplorer, logo: keystoreExplorer,
toolUrl: 'https://keystore-explorer.org' toolUrl: 'https://keystore-explorer.org',
enhanced: true
}, },
{ {
name: 'Toggl Track', name: 'Toggl Track',
title: 'Time Tracking Tool', title: 'Time Tracking Tool',
description: description:
'Toggl Track is a time tracking tool that assists in managing my daily tasks and tracking productivity.', 'Toggl Track is a time tracking tool that assists in managing my daily tasks and tracking productivity.',
logo: TogglTrackLogo, logo: togglTrackLogo,
toolUrl: 'https://www.toggl.com/track' toolUrl: 'https://www.toggl.com/track',
enhanced: false
}, },
{ {
name: 'Helm', name: 'Helm',
title: 'Kubernetes Package Manager', title: 'Kubernetes Package Manager',
description: description:
'Helm is a Kubernetes package manager that simplifies the deployment and management of applications on Kubernetes clusters.', 'Helm is a Kubernetes package manager that simplifies the deployment and management of applications on Kubernetes clusters.',
logo: HelmLogo, logo: helmLogo,
toolUrl: 'https://helm.sh' toolUrl: 'https://helm.sh',
enhanced: false
}, },
{ {
name: 'Royal TSX', name: 'Royal TSX',
title: 'Connection Management Tool', title: 'Connection Management Tool',
description: description:
'Royal TSX is a connection management tool that provides easy and secure access to remote systems.', 'Royal TSX is a connection management tool that provides easy and secure access to remote systems.',
logo: RoyalTSXLogo, logo: royalTSXLogo,
toolUrl: 'https://www.royalapps.com/ts/mac/features' toolUrl: 'https://www.royalapps.com/ts/mac/features',
enhanced: true
}, },
{ {
name: 'Poetry', name: 'Poetry',
title: 'Python Dependency Management Tool', title: 'Python Dependency Management Tool',
description: description:
'Poetry is a Python dependency management tool that simplifies package management and project environment setup.', 'Poetry is a Python dependency management tool that simplifies package management and project environment setup.',
logo: PoetryLogo, logo: poetryLogo,
toolUrl: 'https://python-poetry.org' toolUrl: 'https://python-poetry.org',
enhanced: false
}, },
{ {
name: 'Maccy', name: 'Maccy',
title: 'Clipboard Manager for macOS', title: 'Clipboard Manager for macOS',
description: description:
'Maccy is a lightweight clipboard manager for macOS that improves productivity by keeping a history of the clipboard.', 'Maccy is a lightweight clipboard manager for macOS that improves productivity by keeping a history of the clipboard.',
logo: MaccyLogo, logo: maccyLogo,
toolUrl: 'https://maccy.app' toolUrl: 'https://maccy.app',
enhanced: true
}, },
{ {
name: 'Balena Etcher', name: 'Balena Etcher',
title: 'USB and SD Card Writing Tool', title: 'USB and SD Card Writing Tool',
description: description:
'Balena Etcher is a USB and SD card writing tool used to flash OS images onto memory cards or drives.', 'Balena Etcher is a USB and SD card writing tool used to flash OS images onto memory cards or drives.',
logo: BalenaEtcherLogo, logo: balenaEtcherLogo,
toolUrl: 'https://www.balena.io/etcher' toolUrl: 'https://www.balena.io/etcher',
enhanced: false
}, },
{ {
name: 'SendGrid', name: 'SendGrid',
title: 'Email Delivery Service', title: 'Email Delivery Service',
description: description:
'SendGrid is an email delivery service that facilitates the sending of transactional or marketing emails.', 'SendGrid is an email delivery service that facilitates the sending of transactional or marketing emails.',
logo: SendGridLogo, logo: sendGridLogo,
toolUrl: 'https://sendgrid.com' toolUrl: 'https://sendgrid.com',
enhanced: false
}, },
{ {
name: 'Insomnia', name: 'Insomnia',
title: 'REST Client', title: 'REST Client',
description: description:
'Insomnia is a powerful REST client that aids in testing, debugging, and interacting with HTTP APIs.', 'Insomnia is a powerful REST client that aids in testing, debugging, and interacting with HTTP APIs.',
logo: InsomniaLogo, logo: insomniaLogo,
toolUrl: 'https://insomnia.rest' toolUrl: 'https://insomnia.rest',
enhanced: false
}, },
{ {
name: 'Blender', name: 'Blender',
title: '3D Modeling and Animation Software', title: '3D Modeling and Animation Software',
description: description:
'Blender is a 3D modeling and animation software used for creating and rendering 3D graphics and animations.', 'Blender is a 3D modeling and animation software used for creating and rendering 3D graphics and animations.',
logo: BlenderLogo, logo: blenderLogo,
toolUrl: 'https://www.blender.org' toolUrl: 'https://www.blender.org',
enhanced: false
}, },
{ {
name: 'Bitwarden', name: 'Bitwarden',
title: 'Open-source Password Manager', title: 'Open-source Password Manager',
description: description:
'Bitwarden is an open-source password manager that securely stores and manages passwords across devices.', 'Bitwarden is an open-source password manager that securely stores and manages passwords across devices.',
logo: BitwardenLogo, logo: bitwardenLogo,
toolUrl: 'https://bitwarden.com' toolUrl: 'https://bitwarden.com',
enhanced: false
}, },
{ {
name: 'Azure Data Studio', name: 'Azure Data Studio',
title: 'Cross-platform Database Tool', title: 'Cross-platform Database Tool',
description: description:
'Azure Data Studio is a cross-platform database tool that provides a modern editor experience for managing data across multiple sources.', 'Azure Data Studio is a cross-platform database tool that provides a modern editor experience for managing data across multiple sources.',
logo: AzureDataStudioLogo, logo: azureDataStudioLogo,
toolUrl: 'https://azure.microsoft.com/products/data-studio' toolUrl: 'https://azure.microsoft.com/products/data-studio',
enhanced: true
}, },
{ {
name: 'Wireshark', name: 'Wireshark',
title: 'Network Protocol Analyzer', title: 'Network Protocol Analyzer',
description: description:
'Wireshark is a network protocol analyzer that helps me inspect and troubleshoot network traffic, providing in-depth insights.', 'Wireshark is a network protocol analyzer that helps me inspect and troubleshoot network traffic, providing in-depth insights.',
logo: WiresharkLogo, logo: wiresharkLogo,
toolUrl: 'https://www.wireshark.org' toolUrl: 'https://www.wireshark.org',
enhanced: true
}, },
{ {
name: 'Rectangle', name: 'Rectangle',
title: 'Window Management Tool for macOS', title: 'Window Management Tool for macOS',
description: description:
'Rectangle is a window management tool for macOS that provides keyboard shortcuts for resizing and organizing windows efficiently.', 'Rectangle is a window management tool for macOS that provides keyboard shortcuts for resizing and organizing windows efficiently.',
logo: RectangleLogo, logo: rectangleLogo,
toolUrl: 'https://rectangleapp.com/' toolUrl: 'https://rectangleapp.com/',
enhanced: true
}, },
{ {
name: 'PyCharm', name: 'PyCharm',
title: 'Integrated Development Environment for Python', title: 'Integrated Development Environment for Python',
description: description:
'An Integrated Development Environment (IDE) for Python, providing intelligent code assistance and debugging tools.', 'An Integrated Development Environment (IDE) for Python, providing intelligent code assistance and debugging tools.',
logo: PyCharmLogo, logo: pyCharmLogo,
toolUrl: 'https://www.jetbrains.com/pycharm/' toolUrl: 'https://www.jetbrains.com/pycharm/',
enhanced: false
}, },
{ {
name: 'Docker', name: 'Docker',
title: 'Containerization Platform', title: 'Containerization Platform',
description: description:
'A platform that enables the development, shipment, and running of applications inside containers, ensuring consistency across environments.', 'A platform that enables the development, shipment, and running of applications inside containers, ensuring consistency across environments.',
logo: DockerLogo, logo: dockerLogo,
toolUrl: 'https://www.docker.com' toolUrl: 'https://www.docker.com',
enhanced: true
}, },
{ {
name: 'Cyberduck', name: 'Cyberduck',
title: 'Server and Cloud Storage Browser', title: 'Server and Cloud Storage Browser',
description: description:
'A libre server and cloud storage browser for Mac and Windows, supporting various protocols and cloud providers.', 'A libre server and cloud storage browser for Mac and Windows, supporting various protocols and cloud providers.',
logo: CyberduckLogo, logo: cyberduckLogo,
toolUrl: 'https://cyberduck.io' toolUrl: 'https://cyberduck.io',
enhanced: true
}, },
{ {
name: 'Mullvad VPN', name: 'Mullvad VPN',
title: 'VPN Service', title: 'VPN Service',
description: description:
'A VPN service that prioritizes privacy and anonymity, keeping my online activities secure and private.', 'A VPN service that prioritizes privacy and anonymity, keeping my online activities secure and private.',
logo: MullvadVPNLogo, logo: mullvadVPNLogo,
toolUrl: 'https://mullvad.net' toolUrl: 'https://mullvad.net',
enhanced: false
}, },
{ {
name: 'jq', name: 'jq',
title: 'Command-line JSON Processor', title: 'Command-line JSON Processor',
description: description:
'A lightweight and flexible command-line JSON processor, essential for parsing and manipulating JSON data in the shell.', 'A lightweight and flexible command-line JSON processor, essential for parsing and manipulating JSON data in the shell.',
logo: JqLogo, logo: jqLogo,
toolUrl: 'https://stedolan.github.io/jq/' toolUrl: 'https://stedolan.github.io/jq/',
enhanced: false
}, },
{ {
name: 'Akamai', name: 'Akamai',
title: 'Global Content Delivery Network', title: 'Global Content Delivery Network',
description: description:
'A global content delivery network, cybersecurity, and cloud service company, providing web and internet security services.', 'A global content delivery network, cybersecurity, and cloud service company, providing web and internet security services.',
logo: AkamaiLogo, logo: akamaiLogo,
toolUrl: 'https://www.akamai.com' toolUrl: 'https://www.akamai.com',
enhanced: false
}, },
{ {
name: 'CloudFlare', name: 'CloudFlare',
title: 'Content Delivery Network and Security Services', title: 'Content Delivery Network and Security Services',
description: description:
'A company that offers CDN services, DDoS mitigation, and distributed domain name server services to optimize and secure online content.', 'A company that offers CDN services, DDoS mitigation, and distributed domain name server services to optimize and secure online content.',
logo: CloudFlareLogo, logo: cloudFlareLogo,
toolUrl: 'https://www.cloudflare.com' toolUrl: 'https://www.cloudflare.com',
enhanced: false
}, },
{ {
name: 'Visual Studio Code', name: 'Visual Studio Code',
title: 'Code Editor', title: 'Code Editor',
description: description:
'A free, open-source code editor that offers powerful tools for code development, debugging, and extensions for various programming languages.', 'A free, open-source code editor that offers powerful tools for code development, debugging, and extensions for various programming languages.',
logo: VisualStudioCodeLogo, logo: visualStudioCodeLogo,
toolUrl: 'https://code.visualstudio.com' toolUrl: 'https://code.visualstudio.com',
enhanced: false
}, },
{ {
name: 'OpsGenie', name: 'OpsGenie',
title: 'Alert and On-Call Management Platform', title: 'Alert and On-Call Management Platform',
description: description:
'An alert and on-call management platform that ensures critical alerts are never missed, improving incident response times.', 'An alert and on-call management platform that ensures critical alerts are never missed, improving incident response times.',
logo: OpsGenieLogo, logo: opsGenieLogo,
toolUrl: 'https://www.atlassian.com/software/opsgenie' toolUrl: 'https://www.atlassian.com/software/opsgenie',
enhanced: false
}, },
{ {
name: 'vim', name: 'vim',
title: 'Text Editor', title: 'Text Editor',
description: description:
'A highly configurable and efficient text editor that I use for editing code and text files from the command line.', 'A highly configurable and efficient text editor that I use for editing code and text files from the command line.',
logo: VimLogo, logo: vimLogo,
toolUrl: 'https://www.vim.org' toolUrl: 'https://www.vim.org',
enhanced: false
}, },
{ {
name: 'Notion', name: 'Notion',
title: 'Collaboration Platform', title: 'Collaboration Platform',
description: description:
'A collaboration platform that combines note-taking, task management, and workflow management.', 'A collaboration platform that combines note-taking, task management, and workflow management.',
logo: NotionLogo, logo: notionLogo,
toolUrl: 'https://www.notion.so' toolUrl: 'https://www.notion.so',
enhanced: false
}, },
{ {
name: 'nvm', name: 'nvm',
title: 'Node.js Version Manager', title: 'Node.js Version Manager',
description: description:
'A Node.js version manager that simplifies the installation and management of multiple Node.js versions.', 'A Node.js version manager that simplifies the installation and management of multiple Node.js versions.',
logo: NvmLogo, logo: nvmLogo,
toolUrl: 'https://github.com/nvm-sh/nvm' toolUrl: 'https://github.com/nvm-sh/nvm',
enhanced: false
}, },
{ {
name: 'GIMP', name: 'GIMP',
title: 'Open-source Graphics Editor', title: 'Open-source Graphics Editor',
description: description:
'An open-source raster graphics editor used for tasks such as photo retouching, image editing, and composition.', 'An open-source raster graphics editor used for tasks such as photo retouching, image editing, and composition.',
logo: GIMPLogo, logo: gIMPLogo,
toolUrl: 'https://www.gimp.org' toolUrl: 'https://www.gimp.org',
enhanced: false
}, },
{ {
name: 'Azure Storage Explorer', name: 'Azure Storage Explorer',
title: 'Azure Storage Management Application', title: 'Azure Storage Management Application',
description: 'A standalone app that facilitates the management of Azure storage data.', description: 'A standalone app that facilitates the management of Azure storage data.',
logo: AzureStorageExplorerLogo, logo: azureStorageExplorerLogo,
toolUrl: 'https://azure.microsoft.com/products/storage/storage-explorer' toolUrl: 'https://azure.microsoft.com/products/storage/storage-explorer',
enhanced: false
}, },
{ {
name: 'Meld', name: 'Meld',
title: 'Visual Diff and Merge Tool', title: 'Visual Diff and Merge Tool',
description: description:
'A visual diff and merge tool that provides clear comparisons between files and directories.', 'A visual diff and merge tool that provides clear comparisons between files and directories.',
logo: MeldLogo, logo: meldLogo,
toolUrl: 'https://meldmerge.org' toolUrl: 'https://meldmerge.org',
enhanced: false
}, },
{ {
name: 'Karabiner Elements', name: 'Karabiner Elements',
title: 'Keyboard Customizer for macOS', title: 'Keyboard Customizer for macOS',
description: description:
'A powerful keyboard customizer for macOS, providing multiple customization options for the keyboard.', 'A powerful keyboard customizer for macOS, providing multiple customization options for the keyboard.',
logo: KarabinerElementsLogo, logo: karabinerElementsLogo,
toolUrl: 'https://karabiner-elements.pqrs.org' toolUrl: 'https://karabiner-elements.pqrs.org',
enhanced: true
}, },
{ {
name: 'Kustomize', name: 'Kustomize',
title: 'Kubernetes Configuration Customizer', title: 'Kubernetes Configuration Customizer',
description: description:
'A template-free way to customize application configuration that simplifies the customization of Kubernetes YAML configuration files.', 'A template-free way to customize application configuration that simplifies the customization of Kubernetes YAML configuration files.',
logo: KustomizeLogo, logo: kustomizeLogo,
toolUrl: 'https://kustomize.io' toolUrl: 'https://kustomize.io',
enhanced: false
}, },
{ {
name: 'InkScape', name: 'InkScape',
title: 'Open-source Vector Graphics Editor', title: 'Open-source Vector Graphics Editor',
description: description:
'An open-source vector graphics editor, enabling the creation and editing of vector images.', 'An open-source vector graphics editor, enabling the creation and editing of vector images.',
logo: InkScapeLogo, logo: inkScapeLogo,
toolUrl: 'https://inkscape.org' toolUrl: 'https://inkscape.org',
enhanced: false
}, },
{ {
name: 'OBS', name: 'OBS',
title: 'Open Broadcaster Software', title: 'Open Broadcaster Software',
description: description:
'Open Broadcaster Software, a free and open-source tool for video recording and live streaming.', 'Open Broadcaster Software, a free and open-source tool for video recording and live streaming.',
logo: OBSLogo, logo: oBSLogo,
toolUrl: 'https://obsproject.com' toolUrl: 'https://obsproject.com',
enhanced: false
}, },
{ {
name: 'WireGuard', name: 'WireGuard',
title: 'Modern VPN Protocol', title: 'Modern VPN Protocol',
description: description:
'A modern VPN protocol that aims for simplicity and speed, facilitating secure connections.', 'A modern VPN protocol that aims for simplicity and speed, facilitating secure connections.',
logo: WireGuardLogo, logo: wireGuardLogo,
toolUrl: 'https://www.wireguard.com' toolUrl: 'https://www.wireguard.com',
enhanced: false
}, },
{ {
name: 'SwitchHosts', name: 'SwitchHosts',
title: 'Hosts File Manager', title: 'Hosts File Manager',
description: description:
'An App for managing and switching hosts files, allowing me to easily switch between different environments.', 'An App for managing and switching hosts files, allowing me to easily switch between different environments.',
logo: SwitchHostsLogo, logo: switchHostsLogo,
toolUrl: 'https://switchhosts.vercel.app/' toolUrl: 'https://switchhosts.vercel.app/',
enhanced: false
}, },
{ {
name: 'Slack', name: 'Slack',
title: 'Collaboration Hub', title: 'Collaboration Hub',
description: 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.', '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, logo: slackLogo,
toolUrl: 'https://slack.com' toolUrl: 'https://slack.com',
enhanced: false
}, },
{ {
name: 'nmap', name: 'nmap',
title: 'Network Security Scanner', title: 'Network Security Scanner',
description: description:
'A security scanner used to discover hosts and services on a computer network, providing a detailed view of the network.', 'A security scanner used to discover hosts and services on a computer network, providing a detailed view of the network.',
logo: NmapLogo, logo: nmapLogo,
toolUrl: 'https://nmap.org' toolUrl: 'https://nmap.org',
enhanced: false
}, },
{ {
name: 'DBeaver', name: 'DBeaver',
title: 'Universal Database Tool', title: 'Universal Database Tool',
description: description:
'A universal database tool for developers and database administrators that supports all popular databases.', 'A universal database tool for developers and database administrators that supports all popular databases.',
logo: DBeaverLogo, logo: dBeaverLogo,
toolUrl: 'https://dbeaver.io' toolUrl: 'https://dbeaver.io',
enhanced: false
}, },
{ {
name: 'OpenTofu', name: 'OpenTofu',
title: 'Infrastructure as Code Tool', title: 'Infrastructure as Code Tool',
description: description:
'An open-source infrastructure as code tool that enables the automated creation, modification, and versioning of complex infrastructures.', 'An open-source infrastructure as code tool that enables the automated creation, modification, and versioning of complex infrastructures.',
logo: OpenTofuLogo, logo: openTofuLogo,
toolUrl: 'https://opentofu.org' toolUrl: 'https://opentofu.org',
enhanced: false
}, },
{ {
name: 'GitLens', name: 'GitLens',
title: 'Git Extension for Visual Studio Code', title: 'Git Extension for Visual Studio Code',
description: description:
'An extension for Visual Studio Code that supercharges the Git capabilities, providing advanced blame annotations, code lens, and more.', 'An extension for Visual Studio Code that supercharges the Git capabilities, providing advanced blame annotations, code lens, and more.',
logo: GitLensLogo, logo: gitLensLogo,
toolUrl: 'https://gitlens.amod.io' toolUrl: 'https://gitlens.amod.io',
enhanced: true
} }
]; ];