From 19ff3bbc1d4e204286f6d9dc49114378cb8b7c44 Mon Sep 17 00:00:00 2001 From: saiminh Date: Thu, 24 Aug 2023 15:17:27 +0200 Subject: [PATCH] polishing interactions --- .../functions-internal/sveltekit-render.mjs | 2 +- .../immutable/assets/_layout.1cabc979.css | 1 - .../_app/immutable/assets/_page.aabebfd8.css | 1 - .netlify/server/chunks/index2.js | 2 +- .netlify/server/chunks/internal.js | 2 +- .netlify/server/chunks/ssr.js | 38 +---- .../server/entries/fallbacks/error.svelte.js | 29 +--- .../server/entries/pages/_layout.svelte.js | 27 +++- .netlify/server/entries/pages/_layout.ts.js | 5 +- .netlify/server/entries/pages/_page.svelte.js | 6 +- .../server/entries/pages/blog/_page.svelte.js | 2 +- .../server/entries/pages/test/_page.svelte.js | 2 +- .../server/entries/pages/work/_page.svelte.js | 6 +- .../entries/pages/work/_slug_/_page.svelte.js | 6 +- .netlify/server/manifest-full.js | 2 +- .netlify/server/manifest.js | 2 +- .netlify/server/nodes/0.js | 4 +- .netlify/server/nodes/1.js | 2 +- .netlify/server/nodes/2.js | 4 +- .netlify/server/nodes/3.js | 2 +- .netlify/server/nodes/4.js | 2 +- .netlify/server/nodes/5.js | 2 +- .netlify/server/nodes/6.js | 2 +- .netlify/server/nodes/7.js | 4 +- package-lock.json | 14 -- package.json | 1 - src/lib/utils/createCanvasImg.ts | 9 +- src/lib/utils/createCanvasText.ts | 8 +- src/lib/utils/stores.ts | 1 + src/routes/+layout.svelte | 22 ++- src/routes/+layout.ts | 6 +- src/routes/+page.svelte | 144 ++++++++++++------ src/routes/work/+page.svelte | 1 - src/routes/work/[slug]/+page.svelte | 80 +++++----- src/routes/work/workUtils.ts | 9 +- 35 files changed, 240 insertions(+), 210 deletions(-) delete mode 100644 .netlify/server/_app/immutable/assets/_layout.1cabc979.css delete mode 100644 .netlify/server/_app/immutable/assets/_page.aabebfd8.css diff --git a/.netlify/functions-internal/sveltekit-render.mjs b/.netlify/functions-internal/sveltekit-render.mjs index 7b1611e..0430e4e 100644 --- a/.netlify/functions-internal/sveltekit-render.mjs +++ b/.netlify/functions-internal/sveltekit-render.mjs @@ -12,7 +12,7 @@ return { assets: new Set([".DS_Store","cursor.png","cursor.svg","favicon.png","pointer.png","pointer.svg","work/.DS_Store","work/adidas/adidas_hero.jpg","work/formo/formo-rec.mp4","work/formo/formo-rec.webm","work/formo/formo_hero.png","work/jpl/jpl_hero.jpg"]), mimeTypes: {".png":"image/png",".svg":"image/svg+xml",".jpg":"image/jpeg",".mp4":"video/mp4",".webm":"video/webm"}, _: { - client: {"start":"_app/immutable/entry/start.83bc8b41.js","app":"_app/immutable/entry/app.751e6d7c.js","imports":["_app/immutable/entry/start.83bc8b41.js","_app/immutable/chunks/scheduler.cd8ec38c.js","_app/immutable/chunks/singletons.3c20dddb.js","_app/immutable/entry/app.751e6d7c.js","_app/immutable/chunks/scheduler.cd8ec38c.js","_app/immutable/chunks/index.9e7d825d.js"],"stylesheets":[],"fonts":[]}, + client: {"start":"_app/immutable/entry/start.0e966e92.js","app":"_app/immutable/entry/app.fea8eb32.js","imports":["_app/immutable/entry/start.0e966e92.js","_app/immutable/chunks/scheduler.8b80e243.js","_app/immutable/chunks/singletons.a1418874.js","_app/immutable/entry/app.fea8eb32.js","_app/immutable/chunks/scheduler.8b80e243.js","_app/immutable/chunks/index.b20febff.js"],"stylesheets":[],"fonts":[]}, nodes: [ __memo(() => import('../server/nodes/0.js')), __memo(() => import('../server/nodes/1.js')), diff --git a/.netlify/server/_app/immutable/assets/_layout.1cabc979.css b/.netlify/server/_app/immutable/assets/_layout.1cabc979.css deleted file mode 100644 index b0c0a57..0000000 --- a/.netlify/server/_app/immutable/assets/_layout.1cabc979.css +++ /dev/null @@ -1 +0,0 @@ -@charset "UTF-8";:root{--spacing-outer: 5vw;--spacing-nav: 5vw;--color-bg: #00117f;--color-text: #FF9494;--aspect-ratio-heroes: 1.5;--font-size-p: clamp(20px, 1.6vw, 1.6vw)}@media screen and (min-width: 768px){:root{--spacing-outer: 5vw;--spacing-nav: 2.5vw}}body{cursor:url(/cursor.svg),auto}a:hover,input:hover,button:hover{cursor:url(/pointer.svg),auto}body{font-family:stratos,sans-serif;font-size:var(--font-size-p);padding:0;margin:0;background-color:var(--color-bg);color:var(--color-text);min-height:100svh}body *{box-sizing:border-box}h1,h2,h3,h4,h5{font-size:2em;line-height:1.2;font-weight:900;font-style:italic;letter-spacing:-.02em}h2{font-size:1.5em}ul,ol{padding-left:0}ul{list-style:"▪︎ "}p,li{font-weight:400;font-size:var(--font-size-p);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 .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(.175,.885,.32,1.275);letter-spacing:-.01em}.button:hover{letter-spacing:.01em}.button: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(.175,.885,.32,1.275)}.button:hover:before{left:-10px;width:calc(100% + 20px);height:calc(100% - 10px);bottom:5px;border-radius:.25em;transition:all .3s cubic-bezier(.175,.885,.32,1.275)}.button.button--primary{color:var(--color-bg)}.button.button--primary:before{background-color:var(--color-text)}.button.button--xl{font-size:clamp(24px,3.2vw,3.2vw);padding:.5em;letter-spacing:-.02em;margin:0 auto;max-width:40vw;text-align:center}.button.button--xl:hover{letter-spacing:0}.infobox{padding:1.5em 0;font-size:var(--font-size-p)}.infobox li{border-bottom:1px solid;padding:.5em 0}.infobox>:first-child{margin-top:0}.infobox>:last-child{margin-bottom:0}.content{position:absolute;top:0;width:100%}#floter-logo.svelte-vqchku{fill:currentColor;height:100%;width:auto;display:block}header.svelte-16m5twg.svelte-16m5twg{position:fixed;bottom:0;right:0;z-index:3;padding:var(--spacing-nav);display:flex;gap:.75em;justify-content:flex-end;align-items:flex-end;box-sizing:border-box}label.svelte-16m5twg.svelte-16m5twg{height:36px}.open.svelte-16m5twg.svelte-16m5twg,.close.svelte-16m5twg.svelte-16m5twg{font-size:4em;line-height:.3;position:relative;z-index:2;cursor:url(/pointer.svg),auto}.close.svelte-16m5twg.svelte-16m5twg{top:.033em;color:#fff}#menustate.svelte-16m5twg.svelte-16m5twg,#nav.svelte-16m5twg.svelte-16m5twg,.close.svelte-16m5twg.svelte-16m5twg{display:none}#menustate.svelte-16m5twg:checked~#nav.svelte-16m5twg,#menustate:checked~label.svelte-16m5twg .close.svelte-16m5twg{display:block}#menustate:checked~label.svelte-16m5twg .open.svelte-16m5twg{display:none}#nav.svelte-16m5twg.svelte-16m5twg{background-color:var(--color-bg);position:fixed;top:0;left:0;width:100%;height:100%;padding:var(--spacing-outer)}#nav.svelte-16m5twg a.svelte-16m5twg{display:block;line-height:1.3;font-size:3em;font-weight:800;font-style:italic;text-transform:lowercase;text-decoration:none;color:var(--color-text)}@media screen and (min-width: 768px){#nav.svelte-16m5twg a.svelte-16m5twg{font-size:5.5em}}#nav.svelte-16m5twg a.svelte-16m5twg:first-child{margin-top:1em}.logo.svelte-qrzgwy{height:36px;width:auto;position:fixed;bottom:0;z-index:4;display:block;margin:var(--spacing-nav);cursor:url(/pointer.svg),auto}@media screen and (max-width: 767px){.header-nav.svelte-qrzgwy{background-color:var(--color-bg);width:100%;height:calc(36px + 2 * var(--spacing-nav));position:fixed;bottom:0;left:0;z-index:3;border-top:1px solid var(--color-text)}} diff --git a/.netlify/server/_app/immutable/assets/_page.aabebfd8.css b/.netlify/server/_app/immutable/assets/_page.aabebfd8.css deleted file mode 100644 index 97f7821..0000000 --- a/.netlify/server/_app/immutable/assets/_page.aabebfd8.css +++ /dev/null @@ -1 +0,0 @@ -canvas.svelte-1819g2x{position:fixed;top:0;left:0;z-index:-1}.scroller.svelte-m5zqpe{font-size:clamp(32px,4.5vw,4.5vw)}section.svelte-m5zqpe{scroll-snap-align:start;box-sizing:border-box;padding:var(--spacing-outer);overflow:hidden}@media screen and (min-width: 768px){section.svelte-m5zqpe{padding:var(--spacing-outer) calc(var(--spacing-outer) * 2.5)}}section.svelte-m5zqpe:last-child{padding-bottom:50svh}.splash.svelte-m5zqpe{display:flex;flex-direction:column;justify-content:start;min-height:100svh;justify-content:center;padding:var(--spacing-outer);margin-bottom:-1em}h1.svelte-m5zqpe,h2.svelte-m5zqpe{line-height:1.1;letter-spacing:-.025em;font-weight:400;font-style:normal;opacity:0;margin:0;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}h1.svelte-m5zqpe{letter-spacing:-.05em;line-height:.9;font-size:17vw;margin-top:-.5em}@media screen and (min-width: 768px){h1.svelte-m5zqpe{font-size:12vw}}h2.svelte-m5zqpe{font-size:1.25em;font-weight:800;font-style:italic;margin-bottom:.5em}p.svelte-m5zqpe{font-size:.7em;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}a.svelte-m5zqpe{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none} diff --git a/.netlify/server/chunks/index2.js b/.netlify/server/chunks/index2.js index 5bda118..2ebd2fc 100644 --- a/.netlify/server/chunks/index2.js +++ b/.netlify/server/chunks/index2.js @@ -1,4 +1,4 @@ -import { n as noop, f as safe_not_equal } from "./ssr.js"; +import { n as noop, a as safe_not_equal } from "./utils.js"; const subscriber_queue = []; function readable(value, start) { return { diff --git a/.netlify/server/chunks/internal.js b/.netlify/server/chunks/internal.js index 214b49b..e5e70a0 100644 --- a/.netlify/server/chunks/internal.js +++ b/.netlify/server/chunks/internal.js @@ -166,7 +166,7 @@ const options = {
` + status + '\n
\n

' + message + "

\n
\n
\n \n\n" }, - version_hash: "9p1c8j" + version_hash: "fe2g2k" }; function get_hooks() { return {}; diff --git a/.netlify/server/chunks/ssr.js b/.netlify/server/chunks/ssr.js index 77110cc..521a723 100644 --- a/.netlify/server/chunks/ssr.js +++ b/.netlify/server/chunks/ssr.js @@ -1,27 +1,4 @@ -function noop() { -} -function run(fn) { - return fn(); -} -function blank_object() { - return /* @__PURE__ */ Object.create(null); -} -function run_all(fns) { - fns.forEach(run); -} -function safe_not_equal(a, b) { - return a != a ? b == b : a !== b || a && typeof a === "object" || typeof a === "function"; -} -function subscribe(store, ...callbacks) { - if (store == null) { - for (const callback of callbacks) { - callback(void 0); - } - return noop; - } - const unsub = store.subscribe(...callbacks); - return unsub.unsubscribe ? () => unsub.unsubscribe() : unsub; -} +import { r as run_all, b as blank_object } from "./utils.js"; let current_component; function set_current_component(component) { current_component = component; @@ -229,18 +206,15 @@ function style_object_to_string(style_object) { return Object.keys(style_object).filter((key) => style_object[key]).map((key) => `${key}: ${escape_attribute_value(style_object[key])};`).join(" "); } export { - subscribe as a, - add_attribute as b, + add_attribute as a, + each as b, create_ssr_component as c, - each as d, + spread as d, escape as e, - safe_not_equal as f, + escape_attribute_value as f, getContext as g, - spread as h, - escape_attribute_value as i, - escape_object as j, + escape_object as h, missing_component as m, - noop as n, onDestroy as o, setContext as s, validate_component as v diff --git a/.netlify/server/entries/fallbacks/error.svelte.js b/.netlify/server/entries/fallbacks/error.svelte.js index 74e752f..47cf990 100644 --- a/.netlify/server/entries/fallbacks/error.svelte.js +++ b/.netlify/server/entries/fallbacks/error.svelte.js @@ -1,31 +1,12 @@ -import { g as getContext, c as create_ssr_component, a as subscribe, e as escape } from "../../chunks/ssr.js"; -const getStores = () => { - const stores = getContext("__svelte__"); - return { - /** @type {typeof page} */ - page: { - subscribe: stores.page.subscribe - }, - /** @type {typeof navigating} */ - navigating: { - subscribe: stores.navigating.subscribe - }, - /** @type {typeof updated} */ - updated: stores.updated - }; -}; -const page = { - subscribe(fn) { - const store = getStores().page; - return store.subscribe(fn); - } -}; -const Error$1 = create_ssr_component(($$result, $$props, $$bindings, slots) => { +import { s as subscribe } from "../../chunks/utils.js"; +import { c as create_ssr_component, e as escape } from "../../chunks/ssr.js"; +import { p as page } from "../../chunks/stores.js"; +const Error = create_ssr_component(($$result, $$props, $$bindings, slots) => { let $page, $$unsubscribe_page; $$unsubscribe_page = subscribe(page, (value) => $page = value); $$unsubscribe_page(); return `

${escape($page.status)}

${escape($page.error?.message)}

`; }); export { - Error$1 as default + Error as default }; diff --git a/.netlify/server/entries/pages/_layout.svelte.js b/.netlify/server/entries/pages/_layout.svelte.js index 572d908..1304f41 100644 --- a/.netlify/server/entries/pages/_layout.svelte.js +++ b/.netlify/server/entries/pages/_layout.svelte.js @@ -1,37 +1,48 @@ -import { c as create_ssr_component, v as validate_component } from "../../chunks/ssr.js"; +import { s as subscribe } from "../../chunks/utils.js"; +import { c as create_ssr_component, v as validate_component, e as escape } from "../../chunks/ssr.js"; +import { n as navigating } from "../../chunks/stores.js"; const global = ""; const Logo_svelte_svelte_type_style_lang = ""; -const css$2 = { +const css$3 = { code: "#floter-logo.svelte-vqchku{fill:currentColor;height:100%;width:auto;display:block}", map: null }; const Logo = create_ssr_component(($$result, $$props, $$bindings, slots) => { - $$result.css.add(css$2); + $$result.css.add(css$3); return ``; }); const MainNav_svelte_svelte_type_style_lang = ""; -const css$1 = { +const css$2 = { code: 'header.svelte-16m5twg.svelte-16m5twg{position:fixed;bottom:0;right:0;z-index:3;padding:var(--spacing-nav);display:flex;gap:0.75em;justify-content:flex-end;align-items:flex-end;box-sizing:border-box}label.svelte-16m5twg.svelte-16m5twg{height:36px}.open.svelte-16m5twg.svelte-16m5twg,.close.svelte-16m5twg.svelte-16m5twg{font-size:4em;line-height:0.3;position:relative;z-index:2;cursor:url("/pointer.svg"), auto}.close.svelte-16m5twg.svelte-16m5twg{top:0.033em;color:#FFF}#menustate.svelte-16m5twg.svelte-16m5twg,#nav.svelte-16m5twg.svelte-16m5twg,.close.svelte-16m5twg.svelte-16m5twg{display:none}#menustate.svelte-16m5twg:checked~#nav.svelte-16m5twg,#menustate:checked~label.svelte-16m5twg .close.svelte-16m5twg{display:block}#menustate:checked~label.svelte-16m5twg .open.svelte-16m5twg{display:none}#nav.svelte-16m5twg.svelte-16m5twg{background-color:var(--color-bg);position:fixed;top:0;left:0;width:100%;height:100%;padding:var(--spacing-outer)}#nav.svelte-16m5twg a.svelte-16m5twg{display:block;line-height:1.3;font-size:3em;font-weight:800;font-style:italic;text-transform:lowercase;text-decoration:none;color:var(--color-text)}@media screen and (min-width: 768px){#nav.svelte-16m5twg a.svelte-16m5twg{font-size:5.5em}}#nav.svelte-16m5twg a.svelte-16m5twg:first-child{margin-top:1em}', map: null }; const MainNav = create_ssr_component(($$result, $$props, $$bindings, slots) => { - $$result.css.add(css$1); + $$result.css.add(css$2); return `
`; }); const Header_svelte_svelte_type_style_lang = ""; -const css = { +const css$1 = { code: '.logo.svelte-qrzgwy{height:36px;width:auto;position:fixed;bottom:0;z-index:4;display:block;margin:var(--spacing-nav);cursor:url("/pointer.svg"), auto}@media screen and (max-width: 767px){.header-nav.svelte-qrzgwy{background-color:var(--color-bg);width:100%;height:calc(36px + 2 * var(--spacing-nav));position:fixed;bottom:0;left:0;z-index:3;border-top:1px solid var(--color-text)}}', map: null }; const Header = create_ssr_component(($$result, $$props, $$bindings, slots) => { - $$result.css.add(css); + $$result.css.add(css$1); return `
${validate_component(MainNav, "MainNav").$$render($$result, {}, {}, {})}
`; }); +const _layout_svelte_svelte_type_style_lang = ""; +const css = { + code: ".loader.svelte-l3hxup{position:fixed;top:calc(50% - 0.5em);left:0;width:100%;height:1em;background:var(--color-bg);display:flex;justify-content:center;align-items:center;font-size:2rem;z-index:1000}", + map: null +}; const Layout = create_ssr_component(($$result, $$props, $$bindings, slots) => { + let $navigating, $$unsubscribe_navigating; + $$unsubscribe_navigating = subscribe(navigating, (value) => $navigating = value); let { data } = $$props; if ($$props.data === void 0 && $$bindings.data && data !== void 0) $$bindings.data(data); - return `${validate_component(Header, "Header").$$render($$result, {}, {}, {})}
${slots.default ? slots.default({}) : ``}
`; + $$result.css.add(css); + $$unsubscribe_navigating(); + return `${validate_component(Header, "Header").$$render($$result, {}, {}, {})}
${$navigating ? `
Loading ${escape(JSON.stringify($navigating.to?.route.id))}
` : ``} ${slots.default ? slots.default({}) : ``}
`; }); export { Layout as default diff --git a/.netlify/server/entries/pages/_layout.ts.js b/.netlify/server/entries/pages/_layout.ts.js index 6e22f79..559a879 100644 --- a/.netlify/server/entries/pages/_layout.ts.js +++ b/.netlify/server/entries/pages/_layout.ts.js @@ -1,5 +1,8 @@ -const load = ({ url }) => { +import { l as loading } from "../../chunks/stores2.js"; +loading.set(true); +const load = async ({ url }) => { const { pathname } = url; + loading.set(false); return { pathname }; diff --git a/.netlify/server/entries/pages/_page.svelte.js b/.netlify/server/entries/pages/_page.svelte.js index 7feb9e3..b03ff19 100644 --- a/.netlify/server/entries/pages/_page.svelte.js +++ b/.netlify/server/entries/pages/_page.svelte.js @@ -1,4 +1,4 @@ -import { c as create_ssr_component, o as onDestroy, b as add_attribute, v as validate_component } from "../../chunks/ssr.js"; +import { c as create_ssr_component, o as onDestroy, a as add_attribute, v as validate_component } from "../../chunks/ssr.js"; import "pixi.js"; import "pixi-filters"; const HomeCanvas_svelte_svelte_type_style_lang = ""; @@ -21,13 +21,13 @@ const HomeCanvas = create_ssr_component(($$result, $$props, $$bindings, slots) = }); const _page_svelte_svelte_type_style_lang = ""; const css = { - code: ".scroller.svelte-m5zqpe{font-size:clamp(32px, 4.5vw, 4.5vw)}section.svelte-m5zqpe{scroll-snap-align:start;box-sizing:border-box;padding:var(--spacing-outer);overflow:hidden}@media screen and (min-width: 768px){section.svelte-m5zqpe{padding:var(--spacing-outer) calc(var(--spacing-outer) * 2.5)}}section.svelte-m5zqpe:last-child{padding-bottom:50svh}.splash.svelte-m5zqpe{display:flex;flex-direction:column;justify-content:start;min-height:100svh;justify-content:center;padding:var(--spacing-outer);margin-bottom:-1em}h1.svelte-m5zqpe,h2.svelte-m5zqpe{line-height:1.1;letter-spacing:-0.025em;font-weight:400;font-style:normal;opacity:0;margin:0;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}h1.svelte-m5zqpe{letter-spacing:-0.05em;line-height:0.9;font-size:17vw;margin-top:-0.5em}@media screen and (min-width: 768px){h1.svelte-m5zqpe{font-size:12vw}}h2.svelte-m5zqpe{font-size:1.25em;font-weight:800;font-style:italic;margin-bottom:0.5em}p.svelte-m5zqpe{font-size:0.7em;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}a.svelte-m5zqpe{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}", + code: ".loader.svelte-vkb8yx.svelte-vkb8yx{position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);text-align:center}.loader.svelte-vkb8yx p.svelte-vkb8yx{font-size:1.25em}.lds-circle.svelte-vkb8yx.svelte-vkb8yx{display:inline-block;transform:translateZ(1px)}.lds-circle.svelte-vkb8yx>div.svelte-vkb8yx{display:inline-block;width:64px;height:64px;margin:8px;border-radius:50%;background:var(--color-text);animation:svelte-vkb8yx-lds-circle 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite}@keyframes svelte-vkb8yx-lds-circle{0%,100%{animation-timing-function:cubic-bezier(0.5, 0, 1, 0.5)}0%{transform:rotateY(0deg)}50%{transform:rotateY(1800deg);animation-timing-function:cubic-bezier(0, 0.5, 0.5, 1)}100%{transform:rotateY(3600deg)}}.scroller.svelte-vkb8yx.svelte-vkb8yx{font-size:clamp(32px, 4.5vw, 4.5vw)}section.svelte-vkb8yx.svelte-vkb8yx{scroll-snap-align:start;box-sizing:border-box;padding:var(--spacing-outer);overflow:hidden}@media screen and (min-width: 768px){section.svelte-vkb8yx.svelte-vkb8yx{padding:var(--spacing-outer) calc(var(--spacing-outer) * 2.5)}}section.svelte-vkb8yx.svelte-vkb8yx:last-child{padding-bottom:50svh}.splash.svelte-vkb8yx.svelte-vkb8yx{display:flex;flex-direction:column;justify-content:start;min-height:100svh;justify-content:center;padding:var(--spacing-outer);margin-bottom:-1em}h1.svelte-vkb8yx.svelte-vkb8yx,h2.svelte-vkb8yx.svelte-vkb8yx{line-height:1.1;letter-spacing:-0.025em;font-weight:400;font-style:normal;visibility:hidden;margin:0;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}h1.svelte-vkb8yx.svelte-vkb8yx{letter-spacing:-0.05em;line-height:0.9;font-size:17vw;margin-top:-0.5em}@media screen and (min-width: 768px){h1.svelte-vkb8yx.svelte-vkb8yx{font-size:12vw}}h2.svelte-vkb8yx.svelte-vkb8yx{font-size:1.25em;font-weight:800;font-style:italic;margin-bottom:0.5em}p.svelte-vkb8yx.svelte-vkb8yx{font-size:0.7em;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}a.svelte-vkb8yx.svelte-vkb8yx{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}", map: null }; const Page = create_ssr_component(($$result, $$props, $$bindings, slots) => { let canvasElems; $$result.css.add(css); - return `

Simon Flöter creates products that stand out.

As a Creative Web Developer ...

I specialise in delivering beautifully crafted bespoke websites.

Learn More Hire Simon

As a UX & Graphic Designer...

I have designed Websites, Housestyles, Typefaces, Advertising campaigns and Print publications for them.

Learn More Hire Simon

I create products that help great companies reach their audiences. Need help?

Reach out!
${validate_component(HomeCanvas, "HomeCanvas").$$render($$result, { textsToCanvas: canvasElems }, {}, {})}`; + return `${`

Loading...

`}

Simon Flöter creates products that stand out.

As a Creative Web Developer ...

I specialise in delivering beautifully crafted bespoke websites.

Learn More Hire Simon

As a UX & Graphic Designer...

I have designed Websites, Housestyles, Typefaces, Advertising campaigns and Print publications for them.

Learn More Hire Simon

I create products that help great companies reach their audiences. Need help?

Reach out!
${validate_component(HomeCanvas, "HomeCanvas").$$render($$result, { textsToCanvas: canvasElems }, {}, {})}`; }); export { Page as default diff --git a/.netlify/server/entries/pages/blog/_page.svelte.js b/.netlify/server/entries/pages/blog/_page.svelte.js index 23a6dc3..8a49501 100644 --- a/.netlify/server/entries/pages/blog/_page.svelte.js +++ b/.netlify/server/entries/pages/blog/_page.svelte.js @@ -1,4 +1,4 @@ -import { c as create_ssr_component, d as each, e as escape } from "../../../chunks/ssr.js"; +import { c as create_ssr_component, b as each, e as escape } from "../../../chunks/ssr.js"; const Page = create_ssr_component(($$result, $$props, $$bindings, slots) => { let { data } = $$props; let posts = data.posts; diff --git a/.netlify/server/entries/pages/test/_page.svelte.js b/.netlify/server/entries/pages/test/_page.svelte.js index 2cb49aa..6bd0f85 100644 --- a/.netlify/server/entries/pages/test/_page.svelte.js +++ b/.netlify/server/entries/pages/test/_page.svelte.js @@ -1,4 +1,4 @@ -import { c as create_ssr_component, b as add_attribute } from "../../../chunks/ssr.js"; +import { c as create_ssr_component, a as add_attribute } from "../../../chunks/ssr.js"; const myImgSrcSetWebp = "/_app/immutable/assets/formo_hero.76612d9f.webp 1344w, /_app/immutable/assets/formo_hero.3c06dcdd.webp 672w, /_app/immutable/assets/formo_hero.bdd89961.webp 336w"; const myImg = [ "/_app/immutable/assets/formo_hero.10e20058.avif", diff --git a/.netlify/server/entries/pages/work/_page.svelte.js b/.netlify/server/entries/pages/work/_page.svelte.js index aaea8bd..4155acc 100644 --- a/.netlify/server/entries/pages/work/_page.svelte.js +++ b/.netlify/server/entries/pages/work/_page.svelte.js @@ -1,7 +1,7 @@ -import { c as create_ssr_component, o as onDestroy, b as add_attribute, d as each, v as validate_component, e as escape } from "../../../chunks/ssr.js"; +import { c as create_ssr_component, o as onDestroy, a as add_attribute, b as each, v as validate_component, e as escape } from "../../../chunks/ssr.js"; import "pixi.js"; import "pixi-filters"; -import { w as writable } from "../../../chunks/index2.js"; +import { w as workbulge } from "../../../chunks/stores2.js"; import { C as CldImage } from "../../../chunks/CldImage.js"; const WorkCanvas_svelte_svelte_type_style_lang = ""; const css$1 = { @@ -24,7 +24,6 @@ const WorkCanvas = create_ssr_component(($$result, $$props, $$bindings, slots) = $$result.css.add(css$1); return ``; }); -const workbulge = writable(0.25); workbulge.subscribe((value) => { }); const _page_svelte_svelte_type_style_lang = ""; @@ -53,7 +52,6 @@ const Page = create_ssr_component(($$result, $$props, $$bindings, slots) => { width: "2100", height: "1400", objectFit: "fill", - placeholder: "blur", loading: i < 10 ? "eager" : "lazy" }, {}, diff --git a/.netlify/server/entries/pages/work/_slug_/_page.svelte.js b/.netlify/server/entries/pages/work/_slug_/_page.svelte.js index 4b3a8d1..92e79b6 100644 --- a/.netlify/server/entries/pages/work/_slug_/_page.svelte.js +++ b/.netlify/server/entries/pages/work/_slug_/_page.svelte.js @@ -4,7 +4,7 @@ import { ScrollTrigger } from "gsap/dist/ScrollTrigger.js"; import { C as CldImage } from "../../../../chunks/CldImage.js"; const _page_svelte_svelte_type_style_lang = ""; const css = { - code: ".work.svelte-1vxlfgy.svelte-1vxlfgy{width:100vw;min-height:100svh;overflow:hidden;padding-bottom:60px;background-color:var(--color-bg);position:relative;top:100svh}@media screen and (min-width: 768px){.work.svelte-1vxlfgy.svelte-1vxlfgy{top:0;left:100vw}}.subnav.svelte-1vxlfgy.svelte-1vxlfgy{position:fixed;top:0;right:0;z-index:4;padding:var(--spacing-outer)}.heromask.svelte-1vxlfgy.svelte-1vxlfgy{position:fixed;top:0;left:0;aspect-ratio:var(--aspect-ratio-heroes);width:100%;height:auto;z-index:2;clip-path:polygon(0 0, 100% 0, 100% 100%, 0% 100%)}.heromask img{z-index:0;display:block;position:relative;width:100%;height:100%;aspect-ratio:var(--aspect-ratio-heroes);margin:0;object-fit:fill}.work-content.svelte-1vxlfgy.svelte-1vxlfgy{padding:0 var(--spacing-outer);padding-top:calc(100vw / var(--aspect-ratio-heroes) + 1.5em);position:relative;z-index:1;margin-top:0;color:var(--color-text)}@media screen and (min-width: 768px){.work-content.svelte-1vxlfgy.svelte-1vxlfgy{margin-left:40vw;max-width:60vw;padding-top:calc(3 * var(--spacing-outer));padding-left:calc(var(--spacing-outer) * 1.5);padding-right:calc(var(--spacing-outer) * 2.5)}}@media screen and (min-width: 768px){.work-content-text.svelte-1vxlfgy.svelte-1vxlfgy{border-top:1px solid var(--color-text)}}h1.svelte-1vxlfgy.svelte-1vxlfgy{position:relative;z-index:1;margin:0}@media screen and (min-width: 768px){h1.svelte-1vxlfgy.svelte-1vxlfgy{padding:0 0 1em 0}}h1.svelte-1vxlfgy .name.svelte-1vxlfgy{display:none}h1.svelte-1vxlfgy .svg-logo.svelte-1vxlfgy svg{width:auto;height:auto;max-width:250px;max-height:80px;margin-bottom:1em}@media screen and (min-width: 768px){h1.svelte-1vxlfgy .svg-logo.svelte-1vxlfgy svg{max-width:400px;max-height:200px}}.header-nav{transition:all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1)}.work .header-nav{transform:translateY(100%)}", + code: ".work.svelte-lxhlir.svelte-lxhlir{width:100vw;min-height:100svh;overflow:hidden;box-sizing:border-box;transform:translateY(100%)}@media screen and (min-width: 768px){.work.svelte-lxhlir.svelte-lxhlir{transform:translateX(100%)}}.subnav.svelte-lxhlir.svelte-lxhlir{position:fixed;top:0;right:0;z-index:4;padding:var(--spacing-outer)}.heromask.svelte-lxhlir.svelte-lxhlir{position:fixed;top:0;left:0;aspect-ratio:var(--aspect-ratio-heroes);width:100%;height:auto;z-index:2;clip-path:polygon(0 0, 100% 0, 100% 100%, 0% 100%)}.heromask img{z-index:0;display:block;position:relative;width:100%;height:100%;aspect-ratio:var(--aspect-ratio-heroes);margin:0;object-fit:fill}.work-content.svelte-lxhlir.svelte-lxhlir{padding:0 var(--spacing-outer);padding-top:calc(66.6vw + 1em);position:relative;z-index:1;color:var(--color-text)}.work-content.svelte-lxhlir .svelte-lxhlir:last-child{margin-bottom:100px}@media screen and (min-width: 768px){.work-content.svelte-lxhlir.svelte-lxhlir{margin-left:40vw;max-width:60vw;padding-top:calc(3 * var(--spacing-outer));padding-left:calc(var(--spacing-outer) * 1.5);padding-right:calc(var(--spacing-outer) * 2.5)}}@media screen and (min-width: 768px){.work-content-text.svelte-lxhlir.svelte-lxhlir{border-top:1px solid var(--color-text)}}h1.svelte-lxhlir.svelte-lxhlir{position:relative;z-index:1;margin:0}@media screen and (min-width: 768px){h1.svelte-lxhlir.svelte-lxhlir{padding:0 0 1em 0}}h1.svelte-lxhlir .name.svelte-lxhlir{display:none}h1.svelte-lxhlir .svg-logo.svelte-lxhlir svg{width:auto;height:auto;max-width:250px;max-height:80px;margin-bottom:1em}@media screen and (min-width: 768px){h1.svelte-lxhlir .svg-logo.svelte-lxhlir svg{max-width:400px;max-height:200px}}.header-nav{transition:all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1)}.work .header-nav{transform:translateY(100%)}", map: null }; const Page = create_ssr_component(($$result, $$props, $$bindings, slots) => { @@ -13,7 +13,7 @@ const Page = create_ssr_component(($$result, $$props, $$bindings, slots) => { if ($$props.data === void 0 && $$bindings.data && data !== void 0) $$bindings.data(data); $$result.css.add(css); - return `
${validate_component(CldImage, "CldImage").$$render( + return `
${validate_component(CldImage, "CldImage").$$render( $$result, { src: data.header_bg_image, @@ -27,7 +27,7 @@ const Page = create_ssr_component(($$result, $$props, $$bindings, slots) => { }, {}, {} - )}
← Back
${``}
`; + )}
← Back
${``}
`; }); export { Page as default diff --git a/.netlify/server/manifest-full.js b/.netlify/server/manifest-full.js index b54b13a..1d45b38 100644 --- a/.netlify/server/manifest-full.js +++ b/.netlify/server/manifest-full.js @@ -10,7 +10,7 @@ return { assets: new Set([".DS_Store","cursor.png","cursor.svg","favicon.png","pointer.png","pointer.svg","work/.DS_Store","work/adidas/adidas_hero.jpg","work/formo/formo-rec.mp4","work/formo/formo-rec.webm","work/formo/formo_hero.png","work/jpl/jpl_hero.jpg"]), mimeTypes: {".png":"image/png",".svg":"image/svg+xml",".jpg":"image/jpeg",".mp4":"video/mp4",".webm":"video/webm"}, _: { - client: {"start":"_app/immutable/entry/start.83bc8b41.js","app":"_app/immutable/entry/app.751e6d7c.js","imports":["_app/immutable/entry/start.83bc8b41.js","_app/immutable/chunks/scheduler.cd8ec38c.js","_app/immutable/chunks/singletons.3c20dddb.js","_app/immutable/entry/app.751e6d7c.js","_app/immutable/chunks/scheduler.cd8ec38c.js","_app/immutable/chunks/index.9e7d825d.js"],"stylesheets":[],"fonts":[]}, + client: {"start":"_app/immutable/entry/start.0e966e92.js","app":"_app/immutable/entry/app.fea8eb32.js","imports":["_app/immutable/entry/start.0e966e92.js","_app/immutable/chunks/scheduler.8b80e243.js","_app/immutable/chunks/singletons.a1418874.js","_app/immutable/entry/app.fea8eb32.js","_app/immutable/chunks/scheduler.8b80e243.js","_app/immutable/chunks/index.b20febff.js"],"stylesheets":[],"fonts":[]}, nodes: [ __memo(() => import('./nodes/0.js')), __memo(() => import('./nodes/1.js')), diff --git a/.netlify/server/manifest.js b/.netlify/server/manifest.js index b54b13a..1d45b38 100644 --- a/.netlify/server/manifest.js +++ b/.netlify/server/manifest.js @@ -10,7 +10,7 @@ return { assets: new Set([".DS_Store","cursor.png","cursor.svg","favicon.png","pointer.png","pointer.svg","work/.DS_Store","work/adidas/adidas_hero.jpg","work/formo/formo-rec.mp4","work/formo/formo-rec.webm","work/formo/formo_hero.png","work/jpl/jpl_hero.jpg"]), mimeTypes: {".png":"image/png",".svg":"image/svg+xml",".jpg":"image/jpeg",".mp4":"video/mp4",".webm":"video/webm"}, _: { - client: {"start":"_app/immutable/entry/start.83bc8b41.js","app":"_app/immutable/entry/app.751e6d7c.js","imports":["_app/immutable/entry/start.83bc8b41.js","_app/immutable/chunks/scheduler.cd8ec38c.js","_app/immutable/chunks/singletons.3c20dddb.js","_app/immutable/entry/app.751e6d7c.js","_app/immutable/chunks/scheduler.cd8ec38c.js","_app/immutable/chunks/index.9e7d825d.js"],"stylesheets":[],"fonts":[]}, + client: {"start":"_app/immutable/entry/start.0e966e92.js","app":"_app/immutable/entry/app.fea8eb32.js","imports":["_app/immutable/entry/start.0e966e92.js","_app/immutable/chunks/scheduler.8b80e243.js","_app/immutable/chunks/singletons.a1418874.js","_app/immutable/entry/app.fea8eb32.js","_app/immutable/chunks/scheduler.8b80e243.js","_app/immutable/chunks/index.b20febff.js"],"stylesheets":[],"fonts":[]}, nodes: [ __memo(() => import('./nodes/0.js')), __memo(() => import('./nodes/1.js')), diff --git a/.netlify/server/nodes/0.js b/.netlify/server/nodes/0.js index ef1f6d4..a998340 100644 --- a/.netlify/server/nodes/0.js +++ b/.netlify/server/nodes/0.js @@ -5,6 +5,6 @@ let component_cache; export const component = async () => component_cache ??= (await import('../entries/pages/_layout.svelte.js')).default; export { universal }; export const universal_id = "src/routes/+layout.ts"; -export const imports = ["_app/immutable/nodes/0.47450663.js","_app/immutable/chunks/scheduler.cd8ec38c.js","_app/immutable/chunks/index.9e7d825d.js","_app/immutable/chunks/index.4db78ffb.js"]; -export const stylesheets = ["_app/immutable/assets/0.1cabc979.css"]; +export const imports = ["_app/immutable/nodes/0.87056fa6.js","_app/immutable/chunks/stores.0036eca8.js","_app/immutable/chunks/singletons.a1418874.js","_app/immutable/chunks/scheduler.8b80e243.js","_app/immutable/chunks/index.b20febff.js","_app/immutable/chunks/index.4db78ffb.js","_app/immutable/chunks/stores.b869df48.js"]; +export const stylesheets = ["_app/immutable/assets/0.bc59ba78.css"]; export const fonts = []; diff --git a/.netlify/server/nodes/1.js b/.netlify/server/nodes/1.js index 9e81526..4a4129f 100644 --- a/.netlify/server/nodes/1.js +++ b/.netlify/server/nodes/1.js @@ -3,6 +3,6 @@ export const index = 1; let component_cache; export const component = async () => component_cache ??= (await import('../entries/fallbacks/error.svelte.js')).default; -export const imports = ["_app/immutable/nodes/1.a7aa4246.js","_app/immutable/chunks/scheduler.cd8ec38c.js","_app/immutable/chunks/index.9e7d825d.js","_app/immutable/chunks/singletons.3c20dddb.js"]; +export const imports = ["_app/immutable/nodes/1.2790111f.js","_app/immutable/chunks/scheduler.8b80e243.js","_app/immutable/chunks/index.b20febff.js","_app/immutable/chunks/stores.b869df48.js","_app/immutable/chunks/singletons.a1418874.js"]; export const stylesheets = []; export const fonts = []; diff --git a/.netlify/server/nodes/2.js b/.netlify/server/nodes/2.js index 4a5c2f5..d32e8d8 100644 --- a/.netlify/server/nodes/2.js +++ b/.netlify/server/nodes/2.js @@ -3,6 +3,6 @@ export const index = 2; let component_cache; export const component = async () => component_cache ??= (await import('../entries/pages/_page.svelte.js')).default; -export const imports = ["_app/immutable/nodes/2.1f7805c5.js","_app/immutable/chunks/scheduler.cd8ec38c.js","_app/immutable/chunks/index.9e7d825d.js","_app/immutable/chunks/navigation.6a0efe7b.js","_app/immutable/chunks/ScrollTrigger.96597ec4.js","_app/immutable/chunks/singletons.3c20dddb.js","_app/immutable/chunks/index.4db78ffb.js"]; -export const stylesheets = ["_app/immutable/assets/2.aabebfd8.css"]; +export const imports = ["_app/immutable/nodes/2.7bf3e2ea.js","_app/immutable/chunks/scheduler.8b80e243.js","_app/immutable/chunks/index.b20febff.js","_app/immutable/chunks/createCanvasImg.1e4cbea9.js","_app/immutable/chunks/ScrollTrigger.96597ec4.js","_app/immutable/chunks/index.4db78ffb.js"]; +export const stylesheets = ["_app/immutable/assets/2.4c80624d.css"]; export const fonts = []; diff --git a/.netlify/server/nodes/3.js b/.netlify/server/nodes/3.js index f3517f3..b889e8f 100644 --- a/.netlify/server/nodes/3.js +++ b/.netlify/server/nodes/3.js @@ -5,6 +5,6 @@ let component_cache; export const component = async () => component_cache ??= (await import('../entries/pages/blog/_page.svelte.js')).default; export { server }; export const server_id = "src/routes/blog/+page.server.ts"; -export const imports = ["_app/immutable/nodes/3.90216c4c.js","_app/immutable/chunks/scheduler.cd8ec38c.js","_app/immutable/chunks/index.9e7d825d.js","_app/immutable/chunks/each.e59479a4.js"]; +export const imports = ["_app/immutable/nodes/3.61bedb1a.js","_app/immutable/chunks/scheduler.8b80e243.js","_app/immutable/chunks/index.b20febff.js","_app/immutable/chunks/each.e59479a4.js"]; export const stylesheets = []; export const fonts = []; diff --git a/.netlify/server/nodes/4.js b/.netlify/server/nodes/4.js index ae262f1..67dace8 100644 --- a/.netlify/server/nodes/4.js +++ b/.netlify/server/nodes/4.js @@ -5,6 +5,6 @@ let component_cache; export const component = async () => component_cache ??= (await import('../entries/pages/blog/_slug_/_page.svelte.js')).default; export { server }; export const server_id = "src/routes/blog/[slug]/+page.server.ts"; -export const imports = ["_app/immutable/nodes/4.9ae234c4.js","_app/immutable/chunks/scheduler.cd8ec38c.js","_app/immutable/chunks/index.9e7d825d.js"]; +export const imports = ["_app/immutable/nodes/4.d8704671.js","_app/immutable/chunks/scheduler.8b80e243.js","_app/immutable/chunks/index.b20febff.js"]; export const stylesheets = []; export const fonts = []; diff --git a/.netlify/server/nodes/5.js b/.netlify/server/nodes/5.js index a8b81fa..d5689da 100644 --- a/.netlify/server/nodes/5.js +++ b/.netlify/server/nodes/5.js @@ -3,6 +3,6 @@ export const index = 5; let component_cache; export const component = async () => component_cache ??= (await import('../entries/pages/test/_page.svelte.js')).default; -export const imports = ["_app/immutable/nodes/5.e9f1a99f.js","_app/immutable/chunks/scheduler.cd8ec38c.js","_app/immutable/chunks/index.9e7d825d.js"]; +export const imports = ["_app/immutable/nodes/5.da918b8f.js","_app/immutable/chunks/scheduler.8b80e243.js","_app/immutable/chunks/index.b20febff.js"]; export const stylesheets = []; export const fonts = []; diff --git a/.netlify/server/nodes/6.js b/.netlify/server/nodes/6.js index 6c84c07..f618098 100644 --- a/.netlify/server/nodes/6.js +++ b/.netlify/server/nodes/6.js @@ -5,6 +5,6 @@ let component_cache; export const component = async () => component_cache ??= (await import('../entries/pages/work/_page.svelte.js')).default; export { server }; export const server_id = "src/routes/work/+page.server.ts"; -export const imports = ["_app/immutable/nodes/6.738d7458.js","_app/immutable/chunks/scheduler.cd8ec38c.js","_app/immutable/chunks/index.9e7d825d.js","_app/immutable/chunks/each.e59479a4.js","_app/immutable/chunks/navigation.6a0efe7b.js","_app/immutable/chunks/ScrollTrigger.96597ec4.js","_app/immutable/chunks/singletons.3c20dddb.js","_app/immutable/chunks/index.4db78ffb.js","_app/immutable/chunks/CldImage.ebf46432.js"]; +export const imports = ["_app/immutable/nodes/6.82cbcbbe.js","_app/immutable/chunks/scheduler.8b80e243.js","_app/immutable/chunks/index.b20febff.js","_app/immutable/chunks/each.e59479a4.js","_app/immutable/chunks/createCanvasImg.1e4cbea9.js","_app/immutable/chunks/ScrollTrigger.96597ec4.js","_app/immutable/chunks/index.4db78ffb.js","_app/immutable/chunks/singletons.a1418874.js","_app/immutable/chunks/stores.0036eca8.js","_app/immutable/chunks/CldImage.7a2ca419.js"]; export const stylesheets = ["_app/immutable/assets/6.21634584.css"]; export const fonts = []; diff --git a/.netlify/server/nodes/7.js b/.netlify/server/nodes/7.js index e1e491f..ab4702e 100644 --- a/.netlify/server/nodes/7.js +++ b/.netlify/server/nodes/7.js @@ -5,6 +5,6 @@ let component_cache; export const component = async () => component_cache ??= (await import('../entries/pages/work/_slug_/_page.svelte.js')).default; export { server }; export const server_id = "src/routes/work/[slug]/+page.server.ts"; -export const imports = ["_app/immutable/nodes/7.07bb8339.js","_app/immutable/chunks/scheduler.cd8ec38c.js","_app/immutable/chunks/index.9e7d825d.js","_app/immutable/chunks/index.4db78ffb.js","_app/immutable/chunks/ScrollTrigger.96597ec4.js","_app/immutable/chunks/CldImage.ebf46432.js"]; -export const stylesheets = ["_app/immutable/assets/7.e811ef30.css"]; +export const imports = ["_app/immutable/nodes/7.3d870ca5.js","_app/immutable/chunks/scheduler.8b80e243.js","_app/immutable/chunks/index.b20febff.js","_app/immutable/chunks/index.4db78ffb.js","_app/immutable/chunks/ScrollTrigger.96597ec4.js","_app/immutable/chunks/CldImage.7a2ca419.js"]; +export const stylesheets = ["_app/immutable/assets/7.9f510d70.css"]; export const fonts = []; diff --git a/package-lock.json b/package-lock.json index 2f37ffa..5c948f6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,6 @@ "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", "superjson": "^1.13.1", @@ -3683,14 +3682,6 @@ "is-reference": "^3.0.0" } }, - "node_modules/perlin-noise-2d": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/perlin-noise-2d/-/perlin-noise-2d-1.0.0.tgz", - "integrity": "sha512-aZrqFCeCMExmrHa8482MxDf+G49CXSvqiHcxhmKb8KFDBKIt+5eAA7UdkXtGMfr2dnEdIomOIRUYOXjfV6L8Gw==", - "dependencies": { - "seedrandom": "^3.0.5" - } - }, "node_modules/picocolors": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", @@ -4282,11 +4273,6 @@ "node": ">=14.0.0" } }, - "node_modules/seedrandom": { - "version": "3.0.5", - "resolved": "https://registry.npmjs.org/seedrandom/-/seedrandom-3.0.5.tgz", - "integrity": "sha512-8OwmbklUNzwezjGInmZ+2clQmExQPvomqjL7LFqOYqtmuxRgQYqOD3mHaU+MvZn5FLUeVxVfQjwLZW/n/JFuqg==" - }, "node_modules/semver": { "version": "7.5.4", "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", diff --git a/package.json b/package.json index d395f1a..75dba51 100644 --- a/package.json +++ b/package.json @@ -38,7 +38,6 @@ "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", "superjson": "^1.13.1", diff --git a/src/lib/utils/createCanvasImg.ts b/src/lib/utils/createCanvasImg.ts index ea2bd6d..235723b 100644 --- a/src/lib/utils/createCanvasImg.ts +++ b/src/lib/utils/createCanvasImg.ts @@ -3,17 +3,20 @@ import * as PIXI from 'pixi.js'; export default function createCanvasText( element: HTMLImageElement, stage: PIXI.Container ){ const elem = element; - // console.log(elem); - const elemSrc = elem.currentSrc || ''; + const elemSrc = elem.currentSrc || elem.src; const elemPosition = elem.getBoundingClientRect(); const canvasImg = PIXI.Sprite.from(elemSrc); canvasImg.position.set(elemPosition.x, elemPosition.y); canvasImg.width = elemPosition.width; canvasImg.height = elemPosition.height; + canvasImg.on('added', () => { + console.log('canvas imgs added'); + elem.classList.add('canvas-img-added'); + elem.style.visibility = 'hidden'; + }); stage.addChild(canvasImg); // elem.style.opacity = '0'; - elem.style.visibility = 'hidden'; return canvasImg; } \ No newline at end of file diff --git a/src/lib/utils/createCanvasText.ts b/src/lib/utils/createCanvasText.ts index a1e3c41..c1e8d1c 100644 --- a/src/lib/utils/createCanvasText.ts +++ b/src/lib/utils/createCanvasText.ts @@ -23,11 +23,15 @@ export default function createCanvasText( element: HTMLElement, stage: PIXI.Con fill: elemColor, align: elemAlignment as PIXI.TextStyleAlign, }); + canvasText.on('added', () => { + console.log('canvas text added'); + elem.classList.add('canvas-text-added'); + elem.style.opacity = '0'; + elem.style.visibility = 'hidden'; + }); canvasText.position.set(elemPosition.x, elemPosition.y); // canvasText.zIndex = 100; stage.addChild(canvasText); - elem.style.opacity = '0'; - elem.style.visibility = 'hidden'; return canvasText; } \ No newline at end of file diff --git a/src/lib/utils/stores.ts b/src/lib/utils/stores.ts index ee7de27..ed9b3ab 100644 --- a/src/lib/utils/stores.ts +++ b/src/lib/utils/stores.ts @@ -1,3 +1,4 @@ import { writable } from 'svelte/store'; export const workbulge = writable(0.25); +export const loading = writable(false); \ No newline at end of file diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 2b232e6..40b9edd 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -2,15 +2,35 @@ import '$lib/styles/global.scss'; import Header from '$lib/components/Header.svelte'; import { fade } from 'svelte/transition'; + import { navigating } from '$app/stores'; export let data; +
- {#key data.pathname}
+ {#if $navigating} +
Loading {JSON.stringify($navigating.to?.route.id)}
+ {/if}
{/key} + + \ No newline at end of file diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts index 2fffad0..8d3ec26 100644 --- a/src/routes/+layout.ts +++ b/src/routes/+layout.ts @@ -1,6 +1,8 @@ -export const load = ({ url }) => { +import { loading } from '$lib/utils/stores.js' +loading.set(true) +export const load = async ({ url }) => { const { pathname } = url - + loading.set(false) return { pathname } diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 00e2da3..4c16f90 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -4,12 +4,14 @@ import { gsap } from 'gsap'; import ScrollTrigger from 'gsap/dist/ScrollTrigger'; import SplitText from 'gsap/dist/SplitText'; - import { disableScrollHandling } from '$app/navigation'; let canvasElems: Array; - + let mounted = false; + onMount( () => { - disableScrollHandling(); + + mounted = true; + gsap.registerPlugin( ScrollTrigger, SplitText ); const sections = document.querySelectorAll('section'); @@ -57,52 +59,96 @@ }); -
-
-

Simon Flöter creates products that stand out.

-
-
-

As a Creative Web Developer ...

-
-
-

I specialise in delivering beautifully crafted bespoke websites.

- -
-
-
- Learn More - Hire Simon -
-
-
-

As a UX & Graphic Designer...

-
- -
-

I have designed Websites, Housestyles, Typefaces, Advertising campaigns and Print publications for them.

-
-
-
- Learn More - Hire Simon -
-
-
-

I create products that help great companies reach their audiences. Need help?

-
- Reach out! -
-
-
- - +{#if !mounted} +
+
+

Loading...

+
+{/if} +
+
+

Simon Flöter creates products that stand out.

+
+
+

As a Creative Web Developer ...

+
+
+

I specialise in delivering beautifully crafted bespoke websites.

+ +
+
+
+ Learn More + Hire Simon +
+
+
+

As a UX & Graphic Designer...

+
+ +
+

I have designed Websites, Housestyles, Typefaces, Advertising campaigns and Print publications for them.

+
+
+
+ Learn More + Hire Simon +
+
+
+

I create products that help great companies reach their audiences. Need help?

+
+ Reach out! +
+
+
+