[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
update readme
+22
-96
+20
README.md
+20
README.md
···
15
15
https://github.com/flo-bit/flo-bit.github.io/assets/45694132/481296b2-f36d-466c-9741-4dd5771eb306
16
16
17
17
https://github.com/flo-bit/flo-bit.github.io/assets/45694132/a251ab6f-a416-4a2d-905f-8dffb2e36e0f
18
+
19
+
## techstack
20
+
21
+
- sveltekit (static build using `@sveltejs/adapter-static`)
22
+
- threlte (svelte wrapper for threejs)
23
+
- tailwind
24
+
- automatic deployment using github actions to github pages
25
+
- typescript
26
+
27
+
## development
28
+
29
+
clone the repo, install dependencies and run the dev server:
30
+
31
+
```bash
32
+
git clone https://github.com/flo-bit/flo-bit.github.io.git
33
+
npm install
34
+
npm run dev
35
+
```
36
+
37
+
when using it for your own portfolio, please remove the posthog analytics script from `src/app.html` (line 3-6)
+2
-1
todo.md
+2
-1
todo.md
-95
src/routes/test/+page.svelte
-95
src/routes/test/+page.svelte
···
1
-
2
-
<div class="h-full w-full flex items-center justify-center p-20">
3
-
<svg
4
-
xmlns="http://www.w3.org/2000/svg"
5
-
viewBox="197.118 353.993 729.100 91.712"
6
-
class="stroke-[6] max-w-3xl"
7
-
style="stroke: url(#gradient);"
8
-
>
9
-
<linearGradient
10
-
id="gradient"
11
-
x1="197.118"
12
-
y1="0"
13
-
x2="926.218"
14
-
y2="0"
15
-
gradientUnits="userSpaceOnUse"
16
-
>
17
-
<stop offset="0%" stop-color="#06b6d4"/>
18
-
<stop offset="50%" stop-color="#4f46e5"/>
19
-
<stop offset="100%" stop-color="#e11d48"/>
20
-
<!-- <stop offset="0%" stop-color="rgba(255, 0, 0, 1)"/>
21
-
<stop offset="10%" stop-color="rgba(255, 154, 0, 1)"/>
22
-
<stop offset="20%" stop-color="rgba(208, 222, 33, 1)"/>
23
-
<stop offset="30%" stop-color="rgba(79, 220, 74, 1)"/>
24
-
<stop offset="40%" stop-color="rgba(63, 218, 216, 1)"/>
25
-
<stop offset="50%" stop-color="rgba(47, 201, 226, 1)"/>
26
-
<stop offset="60%" stop-color="rgba(28, 127, 238, 1)"/>
27
-
<stop offset="70%" stop-color="rgba(95, 21, 242, 1)"/>
28
-
<stop offset="80%" stop-color="rgba(186, 12, 248, 1)"/>
29
-
<stop offset="90%" stop-color="rgba(251, 7, 217, 1)"/>
30
-
<stop offset="100%" stop-color="rgba(255, 0, 0, 1)"/> -->
31
-
</linearGradient>
32
-
<g class="paths">
33
-
<path
34
-
d="M 200.70,365.61 C 200.26 366.92, 199.99 368.69, 200.18 372.13 C 200.37 375.56, 200.92 377.90, 201.64 382.78 C 202.35 387.66, 202.88 391.11, 203.74 396.53 C 204.61 401.95, 205.02 404.88, 205.95 409.87 C 206.88 414.87, 207.51 417.39, 208.38 421.52 C 209.26 425.65, 209.48 427.56, 210.34 430.53 C 211.20 433.49, 211.70 434.62, 212.69 436.34 C 213.67 438.06, 214.22 438.66, 215.27 439.12 C 216.32 439.58, 217.02 439.61, 217.96 438.64 C 218.90 437.68, 219.43 436.69, 219.98 434.31 C 220.53 431.92, 220.34 430.01, 220.71 426.73 C 221.08 423.45, 221.15 421.23, 221.85 417.89 C 222.55 414.55, 223.30 412.71, 224.23 410.05 C 225.15 407.39, 225.67 406.15, 226.49 404.59 C 227.31 403.02, 227.50 402.54, 228.34 402.23 C 229.19 401.92, 229.70 402.21, 230.71 403.04 C 231.73 403.87, 232.12 404.66, 233.42 406.40 C 234.73 408.14, 235.46 409.31, 237.24 411.73 C 239.02 414.16, 240.39 415.82, 242.32 418.52 C 244.26 421.23, 245.08 422.80, 246.92 425.26 C 248.75 427.71, 249.68 428.81, 251.51 430.80 C 253.35 432.79, 254.14 433.78, 256.09 435.19 C 258.03 436.61, 258.98 437.22, 261.26 437.88 C 263.53 438.54, 264.89 438.68, 267.45 438.48 C 270.01 438.28, 271.39 438.08, 274.05 436.88 C 276.70 435.68, 278.08 434.54, 280.73 432.47 C 283.37 430.41, 284.84 429.08, 287.27 426.56 C 289.70 424.05, 291.00 422.62, 292.90 419.89 C 294.80 417.15, 295.82 415.52, 296.78 412.89 C 297.74 410.26, 297.88 408.81, 297.69 406.72 C 297.51 404.62, 297.05 403.67, 295.87 402.42 C 294.70 401.17, 293.72 400.57, 291.82 400.46 C 289.93 400.35, 288.53 400.66, 286.38 401.87 C 284.24 403.07, 282.96 404.25, 281.11 406.48 C 279.26 408.71, 278.35 410.19, 277.14 413.03 C 275.94 415.86, 275.17 417.60, 275.08 420.65 C 274.98 423.69, 275.32 425.58, 276.68 428.25 C 278.03 430.93, 279.26 432.15, 281.85 434.04 C 284.45 435.92, 286.08 436.57, 289.65 437.68 C 293.23 438.78, 295.50 439.27, 299.71 439.57 C 303.93 439.88, 306.26 439.72, 310.73 439.21 C 315.20 438.69, 317.56 438.21, 322.06 437.00 C 326.57 435.79, 329.08 435.12, 333.26 433.17 C 337.45 431.22, 339.52 430.02, 342.99 427.25 C 346.46 424.47, 348.06 422.83, 350.61 419.30 C 353.16 415.78, 354.24 413.78, 355.72 409.62 C 357.20 405.45, 357.61 402.97, 358.02 398.49 C 358.44 394.02, 358.35 391.49, 357.81 387.24 C 357.27 382.98, 356.66 380.80, 355.33 377.22 C 354.00 373.63, 353.02 372.00, 351.17 369.32 C 349.31 366.64, 348.24 365.48, 346.07 363.83 C 343.89 362.18, 342.59 361.50, 340.29 361.09 C 337.99 360.68, 336.66 360.72, 334.56 361.77 C 332.45 362.82, 331.19 363.67, 329.76 366.32 C 328.33 368.97, 327.89 370.99, 327.39 375.01 C 326.90 379.03, 326.81 381.62, 327.27 386.43 C 327.73 391.24, 328.25 394.21, 329.70 399.07 C 331.16 403.92, 332.23 406.52, 334.56 410.71 C 336.90 414.89, 338.41 416.79, 341.39 420.01 C 344.36 423.22, 346.19 424.69, 349.43 426.77 C 352.67 428.86, 354.42 429.60, 357.60 430.42 C 360.77 431.25, 362.43 431.29, 365.29 430.89 C 368.15 430.49, 369.61 430.00, 371.91 428.43 C 374.22 426.86, 375.23 425.63, 376.80 423.05 C 378.37 420.48, 378.95 418.91, 379.75 415.55 C 380.54 412.19, 380.61 410.05, 380.77 406.26 C 380.93 402.48, 380.82 400.40, 380.54 396.63 C 380.26 392.86, 380.02 390.79, 379.38 387.43 C 378.73 384.08, 378.38 382.32, 377.32 379.88 C 376.25 377.43, 375.51 376.42, 374.05 375.23 C 372.59 374.04, 371.49 373.60, 370.04 373.94 C 368.58 374.28, 367.58 375.00, 366.79 376.93 C 366.00 378.85, 365.81 380.46, 366.10 383.56 C 366.39 386.66, 367.15 388.77, 368.22 392.45 C 369.30 396.12, 370.02 398.28, 371.47 401.91 C 372.93 405.55, 373.84 407.38, 375.50 410.64 C 377.15 413.89, 377.93 415.48, 379.75 418.18 C 381.57 420.88, 382.52 422.08, 384.58 424.15 C 386.65 426.22, 387.81 427.09, 390.09 428.53 C 392.38 429.97, 393.65 430.60, 396.01 431.37 C 398.37 432.15, 399.65 432.48, 401.91 432.41 C 404.16 432.34, 406.24 431.65, 407.27 431.00"
35
-
/>
36
-
<path
37
-
style="--delay: 1.1s"
38
-
d="M 436.98,404.86 C 436.51 404.37, 435.97 404.10, 434.69 404.03 C 433.42 403.95, 432.36 403.80, 430.61 404.48 C 428.87 405.16, 427.64 405.87, 425.96 407.41 C 424.29 408.96, 423.25 410.06, 422.24 412.22 C 421.22 414.37, 420.87 415.81, 420.90 418.21 C 420.94 420.61, 421.19 422.17, 422.41 424.22 C 423.63 426.27, 424.71 427.14, 427.01 428.47 C 429.31 429.80, 430.91 430.36, 433.91 430.88 C 436.92 431.41, 438.75 431.39, 442.03 431.10 C 445.31 430.82, 447.14 430.41, 450.31 429.48 C 453.48 428.54, 455.20 428.00, 457.88 426.43 C 460.56 424.87, 461.97 423.78, 463.71 421.64 C 465.44 419.50, 466.12 418.14, 466.55 415.73 C 466.98 413.31, 466.79 411.92, 465.85 409.56 C 464.90 407.20, 463.93 405.80, 461.82 403.91 C 459.71 402.01, 457.98 401.13, 455.29 400.07 C 452.60 399.01, 450.78 398.78, 448.39 398.61 C 446.00 398.43, 444.90 398.76, 443.33 399.18 C 441.76 399.60, 441.04 400.16, 440.54 400.70"
39
-
/>
40
-
<path
41
-
style="--delay: 1.4s"
42
-
d="M 562.42,400.80 C 562.14 401.49, 562.23 402.08, 562.48 403.60 C 562.73 405.11, 562.90 406.25, 563.66 408.36 C 564.43 410.47, 565.02 411.86, 566.30 414.16 C 567.58 416.47, 568.42 417.97, 570.05 419.90 C 571.68 421.82, 572.62 422.61, 574.45 423.79 C 576.28 424.96, 577.22 425.42, 579.21 425.76 C 581.20 426.10, 582.32 426.17, 584.41 425.48 C 586.49 424.79, 587.67 423.98, 589.64 422.32 C 591.61 420.67, 592.60 419.40, 594.25 417.19 C 595.90 414.98, 596.87 413.47, 597.90 411.28 C 598.93 409.10, 599.11 407.49, 599.39 406.26 C 599.68 405.02, 599.23 404.76, 599.31 405.10 C 599.39 405.44, 599.12 406.36, 599.79 407.95 C 600.46 409.55, 600.91 411.02, 602.65 413.08 C 604.39 415.14, 605.88 416.55, 608.48 418.24 C 611.08 419.93, 612.69 420.54, 615.67 421.54 C 618.65 422.54, 620.32 422.86, 623.39 423.23 C 626.45 423.60, 628.09 423.70, 630.99 423.41 C 633.90 423.12, 635.45 422.82, 637.91 421.77 C 640.37 420.71, 641.45 419.93, 643.32 418.14 C 645.18 416.35, 646.13 415.16, 647.25 412.82 C 648.36 410.48, 648.52 408.84, 648.88 406.42 C 649.23 404.00, 649.23 402.86, 649.01 400.72 C 648.79 398.58, 648.52 397.48, 647.75 395.74 C 646.98 394.00, 646.37 393.15, 645.15 392.01 C 643.93 390.87, 642.96 390.53, 641.65 390.05 C 640.34 389.57, 639.61 389.54, 638.60 389.62 C 637.60 389.69, 637.14 390.06, 636.62 390.41 C 636.10 390.76, 636.05 391.01, 635.98 391.38 "
43
-
/>
44
-
<path
45
-
style="--delay: 1.8s"
46
-
d="M 687.05,397.09 C 687.10 396.35, 686.94 395.47, 686.01 394.45 C 685.08 393.43, 684.22 392.59, 682.39 392.00 C 680.55 391.41, 679.16 391.21, 676.83 391.49 C 674.51 391.76, 673.12 392.11, 670.76 393.39 C 668.40 394.67, 667.04 395.80, 665.02 397.86 C 663.01 399.93, 661.87 401.23, 660.68 403.71 C 659.49 406.20, 659.00 407.77, 659.09 410.27 C 659.17 412.77, 659.63 414.10, 661.10 416.21 C 662.58 418.32, 663.95 419.48, 666.48 420.81 C 669.02 422.15, 670.61 422.43, 673.78 422.90 C 676.94 423.37, 678.94 423.31, 682.32 423.15 C 685.69 422.99, 687.65 422.87, 690.65 422.10 C 693.64 421.33, 694.98 420.63, 697.30 419.30 C 699.62 417.97, 700.76 417.20, 702.23 415.45 C 703.70 413.69, 704.29 412.54, 704.64 410.52 C 704.99 408.51, 704.73 407.34, 703.97 405.39 C 703.20 403.43, 702.45 402.32, 700.79 400.75 C 699.14 399.17, 697.93 398.51, 695.69 397.49 "
47
-
/>
48
-
<path
49
-
50
-
style="--delay: 2.0s"
51
-
d="M 714.71,395.76 C 714.21 396.26, 713.93 396.81, 713.73 398.19 C 713.54 399.57, 713.51 400.64, 713.75 402.67 C 714.00 404.69, 714.34 406.09, 714.97 408.33 C 715.60 410.56, 716.03 411.90, 716.91 413.84 C 717.78 415.77, 718.36 416.81, 719.36 418.00 C 720.36 419.18, 720.93 419.63, 721.90 419.76 C 722.87 419.90, 723.56 419.60, 724.22 418.67 C 724.89 417.73, 725.10 416.85, 725.21 415.08 C 725.33 413.31, 725.11 411.95, 724.81 409.81 C 724.51 407.67, 724.01 406.34, 723.73 404.39 C 723.45 402.44, 723.28 401.52, 723.43 400.06 C 723.57 398.60, 723.76 398.01, 724.46 397.08 C 725.17 396.15, 725.61 395.95, 726.96 395.41 C 728.31 394.87, 729.21 394.75, 731.21 394.39 C 733.21 394.04, 734.47 393.89, 736.96 393.63 C 739.45 393.37, 740.90 393.26, 743.67 393.09 C 746.43 392.92, 748.16 392.97, 750.81 392.77 "
52
-
/>
53
-
<path
54
-
style="--delay: 2.2s"
55
-
d="M 770.66,372.10 C 770.12 372.85, 769.64 373.70, 769.51 375.90 C 769.39 378.09, 769.59 379.78, 770.03 383.07 C 770.48 386.37, 770.92 388.62, 771.74 392.37 C 772.56 396.12, 773.18 398.20, 774.15 401.81 C 775.12 405.43, 775.51 407.42, 776.58 410.47 C 777.65 413.52, 778.32 414.83, 779.49 417.06 C 780.66 419.29, 781.14 420.14, 782.42 421.61 C 783.71 423.07, 784.99 424.04, 785.91 424.39 C 786.84 424.73, 787.28 424.24, 787.07 423.33 "
56
-
/>
57
-
<path
58
-
style="--delay: 2.4s"
59
-
d="M 831.93,412.49 C 831.90 411.74, 831.59 410.93, 830.60 409.98 C 829.60 409.03, 828.81 408.41, 826.95 407.74 C 825.09 407.07, 823.74 406.60, 821.31 406.64 C 818.89 406.67, 817.39 407.19, 814.82 407.94 C 812.25 408.69, 810.89 409.21, 808.47 410.39 C 806.04 411.58, 804.61 412.27, 802.71 413.85 C 800.80 415.44, 799.84 416.55, 798.94 418.32 C 798.05 420.10, 797.88 421.05, 798.24 422.74 C 798.59 424.42, 799.20 425.40, 800.72 426.75 C 802.24 428.10, 803.51 428.80, 805.83 429.50 C 808.15 430.20, 809.61 430.32, 812.31 430.24 C 815.01 430.16, 816.61 429.85, 819.31 429.10 C 822.01 428.35, 823.36 427.80, 825.79 426.50 C 828.23 425.20, 829.38 424.52, 831.49 422.60 C 833.60 420.68, 834.72 419.48, 836.35 416.90 C 837.97 414.32, 838.59 412.77, 839.62 409.70 C 840.64 406.63, 840.99 404.87, 841.46 401.56 C 841.93 398.24, 841.96 396.31, 841.98 393.12 C 842.00 389.93, 841.97 388.11, 841.56 385.62 C 841.15 383.13, 840.55 381.90, 839.94 380.67 C 839.32 379.44, 838.85 379.13, 838.50 379.47 C 838.14 379.81, 837.82 380.58, 838.16 382.37 C 838.51 384.15, 838.96 385.55, 840.23 388.41 C 841.49 391.26, 842.74 393.17, 844.47 396.64 C 846.20 400.10, 847.21 402.14, 848.88 405.73 C 850.54 409.32, 851.30 411.24, 852.78 414.59 C 854.27 417.93, 854.95 419.71, 856.30 422.46 C 857.65 425.20, 858.42 426.46, 859.53 428.31 C 860.64 430.17, 861.13 430.78, 861.86 431.73 C 862.59 432.68, 862.79 432.74, 863.19 433.06 C 863.59 433.39, 863.64 433.34, 863.87 433.35 C 864.09 433.37, 864.19 433.31, 864.32 433.13 C 864.45 432.94, 864.51 432.98, 864.51 432.44 "
60
-
/>
61
-
<path
62
-
style="--delay: 2.8s"
63
-
d="M 909.81,357.64 C 909.30 358.49, 909.06 359.62, 908.91 361.81 C 908.76 363.99, 908.89 365.66, 909.07 368.58 C 909.25 371.50, 909.51 373.23, 909.80 376.41 C 910.08 379.58, 910.13 381.38, 910.49 384.46 C 910.86 387.54, 911.15 389.05, 911.63 391.81 C 912.11 394.58, 912.41 396.07, 912.91 398.29 C 913.41 400.52, 913.64 401.44, 914.14 402.94 C 914.64 404.44, 914.91 405.27, 915.41 405.80 C 915.92 406.34, 916.34 406.27, 916.66 405.61 "
64
-
/>
65
-
<path
66
-
style="--delay: 2.9s"
67
-
d="M 920.82,441.46 C 920.47 441.77, 920.59 442.48, 921.03 442.65 C 921.47 442.81, 922.66 442.60, 923.01 442.29 C 923.37 441.99, 923.24 441.28, 922.80 441.11 C 922.36 440.95, 921.17 441.16, 920.82 441.46"
68
-
/>
69
-
</g>
70
-
</svg>
71
-
</div>
72
-
73
-
<style>
74
-
.paths path {
75
-
--line-length: 700;
76
-
--delay: 0s;
77
-
--animation-speed: 1s;
78
-
79
-
stroke-dasharray: var(--line-length);
80
-
stroke-dashoffset: var(--line-length);
81
-
animation: drawPath var(--animation-speed) linear 1 forwards;
82
-
animation-delay: var(--delay);
83
-
84
-
stroke-linecap: round;
85
-
}
86
-
87
-
@keyframes drawPath {
88
-
0% {
89
-
stroke-dashoffset: var(--line-length);
90
-
}
91
-
100% {
92
-
stroke-dashoffset: 0;
93
-
}
94
-
}
95
-
</style>