flo-bit.dev
[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
4.0 kB
123 lines
1<script lang="ts">
2 import { slide } from 'svelte/transition';
3
4 interface Article {
5 title: string;
6 description: string;
7 date: string;
8 href: string;
9 }
10
11 const articles: Article[] = [
12 {
13 title: 'publishing an ai generated music album',
14 description: 'in one week, without any music creation expertise',
15 date: '2024-02-13',
16 href: 'https://flobit.substack.com/p/publishing-an-ai-generated-music'
17 },
18 {
19 title: 'how to become a great programmer (or anything else)',
20 description: 'in one easy step',
21 date: '2024-02-08',
22 href: 'https://flobit.substack.com/p/how-to-become-a-great-programmer'
23 },
24 {
25 title: 'how i recreated this awesome text fluid effect',
26 description: 'a step-by-step approach',
27 date: '2024-01-22',
28 href: 'https://flobit.substack.com/p/how-i-recreated-this-awesome-text'
29 },
30 {
31 title: 'four free startup ideas for you',
32 description: "because there's not enough startups in this world",
33 date: '2024-01-15',
34 href: 'https://flobit.substack.com/p/four-free-startup-ideas-for-you'
35 },
36 {
37 title: 'how i use ai for software development',
38 description: 'I admit it, I have asked chatgpt at least 17 times how to center a div!',
39 date: '2024-01-08',
40 href: 'https://flobit.substack.com/p/how-i-use-ai-for-software-development-474551a7aa7f'
41 }
42 ];
43
44 function formatDate(date: string) {
45 return new Date(date).toLocaleDateString('en-US', {
46 year: 'numeric',
47 month: 'long',
48 day: 'numeric'
49 });
50 }
51
52 let showAll = false;
53
54 $: shownArticles = showAll ? articles : [...articles].slice(0, 4);
55</script>
56
57<div class="relative isolate overflow-hidden bg-black">
58 <div class="mx-auto max-w-5xl px-6 lg:px-8">
59 <div id="articles" class="py-16 md:py-32 section">
60 <div class="max-w-2xl">
61 <h1 class="text-4xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-5xl">
62 my ramblings
63 </h1>
64 <p class="mt-6 text-base text-zinc-600 dark:text-zinc-400">
65 here are some of my thoughts on things i'm learning or working on.
66 </p>
67 </div>
68 <div class="mt-16">
69 <div class="grid grid-cols-1 md:grid-cols-2 gap-16">
70 {#each shownArticles as article}
71 <article class="" transition:slide>
72 <div class="group relative flex flex-col items-start">
73 <div
74 class="text-base z-10 font-semibold tracking-tight text-zinc-800 dark:text-zinc-100"
75 >
76 {article.title}
77 </div>
78 <div
79 class="relative z-10 order-first mb-3 flex items-center text-sm text-zinc-400 dark:text-zinc-500 pl-3.5 mt-1"
80 >
81 <span class="absolute inset-y-0 left-0 flex items-center" aria-hidden="true">
82 <span class="h-4 w-0.5 rounded-full bg-zinc-200 dark:bg-zinc-500" />
83 </span>
84 {formatDate(article.date).toLowerCase()}
85 </div>
86
87 <p class="relative z-10 mt-2 text-sm text-zinc-600 dark:text-zinc-400">
88 {article.description}
89 </p>
90
91 <a href={article.href} target="_blank">
92 <div
93 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"
94 />
95 <span class="absolute -inset-x-4 -inset-y-6 z-20 sm:-inset-x-6 sm:rounded-2xl" />
96 <span
97 class="relative z-10 mt-4 flex items-center text-sm font-medium text-zinc-400 transition-colors duration-200 group-hover:text-cyan-400"
98 >
99 read
100 <svg
101 xmlns="http://www.w3.org/2000/svg"
102 fill="none"
103 viewBox="0 0 24 24"
104 stroke-width="1.5"
105 stroke="currentColor"
106 class="w-3 h-3 ml-1 mt-0.5"
107 >
108 <path
109 stroke-linecap="round"
110 stroke-linejoin="round"
111 d="m8.25 4.5 7.5 7.5-7.5 7.5"
112 />
113 </svg>
114 </span>
115 </a>
116 </div>
117 </article>
118 {/each}
119 </div>
120 </div>
121 </div>
122 </div>
123</div>