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
75 lines
1<script lang="ts">
2 import Depth3D from '$lib/3D/Depth3D/Depth3D.svelte';
3
4 // @ts-ignore
5 import imageMe from '$lib/images/avatar.png?w=1024&format=webp';
6 // @ts-ignore
7 import depthMe from '$lib/images/avatar-depth.png?w=1024&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 w-72 h-72 -m-10 lg:-m-10">
27 <Depth3D
28 image={{
29 image: imageMe,
30 depth: depthMe
31 }}
32 />
33 <div class="sr-only">this is me</div>
34 </div>
35 </div>
36 </div>
37 <div class="lg:order-first lg:row-span-2">
38 <h1
39 class="text-4xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-5xl"
40 >
41 hey there, i'm florian. i live in berlin, where i create things for the web.
42 </h1>
43 <div class="mt-6 space-y-7 text-base text-zinc-600 dark:text-zinc-400">
44 <p>
45 I was one of the only kids in my class without a game console, but we had a computer.
46 At 12, I got a coding book for Christmas and started making my own games in C and
47 OpenGL. Though I never finished any of those early projects, I got hooked on
48 programming.
49 </p>
50 <p>
51 After school, I started studying computer science and became a software developer. I
52 really like the web because it's so accessible — anyone with a device and internet can
53 access your work instantly. Publishing and sharing your work is also pretty simple,
54 whether it's as a website, a PWA, or a serverless function.
55 </p>
56 <p>
57 Noawadays, I mostly build a variety of web-based projects. I am fascinated by the
58 intersection of design and development. I love learning new things and am always
59 seeking new challenges. If you have questions or just want to connect, feel free to <a
60 href="#contact"
61 class="text-cyan-400 hover:text-cyan-300 font-semibold"
62 >
63 reach out.
64 </a>
65 </p>
66 </div>
67 </div>
68
69 <div class="lg:pl-20">
70 <Resume />
71 </div>
72 </div>
73 </div>
74 </div>
75</div>