Merge pull request #13 from flo-bit/main · flo-bit.dev/flo-bit.github.io@aa6911b

+3

src/routes/+page.svelte

··· 14 14 import About from '$lib/components/About.svelte'; 15 15 import Learning from '$lib/components/Learning.svelte'; 16 16 import Posts from '$lib/components/Posts.svelte'; 17 + import Tools from '$lib/components/Tools.svelte'; 17 18 18 19 let active: 'home' | 'about' | 'projects' | 'learning' | 'contact' = 'home'; 19 20 ··· 63 64 <Projects /> 64 65 65 66 <Posts /> 67 + 68 +  66 69 67 70 <Learning /> 68 71

+30 -10

src/lib/3D/PlanetModel.svelte

··· 7 7 import * as THREE from 'three'; 8 8 import { Group } from 'three'; 9 9 import { T, type Props, type Events, type Slots, forwardEventHandlers } from '@threlte/core'; 10 - import { useGltf } from '@threlte/extras'; 10 + import { useGltf, useTexture } from '@threlte/extras'; 11 + 12 + import FakeGlowMaterial from './FakeGlowMaterial/FakeGlowMaterial.svelte'; 11 13 12 14 type $$Props = Props<THREE.Group>; 13 15 type $$Events = Events<THREE.Group>; ··· 94 96 float angle = pow(0.8 - abs(dot(viewDirection, vNormal)), 3.0); 95 97 vec4 diffuseColor = vec4(diffuse, opacity * angle);` 96 98 ); 97 - 98 99 }; 100 + 101 + // let map = useTexture('/night.jpg', { 102 + // transform: (texture) => { 103 + // //texture.encoding = THREE.LinearEncoding; 104 + // return texture; 105 + // } 106 + // }); 99 107 </script> 100 108 101 109 <T is={ref} dispose={false} {...$$restProps} bind:this={$component}> ··· 105 113 <T.Mesh 106 114 geometry={gltf.nodes.mesh_0.geometry} 107 115 material={gltf.nodes.mesh_0.material} 116 + material.opacity={1.0} 117 + material.transparent={false} 108 118 material.flatShading={true} 109 119 > 110 120 <T.Mesh 111 121 geometry={gltf.nodes.mesh_1.geometry} 112 122 material={gltf.nodes.mesh_1.material} 123 + material.transparent={false} 113 124 material.flatShading={true} 114 125 /> 115 126 </T.Mesh> 116 - 117 -  121 - <T.Mesh scale={1.15}> 122 - <T.SphereGeometry args={[1, 32, 32]} /> 123 - <T is={material2} side={THREE.BackSide} /> 127 + <T.Mesh> 128 + <T.SphereGeometry args={[1.3, 32, 32]} /> 129 + <FakeGlowMaterial glowColor={'#075985'} falloff={1.0} glowInternalRadius={1.0} /> 124 130 </T.Mesh> 125 131 {:catch error} 126 132 <slot name="error" {error} /> ··· 128 134 129 135 <slot {ref} /> 130 136 </T> 137 + 138 +

+3 -3

src/lib/3D/Scene.svelte

··· 31 31 let rotation = 0; 32 32 let distance = 1; 33 33 34 - let rotationSpeed = 0.1; 34 + let rotationSpeed = 0.5; 35 35 useTask((delta) => { 36 36 // rotation += delta * rotationSpeed; 37 37 ··· 71 71 72 72 <T.DirectionalLight intensity={3} position={[-pos * 10 + 5, 2 + pos * 3, 2]} /> 73 73 74 - <T.AmbientLight intensity={0.1} /> 74 + <T.AmbientLight intensity={0.0} /> 75 75 76 76 <PlanetModel 77 77 on:click={() => { 78 - rotate.set($rotate + 1); 78 + rotate.set($rotate + 5); 79 79 }} 80 80 on:pointerleave={() => { 81 81 size.set(2)

+9 -5

src/lib/components/Contact.svelte

··· 17 17 <ul role="list" class="mt-8 pointer-events-auto"> 18 18 <SocialLink href="https://github.com/flo-bit" class="mt-4"> 19 19 <svelte:fragment slot="icon"> 20 - <svg fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"> 20 + <svg fill="currentColor" viewBox="0 0 24 24" aria-hidden="true" 21 + class="w-6 h-6"> 21 22 <path 22 23 fill-rule="evenodd" 23 24 d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" ··· 29 30 > 30 31 <SocialLink href="https://linkedin.com/in/floriankillius" class="mt-4"> 31 32 <svelte:fragment slot="icon"> 32 - <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="x-5 h-5" 33 + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5" 33 34 ><path 34 35 d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" 35 36 /></svg ··· 39 40 </SocialLink> 40 41 <SocialLink href="https://www.instagram.com/flobit.dev/" class="mt-4"> 41 42 <svelte:fragment slot="icon"> 42 - <svg fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"> 43 + <svg fill="currentColor" viewBox="0 0 24 24" aria-hidden="true" 44 + class="w-6 h-6"> 43 45 <path 44 46 fill-rule="evenodd" 45 47 d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" ··· 51 53 </SocialLink> 52 54 <SocialLink href="https://youtube.com/@flobit" class="mt-4"> 53 55 <svelte:fragment slot="icon"> 54 - <svg fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"> 56 + <svg fill="currentColor" viewBox="0 0 24 24" aria-hidden="true" 57 + class="w-6 h-6"> 55 58 <path 56 59 fill-rule="evenodd" 57 60 d="M19.812 5.418c.861.23 1.538.907 1.768 1.768C21.998 8.746 22 12 22 12s0 3.255-.418 4.814a2.504 2.504 0 0 1-1.768 1.768c-1.56.419-7.814.419-7.814.419s-6.255 0-7.814-.419a2.505 2.505 0 0 1-1.768-1.768C2 15.255 2 12 2 12s0-3.255.417-4.814a2.507 2.507 0 0 1 1.768-1.768C5.744 5 11.998 5 11.998 5s6.255 0 7.814.418ZM15.194 12 10 15V9l5.194 3Z" ··· 83 86 84 87 <SocialLink href="mailto:flo.bit.dev@gmail.com" class="mt-8"> 85 88 <svelte:fragment slot="icon"> 86 - <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> 89 + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" 90 + class="w-6 h-6"> 87 91 <path 88 92 d="M1.5 8.67v8.58a3 3 0 003 3h15a3 3 0 003-3V8.67l-8.928 5.493a3 3 0 01-3.144 0L1.5 8.67z" 89 93 />

+98

src/lib/components/Tools.svelte

··· 1 + <script lang="ts"> 2 + const languages = [ 3 + 'html', 4 + 'typescript/javascript', 5 + 'python', 6 + 'c', 7 + 'objective-c/swift', 8 + 'java', 9 + 'haskel', 10 + 'c++', 11 + 'c#' 12 + ]; 13 + 14 + const frontend = [ 15 + 'svelte', 16 + 'shadcn-svelte', 17 + 'bits ui', 18 + 'react', 19 + 'react native', 20 + 'threejs', 21 + 'threlte', 22 + 'vite', 23 + 'paper.js', 24 + 'pixi.js', 25 + 'p5.js' 26 + ]; 27 + 28 + const styling = ['tailwindcss', 'bulma', 'daisyui', 'skeleton ui']; 29 + const backend = ['nestjs', 'next.js', 'auth.js', 'sveltekit', 'node.js', 'supabase']; 30 + 31 + const infrastructure = ['docker', 'git', 'github', 'stripe', 'vercel', 'paypal', 'scaleway']; 32 + 33 + const databases = ['mongo db', 'mysql', 'weaviate', 'postgres', 'supabase']; 34 + 35 + const tools = ['chatgpt', 'midjourney', 'figma', 'excalidraw', 'final cut pro', 'notion', 'mongodb compass', 'tableplus', 'vs code', 'arc']; 36 + 37 + let all = [{ 38 + title: 'languages', 39 + items: languages 40 + }, 41 + { 42 + title: 'frontend', 43 + items: frontend 44 + }, 45 + { 46 + title: 'styling', 47 + items: styling 48 + }, 49 + { 50 + title: 'backend', 51 + items: backend 52 + }, 53 + { 54 + title: 'infrastructure', 55 + items: infrastructure 56 + }, 57 + { 58 + title: 'databases', 59 + items: databases 60 + }, 61 + { 62 + title: 'tools', 63 + items: tools 64 + }]; 65 + </script> 66 + 67 + <div class="relative isolate overflow-hidden bg-black"> 68 + <div class="mx-auto max-w-5xl px-6 lg:px-8"> 69 + <div id="learning" class="py-16 md:py-32 section"> 70 + <div class="max-w-2xl"> 71 + <h1 class="text-4xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-5xl"> 72 + My Tools 73 + </h1> 74 + <p class="mt-6 text-base text-zinc-600 dark:text-zinc-400"> 75 + Here are some of the tools I use to create things for the web: 76 + </p> 77 + </div> 78 + 79 + <div class="flow-root"> 80 + 81 + <div class="mt-16 columns-3 gap-6"> 82 + {#each all as {title, items}} 83 + <div class="bg-white/0 border border-white/5 p-4 rounded-2xl break-inside-avoid mb-6 relative"> 84 + 85 + <div class="absolute inset-0 bg-gradient-to-br from-white/5 rounded-2xl"></div> 86 + <div class="text-lg text-zinc-100 mb-4 font-semibold">{title}</div> 87 + 88 + {#each items as item} 89 + <div class="text-zinc-200 text-sm mb-2 ml-4">{item}</div> 90 + {/each} 91 + </div> 92 + {/each} 93 + 94 + </div> 95 + </div> 96 + </div> 97 + </div> 98 + </div>

+56

src/lib/3D/FakeGlowMaterial/FakeGlowMaterial.svelte

··· 1 + <script lang="ts"> 2 + import { T, useThrelte, forwardEventHandlers } from '@threlte/core' 3 + import { Color, AdditiveBlending, ShaderMaterial } from 'three' 4 + import type { 5 + FakeGlowMaterialEvents, 6 + FakeGlowMaterialProps, 7 + FakeGlowMaterialSlots 8 + } from './FakeGlowMaterial.svelte' 9 + 10 + import { fragmentShader } from './fragment' 11 + import { vertexShader } from './vertex' 12 + 13 + type $$Props = Required<FakeGlowMaterialProps> 14 + type $$Events = FakeGlowMaterialEvents 15 + type $$Slots = FakeGlowMaterialSlots 16 + 17 + export let falloff: $$Props['falloff'] = 0.1 18 + export let glowInternalRadius: $$Props['glowInternalRadius'] = 6.0 19 + export let glowColor: $$Props['glowColor'] = 'green' 20 + export let glowSharpness: $$Props['glowSharpness'] = 1.0 21 + 22 + let material = new ShaderMaterial({ 23 + uniforms: { 24 + falloff: { value: falloff }, 25 + glowInternalRadius: { value: glowInternalRadius }, 26 + glowColor: { value: new Color(glowColor) }, 27 + glowSharpness: { value: glowSharpness } 28 + } 29 + }) 30 + 31 + let { invalidate } = useThrelte() 32 + 33 + $: { 34 + material.uniforms.falloff.value = falloff 35 + material.uniforms.glowInternalRadius.value = glowInternalRadius 36 + material.uniforms.glowColor.value = new Color(glowColor) 37 + material.uniforms.glowSharpness.value = glowSharpness 38 + 39 + invalidate() 40 + } 41 + 42 + const component = forwardEventHandlers() 43 + </script> 44 + 45 + <T 46 + is={material} 47 + bind:this={$component} 48 + {fragmentShader} 49 + {vertexShader} 50 + transparent={true} 51 + blending={AdditiveBlending} 52 + depthTest={false} 53 + {...$$restProps} 54 + > 55 + <slot ref={material} /> 56 + </T>

+19

src/lib/3D/FakeGlowMaterial/FakeGlowMaterial.svelte.d.ts

··· 1 + import type { Events, Props, Slots } from '@threlte/core' 2 + import { SvelteComponent } from 'svelte' 3 + import type { ShaderMaterial, ColorRepresentation } from 'three' 4 + 5 + export type FakeGlowMaterialProps = Props<ShaderMaterial> & { 6 + falloff?: number 7 + glowInternalRadius?: number 8 + glowColor?: ColorRepresentation 9 + glowSharpness?: number 10 + } 11 + 12 + export type FakeGlowMaterialEvents = Events<ShaderMaterial> 13 + export type FakeGlowMaterialSlots = Slots<ShaderMaterial> 14 + 15 + export default class FakeGlowMaterial extends SvelteComponent< 16 + FakeGlowMaterialProps, 17 + FakeGlowMaterialEvents, 18 + FakeGlowMaterialSlots 19 + > {}

+29

src/lib/3D/FakeGlowMaterial/fragment.ts

··· 1 + import { ShaderChunk } from 'three'; 2 + 3 + export const fragmentShader = ` 4 + uniform vec3 glowColor; 5 + uniform float falloffAmount; 6 + uniform float glowSharpness; 7 + uniform float glowInternalRadius; 8 + 9 + varying vec3 vPosition; 10 + varying vec3 vNormal; 11 + 12 + void main() 13 + { 14 + // Normal 15 + vec3 normal = normalize(vNormal); 16 + if(!gl_FrontFacing) 17 + normal *= - 1.0; 18 + vec3 viewDirection = normalize(cameraPosition - vPosition); 19 + float fresnel = dot(viewDirection, normal); 20 + fresnel = pow(fresnel, glowInternalRadius + 0.1); 21 + float falloff = smoothstep(0., falloffAmount, fresnel); 22 + float fakeGlow = fresnel; 23 + fakeGlow += fresnel * glowSharpness; 24 + fakeGlow *= falloff; 25 + gl_FragColor = vec4(clamp(glowColor * fresnel, 0., 1.0), clamp(fakeGlow, 0., 1.0) * 0.5); 26 + 27 + ${ShaderChunk.tonemapping_fragment} 28 + ${ShaderChunk.colorspace_fragment} 29 + }`;

+10

src/lib/3D/FakeGlowMaterial/vertex.ts

··· 1 + export const vertexShader = `varying vec3 vPosition; 2 + varying vec3 vNormal; 3 + 4 + void main() { 5 + vec4 modelPosition = modelMatrix * vec4(position, 1.0); 6 + gl_Position = projectionMatrix * viewMatrix * modelPosition; 7 + vec4 modelNormal = modelMatrix * vec4(normal, 0.0); 8 + vPosition = modelPosition.xyz; 9 + vNormal = modelNormal.xyz; 10 + }`

Configure Feed

Configure Feed