mirror of
https://github.com/bartvdbraak/hellob.art.git
synced 2026-03-13 00:49:11 +00:00
feat: rewrite all to use shadcn-svelte
This commit is contained in:
parent
0df260c5a5
commit
b13ece80d5
162 changed files with 3268 additions and 2815 deletions
|
|
@ -1,52 +1,17 @@
|
|||
<script>
|
||||
import ProjectCard from './ProjectCard.svelte';
|
||||
import projects from './projects-cards';
|
||||
<script lang="ts">
|
||||
import * as PageHeader from '$lib/components/site/page-header';
|
||||
import { Projects } from '$lib/components/site/projects';
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>hellob.art — projects</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="Explore a diverse collection of web applications and virtual tours in the portfolio of a passionate DevOps engineer. Discover innovative projects in React, Golang, Next.js, and more."
|
||||
/>
|
||||
</svelte:head>
|
||||
<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>
|
||||
|
||||
<div class="py-6 sm:py-8 lg:py-12 md:mt-8 mx-auto max-w-screen-xl px-4 md:px-8">
|
||||
<h2 class="text-3xl font-bold mb-8">Projects</h2>
|
||||
|
||||
<p class="text-lg leading-relaxed mb-8">
|
||||
Here, you'll find a curated collection of projects that I've either created or contributed to as
|
||||
a passionate DevOps engineer and developer. This portfolio encompasses a diverse range of
|
||||
endeavors, including both public and private projects. With a mix of open-source contributions
|
||||
and private collaborations from my corporate endeavors, this showcase represents my dedication
|
||||
to pushing the boundaries of innovation in various domains.
|
||||
</p>
|
||||
|
||||
<div class="w-full text-token grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{#each projects as { link, headerImage, headerSubTitle, title, description, logo, contributors, date }}
|
||||
{#if link}
|
||||
<a href={link}>
|
||||
<ProjectCard
|
||||
{headerImage}
|
||||
{headerSubTitle}
|
||||
{title}
|
||||
{description}
|
||||
{logo}
|
||||
{contributors}
|
||||
{date}
|
||||
/>
|
||||
</a>
|
||||
{:else}
|
||||
<ProjectCard
|
||||
{headerImage}
|
||||
{headerSubTitle}
|
||||
{title}
|
||||
{description}
|
||||
{logo}
|
||||
{contributors}
|
||||
{date}
|
||||
/>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
<section class="flex justify-center">
|
||||
<Projects />
|
||||
</section>
|
||||
</div>
|
||||
|
|
|
|||
6
src/routes/projects/+page.ts
Normal file
6
src/routes/projects/+page.ts
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
/** @type {import('./$types').PageLoad} */
|
||||
export function load() {
|
||||
return {
|
||||
title: `Projects`
|
||||
};
|
||||
}
|
||||
|
|
@ -1,45 +0,0 @@
|
|||
<script lang="ts">
|
||||
import { Avatar } from '@skeletonlabs/skeleton';
|
||||
|
||||
import type { Project } from './projects-cards';
|
||||
|
||||
export let headerImage: Project['headerImage'];
|
||||
export let headerSubTitle: Project['headerSubTitle'];
|
||||
export let title: Project['title'];
|
||||
export let description: Project['description'];
|
||||
export let logo: Project['logo'];
|
||||
export let contributors: Project['contributors'];
|
||||
export let date: Project['date'];
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="card border border-white/10 bg-white/5 shadow-xl duration-200 hover:bg-white/10 hover:shadow-2xl rounded overflow-hidden"
|
||||
>
|
||||
<header>
|
||||
<enhanced:img
|
||||
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 opacity-50">{headerSubTitle}</header>
|
||||
<span class="h3" data-toc-ignore>{title}</span>
|
||||
<article>
|
||||
<p>
|
||||
{description}
|
||||
</p>
|
||||
</article>
|
||||
</div>
|
||||
<hr class="opacity-50" />
|
||||
<footer class="p-4 flex justify-start items-center space-x-4">
|
||||
<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}
|
||||
<small>{new Date(date).toLocaleDateString()}</small>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
|
@ -1,71 +0,0 @@
|
|||
import keyweaveImage from '$lib/assets/projects/keyweave-terminal.jpg?enhanced';
|
||||
import keyweaveLogo from '$lib/assets/projects/keyweave-logo.png';
|
||||
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';
|
||||
|
||||
interface Contributor {
|
||||
name: string;
|
||||
imageSrc: string;
|
||||
}
|
||||
|
||||
export interface Project {
|
||||
link?: string;
|
||||
headerImage: string;
|
||||
headerSubTitle: string;
|
||||
title: string;
|
||||
description: string;
|
||||
logo: string;
|
||||
contributors: Contributor[];
|
||||
date: string;
|
||||
}
|
||||
|
||||
const projects: Project[] = [
|
||||
{
|
||||
link: 'https://github.com/bartvdbraak/keyweave',
|
||||
headerImage: keyweaveImage,
|
||||
headerSubTitle: 'Open Source Project',
|
||||
title: 'Keyweave',
|
||||
description: `Keyweave is an open-source tool crafted in Rust to seamlessly fetch secrets from Azure Key Vault
|
||||
and weave them into a convenient .env file.`,
|
||||
logo: keyweaveLogo,
|
||||
contributors: [],
|
||||
date: '11-05-2023'
|
||||
},
|
||||
{
|
||||
headerImage: videowallImage,
|
||||
headerSubTitle: 'Private Project',
|
||||
title: 'Videowall',
|
||||
description: `An internal application to control an impressive 6x5 monitor setup with a user-friendly
|
||||
frontend built with React and Next.js utilizing a powerful backend developed in Golang.`,
|
||||
logo: videowallLogo,
|
||||
contributors: [],
|
||||
date: '05-31-2022'
|
||||
},
|
||||
{
|
||||
headerImage: ticketDashboardImage,
|
||||
headerSubTitle: 'Private Project',
|
||||
title: 'Ticket Dashboard',
|
||||
description: `Web app that consolidates tickets from various sources into one view for easy navigation, filters, and search for efficient
|
||||
ticket management. Developed with Next.js for frontend and Golang for backend.`,
|
||||
logo: ticketDashboardLogo,
|
||||
contributors: [],
|
||||
date: '12-14-2021'
|
||||
},
|
||||
{
|
||||
link: 'https://zaantje.com',
|
||||
headerImage: zaantjeImage,
|
||||
headerSubTitle: 'Personal Project',
|
||||
title: 'Zaantje',
|
||||
description: `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.`,
|
||||
logo: zaantjeLogo,
|
||||
contributors: [],
|
||||
date: '01-01-2020'
|
||||
}
|
||||
];
|
||||
|
||||
export default projects;
|
||||
Loading…
Add table
Add a link
Reference in a new issue