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
2.7 kB
77 lines
1<script lang="ts">
2 import Depth3D from '$lib/3D/Depth3D/Depth3D.svelte';
3
4 // @ts-ignore
5 import imageMe from '$lib/images/flo2.png?w=512&format=webp';
6 // @ts-ignore
7 import depthMe from '$lib/images/flo2-depth.png?w=512&format=webp';
8
9 import Resume from './Resume.svelte';
10</script>
11
12<div class="relative isolate overflow-hidden bg-black">
13 <div class="mx-auto max-w-5xl px-6 lg:px-8">
14 <div id="about" class="py-16 md:py-32 section">
15 <div class="grid grid-cols-1 gap-y-16 lg:grid-cols-2 lg:grid-rows-[auto_1fr] lg:gap-y-12">
16 <div class="lg:pl-20 w-full flex lg:justify-center">
17 <div class="max-w-sm px-2.5 lg:max-w-none">
18 <!-- <img
19 src={imageMe}
20 alt="this is me"
21 loading="lazy"
22 sizes="(min-width: 1024px) 32rem, 20rem"
23 class="aspect-square rotate-3 rounded-2xl bg-zinc-100 object-cover dark:bg-zinc-800"
24 /> -->
25
26 <div class="rotate-3 size-96 -m-10 lg:-m-20">
27 <Depth3D
28 image={{
29 image: imageMe,
30 depth: depthMe
31 }}
32 rounded={true}
33 />
34 <div class="sr-only">this is me</div>
35 </div>
36 </div>
37 </div>
38 <div class="lg:order-first lg:row-span-2">
39 <h1
40 class="text-4xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-5xl"
41 >
42 hey there, i'm florian. i live in berlin, where i create things for the web.
43 </h1>
44 <div class="mt-6 space-y-7 text-base text-zinc-600 dark:text-zinc-400">
45 <p>
46 i was one of the only kids in my class without a game console, but we did have a computer.
47 when i was 12, I got a coding book for christmas and started making my own games in C and
48 opengl. though i never finished any of those early projects, i got hooked on
49 programming.
50 </p>
51 <p>
52 after school, I started studying computer science and started working as a software developer.
53 i really love the web because it's so accessible — anyone with a device and internet can
54 access your work instantly. publishing and sharing your work is also pretty simple,
55 whether as a website, a pwa, or a serverless function/api.
56 </p>
57 <p>
58 in my free time, i build lots of web-based projects. i really like the
59 intersection of design and development. I love learning new things and am always
60 looking for new cool projects.
61 If you want to build something together or just want to connect, feel free to <a
62 href="#contact"
63 class="text-cyan-400 hover:text-cyan-300 font-semibold"
64 >
65 reach out.
66 </a>
67 </p>
68 </div>
69 </div>
70
71 <div class="lg:pl-20">
72 <Resume />
73 </div>
74 </div>
75 </div>
76 </div>
77</div>