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

refactor: distinctive re-use of site header and navbar rename

Browse source
This commit is contained in:
Bart van der Braak 2024-01-19 02:57:19 +01:00
parent 3bb7737625
commit f9dfaa2fd2
13 changed files with 188 additions and 179 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/lib/components/site/index.ts
View file

@ -1,5 +1,6 @@
export { default as Metadata } from './metadata.svelte'; export { default as Metadata } from './metadata.svelte';
export { default as SiteFooter } from './site-footer.svelte'; export { default as SiteFooter } from './site-footer.svelte';
export { default as SiteNavBar } from './site-navbar.svelte';
export { default as SiteHeader } from './site-header.svelte'; export { default as SiteHeader } from './site-header.svelte';
export { default as TailwindIndicator } from './tailwind-indicator.svelte'; export { default as TailwindIndicator } from './tailwind-indicator.svelte';
export { default as ModeToggle } from './mode-toggle.svelte'; export { default as ModeToggle } from './mode-toggle.svelte';

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

@ -1,52 +1,12 @@
<script lang="ts"> <script lang="ts">
import { Icons, ModeToggle, MainNav, MobileNav } from '$lib/components/site'; import * as PageHeader from './page-header';
import { siteConfig } from '$lib/config/site'; export let title: string, subTitle: string;
import { cn } from '$lib/utils';
import { buttonVariants } from '../ui/button';
</script> </script>
<header <PageHeader.Root class="pb-8">
class="sticky top-0 z-50 w-full border-b bg-background/95 shadow-sm backdrop-blur supports-[backdrop-filter]:bg-background/60" <PageHeader.Heading>{title}</PageHeader.Heading>
> <PageHeader.Description>
<div class="container flex h-14 items-center"> {subTitle}
<a href="/" class="mr-6 flex items-center space-x-2"> </PageHeader.Description>
<span class="sr-only">Logo (return home)</span> <slot />
<Icons.logo /> </PageHeader.Root>
</a>
<MainNav />
<div class="flex flex-1 items-center justify-between space-x-2 sm:space-x-4 md:justify-end">
<nav class="flex">
<a href={siteConfig.links.gitHubProfile} target="_blank" rel="noopener noreferrer">
<div
class={cn(
buttonVariants({
size: 'sm',
variant: 'ghost'
}),
'h-9 w-9 px-0'
)}
>
<Icons.gitHub class="h-4 w-4" />
<span class="sr-only">GitHub</span>
</div>
</a>
<a href={siteConfig.links.linkedIn} target="_blank" rel="noreferrer">
<div
class={cn(
buttonVariants({
size: 'sm',
variant: 'ghost'
}),
'h-9 w-9 px-0'
)}
>
<Icons.linkedIn class="h-4 w-4" />
<span class="sr-only">LinkedIn</span>
</div>
</a>
<ModeToggle />
</nav>
</div>
<MobileNav />
</div>
</header>

52
src/lib/components/site/site-navbar.svelte Normal file
View file

@ -0,0 +1,52 @@
<script lang="ts">
import { Icons, ModeToggle, MainNav, MobileNav } from '$lib/components/site';
import { siteConfig } from '$lib/config/site';
import { cn } from '$lib/utils';
import { buttonVariants } from '../ui/button';
</script>
<header
class="sticky top-0 z-50 w-full border-b bg-background/95 shadow-sm backdrop-blur supports-[backdrop-filter]:bg-background/60"
>
<div class="container flex h-14 items-center">
<a href="/" class="mr-6 flex items-center space-x-2">
<span class="sr-only">Logo (return home)</span>
<Icons.logo />
</a>
<MainNav />
<div class="flex flex-1 items-center justify-between space-x-2 sm:space-x-4 md:justify-end">
<nav class="flex">
<a href={siteConfig.links.gitHubProfile} target="_blank" rel="noopener noreferrer">
<div
class={cn(
buttonVariants({
size: 'sm',
variant: 'ghost'
}),
'h-9 w-9 px-0'
)}
>
<Icons.gitHub class="h-4 w-4" />
<span class="sr-only">GitHub</span>
</div>
</a>
<a href={siteConfig.links.linkedIn} target="_blank" rel="noreferrer">
<div
class={cn(
buttonVariants({
size: 'sm',
variant: 'ghost'
}),
'h-9 w-9 px-0'
)}
>
<Icons.linkedIn class="h-4 w-4" />
<span class="sr-only">LinkedIn</span>
</div>
</a>
<ModeToggle />
</nav>
</div>
<MobileNav />
</div>
</header>

34
src/routes/+error.svelte
View file

@ -1,23 +1,23 @@
<script lang="ts"> <script lang="ts">
import { page } from '$app/stores';
import * as PageHeader from '$lib/components/site/page-header';
import { buttonVariants } from '$lib/components/ui/button'; import { buttonVariants } from '$lib/components/ui/button';
import { cn } from '$lib/utils'; import { cn } from '$lib/utils';
import johnTravoltaGif from '$lib/assets/john-travolta.gif'; import johnTravoltaGif from '$lib/assets/john-travolta.gif';
import { page } from '$app/stores';
import { SiteHeader } from '$lib/components/site';
</script> </script>
<div class="container relative max-w-[980px] pb-10"> <SiteHeader
<PageHeader.Root> title={`${$page.error?.message}`}
<PageHeader.Heading>{$page.error?.message}</PageHeader.Heading> subTitle={`This page is currently unavailable. Please try again later.`}
<PageHeader.Description>This page is not available.</PageHeader.Description> >
<p class="text-sm text-orange-700 dark:text-orange-400"> <p class="text-sm text-orange-700 dark:text-orange-400">
You can try going back to the home page. You can try going back to the home page.
</p> </p>
<div class="flex w-full items-center justify-center space-x-4 py-4"> <div class="flex w-full items-center justify-center space-x-4 py-4">
<a href="/" class={cn(buttonVariants())}> Return Home </a> <a href="/" class={cn(buttonVariants())}> Return Home </a>
</div> </div>
</PageHeader.Root> </SiteHeader>
<section class="flex">
<img src={johnTravoltaGif} alt="John travolta unable to find your page" class="mx-auto w-1/2" /> <section class="flex">
</section> <img src={johnTravoltaGif} alt="John travolta unable to find your page" class="mx-auto w-1/2" />
</div> </section>

6
src/routes/+layout.svelte
View file

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import { dev } from '$app/environment'; import { dev } from '$app/environment';
import { Metadata, SiteFooter, SiteHeader, TailwindIndicator } from '$lib/components/site'; import { Metadata, SiteFooter, SiteNavBar, TailwindIndicator } from '$lib/components/site';
import '../styles/globals.css'; import '../styles/globals.css';
import { ModeWatcher } from 'mode-watcher'; import { ModeWatcher } from 'mode-watcher';
import { fly } from 'svelte/transition'; import { fly } from 'svelte/transition';
@ -17,8 +17,8 @@
<Metadata /> <Metadata />
<div class="relative flex min-h-screen flex-col" id="page"> <div class="relative flex min-h-screen flex-col" id="page">
<SiteHeader /> <SiteNavBar />
<main class="mb-4 flex-1"> <main class="container relative mb-4 max-w-[980px] flex-1">
{#key data.url} {#key data.url}
<div in:fly={{ x: -200, duration: 200, delay: 200 }} out:fly={{ x: 200, duration: 200 }}> <div in:fly={{ x: -200, duration: 200, delay: 200 }} out:fly={{ x: 200, duration: 200 }}>
<slot /> <slot />

137
src/routes/+page.svelte
View file

@ -1,81 +1,78 @@
<script lang="ts"> <script lang="ts">
import * as PageHeader from '$lib/components/site/page-header'; import { page } from '$app/stores';
import { ImageFade } from '$lib/components/site'; import { Icons, ImageFade } from '$lib/components/site';
import { Icons } from '$lib/components/site/icons'; import { SiteHeader } from '$lib/components/site';
import { buttonVariants } from '$lib/components/ui/button'; import { buttonVariants } from '$lib/components/ui/button';
import { siteConfig } from '$lib/config/site'; import { siteConfig } from '$lib/config/site';
import { cn } from '$lib/utils'; import { cn } from '$lib/utils';
$: title = $page.data.title;
$: subTitle = $page.data.subTitle;
</script> </script>
<div class="container relative max-w-[980px] pb-10"> <SiteHeader {title} {subTitle}>
<PageHeader.Root class="pb-8"> <p class="text-center text-sm text-green-700 dark:text-green-400">
<PageHeader.Heading>I made this for you</PageHeader.Heading> Inspired by others, I share my open-source derived work with the community.
<PageHeader.Description> </p>
Featuring current work and studies in a SvelteKit-based portfolio. <div class="flex w-full items-center justify-center space-x-4 py-4 md:pb-10">
</PageHeader.Description> <a href="/projects" class={cn(buttonVariants())}> My Projects </a>
<p class="text-center text-sm text-green-700 dark:text-green-400"> <a
Inspired by others, I share my open-source derived work with the community. target="_blank"
</p> rel="noreferrer"
<div class="flex w-full items-center justify-center space-x-4 py-4 md:pb-10"> href={siteConfig.links.gitHubProfile}
<a href="/projects" class={cn(buttonVariants())}> My Projects </a> class={cn(buttonVariants({ variant: 'outline' }))}
<a >
target="_blank" <Icons.gitHub class="mr-2 h-4 w-4" />
rel="noreferrer" GitHub
href={siteConfig.links.gitHubProfile} </a>
class={cn(buttonVariants({ variant: 'outline' }))} </div>
> </SiteHeader>
<Icons.gitHub class="mr-2 h-4 w-4" /> <section class="flex">
GitHub <div class="border-grey/15 relative border-t pb-16 pt-10 dark:border-white/20">
</a> <div
</div> class="pointer-events-none absolute left-[00%] top-0 h-40 w-[100%] select-none overflow-hidden"
</PageHeader.Root> >
<section class="flex">
<div class="border-grey/15 relative border-y pb-16 pt-10 dark:border-white/20">
<div <div
class="pointer-events-none absolute left-[00%] top-0 h-40 w-[100%] select-none overflow-hidden" class="absolute left-0 top-40 h-96 w-full -translate-y-full [background-image:radial-gradient(closest-side,rgba(123,175,224,0.12)_0%,transparent_100%)]"
> ></div>
<div </div>
class="absolute left-0 top-40 h-96 w-full -translate-y-full [background-image:radial-gradient(closest-side,rgba(123,175,224,0.12)_0%,transparent_100%)]" <sup class="mb-1 text-base text-blue-400 empty:hidden">Introduction</sup>
></div> <h2 class="text-5xl font-bold">
Building confidence and containers<span class="text-blue-400">.</span>
</h2>
<div class="text-md mt-12 flex flex-col gap-8 md:flex-row">
<div class="flex-1 empty:hidden">
<p>
I'm a DevOps and Platform Engineering enthusiast from Zaandam, The Netherlands. Started my
journey in Information Sciences at the Vrije Universiteit Amsterdam, quickly learning and
adopting Python, Javascript and Linux. These days, I'm also working alot with Terraform,
Bicep, and Kubernetes, creating cloud infra solutions that are sustainable.
</p>
<p class="mt-2">
Over at <a
target="_blank"
rel="noreferrer"
class="font-medium underline underline-offset-4"
href="https://www.wearetriple.com">Triple</a
>, my role involves providing services to clients including HEINEKEN, BAM, and citizenM. I
utilize tools like Akamai, Azure, Azure DevOps and SendGrid to create and maintain robust,
scalable cloud infrastructures. For operational purposes, I employ technologies like
SaltStack, PRTG, and LogicMonitor.
</p>
<p class="mt-2">
I love to work on personal projects or playing games with friends. Beyond the screens, you
can catch me vibing to vinyl, watching movies, hitting concerts and festivals.
</p>
<p class="mt-2">
When the dust settles, my life is all about sharing laughs with my oversized cat and with
my amazing girlfriend. I also enjoy a good whiskey, and I'm always up for a chat or down
to help.
</p>
</div> </div>
<sup class="mb-1 text-base text-blue-400 empty:hidden">Introduction</sup>
<h2 class="text-5xl font-bold">
Building confidence and containers<span class="text-blue-400">.</span>
</h2>
<div class="text-md mt-12 flex flex-col gap-8 md:flex-row">
<div class="flex-1 empty:hidden">
<p>
I'm a DevOps and Platform Engineering enthusiast from Zaandam, The Netherlands. Started
my journey in Information Sciences at the Vrije Universiteit Amsterdam, quickly learning
and adopting Python, Javascript and Linux. These days, I'm also working alot with
Terraform, Bicep, and Kubernetes, creating cloud infra solutions that are sustainable.
</p>
<p class="mt-2">
Over at <a
target="_blank"
rel="noreferrer"
class="font-medium underline underline-offset-4"
href="https://www.wearetriple.com">Triple</a
>, my role involves providing services to clients including HEINEKEN, BAM, and citizenM.
I utilize tools like Akamai, Azure, Azure DevOps and SendGrid to create and maintain
robust, scalable cloud infrastructures. For operational purposes, I employ technologies
like SaltStack, PRTG, and LogicMonitor.
</p>
<p class="mt-2">
I love to work on personal projects or playing games with friends. Beyond the screens,
you can catch me vibing to vinyl, watching movies, hitting concerts and festivals.
</p>
<p class="mt-2">
When the dust settles, my life is all about sharing laughs with my oversized cat and
with my amazing girlfriend. I also enjoy a good whiskey, and I'm always up for a chat or
down to help.
</p>
</div>
<div class="flex-1"> <div class="flex-1">
<ImageFade /> <ImageFade />
</div>
</div> </div>
</div> </div>
</section> </div>
</div> </section>

4
src/routes/+page.ts
View file

@ -1,6 +1,8 @@
/** @type {import('./$types').PageLoad} */ /** @type {import('./$types').PageLoad} */
export function load() { export function load() {
return { return {
title: `Home` name: `Home`,
title: `I made this for you`,
subTitle: `Featuring current work and studies in a SvelteKit-based portfolio.`
}; };
} }

21
src/routes/projects/+page.svelte
View file

@ -1,17 +1,14 @@
<script lang="ts"> <script lang="ts">
import * as PageHeader from '$lib/components/site/page-header';
import { Projects } from '$lib/components/site/projects'; import { Projects } from '$lib/components/site/projects';
import { page } from '$app/stores';
import { SiteHeader } from '$lib/components/site';
$: title = $page.data.title;
$: subTitle = $page.data.subTitle;
</script> </script>
<div class="container relative max-w-[980px]"> <SiteHeader {title} {subTitle} />
<PageHeader.Root class="pb-8">
<PageHeader.Heading>Projects I've realized</PageHeader.Heading>
<PageHeader.Description>
Explore some of the projects I worked on in the past.
</PageHeader.Description>
</PageHeader.Root>
<section class="flex justify-center"> <section class="flex justify-center">
<Projects /> <Projects />
</section> </section>
</div>

4
src/routes/projects/+page.ts
View file

@ -1,6 +1,8 @@
/** @type {import('./$types').PageLoad} */ /** @type {import('./$types').PageLoad} */
export function load() { export function load() {
return { return {
title: `Projects` name: `Projects`,
title: `Projects Ive realized`,
subTitle: `Explore some of the projects I worked on in the past.`
}; };
} }

21
src/routes/timeline/+page.svelte
View file

@ -1,17 +1,14 @@
<script lang="ts"> <script lang="ts">
import * as PageHeader from '$lib/components/site/page-header';
import { Timeline } from '$lib/components/site/timeline'; import { Timeline } from '$lib/components/site/timeline';
import { page } from '$app/stores';
import { SiteHeader } from '$lib/components/site';
$: title = $page.data.title;
$: subTitle = $page.data.subTitle;
</script> </script>
<div class="container relative max-w-[980px]"> <SiteHeader {title} {subTitle} />
<PageHeader.Root class="pb-8">
<PageHeader.Heading>Experiences through time</PageHeader.Heading>
<PageHeader.Description>
Achievements in my education, career and personal life.
</PageHeader.Description>
</PageHeader.Root>
<section> <section>
<Timeline /> <Timeline />
</section> </section>
</div>

4
src/routes/timeline/+page.ts
View file

@ -1,6 +1,8 @@
/** @type {import('./$types').PageLoad} */ /** @type {import('./$types').PageLoad} */
export function load() { export function load() {
return { return {
title: `Timeline` name: `Timeline`,
title: `Experiences through time`,
subTitle: `Achievements in my education, career and personal life.`
}; };
} }

21
src/routes/tools/+page.svelte
View file

@ -1,17 +1,14 @@
<script lang="ts"> <script lang="ts">
import * as PageHeader from '$lib/components/site/page-header';
import { Tools } from '$lib/components/site/tools'; import { Tools } from '$lib/components/site/tools';
import { page } from '$app/stores';
import { SiteHeader } from '$lib/components/site';
$: title = $page.data.title;
$: subTitle = $page.data.subTitle;
</script> </script>
<div class="container relative max-w-[980px]"> <SiteHeader {title} {subTitle} />
<PageHeader.Root class="pb-8">
<PageHeader.Heading>Inside my toolbox</PageHeader.Heading>
<PageHeader.Description>
Tools, applications, and software that fuels my development and operations work.
</PageHeader.Description>
</PageHeader.Root>
<section class="flex justify-center"> <section class="flex justify-center">
<Tools /> <Tools />
</section> </section>
</div>

4
src/routes/tools/+page.ts
View file

@ -1,6 +1,8 @@
/** @type {import('./$types').PageLoad} */ /** @type {import('./$types').PageLoad} */
export function load() { export function load() {
return { return {
title: `Tools` name: `Tools`,
title: `Inside my toolbox`,
subTitle: `Tools, applications, and software that fuels my development and operations work.`
}; };
} }