[READ-ONLY] Mirror of https://github.com/flo-bit/flo-bit.github.io. my personal website, w/ astro, svelte, tailwind, typescript, threlte
flo-bit.dev/
portfolio
portfolio-website
svelte
sveltekit
tailwind
threejs
threlte
typescript
small fixes
+8
-5
+8
-5
src/lib/components/Projects.svelte
+8
-5
src/lib/components/Projects.svelte
···
3
3
import { projects } from '$lib/projects';
4
4
</script>
5
5
6
-
<div id="projects" class="z-20 py-16 md:py-32 section bg-background relative isolate">
6
+
<div
7
+
id="projects"
8
+
class="z-20 py-16 md:py-32 section bg-background relative isolate overflow-hidden"
9
+
>
7
10
<div class="mx-auto max-w-5xl px-6 lg:px-8">
8
11
<div class="max-w-2xl mb-8">
9
12
<h1 class="text-4xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-5xl">
···
16
19
</p>
17
20
</div>
18
21
19
-
<div class="columns-2 sm:columns-3 lg:columns-3 gap-8 group/projects pointer-events-none">
22
+
<div class="columns-2 sm:columns-3 sm:text-[0] gap-8 group/projects pointer-events-none">
20
23
{#each projects as project}
21
24
<div
22
-
class="group relative break-inside-avoid-column {project.aspect ??
23
-
'aspect-square'} pointer-events-auto group-hover/projects:opacity-30 group-focus/projects:opacity-30 hover:!opacity-100 mb-8 w-full flex-none overflow-hidden rounded-xl ring-1 ring-white/10 focus:ring-accent-500 focus:!opacity-100 sm:rounded-2xl transition-opacity duration-500"
25
+
class="group relative sm:inline-block sm:w-full break-inside-avoid-column {project.aspect ??
26
+
'aspect-square'} pointer-events-auto group-hover/projects:opacity-30 group-focus/projects:opacity-30 hover:!opacity-100 mb-8 w-full flex-none border border-white/10 focus:border-accent-500 overflow-hidden rounded-xl focus:!opacity-100 sm:rounded-2xl transition-opacity duration-500"
24
27
>
25
28
{#if project.src.endsWith('.mp4')}
26
29
<video
···
44
47
<div
45
48
class="overflow-hidden absolute z-10 pointer-events-none inset-0 w-full h-full flex items-end p-4 md:p-4 tracking-tight leading-6 text-white text-xl font-semibold sm:translate-y-20 group-hover:translate-y-0 transition-translation duration-200"
46
49
>
47
-
<div class="mt-1 text-xl">
50
+
<div class="mt-1 text-sm sm:text-lg">
48
51
{project.name}
49
52
</div>
50
53
</div>