mirror of
https://github.com/bartvdbraak/hellob.art.git
synced 2025-04-27 01:21:22 +00:00
refactor: simplify structures and props
This commit is contained in:
parent
68eef2fa6f
commit
92b2d830e5
8 changed files with 108 additions and 187 deletions
|
|
@ -17,8 +17,8 @@
|
|||
|
||||
<div class="grid gap-8 md:grid-cols-2 lg:gap-12">
|
||||
<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">
|
||||
<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"
|
||||
|
|
|
|||
|
|
@ -20,10 +20,11 @@
|
|||
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">{headerSubTitle}</header>
|
||||
<header class="h6 opacity-50">{headerSubTitle}</header>
|
||||
<span class="h3" data-toc-ignore>{title}</span>
|
||||
<article>
|
||||
<p>
|
||||
|
|
@ -33,8 +34,8 @@
|
|||
</div>
|
||||
<hr class="opacity-50" />
|
||||
<footer class="p-4 flex justify-start items-center space-x-4">
|
||||
<Avatar src={logo} width="w-8" />
|
||||
<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}
|
||||
|
|
|
|||
|
|
@ -1,19 +0,0 @@
|
|||
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';
|
||||
import keyweaveImage from '$lib/assets/projects/keyweave-terminal.jpg?enhanced';
|
||||
import keyweaveLogo from '$lib/assets/projects/keyweave-logo.png';
|
||||
|
||||
export {
|
||||
videowallImage,
|
||||
videowallLogo,
|
||||
ticketDashboardImage,
|
||||
ticketDashboardLogo,
|
||||
zaantjeImage,
|
||||
zaantjeLogo,
|
||||
keyweaveImage,
|
||||
keyweaveLogo
|
||||
};
|
||||
|
|
@ -1,13 +1,11 @@
|
|||
import {
|
||||
ticketDashboardImage,
|
||||
ticketDashboardLogo,
|
||||
videowallImage,
|
||||
videowallLogo,
|
||||
zaantjeImage,
|
||||
zaantjeLogo,
|
||||
keyweaveImage,
|
||||
keyweaveLogo
|
||||
} from './projects-assets';
|
||||
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';
|
||||
import keyweaveImage from '$lib/assets/projects/keyweave-terminal.jpg?enhanced';
|
||||
import keyweaveLogo from '$lib/assets/projects/keyweave-logo.png';
|
||||
|
||||
interface Contributor {
|
||||
name: string;
|
||||
|
|
|
|||
|
|
@ -1,15 +1,12 @@
|
|||
<script lang="ts">
|
||||
import type { TimelineItem } from './timeline-items';
|
||||
|
||||
export let title: TimelineItem['title'];
|
||||
export let description: TimelineItem['description'];
|
||||
export let date: TimelineItem['date'];
|
||||
export let title: string;
|
||||
export let description: string;
|
||||
export let date: string;
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group is-active"
|
||||
>
|
||||
<!-- Icon -->
|
||||
<div
|
||||
class="flex items-center justify-center w-10 h-10 rounded-full border border-white bg-slate-300 group-[.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"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -36,15 +36,9 @@
|
|||
</div>
|
||||
|
||||
<ul class="columns-1 md:columns-2 lg:columns-3 gap-6 w-full mb-12">
|
||||
{#each tools as tool}
|
||||
{#each tools as { name, title, description, logo, toolUrl }}
|
||||
<li>
|
||||
<ToolCard
|
||||
name={tool.name}
|
||||
title={tool.title}
|
||||
description={tool.description}
|
||||
logo={tool.logo}
|
||||
toolUrl={tool.toolUrl}
|
||||
/>
|
||||
<ToolCard {name} {title} {description} {logo} {toolUrl} />
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -1,99 +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';
|
||||
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.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';
|
||||
|
||||
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
|
||||
};
|
||||
|
|
@ -1,53 +1,102 @@
|
|||
import {
|
||||
AkamaiLogo,
|
||||
ArgoCDLogo,
|
||||
AzureCLILogo,
|
||||
AzureDataStudioLogo,
|
||||
AzureStorageExplorerLogo,
|
||||
BalenaEtcherLogo,
|
||||
BitwardenLogo,
|
||||
BlenderLogo,
|
||||
CloudFlareLogo,
|
||||
CyberduckLogo,
|
||||
DBeaverLogo,
|
||||
DockerLogo,
|
||||
FigmaLogo,
|
||||
GIMPLogo,
|
||||
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.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';
|
||||
|
||||
export {
|
||||
GitHubLogo,
|
||||
GitLensLogo,
|
||||
HelmLogo,
|
||||
InkScapeLogo,
|
||||
InsomniaLogo,
|
||||
JqLogo,
|
||||
OverleafLogo,
|
||||
ArgoCDLogo,
|
||||
Studio3TLogo,
|
||||
WarpLogo,
|
||||
K9sLogo,
|
||||
KarabinerElementsLogo,
|
||||
FigmaLogo,
|
||||
AzureCLILogo,
|
||||
KeystoreExplorer,
|
||||
KustomizeLogo,
|
||||
TogglTrackLogo,
|
||||
HelmLogo,
|
||||
RoyalTSXLogo,
|
||||
PoetryLogo,
|
||||
MaccyLogo,
|
||||
MeldLogo,
|
||||
BalenaEtcherLogo,
|
||||
SendGridLogo,
|
||||
InsomniaLogo,
|
||||
BlenderLogo,
|
||||
BitwardenLogo,
|
||||
AzureDataStudioLogo,
|
||||
RectangleLogo,
|
||||
PyCharmLogo,
|
||||
DockerLogo,
|
||||
CyberduckLogo,
|
||||
MullvadVPNLogo,
|
||||
NmapLogo,
|
||||
JqLogo,
|
||||
AkamaiLogo,
|
||||
CloudFlareLogo,
|
||||
VisualStudioCodeLogo,
|
||||
OpsGenieLogo,
|
||||
VimLogo,
|
||||
NotionLogo,
|
||||
NvmLogo,
|
||||
GIMPLogo,
|
||||
AzureStorageExplorerLogo,
|
||||
MeldLogo,
|
||||
KarabinerElementsLogo,
|
||||
KustomizeLogo,
|
||||
InkScapeLogo,
|
||||
OBSLogo,
|
||||
OpsGenieLogo,
|
||||
OverleafLogo,
|
||||
PoetryLogo,
|
||||
PyCharmLogo,
|
||||
RectangleLogo,
|
||||
RoyalTSXLogo,
|
||||
SendGridLogo,
|
||||
SlackLogo,
|
||||
Studio3TLogo,
|
||||
SwitchHostsLogo,
|
||||
OpenTofuLogo,
|
||||
TogglTrackLogo,
|
||||
VimLogo,
|
||||
VisualStudioCodeLogo,
|
||||
WarpLogo,
|
||||
WireGuardLogo,
|
||||
WiresharkLogo
|
||||
} from './tools-assets';
|
||||
SwitchHostsLogo,
|
||||
WiresharkLogo,
|
||||
SlackLogo,
|
||||
NmapLogo,
|
||||
DBeaverLogo,
|
||||
OpenTofuLogo,
|
||||
GitLensLogo
|
||||
};
|
||||
|
||||
export interface Tool {
|
||||
name: string;
|
||||
|
|
|
|||
Loading…
Reference in a new issue