[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
add life
+37
-25
+6
-1
todo.md
+6
-1
todo.md
···
5
5
- youtube party djay
6
6
- instalingua
7
7
- vr portfolio
8
-
- life
8
+
- planet generator
9
+
- atlas
10
+
- chess puzzles
11
+
- meditation
12
+
- silly engine
13
+
- [x] life
9
14
- improve planet stuff
10
15
- add favourite stack?
11
16
- add images, descriptions, links, tags to all projects
+11
-1
src/lib/projects.ts
+11
-1
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 life from '$lib/images/projects-new/life/life-demo.mp4';
3
4
import fake3d from '$lib/images/projects-new/depth3dcomponent/depth3dcomponent.mp4';
4
5
import hyperlumen from '$lib/images/projects-new/hyperlumen-demo.mp4';
5
6
import marblellous from '$lib/images/projects-new/marblellous-demo.mp4';
···
32
33
src: string;
33
34
key: string;
34
35
name: string;
35
-
alt: string;
36
36
37
37
href?: string;
38
38
aspect?: string;
···
51
51
};
52
52
53
53
export const projects: Project[] = [
54
+
{
55
+
src: life,
56
+
key: 'life',
57
+
projectUrl: 'https://flo-bit.itch.io/life',
58
+
aspect: 'aspect-[15/9]',
59
+
name: 'life',
60
+
description:
61
+
'made for gmtk jam 2024. relaxing spore/fl0w/agario-like game with a nature documentary vibe. eat, grow, evolve.',
62
+
projectPageVersion: 'full'
63
+
},
54
64
{
55
65
src: svelteswipecards,
56
66
key: 'svelte-swiper-cards',
+14
-15
src/lib/3D/Scene.svelte
+14
-15
src/lib/3D/Scene.svelte
···
52
52
if (!isDragging) return;
53
53
event.preventDefault();
54
54
55
-
let clientX = 0, clientY = 0;
55
+
let clientX = 0,
56
+
clientY = 0;
56
57
if (window.TouchEvent && event instanceof TouchEvent) {
57
58
clientX = event.touches[0].clientX;
58
59
clientY = event.touches[0].clientY;
59
-
} else if(event instanceof PointerEvent) {
60
+
} else if (event instanceof PointerEvent) {
60
61
clientX = event.clientX;
61
62
clientY = event.clientY;
62
63
}
···
80
81
81
82
const onPointerDown = (event: PointerEvent | TouchEvent) => {
82
83
isDragging = true;
83
-
let clientX = 0, clientY = 0;
84
+
let clientX = 0,
85
+
clientY = 0;
84
86
if (window.TouchEvent && event instanceof TouchEvent) {
85
87
clientX = event.touches[0].clientX;
86
88
clientY = event.touches[0].clientY;
87
-
} else if(event instanceof PointerEvent) {
89
+
} else if (event instanceof PointerEvent) {
88
90
clientX = event.clientX;
89
91
clientY = event.clientY;
90
92
}
···
159
161
<T.DirectionalLight
160
162
intensity={2}
161
163
position={[-pos * 10 + 5, 2 + pos * 3, 2]}
164
+
castShadow
165
+
shadow.bias={0.0001}
166
+
shadow.mapSize.width={256}
167
+
shadow.mapSize.height={256}
168
+
shadow.camera.left={-3}
169
+
shadow.camera.right={1}
170
+
shadow.camera.top={3}
171
+
shadow.camera.bottom={-1}
162
172
/>
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
173
173
174
<SheetObject key="planet" let:Transform let:Sync>
174
175
<Transform>
···
200
201
</T.Group>
201
202
</Transform>
202
203
</SheetObject>
203
-
204
-
<!-- <Environment files="aerodynamics_workshop_1k.hdr" /> -->
205
204
206
205
<!-- <CustomRenderer /> -->
207
206
+3
-4
src/lib/components/Projects.svelte
+3
-4
src/lib/components/Projects.svelte
···
16
16
</p>
17
17
</div>
18
18
19
-
<div class="columns-2 sm:columns-3 lg:columns-4 gap-4 group/projects">
19
+
<div class="columns-2 sm:columns-3 lg:columns-3 gap-8 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 sm:rounded-2xl transition-opacity duration-500"
23
+
'aspect-square'} group-hover/projects:opacity-30 group-focus/projects:opacity-30 hover:!opacity-100 mb-8 w-full flex-none overflow-hidden rounded-xl ring-1 ring-white/10 focus:ring-accent-500 focus:!opacity-100 sm:rounded-2xl transition-opacity duration-500"
24
24
>
25
25
{#if project.src.endsWith('.mp4')}
26
26
<video
···
36
36
{:else}
37
37
<img
38
38
src={project.src}
39
-
alt={project.alt}
39
+
alt=""
40
40
class="absolute inset-0 h-full w-full object-cover rounded-xl"
41
41
loading="lazy"
42
42
/>
···
50
50
</div>
51
51
52
52
<a href={'/projects/' + project.key}>
53
-
<div class="sr-only">{project.alt}</div>
54
53
<div class="absolute inset-0 rounded-xl"></div>
55
54
<div
56
55
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"
+3
-3
src/lib/3D/worlds/models.ts
+3
-3
src/lib/3D/worlds/models.ts
-1
src/lib/3D/worlds/planet.ts
-1
src/lib/3D/worlds/planet.ts
src/lib/images/projects-new/depth3dcomponent/depth3dcomponent-image.png
src/lib/images/projects-new/depth3dcomponent/depth3dcomponent-image.png
This is a binary file and will not be displayed.
src/lib/images/projects-new/life/life-demo.mp4
src/lib/images/projects-new/life/life-demo.mp4
This is a binary file and will not be displayed.
src/lib/images/projects-new/life/life-image.png
src/lib/images/projects-new/life/life-image.png
This is a binary file and will not be displayed.