Skip to content

Commit 8020131

Browse files
DiscusserDiscusser
committed
Switch from tables to cards for projects
1 parent 763dc10 commit 8020131

File tree

7 files changed

+105
-75
lines changed

7 files changed

+105
-75
lines changed

‎src/lib/components/projects/ProjectCard.svelte‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<script lang="ts">
2+
import * as Card from '$lib/components/ui/card/index.js';
3+
import type { Project } from '@/constants/projects';
4+
import { cn } from '@/utils';
5+
import { IconBrandGithub } from '@tabler/icons-svelte';
6+
import { Button } from '@/components/ui/button';
7+
import { getGithubURLForProject, getPageURLForProject } from '@/utils/index';
8+
9+
const {
10+
project,
11+
class: className,
12+
...restProps
13+
}: {
14+
project: Project;
15+
class?: string;
16+
} = $props();
17+
</script>
18+
19+
<div class={cn('flex', className)} {...restProps}>
20+
<Card.Root class="flex-grow justify-between">
21+
<Card.Header>
22+
<Card.Title>
23+
<div class="relative flex">
24+
{#if project.hasPage}
25+
<a href={getPageURLForProject(project)} class="text-blue-500">{project.label}</a>
26+
{:else}
27+
<span class="text-muted-foreground">{project.label}</span>
28+
{/if}
29+
{#if project.hasGithub}
30+
<Button
31+
class="absolute right-0 hover:cursor-pointer"
32+
variant="ghost"
33+
size="icon"
34+
href={getGithubURLForProject(project)}
35+
target="_blank"
36+
>
37+
<IconBrandGithub />
38+
</Button>
39+
{/if}
40+
</div>
41+
</Card.Title>
42+
<div class="mt-1 flex flex-wrap space-x-1 font-normal">
43+
<span class="text-muted-foreground bg-muted mb-1 rounded-md px-1 py-0.5 text-xs">
44+
{project.category}
45+
</span>
46+
</div>
47+
</Card.Header>
48+
<Card.Content class="text-muted-foreground">
49+
{project.notes}
50+
</Card.Content>
51+
</Card.Root>
52+
</div>

‎src/lib/components/projects/ProjectsTable.svelte‎

Lines changed: 0 additions & 60 deletions
This file was deleted.

‎src/routes/projects/+page.svelte‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
<script lang="ts">
2-
import ProjectsTable from '$lib/components/projects/ProjectsTable.svelte';
2+
import ProjectCard from '@/components/projects/ProjectCard.svelte';
3+
import { projects } from '@/constants/projects';
34
</script>
45

56
<div class="flex flex-col space-y-4">
6-
<p class="text-2xl font-bold text-foreground">Projects</p>
7+
<p class="text-foreground text-2xl font-bold">Projects</p>
78
<p>
89
I've been coding for at least 5 years now, but for most of that time period I was not taking it
910
very seriously. Up to this point, I have tried out many different languages, and I have taken a
@@ -22,5 +23,10 @@
2223
<a class="text-blue-500" target="_blank" href="https://github.com/Discusser">GitHub</a> profile
2324
</p>
2425
<p>You can find a non-exhaustive list of my projects below:</p>
25-
<ProjectsTable />
26+
27+
<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
28+
{#each projects as project}
29+
<ProjectCard {project} />
30+
{/each}
31+
</div>
2632
</div>

‎src/routes/projects/cpp/+page.svelte‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,23 @@
11
<script lang="ts">
2-
import ProjectsTable from '$lib/components/projects/ProjectsTable.svelte';
2+
import ProjectCard from '@/components/projects/ProjectCard.svelte';
3+
import { Category, projects } from '@/constants/projects';
34
</script>
45

56
<div class="flex flex-col space-y-4">
6-
<p class="text-2xl font-bold text-foreground">C/C++</p>
7+
<p class="text-foreground text-2xl font-bold">C/C++</p>
78
<p>
89
I've mainly used C++ so far to create simple command line programs, GUI apps with GTK, and to
910
learn a bit about rendering with OpenGL. I'd like to say I have some experience with the
1011
language but it's very complicated and quite old, so I'm basically a beginner compared to some
1112
other people.
1213
</p>
1314
<p>You can find most of my C++ projects here:</p>
14-
<ProjectsTable categories={['cpp']} />
15+
16+
<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
17+
{#each projects as project}
18+
{#if project.category == Category.Cpp}
19+
<ProjectCard {project} />
20+
{/if}
21+
{/each}
22+
</div>
1523
</div>

‎src/routes/projects/other/+page.svelte‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,17 @@
11
<script lang="ts">
2-
import ProjectsTable from '$lib/components/projects/ProjectsTable.svelte';
2+
import ProjectCard from '@/components/projects/ProjectCard.svelte';
3+
import { Category, projects } from '@/constants/projects';
34
</script>
45

56
<div class="flex flex-col space-y-4">
6-
<p class="text-2xl font-bold text-foreground">Other</p>
7+
<p class="text-foreground text-2xl font-bold">Other</p>
78
<p>On this page you can find all my projects that don't fit into any of the other categories:</p>
8-
<ProjectsTable categories={['other']} />
9+
10+
<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
11+
{#each projects as project}
12+
{#if project.category == Category.Other}
13+
<ProjectCard {project} />
14+
{/if}
15+
{/each}
16+
</div>
917
</div>

‎src/routes/projects/python/+page.svelte‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
<script lang="ts">
2-
import ProjectsTable from '$lib/components/projects/ProjectsTable.svelte';
2+
import ProjectCard from '@/components/projects/ProjectCard.svelte';
3+
import { Category, projects } from '@/constants/projects';
34
</script>
45

56
<div class="flex flex-col space-y-4">
6-
<p class="text-2xl font-bold text-foreground">Python</p>
7+
<p class="text-foreground text-2xl font-bold">Python</p>
78
<p>
89
In my opinion, Python is an amazing language for scripting, but it can get quite cumbersome to
910
use for more complicated purposes. The main thing that I dislike is the lack of real types
@@ -35,5 +36,12 @@
3536
shapes, but at the cost of performance.
3637
</p>
3738
<p>You can find most of my Python projects here:</p>
38-
<ProjectsTable categories={['python']} />
39+
40+
<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
41+
{#each projects as project}
42+
{#if project.category == Category.Python}
43+
<ProjectCard {project} />
44+
{/if}
45+
{/each}
46+
</div>
3947
</div>

‎src/routes/projects/web/+page.svelte‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
<script lang="ts">
2-
import ProjectsTable from '$lib/components/projects/ProjectsTable.svelte';
2+
import ProjectCard from '@/components/projects/ProjectCard.svelte';
3+
import { Category, projects } from '@/constants/projects';
34
</script>
45

56
<div class="flex flex-col space-y-4">
6-
<p class="text-2xl font-bold text-foreground">Web</p>
7+
<p class="text-foreground text-2xl font-bold">Web</p>
78
<p>
89
Web development is great, because you can make practically anything on the web. You can make
910
games, tools, or actual websites. I know how to use JS, HTML, and CSS. On top of that, I've
@@ -13,5 +14,12 @@
1314
aren't certain of the type of the object you're dealing with.
1415
</p>
1516
<p>You can find most of my web projects here:</p>
16-
<ProjectsTable categories={['web']} />
17+
18+
<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
19+
{#each projects as project}
20+
{#if project.category == Category.Web}
21+
<ProjectCard {project} />
22+
{/if}
23+
{/each}
24+
</div>
1725
</div>

0 commit comments

Comments
 (0)