[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
change about text, add env map, small fixes
+33
-8
+1
-1
tailwind.config.js
+1
-1
tailwind.config.js
static/aerodynamics_workshop_1k.hdr
static/aerodynamics_workshop_1k.hdr
This is a binary file and will not be displayed.
+2
src/lib/3D/PlanetModel.svelte
+2
src/lib/3D/PlanetModel.svelte
···
39
39
material.opacity={1.0}
40
40
material.transparent={false}
41
41
material.flatShading={true}
42
+
material.envMapIntensity={0.3}
42
43
>
43
44
<T.Mesh
44
45
geometry={gltf.nodes.mesh_1.geometry}
45
46
material={gltf.nodes.mesh_1.material}
46
47
material.transparent={true}
47
48
material.flatShading={true}
49
+
material.envMapIntensity={0.3}
48
50
/>
49
51
</T.Mesh>
50
52
{:catch error}
+4
-2
src/lib/3D/Scene.svelte
+4
-2
src/lib/3D/Scene.svelte
···
1
1
<script lang="ts">
2
2
import { T, useTask, useThrelte } from '@threlte/core';
3
-
import { interactivity, useCursor } from '@threlte/extras';
3
+
import { Environment, interactivity, useCursor } from '@threlte/extras';
4
4
import { Quaternion, Euler, Vector2, Group } from 'three';
5
5
import { onMount } from 'svelte';
6
6
import { spring } from './Utils';
···
125
125
far={100}
126
126
/>
127
127
128
-
<T.DirectionalLight intensity={3} position={[-pos * 10 + 5, 2 + pos * 3, 2]} />
128
+
<T.DirectionalLight intensity={2} position={[-pos * 10 + 5, 2 + pos * 3, 2]} />
129
129
130
130
<T.Group
131
131
bind:ref={planet}
···
150
150
>
151
151
<PlanetModel />
152
152
</T.Group>
153
+
154
+
<Environment files="aerodynamics_workshop_1k.hdr" />
153
155
154
156
<Stars />
155
157
<Nebula />
+25
-4
src/lib/components/About.svelte
+25
-4
src/lib/components/About.svelte
···
23
23
class="aspect-square rotate-3 rounded-2xl bg-zinc-100 object-cover dark:bg-zinc-800"
24
24
/> -->
25
25
26
-
<div class="aspect-square rotate-3 -m-10 lg:-m-10">
26
+
<div class="rotate-3 w-72 h-72 -m-10 lg:-m-10">
27
27
<Depth3D
28
28
image={{
29
29
image: imageMe,
···
38
38
<h1
39
39
class="text-4xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-5xl"
40
40
>
41
-
hey there, i'm florian. i live in berlin, where i create things for the web (and other
42
-
places).
41
+
hey there, i'm florian. i live in berlin, where i create things for the web.
43
42
</h1>
44
43
<div class="mt-6 space-y-7 text-base text-zinc-600 dark:text-zinc-400">
45
44
<p>
45
+
I was one of the only kids in my class without a game console, but we had a computer.
46
+
At 12, I got a coding book for Christmas and started making my own games in C and
47
+
OpenGL. Though I never finished those early projects, I got hooked on programming.
48
+
</p>
49
+
<p>
50
+
After school, I started studying computer science and became a software developer. I'm
51
+
really like the web because it's so accessible — anyone with a device and internet
52
+
can access your work instantly. Publishing and sharing your work is also super simple,
53
+
whether it's a website, a PWA, or a serverless function.
54
+
</p>
55
+
<p>
56
+
Noawadays, I mostly build a variety of web-based projects and am fascinated by the intersection
57
+
of design and development. I love
58
+
learning new things and am always seeking new challenges. If you have questions or
59
+
just want to connect, feel free to <a
60
+
href="#contact"
61
+
class="text-cyan-400 hover:text-cyan-300 font-semibold"
62
+
>
63
+
reach out.
64
+
</a>
65
+
</p>
66
+
<!-- <p>
46
67
i was one of the only kids in my class who didn't have some kind of game console at
47
68
home. but we did have a computer and when I was 12, i got a coding book for christmas
48
69
and decided to try my hand at making my own games (using c and opengl).
···
71
92
>
72
93
get in touch
73
94
</a>
74
-
</p>
95
+
</p> -->
75
96
</div>
76
97
</div>
77
98