flo-bit.dev
[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
1.6 kB
68 lines
1<script lang="ts">
2 //@ts-ignore
3 import fallback from '$lib/images/fallback.png?w=64&format=webp';
4
5 import Navbar from '$lib/components/nav/Navbar.svelte';
6
7 import { Canvas } from '@threlte/core';
8 import Scene from '$lib/3D/Scene.svelte';
9
10 import Hero from '$lib/components/Hero.svelte';
11 import Projects from '$lib/components/Projects.svelte';
12 import Contact from '$lib/components/Contact.svelte';
13 import Footer from '$lib/components/Footer.svelte';
14 import About from '$lib/components/About.svelte';
15 import Learning from '$lib/components/Learning.svelte';
16 import Posts from '$lib/components/Posts.svelte';
17
18 let active: 'home' | 'about' | 'projects' | 'learning' | 'contact' = 'home';
19
20 function getScrollPercent() {
21 let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
22 let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
23 let clientHeight = document.documentElement.clientHeight;
24
25 return scrollTop / (scrollHeight - clientHeight);
26 }
27 let percentageScroll: number = 0;
28
29 function setActive() {
30 // @ts-ignore
31 let currentlyActive = mostVisible(document.querySelectorAll('.section'));
32
33 if (currentlyActive && currentlyActive.id) {
34 active = currentlyActive.id;
35 }
36 }
37</script>
38
39<svelte:window
40 on:scroll={() => {
41 percentageScroll = getScrollPercent();
42 setActive();
43 }}
44/>
45
46<div class="fixed left-0 right-0 top-0 h-screen">
47 <Canvas>
48 <Scene pos={percentageScroll} />
49 </Canvas>
50</div>
51
52<Navbar {active} />
53
54<Hero />
55
56<About />
57
58<Projects />
59
60<Posts />
61
62<!-- <Tools /> -->
63
64<Learning />
65
66<Contact />
67
68<Footer />