[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 #27 from flo-bit/main
fixes
+104
-358
+3
-18
README.md
+3
-18
README.md
···
8
8
9
9
## demos
10
10
11
-
11
+
12
+
13
+
older demo videos:
12
14
13
15
https://github.com/flo-bit/flo-bit.github.io/assets/45694132/481296b2-f36d-466c-9741-4dd5771eb306
14
16
15
17
https://github.com/flo-bit/flo-bit.github.io/assets/45694132/a251ab6f-a416-4a2d-905f-8dffb2e36e0f
16
-
17
-
18
-
19
-
## todo
20
-
21
-
- add projects
22
-
- [x] shmup
23
-
- youtube party djay
24
-
- instalingua
25
-
- vr portfolio
26
-
- setup projects v3
27
-
- improve planet stuff
28
-
- add favourite stack?
29
-
- add images, descriptions, links, tags to all projects
30
-
- update favicon
31
-
- fix android bug
32
-
- improve performance
screenshot.jpg
screenshot.jpg
This is a binary file and will not be displayed.
+14
todo.md
+14
todo.md
···
1
+
2
+
## todo
3
+
4
+
- add projects
5
+
- youtube party djay
6
+
- instalingua
7
+
- vr portfolio
8
+
- life
9
+
- improve planet stuff
10
+
- add favourite stack?
11
+
- add images, descriptions, links, tags to all projects
12
+
- update favicon
13
+
- fix android bug
14
+
- improve performance
static/image.jpg
static/image.jpg
This is a binary file and will not be displayed.
+7
-8
src/lib/projects.ts
+7
-8
src/lib/projects.ts
···
1
1
import svelteswipecards from '$lib/images/projects-new/svelte-swiper-cards-demo.mp4';
2
2
import fluidtexteffect from '$lib/images/projects-new/text-effect-fluid-demo.mp4';
3
-
import fake3d from '$lib/images/projects-new/fake3dimage-demo.mp4';
3
+
import fake3d from '$lib/images/projects-new/depth3dcomponent/depth3dcomponent.mp4';
4
4
import hyperlumen from '$lib/images/projects-new/hyperlumen-demo.mp4';
5
5
import marblellous from '$lib/images/projects-new/marblellous-demo.mp4';
6
6
import oldcode from '$lib/images/projects-new/old-code-demo.mp4';
···
143
143
// },
144
144
{
145
145
src: fake3d,
146
-
key: 'image2fake3d',
147
-
alt: 'Image2Fake3D',
148
-
projectUrl: 'https://flo-bit.github.io/image2fake3d/',
146
+
key: 'depth3dcomponent',
147
+
alt: 'depth3dcomponent',
148
+
projectUrl: 'https://flo-bit.github.io/svelte-depth-3d-component/',
149
149
aspect: 'aspect-[9/16]',
150
-
name: 'image2fake3d',
151
-
description:
152
-
'turns an image into a fake 3d image that you can rotate with your mouse or gyro sensor.',
153
-
codeUrl: 'https://github.com/flo-bit/image2fake3d',
150
+
name: 'svelte depth 3d component',
151
+
description: 'turns an image plus depth map into a kind of 3d image. made for svelte.',
152
+
codeUrl: 'https://github.com/flo-bit/svelte-depth-3d-component',
154
153
tags: ['svelte', 'depthmap', '3d', 'threlte']
155
154
},
156
155
{
+3
-2
src/lib/3D/CustomRenderer.svelte
+3
-2
src/lib/3D/CustomRenderer.svelte
···
11
11
composer.addPass(new RenderPass(scene, camera));
12
12
13
13
const dofEffect = new DepthOfFieldEffect(camera, {
14
-
focusDistance: 0.02,
15
-
focalLength: 0.1,
14
+
focusDistance: 0.045,
15
+
focalLength: 0.03,
16
16
bokehScale: 10,
17
17
height: 1080
18
18
});
···
22
22
intensity: 4
23
23
});
24
24
25
+
// composer.addPass(new EffectPass(camera, dofEffect));
25
26
composer.addPass(new EffectPass(camera, bloomEffect));
26
27
};
27
28
+21
src/lib/3D/Planet.svelte
+21
src/lib/3D/Planet.svelte
···
1
+
<script lang="ts">
2
+
import { T } from "@threlte/core";
3
+
import { Planet } from "./worlds/planet";
4
+
5
+
import { useSuspense } from '@threlte/extras'
6
+
const suspend = useSuspense()
7
+
8
+
let presets = ['forest', 'beach', 'snowForest'];
9
+
10
+
let planet = new Planet({ preset: 'beach' });
11
+
let planetMesh = suspend(planet.create());
12
+
13
+
export const redo = () => {
14
+
planet = new Planet({ preset: presets[Math.floor(Math.random() * presets.length)] });
15
+
planetMesh = suspend(planet.create());
16
+
}
17
+
</script>
18
+
19
+
{#await planetMesh then mesh}
20
+
<T is={mesh} />
21
+
{/await}
-22
src/lib/3D/PlanetModel.svelte
-22
src/lib/3D/PlanetModel.svelte
···
1
-
<script lang="ts">
2
-
import { T } from "@threlte/core";
3
-
import { Planet } from "./worlds/planet";
4
-
import { onMount } from "svelte";
5
-
6
-
import { useSuspense } from '@threlte/extras'
7
-
const suspend = useSuspense()
8
-
9
-
let presets = ['forest', 'beach', 'snowForest'];
10
-
11
-
let planet = new Planet({ preset: presets[Math.floor(Math.random() * presets.length)] });
12
-
let planetMesh = suspend(planet.create());
13
-
14
-
export const redo = () => {
15
-
planet = new Planet({ preset: presets[Math.floor(Math.random() * presets.length)] });
16
-
planetMesh = suspend(planet.create());
17
-
}
18
-
</script>
19
-
20
-
{#await planetMesh then mesh}
21
-
<T is={mesh} />
22
-
{/await}
-55
src/lib/3D/PlanetModelOld.svelte
-55
src/lib/3D/PlanetModelOld.svelte
···
1
-
<!--
2
-
Auto-generated by: https://github.com/threlte/threlte/tree/main/packages/gltf
3
-
Command: npx @threlte/gltf@2.0.1 static/planet.gltf -t -T
4
-
-->
5
-
<script lang="ts">
6
-
import * as THREE from 'three';
7
-
import { Group } from 'three';
8
-
import { T, type Props, type Events, type Slots, forwardEventHandlers } from '@threlte/core';
9
-
import { useGltf } from '@threlte/extras';
10
-
11
-
type $$Props = Props<THREE.Group>;
12
-
type $$Events = Events<THREE.Group>;
13
-
type $$Slots = Slots<THREE.Group> & { fallback: {}; error: { error: any } };
14
-
15
-
export const ref = new Group();
16
-
17
-
type GLTFResult = {
18
-
nodes: {
19
-
mesh_0: THREE.Mesh;
20
-
mesh_1: THREE.Mesh;
21
-
};
22
-
materials: {};
23
-
};
24
-
25
-
const gltf = useGltf<GLTFResult>('/planet-transformed.glb', { useDraco: true });
26
-
27
-
const component = forwardEventHandlers();
28
-
</script>
29
-
30
-
<T is={ref} dispose={false} {...$$restProps} bind:this={$component}>
31
-
{#await gltf}
32
-
<slot name="fallback" />
33
-
{:then gltf}
34
-
<T.Mesh
35
-
geometry={gltf.nodes.mesh_0.geometry}
36
-
material={gltf.nodes.mesh_0.material}
37
-
material.opacity={1.0}
38
-
material.transparent={false}
39
-
material.flatShading={true}
40
-
material.envMapIntensity={0.3}
41
-
>
42
-
<T.Mesh
43
-
geometry={gltf.nodes.mesh_1.geometry}
44
-
material={gltf.nodes.mesh_1.material}
45
-
material.transparent={true}
46
-
material.flatShading={true}
47
-
material.envMapIntensity={0.3}
48
-
/>
49
-
</T.Mesh>
50
-
{:catch error}
51
-
<slot name="error" {error} />
52
-
{/await}
53
-
54
-
<slot {ref} />
55
-
</T>
+28
-28
src/lib/3D/Scene.svelte
+28
-28
src/lib/3D/Scene.svelte
···
1
1
<script lang="ts">
2
2
import { T, useTask, useThrelte } from '@threlte/core';
3
-
import {
4
-
interactivity,
5
-
OrbitControls,
6
-
useCursor,
7
-
Environment,
8
-
FakeGlowMaterial
9
-
} from '@threlte/extras';
3
+
import { interactivity, useCursor } from '@threlte/extras';
10
4
import { Quaternion, Euler, Vector2, Group } from 'three';
11
5
import { onMount } from 'svelte';
12
6
import { spring } from './Utils';
13
7
14
8
import Stars from './Stars.svelte';
15
9
import Nebula from './Nebula.svelte';
16
-
import PlanetModel from './PlanetModel.svelte';
10
+
import PlanetModel from './Planet.svelte';
17
11
import { SheetObject } from '@threlte/theatre';
12
+
import CustomRenderer from './CustomRenderer.svelte';
18
13
19
14
const { onPointerEnter, onPointerLeave } = useCursor();
20
15
interactivity();
···
52
47
planet.position.set(pos * 2, 0, 0);
53
48
}
54
49
});
55
-
50
+
56
51
const onPointerMove = (event: PointerEvent | TouchEvent) => {
57
52
if (!isDragging) return;
58
53
event.preventDefault();
59
54
60
-
let clientX, clientY;
61
-
if (event instanceof TouchEvent) {
55
+
let clientX = 0, clientY = 0;
56
+
if (window.TouchEvent && event instanceof TouchEvent) {
62
57
clientX = event.touches[0].clientX;
63
58
clientY = event.touches[0].clientY;
64
-
} else {
59
+
} else if(event instanceof PointerEvent) {
65
60
clientX = event.clientX;
66
61
clientY = event.clientY;
67
62
}
···
85
80
86
81
const onPointerDown = (event: PointerEvent | TouchEvent) => {
87
82
isDragging = true;
88
-
let clientX, clientY;
89
-
if (event instanceof TouchEvent) {
83
+
let clientX = 0, clientY = 0;
84
+
if (window.TouchEvent && event instanceof TouchEvent) {
90
85
clientX = event.touches[0].clientX;
91
86
clientY = event.touches[0].clientY;
92
-
} else {
87
+
} else if(event instanceof PointerEvent) {
93
88
clientX = event.clientX;
94
89
clientY = event.clientY;
95
90
}
···
104
99
const onPointerUp = () => {
105
100
isDragging = false;
106
101
107
-
if(totalMove.length() < 10) {
108
-
redo();
109
-
}
102
+
// if (totalMove.length() < 10) {
103
+
// redo();
104
+
// }
110
105
totalMove.set(0, 0);
111
106
};
112
107
···
164
159
<T.DirectionalLight
165
160
intensity={2}
166
161
position={[-pos * 10 + 5, 2 + pos * 3, 2]}
167
-
castShadow
168
-
shadow.bias={0.00001}
169
-
shadow.normalBias={0.05}
170
-
shadow.mapSize.width={1024}
171
-
shadow.mapSize.height={1024}
172
-
shadow.camera.left={-3}
173
-
shadow.camera.right={1}
174
-
shadow.camera.top={3}
175
-
shadow.camera.bottom={-1}
176
162
/>
163
+
<!-- castShadow
164
+
shadow.bias={0.00001}
165
+
shadow.normalBias={0.05}
166
+
shadow.mapSize.width={1024}
167
+
shadow.mapSize.height={1024}
168
+
shadow.camera.left={-3}
169
+
shadow.camera.right={1}
170
+
shadow.camera.top={3}
171
+
shadow.camera.bottom={-1} -->
172
+
177
173
<SheetObject key="planet" let:Transform let:Sync>
178
174
<Transform>
179
175
<T.Group
···
195
191
on:touchend={() => {
196
192
onPointerUp();
197
193
}}
194
+
on:dblclick={() => {
195
+
redo();
196
+
}}
198
197
scale={size}
199
198
>
200
-
<PlanetModel bind:redo/>
199
+
<PlanetModel bind:redo />
201
200
</T.Group>
202
201
</Transform>
203
202
</SheetObject>
204
203
205
204
<!-- <Environment files="aerodynamics_workshop_1k.hdr" /> -->
206
205
206
+
<!-- <CustomRenderer /> -->
207
207
208
208
<Stars />
209
209
<Nebula />
-206
src/lib/3D/state-new.json
-206
src/lib/3D/state-new.json
···
1
-
{
2
-
"sheetsById": {
3
-
"default": {
4
-
"staticOverrides": {
5
-
"byObject": {
6
-
"planet": {
7
-
"position": {
8
-
"x": 0,
9
-
"y": -1.54635628247858,
10
-
"z": 0
11
-
},
12
-
"rotation": {
13
-
"x": 0,
14
-
"y": 0,
15
-
"z": 0
16
-
},
17
-
"scale": {
18
-
"x": 1,
19
-
"y": 1,
20
-
"z": 1
21
-
}
22
-
},
23
-
"camera": {
24
-
"position": {
25
-
"x": 0,
26
-
"y": 0,
27
-
"z": 5
28
-
},
29
-
"rotation": {
30
-
"x": 50,
31
-
"y": 0,
32
-
"z": 0
33
-
},
34
-
"scale": {
35
-
"x": 1,
36
-
"y": 1,
37
-
"z": 1
38
-
}
39
-
}
40
-
}
41
-
},
42
-
"sequence": {
43
-
"subUnitsPerUnit": 30,
44
-
"length": 10,
45
-
"type": "PositionalSequence",
46
-
"tracksByObject": {
47
-
"planet": {
48
-
"trackData": {
49
-
"dnnWz3pFAE": {
50
-
"type": "BasicKeyframedTrack",
51
-
"__debugName": "planet:[\"position\",\"x\"]",
52
-
"keyframes": []
53
-
},
54
-
"voGNNDqzWc": {
55
-
"type": "BasicKeyframedTrack",
56
-
"__debugName": "planet:[\"position\",\"y\"]",
57
-
"keyframes": []
58
-
},
59
-
"3POG3W7VuU": {
60
-
"type": "BasicKeyframedTrack",
61
-
"__debugName": "planet:[\"position\",\"z\"]",
62
-
"keyframes": []
63
-
}
64
-
},
65
-
"trackIdByPropPath": {
66
-
"[\"position\",\"x\"]": "dnnWz3pFAE",
67
-
"[\"position\",\"y\"]": "voGNNDqzWc",
68
-
"[\"position\",\"z\"]": "3POG3W7VuU"
69
-
}
70
-
},
71
-
"camera": {
72
-
"trackData": {
73
-
"zvhTdyhI_a": {
74
-
"type": "BasicKeyframedTrack",
75
-
"__debugName": "camera:[\"rotation\",\"x\"]",
76
-
"keyframes": [
77
-
{
78
-
"id": "azbx576M9F",
79
-
"position": 0,
80
-
"connectedRight": true,
81
-
"handles": [
82
-
0.5,
83
-
1,
84
-
0.5,
85
-
0
86
-
],
87
-
"type": "bezier",
88
-
"value": 50
89
-
},
90
-
{
91
-
"id": "7ttM3u2xiz",
92
-
"position": 2,
93
-
"connectedRight": true,
94
-
"handles": [
95
-
0.5,
96
-
1,
97
-
0.5,
98
-
0
99
-
],
100
-
"type": "bezier",
101
-
"value": 0
102
-
}
103
-
]
104
-
},
105
-
"onnFYicqIh": {
106
-
"type": "BasicKeyframedTrack",
107
-
"__debugName": "camera:[\"rotation\",\"y\"]",
108
-
"keyframes": []
109
-
},
110
-
"RTGMZwrVXl": {
111
-
"type": "BasicKeyframedTrack",
112
-
"__debugName": "camera:[\"rotation\",\"z\"]",
113
-
"keyframes": [
114
-
{
115
-
"id": "8OvNz5yMka",
116
-
"position": 0,
117
-
"connectedRight": true,
118
-
"handles": [
119
-
0.5,
120
-
1,
121
-
0.5,
122
-
0
123
-
],
124
-
"type": "bezier",
125
-
"value": 0
126
-
},
127
-
{
128
-
"id": "i7PWk_TiFo",
129
-
"position": 2,
130
-
"connectedRight": true,
131
-
"handles": [
132
-
0.5,
133
-
1,
134
-
0.5,
135
-
0
136
-
],
137
-
"type": "bezier",
138
-
"value": 0
139
-
}
140
-
]
141
-
},
142
-
"zo10cwF9iF": {
143
-
"type": "BasicKeyframedTrack",
144
-
"__debugName": "camera:[\"position\",\"x\"]",
145
-
"keyframes": []
146
-
},
147
-
"5j2_W2p49o": {
148
-
"type": "BasicKeyframedTrack",
149
-
"__debugName": "camera:[\"position\",\"y\"]",
150
-
"keyframes": []
151
-
},
152
-
"CCNZpB9sxP": {
153
-
"type": "BasicKeyframedTrack",
154
-
"__debugName": "camera:[\"position\",\"z\"]",
155
-
"keyframes": [
156
-
{
157
-
"id": "0pulbv92kF",
158
-
"position": 0,
159
-
"connectedRight": true,
160
-
"handles": [
161
-
0.5,
162
-
1,
163
-
0.77,
164
-
0
165
-
],
166
-
"type": "bezier",
167
-
"value": 10
168
-
},
169
-
{
170
-
"id": "AYruCOJ6oj",
171
-
"position": 2,
172
-
"connectedRight": true,
173
-
"handles": [
174
-
0.175,
175
-
1,
176
-
0.5,
177
-
0
178
-
],
179
-
"type": "bezier",
180
-
"value": 0
181
-
}
182
-
]
183
-
}
184
-
},
185
-
"trackIdByPropPath": {
186
-
"[\"rotation\",\"x\"]": "zvhTdyhI_a",
187
-
"[\"rotation\",\"y\"]": "onnFYicqIh",
188
-
"[\"rotation\",\"z\"]": "RTGMZwrVXl",
189
-
"[\"position\",\"x\"]": "zo10cwF9iF",
190
-
"[\"position\",\"y\"]": "5j2_W2p49o",
191
-
"[\"position\",\"z\"]": "CCNZpB9sxP"
192
-
}
193
-
}
194
-
}
195
-
}
196
-
}
197
-
},
198
-
"definitionVersion": "0.4.0",
199
-
"revisionHistory": [
200
-
"bOZ-LeLKY9-GAkh7",
201
-
"fADzXr5CC7jTQseN",
202
-
"l30cMOfZ3-bzgBCO",
203
-
"53Zd3JAcFU6OEATa",
204
-
"IZpHhIeaW9cKqnVz"
205
-
]
206
-
}
+2
-2
src/lib/components/About.svelte
+2
-2
src/lib/components/About.svelte
···
2
2
import Depth3D from '$lib/3D/Depth3D/Depth3D.svelte';
3
3
4
4
// @ts-ignore
5
-
import imageMe from '$lib/images/flo2.png?w=512&format=webp';
5
+
import imageMe from '$lib/images/me.png?w=512&format=webp';
6
6
// @ts-ignore
7
-
import depthMe from '$lib/images/flo2-depth.png?w=512&format=webp';
7
+
import depthMe from '$lib/images/me-depth.png?w=512&format=webp';
8
8
9
9
import Resume from './Resume.svelte';
10
10
</script>
+2
src/lib/components/Hero.svelte
+2
src/lib/components/Hero.svelte
+12
-6
src/lib/components/Learning.svelte
+12
-6
src/lib/components/Learning.svelte
···
9
9
10
10
const learnings: Learning[] = [
11
11
{
12
+
title: 'pixi.js',
13
+
description:
14
+
'been playing around with pixi.js for some game jams. awesome library for 2d games.',
15
+
date: '2024-07'
16
+
},
17
+
{
12
18
title: 'supabase',
13
19
description:
14
20
'started using supabase for a few projects. still prefer mongodb as a database, but it has some cool features.',
···
17
23
{
18
24
title: 'unity and vr',
19
25
description:
20
-
'been working on a vr game in unity as part of a university project.',
26
+
'been working on a vr game in unity as part of a university project. uff, not a big fan of unity.',
21
27
date: '2024-03'
22
28
},
23
29
{
···
27
33
},
28
34
{
29
35
title: 'threlte',
30
-
description: 'fun library combining svelte and three.js. also used on this website.',
36
+
description: 'awesome library combining svelte and three.js. also used on this website.',
31
37
date: '2023-12'
32
38
},
33
39
{
···
38
44
{
39
45
title: 'svelte and sveltekit',
40
46
description:
41
-
'in my opinion the best framework for web development. i use it for most of my personal projects, including this website.',
47
+
'love svelte, my favourite framework for web development. i use it for most of my personal projects, including this website.',
42
48
date: '2023-06'
43
49
},
44
50
{
45
51
title: 'tailwindcss',
46
52
description:
47
-
'in my opinion the best bad idea in web development. not great, but better than pure css by far. used in most of my newer projects including this website.',
53
+
'the best bad idea in web development. better than pure css by far. used in most of my newer projects including this website.',
48
54
date: '2023-05'
49
55
},
50
56
{
51
57
title: 'react, next.js and reactnative',
52
58
description:
53
-
"not the biggest fan of react, but it's still the most popular framework out there. i mostly use it for work.",
59
+
"not the biggest fan of react, but it's still the most popular framework out there and on the native side there's no good alternative yet.",
54
60
date: '2023-01'
55
61
}
56
62
];
···
78
84
</h1>
79
85
<p class="mt-6 text-base text-zinc-600 dark:text-zinc-400">
80
86
one of the things i love most about programming is that there's always something new to
81
-
learn. i try to learn something new every month. here are some of the things i've been
87
+
learn. i try to learn something new every month. here's a selection of some of the things i've been
82
88
learning lately:
83
89
</p>
84
90
</div>
+8
-7
src/lib/components/Loading.svelte
+8
-7
src/lib/components/Loading.svelte
···
10
10
<svg
11
11
xmlns="http://www.w3.org/2000/svg"
12
12
viewBox="197.118 353.993 729.100 91.712"
13
+
width="100%"
14
+
height="100%"
13
15
class="stroke-[8] max-w-3xl fill-transparent hello z-30"
14
16
style="stroke: url(#gradient);"
15
17
data-flip-id="text"
···
37
39
/>
38
40
<path
39
41
style="--delay: 1.0s"
40
-
d="M 562.42,400.80 C 562.14 401.49, 562.23 402.08, 562.48 403.60 C 562.73 405.11, 562.90 406.25, 563.66 408.36 C 564.43 410.47, 565.02 411.86, 566.30 414.16 C 567.58 416.47, 568.42 417.97, 570.05 419.90 C 571.68 421.82, 572.62 422.61, 574.45 423.79 C 576.28 424.96, 577.22 425.42, 579.21 425.76 C 581.20 426.10, 582.32 426.17, 584.41 425.48 C 586.49 424.79, 587.67 423.98, 589.64 422.32 C 591.61 420.67, 592.60 419.40, 594.25 417.19 C 595.90 414.98, 596.87 413.47, 597.90 411.28 C 598.93 409.10, 599.11 407.49, 599.39 406.26 C 599.68 405.02, 599.23 404.76, 599.31 405.10 C 599.39 405.44, 599.12 406.36, 599.79 407.95 C 600.46 409.55, 600.91 411.02, 602.65 413.08 C 604.39 415.14, 605.88 416.55, 608.48 418.24 C 611.08 419.93, 612.69 420.54, 615.67 421.54 C 618.65 422.54, 620.32 422.86, 623.39 423.23 C 626.45 423.60, 628.09 423.70, 630.99 423.41 C 633.90 423.12, 635.45 422.82, 637.91 421.77 C 640.37 420.71, 641.45 419.93, 643.32 418.14 C 645.18 416.35, 646.13 415.16, 647.25 412.82 C 648.36 410.48, 648.52 408.84, 648.88 406.42 C 649.23 404.00, 649.23 402.86, 649.01 400.72 C 648.79 398.58, 648.52 397.48, 647.75 395.74 C 646.98 394.00, 646.37 393.15, 645.15 392.01 C 643.93 390.87, 642.96 390.53, 641.65 390.05 C 640.34 389.57, 639.61 389.54, 638.60 389.62 C 637.60 389.69, 637.14 390.06, 636.62 390.41 C 636.10 390.76, 636.05 391.01, 635.98 391.38 "
42
+
d="M 562.42,400.80 C 562.14 401.49, 562.23 402.08, 562.48 403.60 C 562.73 405.11, 562.90 406.25, 563.66 408.36 C 564.43 410.47, 565.02 411.86, 566.30 414.16 C 567.58 416.47, 568.42 417.97, 570.05 419.90 C 571.68 421.82, 572.62 422.61, 574.45 423.79 C 576.28 424.96, 577.22 425.42, 579.21 425.76 C 581.20 426.10, 582.32 426.17, 584.41 425.48 C 586.49 424.79, 587.67 423.98, 589.64 422.32 C 591.61 420.67, 592.60 419.40, 594.25 417.19 C 595.90 414.98, 596.87 413.47, 597.90 411.28 C 598.93 409.10, 599.11 407.49, 599.39 406.26 C 599.68 405.02, 599.23 404.76, 599.31 405.10 C 599.39 405.44, 599.12 406.36, 599.79 407.95 C 600.46 409.55, 600.91 411.02, 602.65 413.08 C 604.39 415.14, 605.88 416.55, 608.48 418.24 C 611.08 419.93, 612.69 420.54, 615.67 421.54 C 618.65 422.54, 620.32 422.86, 623.39 423.23 C 626.45 423.60, 628.09 423.70, 630.99 423.41 C 633.90 423.12, 635.45 422.82, 637.91 421.77 C 640.37 420.71, 641.45 419.93, 643.32 418.14 C 645.18 416.35, 646.13 415.16, 647.25 412.82 C 648.36 410.48, 648.52 408.84, 648.88 406.42 C 649.23 404.00, 649.23 402.86, 649.01 400.72 C 648.79 398.58, 648.52 397.48, 647.75 395.74 C 646.98 394.00, 646.37 393.15, 645.15 392.01 C 643.93 390.87, 642.96 390.53, 641.65 390.05 C 640.34 389.57, 639.61 389.54, 638.60 389.62 C 637.60 389.69, 637.14 390.06, 636.62 390.41 C 636.10 390.76, 636.05 391.01, 635.98 391.38"
41
43
/>
42
44
<path
43
45
style="--delay: 1.4s"
44
-
d="M 687.05,397.09 C 687.10 396.35, 686.94 395.47, 686.01 394.45 C 685.08 393.43, 684.22 392.59, 682.39 392.00 C 680.55 391.41, 679.16 391.21, 676.83 391.49 C 674.51 391.76, 673.12 392.11, 670.76 393.39 C 668.40 394.67, 667.04 395.80, 665.02 397.86 C 663.01 399.93, 661.87 401.23, 660.68 403.71 C 659.49 406.20, 659.00 407.77, 659.09 410.27 C 659.17 412.77, 659.63 414.10, 661.10 416.21 C 662.58 418.32, 663.95 419.48, 666.48 420.81 C 669.02 422.15, 670.61 422.43, 673.78 422.90 C 676.94 423.37, 678.94 423.31, 682.32 423.15 C 685.69 422.99, 687.65 422.87, 690.65 422.10 C 693.64 421.33, 694.98 420.63, 697.30 419.30 C 699.62 417.97, 700.76 417.20, 702.23 415.45 C 703.70 413.69, 704.29 412.54, 704.64 410.52 C 704.99 408.51, 704.73 407.34, 703.97 405.39 C 703.20 403.43, 702.45 402.32, 700.79 400.75 C 699.14 399.17, 697.93 398.51, 695.69 397.49 "
46
+
d="M 687.05,397.09 C 687.10 396.35, 686.94 395.47, 686.01 394.45 C 685.08 393.43, 684.22 392.59, 682.39 392.00 C 680.55 391.41, 679.16 391.21, 676.83 391.49 C 674.51 391.76, 673.12 392.11, 670.76 393.39 C 668.40 394.67, 667.04 395.80, 665.02 397.86 C 663.01 399.93, 661.87 401.23, 660.68 403.71 C 659.49 406.20, 659.00 407.77, 659.09 410.27 C 659.17 412.77, 659.63 414.10, 661.10 416.21 C 662.58 418.32, 663.95 419.48, 666.48 420.81 C 669.02 422.15, 670.61 422.43, 673.78 422.90 C 676.94 423.37, 678.94 423.31, 682.32 423.15 C 685.69 422.99, 687.65 422.87, 690.65 422.10 C 693.64 421.33, 694.98 420.63, 697.30 419.30 C 699.62 417.97, 700.76 417.20, 702.23 415.45 C 703.70 413.69, 704.29 412.54, 704.64 410.52 C 704.99 408.51, 704.73 407.34, 703.97 405.39 C 703.20 403.43, 702.45 402.32, 700.79 400.75 C 699.14 399.17, 697.93 398.51, 695.69 397.49"
45
47
/>
46
48
<path
47
49
style="--delay: 1.5s"
48
-
d="M 714.71,395.76 C 714.21 396.26, 713.93 396.81, 713.73 398.19 C 713.54 399.57, 713.51 400.64, 713.75 402.67 C 714.00 404.69, 714.34 406.09, 714.97 408.33 C 715.60 410.56, 716.03 411.90, 716.91 413.84 C 717.78 415.77, 718.36 416.81, 719.36 418.00 C 720.36 419.18, 720.93 419.63, 721.90 419.76 C 722.87 419.90, 723.56 419.60, 724.22 418.67 C 724.89 417.73, 725.10 416.85, 725.21 415.08 C 725.33 413.31, 725.11 411.95, 724.81 409.81 C 724.51 407.67, 724.01 406.34, 723.73 404.39 C 723.45 402.44, 723.28 401.52, 723.43 400.06 C 723.57 398.60, 723.76 398.01, 724.46 397.08 C 725.17 396.15, 725.61 395.95, 726.96 395.41 C 728.31 394.87, 729.21 394.75, 731.21 394.39 C 733.21 394.04, 734.47 393.89, 736.96 393.63 C 739.45 393.37, 740.90 393.26, 743.67 393.09 C 746.43 392.92, 748.16 392.97, 750.81 392.77 "
50
+
d="M 714.71,395.76 C 714.21 396.26, 713.93 396.81, 713.73 398.19 C 713.54 399.57, 713.51 400.64, 713.75 402.67 C 714.00 404.69, 714.34 406.09, 714.97 408.33 C 715.60 410.56, 716.03 411.90, 716.91 413.84 C 717.78 415.77, 718.36 416.81, 719.36 418.00 C 720.36 419.18, 720.93 419.63, 721.90 419.76 C 722.87 419.90, 723.56 419.60, 724.22 418.67 C 724.89 417.73, 725.10 416.85, 725.21 415.08 C 725.33 413.31, 725.11 411.95, 724.81 409.81 C 724.51 407.67, 724.01 406.34, 723.73 404.39 C 723.45 402.44, 723.28 401.52, 723.43 400.06 C 723.57 398.60, 723.76 398.01, 724.46 397.08 C 725.17 396.15, 725.61 395.95, 726.96 395.41 C 728.31 394.87, 729.21 394.75, 731.21 394.39 C 733.21 394.04, 734.47 393.89, 736.96 393.63 C 739.45 393.37, 740.90 393.26, 743.67 393.09 C 746.43 392.92, 748.16 392.97, 750.81 392.77"
49
51
/>
50
52
<path
51
53
style="--delay: 1.65s"
52
-
d="M 770.66,372.10 C 770.12 372.85, 769.64 373.70, 769.51 375.90 C 769.39 378.09, 769.59 379.78, 770.03 383.07 C 770.48 386.37, 770.92 388.62, 771.74 392.37 C 772.56 396.12, 773.18 398.20, 774.15 401.81 C 775.12 405.43, 775.51 407.42, 776.58 410.47 C 777.65 413.52, 778.32 414.83, 779.49 417.06 C 780.66 419.29, 781.14 420.14, 782.42 421.61 C 783.71 423.07, 784.99 424.04, 785.91 424.39 C 786.84 424.73, 787.28 424.24, 787.07 423.33 "
54
+
d="M 770.66,372.10 C 770.12 372.85, 769.64 373.70, 769.51 375.90 C 769.39 378.09, 769.59 379.78, 770.03 383.07 C 770.48 386.37, 770.92 388.62, 771.74 392.37 C 772.56 396.12, 773.18 398.20, 774.15 401.81 C 775.12 405.43, 775.51 407.42, 776.58 410.47 C 777.65 413.52, 778.32 414.83, 779.49 417.06 C 780.66 419.29, 781.14 420.14, 782.42 421.61 C 783.71 423.07, 784.99 424.04, 785.91 424.39 C 786.84 424.73, 787.28 424.24, 787.07 423.33"
53
55
/>
54
56
<path
55
57
style="--delay: 1.8s"
56
-
d="M 831.93,412.49 C 831.90 411.74, 831.59 410.93, 830.60 409.98 C 829.60 409.03, 828.81 408.41, 826.95 407.74 C 825.09 407.07, 823.74 406.60, 821.31 406.64 C 818.89 406.67, 817.39 407.19, 814.82 407.94 C 812.25 408.69, 810.89 409.21, 808.47 410.39 C 806.04 411.58, 804.61 412.27, 802.71 413.85 C 800.80 415.44, 799.84 416.55, 798.94 418.32 C 798.05 420.10, 797.88 421.05, 798.24 422.74 C 798.59 424.42, 799.20 425.40, 800.72 426.75 C 802.24 428.10, 803.51 428.80, 805.83 429.50 C 808.15 430.20, 809.61 430.32, 812.31 430.24 C 815.01 430.16, 816.61 429.85, 819.31 429.10 C 822.01 428.35, 823.36 427.80, 825.79 426.50 C 828.23 425.20, 829.38 424.52, 831.49 422.60 C 833.60 420.68, 834.72 419.48, 836.35 416.90 C 837.97 414.32, 838.59 412.77, 839.62 409.70 C 840.64 406.63, 840.99 404.87, 841.46 401.56 C 841.93 398.24, 841.96 396.31, 841.98 393.12 C 842.00 389.93, 841.97 388.11, 841.56 385.62 C 841.15 383.13, 840.55 381.90, 839.94 380.67 C 839.32 379.44, 838.85 379.13, 838.50 379.47 C 838.14 379.81, 837.82 380.58, 838.16 382.37 C 838.51 384.15, 838.96 385.55, 840.23 388.41 C 841.49 391.26, 842.74 393.17, 844.47 396.64 C 846.20 400.10, 847.21 402.14, 848.88 405.73 C 850.54 409.32, 851.30 411.24, 852.78 414.59 C 854.27 417.93, 854.95 419.71, 856.30 422.46 C 857.65 425.20, 858.42 426.46, 859.53 428.31 C 860.64 430.17, 861.13 430.78, 861.86 431.73 C 862.59 432.68, 862.79 432.74, 863.19 433.06 C 863.59 433.39, 863.64 433.34, 863.87 433.35 C 864.09 433.37, 864.19 433.31, 864.32 433.13 C 864.45 432.94, 864.51 432.98, 864.51 432.44 "
58
+
d="M 831.93,412.49 C 831.90 411.74, 831.59 410.93, 830.60 409.98 C 829.60 409.03, 828.81 408.41, 826.95 407.74 C 825.09 407.07, 823.74 406.60, 821.31 406.64 C 818.89 406.67, 817.39 407.19, 814.82 407.94 C 812.25 408.69, 810.89 409.21, 808.47 410.39 C 806.04 411.58, 804.61 412.27, 802.71 413.85 C 800.80 415.44, 799.84 416.55, 798.94 418.32 C 798.05 420.10, 797.88 421.05, 798.24 422.74 C 798.59 424.42, 799.20 425.40, 800.72 426.75 C 802.24 428.10, 803.51 428.80, 805.83 429.50 C 808.15 430.20, 809.61 430.32, 812.31 430.24 C 815.01 430.16, 816.61 429.85, 819.31 429.10 C 822.01 428.35, 823.36 427.80, 825.79 426.50 C 828.23 425.20, 829.38 424.52, 831.49 422.60 C 833.60 420.68, 834.72 419.48, 836.35 416.90 C 837.97 414.32, 838.59 412.77, 839.62 409.70 C 840.64 406.63, 840.99 404.87, 841.46 401.56 C 841.93 398.24, 841.96 396.31, 841.98 393.12 C 842.00 389.93, 841.97 388.11, 841.56 385.62 C 841.15 383.13, 840.55 381.90, 839.94 380.67 C 839.32 379.44, 838.85 379.13, 838.50 379.47 C 838.14 379.81, 837.82 380.58, 838.16 382.37 C 838.51 384.15, 838.96 385.55, 840.23 388.41 C 841.49 391.26, 842.74 393.17, 844.47 396.64 C 846.20 400.10, 847.21 402.14, 848.88 405.73 C 850.54 409.32, 851.30 411.24, 852.78 414.59 C 854.27 417.93, 854.95 419.71, 856.30 422.46 C 857.65 425.20, 858.42 426.46, 859.53 428.31 C 860.64 430.17, 861.13 430.78, 861.86 431.73 C 862.59 432.68, 862.79 432.74, 863.19 433.06 C 863.59 433.39, 863.64 433.34, 863.87 433.35 C 864.09 433.37, 864.19 433.31, 864.32 433.13 C 864.45 432.94, 864.51 432.98, 864.51 432.44"
57
59
/>
58
60
<path
59
61
style="--delay: 2.1s"
60
-
d="M 909.81,357.64 C 909.30 358.49, 909.06 359.62, 908.91 361.81 C 908.76 363.99, 908.89 365.66, 909.07 368.58 C 909.25 371.50, 909.51 373.23, 909.80 376.41 C 910.08 379.58, 910.13 381.38, 910.49 384.46 C 910.86 387.54, 911.15 389.05, 911.63 391.81 C 912.11 394.58, 912.41 396.07, 912.91 398.29 C 913.41 400.52, 913.64 401.44, 914.14 402.94 C 914.64 404.44, 914.91 405.27, 915.41 405.80 C 915.92 406.34, 916.34 406.27, 916.66 405.61 "
62
+
d="M 909.81,357.64 C 909.30 358.49, 909.06 359.62, 908.91 361.81 C 908.76 363.99, 908.89 365.66, 909.07 368.58 C 909.25 371.50, 909.51 373.23, 909.80 376.41 C 910.08 379.58, 910.13 381.38, 910.49 384.46 C 910.86 387.54, 911.15 389.05, 911.63 391.81 C 912.11 394.58, 912.41 396.07, 912.91 398.29 C 913.41 400.52, 913.64 401.44, 914.14 402.94 C 914.64 404.44, 914.91 405.27, 915.41 405.80 C 915.92 406.34, 916.34 406.27, 916.66 405.61"
61
63
/>
62
64
<path
63
65
style="--delay: 2.2s"
···
67
69
</svg>
68
70
{/if}
69
71
<div class="absolute bg-black h-screen w-full z-10 background"></div>
70
-
71
72
</div>
72
73
73
74
<style>
+4
-4
src/lib/components/Projects.svelte
+4
-4
src/lib/components/Projects.svelte
···
12
12
<p class="mt-6 text-base text-zinc-600 dark:text-zinc-400">
13
13
i've worked on lots of little side projects over the years, here are some recent ones. many
14
14
of them are open-source, so if you see something that piques your interest, check out the
15
-
code and feel free to contribute.
15
+
code.
16
16
</p>
17
17
</div>
18
18
19
-
<div class="columns-1 sm:columns-2 md:columns-3 gap-4 group/projects">
19
+
<div class="columns-2 sm:columns-3 lg:columns-4 gap-4 group/projects">
20
20
{#each projects as project}
21
21
<div
22
22
class="group relative break-inside-avoid-column {project.aspect ??
23
-
'aspect-square'} group-hover/projects:opacity-30 hover:!opacity-100 mb-4 w-full flex-none overflow-hidden rounded-xl ring-1 ring-white/10 bg-zinc-100 dark:bg-zinc-800 sm:rounded-2xl transition-opacity duration-500"
23
+
'aspect-square'} group-hover/projects:opacity-30 hover:!opacity-100 mb-4 w-full flex-none overflow-hidden rounded-xl ring-1 ring-white/10 sm:rounded-2xl transition-opacity duration-500"
24
24
>
25
25
{#if project.src.endsWith('.mp4')}
26
26
<video
···
42
42
/>
43
43
{/if}
44
44
<div
45
-
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-10 group-hover:translate-y-0 transition-translation duration-200"
45
+
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"
46
46
>
47
47
<div class="mt-1 text-xl">
48
48
{project.name}
src/lib/images/avatar-depth.png
src/lib/images/avatar-depth.png
This is a binary file and will not be displayed.
src/lib/images/avatar-no-bg.png
src/lib/images/avatar-no-bg.png
This is a binary file and will not be displayed.
src/lib/images/avatar-no-bg2.png
src/lib/images/avatar-no-bg2.png
This is a binary file and will not be displayed.
src/lib/images/avatar.png
src/lib/images/avatar.png
This is a binary file and will not be displayed.
src/lib/images/avatar2-depth.png
src/lib/images/avatar2-depth.png
This is a binary file and will not be displayed.
src/lib/images/avatar2.png
src/lib/images/avatar2.png
This is a binary file and will not be displayed.
src/lib/images/fallback.png
src/lib/images/fallback.png
This is a binary file and will not be displayed.
src/lib/images/flo-depth.png
src/lib/images/flo-depth.png
This is a binary file and will not be displayed.
src/lib/images/flo.png
src/lib/images/flo.png
This is a binary file and will not be displayed.
src/lib/images/flo2-depth.png
src/lib/images/flo2-depth.png
This is a binary file and will not be displayed.
src/lib/images/flo2.png
src/lib/images/flo2.png
This is a binary file and will not be displayed.
src/lib/images/me-depth.png
src/lib/images/me-depth.png
This is a binary file and will not be displayed.
src/lib/images/me.jpg
src/lib/images/me.jpg
This is a binary file and will not be displayed.
src/lib/images/me.png
src/lib/images/me.png
This is a binary file and will not be displayed.
src/lib/images/projects/atlas.png
src/lib/images/projects/atlas.png
This is a binary file and will not be displayed.
src/lib/images/projects/ball-game.png
src/lib/images/projects/ball-game.png
This is a binary file and will not be displayed.
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-effect.png
src/lib/images/projects/fluid-effect.png
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/hyperlumen.jpeg
src/lib/images/projects/hyperlumen.jpeg
This is a binary file and will not be displayed.
src/lib/images/projects/image2fake3d.png
src/lib/images/projects/image2fake3d.png
This is a binary file and will not be displayed.
src/lib/images/projects/instalingua.png
src/lib/images/projects/instalingua.png
This is a binary file and will not be displayed.
src/lib/images/projects/mandala.png
src/lib/images/projects/mandala.png
This is a binary file and will not be displayed.
src/lib/images/projects/old-projects.png
src/lib/images/projects/old-projects.png
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.
src/lib/images/projects/sveltechat.png
src/lib/images/projects/sveltechat.png
This is a binary file and will not be displayed.
src/lib/images/projects/svleek.png
src/lib/images/projects/svleek.png
This is a binary file and will not be displayed.
src/lib/images/projects/text-effect-fluid.png
src/lib/images/projects/text-effect-fluid.png
This is a binary file and will not be displayed.
src/lib/images/projects-new/depth3dcomponent/depth3dcomponent.mp4
src/lib/images/projects-new/depth3dcomponent/depth3dcomponent.mp4
This is a binary file and will not be displayed.