fix bio styling (#27)

* create ambient ts file with shared types

* introduce url validation and conditional rendering of organizationWebsite prop

* add data to sections in page route

* add some technologies

* update bio and jobs descriptions

* update npm packages to fix vulnerabilities

* fix responsive styling of Bio component on smaller devices in landscape orientation

src/lib/components/bio.svelte

@@ -5,8 +5,10 @@
 	export let jobTitle: string;
 </script>
 
-<section class="flex flex-col justify-start items-start pb-6 border-b border-b-zinc-800 dark:border-b-zinc-400">
-	<img src={profile} alt={picDescription} class="rounded-full mb-8 min-w-[120px] w-5/6 self-center sm:self-auto sm:w-full shadow-2xl shadow-zinc-500 dark:shadow-zinc-700 print:shadow-none hover:animate-flip" />
-	<h1 class="text-zinc-950 dark:text-zinc-100 text-3xl mb-4 text-left font-extrabold">{name}</h1>
-	<h2 class="dark:text-zinc-300 text-xl font-medium">{jobTitle}</h2>
+<section class="landscape:max-md:flex-row-reverse landscape:max-md:justify-between landscape:max-md:items-center flex flex-col justify-start items-start pb-6 border-b border-b-zinc-800 dark:border-b-zinc-400">
+	<img src={profile} alt={picDescription} class="rounded-full landscape:max-md:mb-0 mb-8 min-w-[120px] landscape:max-md:w-1/4 w-5/6 self-center sm:self-auto sm:w-full shadow-2xl shadow-zinc-500 dark:shadow-zinc-700 print:shadow-none hover:animate-flip" />
+	<div class="flex flex-col items-start justify-between">
+		<h1 class="text-zinc-950 dark:text-zinc-100 text-3xl landscape:max-md:mb-2 mb-4 text-left font-extrabold">{name}</h1>
+		<h2 class="dark:text-zinc-300 text-xl font-medium">{jobTitle}</h2>
+	</div>
 </section>