mirror of
https://github.com/bartvdbraak/hellob.art.git
synced 2025-06-29 07:49:10 +00:00
refactor: distinctive re-use of site header and navbar rename
This commit is contained in:
parent
3bb7737625
commit
f9dfaa2fd2
13 changed files with 188 additions and 179 deletions
|
|
@ -1,23 +1,23 @@
|
|||
<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 { cn } from '$lib/utils';
|
||||
import johnTravoltaGif from '$lib/assets/john-travolta.gif';
|
||||
import { page } from '$app/stores';
|
||||
import { SiteHeader } from '$lib/components/site';
|
||||
</script>
|
||||
|
||||
<div class="container relative max-w-[980px] pb-10">
|
||||
<PageHeader.Root>
|
||||
<PageHeader.Heading>{$page.error?.message}</PageHeader.Heading>
|
||||
<PageHeader.Description>This page is not available.</PageHeader.Description>
|
||||
<p class="text-sm text-orange-700 dark:text-orange-400">
|
||||
You can try going back to the home page.
|
||||
</p>
|
||||
<div class="flex w-full items-center justify-center space-x-4 py-4">
|
||||
<a href="/" class={cn(buttonVariants())}> Return Home </a>
|
||||
</div>
|
||||
</PageHeader.Root>
|
||||
<section class="flex">
|
||||
<img src={johnTravoltaGif} alt="John travolta unable to find your page" class="mx-auto w-1/2" />
|
||||
</section>
|
||||
</div>
|
||||
<SiteHeader
|
||||
title={`${$page.error?.message}`}
|
||||
subTitle={`This page is currently unavailable. Please try again later.`}
|
||||
>
|
||||
<p class="text-sm text-orange-700 dark:text-orange-400">
|
||||
You can try going back to the home page.
|
||||
</p>
|
||||
<div class="flex w-full items-center justify-center space-x-4 py-4">
|
||||
<a href="/" class={cn(buttonVariants())}> Return Home </a>
|
||||
</div>
|
||||
</SiteHeader>
|
||||
|
||||
<section class="flex">
|
||||
<img src={johnTravoltaGif} alt="John travolta unable to find your page" class="mx-auto w-1/2" />
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<script lang="ts">
|
||||
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 { ModeWatcher } from 'mode-watcher';
|
||||
import { fly } from 'svelte/transition';
|
||||
|
|
@ -17,8 +17,8 @@
|
|||
<Metadata />
|
||||
|
||||
<div class="relative flex min-h-screen flex-col" id="page">
|
||||
<SiteHeader />
|
||||
<main class="mb-4 flex-1">
|
||||
<SiteNavBar />
|
||||
<main class="container relative mb-4 max-w-[980px] flex-1">
|
||||
{#key data.url}
|
||||
<div in:fly={{ x: -200, duration: 200, delay: 200 }} out:fly={{ x: 200, duration: 200 }}>
|
||||
<slot />
|
||||
|
|
|
|||
|
|
@ -1,81 +1,78 @@
|
|||
<script lang="ts">
|
||||
import * as PageHeader from '$lib/components/site/page-header';
|
||||
import { ImageFade } from '$lib/components/site';
|
||||
import { Icons } from '$lib/components/site/icons';
|
||||
import { page } from '$app/stores';
|
||||
import { Icons, ImageFade } from '$lib/components/site';
|
||||
import { SiteHeader } from '$lib/components/site';
|
||||
import { buttonVariants } from '$lib/components/ui/button';
|
||||
import { siteConfig } from '$lib/config/site';
|
||||
import { cn } from '$lib/utils';
|
||||
|
||||
$: title = $page.data.title;
|
||||
$: subTitle = $page.data.subTitle;
|
||||
</script>
|
||||
|
||||
<div class="container relative max-w-[980px] pb-10">
|
||||
<PageHeader.Root class="pb-8">
|
||||
<PageHeader.Heading>I made this for you</PageHeader.Heading>
|
||||
<PageHeader.Description>
|
||||
Featuring current work and studies in a SvelteKit-based portfolio.
|
||||
</PageHeader.Description>
|
||||
<p class="text-center text-sm text-green-700 dark:text-green-400">
|
||||
Inspired by others, I share my open-source derived work with the community.
|
||||
</p>
|
||||
<div class="flex w-full items-center justify-center space-x-4 py-4 md:pb-10">
|
||||
<a href="/projects" class={cn(buttonVariants())}> My Projects </a>
|
||||
<a
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
href={siteConfig.links.gitHubProfile}
|
||||
class={cn(buttonVariants({ variant: 'outline' }))}
|
||||
>
|
||||
<Icons.gitHub class="mr-2 h-4 w-4" />
|
||||
GitHub
|
||||
</a>
|
||||
</div>
|
||||
</PageHeader.Root>
|
||||
<section class="flex">
|
||||
<div class="border-grey/15 relative border-y pb-16 pt-10 dark:border-white/20">
|
||||
<SiteHeader {title} {subTitle}>
|
||||
<p class="text-center text-sm text-green-700 dark:text-green-400">
|
||||
Inspired by others, I share my open-source derived work with the community.
|
||||
</p>
|
||||
<div class="flex w-full items-center justify-center space-x-4 py-4 md:pb-10">
|
||||
<a href="/projects" class={cn(buttonVariants())}> My Projects </a>
|
||||
<a
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
href={siteConfig.links.gitHubProfile}
|
||||
class={cn(buttonVariants({ variant: 'outline' }))}
|
||||
>
|
||||
<Icons.gitHub class="mr-2 h-4 w-4" />
|
||||
GitHub
|
||||
</a>
|
||||
</div>
|
||||
</SiteHeader>
|
||||
<section class="flex">
|
||||
<div class="border-grey/15 relative border-t pb-16 pt-10 dark:border-white/20">
|
||||
<div
|
||||
class="pointer-events-none absolute left-[00%] top-0 h-40 w-[100%] select-none overflow-hidden"
|
||||
>
|
||||
<div
|
||||
class="pointer-events-none absolute left-[00%] top-0 h-40 w-[100%] select-none overflow-hidden"
|
||||
>
|
||||
<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%)]"
|
||||
></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%)]"
|
||||
></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>
|
||||
<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">
|
||||
<ImageFade />
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<ImageFade />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
/** @type {import('./$types').PageLoad} */
|
||||
export function load() {
|
||||
return {
|
||||
title: `Home`
|
||||
name: `Home`,
|
||||
title: `I made this for you`,
|
||||
subTitle: `Featuring current work and studies in a SvelteKit-based portfolio.`
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,17 +1,14 @@
|
|||
<script lang="ts">
|
||||
import * as PageHeader from '$lib/components/site/page-header';
|
||||
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>
|
||||
|
||||
<div class="container relative max-w-[980px]">
|
||||
<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>
|
||||
<SiteHeader {title} {subTitle} />
|
||||
|
||||
<section class="flex justify-center">
|
||||
<Projects />
|
||||
</section>
|
||||
</div>
|
||||
<section class="flex justify-center">
|
||||
<Projects />
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
/** @type {import('./$types').PageLoad} */
|
||||
export function load() {
|
||||
return {
|
||||
title: `Projects`
|
||||
name: `Projects`,
|
||||
title: `Projects Ive realized`,
|
||||
subTitle: `Explore some of the projects I worked on in the past.`
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,17 +1,14 @@
|
|||
<script lang="ts">
|
||||
import * as PageHeader from '$lib/components/site/page-header';
|
||||
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>
|
||||
|
||||
<div class="container relative max-w-[980px]">
|
||||
<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>
|
||||
<SiteHeader {title} {subTitle} />
|
||||
|
||||
<section>
|
||||
<Timeline />
|
||||
</section>
|
||||
</div>
|
||||
<section>
|
||||
<Timeline />
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
/** @type {import('./$types').PageLoad} */
|
||||
export function load() {
|
||||
return {
|
||||
title: `Timeline`
|
||||
name: `Timeline`,
|
||||
title: `Experiences through time`,
|
||||
subTitle: `Achievements in my education, career and personal life.`
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,17 +1,14 @@
|
|||
<script lang="ts">
|
||||
import * as PageHeader from '$lib/components/site/page-header';
|
||||
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>
|
||||
|
||||
<div class="container relative max-w-[980px]">
|
||||
<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>
|
||||
<SiteHeader {title} {subTitle} />
|
||||
|
||||
<section class="flex justify-center">
|
||||
<Tools />
|
||||
</section>
|
||||
</div>
|
||||
<section class="flex justify-center">
|
||||
<Tools />
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
/** @type {import('./$types').PageLoad} */
|
||||
export function load() {
|
||||
return {
|
||||
title: `Tools`
|
||||
name: `Tools`,
|
||||
title: `Inside my toolbox`,
|
||||
subTitle: `Tools, applications, and software that fuels my development and operations work.`
|
||||
};
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue