mirror of
				https://github.com/bartvdbraak/hellob.art.git
				synced 2025-10-30 19:59:10 +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…
	
	Add table
		Add a link
		
	
		Reference in a new issue