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

feat: added project cards and content

Browse source
This commit is contained in:
Bart van der Braak 2023-07-27 12:46:23 +02:00
parent 00f23425e2
commit 1a366172fc
11 changed files with 115 additions and 79 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,71 +1,52 @@
<main class="text-center">
<h2 class="h2">My Projects</h2>
<script>
import videowallImage from '$lib/assets/videowall-irl.jpeg';
import tripleLogo from '$lib/assets/triple-logo.png';
import zaantjeImage from '$lib/assets/zaantje-3d.png';
import zaantjeLogo from '$lib/assets/zaantje-logo.png';
import ProjectCard from '$lib/components/ProjectCard.svelte';
<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>
let projects = [
{
id: 1,
link: '#',
headerImage: videowallImage,
headerSubTitle: 'Internal Project',
title: 'Videowall',
description: `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.`,
logo: tripleLogo,
contributors: [],
date: '2021'
},
{
id: 2,
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: '2020'
}
];
</script>
<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>
<h2>Open Source Contributions</h2>
<div class="contribution">
<h3>microsoft/terraform-provider-azuredevops</h3>
<p>Terraform Azure DevOps provider</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>
<main class="container mx-auto px-4 py-8 text-left">
<h2 class="text-3xl font-bold mb-8">My Projects</h2>
<div class="w-full text-token grid grid-cols-1 md:grid-cols-2 gap-4">
{#each projects as project}
<ProjectCard
link={project.link}
headerImage={project.headerImage}
headerSubTitle={project.headerSubTitle}
title={project.title}
description={project.description}
logo={project.logo}
contributors={project.contributors}
date={project.date}
/>
{/each}
</div>
</main>
<style>
h1 {
font-size: 2.5rem;
margin-bottom: 1rem;
}
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 p,
.contribution p {
margin: 0.5rem 0;
}
</style>