initial commit

2023-08-04 18:37:22 +02:00 · 2023-08-04 18:37:22 +02:00 · aedc1f0c3c
commit aedc1f0c3c
40 changed files with 5234 additions and 0 deletions
--- a/.eslintignore
+++ b/.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
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@ -0,0 +1,30 @@
+module.exports = {
+	root: true,
+	extends: [
+		'eslint:recommended',
+		'plugin:@typescript-eslint/recommended',
+		'plugin:svelte/recommended',
+		'prettier'
+	],
+	parser: '@typescript-eslint/parser',
+	plugins: ['@typescript-eslint'],
+	parserOptions: {
+		sourceType: 'module',
+		ecmaVersion: 2020,
+		extraFileExtensions: ['.svelte']
+	},
+	env: {
+		browser: true,
+		es2017: true,
+		node: true
+	},
+	overrides: [
+		{
+			files: ['*.svelte'],
+			parser: 'svelte-eslint-parser',
+			parserOptions: {
+				parser: '@typescript-eslint/parser'
+			}
+		}
+	]
+};
--- a/.gitignore
+++ b/.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-*
--- a/.npmrc
+++ b/.npmrc
@ -0,0 +1,2 @@
+engine-strict=true
+resolution-mode=highest
--- a/.prettierignore
+++ b/.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
--- a/.prettierrc
+++ b/.prettierrc
@ -0,0 +1,9 @@
+{
+	"useTabs": true,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"printWidth": 100,
+	"plugins": ["prettier-plugin-svelte"],
+	"pluginSearchDirs": ["."],
+	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
+}
--- a/README.md
+++ b/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.
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,38 @@
+{
+	"name": "floter-design-svelte-3",
+	"version": "0.0.1",
+	"private": true,
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "prettier --plugin-search-dir . --check . && eslint .",
+		"format": "prettier --plugin-search-dir . --write ."
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-auto": "^2.0.0",
+		"@sveltejs/kit": "^1.20.4",
+		"@typescript-eslint/eslint-plugin": "^5.45.0",
+		"@typescript-eslint/parser": "^5.45.0",
+		"eslint": "^8.28.0",
+		"eslint-config-prettier": "^8.5.0",
+		"eslint-plugin-svelte": "^2.30.0",
+		"prettier": "^2.8.0",
+		"prettier-plugin-svelte": "^2.10.1",
+		"svelte": "^4.0.5",
+		"svelte-check": "^3.4.3",
+		"tslib": "^2.4.1",
+		"typescript": "^5.0.0",
+		"vite": "^4.4.2"
+	},
+	"type": "module",
+	"dependencies": {
+		"gsap": "npm:@gsap/shockingly@^3.12.2",
+		"mdsvex": "^0.11.0",
+		"perlin-noise-2d": "^1.0.0",
+		"pixi-filters": "^5.2.1",
+		"pixi.js": "^7.2.4"
+	}
+}
--- a/src/app.d.ts
+++ b/src/app.d.ts
@ -0,0 +1,12 @@
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface Platform {}
+	}
+}
+
+export {};
--- a/src/app.html
+++ b/src/app.html
@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+    <link rel="stylesheet" href="https://use.typekit.net/ltu2cxf.css">
+		<meta name="viewport" content="width=device-width" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>
--- a/src/bg.svg
+++ b/src/bg.svg
@ -0,0 +1,118 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 27.5.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 1366 768" style="enable-background:new 0 0 1366 768;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;stroke:#000000;stroke-miterlimit:10;}
+</style>
+<g>
+	<path class="st0" d="M-129.8-37.1c0,0,48.3-107.4,220.3-114.1c172-6.7,393.3,153.3,570.7,108s632.7-294.7,745.3-164"/>
+	<path class="st0" d="M-129.8-28c0,0,48.7-105.5,220.7-112.1c172-6.7,392.9,150.1,570.3,104.8s630.6-290,745.1-161.1"/>
+	<path class="st0" d="M-129.8-18.9c0,0,49.1-103.5,221.1-110.2c172-6.7,392.6,146.9,569.9,101.5s628.6-285.3,744.9-158.3"/>
+	<path class="st0" d="M-129.8-9.7c0,0,49.5-101.6,221.5-108.3c172-6.7,392.2,143.6,569.5,98.3s626.5-280.6,744.7-155.4"/>
+	<path class="st0" d="M-129.8-0.6c0,0,49.9-99.6,221.9-106.3S483.8,33.5,661.2-11.9s624.5-275.9,744.6-152.6"/>
+	<path class="st0" d="M-129.8,8.5c0,0,50.2-97.7,222.2-104.4S483.8,41.3,661.2-4s622.4-271.2,744.4-149.7"/>
+	<path class="st0" d="M-129.8,17.6c0,0,50.6-95.7,222.6-102.4c172-6.7,391,133.9,568.3,88.6s620.4-266.5,744.2-146.9"/>
+	<path class="st0" d="M-129.8,26.7c0,0,51-93.8,223-100.5c172-6.7,390.6,130.7,567.9,85.4s618.3-261.8,744-144"/>
+	<path class="st0" d="M-129.8,35.8c0,0,51.4-91.9,223.4-98.5c172-6.7,390.2,127.5,567.6,82.1s616.3-257.1,743.8-141.1"/>
+	<path class="st0" d="M-129.8,45c0,0,51.8-89.9,223.8-96.6S483.8,72.6,661.2,27.3s614.2-252.4,743.6-138.3"/>
+	<path class="st0" d="M-129.8,54.1c0,0,52.2-88,224.2-94.6s389.5,121,566.8,75.7s612.2-247.8,743.4-135.4"/>
+	<path class="st0" d="M-129.8,63.2c0,0,52.6-86,224.6-92.7S483.8,88.3,661.2,43s610.1-243.1,743.2-132.6"/>
+	<path class="st0" d="M-129.8,72.3c0,0,53-84.1,225-90.7s388.7,114.5,566,69.2s608.1-238.4,743-129.7"/>
+	<path class="st0" d="M-129.8,81.4c0,0,53.4-82.1,225.4-88.8s388.3,111.3,565.6,66S1267.2-175,1404-68.2"/>
+	<path class="st0" d="M-129.8,90.5c0,0,53.7-80.2,225.7-86.8s387.9,108.1,565.2,62.7s604-229,742.6-124"/>
+	<path class="st0" d="M-129.8,99.7c0,0,54.1-78.2,226.1-84.9s387.5,104.8,564.8,59.5s602-224.3,742.4-121.1"/>
+	<path class="st0" d="M-129.8,108.8c0,0,54.5-76.3,226.5-82.9s387.1,101.6,564.5,56.3s599.9-219.6,742.2-118.3"/>
+	<path class="st0" d="M-129.8,117.9c0,0,54.9-74.3,226.9-81S483.8,135.3,661.2,90S1259-125,1403.2-25.4"/>
+	<path class="st0" d="M-129.8,127c0,0,55.3-72.4,227.3-79s386.3,95.2,563.7,49.8S1257-112.4,1403-14.8"/>
+	<path class="st0" d="M-129.8,136.1c0,0,55.7-70.4,227.7-77.1s386,91.9,563.3,46.6S1254.9-99.9,1402.8-4.1"/>
+	<path class="st0" d="M-129.8,145.3c0,0,56.1-68.5,228.1-75.2c172-6.7,385.6,88.7,562.9,43.4S1252.9-87.4,1402.6,6.6"/>
+	<path class="st0" d="M-129.8,154.4c0,0,56.5-66.5,228.5-73.2c172-6.7,385.2,85.5,562.5,40.1s589.7-196.1,741.2-104"/>
+	<path class="st0" d="M-129.8,163.5c0,0,56.9-64.6,228.9-71.3s384.8,82.2,562.1,36.9s587.6-191.5,741-101.1"/>
+	<path class="st0" d="M-129.8,172.6c0,0,57.2-62.6,229.2-69.3c172-6.7,384.4,79,561.7,33.7S1246.7-49.8,1402,38.7"/>
+	<path class="st0" d="M-129.8,181.7c0,0,57.6-60.7,229.6-67.4c172-6.7,384,75.8,561.3,30.4s583.5-182.1,740.7-95.4"/>
+	<path class="st0" d="M-129.8,190.8c0,0,58-58.8,230-65.4c172-6.7,383.6,72.5,561,27.2s581.5-177.4,740.5-92.5"/>
+	<path class="st0" d="M-129.8,200c0,0,58.4-56.8,230.4-63.5c172-6.7,383.2,69.3,560.6,24s579.4-172.7,740.3-89.7"/>
+	<path class="st0" d="M-129.8,209.1c0,0,58.8-54.9,230.8-61.5c172-6.7,382.8,66.1,560.2,20.7s577.4-168,740.1-86.8"/>
+	<path class="st0" d="M-129.8,218.2c0,0,59.2-52.9,231.2-59.6c172-6.7,382.5,62.8,559.8,17.5s575.3-163.3,739.9-84"/>
+	<path class="st0" d="M-129.8,227.3c0,0,59.6-51,231.6-57.6c172-6.7,382.1,59.6,559.4,14.3s573.3-158.6,739.7-81.1"/>
+	<path class="st0" d="M-129.8,236.4c0,0,60-49,232-55.7s381.7,56.4,559,11s571.2-153.9,739.5-78.3"/>
+	<path class="st0" d="M-129.8,245.5c0,0,60.3-47.1,232.3-53.7s381.3,53.1,558.6,7.8s569.2-149.2,739.3-75.4"/>
+	<path class="st0" d="M-129.8,254.7c0,0,60.7-45.1,232.7-51.8s380.9,49.9,558.2,4.6s567.1-144.5,739.1-72.5"/>
+	<path class="st0" d="M-129.8,263.8c0,0,61.1-43.2,233.1-49.8c172-6.7,380.5,46.7,557.9,1.3s565.1-139.9,738.9-69.7"/>
+	<path class="st0" d="M-129.8,272.9c0,0,61.5-41.2,233.5-47.9c172-6.7,380.1,43.4,557.5-1.9s563-135.2,738.7-66.8"/>
+	<path class="st0" d="M-129.8,282c0,0,61.9-39.3,233.9-45.9c172-6.7,379.7,40.2,557.1-5.1s561-130.5,738.5-64"/>
+	<path class="st0" d="M-129.8,291.1c0,0,62.3-37.3,234.3-44c172-6.7,379.4,37,556.7-8.4s559-125.8,738.3-61.1"/>
+	<path class="st0" d="M-129.8,300.3c0,0,62.7-35.4,234.7-42.1c172-6.7,379,33.7,556.3-11.6s556.9-121.1,738.1-58.2"/>
+	<path class="st0" d="M-129.8,309.4c0,0,63.1-33.4,235.1-40.1s378.6,30.5,555.9-14.8S1216,138,1399.1,199.1"/>
+	<path class="st0" d="M-129.8,318.5c0,0,63.5-31.5,235.5-38.2s378.2,27.3,555.5-18.1s552.8-111.7,737.7-52.5"/>
+	<path class="st0" d="M-129.8,327.6c0,0,63.8-29.5,235.8-36.2s377.8,24,555.1-21.3s550.8-107,737.5-49.7"/>
+	<path class="st0" d="M-129.8,336.7c0,0,64.2-27.6,236.2-34.3s377.4,20.8,554.7-24.5s548.7-102.3,737.3-46.8"/>
+	<path class="st0" d="M-129.8,345.8c0,0,64.6-25.7,236.6-32.3s377,17.6,554.4-27.8s546.7-97.6,737.1-44"/>
+	<path class="st0" d="M-129.8,355c0,0,65-23.7,237-30.4c172-6.7,376.6,14.3,554-31s544.6-92.9,736.9-41.1"/>
+	<path class="st0" d="M-129.8,364.1c0,0,65.4-21.8,237.4-28.4c172-6.7,376.2,11.1,553.6-34.2s542.6-88.2,736.8-38.2"/>
+	<path class="st0" d="M-129.8,373.2c0,0,65.8-19.8,237.8-26.5c172-6.7,375.9,7.9,553.2-37.5s540.5-83.6,736.6-35.4"/>
+	<path class="st0" d="M-129.8,382.3c0,0,66.2-17.9,238.2-24.5c172-6.7,375.5,4.6,552.8-40.7s538.5-78.9,736.4-32.5"/>
+	<path class="st0" d="M-129.8,391.4c0,0,66.6-15.9,238.6-22.6c172-6.7,375.1,1.4,552.4-43.9s536.4-74.2,736.2-29.7"/>
+	<path class="st0" d="M-129.8,400.5c0,0,66.9-14,238.9-20.6c172-6.7,374.7-1.8,552-47.1s534.4-69.5,736-26.8"/>
+	<path class="st0" d="M-129.8,409.7c0,0,67.3-12,239.3-18.7c172-6.7,374.3-5,551.6-50.4s532.3-64.8,735.8-23.9"/>
+	<path class="st0" d="M-129.8,418.8c0,0,67.7-10.1,239.7-16.7c172-6.7,373.9-8.3,551.3-53.6s530.3-60.1,735.6-21.1"/>
+	<path class="st0" d="M-129.8,427.9c0,0,68.1-8.1,240.1-14.8c172-6.7,373.5-11.5,550.9-56.8s528.2-55.4,735.4-18.2"/>
+	<path class="st0" d="M-129.8,437c0,0,68.5-6.2,240.5-12.8c172-6.7,373.1-14.7,550.5-60.1s526.2-50.7,735.2-15.4"/>
+	<path class="st0" d="M-129.8,446.1c0,0,68.9-4.2,240.9-10.9c172-6.7,372.8-18,550.1-63.3s524.1-46,735-12.5"/>
+	<path class="st0" d="M-129.8,455.3c0,0,69.3-2.3,241.3-9s372.4-21.2,549.7-66.5s522.1-41.3,734.8-9.7"/>
+	<path class="st0" d="M-129.8,464.4c0,0,69.7-0.3,241.7-7s372-24.4,549.3-69.8s520-36.6,734.6-6.8"/>
+	<path class="st0" d="M-129.8,473.5c0,0,70.1,1.6,242.1-5.1s371.6-27.7,548.9-73s518-32,734.4-3.9"/>
+	<path class="st0" d="M-129.8,482.6c0,0,70.4,3.6,242.4-3.1s371.2-30.9,548.5-76.2s515.9-27.3,734.2-1.1"/>
+	<path class="st0" d="M-129.8,491.7c0,0,70.8,5.5,242.8-1.2s370.8-34.1,548.1-79.5s513.9-22.6,734,1.8"/>
+	<path class="st0" d="M-129.8,500.8c0,0,71.2,7.4,243.2,0.8s370.4-37.4,547.8-82.7S1173,401,1395,423.6"/>
+	<path class="st0" d="M-129.8,510c0,0,71.6,9.4,243.6,2.7c172-6.7,370-40.6,547.4-85.9s509.8-13.2,733.6,7.5"/>
+	<path class="st0" d="M-129.8,519.1c0,0,72,11.3,244,4.7c172-6.7,369.6-43.8,547-89.2s507.8-8.5,733.4,10.4"/>
+	<path class="st0" d="M-129.8,528.2c0,0,72.4,13.3,244.4,6.6s369.3-47.1,546.6-92.4s505.7-3.8,733.2,13.2"/>
+	<path class="st0" d="M-129.8,537.3c0,0,72.8,15.2,244.8,8.6c172-6.7,368.9-50.3,546.2-95.6s503.7,0.9,733.1,16.1"/>
+	<path class="st0" d="M-129.8,546.4c0,0,73.2,17.2,245.2,10.5c172-6.7,368.5-53.5,545.8-98.9s501.6,5.6,732.9,18.9"/>
+	<path class="st0" d="M-129.8,555.5c0,0,73.5,19.1,245.5,12.5c172-6.7,368.1-56.8,545.4-102.1s499.6,10.3,732.7,21.8"/>
+	<path class="st0" d="M-129.8,564.7c0,0,73.9,21.1,245.9,14.4c172-6.7,367.7-60,545-105.3s497.5,15,732.5,24.6"/>
+	<path class="st0" d="M-129.8,573.8c0,0,74.3,23,246.3,16.4c172-6.7,367.3-63.2,544.7-108.6s495.5,19.7,732.3,27.5"/>
+	<path class="st0" d="M-129.8,582.9c0,0,74.7,25,246.7,18.3c172-6.7,366.9-66.5,544.3-111.8s493.4,24.3,732.1,30.4"/>
+	<path class="st0" d="M-129.8,592c0,0,75.1,26.9,247.1,20.3s366.5-69.7,543.9-115s491.4,29,731.9,33.2"/>
+	<path class="st0" d="M-129.8,601.1c0,0,75.5,28.9,247.5,22.2c172-6.7,366.2-72.9,543.5-118.3s489.3,33.7,731.7,36.1"/>
+	<path class="st0" d="M-129.8,610.2c0,0,75.9,30.8,247.9,24.1s365.8-76.2,543.1-121.5s487.3,38.4,731.5,38.9"/>
+	<path class="st0" d="M-129.8,619.4c0,0,76.3,32.8,248.3,26.1c172-6.7,365.4-79.4,542.7-124.7s485.2,43.1,731.3,41.8"/>
+	<path class="st0" d="M-129.8,628.5c0,0,76.7,34.7,248.7,28s365-82.6,542.3-128c177.3-45.3,483.2,47.8,731.1,44.7"/>
+	<path class="st0" d="M-129.8,637.6c0,0,77,36.7,249,30c172-6.7,364.6-85.9,541.9-131.2c177.3-45.3,481.1,52.5,730.9,47.5"/>
+	<path class="st0" d="M-129.8,646.7c0,0,77.4,38.6,249.4,31.9s364.2-89.1,541.5-134.4c177.3-45.3,479.1,57.2,730.7,50.4"/>
+	<path class="st0" d="M-129.8,655.8c0,0,77.8,40.5,249.8,33.9c172-6.7,363.8-92.3,541.2-137.7c177.3-45.3,477,61.9,730.5,53.2"/>
+	<path class="st0" d="M-129.8,665c0,0,78.2,42.5,250.2,35.8s363.4-95.6,540.8-140.9c177.3-45.3,475,66.6,730.3,56.1"/>
+	<path class="st0" d="M-129.8,674.1c0,0,78.6,44.4,250.6,37.8c172-6.7,363-98.8,540.4-144.1c177.3-45.3,472.9,71.3,730.1,58.9"/>
+	<path class="st0" d="M-129.8,683.2c0,0,79,46.4,251,39.7s362.7-102,540-147.3c177.3-45.3,470.9,75.9,729.9,61.8"/>
+	<path class="st0" d="M-129.8,692.3c0,0,79.4,48.3,251.4,41.7c172-6.7,362.3-105.2,539.6-150.6c177.3-45.3,468.9,80.6,729.7,64.7"/>
+	<path class="st0" d="M-129.8,701.4c0,0,79.8,50.3,251.8,43.6c172-6.7,361.9-108.5,539.2-153.8c177.3-45.3,466.8,85.3,729.5,67.5"/>
+	<path class="st0" d="M-129.8,710.5c0,0,80.1,52.2,252.1,45.6c172-6.7,361.5-111.7,538.8-157c177.3-45.3,464.8,90,729.3,70.4"/>
+	<path class="st0" d="M-129.8,719.7c0,0,80.5,54.2,252.5,47.5c172-6.7,361.1-114.9,538.4-160.3c177.3-45.3,462.7,94.7,729.2,73.2"/>
+	<path class="st0" d="M-129.8,728.8c0,0,80.9,56.1,252.9,49.5c172-6.7,360.7-118.2,538-163.5c177.3-45.3,460.7,99.4,729,76.1"/>
+	<path class="st0" d="M-129.8,737.9c0,0,81.3,58.1,253.3,51.4c172-6.7,360.3-121.4,537.7-166.7c177.3-45.3,458.6,104.1,728.8,79"/>
+	<path class="st0" d="M-129.8,747c0,0,81.7,60,253.7,53.3s359.9-124.6,537.3-170c177.3-45.3,456.6,108.8,728.6,81.8"/>
+	<path class="st0" d="M-129.8,756.1c0,0,82.1,62,254.1,55.3c172-6.7,359.6-127.9,536.9-173.2c177.3-45.3,454.5,113.5,728.4,84.7"/>
+	<path class="st0" d="M-129.8,765.2c0,0,82.5,63.9,254.5,57.2s359.2-131.1,536.5-176.4c177.3-45.3,452.5,118.2,728.2,87.5"/>
+	<path class="st0" d="M-129.8,774.4c0,0,82.9,65.9,254.9,59.2c172-6.7,358.8-134.3,536.1-179.7c177.3-45.3,450.4,122.9,728,90.4"/>
+	<path class="st0" d="M-129.8,783.5c0,0,83.3,67.8,255.3,61.1S483.8,707,661.2,661.7S1109.5,789.3,1389,755"/>
+	<path class="st0" d="M-129.8,792.6c0,0,83.6,69.8,255.6,63.1c172-6.7,358-140.8,535.3-186.1s446.3,132.2,727.6,96.1"/>
+	<path class="st0" d="M-129.8,801.7c0,0,84,71.7,256,65s357.6-144,534.9-189.4s444.3,136.9,727.4,99"/>
+	<path class="st0" d="M-129.8,810.8c0,0,84.4,73.6,256.4,67c172-6.7,357.2-147.3,534.6-192.6s442.2,141.6,727.2,101.8"/>
+	<path class="st0" d="M-129.8,820c0,0,84.8,75.6,256.8,68.9S483.8,738.4,661.2,693s440.2,146.3,727,104.7"/>
+	<path class="st0" d="M-129.8,829.1c0,0,85.2,77.5,257.2,70.9c172-6.7,356.4-153.7,533.8-199.1s438.1,151,726.8,107.5"/>
+	<path class="st0" d="M-129.8,838.2c0,0,85.6,79.5,257.6,72.8s356.1-157,533.4-202.3s436.1,155.7,726.6,110.4"/>
+	<path class="st0" d="M-129.8,847.3c0,0,86,81.4,258,74.8c172-6.7,355.7-160.2,533-205.5s434,160.4,726.4,113.3"/>
+	<path class="st0" d="M-129.8,856.4c0,0,86.4,83.4,258.4,76.7c172-6.7,355.3-163.4,532.6-208.8s432,165.1,726.2,116.1"/>
+	<path class="st0" d="M-129.8,865.5c0,0,86.8,85.3,258.8,78.7c172-6.7,354.9-166.7,532.2-212s429.9,169.8,726,119"/>
+	<path class="st0" d="M-129.8,874.7c0,0,87.1,87.3,259.1,80.6c172-6.7,354.5-169.9,531.8-215.2s427.9,174.5,725.8,121.8"/>
+	<path class="st0" d="M-129.8,883.8c0,0,87.5,89.2,259.5,82.6c172-6.7,354.1-173.1,531.4-218.5S1087,927,1386.8,872.6"/>
+	<path class="st0" d="M-129.8,892.9c0,0,87.9,91.2,259.9,84.5c172-6.7,353.7-176.4,531.1-221.7s423.8,183.8,725.4,127.5"/>
+	<path class="st0" d="M-129.8,902c0,0,88.3,93.1,260.3,86.4s353.3-179.6,530.7-224.9s421.8,188.5,725.3,130.4"/>
+	<path class="st0" d="M-129.8,911.1c0,0,88.7,95.1,260.7,88.4c172-6.7,353-182.8,530.3-228.2c177.3-45.3,419.7,193.2,725.1,133.3"/>
+	<path class="st0" d="M-129.8,920.2c0,0,89.1,97,261.1,90.3s352.6-186.1,529.9-231.4c177.3-45.3,417.7,197.9,724.9,136.1"/>
+	<path class="st0" d="M-129.8,929.4c0,0,89.5,99,261.5,92.3c172-6.7,352.2-189.3,529.5-234.6c177.3-45.3,415.6,202.6,724.7,139"/>
+	<path class="st0" d="M-129.8,938.5c0,0,89.9,100.9,261.9,94.2s351.8-192.5,529.1-237.9c177.3-45.3,413.6,207.3,724.5,141.8"/>
+</g>
+</svg>
--- a/src/lib/components/HomeCanvas.svelte
+++ b/src/lib/components/HomeCanvas.svelte
@ -0,0 +1,142 @@
+<script lang="ts">
+import * as PIXI from 'pixi.js';
+import { BulgePinchFilter } from 'pixi-filters';
+import gsap from 'gsap';
+import ScrollTrigger from 'gsap/dist/ScrollTrigger';
+import SplitText from 'gsap/dist/SplitText';
+import { PixiPlugin } from "gsap/dist/PixiPlugin";
+import { onMount, onDestroy } from 'svelte';
+import { browser } from '$app/environment';
+import createCanvasText from '$lib/utils/creareCanvasText';
+import { tick } from 'svelte';
+
+export let textsToCanvas: NodeListOf<Element>;
+let app: PIXI.Application;
+
+onMount(()=>{
+  
+  gsap.registerPlugin(PixiPlugin, ScrollTrigger, SplitText);
+  
+  if (document.querySelector('.homeCanvas')) {
+    app = new PIXI.Application({
+      resizeTo: window,
+      antialias: true,
+      autoDensity: true, 
+      resolution: 2,
+      backgroundAlpha: 0,
+      view: document.querySelector('.homeCanvas') as HTMLCanvasElement,
+    });
+  } 
+  else {
+    app = new PIXI.Application({
+      resizeTo: window,
+      antialias: true,
+      autoDensity: true, 
+      resolution: 2,
+      backgroundAlpha: 0,
+    });
+    let canvaselem = document.body.appendChild(app.view as HTMLCanvasElement);
+    canvaselem.classList.add('homeCanvas');
+  }
+  //for debugging but Typescript has an issue with this:
+  // globalThis.__PIXI_APP__ = app as any;
+  
+  PixiPlugin.registerPIXI(PIXI);
+  
+  function xFrac(x: number){
+    return window.innerWidth * x;
+  }
+  function yFrac(y: number){
+    return window.innerHeight * y;
+  }
+
+  let group = new PIXI.Container();
+  group.pivot.set(window.innerWidth / 2, window.innerHeight / 2);
+  group.x = window.innerWidth / 2;
+  group.y = window.innerHeight / 2;
+  app.stage.addChild(group);
+  
+  let recty = new PIXI.Graphics();
+  recty.beginFill('rgb(0, 0, 0)');
+  recty.drawRect(0, 0, xFrac(1), yFrac(1));
+  recty.endFill();
+  recty.alpha = 0;
+  recty.pivot.set(xFrac(.5), yFrac(.5));
+  recty.x = xFrac(0.5);
+  recty.y = yFrac(0.5);
+  group.addChild(recty);
+  
+  let center = [0.5, 0.5];
+  let bulgefilter = new BulgePinchFilter();
+  bulgefilter.radius = xFrac(0.45);
+  bulgefilter.strength = 0.5;
+  bulgefilter.center = center;
+  bulgefilter.resolution = 2;
+  app.stage.filters = [bulgefilter];
+
+  
+  
+  /*----------------------------------
+  * Convert text to canvas using 
+  * createCanvasText function
+  ----------------------------------*/    
+  let canvasTexts: Array<PIXI.Text> = [];
+  let elems: Array<HTMLElement> = [];
+  
+  async function convertText(){
+    await tick();
+    textsToCanvas.forEach((element) => {
+      elems.push(element as HTMLElement);
+      let canvasText = createCanvasText(element as HTMLElement, app.stage);
+      canvasTexts.push(canvasText as PIXI.Text);
+    })
+  }  
+  convertText();
+
+
+  /*----------------------------------
+   * Function to update text on canvas
+   * runs in the Ticker
+   ----------------------------------*/
+  function updateText(){
+    canvasTexts.forEach((text, index) => {
+      let headlinePosition = elems[index].getBoundingClientRect();
+      text.position.set(headlinePosition.x, headlinePosition.y);
+      text.alpha = elems[index].style.opacity as unknown as number;
+    })
+  }
+
+
+  /*----------------------------------
+  * Mousemove events
+  *----------------------------------*/
+  window.addEventListener('pointermove', (e) => {
+    const pointerX = e.clientX / window.innerWidth;
+    const pointerY = e.clientY / window.innerHeight;
+    const pointerXfrac = pointerX - 0.5;
+    const pointerYfrac = pointerY - 0.5;
+    
+    center = [(0.5 + pointerXfrac/10),(0.5 + pointerYfrac/10)];   
+  })
+
+
+  /*----------------------------------
+  * The Ticker
+  * ----------------------------------*/  
+  let elapsed = 0.0;
+
+  app.ticker.add((delta) => {
+    elapsed += delta;
+    bulgefilter.center = [(center[0] + Math.sin(elapsed/200)/20 ),(center[1] + Math.cos(elapsed/200)/20 )];
+    updateText();
+  })
+  console.log('HomeCanvas mounted', textsToCanvas);
+}) // <- end onMount
+
+onDestroy(() => {
+  if (browser){
+    app.destroy(true, true);
+  }
+}) // <- end onDestroy
+
+</script>
--- a/src/lib/components/Logo.svelte
+++ b/src/lib/components/Logo.svelte
@ -0,0 +1,17 @@
+<svg id="floter-logo" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 287.4 83.5">
+  <path id="r" d="M259.9 82.4h-24.2l11.6-54.9h22l-2.7 12.9c4.5-8.9 11-14 18.1-14 1 0 2.1 0 2.7.2l-4.7 22.1c-1.4-.4-3.3-.9-6.4-.9-5.4 0-9.7 2.3-10.8 7.7l-5.6 26.9z"/>
+  <path id="e" d="M237.9 59.3h-35.7c.3 5.2 2.2 7.5 6.5 7.5 2.9 0 5.1-1.5 5.9-4.2h22.3c-4.3 13.2-14.5 20.9-30.4 20.9-16.3 0-26.5-9.7-26.5-25.2 0-17.8 13.4-32 32.3-32 16.3 0 26.5 9.7 26.5 25.2 0 2.7-.4 5.3-.9 7.8zM203.3 50h13.5c-.2-4-1.8-6.5-6-6.5-3.4 0-6.1 2.1-7.5 6.5z"/>
+  <path id="t" d="M171.5 65.9c1.9 0 4.3-.3 6.3-1L174 82.2c-2.5.8-7.1 1.3-11.1 1.3-14 0-23.2-5.1-19.6-22.3l3.5-16.7h-5.5l3.6-17h5.5l3.3-15.4H178l-3.3 15.4h11l-3.6 17h-11l-3.3 15.8c-.9 3.9.3 5.6 3.7 5.6z"/>
+  <polygon id="odash" points="137.1,22.5 94.7,22.4 98.2,5.7 140.6,5.9 "/>
+  <path id="o" d="M111.4 26.4c16.7 0 27.2 9.7 27.2 25.2 0 17.8-13.7 32-33.1 32-16.7 0-27.2-9.7-27.2-25.2 0-17.9 13.8-32 33.1-32zm-3.9 36.7c5.3 0 8.8-4.3 8.8-9.4 0-4.2-2.5-6.8-6.6-6.8-5.4 0-8.9 4.3-8.9 9.4 0 4.1 2.5 6.8 6.7 6.8z"/>
+  <polygon id="l" points="45.5,82.4 63,0 87.1,0 69.7,82.4"/>
+  <polygon id="F" points="17.5,0 59.7,0 55.5,19.8 36.9,19.8 34.1,33 50.5,33 46.3,52.7 29.9,52.7 23.6,82.4 0,82.4"/> 
+</svg>
+
+  <style>
+    #floter-logo {
+      fill: currentColor;
+      height: 100%;
+      width: auto;
+    }
+  </style>
--- a/src/lib/importMarkdown.ts
+++ b/src/lib/importMarkdown.ts
@ -0,0 +1,37 @@
+type Post = {
+  metadata: {
+    title: string
+    date: string
+    description: string
+    tags: string[]
+  }
+  default: {
+    render: () => string
+  }
+  path: string
+  Content: string
+}
+
+export const fetchMarkdownPosts = async () => {
+  // eslint-disable-next-line no-useless-escape
+  const allPostFiles = import.meta.glob('/src/routes/work/\*.md')
+
+  const iterablePostFiles = Object.entries(allPostFiles)
+  
+  const allPosts = await Promise.all(
+    iterablePostFiles.map(async ([path, resolver]) => {
+      const postPath = path.slice(11, -3)
+      const data: unknown = await resolver()
+      const postData = data as Post
+      const content = postData.default.render() as unknown as { html: string }
+
+      return {
+        meta: postData.metadata,
+        path: postPath,
+        Content: content.html
+      }
+    })
+  )
+
+  return allPosts
+}
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@ -0,0 +1 @@
+// place files you want to import through the `$lib` alias in this folder.
--- a/src/lib/styles/global.scss
+++ b/src/lib/styles/global.scss
@ -0,0 +1,97 @@
+:root {
+  --spacing-outer: 5vw;
+  --color-bg: #00117f;
+  --color-text: #FF9494;
+}
+body {
+  font-family: stratos, sans-serif;
+  font-size: 20px;
+  padding: 0;
+  margin: 0;
+  background-color: var(--color-bg);
+  color: var(--color-text);
+  min-height: 100svh;
+}
+body * {
+  box-sizing: border-box;
+}
+canvas {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}  
+h1, h2, h3, h4, h5 {
+  font-size: 1em;
+  font-weight: 900;
+}
+p {
+  font-weight: 400;
+  font-size: clamp(20px, 1.6vw, 1.6vw);
+  line-height: 1.3;
+}
+a {
+  color: inherit;
+}
+.button {
+  font-size: clamp(20px, 1.6vw, 1.6vw);
+  font-weight: 900;
+  font-style: italic;
+  display: inline-block;
+  margin: 1em 0.5em 1em 0;
+  padding: .75em;
+  text-decoration: none;
+  box-sizing: border-box;
+  color: var(--color-text);
+  line-height: 1.2;
+  position: relative;
+  z-index: 2;
+  transition: all .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  letter-spacing: -0.01em;
+  
+  &:hover {
+    letter-spacing: 0.01em;
+  }
+  &:before {
+    content: '';
+    display: block;
+    position: absolute;
+    z-index: -1;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: 2px solid var(--color-text);
+    border-radius: 0;
+    box-sizing: border-box;
+    transition: all .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  }
+  &:hover:before {
+    left: -10px;
+    width: calc(100% + 20px);
+    height: calc(100% - 10px);
+    bottom: 5px;
+    border-radius: .25em;
+    transition: all .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  }
+  &.button--primary {
+    color: var(--color-bg);
+
+    &:before {
+      background-color: var(--color-text);
+    }
+  }
+  &.button--xl {
+    font-size: clamp(24px, 3.2vw, 3.2vw);
+    padding: 0.5em;
+    letter-spacing: -0.02em;
+    // display: block;
+    margin: 0 auto;
+    max-width: 40vw;
+    text-align: center;
+
+    &:hover {
+      letter-spacing: 0;
+    }
+  }
+}
--- a/src/lib/utils/creareCanvasText.ts
+++ b/src/lib/utils/creareCanvasText.ts
@ -0,0 +1,28 @@
+import type * as PIXI from 'pixi.js';
+import { Text } from 'pixi.js';
+
+export default function createCanvasText( element: HTMLElement,  stage: PIXI.Container ){
+    
+  const elem = element;
+  const elemStyles = window.getComputedStyle(elem);
+  const elemFontSize = elemStyles.getPropertyValue('font-size');
+  const elemFontFamily = elemStyles.getPropertyValue('font-family');
+  const elemLetterSpacing = parseInt(elemStyles.getPropertyValue('letter-spacing'));
+  const elemColor = elemStyles.getPropertyValue('color');
+  const elemAlignment = elemStyles.getPropertyValue('text-align');
+
+  const elemPosition = elem.getBoundingClientRect();
+  const canvasText = new Text(elem?.textContent as string, {
+    fontFamily: elemFontFamily,
+    fontSize: elemFontSize,
+    letterSpacing: elemLetterSpacing,
+    fill: elemColor,
+    align: elemAlignment as PIXI.TextStyleAlign,
+  });
+  canvasText.position.set(elemPosition.x, elemPosition.y);
+  stage.addChild(canvasText);
+
+  elem.style.opacity = '0';
+  elem.style.visibility = 'hidden';
+  return canvasText;
+}
--- a/src/lib/utils/createGradTexture.ts
+++ b/src/lib/utils/createGradTexture.ts
@ -0,0 +1,20 @@
+import * as PIXI from 'pixi.js';
+
+export default function createGradTexture(r:number, g:number, b:number) {
+  const quality = 256;
+  const canvas = document.createElement('canvas');
+  canvas.width = quality;
+  canvas.height = quality;
+
+  const ctx = canvas.getContext('2d') || new CanvasRenderingContext2D();
+
+  // use canvas2d API to create gradient
+  const grd = ctx.createRadialGradient(quality/2, quality/2, 0, quality/2, quality/2, quality/2);
+  grd.addColorStop(0, 'rgba('+r+', '+g+', '+b+', 0.9)');
+  grd.addColorStop(1, 'rgba('+r+', '+g+', '+b+', 0.0)');
+
+  ctx.fillStyle = grd;
+  ctx.fillRect(0, 0, quality, quality);
+
+  return PIXI.Texture.from(canvas);
+}
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@ -0,0 +1,125 @@
+<script lang='ts'>
+  import '$lib/styles/global.scss';
+  import Logo from '$lib/components/Logo.svelte';
+  import gsap from 'gsap';
+  import { onMount } from 'svelte';
+
+  onMount(() => {
+    let navlinks = document.querySelectorAll('nav a');
+    navlinks.forEach((link, index) => {
+      link.addEventListener('click', (e)=> {
+        const checkbox = document.querySelector('input[type="checkbox"]') as HTMLInputElement;
+        checkbox ? checkbox.checked = false : null;
+        gsap.to('.content', {duration: 0.5, y: '0%', autoAlpha: 1, ease: 'power4.out'});
+      })
+    });
+    let checkbox = document.getElementById('menustate') as HTMLInputElement;
+    checkbox.addEventListener('change', (e)=> {
+      if (checkbox.checked) {
+        gsap.to('.content', {duration: 0.75, y: -200, autoAlpha: 0.5, ease: 'power2.inOut'});
+        gsap.from('#nav', {duration: 0.5, autoAlpha: 0, y: '100%', ease: 'power4.out', delay: 0.1});
+        gsap.from('nav a', {duration: 0.5, autoAlpha: 0, y: 20, stagger: 0.1, ease: 'power4.out' , delay: 0.2});
+      } else {
+        gsap.to('.content', {duration: 0.5, y: '0%', autoAlpha: 1, ease: 'power4.out'});
+      }
+    })
+  });
+
+</script>
+<a href='/' class="logo">
+  <Logo />
+</a>
+<header>
+  <input aria-hidden="true" type="checkbox" id="menustate" />
+  <label for="menustate" aria-hidden="true">
+    <span class="open">≡</span>
+    <span class="close">×</span>
+  </label>
+  <!-- <a href="#nav" class="logo"><Logo /></a> -->
+  <nav id="nav">
+    <a href="/">Home</a>
+    <a href="/work">About</a>
+    <a href="/work">Hire</a>
+  </nav>
+</header>
+
+<div class="content">
+  <slot />
+</div>
+
+<style lang="scss">
+  header {
+    position: fixed;
+    bottom: 0;  
+    right: 0;
+    z-index: 1;
+    padding: var(--spacing-outer);
+    display: flex;
+    gap: .75em;
+    justify-content: flex-end;
+    align-items: flex-end;
+    box-sizing: border-box;
+  }
+  label {
+    height: 36px;
+  }
+  .open, .close {
+    font-size: 4em;
+    line-height: 0.3;
+    position: relative;
+    z-index: 2;
+    cursor: pointer;
+  }
+  .close {
+    top: 0.033em;
+    color: #FFF;
+  }
+  #menustate, #nav, .close {
+    /* Hide the checkbox, menu and close button by default */
+    display: none;
+  }
+  #menustate:checked ~ nav ,
+  #menustate:checked ~ label .close {
+    /*
+      Show the menu and close button when the menu is open
+      (when the #menustate input field is checked)
+    */
+    display: block;
+  }
+  #menustate:checked ~ label .open {
+    /* Hide the open button when the menu is open */
+    display: none;
+  }
+  .logo {
+    height: 36px;
+    width: auto;
+    position: fixed;
+    bottom: 0;
+    z-index: 2;
+    display: flex;
+    margin: var(--spacing-outer);
+  }
+  nav {
+    background-color: var(--color-bg);
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: var(--spacing-outer);
+  }
+  nav a {
+    display: block;
+    line-height: 1.3;
+    font-size: 5.5em;
+    font-weight: 800;
+    font-style: italic;
+    text-transform: lowercase;
+    text-decoration: none;
+    color: var(--color-text);
+
+    &:first-child {
+      margin-top: 1em;
+    }
+  }
+</style>
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@ -0,0 +1,167 @@
+<script lang='ts'>
+  import HomeCanvas from '$lib/components/HomeCanvas.svelte';
+  import { gsap } from 'gsap';
+  import ScrollTrigger from 'gsap/dist/ScrollTrigger';
+  import SplitText from 'gsap/dist/SplitText';
+  import { onMount } from 'svelte';
+
+  let canvasElems: NodeListOf<Element>;
+  onMount(() => {
+      console.log('Home mounted');
+
+      gsap.registerPlugin( ScrollTrigger, SplitText );
+      
+      const sections = document.querySelectorAll('section');
+      
+      sections.forEach( (section) => {
+        if ( section.classList.contains('splash')){
+          let split = new SplitText(section.querySelectorAll('h1'), { type: 'lines', linesClass: 'lineChildren' });
+          gsap.set(split.lines, {
+            opacity: 0,
+            y: window.innerHeight * 0.25,
+          })
+          gsap.to(split.lines, {
+            duration: 1,
+            opacity: 1,
+            y: 0,
+            stagger: 0.075,
+            ease: 'power4.out',
+          })
+        }
+        else {
+          let split = new SplitText(section.querySelectorAll('h2'), { type: 'lines', linesClass: 'lineChildren' });
+          gsap.set(split.lines, { transformOrigin: '0% 100%' });
+          gsap.set(split.lines, { yPercent: 100, opacity: 0 });
+          gsap.to(split.lines, { duration: 1, yPercent: 0, opacity: 1, stagger: 0.1, ease: 'power4.out', 
+            scrollTrigger: { trigger: split.lines, start: 'top 90%', end: 'bottom 70%', scrub: true }
+          })  
+          if (section.querySelector('p')) {
+            let splitp = new SplitText(section.querySelectorAll('p'), { type: 'lines', linesClass: 'lineChildren' });
+            gsap.set(splitp.lines, { transformOrigin: '0% 100%' });
+            gsap.set(splitp.lines, { yPercent: 100, autoAlpha: 0 });
+            gsap.to(splitp.lines, { duration: 1, yPercent: 0, autoAlpha: 1, stagger: 0.05, ease: 'power4.out', 
+              scrollTrigger: { trigger: splitp.lines, start: 'top 80%', end: 'bottom 40%', scrub: true }
+            })  
+          }
+        }
+        if (section.querySelector('.cols-2')){
+          gsap.set(section.querySelector('.cols-2'), { autoAlpha: 0 }); 
+          gsap.to(section.querySelector('.cols-2'), { duration: 1, autoAlpha: 1, ease: 'power4.out', 
+            scrollTrigger: { trigger: section.querySelector('.cols-2'), start: 'top 80%', end: 'bottom 40%', scrub: true }
+          })
+        }
+      })
+      canvasElems = document.querySelectorAll('.lineChildren') as NodeListOf<Element>;
+  });
+</script>
+
+  <article>
+    <section class="splash"> 
+      <h1>Simon Flöter creates products that stand out.</h1>
+    </section>
+    <section class="intro">
+      <h2>As a Creative Frontend Developer ...</h2> 
+      <div class="cols-2">
+        <div>
+          <p>I specialise in delivering beautifully crafted bespoke websites.</p> 
+          <p>Averse to blindly following the latest tech trends, I put the experience of both my client and the product's audience first.</p>
+        </div>
+        <div>
+          <p>I consult on the best suited technology and approach for every project and execute it.</p>
+          <p>Whether it is pure HTML/CSS/Javascript, a 'monolithic' CMS like WordPress, a modern framework like React/Svelte, or a combination.</p>
+        </div>
+      </div>
+      <div class="cta">
+        <a href="/work" class="button">Learn More</a>
+        <a href="/work" class="button button--primary">Hire Simon</a>
+      </div>
+    </section>
+    <section class="more">
+      <h2>As a UX & Graphic Designer...</h2> 
+      <div class="cols-2">
+        <div>
+          <p>I worked for a wide range of clients, including Booking.com and Adidas, but also with startups and independent brands.</p>
+        </div>
+        <div>
+          <p>I have designed Websites, Housestyles, Typefaces, Advertising campaigns and Print publications for them.</p>
+        </div>
+      </div>
+      <div class="cta">
+        <a href="/work" class="button">Learn More</a>
+        <a href="/work" class="button button--primary">Hire Simon</a>
+      </div>
+    </section>
+    <section class="more">
+      <h2>I create products that help great companies reach their audiences. Need help?</h2>
+      <div class="cta">
+        <a href="/work" class="button button--xl">Reach out!</a>
+      </div>
+    </section>
+  </article>
+  {#await onMount}
+    waiting
+  {:then}
+    <HomeCanvas textsToCanvas={canvasElems}/>
+  {:catch error}
+    <p>error</p>
+  {/await}
+
+<style lang="scss">
+  article {
+    font-size: clamp(32px, 4.5vw, 4.5vw);
+  }
+  section {
+    scroll-snap-align: start;
+    box-sizing: border-box;
+    padding: var(--spacing-outer);
+    overflow: hidden;
+
+    @media screen and (min-width: 768px) {
+      padding: var(--spacing-outer) calc(var(--spacing-outer) * 2.5);
+    }
+    &:last-child{
+      padding-bottom: 50svh;
+    }
+  }
+  .splash {
+    display: flex;
+    flex-direction: column;
+    justify-content: start;
+    min-height: 100svh;
+    justify-content: center;
+    padding: var(--spacing-outer);
+    margin-bottom: -1em;
+  }
+  h1, h2 {
+    line-height: 1.1;
+    letter-spacing: -0.025em;
+    font-weight: 400;
+    opacity: 0;
+    margin: 0;
+  }
+  h1 {
+    letter-spacing: -0.05em;
+    line-height: .9;
+    font-size: 2.5em;
+    margin-top: -.5em;
+    text-align: center;
+    @media screen and (min-width: 768px) {
+      font-size: 2.7em;
+    }
+  }
+  h2 {
+    font-size: 1.25em;
+    margin-bottom: 1em;
+  }
+  .cols-2 {
+    @media screen and (min-width: 768px) {
+      margin: 0;
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: .5em;
+      border-top: 2px solid var(--color-text);
+      margin-top: 0.125em;
+      padding-top: 0.125em;
+    }
+  }
+</style>
--- a/src/routes/blog/+page.server.ts
+++ b/src/routes/blog/+page.server.ts
@ -0,0 +1,12 @@
+import { error } from '@sveltejs/kit';
+
+export function load({ params }) {
+  
+  const posts = fetch('https://uncommonbio.co/wp-json/wp/v2/pages/').then((r) => r.json().catch((err) => {console.log(err, params)}));
+
+  if (!posts) throw error(404);
+
+  return {
+    posts
+  };
+}
--- a/src/routes/blog/+page.svelte
+++ b/src/routes/blog/+page.svelte
@ -0,0 +1,10 @@
+<script lang='ts'>
+  export let data: any;
+  let posts = data.posts;
+</script>
+
+<h1>Blog roll!</h1>
+
+{#each posts as post}
+  <h2>{post.title.rendered}</h2>
+{/each}
--- a/src/routes/blog/[slug]/+page.server.ts
+++ b/src/routes/blog/[slug]/+page.server.ts
@ -0,0 +1,12 @@
+import { error } from '@sveltejs/kit';
+
+export function load({ params }) {
+  
+  const posts = fetch('https://uncommonbio.co/wp-json/wp/v2/posts/').then((r) => r.json().catch((err) => {console.log(err, params)}));
+
+  if (!posts) throw error(404);
+
+  return {
+    posts
+  };
+}
--- a/src/routes/blog/[slug]/+page.svelte
+++ b/src/routes/blog/[slug]/+page.svelte
@ -0,0 +1,8 @@
+<script lang='ts'>
+  export let data: any;
+  let dataConverted = JSON.stringify(data);
+  let dataone = data.posts[1].content.rendered;
+</script>
+
+<h1>Blog post</h1>
+<p>{@html dataone}</p>
--- a/src/routes/work/+page.server.ts
+++ b/src/routes/work/+page.server.ts
@ -0,0 +1,11 @@
+import { fetchMarkdownPosts } from '../../lib/importMarkdown'
+
+export async function load() {
+  const posts = await fetchMarkdownPosts()
+
+  if (!posts) console.error('No posts found')
+
+  return {
+    posts
+  }
+}
--- a/src/routes/work/+page.svelte
+++ b/src/routes/work/+page.svelte
@ -0,0 +1,59 @@
+<script lang="ts">
+  import HomeCanvas from '$lib/components/HomeCanvas.svelte';
+  import { onMount } from 'svelte';
+  import gsap from 'gsap';
+  export let data;
+
+  let canvasElems: NodeListOf<Element>;
+  onMount(() => {
+    canvasElems = document.querySelectorAll('h1') as NodeListOf<Element>;
+    // console.log('Work mounted', canvasElems);
+
+    gsap.set(canvasElems, { autoAlpha: 0 });
+    gsap.to(canvasElems, {
+      duration: 1,
+      opacity: 1,
+      stagger: 0.1,
+      ease: 'power4.out',
+    });
+  });
+</script>
+
+<div class="work">
+  <h1>My work examples:</h1>
+  
+  {#each data.posts as work}
+    <h2>{work.meta.title}</h2>
+    <a href="{work.path}">Link to work</a>
+  {/each}
+</div>
+{#await onMount}
+  waiting
+{:then}
+  <HomeCanvas textsToCanvas={canvasElems}/>
+{:catch error}
+  <p>error</p>
+{/await}
+
+
+<style lang="scss">
+  h1, h2 {
+    line-height: 1.1;
+    letter-spacing: -0.025em;
+    font-weight: 400;
+    opacity: 0;
+    visibility: hidden;
+    position: relative;
+  }
+  h1 {
+    letter-spacing: -0.05em;
+    line-height: .9;
+    font-size: 2.5em;
+    @media screen and (min-width: 768px) {
+      font-size: 5.7em;
+    }
+  }
+  .work {
+    padding: var(--spacing-outer);
+  }
+</style>
--- a/src/routes/work/[slug]/+page.server.ts
+++ b/src/routes/work/[slug]/+page.server.ts
@ -0,0 +1,15 @@
+export async function load({ params }){
+  try {
+    const post = await import(`../${params.slug}.md`)
+    const { title, date } = post.metadata
+    const Content = post.default.render()
+  
+    return {
+      title,
+      date,
+      Content
+    }
+  } catch (error) {
+    console.error(error)
+  }
+}
--- a/src/routes/work/[slug]/+page.svelte
+++ b/src/routes/work/[slug]/+page.svelte
@ -0,0 +1,13 @@
+<script>
+  export let data;
+</script>
+<article>
+  <h1>{data.title}</h1>
+  <p>{@html data.Content.html}</p>
+</article>
+
+<style lang="scss">
+  article {
+    padding: var(--spacing-outer);
+  }
+</style>
--- a/src/routes/work/adidas.md
+++ b/src/routes/work/adidas.md
@ -0,0 +1,23 @@
+---
+title: Adidas
+category: Visual Design
+permalink: /work/adidas
+header_bg_image: ./img/work_adidas/adidas_hero_bw.jpg
+extra_classes: portfolio theme-adidas
+order: 12
+svg: '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="enable-background:new 0 0 1440 900" viewBox="0 0 1440 900">
+        <path d="M1440 900v-.5l-14.1-8.3.4-14.3-14.1-8.3.4-14.2-14.1-8.3.5-14.3-14.2-8.2.5-14.3-14.1-8.3.4-14.2-14.1-8.3.4-14.3-14.1-8.2.5-14.3-14.2-8.3.5-14.2-14.1-8.3.4-14.3-14.1-8.3.4-14.2-14.1-8.3.4-14.3-14.1-8.2.5-14.3-14.2-8.3.5-14.2-14.1-8.3.4-14.3-14.1-8.3.4-14.2-14.1-8.3.4-14.3-14.1-8.2.4-14.3-14.1-8.3.5-14.2-14.2-8.3.5-14.3-14.1-8.3.4-14.2-14.1-8.3.4-14.3-14.1-8.3.4-14.2-14.1-8.3.4-14.3-14.1-8.3.5-14.2-14.2-8.3.5-14.3-14.1-8.3.4-14.2-14.1-8.3.4-14.3-14.1-8.3.4-14.2-14.1-8.3.4-14.3-14.1-8.2.5-14.3-14.2-8.3.5-14.3-14.2-8.2.5-14.3-14.1-8.3.4-14.2-14.1-8.3.4-14.3-14.1-8.3.4-14.3-14.1-8.2.4-14.3-14.1-8.3.4-14.3-14.1-8.3.5-14.2-14.2-8.3.5-14.3-14.2-8.3.4-11.9H707.9l-.1.6 14.1 8.3-.4 14.3 14.1 8.2-.4 14.3 14.1 8.3-.4 14.2 14.1 8.3-.5 14.3 14.2 8.2-.5 14.3 14.1 8.3-.4 14.2 14.1 8.3-.4 14.3 14.1 8.2-.5 14.3 14.2 8.3-.5 14.2 14.1 8.3-.4 14.3 14.1 8.3-.4 14.2 14.1 8.3-.4 14.3 14.1 8.2-.5 14.3 14.2 8.3-.5 14.2 14.2 8.3-.5 14.3 14.1 8.3-.4 14.2 14.1 8.3-.4 14.3 14.1 8.3-.4 14.2 14.1 8.3-.5 14.3 14.2 8.2-.5 14.3 14.1 8.3-.4 14.3 14.1 8.2-.4 14.3 14.1 8.3-.4 14.2 14.1 8.3-.4 14.3 14.1 8.3-.5 14.2 14.2 8.3-.5 14.3 14.2 8.3-.5 14.2 14.1 8.3-.4 14.3 14.1 8.3-.4 14.2 14.1 8.3-.4 14.3 14.1 8.3-.4 14.2 14.1 8.3-.5 14.3 14.2 8.3-.5 14.2 14.1 8.3-.4 14.3 14.1 8.3-.4 14.2 14.1 8.3-.4 14.3 14.1 8.3-.4 14.2 14.1 8.3-.4 14.3 14.1 8.3-.4 14.3 14.1 8.2V900z" style="fill:#ffb7ab"/>
+      </svg>'
+---
+<div class="infobox">
+  <p>Client: <a href="https://www.adidas-group.com/en/">Adidas E-commerce dept</a></p>
+  Tasks:
+  <ul>
+    <li>Visual Design</li>
+    <li>Campaign asset production</li>
+    <li>Illustration</li>
+  </ul>
+</div>
+<div>
+  <p><span class="drop_cap">A</span>didas, as you might have heard, is an international sports and lifestyle clothing brand. I worked on several digital campaigns as a graphic designer and illustrator.</p>
+</div>				
--- a/static/bg.jpeg
+++ b/static/bg.jpeg
--- a/static/bg.jpg
+++ b/static/bg.jpg
--- a/static/bg.png
+++ b/static/bg.png
--- a/static/displacementmap.jpg
+++ b/static/displacementmap.jpg
--- a/static/displacementmap.png
+++ b/static/displacementmap.png
--- a/static/favicon.png
+++ b/static/favicon.png
--- a/static/video.mp4
+++ b/static/video.mp4
--- a/svelte.config.js
+++ b/svelte.config.js
@ -0,0 +1,25 @@
+import adapter from '@sveltejs/adapter-auto';
+import { vitePreprocess } from '@sveltejs/kit/vite';
+import { mdsvex } from 'mdsvex'
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
+	// for more information about preprocessors
+	preprocess: [
+    vitePreprocess(),
+    mdsvex({
+      extensions: ['.md']
+    })  
+  ],
+
+	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()
+	},
+  extensions: ['.svelte', '.md']
+};
+
+export default config;
--- a/tsconfig.json
+++ b/tsconfig.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
+	//
+	// 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
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@ -0,0 +1,6 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+	plugins: [sveltekit()]
+});
				`@ -0,0 +1 @@`
				// place files you want to import through the `$lib` alias in this folder.