[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
Merge pull request #17 from flo-bit/main
update mobile menu, update projects
+126
-139
+6
-6
src/app.html
+6
-6
src/app.html
···
10
10
<meta name="viewport" content="width=device-width" />
11
11
12
12
<!-- HTML Meta Tags -->
13
-
<title>My Portfolio - Florian Killius</title>
14
-
<meta name="description" content="Hello World! This is my portfolio website, I'm Florian Killius, a Full-Stack Software Engineer based in Berlin.">
13
+
<title>hi, i'm florian</title>
14
+
<meta name="description" content="hello world! this is my portfolio website, i'm florian, a full-stack software engineer based in berlin.">
15
15
16
16
<!-- Facebook Meta Tags -->
17
17
<meta property="og:url" content="https://flo-bit.github.io/">
18
18
<meta property="og:type" content="website">
19
-
<meta property="og:title" content="My Portfolio - Florian Killius">
20
-
<meta property="og:description" content="Hello World! This is my portfolio website, I'm Florian Killius, a Full-Stack Software Engineer based in Berlin.">
19
+
<meta property="og:title" content="hi, i'm florian">
20
+
<meta property="og:description" content="hello world! this is my portfolio website, i'm florian, a full-stack software engineer based in berlin.">
21
21
<meta property="og:image" content="https://flo-bit.github.io/image.jpg">
22
22
23
23
<!-- Twitter Meta Tags -->
24
24
<meta name="twitter:card" content="summary_large_image">
25
25
<meta property="twitter:domain" content="flo-bit.github.io">
26
26
<meta property="twitter:url" content="https://flo-bit.github.io/">
27
-
<meta name="twitter:title" content="My Portfolio - Florian Killius">
28
-
<meta name="twitter:description" content="Hello World! This is my portfolio website, I'm Florian Killius, a Full-Stack Software Engineer based in Berlin.">
27
+
<meta name="twitter:title" content="hi, i'm florian">
28
+
<meta name="twitter:description" content="hello world! this is my portfolio website, i'm florian, a full-stack software engineer based in berlin.">
29
29
<meta name="twitter:image" content="https://flo-bit.github.io/image.jpg">
30
30
31
31
<!-- Meta Tags Generated via https://www.opengraph.xyz -->
+47
-9
src/lib/components/Learning.svelte
+47
-9
src/lib/components/Learning.svelte
···
1
1
<script lang="ts">
2
+
import { slide } from "svelte/transition";
3
+
2
4
interface Learning {
3
5
title: string;
4
6
description: string;
···
7
9
8
10
const learnings: Learning[] = [
9
11
{
10
-
title: 'rust',
12
+
title: 'supabase',
11
13
description:
12
-
'just started learning rust. still weirded out by the whole ownership thing, but other than that i like it so far.',
14
+
'started using supabase for a few projects. still prefer mongodb, but it has some cool features.',
15
+
date: '2024-05'
16
+
},
17
+
{
18
+
title: 'unity and vr',
19
+
description:
20
+
'been working on a vr game in unity as part of a university project. not a huge fan of unity tho',
21
+
date: '2024-03'
22
+
},
23
+
{
24
+
title: 'figma',
25
+
description: 'playing around a bit designing some websites and app wireframes in figma',
13
26
date: '2024-01'
14
27
},
15
28
{
···
18
31
date: '2023-12'
19
32
},
20
33
{
21
-
title: 'MongoDB',
34
+
title: 'mongodb',
22
35
description: 'switched from mysql to mongodb and never looked back.',
23
36
date: '2023-09'
24
37
},
···
43
56
];
44
57
45
58
function formatDate(date: string) {
46
-
return new Date(date).toLocaleDateString('en-US', {
47
-
year: 'numeric',
48
-
month: 'long'
49
-
});
59
+
return new Date(date)
60
+
.toLocaleDateString('en-US', {
61
+
year: 'numeric',
62
+
month: 'long'
63
+
})
64
+
.toLowerCase();
50
65
}
66
+
67
+
let showAll = false;
68
+
69
+
$: shownLearnings = showAll ? learnings : [...learnings].slice(0, 3);
51
70
</script>
52
71
53
72
<div class="relative isolate overflow-hidden bg-black">
···
65
84
</div>
66
85
<div class="mt-16 md:border-l md:border-zinc-100 md:pl-6 md:dark:border-zinc-700/40">
67
86
<div class="flex max-w-3xl flex-col space-y-16">
68
-
{#each learnings as learning}
69
-
<article class="md:grid md:grid-cols-4 md:items-baseline">
87
+
{#each shownLearnings as learning}
88
+
<article transition:slide class="md:grid md:grid-cols-4 md:items-baseline">
70
89
<div class="group relative flex flex-col items-start md:col-span-3">
71
90
<div
72
91
class="text-base font-semibold tracking-tight text-zinc-800 dark:text-zinc-100"
···
93
112
</div>
94
113
</article>
95
114
{/each}
115
+
116
+
{#if !showAll}
117
+
<div class="justify-center flex">
118
+
<button
119
+
on:click={() => showAll = true}
120
+
type="button"
121
+
class="group flex items-center rounded-full mr-4 bg-white/90 px-4 py-2 text-sm font-medium text-zinc-800 shadow-lg shadow-zinc-800/5 ring-1 ring-zinc-900/5 backdrop-blur dark:bg-white/5 dark:text-zinc-200 dark:ring-white/10 dark:hover:ring-white/20"
122
+
aria-label="Update dimensions"
123
+
>
124
+
show more
125
+
126
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="ml-2 h-auto w-4 stroke-zinc-500 group-hover:stroke-zinc-700 dark:group-hover:stroke-zinc-400"
127
+
>
128
+
<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
129
+
</svg>
130
+
131
+
</button>
132
+
</div>
133
+
{/if}
96
134
</div>
97
135
</div>
98
136
</div>
+6
src/lib/components/Photos.svelte
+6
src/lib/components/Photos.svelte
···
12
12
index % rotations.length
13
13
]}"
14
14
>
15
+
{#if image.src.endsWith('.mp4')}
16
+
<video autoplay loop muted playsinline class="absolute inset-0 h-full w-full object-cover rounded-xl" preload="none">
17
+
<source src={image.src} type="video/mp4" />
18
+
</video>
19
+
{:else}
15
20
<img src={image.src} alt={image.alt} class="absolute inset-0 h-full w-full object-cover rounded-xl" loading="lazy"/>
21
+
{/if}
16
22
{#if image.href}
17
23
<a href={image.href} target="_blank">
18
24
<div class="sr-only">{image.alt}</div>
+29
-41
src/lib/components/Projects.svelte
+29
-41
src/lib/components/Projects.svelte
···
8
8
logo?: string;
9
9
}[] = [
10
10
{
11
-
name: 'hyperlumen',
12
-
description:
13
-
"light-up clothes that make you feel like you're in a sci-fi movie. perfect for raves.",
14
-
link: { href: 'http://hyperlumen.de', label: 'hyperlumen.de' }
11
+
name: 'svelte swipe cards',
12
+
description: 'a swipeable tinder like card component for svelte.',
13
+
link: { href: 'https://github.com/flo-bit/svelte-swiper-cards/', label: 'github.com' }
15
14
},
16
15
{
17
16
name: 'text effect fluid',
···
19
18
link: { href: 'https://github.com/flo-bit/text_effect_fluid', label: 'github.com' }
20
19
},
21
20
{
21
+
name: 'hyperlumen',
22
+
description:
23
+
"light-up clothes that make you feel like you're in a sci-fi movie. perfect for raves.",
24
+
link: { href: 'http://hyperlumen.de', label: 'hyperlumen.de' }
25
+
},
26
+
{
22
27
name: 'image2fake3d',
23
-
description: "turns an image into a fake 3d image that you can rotate with your mouse or gyro sensor.",
28
+
description:
29
+
'turns an image into a fake 3d image that you can rotate with your mouse or gyro sensor.',
24
30
link: { href: 'https://github.com/flo-bit/image2fake3d', label: 'github.com' }
25
31
},
26
32
{
···
29
35
'simple 3d browser game made with threlte. inspired by the game "marble blast gold".',
30
36
link: { href: 'https://github.com/flo-bit/ball-game', label: 'github.com' }
31
37
},
32
-
{
33
-
name: 'svleek',
34
-
description:
35
-
'generating a simple but slick documentation website from a folder of markdown files.',
36
-
link: { href: 'https://github.com/flo-bit/svleek', label: 'github.com' }
37
-
},
38
-
/*{
39
-
name: 'Mandala Drawer',
40
-
description: 'Drawing mandalas in the browser with a simple interface.',
41
-
link: { href: 'https://github.com/flo-bit/mandala', label: 'github.com' }
42
-
},*/
43
38
{
44
39
name: 'old coding projects',
45
40
description: "Some of my old coding projects. Please don't look at the code.",
···
53
48
import ballgame from '$lib/images/projects/ball-game.png?w=1024&format=webp';
54
49
//@ts-ignore
55
50
import oldprojects from '$lib/images/projects/old-projects.png?w=1024&format=webp';
56
-
//@ts-ignore
57
-
import svleek from '$lib/images/projects/svleek.png?w=1024&format=webp';
58
-
//@ts-ignore
59
-
import mandala from '$lib/images/projects/mandala.png?w=1024&format=webp';
60
-
//@ts-ignore
61
-
import fluideffect from '$lib/images/projects/text-effect-fluid.png?w=1024&format=webp';
62
-
//@ts-ignore
63
-
import image2fake3d from '$lib/images/projects/image2fake3d.png?w=1024&format=webp';
51
+
52
+
import svelteswipecards from '$lib/images/projects/svelte-swipe-cards-squared.mp4';
53
+
54
+
import fluidtexteffect from '$lib/images/projects/fluid-text-effect-squared.mp4';
55
+
56
+
import fake3d from '$lib/images/projects/fake3d-squared.mp4';
64
57
65
58
let images: {
66
59
src: string;
···
68
61
alt: string;
69
62
}[] = [
70
63
{
64
+
src: svelteswipecards,
65
+
alt: 'svelte-swipe-cards',
66
+
href: 'https://flo-bit.github.io/svelte-swiper-cards/'
67
+
},
68
+
{
69
+
src: fluidtexteffect,
70
+
alt: 'Text Fluid Effect',
71
+
href: 'https://flo-bit.github.io/text_effect_fluid/'
72
+
},
73
+
{
71
74
src: hyperlumen,
72
75
alt: 'Hyperlumen',
73
76
href: 'https://hyperlumen.de'
74
77
},
75
78
{
76
-
src: fluideffect,
77
-
alt: 'Text Fluid Effect',
78
-
href: 'https://flo-bit.github.io/text_effect_fluid/'
79
-
},
80
-
{
81
-
src: image2fake3d,
79
+
src: fake3d,
82
80
alt: 'Image2Fake3D',
83
81
href: 'https://flo-bit.github.io/image2fake3d/'
84
82
},
···
88
86
href: 'https://flo-bit.github.io/ball-game/'
89
87
},
90
88
{
91
-
src: svleek,
92
-
alt: 'Svleek',
93
-
href: 'https://flo-bit.github.io/svleek/'
94
-
},
95
-
/*{
96
-
src: mandala,
97
-
alt: 'Mandala',
98
-
href: 'https://flo-bit.github.io/mandala/'
99
-
},*/
100
-
{
101
89
src: oldprojects,
102
90
alt: 'Old Projects',
103
91
href: 'https://flo-bit.github.io/old-code/'
···
105
93
];
106
94
</script>
107
95
108
-
<div id="projects" class="z-20 py-16 md:py-32 section bg-black relative isolate ">
96
+
<div id="projects" class="z-20 py-16 md:py-32 section bg-black relative isolate">
109
97
<div class="mx-auto max-w-5xl px-6 lg:px-8">
110
98
<div class="max-w-2xl">
111
99
<h1 class="text-4xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-5xl">
src/lib/images/projects/fake3d-squared.mp4
src/lib/images/projects/fake3d-squared.mp4
This is a binary file and will not be displayed.
src/lib/images/projects/fluid-text-effect-squared.mp4
src/lib/images/projects/fluid-text-effect-squared.mp4
This is a binary file and will not be displayed.
src/lib/images/projects/svelte-swipe-cards-squared.mp4
src/lib/images/projects/svelte-swipe-cards-squared.mp4
This is a binary file and will not be displayed.