flo-bit.dev / flo-bit.github.io
[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
0
Fork 0

Configure Feed

Select the types of activity you want to include in your feed.

cleanup

author
Florian date (Sep 16, 2024, 2:24 AM +0200) commit 31ee22c2 parent 411dda71
+59 -50
+3 -18
README.md
··· 8 8 9 9 ## demos 10 10 11 - ![screenshot](screenshot.jpg) 11 + ![screenshot](/static/image.jpg) 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

This is a binary file and will not be displayed.

+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
+1 -1
src/lib/3D/Planet.svelte
··· 7 7 8 8 let presets = ['forest', 'beach', 'snowForest']; 9 9 10 - let planet = new Planet({ preset: presets[Math.floor(Math.random() * presets.length)] }); 10 + let planet = new Planet({ preset: 'beach' }); 11 11 let planetMesh = suspend(planet.create()); 12 12 13 13 export const redo = () => {
+13 -9
src/lib/3D/Scene.svelte
··· 9 9 import Nebula from './Nebula.svelte'; 10 10 import PlanetModel from './Planet.svelte'; 11 11 import { SheetObject } from '@threlte/theatre'; 12 + import CustomRenderer from './CustomRenderer.svelte'; 12 13 13 14 const { onPointerEnter, onPointerLeave } = useCursor(); 14 15 interactivity(); ··· 158 159 <T.DirectionalLight 159 160 intensity={2} 160 161 position={[-pos * 10 + 5, 2 + pos * 3, 2]} 161 - castShadow 162 - shadow.bias={0.00001} 163 - shadow.normalBias={0.05} 164 - shadow.mapSize.width={1024} 165 - shadow.mapSize.height={1024} 166 - shadow.camera.left={-3} 167 - shadow.camera.right={1} 168 - shadow.camera.top={3} 169 - shadow.camera.bottom={-1} 170 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 + 171 173 <SheetObject key="planet" let:Transform let:Sync> 172 174 <Transform> 173 175 <T.Group ··· 200 202 </SheetObject> 201 203 202 204 <!-- <Environment files="aerodynamics_workshop_1k.hdr" /> --> 205 + 206 + <!-- <CustomRenderer /> --> 203 207 204 208 <Stars /> 205 209 <Nebula />
+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>
+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>
+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

This is a binary file and will not be displayed.

src/lib/images/avatar-no-bg.png

This is a binary file and will not be displayed.

src/lib/images/avatar-no-bg2.png

This is a binary file and will not be displayed.

src/lib/images/avatar.png

This is a binary file and will not be displayed.

src/lib/images/avatar2-depth.png

This is a binary file and will not be displayed.

src/lib/images/avatar2.png

This is a binary file and will not be displayed.

src/lib/images/fallback.png

This is a binary file and will not be displayed.

src/lib/images/flo-depth.png

This is a binary file and will not be displayed.

src/lib/images/flo.png

This is a binary file and will not be displayed.

src/lib/images/flo2-depth.png src/lib/images/me-depth.png
src/lib/images/flo2.png src/lib/images/me.png
src/lib/images/me.jpg

This is a binary file and will not be displayed.

src/lib/images/projects-new/depth3dcomponent/depth3dcomponent.mp4

This is a binary file and will not be displayed.

src/lib/images/projects/atlas.png

This is a binary file and will not be displayed.

src/lib/images/projects/ball-game.png

This is a binary file and will not be displayed.

src/lib/images/projects/fake3d-squared.mp4

This is a binary file and will not be displayed.

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

This is a binary file and will not be displayed.

src/lib/images/projects/hyperlumen.jpeg

This is a binary file and will not be displayed.

src/lib/images/projects/image2fake3d.png

This is a binary file and will not be displayed.

src/lib/images/projects/instalingua.png

This is a binary file and will not be displayed.

src/lib/images/projects/mandala.png

This is a binary file and will not be displayed.

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

This is a binary file and will not be displayed.

src/lib/images/projects/sveltechat.png

This is a binary file and will not be displayed.

src/lib/images/projects/svleek.png

This is a binary file and will not be displayed.

src/lib/images/projects/text-effect-fluid.png

This is a binary file and will not be displayed.

+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 {
static/image.jpg

This is a binary file and will not be displayed.

+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