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

Merge pull request #206 from bartvdbraak/refactor/responsive-footer

Browse source 
Refactor styling for icons and footer
This commit is contained in:
Bart van der Braak 2024-01-16 21:05:40 +01:00 committed by GitHub
commit 4a08fe337b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 32 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/app.html
View file

@ -4,6 +4,13 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.ico" /> <link rel="icon" href="%sveltekit.assets%/favicon.ico" />
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
<link rel="apple-touch-icon" sizes="180x180" href="%sveltekit.assets%/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="%sveltekit.assets%/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="%sveltekit.assets%/favicon-16x16.png" />
<link rel="manifest" href="%sveltekit.assets%/site.webmanifest" />
<link rel="mask-icon" href="%sveltekit.assets%/safari-pinned-tab.svg" color="#000000" />
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="theme-color" content="#ffffff" />
%sveltekit.head% %sveltekit.head%
</head> </head>
<body <body

5
src/lib/components/site/metadata.svelte
View file

@ -4,7 +4,7 @@
export let title: string = siteConfig.name; export let title: string = siteConfig.name;
$: title = $page.data?.title ? `${$page.data.title} - ${siteConfig.name}` : siteConfig.name; $: title = $page.data?.title ? `${$page.data.title} — ${siteConfig.name}` : siteConfig.name;
</script> </script>
<svelte:head> <svelte:head>
@ -29,7 +29,4 @@
<meta property="og:description" content={siteConfig.description} /> <meta property="og:description" content={siteConfig.description} />
<meta property="og:site_name" content={siteConfig.name} /> <meta property="og:site_name" content={siteConfig.name} />
<meta property="og:locale" content="EN_US" /> <meta property="og:locale" content="EN_US" />
<link rel="icon" href="/favicon.ico" />
<link rel="shortcut icon" href="/favicon-16x16.png" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
</svelte:head> </svelte:head>

6
src/lib/components/site/mode-toggle.svelte
View file

@ -7,12 +7,12 @@
<DropdownMenu.Root> <DropdownMenu.Root>
<DropdownMenu.Trigger asChild let:builder> <DropdownMenu.Trigger asChild let:builder>
<Button builders={[builder]} variant="ghost" class="w-9 px-0"> <Button builders={[builder]} variant="ghost" class="h-9 w-9">
<Sun <Sun
class="dark:-roate-90 h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:scale-0" class="absolute h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
/> />
<Moon <Moon
class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" class="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
/> />
<span class="sr-only">Toggle theme</span> <span class="sr-only">Toggle theme</span>
</Button> </Button>

2
src/lib/components/site/nav/mobile-nav.svelte
View file

@ -23,7 +23,7 @@
</Sheet.Trigger> </Sheet.Trigger>
<Sheet.Content side="right" class="pr-0"> <Sheet.Content side="right" class="pr-0">
<MobileLink href="/" class="flex items-center" bind:open> <MobileLink href="/" class="flex items-center" bind:open>
<span class="sr-only">Return to home</span> <span class="sr-only">Logo icon (return home)</span>
<img src={Icons.logoIcon} class="mr-2 h-4 w-4" alt="icon of hellob.art" /> <img src={Icons.logoIcon} class="mr-2 h-4 w-4" alt="icon of hellob.art" />
<span class="font-mono font-bold tracking-tighter">{siteConfig.name}</span> <span class="font-mono font-bold tracking-tighter">{siteConfig.name}</span>
</MobileLink> </MobileLink>

14
src/lib/components/site/site-footer.svelte
View file

@ -1,6 +1,8 @@
<script lang="ts"> <script lang="ts">
import { Blocks, Cloud } from 'lucide-svelte';
import { siteConfig } from '$lib/config/site'; import { siteConfig } from '$lib/config/site';
import Separator from '$lib/components/ui/separator/separator.svelte'; import Separator from '$lib/components/ui/separator/separator.svelte';
import { Code } from 'radix-icons-svelte';
</script> </script>
<footer class="container py-6"> <footer class="container py-6">
@ -13,7 +15,9 @@
<div class="flex justify-center"> <div class="flex justify-center">
<div class="flex h-5 items-center space-x-4 text-xs"> <div class="flex h-5 items-center space-x-4 text-xs">
<div> <div>
Built using <a <span class="hidden sm:inline">Built using</span>
<Blocks class="inline h-[1rem] w-[1rem] sm:hidden" />
<a
href={siteConfig.links.shadcnSvelte} href={siteConfig.links.shadcnSvelte}
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
@ -22,7 +26,9 @@
</div> </div>
<Separator orientation="vertical" /> <Separator orientation="vertical" />
<div> <div>
Hosted on <a <span class="hidden sm:inline">Hosted on</span>
<Cloud class="inline h-[1rem] w-[1rem] sm:hidden" />
<a
href={siteConfig.links.vercel} href={siteConfig.links.vercel}
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
@ -31,7 +37,9 @@
</div> </div>
<Separator orientation="vertical" /> <Separator orientation="vertical" />
<div> <div>
Source code at <a <span class="hidden sm:inline">Source code at</span>
<Code class="inline h-[1rem] w-[1rem] sm:hidden" />
<a
href={siteConfig.links.gitHubProject} href={siteConfig.links.gitHubProject}
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"

10
src/lib/components/site/site-header.svelte
View file

@ -10,12 +10,12 @@
> >
<div class="container flex h-14 items-center"> <div class="container flex h-14 items-center">
<a href="/" class="mr-6 flex items-center space-x-2"> <a href="/" class="mr-6 flex items-center space-x-2">
<span class="sr-only">Return to home</span> <span class="sr-only">Logo (return home)</span>
<Icons.logo /> <Icons.logo />
</a> </a>
<MainNav /> <MainNav />
<div class="flex flex-1 items-center justify-between space-x-2 sm:space-x-4 md:justify-end"> <div class="flex flex-1 items-center justify-between space-x-2 sm:space-x-4 md:justify-end">
<nav class="flex items-center"> <nav class="flex">
<a href={siteConfig.links.gitHubProfile} target="_blank" rel="noopener noreferrer"> <a href={siteConfig.links.gitHubProfile} target="_blank" rel="noopener noreferrer">
<div <div
class={cn( class={cn(
@ -23,7 +23,7 @@
size: 'sm', size: 'sm',
variant: 'ghost' variant: 'ghost'
}), }),
'w-9 px-0' 'h-9 w-9 px-0'
)} )}
> >
<Icons.gitHub class="h-4 w-4" /> <Icons.gitHub class="h-4 w-4" />
@ -37,10 +37,10 @@
size: 'sm', size: 'sm',
variant: 'ghost' variant: 'ghost'
}), }),
'w-9 px-0' 'h-9 w-9 px-0'
)} )}
> >
<Icons.linkedIn class="h-3 w-3 fill-current" /> <Icons.linkedIn class="h-4 w-4" />
<span class="sr-only">LinkedIn</span> <span class="sr-only">LinkedIn</span>
</div> </div>
</a> </a>

7
src/routes/+page.svelte
View file

@ -56,9 +56,10 @@
rel="noreferrer" rel="noreferrer"
class="font-medium underline underline-offset-4" class="font-medium underline underline-offset-4"
href="https://www.wearetriple.com">Triple</a href="https://www.wearetriple.com">Triple</a
>, I've been diving deep into Azure and Azure DevOps. Nailed down certifications like >, my role involves providing services to clients including HEINEKEN, BAM, and citizenM.
AZ-104 and CKA. I'm not just pushing code, but building and managing solid, scalable I utilize tools like Akamai, Azure, Azure DevOps and SendGrid to create and maintain
cloud setups. robust, scalable cloud infrastructures. For operational purposes, I employ technologies
like SaltStack, PRTG, and LogicMonitor.
</p> </p>
<p class="mt-2"> <p class="mt-2">
I love to work on personal projects or playing games with friends. Beyond the screens, I love to work on personal projects or playing games with friends. Beyond the screens,