[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 meta description add nebula
+60
-2
+2
src/app.html
+2
src/app.html
···
12
12
var mostVisible=function(){"use strict";function t(e,n){"string"==typeof e&&(e=document.querySelectorAll(e));const r={...t.defaults,...n};return Array.from(e).reduce(((t,e)=>{let[n,o]=t;const u=function(t,e,n){const r=document.documentElement.clientHeight,o=t.getBoundingClientRect(),u=o.top-e,i=o.bottom-e,c=o.bottom-o.top,f=u>=0&&u<r,s=i>0&&i<r,l=(()=>{if(f)return s?c:r-o.top;if(s)return i;if(c>r&&u<0){const t=Math.abs(u);if(t<c)return c-t}return 0})();return n?l/c*100:l}(e,r.offset,r.percentage);return u>n?[u,e]:[n,o]}),[0,null])[1]}return t.defaults={percentage:!1,offset:0},window&&window.jQuery&&function(t,e){t.fn.mostVisible=function(t){return this.filter(e(this.get(),t))}}(window.jQuery,t),t}();
13
13
</script>
14
14
15
+
<meta name="description" content="Hello World! This is my portfolio website, I'm Florian Killius, a Full-Stack Software Engineer from Berlin.">
16
+
15
17
<title>flo-bit portfolio</title>
16
18
</head>
17
19
<body
static/smoke.png
static/smoke.png
This is a binary file and will not be displayed.
+53
src/lib/3D/Nebula.svelte
+53
src/lib/3D/Nebula.svelte
···
1
+
<script lang="ts">
2
+
import { T } from '@threlte/core';
3
+
import { useTexture } from '@threlte/extras';
4
+
5
+
const map = useTexture('smoke.png');
6
+
7
+
//const redColors = [0xff0000, 0xffff00, 0xff8800];
8
+
const blueColors = [0x34d399, 0x2dd4bf, 0x67e8f9, 0x0ea5e9, 0x60a5fa];
9
+
</script>
10
+
11
+
{#await map then value}
12
+
<!-- <T.Group rotation.z={0.5} position.x={5}>
13
+
{#each Array.from({ length: 30 }) as _, i}
14
+
<T.Mesh
15
+
position.z={-20 + Math.random()}
16
+
position.x={Math.random() * 10}
17
+
position.y={Math.random() * 5}
18
+
rotation.z={Math.random() * 4}
19
+
scale={Math.random() * 8 + 2}
20
+
>
21
+
<T.PlaneGeometry />
22
+
<T.MeshLambertMaterial
23
+
map={value}
24
+
color={redColors[Math.floor(Math.random() * redColors.length)]}
25
+
transparent={true}
26
+
opacity={0.5}
27
+
depthWrite={false}
28
+
/>
29
+
</T.Mesh>
30
+
{/each}
31
+
</T.Group> -->
32
+
33
+
<T.Group rotation.z={-0.5} position.x={-5} position.y={10}>
34
+
{#each Array.from({ length: 20 }) as _, i}
35
+
<T.Mesh
36
+
position.z={-20 + Math.random()}
37
+
position.x={Math.random() * 40 - 10}
38
+
position.y={Math.random() * 20 - 10}
39
+
rotation.z={Math.random() * 4}
40
+
scale={(Math.random() * 8 + 1) * 4}
41
+
>
42
+
<T.PlaneGeometry />
43
+
<T.MeshLambertMaterial
44
+
map={value}
45
+
color={blueColors[Math.floor(Math.random() * blueColors.length)]}
46
+
transparent={true}
47
+
opacity={0.3}
48
+
depthWrite={false}
49
+
/>
50
+
</T.Mesh>
51
+
{/each}
52
+
</T.Group>
53
+
{/await}
+2
-2
src/lib/3D/PlanetModel.svelte
+2
-2
src/lib/3D/PlanetModel.svelte
···
55
55
' vec3 viewCameraToVertex = (viewMatrix * vec4(worldCameraToVertex, 0.0)).xyz;',
56
56
' viewCameraToVertex = normalize(viewCameraToVertex);',
57
57
' float intensity = pow(coeficient + dot(vVertexNormal, viewCameraToVertex), power);',
58
-
' gl_FragColor = vec4(glowColor, intensity);',
58
+
' gl_FragColor = vec4(glowColor, intensity * 0.8);',
59
59
'}'
60
60
].join('\n');
61
61
···
70
70
value: 6
71
71
},
72
72
glowColor: {
73
-
value: new THREE.Color(0x77ccff)
73
+
value: new THREE.Color(0xa5f3fc)
74
74
}
75
75
},
76
76
vertexShader: vertexShader,
+3
src/lib/3D/Scene.svelte
+3
src/lib/3D/Scene.svelte
···
6
6
import Stars from './Stars.svelte';
7
7
import { onMount } from 'svelte';
8
8
import PlanetModel from './PlanetModel.svelte';
9
+
import Nebula from './Nebula.svelte';
9
10
10
11
let rotation = 0;
11
12
let distance = 1;
···
58
59
<!-- <Environment files="env.jpg" isBackground={false} /> -->
59
60
60
61
<Stars />
62
+
63
+
<Nebula />