mirror of
https://github.com/bartvdbraak/hellob.art.git
synced 2025-06-29 07:49:10 +00:00
feat: added skeleton as ui toolkit
This commit is contained in:
parent
fede9a2142
commit
3fbf85db06
24 changed files with 695 additions and 204 deletions
|
|
@ -1,18 +1,33 @@
|
|||
<script>
|
||||
import Footer from '../components/Footer.svelte';
|
||||
import Nav from '../components/Nav.svelte';
|
||||
<script lang="ts">
|
||||
import '../theme.postcss';
|
||||
import '@skeletonlabs/skeleton/styles/skeleton.css';
|
||||
import '../app.postcss';
|
||||
import { AppShell } from '@skeletonlabs/skeleton';
|
||||
import Footer from '../lib/components/Footer.svelte';
|
||||
import Navigation from '../lib/components/Navigation.svelte';
|
||||
import Header from '$lib/components/Header.svelte';
|
||||
|
||||
export let routes = [
|
||||
{ url: "/", label: "Home" },
|
||||
{ url: "/projects", label: "Projects" },
|
||||
{ url: "/about", label: "About" },
|
||||
// { url: "/blog", label: "Blog" },
|
||||
{ url: "/contact", label: "Contact" }
|
||||
]
|
||||
export let routes = [
|
||||
{ url: '/', label: 'Home' },
|
||||
{ url: '/projects', label: 'Projects' },
|
||||
{ url: '/tools', label: 'Tools' },
|
||||
{ url: '/blog', label: 'Blog' }
|
||||
];
|
||||
</script>
|
||||
|
||||
<main>
|
||||
<Nav {routes} />
|
||||
<slot />
|
||||
<Footer />
|
||||
</main>
|
||||
<AppShell>
|
||||
<svelte:fragment slot="header">
|
||||
<Header />
|
||||
</svelte:fragment>
|
||||
<svelte:fragment slot="sidebarLeft">
|
||||
<Navigation {routes} />
|
||||
</svelte:fragment>
|
||||
<!-- Router Slot -->
|
||||
<div class="container p-10 mx-auto">
|
||||
<slot />
|
||||
</div>
|
||||
<!-- ---- / ---- -->
|
||||
<svelte:fragment slot="pageFooter">
|
||||
<Footer />
|
||||
</svelte:fragment>
|
||||
</AppShell>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,60 @@
|
|||
<!-- About.svelte -->
|
||||
<script>
|
||||
import { calculateAge } from "$lib/calculate-age";
|
||||
|
||||
export let age = calculateAge('1994-10-18');
|
||||
export let location = "Zaandam, Netherlands";
|
||||
export let loves = "cats and whiskey";
|
||||
export let passion = "solving problems with code and automation";
|
||||
import { calculateAge } from '$lib/calculate-age';
|
||||
</script>
|
||||
|
||||
<main>
|
||||
<h1>Hello, I'm Bart van der Braak!</h1>
|
||||
<p>I'm {age} years old</p>
|
||||
<p>I'm located in {location}.</p>
|
||||
<p>I love {loves}.</p>
|
||||
<p>I'm passionate about {passion}.</p>
|
||||
</main>
|
||||
<main class="container mx-auto px-4 py-8 text-left">
|
||||
<h2 class="text-3xl font-bold mb-4">About Me</h2>
|
||||
|
||||
<p class="text-lg leading-relaxed mb-8">
|
||||
Welcome to my homepage! I'm a passionate DevOps engineer based in Zaandam, Netherlands. At {calculateAge("1994-10-18")}
|
||||
years old, I've already gathered a wealth of experience and expertise in the world of
|
||||
technology. From programming in Python, Javascript, and Bash to utilizing cutting-edge
|
||||
technologies like Terraform, Bicep, and Kubernetes, I've honed my skills to drive efficient and
|
||||
innovative solutions. My journey in the tech industry began during my Information Sciences
|
||||
studies, where I fell in love with data-driven projects and statistical learning. This passion
|
||||
led me to explore languages like Python and LaTeX, enabling me to bring ideas to life through
|
||||
powerful data management and visualization.
|
||||
</p>
|
||||
|
||||
<h2 class="text-3xl font-bold mb-4">Empowering the Cloud with Azure</h2>
|
||||
|
||||
<p class="text-lg leading-relaxed mb-8">
|
||||
My career took off when I joined Triple as a DevOps Engineer. At Triple, I've embraced the world
|
||||
of Azure and Azure DevOps, mastering the intricacies of cloud architecture and deployment.
|
||||
Holding certifications like AZ-104 and CKA has further solidified my expertise, empowering me to
|
||||
build and manage robust, scalable, and secure cloud environments. My proficiency in
|
||||
containerization and Kubernetes has allowed me to take application development to new heights,
|
||||
ensuring seamless and efficient deployment at scale.
|
||||
</p>
|
||||
|
||||
<h2 class="text-3xl font-bold mb-4">Solving Problems with Code and Automation</h2>
|
||||
|
||||
<p class="text-lg leading-relaxed mb-8">
|
||||
As a DevOps engineer, I thrive on solving complex challenges with the power of code and
|
||||
automation. My passion for streamlining workflows led me to create internal tooling using APIs,
|
||||
boosting productivity for myself and my colleagues. Outside of work, I enjoy taking on side
|
||||
projects that push my boundaries, expanding my skill set, and exploring new technologies. I
|
||||
strongly believe that innovation and continuous learning are key drivers of success in the
|
||||
ever-evolving tech landscape.
|
||||
</p>
|
||||
|
||||
<h2 class="text-3xl font-bold mb-4">Cat Lover and Whiskey Enthusiast</h2>
|
||||
|
||||
<p class="text-lg leading-relaxed mb-8">
|
||||
When I'm not busy crafting technological solutions, you'll often find me indulging in two of my
|
||||
favorite passions: cats and whiskey. There's something special about the companionship of cats,
|
||||
and their playful antics never fail to bring joy to my day. As for whiskey, I appreciate the
|
||||
intricate flavors and the artistry behind its production. I find both interests to be a
|
||||
delightful way to unwind and recharge my creative energies.
|
||||
</p>
|
||||
|
||||
<h2 class="text-3xl font-bold mb-4">Let's Connect</h2>
|
||||
|
||||
<p class="text-lg leading-relaxed">
|
||||
I'm always eager to collaborate on exciting projects and explore new opportunities. Whether it's
|
||||
discussing data-driven ideas, cloud architecture, or just sharing cute cat pictures, I'd love to
|
||||
connect with like-minded individuals. Feel free to reach out to me through the provided contact
|
||||
information. Let's work together to create something extraordinary!
|
||||
</p>
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -1,19 +0,0 @@
|
|||
<!-- About.svelte -->
|
||||
<script>
|
||||
export let proficientLanguages = ["Python", "Javascript", "Bash"];
|
||||
export let proficientTechnologies = ["Terraform", "Bicep"];
|
||||
export let workPlace = "Triple, Alkmaar";
|
||||
export let workRole = "DevOps engineer";
|
||||
export let azureExperience = "Azure and Azure DevOps";
|
||||
export let containerSkills = "containers and Kubernetes";
|
||||
export let certifications = ["AZ-104", "CKA"];
|
||||
</script>
|
||||
|
||||
<main>
|
||||
<h1>About Me</h1>
|
||||
<p>I'm a {workRole} at {workPlace}.</p>
|
||||
<p>I'm proficient in languages like {proficientLanguages.join(", ")} and technologies such as {proficientTechnologies.join(", ")}.</p>
|
||||
<p>I have extensive experience with {azureExperience}.</p>
|
||||
<p>I'm keen on utilizing {containerSkills}.</p>
|
||||
<p>Certifications I've obtained: {certifications.join(", ")}.</p>
|
||||
</main>
|
||||
4
src/routes/blog/+page.svelte
Normal file
4
src/routes/blog/+page.svelte
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<main class="text-center">
|
||||
<h2 class="h2">Blog Posts</h2>
|
||||
</main>
|
||||
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
<main>
|
||||
<h1>Get in Touch!</h1>
|
||||
<p>If you want to chat about cats, whiskey, or anything else, don't hesitate to reach out:</p>
|
||||
<a href="mailto:bart@vanderbraak.nl" class="contact-email">bart@vanderbraak.nl</a>
|
||||
<p>Looking forward to hearing from you!</p>
|
||||
</main>
|
||||
|
||||
<style>
|
||||
main {
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.contact-email {
|
||||
font-size: 1.2rem;
|
||||
text-decoration: none;
|
||||
color: #007bff;
|
||||
transition: color 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.contact-email:hover {
|
||||
color: #0056b3;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,67 +1,71 @@
|
|||
<main>
|
||||
<h1>My Projects</h1>
|
||||
<main class="text-center">
|
||||
<h2 class="h2">My Projects</h2>
|
||||
|
||||
<div class="project">
|
||||
<h2>Triple Ticket Dashboard</h2>
|
||||
<p>Dec 2021 - Present</p>
|
||||
<p>The Ticket Dashboard consolidates tickets from various sources into a centralized view.</p>
|
||||
</div>
|
||||
<div class="project">
|
||||
<h2>Triple Ticket Dashboard</h2>
|
||||
<p>Dec 2021 - Present</p>
|
||||
<p>The Ticket Dashboard consolidates tickets from various sources into a centralized view.</p>
|
||||
</div>
|
||||
|
||||
<div class="project">
|
||||
<h2>Triple Videowall</h2>
|
||||
<p>May 2022 - Sep 2022</p>
|
||||
<p>An internal application to control an impressive 6x5 monitor setup with a user-friendly frontend built on Next.js and a powerful backend developed in Golang.</p>
|
||||
</div>
|
||||
<div class="project">
|
||||
<h2>Triple Videowall</h2>
|
||||
<p>May 2022 - Sep 2022</p>
|
||||
<p>
|
||||
An internal application to control an impressive 6x5 monitor setup with a user-friendly
|
||||
frontend built on Next.js and a powerful backend developed in Golang.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="project">
|
||||
<h2>Zaantje</h2>
|
||||
<p>Jan 2020 - Jan 2021</p>
|
||||
<p>A SPA crafted with Nuxt.js and Vue.js, backed by Sanity CMS, taking you on a virtual tour of Zaandam, showcasing locations of famous music videos.</p>
|
||||
</div>
|
||||
<div class="project">
|
||||
<h2>Zaantje</h2>
|
||||
<p>Jan 2020 - Jan 2021</p>
|
||||
<p>
|
||||
A SPA crafted with Nuxt.js and Vue.js, backed by Sanity CMS, taking you on a virtual tour of
|
||||
Zaandam, showcasing locations of famous music videos.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h2>Open Source Contributions</h2>
|
||||
|
||||
<div class="contribution">
|
||||
<h3>microsoft/terraform-provider-azuredevops</h3>
|
||||
<p>Terraform Azure DevOps provider</p>
|
||||
</div>
|
||||
<h2>Open Source Contributions</h2>
|
||||
|
||||
<div class="contribution">
|
||||
<h3>iKenndac/Tofu</h3>
|
||||
<p>An easy-to-use two-factor authentication app for iOS</p>
|
||||
</div>
|
||||
<div class="contribution">
|
||||
<h3>microsoft/terraform-provider-azuredevops</h3>
|
||||
<p>Terraform Azure DevOps provider</p>
|
||||
</div>
|
||||
|
||||
<div class="contribution">
|
||||
<h3>bartvdbraak/SlayerWeightCalculator</h3>
|
||||
<p>A calculator for RuneScape slayer geeks that need to know percentages. (archived)</p>
|
||||
</div>
|
||||
<div class="contribution">
|
||||
<h3>iKenndac/Tofu</h3>
|
||||
<p>An easy-to-use two-factor authentication app for iOS</p>
|
||||
</div>
|
||||
|
||||
<div class="contribution">
|
||||
<h3>bartvdbraak/SlayerWeightCalculator</h3>
|
||||
<p>A calculator for RuneScape slayer geeks that need to know percentages. (archived)</p>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<style>
|
||||
main {
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
h2 {
|
||||
font-size: 2rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.project, .contribution {
|
||||
margin: 1rem auto;
|
||||
padding: 1rem;
|
||||
max-width: 500px;
|
||||
border: 2px solid #007bff;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.project,
|
||||
.contribution {
|
||||
margin: 1rem auto;
|
||||
padding: 1rem;
|
||||
max-width: 500px;
|
||||
border: 2px solid #007bff;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.project p, .contribution p {
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
.project p,
|
||||
.contribution p {
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
4
src/routes/tools/+page.svelte
Normal file
4
src/routes/tools/+page.svelte
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<main class="text-center">
|
||||
<h2 class="h2">My Tools</h2>
|
||||
</main>
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue