[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
some updates
+262
-51
+11
-11
src/lib/projects.ts
+11
-11
src/lib/projects.ts
···
78
78
{
79
79
src: tinyplanets,
80
80
key: 'tiny-planets',
81
-
projectUrl: 'https://flo-bit.github.io/tiny-planets/',
81
+
projectUrl: 'https://flo-bit.dev/tiny-planets/',
82
82
aspect: 'aspect-[1]',
83
83
name: 'tiny planets',
84
84
codeUrl: 'https://github.com/flo-bit/tiny-planets',
···
90
90
{
91
91
src: svelteswipecards,
92
92
key: 'svelte-swiper-cards',
93
-
href: 'https://flo-bit.github.io/svelte-swiper-cards/',
93
+
href: 'https://flo-bit.dev/svelte-swiper-cards/',
94
94
95
-
projectUrl: 'https://flo-bit.github.io/svelte-swiper-cards/',
95
+
projectUrl: 'https://flo-bit.dev/svelte-swiper-cards/',
96
96
97
97
aspect: 'aspect-[9/18]',
98
98
name: 'svelte swipable cards',
···
116
116
{
117
117
src: mandala,
118
118
key: 'svg-mandala',
119
-
projectUrl: 'https://flo-bit.github.io/mandala/',
119
+
projectUrl: 'https://flo-bit.dev/mandala/',
120
120
aspect: 'aspect-1',
121
121
name: 'svg mandala drawer',
122
122
description:
···
130
130
{
131
131
src: fluidtexteffect,
132
132
key: 'text-effect-fluid',
133
-
projectUrl: 'https://flo-bit.github.io/text_effect_fluid/',
133
+
projectUrl: 'https://flo-bit.dev/text_effect_fluid/',
134
134
aspect: 'aspect-[23/9]',
135
135
name: 'fluid text effect',
136
136
codeUrl: 'https://github.com/flo-bit/text_effect_fluid',
···
165
165
// src: mandala,
166
166
// key: 'svg-mandala',
167
167
// alt: 'svg mandala drawer',
168
-
// projectUrl: 'https://flo-bit.github.io/mandala/',
168
+
// projectUrl: 'https://flo-bit.dev/mandala/',
169
169
// aspect: 'aspect-1',
170
170
// name: 'svg mandala drawer',
171
171
// description:
···
178
178
{
179
179
src: shadowshmup,
180
180
key: 'shadow-shmup',
181
-
codeUrl: 'https://flo-bit.github.io/shadow-shmup/',
181
+
codeUrl: 'https://flo-bit.dev/shadow-shmup/',
182
182
aspect: 'aspect-[13/9]',
183
183
name: 'shadow shmup',
184
184
description:
···
191
191
{
192
192
src: fake3d,
193
193
key: 'depth3dcomponent',
194
-
projectUrl: 'https://flo-bit.github.io/svelte-depth-3d-component/',
194
+
projectUrl: 'https://flo-bit.dev/svelte-depth-3d-component/',
195
195
aspect: 'aspect-[9/16]',
196
196
name: 'svelte depth 3d component',
197
197
description:
···
217
217
{
218
218
src: oldcode,
219
219
key: 'old-code',
220
-
projectUrl: 'https://flo-bit.github.io/old-code/',
220
+
projectUrl: 'https://flo-bit.dev/old-code/',
221
221
aspect: 'aspect-[16/11]',
222
222
name: 'old coding projects',
223
223
codeUrl: 'https://github.com/flo-bit/old-code',
···
240
240
{
241
241
src: marblellous,
242
242
key: 'marblellous',
243
-
projectUrl: 'https://flo-bit.github.io/ball-game/',
243
+
projectUrl: 'https://flo-bit.dev/ball-game/',
244
244
aspect: 'aspect-[9/10]',
245
245
name: 'marblellous',
246
246
description:
···
252
252
// src: autostereogramrenderer,
253
253
// key: 'autostereogram-renderer',
254
254
// alt: 'autostereogram renderer',
255
-
// projectUrl: 'https://flo-bit.github.io/autostereogram-renderer/',
255
+
// projectUrl: 'https://flo-bit.dev/autostereogram-renderer/',
256
256
// codeUrl: 'https://github.com/flo-bit/autostereogram-renderer',
257
257
// aspect: 'aspect-1',
258
258
// name: 'autostereogram renderer',
+110
src/lib/components/Bento.svelte
+110
src/lib/components/Bento.svelte
···
1
+
<script>
2
+
3
+
import { Depth3D } from "$lib/3D/Depth3D";
4
+
5
+
// @ts-ignore
6
+
import imageMe from '$lib/images/me.png?w=512&format=webp';
7
+
// @ts-ignore
8
+
import depthMe from '$lib/images/me-depth.png?w=512&format=webp';
9
+
import ResumeContent from "./ResumeContent.svelte";
10
+
11
+
</script>
12
+
<div class="relative isolate overflow-hidden bg-background py-16">
13
+
<div class="mx-auto max-w-5xl px-6 lg:px-8">
14
+
15
+
<div class="mt-10 grid grid-cols-1 gap-4 sm:mt-16 lg:grid-cols-6 lg:grid-rows-2">
16
+
<div class="flex p-px lg:col-span-4">
17
+
<div
18
+
class="overflow-hidden rounded-lg bg-zinc-950 ring-1 ring-white/15 max-lg:rounded-t-[2rem] lg:rounded-tl-[2rem] flex-grow"
19
+
>
20
+
<!-- <img
21
+
class="h-80 object-cover object-left"
22
+
src="https://tailwindui.com/plus/img/component-images/bento-02-releases.png"
23
+
alt=""
24
+
/> -->
25
+
26
+
27
+
<div class="p-10">
28
+
<h3 class="text-sm/4 font-semibold text-zinc-400">Releases</h3>
29
+
30
+
<h1
31
+
class="text-4xl font-bold tracking-tight text-zinc-800 sm:leading-[3.5rem] dark:text-zinc-100 sm:text-5xl"
32
+
>
33
+
i'm florian. i live in berlin, where i create things for the web.
34
+
</h1>
35
+
<p class="mt-2 max-w-lg text-sm/6 text-zinc-400">
36
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In gravida justo et nulla
37
+
efficitur, maximus egestas sem pellentesque.
38
+
</p>
39
+
</div>
40
+
</div>
41
+
</div>
42
+
43
+
<div class="flex p-px lg:col-span-2">
44
+
<div
45
+
class="overflow-hidden rounded-lg bg-zinc-950 flex-grow ring-1 ring-white/15 lg:rounded-tr-[2rem]"
46
+
>
47
+
<!-- <img
48
+
class="h-80 object-cover object-center"
49
+
src="https://tailwindui.com/plus/img/component-images/bento-02-integrations.png"
50
+
alt=""
51
+
/> -->
52
+
<div class="h-80 object-cover object-center">
53
+
<Depth3D
54
+
image={{
55
+
image: imageMe,
56
+
depth: depthMe
57
+
}}
58
+
rounded={true}
59
+
/>
60
+
</div>
61
+
<div class="p-10">
62
+
<h3 class="text-sm/4 font-semibold text-accent-400">hello</h3>
63
+
<p class="mt-2 text-lg/7 font-medium tracking-tight text-white">
64
+
this is me
65
+
</p>
66
+
</div>
67
+
</div>
68
+
</div>
69
+
70
+
<div class="flex p-px lg:col-span-3">
71
+
<div
72
+
class="overflow-hidden rounded-lg bg-zinc-950 flex-grow ring-1 ring-white/15 lg:rounded-bl-[2rem]"
73
+
>
74
+
<!-- <img
75
+
class="h-80 object-cover object-center"
76
+
src="https://tailwindui.com/plus/img/component-images/bento-02-security.png"
77
+
alt=""
78
+
/> -->
79
+
<div class="p-10">
80
+
<ResumeContent />
81
+
</div>
82
+
83
+
84
+
</div>
85
+
</div>
86
+
87
+
<div class="flex p-px lg:col-span-3">
88
+
<div
89
+
class="overflow-hidden rounded-lg bg-zinc-950 flex-grow ring-1 ring-white/15 max-lg:rounded-b-[2rem] lg:rounded-br-[2rem]"
90
+
>
91
+
<!-- <img
92
+
class="h-80 object-cover object-left"
93
+
src="https://tailwindui.com/plus/img/component-images/bento-02-performance.png"
94
+
alt=""
95
+
/> -->
96
+
<div class="p-10">
97
+
<h3 class="text-sm/4 font-semibold text-zinc-400">Performance</h3>
98
+
<p class="mt-2 text-lg/7 font-medium tracking-tight text-white">
99
+
Lightning-fast builds
100
+
</p>
101
+
<p class="mt-2 max-w-lg text-sm/6 text-zinc-400">
102
+
Sed congue eros non finibus molestie. Vestibulum euismod augue vel commodo vulputate.
103
+
Maecenas at augue sed elit dictum vulputate.
104
+
</p>
105
+
</div>
106
+
</div>
107
+
</div>
108
+
</div>
109
+
</div>
110
+
</div>
+37
-35
src/lib/components/Projects.svelte
+37
-35
src/lib/components/Projects.svelte
···
19
19
</p>
20
20
</div>
21
21
22
-
<div class="columns-2 sm:columns-3 sm:text-[0] gap-8 group/projects pointer-events-none">
22
+
<div class="columns-2 sm:columns-3 sm:text-[0] gap-4 group/projects pointer-events-none">
23
23
{#each projects as project}
24
-
<div
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"
27
-
>
28
-
{#if project.src.endsWith('.mp4')}
29
-
<video
30
-
autoplay
31
-
loop
32
-
muted
33
-
playsinline
34
-
class="absolute inset-0 h-full w-full object-cover rounded-xl group-hover:scale-105 transition-transform duration-200"
35
-
preload="none"
36
-
>
37
-
<source src={project.src} type="video/mp4" />
38
-
</video>
39
-
{:else}
40
-
<img
41
-
src={project.src}
42
-
alt=""
43
-
class="absolute inset-0 h-full w-full object-cover rounded-xl"
44
-
loading="lazy"
45
-
/>
46
-
{/if}
24
+
<div class="w-full mb-4">
47
25
<div
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"
26
+
class="group relative inline-block sm:w-full break-inside-avoid-column {project.aspect ??
27
+
'aspect-square'} pointer-events-auto group-hover/projects:opacity-30 group-focus/projects:opacity-30 hover:!opacity-100 w-full flex-none border border-white/15 focus:border-accent-500 overflow-hidden rounded-xl focus:!opacity-100 sm:rounded-2xl transition-opacity duration-500"
49
28
>
50
-
<div class="mt-1 text-sm sm:text-lg">
51
-
{project.name}
52
-
</div>
53
-
</div>
54
-
55
-
<a href={'/projects/' + project.key}>
56
-
<div class="absolute inset-0 rounded-xl"></div>
29
+
{#if project.src.endsWith('.mp4')}
30
+
<video
31
+
autoplay
32
+
loop
33
+
muted
34
+
playsinline
35
+
class="absolute inset-0 h-full w-full object-cover rounded-xl group-hover:scale-105 transition-transform duration-200"
36
+
preload="none"
37
+
>
38
+
<source src={project.src} type="video/mp4" />
39
+
</video>
40
+
{:else}
41
+
<img
42
+
src={project.src}
43
+
alt=""
44
+
class="absolute inset-0 h-full w-full object-cover rounded-xl"
45
+
loading="lazy"
46
+
/>
47
+
{/if}
57
48
<div
58
-
class="absolute inset-0 w-full h-full opacity-60 md:opacity-0 group-hover:opacity-80 transition-opacity duration-200 bg-gradient-to-t from-black to-transparent"
59
-
></div>
60
-
</a>
49
+
class="overflow-hidden absolute z-10 pointer-events-none inset-0 w-full h-full flex items-end px-3 py-2 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"
50
+
>
51
+
<div class="mt-1 text-sm sm:text-lg">
52
+
{project.name}
53
+
</div>
54
+
</div>
55
+
56
+
<a href={'/projects/' + project.key}>
57
+
<div class="absolute inset-0 rounded-xl"></div>
58
+
<div
59
+
class="absolute inset-0 w-full h-full opacity-60 md:opacity-0 group-hover:opacity-80 transition-opacity duration-200 bg-gradient-to-t from-black to-transparent"
60
+
></div>
61
+
</a>
62
+
</div>
61
63
</div>
62
64
{/each}
63
65
</div>
+1
-1
src/lib/components/Resume.svelte
+1
-1
src/lib/components/Resume.svelte
···
62
62
];
63
63
</script>
64
64
65
-
<div class="rounded-2xl border p-6 dark:border-white/10 mt-16 bg-white/5">
65
+
<div class="rounded-2xl border p-6 dark:border-white/15 mt-16 bg-zinc-950">
66
66
<h2 class="flex text-sm font-semibold text-zinc-900 dark:text-zinc-100 items-center">
67
67
<svg viewBox="0 0 24 24" fill="none" class="h-6 w-6 flex-none" aria-hidden="true">
68
68
<path
+82
src/lib/components/ResumeContent.svelte
+82
src/lib/components/ResumeContent.svelte
···
1
+
<script lang="ts">
2
+
//@ts-ignore
3
+
import enna from '$lib/images/logos/enna.png?w=112&format=webp';
4
+
//@ts-ignore
5
+
import puppet from '$lib/images/logos/puppet.png?w=112&format=webp';
6
+
//@ts-ignore
7
+
import tub from '$lib/images/logos/tub.png?w=112&format=webp';
8
+
//@ts-ignore
9
+
import hyperlumen from '$lib/images/logos/hyperlumen.png?w=112&format=webp';
10
+
11
+
import Role from './Role.svelte';
12
+
let resume: Array<{
13
+
company: string;
14
+
title: string;
15
+
logo: string | { src: string; rounded?: boolean };
16
+
start: string | { label: string; dateTime: string };
17
+
end: string | { label: string; dateTime: string };
18
+
}> = [
19
+
{
20
+
company: 'hyperlumen',
21
+
title: 'co-founder',
22
+
logo: {
23
+
src: hyperlumen,
24
+
rounded: true
25
+
},
26
+
start: '2023',
27
+
end: {
28
+
label: 'present',
29
+
dateTime: new Date().getFullYear().toString()
30
+
}
31
+
},
32
+
{
33
+
company: 'enna',
34
+
title: 'software engineer',
35
+
logo: enna,
36
+
start: '2022',
37
+
end: {
38
+
label: 'present',
39
+
dateTime: new Date().getFullYear().toString()
40
+
}
41
+
},
42
+
{
43
+
company: 'puppet',
44
+
title: 'co-founder',
45
+
logo: puppet,
46
+
start: '2022',
47
+
end: {
48
+
label: 'present',
49
+
dateTime: new Date().getFullYear().toString()
50
+
}
51
+
},
52
+
{
53
+
company: 'tu berlin',
54
+
title: 'computer science',
55
+
logo: tub,
56
+
start: '2018',
57
+
end: {
58
+
label: 'present',
59
+
dateTime: new Date().getFullYear().toString()
60
+
}
61
+
}
62
+
];
63
+
</script>
64
+
65
+
<h2 class="flex text-sm font-semibold text-zinc-900 dark:text-zinc-100 items-center h-full w-full">
66
+
<svg viewBox="0 0 24 24" fill="none" class="h-6 w-6 flex-none" aria-hidden="true">
67
+
<path
68
+
d="M2.75 9.75a3 3 0 0 1 3-3h12.5a3 3 0 0 1 3 3v8.5a3 3 0 0 1-3 3H5.75a3 3 0 0 1-3-3v-8.5Z"
69
+
class="fill-zinc-100 stroke-zinc-400 dark:fill-zinc-100/10 dark:stroke-zinc-500"
70
+
/>
71
+
<path
72
+
d="M3 14.25h6.249c.484 0 .952-.002 1.316.319l.777.682a.996.996 0 0 0 1.316 0l.777-.682c.364-.32.832-.319 1.316-.319H21M8.75 6.5V4.75a2 2 0 0 1 2-2h2.5a2 2 0 0 1 2 2V6.5"
73
+
class="stroke-zinc-400 dark:stroke-zinc-500"
74
+
/>
75
+
</svg>
76
+
<span class="ml-3">work & education</span>
77
+
</h2>
78
+
<ol class="mt-6 space-y-4">
79
+
{#each resume as role}
80
+
<Role {role} />
81
+
{/each}
82
+
</ol>
+1
-1
src/lib/components/project/ProjectTiered.svelte
+1
-1
src/lib/components/project/ProjectTiered.svelte
+18
-1
src/lib/components/project/demos/swiper.svelte
+18
-1
src/lib/components/project/demos/swiper.svelte
···
56
56
});
57
57
</script>
58
58
59
-
<CardSwiper cardData={data} />
59
+
<div class="mx-auto h-[712px] w-[350px] max-w-full rounded-[60px] bg-cyan-500 relative">
60
+
<div class="absolute top-20 h-8 w-3 bg-cyan-500 -left-0.5 rounded-sm"></div>
61
+
<div class="absolute top-[140px] h-14 w-3 bg-cyan-500 -left-[3px] rounded-sm"></div>
62
+
<div class="absolute top-[210px] h-14 w-3 bg-cyan-500 -left-[3px] rounded-sm"></div>
63
+
<div class="absolute top-[180px] h-20 w-3 bg-cyan-500 -right-[3px] rounded-sm"></div>
64
+
65
+
<div class="absolute top-[18px] z-10 flex justify-center w-full">
66
+
<div class="h-7 w-24 bg-black rounded-full"></div>
67
+
</div>
68
+
69
+
<div class="absolute top-[180px] h-20 w-3 bg-cyan-500 -right-[3px] rounded-sm"></div>
70
+
71
+
<div class="absolute inset-0 w-full h-full p-3">
72
+
<div class="bg-cyan-200 w-full h-full rounded-[50px] overflow-hidden relative">
73
+
<CardSwiper cardData={data} />
74
+
</div>
75
+
</div>
76
+
</div>
+2
-2
src/lib/components/project/demos/CardSwiper/Card.svelte
+2
-2
src/lib/components/project/demos/CardSwiper/Card.svelte
···
10
10
</script>
11
11
12
12
<div
13
-
class="w-full h-full absolute cursor-grab ease-in-out rounded-xl touch-none select-none border border-white/20 bg-black {color}"
13
+
class="w-full h-full absolute cursor-grab ease-in-out rounded-xl touch-none select-none {color}"
14
14
bind:this={element}
15
15
>
16
16
{#key image}
···
19
19
{/if}
20
20
{/key}
21
21
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/0 rounded-b-xl"></div>
22
-
<div class="p-4 absolute bottom-0 w-full flex justify-center text-white">
22
+
<div class="p-4 absolute bottom-4 w-full flex justify-center text-white">
23
23
<div class="flex items-center flex-col">
24
24
<h3 class="text-3xl font-semibold pb-4">{title}</h3>
25
25
<p>{description}</p>