Merge pull request #4 from flo-bit/main

refactor cards, add some videos, add gsap
flo-bit · May 14, 2024 · d06b6fe · d06b6fe
2 parents 5a1d1ca + 3978514
commit d06b6fe
Show file tree

Hide file tree

Showing 29 changed files with 594 additions and 430 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -33,6 +33,7 @@
  "type": "module",
  "dependencies": {
  "@sveltejs/adapter-static": "^2.0.3",
+ "gsap": "^3.12.5",
  "vite-imagetools": "^6.2.1"
  }
 }
diff --git a/src/app.html b/src/app.html
@@ -2,11 +2,12 @@
 <html lang="en">
  <head>
  <meta charset="utf-8" />
- <link rel="icon" href="%sveltekit.assets%/favicon.png" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  %sveltekit.head%
+
+ <title>Flos' old coding projects</title>
  </head>
- <body data-sveltekit-preload-data="hover" class="bg-neutral-950">
+ <body data-sveltekit-preload-data="hover" class="bg-black">
  <div style="display: contents">%sveltekit.body%</div>
  </body>
 </html>
diff --git a/src/lib/Badge.svelte b/src/lib/Badge.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+ type Color = 'gray' | 'red' | 'yellow' | 'green' | 'blue' | 'indigo' | 'purple' | 'pink' | 'cyan';
+
+ export let color: Color = 'gray';
+
+ let colorClasses: Record<Color, string> = {
+ gray: 'bg-gray-400/10 text-gray-400 ring-gray-400/20',
+ red: 'bg-red-400/10 text-red-400 ring-red-400/20',
+ yellow: 'bg-yellow-400/10 text-yellow-500 ring-yellow-400/20',
+ green: 'bg-green-500/10 text-green-400 ring-green-500/20',
+ blue: 'bg-blue-400/10 text-blue-400 ring-blue-400/30',
+ indigo: 'bg-indigo-400/10 text-indigo-400 ring-indigo-400/30',
+ purple: 'bg-purple-400/10 text-purple-400 ring-purple-400/30',
+ pink: 'bg-pink-400/10 text-pink-400 ring-pink-400/20',
+ cyan: 'bg-cyan-400/10 text-cyan-400 ring-cyan-400/20',
+ };
+
+ let classes = "";
+
+ export { classes as class };
+</script>
+
+<button
+ class="inline-flex items-center rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset {colorClasses[
+ color
+ ]} {classes}"
+ on:click
+>
+ <slot />
+</button>
diff --git a/src/lib/Project.svelte b/src/lib/Project.svelte
@@ -0,0 +1,92 @@
+<script lang="ts">
+ import Badge from './Badge.svelte';
+
+ export let project: {
+ title: string;
+ description: string;
+ image?: string;
+ video?: string;
+ url?: string;
+ tags: string[];
+ };
+
+ export let activeTag: string | undefined;
+
+ export let changeTag: (tag: string) => void;
+</script>
+
+<div
+ class="group relative flex flex-col items-start project {!activeTag ||
+ project.tags.includes(activeTag)
+ ? ''
+ : 'hidden'}"
+>
+ <div class="relative w-full">
+ <div
+ class="aspect-[16/9] w-full rounded-2xl bg-gray-900 sm:aspect-[2/1] lg:aspect-[3/2] overflow-hidden relative"
+ >
+ {#if project.video}
+ <video
+ autoplay
+ muted
+ loop
+ playsinline
+ class="absolute inset-0 w-full h-full object-cover lazy"
+ poster={project.image}
+ >
+ <source data-src={'/old-code/previews/' + project.video} type="video/mp4" />
+ </video>
+ {:else}
+ <img src={project.image} alt="" class="absolute inset-0 w-full h-full object-cover" />
+ {/if}
+ </div>
+ <div class="absolute inset-0 rounded-2xl ring-1 ring-inset ring-gray-100/10" />
+ </div>
+
+ <h2
+ class="{project.image ? 'mt-6' : ''} text-base font-semibold text-zinc-800 dark:text-zinc-100"
+ >
+ {#if project.url}
+ <a href={'/old-code' + project.url} target="_blank">
+ <div
+ class="absolute -inset-x-4 -inset-y-6 z-0 scale-95 bg-zinc-50 opacity-0 transition group-hover:scale-100 group-hover:opacity-100 dark:bg-zinc-800/30 sm:-inset-x-6 sm:rounded-2xl"
+ />
+ <span class="absolute -inset-x-4 -inset-y-6 z-20 sm:-inset-x-6 sm:rounded-2xl" />
+ <span class="relative z-10">{project.title}</span>
+ </a>
+ {:else}
+ <div
+ class="absolute -inset-x-4 -inset-y-6 z-0 scale-95 bg-zinc-50 opacity-0 transition group-hover:scale-100 group-hover:opacity-100 dark:bg-zinc-800/50 sm:-inset-x-6 sm:rounded-2xl"
+ />
+ <span class="absolute -inset-x-4 -inset-y-6 z-20 sm:-inset-x-6 sm:rounded-2xl" />
+ <span class="relative z-10">{project.title}</span>
+ {/if}
+ </h2>
+ <div class="relative z-10 mt-2 text-sm text-zinc-600 dark:text-zinc-400">
+ {project.description}
+ </div>
+ <!-- {#if project.url}
+ <p
+ class="relative z-10 mt-6 flex text-sm font-medium text-zinc-400 transition group-hover:text-cyan-400 dark:text-zinc-200"
+ >
+ <svg viewBox="0 0 24 24" aria-hidden="true" class="h-6 w-6 flex-none">
+ <path
+ d="M15.712 11.823a.75.75 0 1 0 1.06 1.06l-1.06-1.06Zm-4.95 1.768a.75.75 0 0 0 1.06-1.06l-1.06 1.06Zm-2.475-1.414a.75.75 0 1 0-1.06-1.06l1.06 1.06Zm4.95-1.768a.75.75 0 1 0-1.06 1.06l1.06-1.06Zm3.359.53-.884.884 1.06 1.06.885-.883-1.061-1.06Zm-4.95-2.12 1.414-1.415L12 6.344l-1.415 1.413 1.061 1.061Zm0 3.535a2.5 2.5 0 0 1 0-3.536l-1.06-1.06a4 4 0 0 0 0 5.656l1.06-1.06Zm4.95-4.95a2.5 2.5 0 0 1 0 3.535L17.656 12a4 4 0 0 0 0-5.657l-1.06 1.06Zm1.06-1.06a4 4 0 0 0-5.656 0l1.06 1.06a2.5 2.5 0 0 1 3.536 0l1.06-1.06Zm-7.07 7.07.176.177 1.06-1.06-.176-.177-1.06 1.06Zm-3.183-.353.884-.884-1.06-1.06-.884.883 1.06 1.06Zm4.95 2.121-1.414 1.414 1.06 1.06 1.415-1.413-1.06-1.061Zm0-3.536a2.5 2.5 0 0 1 0 3.536l1.06 1.06a4 4 0 0 0 0-5.656l-1.06 1.06Zm-4.95 4.95a2.5 2.5 0 0 1 0-3.535L6.344 12a4 4 0 0 0 0 5.656l1.06-1.06Zm-1.06 1.06a4 4 0 0 0 5.657 0l-1.061-1.06a2.5 2.5 0 0 1-3.535 0l-1.061 1.06Zm7.07-7.07-.176-.177-1.06 1.06.176.178 1.06-1.061Z"
+ fill="currentColor"
+ />
+ </svg>
+ <span class="ml-2">{project.url}</span>
+ </p>
+ {/if} -->
+ <div class="mt-6 flex items-center gap-x-4 text-xs z-30">
+ <!--<time datetime={post.date} class="text-gray-500">{post.date}</time>-->
+ {#each project.tags as tag}
+ <Badge
+ color={tag === activeTag ? 'cyan' : 'gray'}
+ on:click={() => {
+ changeTag(tag);
+ }}>{tag}</Badge
+ >
+ {/each}
+ </div>
+</div>