Skip to content

Commit 4f100be

Browse files
codevogelcodevogel
committed
style: make site responsive
1 parent 875da47 commit 4f100be

12 files changed

Lines changed: 149 additions & 69 deletions

‎app/src/app.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -179,7 +179,7 @@
179179
}
180180

181181
.subscript {
182-
@apply text-sm italic;
182+
@apply text-sm italic md:text-base;
183183
color: color-mix(in oklab, var(--color-foreground) 40%, transparent);
184184
}
185185

‎app/src/lib/components/ui/find-me-on.svelte‎

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,27 @@
22
import ClipSvg from './logo/clip-svg.svelte';
33
44
let logoScale = 0.5;
5+
6+
let { topLevel = true } = $props();
57
</script>
68

79
<div class="flex flex-col gap-y-4 text-center">
8-
<h1>Find me on</h1>
9-
<div class="flex flex-row justify-center gap-x-8">
10-
<a href="https://github.com/codevogel/">
10+
{#if topLevel}
11+
<h1>Find me on</h1>
12+
{:else}
13+
<h2>Find me on</h2>
14+
{/if}
15+
<div class="flex flex-row justify-center gap-x-8 {topLevel ? 'md:gap-x-12' : ''}">
16+
<a href="https://github.com/codevogel/" class={topLevel ? 'md:scale-125' : ''}>
1117
<ClipSvg path="/logos/svg/logo-github.svg" scale={logoScale} />
1218
</a>
13-
<a href="https://www.youtube.com/@codevogel_yt">
19+
<a href="https://www.youtube.com/@codevogel_yt" class={topLevel ? 'md:scale-125' : ''}>
1420
<ClipSvg path="/logos/svg/logo-youtube.svg" scale={logoScale} />
1521
</a>
16-
<a href="https://www.linkedin.com/in/kamiel-de-visser/">
22+
<a
23+
href="https://www.linkedin.com/in/kamiel-de-visser/"
24+
class={topLevel ? 'md:scale-125' : ''}
25+
>
1726
<ClipSvg path="/logos/svg/logo-linkedin.svg" scale={logoScale} />
1827
</a>
1928
</div>

‎app/src/lib/components/ui/hero/bird-hero.svelte‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
lines: [
77
{
88
chunks: [{ text: 'Hi!' }],
9-
class: 'text-3xl font-bold'
9+
class: 'text-3xl font-bold md:text-5xl'
1010
},
1111
{
1212
chunks: [
@@ -43,9 +43,17 @@
4343
</script>
4444

4545
<div class="grid h-80 grid-cols-1 place-content-end justify-items-center px-8">
46-
<Typewriter {message} baseClass="max-w-72 min-w-72 bg-accent rounded-lg p-4" pregrow={false} />
46+
<Typewriter
47+
{message}
48+
baseClass="max-w-72 min-w-72 bg-accent rounded-lg p-4 md:text-lg md:max-w-90 md:min-w-90"
49+
pregrow={false}
50+
/>
4751
<div
4852
class="h-0 w-0 border-t-[15px] border-r-[15px] border-l-[15px] border-accent border-r-transparent border-l-transparent"
4953
></div>
50-
<img src="/logos/svg/logo-codevogel-head.svg" class="mt-4 w-24" alt="codevogel logo head" />
54+
<img
55+
src="/logos/svg/logo-codevogel-head.svg"
56+
class="mt-4 w-24 md:mt-16 md:scale-150"
57+
alt="codevogel logo head"
58+
/>
5159
</div>

‎app/src/lib/components/ui/hero/name-breakdown.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
}
88
</script>
99

10-
<div class="mx-auto max-w-sm rounded-xl border-[.1px] border-accent p-4 text-center">
10+
<div class="mx-auto rounded-xl border-[.1px] border-accent p-4 text-center md:p-8 md:text-xl">
1111
<p>
1212
<span class="flex flex-row justify-center gap-x-4">
1313
<span class="font-serif italic">/ˈkoːdəˌvoːɣəl/</span>

‎app/src/lib/components/ui/job-card.svelte‎

Lines changed: 29 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,40 @@
11
<script lang="ts">
22
import { MapPin } from 'lucide-svelte';
3-
import ClipSvg from './logo/clip-svg.svelte';
4-
import type { Job } from '$lib/server/data/jobs';
3+
import ClipSvg from '$lib/components/ui/logo/clip-svg.svelte';
4+
import type { Job } from '$lib/assets/data/jobs';
55
66
let { job }: { job: Job } = $props();
7+
8+
let showDescription = $state(false);
79
</script>
810

9-
<div class="mx-4 inline-flex h-24 items-center gap-x-4 rounded-xl py-10 text-start text-xs">
11+
<div
12+
class="transition-std inline-flex h-24 max-w-xs min-w-xs items-center gap-x-4 rounded-xl p-4 text-start text-xs hover:bg-accent md:max-w-lg md:min-w-lg md:gap-x-8 md:p-8 md:text-sm"
13+
onclick={() => (showDescription = !showDescription)}
14+
role="none"
15+
>
1016
<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
11-
<a href={job.href}>
17+
<a href={job.href} class="md:scale-150">
1218
<ClipSvg path={job.logoPath} scale={0.5} />
1319
</a>
14-
<div
15-
class="flex w-full flex-row hover:[&>:first-child]:hidden hover:[&>:last-child]:block hover:[&>:nth-child(2)]:hidden"
16-
>
17-
<div class="flex grow flex-col gap-y-1">
18-
<span class="font-bold whitespace-pre-line text-primary">{job.position}</span>
19-
<span class="flex flex-row items-end"
20-
><MapPin size={14} class="stroke-primary" /> {job.location}</span
21-
>
22-
</div>
23-
<div class="flex flex-col text-center">
24-
<span>{job.startDate.toLocaleDateString()}</span>
25-
<span>-</span>
26-
<span>{job.endDate === 'Present' ? job.endDate : job.endDate.toLocaleDateString()}</span>
27-
</div>
28-
<div class="hidden whitespace-pre-line">
29-
<p>{job.description}</p>
30-
</div>
20+
<div class="flex w-full flex-row">
21+
{#if !showDescription}
22+
<div class="flex grow flex-col gap-y-1">
23+
<span class="font-bold whitespace-pre-line text-primary">{job.position}</span>
24+
<span class="flex flex-row items-end"
25+
><MapPin size={14} class="stroke-primary" /> {job.location}</span
26+
>
27+
</div>
28+
<div class="flex flex-col text-center">
29+
<span>{job.startDate.toLocaleDateString()}</span>
30+
<span>-</span>
31+
<span>{job.endDate === 'Present' ? job.endDate : job.endDate.toLocaleDateString()}</span
32+
>
33+
</div>
34+
{:else}
35+
<div class="whitespace-pre-line">
36+
<p>{job.description}</p>
37+
</div>
38+
{/if}
3139
</div>
3240
</div>

‎app/src/lib/components/ui/project-detail.svelte‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,5 +5,9 @@
55
let { readme, project } = $props();
66
</script>
77

8-
<img src={getImagePath(project)} alt={`${project.title} banner image`} class="aspect-video" />
8+
<img
9+
src={getImagePath(project)}
10+
alt={`${project.title} banner image`}
11+
class=" mx-auto aspect-video max-w-prose"
12+
/>
913
<ReadmeRenderer {readme} {project} />

‎app/src/lib/components/ui/project-overview.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,11 @@
1717

1818
<Section class="items-center px-6 pt-4 pb-8">
1919
<h1 class="mb-2">{categoryName}</h1>
20-
<div class="subscript mb-4">
20+
<div class="subscript mb-4 md:mb-8 lg:mb-12">
2121
<p>Here, you can find all the {categoryName.toLowerCase()} I've worked on!</p>
2222
<p>Click on a {type} to find out more about it.</p>
2323
</div>
24-
<div class="flex flex-col gap-y-8 text-start">
24+
<div class="flex flex-col gap-y-8 text-start lg:grid lg:grid-cols-2 lg:gap-16">
2525
{#each projects as project, i (i)}
2626
<ProjectCard {project} />
2727
{/each}

‎app/src/lib/components/ui/section.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
44
let {
55
children,
6-
class: className,
6+
class: className = '',
77
baseClass = 'flex flex-col',
88
onclick = () => {},
99
role = '',

‎app/src/lib/components/ui/skills.svelte‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,21 @@
11
<script lang="ts">
22
import ClipSvg from '$lib/components/ui/logo/clip-svg.svelte';
3-
import type { SkillGroup } from '$lib/server/data/skills';
3+
import type { SkillGroup } from '$lib/assets/data/skills';
44
55
let { skillGroups }: { skillGroups: SkillGroup[] } = $props();
66
</script>
77

8-
<div class="flex flex-col items-center justify-center">
8+
<div class="flex flex-col items-center justify-center md:gap-y-4">
99
<h1>Skills</h1>
1010
{#each skillGroups as skill, i (i)}
11-
<h4 class="text-md my-2 text-foreground/50">{skill.name}</h4>
12-
<div class="flex max-w-60 flex-wrap justify-center gap-x-4 gap-y-2">
11+
<h4 class="text-md my-2 text-foreground/50 md:text-lg">{skill.name}</h4>
12+
<div
13+
class="flex max-w-60 flex-wrap justify-center gap-x-4 gap-y-2 md:max-w-96 md:gap-x-8 md:gap-y-6"
14+
>
1315
{#each skill.items as item, j (j)}
1416
<div class="flex flex-col items-center text-center">
1517
<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
16-
<a href={item.href}>
18+
<a href={item.href} class="md:scale-125">
1719
<ClipSvg path={item.logoPath} scale={0.3} />
1820
</a>
1921
</div>

‎app/src/lib/components/ui/work-experience-carousel.svelte‎

Lines changed: 29 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,23 @@
11
<script lang="ts">
22
import * as Carousel from '$lib/components/shadcn-svelte/ui/carousel/index.js';
3-
import JobCard from './job-card.svelte';
3+
import JobCard from '$lib/components/ui/job-card.svelte';
44
import { type CarouselAPI } from '$lib/components/shadcn-svelte/ui/carousel/context';
5-
import Button from '../shadcn-svelte/ui/button/button.svelte';
6-
import type { Job } from '$lib/server/data/jobs';
5+
import { Button } from '$lib/components/shadcn-svelte/ui/button';
6+
import type { Job } from '$lib/assets/data/jobs';
7+
import { DotIcon } from 'lucide-svelte';
78
89
let api = $state<CarouselAPI>();
9-
let viewingCurrent = $state(true);
10+
let current = $state(0);
11+
const count = $derived(api ? api.scrollSnapList().length : 0);
1012
11-
let carouselButtonText = $derived(viewingCurrent ? 'View Past Jobs' : 'View Current Jobs');
13+
$effect(() => {
14+
if (api) {
15+
current = api.selectedScrollSnap();
16+
api.on('select', () => {
17+
current = api!.selectedScrollSnap();
18+
});
19+
}
20+
});
1221
1322
let { jobs }: { jobs: Job[] } = $props();
1423
@@ -26,16 +35,16 @@
2635

2736
<div class="flex flex-col justify-center gap-y-8 text-center">
2837
<Carousel.Root opts={{ loop: true }} setApi={(emblaAPI) => (api = emblaAPI)}>
29-
<Carousel.Content>
30-
<Carousel.Item class="flex flex-col justify-start gap-y-2">
38+
<Carousel.Content class="">
39+
<Carousel.Item class="flex flex-col gap-y-2">
3140
<h2>Current Jobs</h2>
32-
<div class="flex flex-col gap-y-2">
41+
<div class="flex flex-col items-center gap-y-2">
3342
{#each currentJobs as job, i (i)}
3443
<JobCard {job} />
3544
{/each}
3645
</div>
3746
</Carousel.Item>
38-
<Carousel.Item class="flex flex-col justify-center gap-y-2">
47+
<Carousel.Item class="flex flex-col items-center gap-y-2">
3948
<h2>Past Jobs</h2>
4049
<div class="flex flex-col gap-y-2">
4150
{#each pastJobs as job, i (i)}
@@ -45,12 +54,15 @@
4554
</Carousel.Item>
4655
</Carousel.Content>
4756
</Carousel.Root>
48-
<Button
49-
onclick={() => {
50-
api?.scrollNext();
51-
viewingCurrent = !viewingCurrent;
52-
}}
53-
variant="outline"
54-
class="mt-2 max-w-32 place-self-center">{carouselButtonText}</Button
55-
>
57+
58+
<div class="flex flex-row justify-center">
59+
<!-- eslint-disable-next-line @typescript-eslint/no-unused-vars -->
60+
{#each Array(count) as _, i (i)}
61+
<DotIcon
62+
onclick={() => api?.scrollTo(i)}
63+
class={i !== current ? 'text-accent' : ''}
64+
size={36}
65+
/>
66+
{/each}
67+
</div>
5668
</div>

0 commit comments

Comments
 (0)