initial commit

.eslintignore

@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

.eslintrc.cjs

@@ -0,0 +1,14 @@
+module.exports = {
+	root: true,
+	extends: ['eslint:recommended', 'plugin:svelte/recommended', 'prettier'],
+	parserOptions: {
+		sourceType: 'module',
+		ecmaVersion: 2020,
+		extraFileExtensions: ['.svelte']
+	},
+	env: {
+		browser: true,
+		es2017: true,
+		node: true
+	}
+};

.gitignore

@@ -0,0 +1,10 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

.npmrc

@@ -0,0 +1,2 @@
+engine-strict=true
+resolution-mode=highest

.prettierignore

@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

.prettierrc

@@ -0,0 +1,9 @@
+{
+	"useTabs": true,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"printWidth": 100,
+	"plugins": ["prettier-plugin-svelte"],
+	"pluginSearchDirs": ["."],
+	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
+}

.vscode/settings.json

@@ -0,0 +1,111 @@
+{
+	"prettier.documentSelectors": [
+		"**/*.svelte"
+	],
+	"tailwindCSS.classAttributes": [
+		"class",
+		"accent",
+		"active",
+		"aspectRatio",
+		"background",
+		"badge",
+		"bgBackdrop",
+		"bgDark",
+		"bgDrawer",
+		"bgLight",
+		"blur",
+		"border",
+		"button",
+		"buttonAction",
+		"buttonBack",
+		"buttonClasses",
+		"buttonComplete",
+		"buttonDismiss",
+		"buttonNeutral",
+		"buttonNext",
+		"buttonPositive",
+		"buttonTextCancel",
+		"buttonTextConfirm",
+		"buttonTextFirst",
+		"buttonTextLast",
+		"buttonTextNext",
+		"buttonTextPrevious",
+		"buttonTextSubmit",
+		"caretClosed",
+		"caretOpen",
+		"chips",
+		"color",
+		"controlSeparator",
+		"controlVariant",
+		"cursor",
+		"display",
+		"element",
+		"fill",
+		"fillDark",
+		"fillLight",
+		"flex",
+		"gap",
+		"gridColumns",
+		"height",
+		"hover",
+		"indent",
+		"justify",
+		"meter",
+		"padding",
+		"position",
+		"regionBackdrop",
+		"regionBody",
+		"regionCaption",
+		"regionCaret",
+		"regionCell",
+		"regionChildren",
+		"regionCone",
+		"regionContent",
+		"regionControl",
+		"regionDefault",
+		"regionDrawer",
+		"regionFoot",
+		"regionFootCell",
+		"regionFooter",
+		"regionHead",
+		"regionHeadCell",
+		"regionHeader",
+		"regionIcon",
+		"regionInterface",
+		"regionInterfaceText",
+		"regionLabel",
+		"regionLead",
+		"regionLegend",
+		"regionList",
+		"regionNavigation",
+		"regionPage",
+		"regionPanel",
+		"regionRowHeadline",
+		"regionRowMain",
+		"regionSummary",
+		"regionSymbol",
+		"regionTab",
+		"regionTrail",
+		"ring",
+		"rounded",
+		"select",
+		"shadow",
+		"slotDefault",
+		"slotFooter",
+		"slotHeader",
+		"slotLead",
+		"slotMessage",
+		"slotMeta",
+		"slotPageContent",
+		"slotPageFooter",
+		"slotPageHeader",
+		"slotSidebarLeft",
+		"slotSidebarRight",
+		"slotTrail",
+		"spacing",
+		"text",
+		"track",
+		"width",
+		"zIndex"
+	]
+}

README.md

@@ -0,0 +1,38 @@
+# create-svelte
+
+Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```bash
+# create a new project in the current directory
+npm create svelte@latest
+
+# create a new project in my-app
+npm create svelte@latest my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+To create a production version of your app:
+
+```bash
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.

jsconfig.json

@@ -0,0 +1,17 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true
+	}
+	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias and https://kit.svelte.dev/docs/configuration#files
+	//
+	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
+	// from the referenced tsconfig.json - TypeScript does not merge them in
+}

package.json

@@ -0,0 +1,36 @@
+{
+	"name": "feba.me",
+	"version": "0.0.1",
+	"private": true,
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",
+		"lint": "prettier --plugin-search-dir . --check . && eslint .",
+		"format": "prettier --plugin-search-dir . --write ."
+	},
+	"devDependencies": {
+		"@floating-ui/dom": "^1.5.1",
+		"@skeletonlabs/skeleton": "^1.12.0",
+		"@sveltejs/adapter-auto": "^2.0.0",
+		"@sveltejs/kit": "^1.5.0",
+		"autoprefixer": "^10.4.15",
+		"eslint": "^8.28.0",
+		"eslint-config-prettier": "^8.5.0",
+		"eslint-plugin-svelte": "^2.26.0",
+		"postcss": "^8.4.28",
+		"prettier": "^2.8.0",
+		"prettier-plugin-svelte": "^2.8.1",
+		"svelte": "^3.54.0",
+		"svelte-check": "^3.0.1",
+		"tailwindcss": "^3.3.3",
+		"typescript": "^5.0.0",
+		"vite": "^4.3.0"
+	},
+	"type": "module",
+	"dependencies": {
+		"@sveltejs/adapter-static": "^2.0.3"
+	}
+}

postcss.config.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+	plugins: {
+		tailwindcss: {},
+		autoprefixer: {},
+	},
+}

src/app.d.ts

@@ -0,0 +1,9 @@
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+// and what to do when importing types
+declare namespace App {
+	// interface Locals {}
+	// interface PageData {}
+	// interface Error {}
+	// interface Platform {}
+}

src/app.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en" class="dark">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.svg" />
+		<meta name="viewport" content="width=device-width" />
+		<link
+			rel="preload"
+			href="%sveltekit.assets%/fonts/BricolageGrotesque-Regular.woff2"
+			as="font"
+			type="font/woff2"
+			crossorigin
+		/>
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover" data-theme="skeleton">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>

src/app.postcss

@@ -0,0 +1,75 @@
+@font-face {
+	font-family: "Felix Neue";
+	src: url('/fonts/PPNeueMontreal-Book.otf');
+	font-weight: normal;
+	font-style: normal;
+}
+@font-face {
+	font-family: "Felix Neue";
+	src: url('/fonts/PPNeueMontreal-Italic.otf');
+	font-weight: normal;
+	font-style: italic;
+}
+/*
+@font-face {
+	font-family: "Felix Neue";
+	src: url('/fonts/PPNeueMontreal-Bold.otf');
+	font-weight: bold;
+	font-style: normal;
+}
+*/
+
+@font-face {
+	font-family: "Felix Mono";
+	src: url('/fonts/JetBrainsMono-ExtraLight.woff2');
+	font-weight: 100;
+	font-style: normal;
+}
+@font-face {
+	font-family: "Felix Mono";
+	src: url('/fonts/JetBrainsMono-Light.woff2');
+	font-weight: 200;
+	font-style: normal;
+}
+@font-face {
+	font-family: "Felix Mono";
+	src: url('/fonts/JetBrainsMono-Regular.woff2');
+	font-weight: normal;
+	font-style: normal;
+}
+@font-face {
+	font-family: "Felix Mono";
+	src: url('/fonts/JetBrainsMono-Bold.woff2');
+	font-weight: bold;
+	font-style: normal;
+}
+
+/*
+@font-face {
+	font-family: "Felix Grotesque";
+	src: url('/fonts/BricolageGrotesque-Regular.woff2');
+	font-weight: normal;
+	font-style: normal;
+}
+*/
+@font-face {
+	font-family: "Felix Grotesque";
+	src: url('/fonts/BricolageGrotesque-Bold.woff2');
+	font-weight: bold;
+	font-style: normal;
+}
+
+
+:root {
+	--gridsize: 8rem;
+	--primary: #00ff7f;
+	--black: #191510;
+    --theme-font-family-base: 'Felix Grotesque', sans-serif;
+    --theme-font-family-heading: 'Felix Grotesque', sans-serif;
+}
+
+html,
+body {
+	@apply h-full bg-surface-50 !important;
+	background-image: none !important;
+}

src/routes/+layout.js

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

src/routes/+layout.svelte

@@ -0,0 +1,10 @@
+<script>
+	// The ordering of these imports is critical to your app working properly
+	import '../theme.postcss';
+	// If you have source.organizeImports set to true in VSCode, then it will auto change this ordering
+	import '@skeletonlabs/skeleton/styles/skeleton.css';
+	// Most of your app wide CSS should be put in this file
+	import '../app.postcss';
+</script>
+
+<slot />

src/routes/portfolio/+page.svelte

@@ -0,0 +1,72 @@
+<svelte:head>
+    <title>Portfolio | Felix Baumgärtner | Designer & Developer</title> 
+</svelte:head>
+
+<div class="container max-w-screen-lg lg:min-h-full mx-auto flex justify-center items-center p-6 lg:p-0 lg:py-20">
+	<div class="grid grid-cols-12 w-full gap-6">
+		<a href="https://mue.incom.org/project/3782" target="_blank" class="col-span-12 lg:col-span-4 flex justify-center items-center" id="weather-wand">
+			<img src="/images/weather-wand-preview.jpg" alt="">
+			<p class="text-2xl sm:text-4xl">Weather Wand</p>
+		</a>
+		<a href="https://mue.incom.org/project/3610" target="_blank" class="col-span-12 lg:col-span-4 flex justify-center items-center" id="mockup-generator">
+			<img src="/images/mockup-generator-preview.jpg" alt="">
+			<p class="text-2xl sm:text-4xl">mockup-generator.com</p>
+		</a>
+		<a href="https://mue.incom.org/project/2355" target="_blank" class="col-span-12 lg:col-span-4 flex justify-center items-center" id="busplan-app-weiden">
+			<img src="/images/busplan-app-weiden-preview.jpg" alt="">
+			<p class="text-2xl sm:text-4xl">Busplan-App Weiden</p>
+		</a>
+
+		<a href="https://mue.incom.org/project/2327" target="_blank" class="col-span-12 lg:col-span-4 flex justify-center items-center" id="oepnv-daytimes">
+			<img src="/images/oepnv-daytimes-preview.jpg" alt="">
+			<p class="text-2xl sm:text-4xl">ÖPNV Time Analysis</p>
+		</a>
+		<a href="https://mue.incom.org/project/1954" target="_blank" class="col-span-12 lg:col-span-4 flex justify-center items-center" id="switch-comparator">
+			<img src="/images/switch-comparator-preview.jpg" alt="">
+			<p class="text-2xl sm:text-4xl">Switch Comparator</p>
+		</a>
+		<a href="https://mue.incom.org/project/2280" target="_blank" class="col-span-12 lg:col-span-4 flex justify-center items-center" id="custom-keyboard">
+			<img src="/images/custom-keyboard-preview.jpg" alt="">
+			<p class="text-2xl sm:text-4xl">Custom Keyboard</p>
+		</a>
+	</div>
+</div>
+<a href="/" class="fixed top-4 left-4 flex justify-center items-center p-2 rounded-lg text-tertiary-500 bg-primary-500">
+	<svg xmlns="http://www.w3.org/2000/svg" height="0.9rem" viewBox="0 0 448 512" class="mr-1"><!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M7.4 273.4C2.7 268.8 0 262.6 0 256s2.7-12.8 7.4-17.4l176-168c9.6-9.2 24.8-8.8 33.9 .8s8.8 24.8-.8 33.9L83.9 232 424 232c13.3 0 24 10.7 24 24s-10.7 24-24 24L83.9 280 216.6 406.6c9.6 9.2 9.9 24.3 .8 33.9s-24.3 9.9-33.9 .8l-176-168z"/></svg> Back
+</a>
+
+<style>
+	.grid {
+		grid-template-rows: auto;
+	}
+	@media (min-width: 1024px) { 
+		.grid {
+			grid-template-rows: 33rem 33rem;
+		}
+	 }
+
+	.grid > a {
+		@apply p-6 text-tertiary-500 rounded-lg transition-colors bg-primary-500;
+		position: relative;
+		overflow: hidden;
+	}
+	.grid > a:hover {
+		@apply bg-primary-300;
+	}
+
+	.grid > a > p {
+		z-index: 1;
+	}
+	.grid > a > img {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		z-index: 0;
+		object-fit: cover;
+		opacity: 0.2;
+	}
+	
+	a:hover {
+		@apply bg-primary-300;
+	}
+</style>

src/theme.postcss

@@ -0,0 +1,98 @@
+
+:root {
+	/* =~= Theme Properties =~= */
+	--theme-font-family-base: system-ui;
+	--theme-font-family-heading: system-ui;
+	--theme-font-color-base: var(--color-tertiary-500);
+	--theme-font-color-dark: 255 255 255;
+	--theme-rounded-base: 9999px;
+	--theme-rounded-container: 8px;
+	--theme-border-base: 1px;
+	/* =~= Theme On-X Colors =~= */
+	--on-primary: 0 0 0;
+	--on-secondary: 255 255 255;
+	--on-tertiary: 255 255 255;
+	--on-success: 0 0 0;
+	--on-warning: 0 0 0;
+	--on-error: 255 255 255;
+	--on-surface: 255 255 255;
+	/* =~= Theme Colors  =~= */
+	/* primary | #e1ff4d */
+	--color-primary-50: 251 255 228; /* ⬅ #fbffe4 */
+	--color-primary-100: 249 255 219; /* ⬅ #f9ffdb */
+	--color-primary-200: 248 255 211; /* ⬅ #f8ffd3 */
+	--color-primary-300: 243 255 184; /* ⬅ #f3ffb8 */
+	--color-primary-400: 234 255 130; /* ⬅ #eaff82 */
+	--color-primary-500: 225 255 77; /* ⬅ #e1ff4d */
+	--color-primary-600: 203 230 69; /* ⬅ #cbe645 */
+	--color-primary-700: 169 191 58; /* ⬅ #a9bf3a */
+	--color-primary-800: 135 153 46; /* ⬅ #87992e */
+	--color-primary-900: 110 125 38; /* ⬅ #6e7d26 */
+	/* secondary | #4F46E5 */
+	--color-secondary-50: 229 227 251; /* ⬅ #e5e3fb */
+	--color-secondary-100: 220 218 250; /* ⬅ #dcdafa */
+	--color-secondary-200: 211 209 249; /* ⬅ #d3d1f9 */
+	--color-secondary-300: 185 181 245; /* ⬅ #b9b5f5 */
+	--color-secondary-400: 132 126 237; /* ⬅ #847eed */
+	--color-secondary-500: 79 70 229; /* ⬅ #4F46E5 */
+	--color-secondary-600: 71 63 206; /* ⬅ #473fce */
+	--color-secondary-700: 59 53 172; /* ⬅ #3b35ac */
+	--color-secondary-800: 47 42 137; /* ⬅ #2f2a89 */
+	--color-secondary-900: 39 34 112; /* ⬅ #272270 */
+	/* tertiary | #191510 */
+	--color-tertiary-50: 221 220 219; /* ⬅ #dddcdb */
+	--color-tertiary-100: 209 208 207; /* ⬅ #d1d0cf */
+	--color-tertiary-200: 198 197 195; /* ⬅ #c6c5c3 */
+	--color-tertiary-300: 163 161 159; /* ⬅ #a3a19f */
+	--color-tertiary-400: 94 91 88; /* ⬅ #5e5b58 */
+	--color-tertiary-500: 25 21 16; /* ⬅ #191510 */
+	--color-tertiary-600: 23 19 14; /* ⬅ #17130e */
+	--color-tertiary-700: 19 16 12; /* ⬅ #13100c */
+	--color-tertiary-800: 15 13 10; /* ⬅ #0f0d0a */
+	--color-tertiary-900: 12 10 8; /* ⬅ #0c0a08 */
+	/* success | #84cc16 */
+	--color-success-50: 237 247 220; /* ⬅ #edf7dc */
+	--color-success-100: 230 245 208; /* ⬅ #e6f5d0 */
+	--color-success-200: 224 242 197; /* ⬅ #e0f2c5 */
+	--color-success-300: 206 235 162; /* ⬅ #ceeba2 */
+	--color-success-400: 169 219 92; /* ⬅ #a9db5c */
+	--color-success-500: 132 204 22; /* ⬅ #84cc16 */
+	--color-success-600: 119 184 20; /* ⬅ #77b814 */
+	--color-success-700: 99 153 17; /* ⬅ #639911 */
+	--color-success-800: 79 122 13; /* ⬅ #4f7a0d */
+	--color-success-900: 65 100 11; /* ⬅ #41640b */
+	/* warning | #EAB308 */
+	--color-warning-50: 252 244 218; /* ⬅ #fcf4da */
+	--color-warning-100: 251 240 206; /* ⬅ #fbf0ce */
+	--color-warning-200: 250 236 193; /* ⬅ #faecc1 */
+	--color-warning-300: 247 225 156; /* ⬅ #f7e19c */
+	--color-warning-400: 240 202 82; /* ⬅ #f0ca52 */
+	--color-warning-500: 234 179 8; /* ⬅ #EAB308 */
+	--color-warning-600: 211 161 7; /* ⬅ #d3a107 */
+	--color-warning-700: 176 134 6; /* ⬅ #b08606 */
+	--color-warning-800: 140 107 5; /* ⬅ #8c6b05 */
+	--color-warning-900: 115 88 4; /* ⬅ #735804 */
+	/* error | #D41976 */
+	--color-error-50: 249 221 234; /* ⬅ #f9ddea */
+	--color-error-100: 246 209 228; /* ⬅ #f6d1e4 */
+	--color-error-200: 244 198 221; /* ⬅ #f4c6dd */
+	--color-error-300: 238 163 200; /* ⬅ #eea3c8 */
+	--color-error-400: 225 94 159; /* ⬅ #e15e9f */
+	--color-error-500: 212 25 118; /* ⬅ #D41976 */
+	--color-error-600: 191 23 106; /* ⬅ #bf176a */
+	--color-error-700: 159 19 89; /* ⬅ #9f1359 */
+	--color-error-800: 127 15 71; /* ⬅ #7f0f47 */
+	--color-error-900: 104 12 58; /* ⬅ #680c3a */
+	/* surface | #495a8f */
+	--color-surface-50: 228 230 238; /* ⬅ #e4e6ee */
+	--color-surface-100: 219 222 233; /* ⬅ #dbdee9 */
+	--color-surface-200: 210 214 227; /* ⬅ #d2d6e3 */
+	--color-surface-300: 182 189 210; /* ⬅ #b6bdd2 */
+	--color-surface-400: 128 140 177; /* ⬅ #808cb1 */
+	--color-surface-500: 73 90 143; /* ⬅ #495a8f */
+	--color-surface-600: 66 81 129; /* ⬅ #425181 */
+	--color-surface-700: 55 68 107; /* ⬅ #37446b */
+	--color-surface-800: 44 54 86; /* ⬅ #2c3656 */
+	--color-surface-900: 36 44 70; /* ⬅ #242c46 */
+	
+}

static/favicon.svg

@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Gravit.io -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 512 512" width="512pt" height="512pt"><path d="M 50 0 L 460 0 C 487.596 0 510 22.404 510 50 L 510 462 C 510 489.596 487.596 512 460 512 L 50 512 C 22.404 512 0 489.596 0 462 L 0 50 C 0 22.404 22.404 0 50 0 Z" style="stroke:none;fill:#FFFF4D;stroke-miterlimit:10;"/><path d=" M 117.424 389.32 L 153.784 389.32 L 153.784 241.86 L 208.324 241.86 L 208.728 211.56 L 157.016 211.56 C 151.899 208.597 147.32 204.019 143.28 197.824 C 139.24 191.629 137.22 183.549 137.22 173.584 C 137.22 161.733 140.048 152.98 145.704 147.324 C 151.36 141.668 158.632 138.84 167.52 138.84 C 174.792 138.84 181.997 140.321 189.134 143.284 C 196.271 146.247 202.533 150.017 207.92 154.596 L 212.364 120.256 C 206.977 115.677 200.109 111.974 191.76 109.146 C 183.411 106.318 174.253 104.904 164.288 104.904 C 145.165 104.904 130.015 110.156 118.838 120.66 C 107.661 131.164 102.072 144.765 102.072 161.464 C 102.072 171.968 104.563 181.529 109.546 190.148 C 114.529 198.767 122.137 204.961 132.372 208.732 L 132.372 215.6 L 80.256 212.368 L 80.256 241.86 L 117.424 241.86 L 117.424 389.32 Z  M 358.612 394.572 C 376.657 394.572 391.942 389.859 404.466 380.432 C 416.99 371.005 426.551 358.077 433.15 341.648 C 439.749 325.219 443.048 306.5 443.048 285.492 C 443.048 263.945 439.681 244.89 432.948 228.326 C 426.215 211.762 416.519 198.834 403.86 189.542 C 391.201 180.25 376.119 175.604 358.612 175.604 C 344.337 175.604 332.419 178.701 322.858 184.896 C 313.297 191.091 305.688 199.171 300.032 209.136 C 294.376 219.101 290.067 229.74 287.104 241.052 L 279.832 241.052 C 281.987 229.74 283.805 217.957 285.286 205.702 C 286.767 193.447 287.508 182.203 287.508 171.968 L 287.508 106.52 L 250.34 106.52 L 250.34 286.3 L 250.34 389.32 L 283.468 389.32 L 281.448 332.76 L 287.912 332.76 C 292.221 350.267 299.965 364.945 311.142 376.796 C 322.319 388.647 338.143 394.572 358.612 394.572 Z  M 349.724 362.252 C 340.028 362.252 331.275 359.963 323.464 355.384 C 315.653 350.805 309.055 344.813 303.668 337.406 C 298.281 329.999 294.174 321.987 291.346 313.368 C 288.518 304.749 287.104 296.4 287.104 288.32 L 287.104 283.472 C 287.104 276.469 288.383 268.659 290.942 260.04 C 293.501 251.421 297.339 243.139 302.456 235.194 C 307.573 227.249 314.037 220.65 321.848 215.398 C 329.659 210.146 338.951 207.52 349.724 207.52 C 361.575 207.52 371.54 210.954 379.62 217.822 C 387.7 224.69 393.895 233.982 398.204 245.698 C 402.513 257.414 404.668 270.813 404.668 285.896 C 404.668 309.328 399.753 327.912 389.922 341.648 C 380.091 355.384 366.692 362.252 349.724 362.252 Z " fill="rgb(0,0,0)"/></svg>

static/notes.svg

@@ -0,0 +1 @@
+<svg id="_70_notes" data-name="#70_notes" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300" data-imageid="lunch-break-e" imageName="Notes" class="illustrations_image" style="width: 288px;"><path d="M47.3,49.69,38,140.84l73.91,4.1S133,88.28,133.52,62.28Z" fill="#33FF88" class="target-color"></path><path d="M111.9,144.94s-1.65-14-10.41-21.9c0,0,20.27-19,27.11-31.4C128.6,91.64,119.29,127.42,111.9,144.94Z" fill="#231f20"></path><rect x="85.76" y="49.67" width="11.91" height="18.74" fill="#fff"></rect><path d="M97.66,68.91H85.76a.5.5,0,0,1-.5-.5V49.67a.5.5,0,0,1,.5-.5h11.9a.5.5,0,0,1,.5.5V68.41A.5.5,0,0,1,97.66,68.91Zm-11.4-1h10.9V50.17H86.26Z" fill="#231f20"></path><path d="M277,168.15s-6.21,58.76-4.75,63.14,52.92,24.09,59.86,27.37,24.81,0,24.81,0l7.3-85Z" fill="#33FF88" class="target-color"></path><path d="M278,235.3s16,0,24.54-3.83c0,0,18.21,20.65,23.61,24.65C326.19,256.12,290.17,242.42,278,235.3Z" fill="#231f20"></path><rect x="312.82" y="158.2" width="13.98" height="21.77" transform="translate(30.18 -47.67) rotate(8.95)" fill="#231f20"></rect><polygon points="128.6 166.84 41.2 159.95 31.41 241.66 122.13 249.46 128.6 166.84" fill="#231f20"></polygon><path d="M106.94,159.09l-51.55-4.52s1.42,1.84.91,2.45-2.44.4-1.73,1.22a2.77,2.77,0,0,1,.71,3.26c-.61,1.63-.2,2.35.41,2.75s-2,1.94-1.27,2S107,170.37,107,170.37s-1.52-2.14-.91-2.65,3-.16,2.07-2-1.67-2.45-.65-3.21-1-2.19-.71-2.5A1.06,1.06,0,0,0,106.94,159.09Z" fill="#33FF88" class="target-color"></path><path d="M156.66,159.05l-6.19,88.1s8.18-1.25,15.34,1.08,8.87,3.92,13.1.92,5.77-4,11.05-1.05,18.62.58,25.17,1,5.87,5.06,11,5.29,14,1,14,1l6.33-90Zm7.1,11.16a2.52,2.52,0,1,1,2.69-2.33A2.52,2.52,0,0,1,163.76,170.21Zm12.34.87a2.52,2.52,0,1,1,2.68-2.33A2.52,2.52,0,0,1,176.1,171.08Zm12.33.87a2.52,2.52,0,1,1,2.69-2.34A2.52,2.52,0,0,1,188.43,172Zm12.34.87a2.52,2.52,0,1,1,2.69-2.34A2.52,2.52,0,0,1,200.77,172.82Zm12.34.86a2.52,2.52,0,1,1,2.69-2.33A2.5,2.5,0,0,1,213.11,173.68Zm12.34.87a2.52,2.52,0,1,1,2.69-2.33A2.53,2.53,0,0,1,225.45,174.55Zm12.34.87a2.52,2.52,0,1,1,2.68-2.34A2.52,2.52,0,0,1,237.79,175.42Z" fill="#33FF88" class="target-color"></path><path d="M181.06,175.29a3.41,3.41,0,0,1-3.31-2.62l-3.29-13.57a3.42,3.42,0,1,1,6.65-1.61l2.94,12.15a.5.5,0,0,1-.37.61.5.5,0,0,1-.6-.37l-2.94-12.15a2.42,2.42,0,0,0-4.71,1.14l3.29,13.57a2.43,2.43,0,0,0,2.92,1.78l1.54-.38a2.37,2.37,0,0,0,1.49-1.09,2.4,2.4,0,0,0,.29-1.83l-4.55-18.78a4,4,0,1,0-7.75,1.88l1.44,5.92a.51.51,0,0,1-.37.61.5.5,0,0,1-.6-.37l-1.44-5.93a5,5,0,0,1,.59-3.77,5,5,0,0,1,9.1,1.42l4.55,18.79a3.42,3.42,0,0,1-2.52,4.13l-1.53.37A3.83,3.83,0,0,1,181.06,175.29Z" fill="#231f20"></path><path d="M352.53,48.18l-81.48,4s2.28,66.05,9.58,88.68l87.95-4.75S355.45,84,352.53,48.18Z" fill="#231f20"></path><path d="M302,67.11h-1.58A3.42,3.42,0,0,1,297,63.69v-14a3.42,3.42,0,0,1,6.84,0v12.5a.5.5,0,0,1-.5.5.5.5,0,0,1-.5-.5V49.73a2.42,2.42,0,1,0-4.84,0v14a2.42,2.42,0,0,0,2.42,2.42H302a2.42,2.42,0,0,0,2.42-2.42V44.37a4,4,0,1,0-8,0v6.09a.5.5,0,0,1-.5.5.5.5,0,0,1-.5-.5V44.37a5,5,0,1,1,10,0V63.69A3.42,3.42,0,0,1,302,67.11Z" fill="#33FF88" class="target-color"></path><path d="M153.45,49.69v89.94h89.94V49.69Z" fill="#fff"></path><path d="M243.39,140.13H153.45a.51.51,0,0,1-.5-.5V49.69a.5.5,0,0,1,.5-.5h89.94a.5.5,0,0,1,.5.5v89.94A.5.5,0,0,1,243.39,140.13Zm-89.44-1h88.94V50.19H154Z" fill="#231f20"></path><path d="M166.45,135.73a.5.5,0,0,1-.5-.5V52.84a.5.5,0,0,1,1,0v82.39A.5.5,0,0,1,166.45,135.73Z" fill="#d1d3d4"></path><path d="M238,64.93H159a.5.5,0,0,1-.5-.5.5.5,0,0,1,.5-.5h79a.5.5,0,0,1,.5.5A.5.5,0,0,1,238,64.93Z" fill="#d1d3d4"></path><path d="M238,80.25H159a.5.5,0,0,1-.5-.5.5.5,0,0,1,.5-.5h79a.5.5,0,0,1,.5.5A.5.5,0,0,1,238,80.25Z" fill="#d1d3d4"></path><path d="M238,95.58H159a.5.5,0,0,1-.5-.5.5.5,0,0,1,.5-.5h79a.5.5,0,0,1,.5.5A.5.5,0,0,1,238,95.58Z" fill="#d1d3d4"></path><path d="M238,110.91H159a.5.5,0,0,1,0-1h79a.5.5,0,0,1,0,1Z" fill="#d1d3d4"></path><path d="M238,126.24H159a.5.5,0,0,1,0-1h79a.5.5,0,0,1,0,1Z" fill="#d1d3d4"></path><path d="M198.57,57a5.82,5.82,0,0,0,.6-.61c1-1.16,4.7-7,4.7-7l-1.45-.62s-3.64,5.56-4.3,6.58a4.12,4.12,0,0,0-.43.93Z" fill="#231f20"></path><circle cx="203.55" cy="48.73" r="4.11" fill="#fff"></circle><path d="M203.55,53.34a4.61,4.61,0,1,1,4.6-4.61A4.61,4.61,0,0,1,203.55,53.34Zm0-8.22a3.61,3.61,0,1,0,3.6,3.61A3.61,3.61,0,0,0,203.55,45.12Z" fill="#231f20"></path><circle cx="204.83" cy="46.42" r="3.47" fill="#fff"></circle><path d="M204.83,50.39a4,4,0,1,1,4-4A4,4,0,0,1,204.83,50.39Zm0-6.94a3,3,0,1,0,3,3A3,3,0,0,0,204.83,43.45Z" fill="#231f20"></path></svg>

svelte.config.js

@@ -0,0 +1,16 @@
+import adapter from '@sveltejs/adapter-static';
+import { vitePreprocess } from '@sveltejs/kit/vite';
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
+	// for more information about preprocessors
+	preprocess: vitePreprocess(),
+	
+	kit: {
+		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
+		// If your environment is not supported or you settled on a specific environment, switch out the adapter.
+		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
+		adapter: adapter()
+	}
+};
+export default config;

tailwind.config.cjs

@@ -0,0 +1,12 @@
+import { join } from 'path'
+import skeleton from '@skeletonlabs/skeleton/tailwind/skeleton.cjs'
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+	darkMode: 'class',
+	content: ['./src/**/*.{html,js,svelte,ts}', join(require.resolve('@skeletonlabs/skeleton'), '../**/*.{html,js,svelte,ts}')],
+	theme: {
+		extend: {},
+	},
+	plugins: [...skeleton()],
+}

vite.config.js

@@ -0,0 +1,6 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+	plugins: [sveltekit()]
+});