mirror of
https://github.com/bartvdbraak/hellob.art.git
synced 2025-04-26 17:11:21 +00:00
Merge pull request #219 from bartvdbraak/feat/project-urls
Add project and repo URLs
This commit is contained in:
GitHub
commit
81a46a325c
3 changed files with 64 additions and 48 deletions
|
|
@ -1,11 +1,12 @@
|
|||
<script lang="ts">
|
||||
import { Circle } from 'radix-icons-svelte';
|
||||
import { Circle, GithubLogo, Globe } from 'radix-icons-svelte';
|
||||
import { Calendar, Scale } from 'lucide-svelte';
|
||||
import * as Card from '$lib/components/ui/card';
|
||||
import type { Project } from '$lib/content/projects';
|
||||
import { Button } from '$lib/components/ui/button';
|
||||
|
||||
export let projectsItem: Project;
|
||||
let { logo, title, description, languages, license, year } = projectsItem;
|
||||
let { logo, title, description, gitHubUrl, projectUrl, languages, license, year } = projectsItem;
|
||||
</script>
|
||||
|
||||
<Card.Root class="mb-6 inline-block hover:bg-muted/50">
|
||||
|
|
@ -16,26 +17,42 @@
|
|||
{description}
|
||||
</Card.Description>
|
||||
</div>
|
||||
<div class="justify-self-end">
|
||||
<enhanced:img src={logo} class="rounded-sm" alt={`${title} logo`} />
|
||||
<div class="h-full justify-self-end">
|
||||
<enhanced:img src={logo} class="mb-2 rounded-sm" alt={`${title} logo`} />
|
||||
</div>
|
||||
</Card.Header>
|
||||
<Card.Content>
|
||||
<div class="flex space-x-4 text-sm text-muted-foreground">
|
||||
{#each languages as language}
|
||||
<div class="flex justify-between">
|
||||
<div class="flex space-x-4 text-sm text-muted-foreground">
|
||||
{#each languages as language}
|
||||
<div class="flex items-center">
|
||||
<Circle class="mr-1 h-3 w-3 {language.color}" />
|
||||
{language.name}
|
||||
</div>
|
||||
{/each}
|
||||
<div class="flex items-center">
|
||||
<Circle class="mr-1 h-3 w-3 {language.color}" />
|
||||
{language.name}
|
||||
<Scale class="mr-1 h-3 w-3" />
|
||||
{license}
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<Calendar class="mr-1 h-3 w-3" />
|
||||
{year}
|
||||
</div>
|
||||
{/each}
|
||||
<div class="flex items-center">
|
||||
<Scale class="mr-1 h-3 w-3" />
|
||||
{license}
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<Calendar class="mr-1 h-3 w-3" />
|
||||
{year}
|
||||
</div>
|
||||
{#if gitHubUrl || projectUrl}
|
||||
<div class="flex items-center">
|
||||
{#if gitHubUrl}
|
||||
<Button variant="ghost" size="icon" href={gitHubUrl} target="_blank">
|
||||
<GithubLogo />
|
||||
</Button>
|
||||
{/if}
|
||||
{#if projectUrl}
|
||||
<Button variant="ghost" size="icon" href={projectUrl} target="_blank">
|
||||
<Globe />
|
||||
</Button>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
|
|
|
|||
|
|
@ -5,12 +5,6 @@
|
|||
|
||||
<div class="w-full columns-1 gap-6 md:columns-2">
|
||||
{#each projects as project}
|
||||
{#if project.url}
|
||||
<a href={project.url} target="_blank">
|
||||
<Projects.Item projectsItem={project} />
|
||||
</a>
|
||||
{:else}
|
||||
<Projects.Item projectsItem={project} />
|
||||
{/if}
|
||||
<Projects.Item projectsItem={project} />
|
||||
{/each}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -7,16 +7,20 @@ import omnidashLogo from '$lib/assets/projects/omnidash-logo.png?enhanced';
|
|||
import azureGeocodeMappingLogo from '$lib/assets/projects/azure-geocode-mapping-logo.png?enhanced';
|
||||
import slayerWeightCalcLogo from '$lib/assets/projects/slayerweightcalc-logo.png?enhanced';
|
||||
|
||||
// TODO: Use vite glob import to import all images from a folder and select them based on their name
|
||||
// const gallery = Object.values(import.meta.glob('@assets/asso/*.{png,jpg,jpeg,PNG,JPEG}', { eager: true, as: 'url' }))
|
||||
|
||||
export type ProgrammingLanguage = {
|
||||
name: string;
|
||||
color: string;
|
||||
};
|
||||
|
||||
export type Project = {
|
||||
url?: string;
|
||||
logo: string;
|
||||
title: string;
|
||||
description: string;
|
||||
gitHubUrl?: string;
|
||||
projectUrl?: string;
|
||||
languages: ProgrammingLanguage[];
|
||||
license: string;
|
||||
year: string;
|
||||
|
|
@ -24,11 +28,12 @@ export type Project = {
|
|||
|
||||
const projects: Project[] = [
|
||||
{
|
||||
url: 'https://hellob.art',
|
||||
logo: helloBartLogo,
|
||||
title: 'hellob.art',
|
||||
description:
|
||||
'The website you are currently visiting. A personal portfolio website that regularly gets rebuilt. Currently it has been built in Svelte and SvelteKit and uses shadcn-svelte and Tailwind CSS for component styling.',
|
||||
projectUrl: 'https://hellob.art',
|
||||
gitHubUrl: 'https://github.com/bartvdbraak/hellob.art',
|
||||
year: '2020',
|
||||
license: 'GPLv3',
|
||||
languages: [
|
||||
|
|
@ -39,11 +44,12 @@ const projects: Project[] = [
|
|||
]
|
||||
},
|
||||
{
|
||||
url: 'https://omnidash.io',
|
||||
logo: omnidashLogo,
|
||||
title: 'Omnidash',
|
||||
description:
|
||||
'Omnidash is an open-source dashboard for retrieving ticketing information from various sources and displaying them in a single view.',
|
||||
projectUrl: 'https://omnidash.io',
|
||||
gitHubUrl: 'https://github.com/bartvdbraak/omnidash',
|
||||
year: '2023',
|
||||
license: 'GPLv3',
|
||||
languages: [
|
||||
|
|
@ -54,26 +60,12 @@ const projects: Project[] = [
|
|||
]
|
||||
},
|
||||
{
|
||||
url: 'https://github.com/bartvdbraak/azure-geocode-mapping',
|
||||
logo: azureGeocodeMappingLogo,
|
||||
title: 'azure-geocode-mapping',
|
||||
description:
|
||||
'azure-geocode-mapping is a Python package that generates a mapping of Azure regions to their display names and geocodes.',
|
||||
year: '2023',
|
||||
license: 'MIT',
|
||||
languages: [
|
||||
{
|
||||
name: 'Python',
|
||||
color: 'text-blue-400'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
url: 'https://www.github.com/bartvdbraak/keyweave',
|
||||
logo: keyweaveLogo,
|
||||
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.',
|
||||
gitHubUrl: 'https://www.github.com/bartvdbraak/keyweave',
|
||||
projectUrl: 'https://crates.io/crates/keyweave',
|
||||
year: '2023',
|
||||
license: 'GPLv3',
|
||||
languages: [
|
||||
|
|
@ -87,6 +79,22 @@ const projects: Project[] = [
|
|||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
logo: azureGeocodeMappingLogo,
|
||||
title: 'azure-geocode-mapping',
|
||||
description:
|
||||
'azure-geocode-mapping is a Python package that generates a mapping of Azure regions to their display names and geocodes.',
|
||||
projectUrl: 'https://bartvdbraak.github.io/azure-geocode-mapping/geo.mapping.json',
|
||||
gitHubUrl: 'https://github.com/bartvdbraak/azure-geocode-mapping',
|
||||
year: '2023',
|
||||
license: 'MIT',
|
||||
languages: [
|
||||
{
|
||||
name: 'Python',
|
||||
color: 'text-blue-400'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
logo: videoWallLogo,
|
||||
title: 'Videowall',
|
||||
|
|
@ -124,11 +132,11 @@ const projects: Project[] = [
|
|||
]
|
||||
},
|
||||
{
|
||||
url: 'https://zaantje.com/',
|
||||
logo: zaantjeLogo,
|
||||
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.',
|
||||
projectUrl: 'https://zaantje.com/',
|
||||
year: '2020',
|
||||
license: 'Private',
|
||||
languages: [
|
||||
|
|
@ -139,21 +147,18 @@ const projects: Project[] = [
|
|||
]
|
||||
},
|
||||
{
|
||||
url: 'https://bartvdbraak.github.io/SlayerWeightCalculator/',
|
||||
logo: slayerWeightCalcLogo,
|
||||
title: 'SlayerWeightCalculator',
|
||||
description:
|
||||
'I created this Slayer calculator for OldSchool RuneScape in 2019, but I am no longer maintaining it. As of 23th April 2023, I have decided to publicly archive the repository for it.',
|
||||
projectUrl: 'https://bartvdbraak.github.io/SlayerWeightCalculator/',
|
||||
gitHubUrl: 'https://github.com/bartvdbraak/SlayerWeightCalculator',
|
||||
year: '2019',
|
||||
license: 'BSD-2',
|
||||
languages: [
|
||||
{
|
||||
name: 'Vue.js',
|
||||
color: 'text-emerald-400'
|
||||
},
|
||||
{
|
||||
name: 'Python',
|
||||
color: 'text-blue-400'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue