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

refactor: simplify structures and props

Browse source
This commit is contained in:
Bart van der Braak 2023-11-20 16:21:27 +01:00
parent 68eef2fa6f
commit 92b2d830e5
8 changed files with 108 additions and 187 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/routes/+page.svelte
View file

@ -17,8 +17,8 @@
<div class="grid gap-8 md:grid-cols-2 lg:gap-12"> <div class="grid gap-8 md:grid-cols-2 lg:gap-12">
<div class="relative"> <div class="relative">
<div class="absolute inset-0 bg-gradient-to-tr from-blue-500 to-transparent bg-repeat"></div> <div class="absolute inset-0 bg-repeat"></div>
<div class="h-64 overflow-hidden rounded-lg bg-gray-100 shadow-lg md:h-auto sticky top-10"> <div class="h-64 overflow-hidden rounded-lg shadow-lg md:h-auto sticky top-10">
<enhanced:img <enhanced:img
src={bartvdbraakImage} src={bartvdbraakImage}
alt="Bart van der Braak with a noire effect" alt="Bart van der Braak with a noire effect"

5
src/routes/projects/ProjectCard.svelte
View file

@ -20,10 +20,11 @@
src={headerImage} src={headerImage}
class="bg-black/50 w-full aspect-[21/9] object-cover object-top" class="bg-black/50 w-full aspect-[21/9] object-cover object-top"
alt={headerSubTitle} alt={headerSubTitle}
loading="lazy"
/> />
</header> </header>
<div class="p-4 space-y-4"> <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> <span class="h3" data-toc-ignore>{title}</span>
<article> <article>
<p> <p>
@ -33,8 +34,8 @@
</div> </div>
<hr class="opacity-50" /> <hr class="opacity-50" />
<footer class="p-4 flex justify-start items-center space-x-4"> <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"> <div class="flex-auto flex justify-between items-center">
<Avatar src={logo} width="w-8" />
{#each contributors as contributor} {#each contributors as contributor}
<Avatar src={contributor.imageSrc} width="w-8" /> <Avatar src={contributor.imageSrc} width="w-8" />
{/each} {/each}

19
src/routes/projects/projects-assets.ts
View file

@ -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
};

18
src/routes/projects/projects-cards.ts
View file

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

9
src/routes/timeline/TimelineItem.svelte
View file

@ -1,15 +1,12 @@
<script lang="ts"> <script lang="ts">
import type { TimelineItem } from './timeline-items'; export let title: string;
export let description: string;
export let title: TimelineItem['title']; export let date: string;
export let description: TimelineItem['description'];
export let date: TimelineItem['date'];
</script> </script>
<div <div
class="relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group is-active" class="relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group is-active"
> >
<!-- Icon -->
<div <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" 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"
> >

10
src/routes/toolbox/+page.svelte
View file

@ -36,15 +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 tool} {#each tools as { name, title, description, logo, toolUrl }}
<li> <li>
<ToolCard <ToolCard {name} {title} {description} {logo} {toolUrl} />
name={tool.name}
title={tool.title}
description={tool.description}
logo={tool.logo}
toolUrl={tool.toolUrl}
/>
</li> </li>
{/each} {/each}
</ul> </ul>

99
src/routes/toolbox/tools-assets.ts
View file

@ -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
};

131
src/routes/toolbox/tools-cards.ts
View file

@ -1,53 +1,102 @@
import { import GitHubLogo from '$lib/assets/tools/github.svg';
AkamaiLogo, import OverleafLogo from '$lib/assets/tools/overleaf.svg';
ArgoCDLogo, import ArgoCDLogo from '$lib/assets/tools/argocd.svg';
AzureCLILogo, import Studio3TLogo from '$lib/assets/tools/studio3t.svg';
AzureDataStudioLogo, import WarpLogo from '$lib/assets/tools/warp.svg';
AzureStorageExplorerLogo, import K9sLogo from '$lib/assets/tools/k9s.png';
BalenaEtcherLogo, import FigmaLogo from '$lib/assets/tools/figma.svg';
BitwardenLogo, import AzureCLILogo from '$lib/assets/tools/azure-cli.svg';
BlenderLogo, import KeystoreExplorer from '$lib/assets/tools/keystore-exporer.png';
CloudFlareLogo, import TogglTrackLogo from '$lib/assets/tools/toggl-track.svg';
CyberduckLogo, import HelmLogo from '$lib/assets/tools/helm.svg';
DBeaverLogo, import RoyalTSXLogo from '$lib/assets/tools/royal-tsx.png';
DockerLogo, import PoetryLogo from '$lib/assets/tools/poetry.svg';
FigmaLogo, import MaccyLogo from '$lib/assets/tools/maccy.png';
GIMPLogo, 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, GitHubLogo,
GitLensLogo, OverleafLogo,
HelmLogo, ArgoCDLogo,
InkScapeLogo, Studio3TLogo,
InsomniaLogo, WarpLogo,
JqLogo,
K9sLogo, K9sLogo,
KarabinerElementsLogo, FigmaLogo,
AzureCLILogo,
KeystoreExplorer, KeystoreExplorer,
KustomizeLogo, TogglTrackLogo,
HelmLogo,
RoyalTSXLogo,
PoetryLogo,
MaccyLogo, MaccyLogo,
MeldLogo, BalenaEtcherLogo,
SendGridLogo,
InsomniaLogo,
BlenderLogo,
BitwardenLogo,
AzureDataStudioLogo,
RectangleLogo,
PyCharmLogo,
DockerLogo,
CyberduckLogo,
MullvadVPNLogo, MullvadVPNLogo,
NmapLogo, JqLogo,
AkamaiLogo,
CloudFlareLogo,
VisualStudioCodeLogo,
OpsGenieLogo,
VimLogo,
NotionLogo, NotionLogo,
NvmLogo, NvmLogo,
GIMPLogo,
AzureStorageExplorerLogo,
MeldLogo,
KarabinerElementsLogo,
KustomizeLogo,
InkScapeLogo,
OBSLogo, OBSLogo,
OpsGenieLogo,
OverleafLogo,
PoetryLogo,
PyCharmLogo,
RectangleLogo,
RoyalTSXLogo,
SendGridLogo,
SlackLogo,
Studio3TLogo,
SwitchHostsLogo,
OpenTofuLogo,
TogglTrackLogo,
VimLogo,
VisualStudioCodeLogo,
WarpLogo,
WireGuardLogo, WireGuardLogo,
WiresharkLogo SwitchHostsLogo,
} from './tools-assets'; WiresharkLogo,
SlackLogo,
NmapLogo,
DBeaverLogo,
OpenTofuLogo,
GitLensLogo
};
export interface Tool { export interface Tool {
name: string; name: string;