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
more small fixes
author
Florian
date
(Jun 29, 2024, 5:19 AM +0200)
commit
8de592b3
8de592b3091a8b1ab17230b536618becc4ac3a4b
parent
8a7379bd
8a7379bd5741d3aae9777bb54bcac25bf8b3e13b
+36
-21
+3
-3
src/lib/components/Learning.svelte
+3
-3
src/lib/components/Learning.svelte
···
11
11
{
12
12
title: 'supabase',
13
13
description:
14
-
'started using supabase for a few projects. still prefer mongodb, but it has some cool features.',
14
+
'started using supabase for a few projects. still prefer mongodb as a database, but it has some cool features.',
15
15
date: '2024-05'
16
16
},
17
17
{
18
18
title: 'unity and vr',
19
19
description:
20
-
'been working on a vr game in unity as part of a university project. not a huge fan of unity tho',
20
+
'been working on a vr game in unity as part of a university project.',
21
21
date: '2024-03'
22
22
},
23
23
{
···
50
50
{
51
51
title: 'react, next.js and reactnative',
52
52
description:
53
-
"not a huge fan of react, but it's still the most popular framework out there. i mostly use it for work.",
53
+
"not the biggest fan of react, but it's still the most popular framework out there. i mostly use it for work.",
54
54
date: '2023-01'
55
55
}
56
56
];
+32
-17
src/lib/components/Posts.svelte
+32
-17
src/lib/components/Posts.svelte
···
1
1
<script lang="ts">
2
+
import { slide } from 'svelte/transition';
3
+
2
4
interface Article {
3
5
title: string;
4
6
description: string;
5
7
date: string;
6
-
href: string;
8
+
href: string;
7
9
}
8
10
9
11
const articles: Article[] = [
···
27
29
},
28
30
{
29
31
title: 'four free startup ideas for you',
30
-
description:
31
-
'because there\'s not enough startups in this world',
32
+
description: "because there's not enough startups in this world",
32
33
date: '2024-01-15',
33
-
href: 'https://flobit.substack.com/p/four-free-startup-ideas-for-you'
34
+
href: 'https://flobit.substack.com/p/four-free-startup-ideas-for-you'
34
35
},
35
36
{
36
37
title: 'how i use ai for software development',
37
-
description:
38
-
'I admit it, I have asked chatgpt at least 17 times how to center a div!',
38
+
description: 'I admit it, I have asked chatgpt at least 17 times how to center a div!',
39
39
date: '2024-01-08',
40
-
href: 'https://flobit.substack.com/p/how-i-use-ai-for-software-development-474551a7aa7f'
40
+
href: 'https://flobit.substack.com/p/how-i-use-ai-for-software-development-474551a7aa7f'
41
41
}
42
42
];
43
43
···
48
48
day: 'numeric'
49
49
});
50
50
}
51
+
52
+
let showAll = false;
53
+
54
+
$: shownArticles = showAll ? articles : [...articles].slice(0, 4);
51
55
</script>
52
56
53
57
<div class="relative isolate overflow-hidden bg-black">
···
63
67
</div>
64
68
<div class="mt-16">
65
69
<div class="grid grid-cols-1 md:grid-cols-2 gap-16">
66
-
{#each articles as article}
67
-
<article class="">
70
+
{#each shownArticles as article}
71
+
<article class="" transition:slide>
68
72
<div class="group relative flex flex-col items-start">
69
73
<div
70
74
class="text-base z-10 font-semibold tracking-tight text-zinc-800 dark:text-zinc-100"
···
89
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"
90
94
/>
91
95
<span class="absolute -inset-x-4 -inset-y-6 z-20 sm:-inset-x-6 sm:rounded-2xl" />
92
-
<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">
93
-
read
94
-
<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">
95
-
<path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
96
-
</svg>
97
-
98
-
</span>
99
-
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>
100
115
</a>
101
116
</div>
102
117
</article>