mirror of
https://github.com/bartvdbraak/hellob.art.git
synced 2025-10-31 12:19:10 +00:00
feat: revamped project page
This commit is contained in:
parent
728d7b1082
commit
01e33dff0c
10 changed files with 89 additions and 59 deletions
|
|
@ -1,50 +1,6 @@
|
|||
<script>
|
||||
import videowallImage from '$lib/assets/videowall.jpeg';
|
||||
import videowallLogo from '$lib/assets/videowall-logo.png';
|
||||
import ticketDashboardImage from '$lib/assets/ticketdashboard.png';
|
||||
import ticketDashboardLogo from '$lib/assets/triple-logo.png';
|
||||
import zaantjeImage from '$lib/assets/zaantje.png';
|
||||
import zaantjeLogo from '$lib/assets/zaantje-logo.png';
|
||||
import ProjectCard from '$lib/components/ProjectCard.svelte';
|
||||
|
||||
let projects = [
|
||||
{
|
||||
id: 1,
|
||||
link: '#',
|
||||
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: '2021'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
link: '#',
|
||||
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: '2020'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
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'
|
||||
}
|
||||
];
|
||||
import ProjectCard from './ProjectCard.svelte';
|
||||
import projects from './projects-cards';
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
|
|
@ -56,7 +12,7 @@
|
|||
</svelte:head>
|
||||
|
||||
<main class="container mx-auto px-4 py-8 text-left">
|
||||
<h2 class="text-3xl font-bold mb-8">My Projects</h2>
|
||||
<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
|
||||
|
|
|
|||
44
src/routes/projects/ProjectCard.svelte
Normal file
44
src/routes/projects/ProjectCard.svelte
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
<script lang="ts">
|
||||
import { Avatar } from '@skeletonlabs/skeleton';
|
||||
|
||||
import type { Project } from './projects-cards';
|
||||
|
||||
export let link: Project['link'];
|
||||
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>
|
||||
|
||||
<a class="card bg-initial card-hover overflow-hidden" href={link}>
|
||||
<header>
|
||||
<img
|
||||
src={headerImage}
|
||||
class="bg-black/50 w-full aspect-[21/9] object-cover object-top"
|
||||
alt="Post"
|
||||
/>
|
||||
</header>
|
||||
<div class="p-4 space-y-4">
|
||||
<header class="h6">{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">
|
||||
<Avatar src={logo} width="w-8" />
|
||||
<div class="flex-auto flex justify-between items-center">
|
||||
{#each contributors as contributor}
|
||||
<Avatar src={contributor.imageSrc} width="w-8" />
|
||||
{/each}
|
||||
|
||||
<small>{new Date(date).toLocaleDateString()}</small>
|
||||
</div>
|
||||
</footer>
|
||||
</a>
|
||||
15
src/routes/projects/projects-assets.ts
Normal file
15
src/routes/projects/projects-assets.ts
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
import videowallImage from '$lib/assets/projects/videowall.jpeg';
|
||||
import videowallLogo from '$lib/assets/projects/videowall-logo.png';
|
||||
import ticketDashboardImage from '$lib/assets/projects/ticketdashboard.png';
|
||||
import ticketDashboardLogo from '$lib/assets/projects/triple-logo.png';
|
||||
import zaantjeImage from '$lib/assets/projects/zaantje.png';
|
||||
import zaantjeLogo from '$lib/assets/projects/zaantje-logo.png';
|
||||
|
||||
export {
|
||||
videowallImage,
|
||||
videowallLogo,
|
||||
ticketDashboardImage,
|
||||
ticketDashboardLogo,
|
||||
zaantjeImage,
|
||||
zaantjeLogo
|
||||
};
|
||||
60
src/routes/projects/projects-cards.ts
Normal file
60
src/routes/projects/projects-cards.ts
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
import {
|
||||
ticketDashboardImage,
|
||||
ticketDashboardLogo,
|
||||
videowallImage,
|
||||
videowallLogo,
|
||||
zaantjeImage,
|
||||
zaantjeLogo
|
||||
} from './projects-assets';
|
||||
|
||||
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[] = [
|
||||
{
|
||||
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: '2021'
|
||||
},
|
||||
{
|
||||
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: '2020'
|
||||
},
|
||||
{
|
||||
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'
|
||||
}
|
||||
];
|
||||
|
||||
export default projects;
|
||||
Loading…
Add table
Add a link
Reference in a new issue