80 lines
2.0 KiB
Svelte
80 lines
2.0 KiB
Svelte
<script lang="ts">
|
|
import HackCard from "$lib/components/HackCard.svelte";
|
|
|
|
type Card = {
|
|
title: string;
|
|
description: string;
|
|
image?: string;
|
|
link?: string;
|
|
repo?: string;
|
|
date?: string;
|
|
tags?: string[];
|
|
featured?: boolean;
|
|
};
|
|
|
|
// Sample data — replace or enhance as you add real entries
|
|
const cards: Card[] = [
|
|
{
|
|
title: "QuickMap — Live Mapping",
|
|
description:
|
|
"Realtime map-sharing tool built during the 48h MapHack. Streamlined tile sync and offline caching.",
|
|
image: "/src/lib/images/project-map.png",
|
|
link: "https://example.com/quickmap",
|
|
repo: "https://github.com/SirBlobby/quickmap",
|
|
date: "Aug 2024",
|
|
tags: ["JS", "PWA", "Maps"],
|
|
featured: true,
|
|
},
|
|
{
|
|
title: "BlobChat — Minimal Chatbot",
|
|
description:
|
|
"A tiny chat UI and embeddable bot for community sites. Built with accessibility in mind.",
|
|
image: "/src/lib/images/project-chat.png",
|
|
repo: "https://github.com/SirBlobby/blobchat",
|
|
date: "Nov 2023",
|
|
tags: ["Svelte", "Accessibility"],
|
|
},
|
|
{
|
|
title: "GameJam Runner",
|
|
description:
|
|
"Competition runner for quick prototyping. Handles assets, scoring, and results publishing.",
|
|
image: "/src/lib/images/project-game.png",
|
|
link: "https://example.com/gamejam-runner",
|
|
date: "May 2025",
|
|
tags: ["Game", "Tooling"],
|
|
},
|
|
];
|
|
</script>
|
|
|
|
<section class="container mx-auto py-12 px-4">
|
|
<div class="grid p-4 w-full h-fit">
|
|
<main>
|
|
<div
|
|
class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 items-stretch"
|
|
>
|
|
{#each cards as c}
|
|
<div class="h-full">
|
|
<HackCard
|
|
title={c.title}
|
|
description={c.description}
|
|
image={c.image}
|
|
link={c.link}
|
|
repo={c.repo}
|
|
date={c.date}
|
|
tags={c.tags}
|
|
featured={c.featured}
|
|
/>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</section>
|
|
|
|
<style lang="postcss">
|
|
/* page-level tweaks */
|
|
.container {
|
|
max-width: 1200px;
|
|
}
|
|
</style>
|