chore: update gitignore

package.json

@@ -10,30 +10,27 @@
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
   },
   "devDependencies": {
-    "@sveltejs/adapter-auto": "^1.0.3",
-    "@sveltejs/kit": "^1.5.0",
-    "autoprefixer": "^10.4.7",
-    "postcss": "^8.4.14",
-    "postcss-load-config": "^4.0.1",
-    "svelte": "^3.55.1",
-    "svelte-check": "^3.0.3",
-    "svelte-preprocess": "^4.10.7",
-    "tailwindcss": "^3.1.5",
-    "tslib": "^2.5.0",
-    "typescript": "^4.9.5",
-    "vite": "^4.1.1"
+    "@sveltejs/adapter-auto": "^3.2.0",
+    "@sveltejs/adapter-node": "^4.0.1",
+    "@sveltejs/adapter-static": "^3.0.1",
+    "@sveltejs/kit": "^2.5.7",
+    "@sveltejs/vite-plugin-svelte": "^3.1.0",
+    "autoprefixer": "^10.4.19",
+    "postcss": "^8.4.38",
+    "postcss-load-config": "^4.0.2",
+    "svelte": "^4.2.16",
+    "svelte-check": "^3.7.1",
+    "svelte-preprocess": "^5.1.4",
+    "tailwindcss": "^3.4.3",
+    "tslib": "^2.6.2",
+    "typescript": "^5.4.5",
+    "vite": "^5.2.11"
   },
   "type": "module",
   "dependencies": {
-    "@popperjs/core": "^2.11.6",
-    "@types/d3": "^7.4.0",
-    "chart.js": "^4.2.0",
-    "classnames": "^2.3.2",
-    "d3": "^7.8.2",
-    "flowbite": "^1.6.3",
-    "flowbite-svelte": "^0.30.4",
-    "highcharts": "^10.3.3",
-    "layercake": "^7.2.2",
-    "svelte-chartjs": "^3.1.2"
+    "classnames": "^2.5.1",
+    "flowbite": "^2.3.0",
+    "flowbite-svelte": "^0.44.24",
+    "svelte-language-server": "^0.16.9"
   }
 }

src/Session.vim

@@ -1,57 +0,0 @@
-let SessionLoad = 1
-let s:so_save = &g:so | let s:siso_save = &g:siso | setg so=0 siso=0 | setl so=-1 siso=-1
-let v:this_session=expand("<sfile>:p")
-silent only
-silent tabonly
-cd ~/code/svelte-ts/src
-if expand('%') == '' && !&modified && line('$') <= 1 && getline(1) == ''
-  let s:wipebuf = bufnr('%')
-endif
-let s:shortmess_save = &shortmess
-if &shortmess =~ 'A'
-  set shortmess=aoOA
-else
-  set shortmess=aoO
-endif
-badd +12 components/graph.svelte
-badd +19 routes/openmeteo/+page.server.ts
-badd +23 routes/openmeteo/+page.svelte
-argglobal
-%argdel
-$argadd components/graph.svelte
-edit components/graph.svelte
-argglobal
-balt routes/openmeteo/+page.server.ts
-setlocal fdm=manual
-setlocal fde=0
-setlocal fmr={{{,}}}
-setlocal fdi=#
-setlocal fdl=0
-setlocal fml=1
-setlocal fdn=20
-setlocal fen
-silent! normal! zE
-let &fdl = &fdl
-let s:l = 12 - ((11 * winheight(0) + 23) / 46)
-if s:l < 1 | let s:l = 1 | endif
-keepjumps exe s:l
-normal! zt
-keepjumps 12
-normal! 034|
-tabnext 1
-if exists('s:wipebuf') && len(win_findbuf(s:wipebuf)) == 0 && getbufvar(s:wipebuf, '&buftype') isnot# 'terminal'
-  silent exe 'bwipe ' . s:wipebuf
-endif
-unlet! s:wipebuf
-set winheight=1 winwidth=20
-let &shortmess = s:shortmess_save
-let s:sx = expand("<sfile>:p:r")."x.vim"
-if filereadable(s:sx)
-  exe "source " . fnameescape(s:sx)
-endif
-let &g:so = s:so_save | let &g:siso = s:siso_save
-set hlsearch
-nohlsearch
-doautoall SessionLoadPost
-unlet SessionLoad
-" vim: set ft=vim :

src/components/exports.ts

@@ -1 +0,0 @@
-export { default as Navbar } from "./navbar.svelte"

src/components/highcharts.ts

@@ -1,16 +0,0 @@
-import Highcharts from 'highcharts';
-
-export default (node, config) => {
-	const redraw = true;
-	const oneToOne = true;
-	const chart = Highcharts.chart(node, config);
-
-	return {
-		update(config) {
-			chart.update(config, redraw, oneToOne);
-		},
-		destroy() {
-			chart.destroy();
-		}
-	};
-}

src/lib/about.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import Image from "$lib/image.svelte";
+
+  export let who: string = "who?";
+  export let headerImage: string | null = null;
+  export let imageDesc: string = '';
+</script>
+<div class="my-5">
+  {#if headerImage}
+    <Image {headerImage} {imageDesc}/>
+  {/if}
+  <h1 class='text-5xl'>About {who}</h1>
+  <div class="grid grid-cols-1 gap-y-3 my-3">
+    <hr>
+    <slot />
+  </div>
+</div>

src/lib/classes/menudata.ts

@@ -0,0 +1 @@
+export type MenuData = {menuLink: string, menuName: string}

src/lib/code.svelte

@@ -0,0 +1,4 @@
+<code class="bg-neutral-200 dark:bg-neutral-950 px-2 py-1 rounded">
+	<slot/>
+</code>
+

src/lib/header.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+  export let content: string;
+  export let classList: string[];
+</script>
+<p class={...classList}>{content}</p>

src/lib/image.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  export let headerImage: string | null = null;
+  export let imageDesc: string = '';
+</script>
+<div class="mx-auto mb-4">
+    <img class='rounded-lg' src={headerImage} alt={imageDesc}/>
+</div>

src/lib/link.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { type LinkHref, type LinkReferrer, type LinkTarget, type LinkText, type LinkUnderline } from "$lib/types/link"
+    import Code from "./code.svelte";
+	
+	export let link: LinkHref;
+	export let text: LinkText;
+	export let target: LinkTarget = '_self';
+	export let referrer: LinkReferrer = 'no-referrer';
+	export let underline: LinkUnderline = undefined;
+	export let asCode: boolean = false;
+</script>
+<a href={link} target="{target}" referrerpolicy="{referrer}" class:hover:underline={underline === 'hover'} class:underline={underline === true} >
+	{#if asCode}
+		<Code>{text}</Code>
+	{:else}
+		{text}
+	{/if}
+</a>

src/lib/mainpage.svelte

@@ -1,18 +0,0 @@
-<script lang="ts">
-    import { Heading, Li, List } from "flowbite-svelte";
-	
-	export let meData: { sectionTitle: string, sectionItems: { content: string }[] }[] = [];
-	
-</script>
-{#each meData as mdt}
-	<Heading>{mdt.sectionTitle}</Heading>
-	<List>
-	{#each mdt.sectionItems as sectItems}
-		<Li>{sectItems.content}</Li>
-	{:else}
-		<Li>No items</Li>
-	{/each}
-	</List>
-{:else}
-	<h5 class="text-center">No data about me (yet!)</h5>
-{/each}

src/lib/navbar.svelte

@@ -1,18 +1,20 @@
 <script lang="ts">
-	import { NavbarObject } from "../classes/NavObject";
 	import { Navbar, NavBrand, NavLi, NavUl, NavHamburger, DarkMode } from 'flowbite-svelte';
-	export let navobjs: NavbarObject[] = [new NavbarObject('#', 'No nav elements provided')];
+    import type { NavbarObject } from './classes/NavObject';
+	export let navobjs: NavbarObject[] = [];
 	export let pageTitle: string = "Default Title";
 	export let toggleDarkModeButton: boolean = true;
 </script>
-<Navbar let:hidden let:toggle color="form" navDivClass="mx-auto flex flex-wrap justify-between items-center" navClass="px-4 md:px-2 py-2.5 w-full bg-zinc-200 dark:bg-zinc-900">
+<Navbar let:hidden let:toggle color="form" class="px-4 md:px-2 py-2.5 w-full bg-zinc-200 dark:bg-zinc-900">
 	<NavBrand href="/">
     	<span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white">
 			{ pageTitle.toUpperCase() }
 		</span>
 	</NavBrand>
-	<NavHamburger on:click={toggle} />
 	<div class="flex">
+		{#if navobjs.length !== 0}
+			<NavHamburger on:click={toggle} btnClass={'ml-3 lg:hidden'} />
+    {/if}
 		<NavUl {hidden}>
 			{#each navobjs as navElem}
 				<NavLi href="{ navElem.link }">{ navElem.text }</NavLi>

src/lib/sqmenu.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+    export let menudata: {menuName: string, menuLink: string}[] = [];
+    $: colNum = (Math.floor(menudata.length / 2) < 3) ? Math.floor(menudata.length / 2) : 3;
+</script>
+<div class="grid gap-y-6 gap-x-6 grid-cols-{colNum} text-center sm:grid-cols-1 justify-content-center">
+{#each menudata as menu}
+    <a href="{menu.menuLink}" target="_self">
+        <div class="flex content-center justify-center border rounded-md border-black dark:border-white border-solid px-6 py-8 dark:hover:bg-zinc-900 dark:bg-transparent bg-transparent min-w-[50%]">
+            <h2 class='text-xl'>{menu.menuName}</h2>
+        </div>
+    </a>
+{/each}
+</div>

src/lib/store.js

@@ -0,0 +1,5 @@
+import { readable, writable } from 'svelte/store';
+
+export let navTitle = writable('Portfolio')
+
+export let languages = readable(['ca', 'en-US', 'jp', 'es']);

src/lib/tech.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	export let tech: string;
+	export let logoBaseDir: string;
+	export let logoFiletype: 'svg'| 'png' = 'svg';
+	export let size: 'small' | 'medium' | 'big' = 'small'
+
+	let logoDir: string = `/${logoBaseDir}/${tech}-logo.${logoFiletype}`;
+	let logoAlt: string = `${tech} logo`;
+	let isSmall = size === 'small';
+	let isMedium = size === 'medium';
+	let isBig = size === 'big';
+</script>
+<img src={logoDir} alt={logoAlt} class:small={isSmall} class:medium={isMedium} class:big={isBig}>
+<style>
+	.small {
+		height: 3rem;
+	}
+	.medium {
+		height: 3.5rem;
+	}
+	.big {
+		height: 4rem;
+	}
+</style>

src/lib/title.svelte

@@ -0,0 +1,4 @@
+<script lang="ts">
+	export let title: string;
+</script>
+<h1 class="text-5xl mb-5 font-semibold">{title}</h1>

src/lib/types/link.ts

@@ -0,0 +1,5 @@
+export type LinkUnderline = boolean | 'hover' | undefined;
+export type LinkTarget = '_blank' | '_self' | undefined;
+export type LinkReferrer = 'no-referrer' | 'no-referrer-when-downgrade' | 'origin' | 'origin-when-cross-origin' | 'same-origin' | 'strict-origin' | 'strict-origin-when-cross-origin' | 'unsafe-url' | undefined;
+export type LinkText = string;
+export type LinkHref = string;

src/lib/ubication.svelte

@@ -0,0 +1,4 @@
+<svelte:head>
+	<script src="https://kit.fontawesome.com/c20c99c16a.js" crossorigin="anonymous"></script>
+</svelte:head>
+<span><slot/> <span class="fa-solid fa-location-dot"></span></span>

src/routes/+layout.svelte

@@ -1,11 +1,13 @@
 <script lang="ts">
     import "../app.postcss";
-    import { NavbarObject } from "../classes/NavObject";
-    import Navbar from "../lib/navbar.svelte";
+    import Navbar from "$lib/navbar.svelte";
     import './styles.css';
+    import { navTitle } from "$lib/store";
 
-    let pageTitle: string = "pswsm meteo"
-    let navbarElements: NavbarObject[] = [new NavbarObject('/', 'Home'), new NavbarObject('/abtme', 'Sobre mi'), new NavbarObject('/temps', 'Temps'), new NavbarObject('/xema', 'Estacions'), new NavbarObject('/openmeteo', 'Dades Open Meteo')]
+    let pageTitle: string = $navTitle ?? 'Default Title'
+    // let navbarElements: NavbarObject[] = [new NavbarObject('/', 'Home'), new NavbarObject('/abtme', 'Sobre mi'), new NavbarObject('/temps', 'Temps'), new NavbarObject('/xema', 'Estacions'), new NavbarObject('/openmeteo', 'Dades Open Meteo')]
 </script>
-<Navbar navobjs={navbarElements} pageTitle={pageTitle} />
-<slot></slot>
+<Navbar pageTitle={pageTitle} />
+<main>
+    <slot></slot>
+</main>

src/routes/+layout.ts

@@ -0,0 +1 @@
+export const prerender = true;

src/routes/+page.svelte

@@ -1,8 +1,17 @@
-<script>
-    import Mainpage from "$lib/mainpage.svelte";
+<script lang="ts">
+    import Sqmenu from "$lib/sqmenu.svelte";
+    import type { MenuData } from "$lib/classes/menudata"
+    import About from "$lib/about.svelte";
+    import Link from "$lib/link.svelte";
 
+    let menudata: MenuData[] = [{menuLink: '/abtme', menuName:'About me'}, {menuLink: '/blog', menuName:'Blog'}, {menuLink: '/temps', menuName:'Temps'}, {menuLink: '/openmeteo', menuName:'Dades Open Meteo'}]
 </script>
-
-<div class="p-8">
-<Mainpage />
-</div>
+<section id="main">
+    <About who={'me'} headerImage={'/jo_web.jpg'}>
+        <h1 class="text-xl">Hi there! I am <strong>Pau Figueras</strong>, <span class="text-xl">a bioinformatician and web developer</span></h1>
+        <p class="text-lg">To know more about me check the <Link {...{text: "About me", link: "/abtme", underline: 'hover', asCode: true}} /> page</p>
+    </About>
+</section>
+<section id="menu">
+    <Sqmenu {menudata} />
+</section>

src/routes/abtme/+page.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+    import Link from '$lib/link.svelte';
+    import Tech from '$lib/tech.svelte';
+	import Title from '$lib/title.svelte';
+	import Ubication from '$lib/ubication.svelte';
+	let techs: string[] = ['ts', 'js', 'svelte', 'react', 'cpp', 'python', 'rust', 'angular'];
+</script>
+<section class="grid grid-cols-8 gap-2">
+	<grid-section id="main" class="lg:col-span-6 md:col-span-8">
+		<Title title="Who am I?"/>
+		<p>I'm a <strong>fullstack</strong> developer (don't mind either front or back), and also a <strong>bioinformatician</strong>.</p>
+		<div class="pb-3">
+			<p class="text-3xl font-semibold py-3">Education</p>
+			<p>I've studied Web Development, with a specialization in bioinformatics.</p>
+			<ul class="list-disc">
+				<li>Higher Proefssional Degree on Web Development - Bioinformatics Specialization<br>@ <Link {...{link: 'https://proven.cat', text: 'Institut Provençana', underline: true}} /></li>
+				<li>Middle Professional Defree on Information Systems & Networks<br>@ <Link link="https://escoladeltreball.org" text="Insitut - Escola del Treball de Barcelona" underline={true} /></li>
+			</ul>
+		</div>
+		<div class="subsection pb-3" id="status">
+			<p class="text-3xl font-semibold py-3">Curent status</p>
+			<p>Based in: <Ubication>L'Hospitalet de Llobregat</Ubication></p>
+			<p>Employment: Backend Developer @ <Link link="https://taclia.es" text="Taclia" asCode underline/></p>
+		</div>
+	</grid-section>
+	<grid-section id="lateral" class="lg:col-span-2 md:col-span-8">
+		<p class="text-3xl font-semibold py-2">Technologies</p>
+			<div class="flex flex-wrap gap-2">
+				{#each techs as tech}
+					<Tech logoBaseDir="tech" {tech} size="small"/>
+				{/each}
+			</div>
+	</grid-section>
+</section>

src/routes/blog/+page.svelte

@@ -0,0 +1,4 @@
+<script lang="ts">
+	const _pageTitle = 'Blog';
+</script>
+<p class="text-2xl">Sota construcció</p>

src/routes/openmeteo/+page.server.ts

@@ -1,74 +1,13 @@
+export const prerender = false;
+
 const geocodingApiBase: string = "https://geocoding-api.open-meteo.com/v1/search";
 const openMeteoApiBase: string = "https://api.open-meteo.com/v1/forecast";
 let location: string = "L'Hospitalet de Llobregat";
 let previousLocation: string = '';
 
-export function load(): object {
-	let ubicacio: Promise<string> = getFromOpenMeteo(location).then( (res) => res.results[0].name );
-	let temps: Promise<any> = getFromOpenMeteo(location)
-	.then( (res) => {
-		return { latitude: res.results[0].latitude, longitude: res.results[0].longitude };
-	})
-	.then( (latlon) => {
-		return getWeatherFromOpenMeteo(latlon.latitude, latlon.longitude);
-		// return [ latlon.longitude, latlon.latitude ];
-	})
-	.then( (res) => {
-		let yAxis: object[] = [];
-		let temps: object[] = [];
-		["hourly", "six_hourly", "three_hourly", "daily"].forEach(function (section, index) {
-			if (!(section in res)) {
-				return
-			}
-			Object.entries(res[section]||[]).forEach(function(k){
-				if (k[0] == "time" || k[0] == "sunrise" || k[0] == "sunset") {
-					return
-				}
-				let hourly_starttime = (res[section].time[0] + res.utc_offset_seconds) * 1000;
-				let pointInterval = (res[section].time[1] - res[section].time[0]) * 1000;
-				let unit = res[`${section}_units`][k[0]];
-				var axisId = null;
-				for (let i = 0; i < yAxis.length; i++) {
-					if (yAxis[i].title.text == unit) {
-						axisId = i;
-					}
-				}
-				if (axisId == null) {
-					yAxis.push({title: {text: unit}});
-					axisId = yAxis.length-1;
-				}
-				var ser = {
-					name: k[0],
-					res: k[1],
-					yAxis: axisId,
-					pointStart:hourly_starttime,
-					pointInterval: pointInterval,
-					type: (unit == 'mm' || unit == 'cm' || unit == 'inch' || unit == 'MJ/m²') ? 'column' : 'line',
-					tooltip: {
-						valueSuffix: " " + unit,
-					},
-					dataGrouping: {groupPixelWidth: 12}
-					/*dataGrouping: {
-						enabled: true,
-						forced: true,
-						units: [['year',[1]]]
-					}*/
-				};
-				temps.push(ser);
-			});
-		});
-		return temps;
-	} )
-
-	return { ubicacio, temps }
-	/**
-	let openMeteoData = getFromOpenMeteo(location);
-	let latitude: Promise<number> = openMeteoData.then((data) => data.results[0].latitude).catch((_e) => 41.35967);
-	let longitude: Promise<number> = openMeteoData.then((data) => data.results[0].longitude).catch((_e) => 2.10028 );
-	let openMeteoWeather = getWeatherFromOpenMeteo(latitude, longitude);
-	let openMeteoFetchUrl: string = openMeteoApiBase + '?latitude=' + latitude + '&logitude=' + longitude;
-	return { location: openMeteoData.then( (data) => data.results[0].name ).catch( (_e) => previousLocation ), weatherData: openMeteoWeather, latitude, longitude, openMeteoFetchUrl }
-	*/
+export async function load(): Promise<any> {
+	let ubicacio: string = await getFromOpenMeteo(location).then( (res) => res.results[0].name );
+	return { ubicacio }
 };
 
 function changeLocation(newLoc: string): void {
@@ -96,7 +35,6 @@ async function getFromOpenMeteo(ubicacio: string): Promise<any> {
 }
 
 async function getWeatherFromOpenMeteo(latitude: any, longitude: any) {
-	// let openMeteoResponse: Response = await fetch(openMeteoApiBase + '?latitude=' + latitude + '&longitude=' + longitude);
 	let openMeteoResponse: Response = await fetch(apiUrlBuilder(openMeteoApiBase, [['latitude', latitude], ['longitude', longitude], ['hourly', 'temperature_2m,rain,showers,snowfall']]));
 	return openMeteoResponse.json()
 }

src/routes/openmeteo/+page.svelte

@@ -1,37 +1,32 @@
 <script lang="ts">
 	import { enhance } from "$app/forms";
-    import { D3LinePlot } from "$lib";
-    // import Graph from "../../lib/graph.svelte";
 
 	let display: string = 'none';
 	let loading: boolean = false;
 
-	export let data: { ubicacio: string, temps: any };
+	export let data: { ubicacio: string };
 
 	function toggleDisplay(): void {
 		display = (display === 'none') ? 'block' : 'none';
 	}
+	console.log({data})
 </script>
 <main>
-<div class="box" id="locChange" style="display: {display};">
+	<div class="box" id="locChange" style="display: {display};">
 		<form action="?/changeLoc" method="post" use:enhance={ () => { loading = true; return async ( { update } ) => { await update(); loading = false; } } }>
 		<p>Change location</p>
 			<div class="schBox"><input type="text" placeholder="Change location" name='newloc' disabled={ loading }></div>
 			<button type="submit" disabled={loading}>Canviar</button>
 		</form>
-</div>
-<h2>Ubicació actual: { data.ubicacio }</h2>
-<button type="button" on:click={toggleDisplay}>Canviar ubicació</button>
-<pre>{ JSON.stringify(data) }</pre>
-<hr>
-<D3LinePlot />
-<span>some text</span>
-<hr>
+	</div>
+	<h2>Ubicació actual: { data.ubicacio }</h2>
+	<button type="button" on:click={toggleDisplay}>Canviar ubicació</button>
+	<pre>{ JSON.stringify(data) }</pre>
 </main>
 <footer>
-<p>Dades provinents de:</p>
-<ul>
+	<p>Dades provinents de:</p>
+	<ul>
 		<li><a href='https://meteo.cat' target="_blank" rel="noreferrer">Servei Meteorologic de Catalunya</a></li>
 		<li><a href='https://open-meteo.com' target="_blank" rel="noreferrer">Open-Meteo</a></li>
-</ul>
+	</ul>
 </footer>

src/routes/styles.css

@@ -5,3 +5,17 @@ body {
 main, footer {
 	margin: 0 8px;
 }
+
+section {
+	width: 75%;
+	margin-left: auto;
+	margin-right: auto;
+	margin-top: 1.25rem;
+	margin-bottom: 1.25rem;
+}
+
+grid-section {
+	margin-right: auto;
+	margin-top: 1.25rem;
+	margin-bottom: 1.25rem;
+}

src/routes/temps/+page.server.ts

@@ -1,3 +1,5 @@
+export const prerender = false;
+
 const headers = { 'X-API-KEY': '1FvqqqUpoeNgNpxZQxJX6FBDLbwKscx5hgXhZxUb', 'Content-type': 'application/json' }
 const geocodingApiBase: string = "https://geocoding-api.open-meteo.com/v1/search";
 const openMeteoApiBase: string = "https://api.open-meteo.com/v1/forecast";

static/tech/angular-logo.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 250 250" style="enable-background:new 0 0 250 250;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#DD0031;}
+	.st1{fill:#C3002F;}
+	.st2{fill:#FFFFFF;}
+</style>
+<g>
+	<polygon class="st0" points="125,30 125,30 125,30 31.9,63.2 46.1,186.3 125,230 125,230 125,230 203.9,186.3 218.1,63.2 	"/>
+	<polygon class="st1" points="125,30 125,52.2 125,52.1 125,153.4 125,153.4 125,230 125,230 203.9,186.3 218.1,63.2 125,30 	"/>
+	<path class="st2" d="M125,52.1L66.8,182.6h0h21.7h0l11.7-29.2h49.4l11.7,29.2h0h21.7h0L125,52.1L125,52.1L125,52.1L125,52.1
+		L125,52.1z M142,135.4H108l17-40.9L142,135.4z"/>
+</g>
+</svg>

static/tech/cpp-logo.svg

@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="306px" height="344.35px" viewBox="0 0 306 344.35" enable-background="new 0 0 306 344.35" xml:space="preserve">
+<path fill="#00599C" d="M302.107,258.262c2.401-4.159,3.893-8.845,3.893-13.053V99.14c0-4.208-1.49-8.893-3.892-13.052L153,172.175
+	L302.107,258.262z"/>
+<path fill="#004482" d="M166.25,341.193l126.5-73.034c3.644-2.104,6.956-5.737,9.357-9.897L153,172.175L3.893,258.263
+	c2.401,4.159,5.714,7.793,9.357,9.896l126.5,73.034C147.037,345.401,158.963,345.401,166.25,341.193z"/>
+<path fill="#659AD2" d="M302.108,86.087c-2.402-4.16-5.715-7.793-9.358-9.897L166.25,3.156c-7.287-4.208-19.213-4.208-26.5,0
+	L13.25,76.19C5.962,80.397,0,90.725,0,99.14v146.069c0,4.208,1.491,8.894,3.893,13.053L153,172.175L302.108,86.087z"/>
+<g>
+	<path fill="#FFFFFF" d="M153,274.175c-56.243,0-102-45.757-102-102s45.757-102,102-102c36.292,0,70.139,19.53,88.331,50.968
+		l-44.143,25.544c-9.105-15.736-26.038-25.512-44.188-25.512c-28.122,0-51,22.878-51,51c0,28.121,22.878,51,51,51
+		c18.152,0,35.085-9.776,44.191-25.515l44.143,25.543C223.142,254.644,189.294,274.175,153,274.175z"/>
+</g>
+<g>
+	<polygon fill="#FFFFFF" points="255,166.508 243.666,166.508 243.666,155.175 232.334,155.175 232.334,166.508 221,166.508 
+		221,177.841 232.334,177.841 232.334,189.175 243.666,189.175 243.666,177.841 255,177.841 	"/>
+</g>
+<g>
+	<polygon fill="#FFFFFF" points="297.5,166.508 286.166,166.508 286.166,155.175 274.834,155.175 274.834,166.508 263.5,166.508 
+		263.5,177.841 274.834,177.841 274.834,189.175 286.166,189.175 286.166,177.841 297.5,177.841 	"/>
+</g>
+</svg>

static/tech/js-logo.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 630 630">
+<rect width="630" height="630" fill="#f7df1e"/>
+<path d="m423.2 492.19c12.69 20.72 29.2 35.95 58.4 35.95 24.53 0 40.2-12.26 40.2-29.2 0-20.3-16.1-27.49-43.1-39.3l-14.8-6.35c-42.72-18.2-71.1-41-71.1-89.2 0-44.4 33.83-78.2 86.7-78.2 37.64 0 64.7 13.1 84.2 47.4l-46.1 29.6c-10.15-18.2-21.1-25.37-38.1-25.37-17.34 0-28.33 11-28.33 25.37 0 17.76 11 24.95 36.4 35.95l14.8 6.34c50.3 21.57 78.7 43.56 78.7 93 0 53.3-41.87 82.5-98.1 82.5-54.98 0-90.5-26.2-107.88-60.54zm-209.13 5.13c9.3 16.5 17.76 30.45 38.1 30.45 19.45 0 31.72-7.61 31.72-37.2v-201.3h59.2v202.1c0 61.3-35.94 89.2-88.4 89.2-47.4 0-74.85-24.53-88.81-54.075z"/>
+</svg>

static/tech/python-logo.svg

@@ -0,0 +1,265 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   version="1.0"
+   id="svg2"
+   sodipodi:version="0.32"
+   inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
+   sodipodi:docname="python-logo-only.svg"
+   width="83.371017pt"
+   height="101.00108pt"
+   inkscape:export-filename="python-logo-only.png"
+   inkscape:export-xdpi="232.44"
+   inkscape:export-ydpi="232.44"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/">
+  <metadata
+     id="metadata371">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     inkscape:window-height="2080"
+     inkscape:window-width="1976"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     guidetolerance="10.0"
+     gridtolerance="10.0"
+     objecttolerance="10.0"
+     borderopacity="1.0"
+     bordercolor="#666666"
+     pagecolor="#ffffff"
+     id="base"
+     inkscape:zoom="2.1461642"
+     inkscape:cx="91.558698"
+     inkscape:cy="47.9926"
+     inkscape:window-x="1092"
+     inkscape:window-y="72"
+     inkscape:current-layer="svg2"
+     width="210mm"
+     height="40mm"
+     units="mm"
+     inkscape:showpageshadow="2"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="pt"
+     showgrid="false"
+     inkscape:window-maximized="0" />
+  <defs
+     id="defs4">
+    <linearGradient
+       id="linearGradient2795">
+      <stop
+         style="stop-color:#b8b8b8;stop-opacity:0.49803922;"
+         offset="0"
+         id="stop2797" />
+      <stop
+         style="stop-color:#7f7f7f;stop-opacity:0;"
+         offset="1"
+         id="stop2799" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient2787">
+      <stop
+         style="stop-color:#7f7f7f;stop-opacity:0.5;"
+         offset="0"
+         id="stop2789" />
+      <stop
+         style="stop-color:#7f7f7f;stop-opacity:0;"
+         offset="1"
+         id="stop2791" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient3676">
+      <stop
+         style="stop-color:#b2b2b2;stop-opacity:0.5;"
+         offset="0"
+         id="stop3678" />
+      <stop
+         style="stop-color:#b3b3b3;stop-opacity:0;"
+         offset="1"
+         id="stop3680" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient3236">
+      <stop
+         style="stop-color:#f4f4f4;stop-opacity:1"
+         offset="0"
+         id="stop3244" />
+      <stop
+         style="stop-color:white;stop-opacity:1"
+         offset="1"
+         id="stop3240" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient4671">
+      <stop
+         style="stop-color:#ffd43b;stop-opacity:1;"
+         offset="0"
+         id="stop4673" />
+      <stop
+         style="stop-color:#ffe873;stop-opacity:1"
+         offset="1"
+         id="stop4675" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient4689">
+      <stop
+         style="stop-color:#5a9fd4;stop-opacity:1;"
+         offset="0"
+         id="stop4691" />
+      <stop
+         style="stop-color:#306998;stop-opacity:1;"
+         offset="1"
+         id="stop4693" />
+    </linearGradient>
+    <linearGradient
+       x1="224.23996"
+       y1="144.75717"
+       x2="-65.308502"
+       y2="144.75717"
+       id="linearGradient2987"
+       xlink:href="#linearGradient4671"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(100.2702,99.61116)" />
+    <linearGradient
+       x1="172.94208"
+       y1="77.475983"
+       x2="26.670298"
+       y2="76.313133"
+       id="linearGradient2990"
+       xlink:href="#linearGradient4689"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(100.2702,99.61116)" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient4689"
+       id="linearGradient2587"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(100.2702,99.61116)"
+       x1="172.94208"
+       y1="77.475983"
+       x2="26.670298"
+       y2="76.313133" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient4671"
+       id="linearGradient2589"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(100.2702,99.61116)"
+       x1="224.23996"
+       y1="144.75717"
+       x2="-65.308502"
+       y2="144.75717" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient4689"
+       id="linearGradient2248"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(100.2702,99.61116)"
+       x1="172.94208"
+       y1="77.475983"
+       x2="26.670298"
+       y2="76.313133" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient4671"
+       id="linearGradient2250"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(100.2702,99.61116)"
+       x1="224.23996"
+       y1="144.75717"
+       x2="-65.308502"
+       y2="144.75717" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient4671"
+       id="linearGradient2255"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(0.562541,0,0,0.567972,-11.5974,-7.60954)"
+       x1="224.23996"
+       y1="144.75717"
+       x2="-65.308502"
+       y2="144.75717" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient4689"
+       id="linearGradient2258"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(0.562541,0,0,0.567972,-11.5974,-7.60954)"
+       x1="172.94208"
+       y1="76.176224"
+       x2="26.670298"
+       y2="76.313133" />
+    <radialGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient2795"
+       id="radialGradient2801"
+       cx="61.518883"
+       cy="132.28575"
+       fx="61.518883"
+       fy="132.28575"
+       r="29.036913"
+       gradientTransform="matrix(1,0,0,0.177966,0,108.7434)"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient4671"
+       id="linearGradient1475"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(0.562541,0,0,0.567972,-14.99112,-11.702371)"
+       x1="150.96111"
+       y1="192.35176"
+       x2="112.03144"
+       y2="137.27299" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient4689"
+       id="linearGradient1478"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(0.562541,0,0,0.567972,-14.99112,-11.702371)"
+       x1="26.648937"
+       y1="20.603781"
+       x2="135.66525"
+       y2="114.39767" />
+    <radialGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient2795"
+       id="radialGradient1480"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(1.7490565e-8,-0.23994696,1.054668,3.7915457e-7,-83.7008,142.46201)"
+       cx="61.518883"
+       cy="132.28575"
+       fx="61.518883"
+       fy="132.28575"
+       r="29.036913" />
+  </defs>
+  <path
+     style="fill:url(#linearGradient1478);fill-opacity:1"
+     d="M 54.918785,9.1927421e-4 C 50.335132,0.02221727 45.957846,0.41313697 42.106285,1.0946693 30.760069,3.0991731 28.700036,7.2947714 28.700035,15.032169 v 10.21875 h 26.8125 v 3.40625 h -26.8125 -10.0625 c -7.792459,0 -14.6157588,4.683717 -16.7499998,13.59375 -2.46181998,10.212966 -2.57101508,16.586023 0,27.25 1.9059283,7.937852 6.4575432,13.593748 14.2499998,13.59375 h 9.21875 v -12.25 c 0,-8.849902 7.657144,-16.656248 16.75,-16.65625 h 26.78125 c 7.454951,0 13.406253,-6.138164 13.40625,-13.625 v -25.53125 c 0,-7.2663386 -6.12998,-12.7247771 -13.40625,-13.9374997 C 64.281548,0.32794397 59.502438,-0.02037903 54.918785,9.1927421e-4 Z m -14.5,8.21875012579 c 2.769547,0 5.03125,2.2986456 5.03125,5.1249996 -2e-6,2.816336 -2.261703,5.09375 -5.03125,5.09375 -2.779476,-1e-6 -5.03125,-2.277415 -5.03125,-5.09375 -10e-7,-2.826353 2.251774,-5.1249996 5.03125,-5.1249996 z"
+     id="path1948" />
+  <path
+     style="fill:url(#linearGradient1475);fill-opacity:1"
+     d="m 85.637535,28.657169 v 11.90625 c 0,9.230755 -7.825895,16.999999 -16.75,17 h -26.78125 c -7.335833,0 -13.406249,6.278483 -13.40625,13.625 v 25.531247 c 0,7.266344 6.318588,11.540324 13.40625,13.625004 8.487331,2.49561 16.626237,2.94663 26.78125,0 6.750155,-1.95439 13.406253,-5.88761 13.40625,-13.625004 V 86.500919 h -26.78125 v -3.40625 h 26.78125 13.406254 c 7.792461,0 10.696251,-5.435408 13.406241,-13.59375 2.79933,-8.398886 2.68022,-16.475776 0,-27.25 -1.92578,-7.757441 -5.60387,-13.59375 -13.406241,-13.59375 z m -15.0625,64.65625 c 2.779478,3e-6 5.03125,2.277417 5.03125,5.093747 -2e-6,2.826354 -2.251775,5.125004 -5.03125,5.125004 -2.76955,0 -5.03125,-2.29865 -5.03125,-5.125004 2e-6,-2.81633 2.261697,-5.093747 5.03125,-5.093747 z"
+     id="path1950" />
+  <ellipse
+     style="opacity:0.44382;fill:url(#radialGradient1480);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:15.4174;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     id="path1894"
+     cx="55.816761"
+     cy="127.70079"
+     rx="35.930977"
+     ry="6.9673119" />
+</svg>

static/tech/react-logo.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="-11 -10.13 22 20.27">
+  <circle r="2" fill="#087ea4"/>
+  <g stroke="#087ea4">
+    <ellipse rx="10" ry="4.5"/>
+    <ellipse rx="10" ry="4.5" transform="rotate(60)"/>
+    <ellipse rx="10" ry="4.5" transform="rotate(120)"/>
+  </g>
+</svg>

static/tech/rust-logo.svg

@@ -0,0 +1 @@
+<svg height="144" width="144" xmlns="http://www.w3.org/2000/svg"><path d="m71.05 23.68c-26.06 0-47.27 21.22-47.27 47.27s21.22 47.27 47.27 47.27 47.27-21.22 47.27-47.27-21.22-47.27-47.27-47.27zm-.07 4.2a3.1 3.11 0 0 1 3.02 3.11 3.11 3.11 0 0 1 -6.22 0 3.11 3.11 0 0 1 3.2-3.11zm7.12 5.12a38.27 38.27 0 0 1 26.2 18.66l-3.67 8.28c-.63 1.43.02 3.11 1.44 3.75l7.06 3.13a38.27 38.27 0 0 1 .08 6.64h-3.93c-.39 0-.55.26-.55.64v1.8c0 4.24-2.39 5.17-4.49 5.4-2 .23-4.21-.84-4.49-2.06-1.18-6.63-3.14-8.04-6.24-10.49 3.85-2.44 7.85-6.05 7.85-10.87 0-5.21-3.57-8.49-6-10.1-3.42-2.25-7.2-2.7-8.22-2.7h-40.6a38.27 38.27 0 0 1 21.41-12.08l4.79 5.02c1.08 1.13 2.87 1.18 4 .09zm-44.2 23.02a3.11 3.11 0 0 1 3.02 3.11 3.11 3.11 0 0 1 -6.22 0 3.11 3.11 0 0 1 3.2-3.11zm74.15.14a3.11 3.11 0 0 1 3.02 3.11 3.11 3.11 0 0 1 -6.22 0 3.11 3.11 0 0 1 3.2-3.11zm-68.29.5h5.42v24.44h-10.94a38.27 38.27 0 0 1 -1.24-14.61l6.7-2.98c1.43-.64 2.08-2.31 1.44-3.74zm22.62.26h12.91c.67 0 4.71.77 4.71 3.8 0 2.51-3.1 3.41-5.65 3.41h-11.98zm0 17.56h9.89c.9 0 4.83.26 6.08 5.28.39 1.54 1.26 6.56 1.85 8.17.59 1.8 2.98 5.4 5.53 5.4h16.14a38.27 38.27 0 0 1 -3.54 4.1l-6.57-1.41c-1.53-.33-3.04.65-3.37 2.18l-1.56 7.28a38.27 38.27 0 0 1 -31.91-.15l-1.56-7.28c-.33-1.53-1.83-2.51-3.36-2.18l-6.43 1.38a38.27 38.27 0 0 1 -3.32-3.92h31.27c.35 0 .59-.06.59-.39v-11.06c0-.32-.24-.39-.59-.39h-9.15zm-14.43 25.33a3.11 3.11 0 0 1 3.02 3.11 3.11 3.11 0 0 1 -6.22 0 3.11 3.11 0 0 1 3.2-3.11zm46.05.14a3.11 3.11 0 0 1 3.02 3.11 3.11 3.11 0 0 1 -6.22 0 3.11 3.11 0 0 1 3.2-3.11z"/><path d="m115.68 70.95a44.63 44.63 0 0 1 -44.63 44.63 44.63 44.63 0 0 1 -44.63-44.63 44.63 44.63 0 0 1 44.63-44.63 44.63 44.63 0 0 1 44.63 44.63zm-.84-4.31 6.96 4.31-6.96 4.31 5.98 5.59-7.66 2.87 4.78 6.65-8.09 1.32 3.4 7.46-8.19-.29 1.88 7.98-7.98-1.88.29 8.19-7.46-3.4-1.32 8.09-6.65-4.78-2.87 7.66-5.59-5.98-4.31 6.96-4.31-6.96-5.59 5.98-2.87-7.66-6.65 4.78-1.32-8.09-7.46 3.4.29-8.19-7.98 1.88 1.88-7.98-8.19.29 3.4-7.46-8.09-1.32 4.78-6.65-7.66-2.87 5.98-5.59-6.96-4.31 6.96-4.31-5.98-5.59 7.66-2.87-4.78-6.65 8.09-1.32-3.4-7.46 8.19.29-1.88-7.98 7.98 1.88-.29-8.19 7.46 3.4 1.32-8.09 6.65 4.78 2.87-7.66 5.59 5.98 4.31-6.96 4.31 6.96 5.59-5.98 2.87 7.66 6.65-4.78 1.32 8.09 7.46-3.4-.29 8.19 7.98-1.88-1.88 7.98 8.19-.29-3.4 7.46 8.09 1.32-4.78 6.65 7.66 2.87z" fill-rule="evenodd" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/></svg>

static/tech/svelte-logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"><title>svelte-logo</title><path d="M94.1566,22.8189c-10.4-14.8851-30.94-19.2971-45.7914-9.8348L22.2825,29.6078A29.9234,29.9234,0,0,0,8.7639,49.6506a31.5136,31.5136,0,0,0,3.1076,20.2318A30.0061,30.0061,0,0,0,7.3953,81.0653a31.8886,31.8886,0,0,0,5.4473,24.1157c10.4022,14.8865,30.9423,19.2966,45.7914,9.8348L84.7167,98.3921A29.9177,29.9177,0,0,0,98.2353,78.3493,31.5263,31.5263,0,0,0,95.13,58.117a30,30,0,0,0,4.4743-11.1824,31.88,31.88,0,0,0-5.4473-24.1157" style="fill:#ff3e00"/><path d="M45.8171,106.5815A20.7182,20.7182,0,0,1,23.58,98.3389a19.1739,19.1739,0,0,1-3.2766-14.5025,18.1886,18.1886,0,0,1,.6233-2.4357l.4912-1.4978,1.3363.9815a33.6443,33.6443,0,0,0,10.203,5.0978l.9694.2941-.0893.9675a5.8474,5.8474,0,0,0,1.052,3.8781,6.2389,6.2389,0,0,0,6.6952,2.485,5.7449,5.7449,0,0,0,1.6021-.7041L69.27,76.281a5.4306,5.4306,0,0,0,2.4506-3.631,5.7948,5.7948,0,0,0-.9875-4.3712,6.2436,6.2436,0,0,0-6.6978-2.4864,5.7427,5.7427,0,0,0-1.6.7036l-9.9532,6.3449a19.0329,19.0329,0,0,1-5.2965,2.3259,20.7181,20.7181,0,0,1-22.2368-8.2427,19.1725,19.1725,0,0,1-3.2766-14.5024,17.9885,17.9885,0,0,1,8.13-12.0513L55.8833,23.7472a19.0038,19.0038,0,0,1,5.3-2.3287A20.7182,20.7182,0,0,1,83.42,29.6611a19.1739,19.1739,0,0,1,3.2766,14.5025,18.4,18.4,0,0,1-.6233,2.4357l-.4912,1.4978-1.3356-.98a33.6175,33.6175,0,0,0-10.2037-5.1l-.9694-.2942.0893-.9675a5.8588,5.8588,0,0,0-1.052-3.878,6.2389,6.2389,0,0,0-6.6952-2.485,5.7449,5.7449,0,0,0-1.6021.7041L37.73,51.719a5.4218,5.4218,0,0,0-2.4487,3.63,5.7862,5.7862,0,0,0,.9856,4.3717,6.2437,6.2437,0,0,0,6.6978,2.4864,5.7652,5.7652,0,0,0,1.602-.7041l9.9519-6.3425a18.978,18.978,0,0,1,5.2959-2.3278,20.7181,20.7181,0,0,1,22.2368,8.2427,19.1725,19.1725,0,0,1,3.2766,14.5024,17.9977,17.9977,0,0,1-8.13,12.0532L51.1167,104.2528a19.0038,19.0038,0,0,1-5.3,2.3287" style="fill:#fff"/></svg>

static/tech/ts-logo.svg

@@ -0,0 +1 @@
+<svg fill="none" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><rect fill="#3178c6" height="512" rx="50" width="512"/><rect fill="#3178c6" height="512" rx="50" width="512"/><path clip-rule="evenodd" d="m316.939 407.424v50.061c8.138 4.172 17.763 7.3 28.875 9.386s22.823 3.129 35.135 3.129c11.999 0 23.397-1.147 34.196-3.442 10.799-2.294 20.268-6.075 28.406-11.342 8.138-5.266 14.581-12.15 19.328-20.65s7.121-19.007 7.121-31.522c0-9.074-1.356-17.026-4.069-23.857s-6.625-12.906-11.738-18.225c-5.112-5.319-11.242-10.091-18.389-14.315s-15.207-8.213-24.18-11.967c-6.573-2.712-12.468-5.345-17.685-7.9-5.217-2.556-9.651-5.163-13.303-7.822-3.652-2.66-6.469-5.476-8.451-8.448-1.982-2.973-2.974-6.336-2.974-10.091 0-3.441.887-6.544 2.661-9.308s4.278-5.136 7.512-7.118c3.235-1.981 7.199-3.52 11.894-4.615 4.696-1.095 9.912-1.642 15.651-1.642 4.173 0 8.581.313 13.224.938 4.643.626 9.312 1.591 14.008 2.894 4.695 1.304 9.259 2.947 13.694 4.928 4.434 1.982 8.529 4.276 12.285 6.884v-46.776c-7.616-2.92-15.937-5.084-24.962-6.492s-19.381-2.112-31.066-2.112c-11.895 0-23.163 1.278-33.805 3.833s-20.006 6.544-28.093 11.967c-8.086 5.424-14.476 12.333-19.171 20.729-4.695 8.395-7.043 18.433-7.043 30.114 0 14.914 4.304 27.638 12.912 38.172 8.607 10.533 21.675 19.45 39.204 26.751 6.886 2.816 13.303 5.579 19.25 8.291s11.086 5.528 15.415 8.448c4.33 2.92 7.747 6.101 10.252 9.543 2.504 3.441 3.756 7.352 3.756 11.733 0 3.233-.783 6.231-2.348 8.995s-3.939 5.162-7.121 7.196-7.147 3.624-11.894 4.771c-4.748 1.148-10.303 1.721-16.668 1.721-10.851 0-21.597-1.903-32.24-5.71-10.642-3.806-20.502-9.516-29.579-17.13zm-84.159-123.342h64.22v-41.082h-179v41.082h63.906v182.918h50.874z" fill="#fff" fill-rule="evenodd"/></svg>

svelte.config.js

@@ -1,6 +1,6 @@
 import preprocess from "svelte-preprocess";
-import adapter from "@sveltejs/adapter-auto";
-import { vitePreprocess } from "@sveltejs/kit/vite";
+import adapter from '@sveltejs/adapter-node';
+import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {

tailwind.config.cjs

@@ -3,6 +3,16 @@ const config = {
 
   theme: {
     extend: {},
+    screens: {
+      'lg': {'min': '1024px'},
+      // => @media (max-width: 1023px) { ... }
+
+      'md': {'max': '1023px'},
+      // => @media (max-width: 767px) { ... }
+
+      'sm': {'max': '639px'},
+      // => @media (max-width: 639px) { ... }
+    }
   },
 
   plugins: [