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
add articles section
author
Florian
date
(Jan 12, 2024, 1:04 AM +0100)
commit
fd8ff840
fd8ff84037b823846e8e9fd2cf49fc4318da267c
parent
32d6bab8
32d6bab890b232d0d2e11276d88e8248f1debada
+106
-6
+4
src/app.css
+4
src/app.css
+83
src/lib/components/Posts.svelte
+83
src/lib/components/Posts.svelte
···
1
+
<script lang="ts">
2
+
interface Article {
3
+
title: string;
4
+
description: string;
5
+
date: string;
6
+
href: string;
7
+
}
8
+
9
+
const articles: Article[] = [
10
+
{
11
+
title: 'How I use AI for Software Development',
12
+
description:
13
+
'I admit it, I have asked ChatGPT at least 17 times how to center a div!',
14
+
date: '2024-01-08',
15
+
href: 'https://flobit.substack.com/p/how-i-use-ai-for-software-development-474551a7aa7f'
16
+
}
17
+
];
18
+
19
+
function formatDate(date: string) {
20
+
return new Date(date).toLocaleDateString('en-US', {
21
+
year: 'numeric',
22
+
month: 'long',
23
+
day: 'numeric'
24
+
});
25
+
}
26
+
</script>
27
+
28
+
<div class="relative isolate overflow-hidden bg-black">
29
+
<div class="mx-auto max-w-5xl px-6 lg:px-8">
30
+
<div id="articles" class="py-16 md:py-32 section">
31
+
<div class="max-w-2xl">
32
+
<h1 class="text-4xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-5xl">
33
+
My ramblings
34
+
</h1>
35
+
<p class="mt-6 text-base text-zinc-600 dark:text-zinc-400">
36
+
Here are some of my thoughts on things I'm learning or working on.
37
+
</p>
38
+
</div>
39
+
<div class="mt-16">
40
+
<div class="grid grid-cols-1 md:grid-cols-2 gap-16">
41
+
{#each articles as article}
42
+
<article class="">
43
+
<div class="group relative flex flex-col items-start">
44
+
<div
45
+
class="text-base z-10 font-semibold tracking-tight text-zinc-800 dark:text-zinc-100"
46
+
>
47
+
{article.title}
48
+
</div>
49
+
<div
50
+
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"
51
+
>
52
+
<span class="absolute inset-y-0 left-0 flex items-center" aria-hidden="true">
53
+
<span class="h-4 w-0.5 rounded-full bg-zinc-200 dark:bg-zinc-500" />
54
+
</span>
55
+
{formatDate(article.date)}
56
+
</div>
57
+
58
+
<p class="relative z-10 mt-2 text-sm text-zinc-600 dark:text-zinc-400">
59
+
{article.description}
60
+
</p>
61
+
62
+
<a href={article.href} target="_blank">
63
+
<div
64
+
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"
65
+
/>
66
+
<span class="absolute -inset-x-4 -inset-y-6 z-20 sm:-inset-x-6 sm:rounded-2xl" />
67
+
<span 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">
68
+
Read Article
69
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-3 h-3 ml-1 mt-0.5">
70
+
<path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
71
+
</svg>
72
+
73
+
</span>
74
+
75
+
</a>
76
+
</div>
77
+
</article>
78
+
{/each}
79
+
</div>
80
+
</div>
81
+
</div>
82
+
</div>
83
+
</div>
+1
-1
src/lib/components/Projects.svelte
+1
-1
src/lib/components/Projects.svelte
···
136
136
</div>
137
137
{#if project.link}
138
138
<p
139
-
class="relative z-10 mt-6 flex text-sm font-medium text-zinc-400 transition group-hover:text-cyan-500 dark:text-zinc-200"
139
+
class="relative z-10 mt-6 flex text-sm font-medium text-zinc-400 transition group-hover:text-cyan-400 dark:text-zinc-200"
140
140
>
141
141
<svg viewBox="0 0 24 24" aria-hidden="true" class="h-6 w-6 flex-none">
142
142
<path
+3
src/routes/+page.svelte
+3
src/routes/+page.svelte
···
13
13
import Footer from '$lib/components/Footer.svelte';
14
14
import About from '$lib/components/About.svelte';
15
15
import Learning from '$lib/components/Learning.svelte';
16
+
import Posts from '$lib/components/Posts.svelte';
16
17
17
18
let active: 'home' | 'about' | 'projects' | 'learning' | 'contact' = 'home';
18
19
···
60
61
<About />
61
62
62
63
<Projects />
64
+
65
+
<Posts />
63
66
64
67
<Learning />
65
68