simon/floter.design
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

polishing interactions

Browse source
This commit is contained in:
saiminh 2023-08-24 15:17:27 +02:00
parent 513fb6f059
commit 19ff3bbc1d
35 changed files with 240 additions and 210 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.netlify/functions-internal/sveltekit-render.mjs
View file

@ -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')),

1
.netlify/server/_app/immutable/assets/_layout.1cabc979.css
View file

@ -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)}}

1
.netlify/server/_app/immutable/assets/_page.aabebfd8.css
View file

@ -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}

2
.netlify/server/chunks/index2.js
View file

@ -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 {

2
.netlify/server/chunks/internal.js
View file

@ -166,7 +166,7 @@ const options = {
<div class="error">
<span class="status">` + status + '</span>\n <div class="message">\n <h1>' + message + "</h1>\n </div>\n </div>\n </body>\n</html>\n"
},
version_hash: "9p1c8j"
version_hash: "fe2g2k"
};
function get_hooks() {
return {};

38
.netlify/server/chunks/ssr.js
View file

@ -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

29
.netlify/server/entries/fallbacks/error.svelte.js
View file

@ -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 `<h1>${escape($page.status)}</h1> <p>${escape($page.error?.message)}</p>`;
});
export {
Error$1 as default
Error as default
};

27
.netlify/server/entries/pages/_layout.svelte.js
View file

@ -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 `<svg id="floter-logo" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 287.4 83.5" width="290" height="85" class="svelte-vqchku"><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><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><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"></path><polygon id="odash" points="137.1,22.5 94.7,22.4 98.2,5.7 140.6,5.9 "></polygon><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"></path><polygon id="l" points="45.5,82.4 63,0 87.1,0 69.7,82.4"></polygon><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"></polygon></svg>`;
});
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 `<header class="svelte-16m5twg" data-svelte-h="svelte-18a0w60"><input aria-hidden="true" type="checkbox" id="menustate" class="svelte-16m5twg"> <label for="menustate" aria-hidden="true" class="svelte-16m5twg"><span class="open svelte-16m5twg">≡</span> <span class="close svelte-16m5twg">×</span></label> <nav id="nav" class="svelte-16m5twg"><a href="/" class="svelte-16m5twg">Home</a> <a href="/work" class="svelte-16m5twg">About</a> <a href="/work" class="svelte-16m5twg">Hire</a></nav> </header>`;
});
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 `<header class="header-nav svelte-qrzgwy"><a href="/" class="logo svelte-qrzgwy">${validate_component(Logo, "Logo").$$render($$result, {}, {}, {})}</a> ${validate_component(MainNav, "MainNav").$$render($$result, {}, {}, {})} </header>`;
});
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, {}, {}, {})} <div class="content">${slots.default ? slots.default({}) : ``}</div>`;
$$result.css.add(css);
$$unsubscribe_navigating();
return `${validate_component(Header, "Header").$$render($$result, {}, {}, {})} <div class="content">${$navigating ? `<div class="loader svelte-l3hxup">Loading ${escape(JSON.stringify($navigating.to?.route.id))}</div>` : ``} ${slots.default ? slots.default({}) : ``}</div>`;
});
export {
Layout as default

5
.netlify/server/entries/pages/_layout.ts.js
View file

@ -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
};

6
.netlify/server/entries/pages/_page.svelte.js
View file

@ -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 `<article class="scroller svelte-m5zqpe" data-svelte-h="svelte-hqummz"><section class="splash svelte-m5zqpe"><h1 class="svelte-m5zqpe">Simon Flöter creates products that stand out.</h1></section> <section class="intro svelte-m5zqpe"><h2 class="svelte-m5zqpe">As a Creative Web Developer ...</h2> <div class="cols-2"><div><p class="svelte-m5zqpe">I specialise in delivering beautifully crafted bespoke websites.</p> </div></div> <div class="cta"><a href="/work" class="button svelte-m5zqpe">Learn More</a> <a href="/work" class="button button--primary svelte-m5zqpe">Hire Simon</a></div></section> <section class="more svelte-m5zqpe"><h2 class="svelte-m5zqpe">As a UX &amp; Graphic Designer...</h2> <div class="cols-2"> <div><p class="svelte-m5zqpe">I have designed Websites, Housestyles, Typefaces, Advertising campaigns and Print publications for them.</p></div></div> <div class="cta"><a href="/work" class="button svelte-m5zqpe">Learn More</a> <a href="/work" class="button button--primary svelte-m5zqpe">Hire Simon</a></div></section> <section class="more svelte-m5zqpe"><h2 class="svelte-m5zqpe">I create products that help great companies reach their audiences. Need help?</h2> <div class="cta"><a href="/work" class="button button--xl svelte-m5zqpe">Reach out!</a></div></section></article> ${validate_component(HomeCanvas, "HomeCanvas").$$render($$result, { textsToCanvas: canvasElems }, {}, {})}`;
return `${`<div class="loader svelte-vkb8yx" data-svelte-h="svelte-11wygpg"><div class="lds-circle svelte-vkb8yx"><div class="svelte-vkb8yx"></div></div> <p class="svelte-vkb8yx">Loading...</p></div>`} <article class="scroller svelte-vkb8yx" data-svelte-h="svelte-1oqwt97"><section class="splash svelte-vkb8yx"><h1 class="svelte-vkb8yx">Simon Flöter creates products that stand out.</h1></section> <section class="intro svelte-vkb8yx"><h2 class="svelte-vkb8yx">As a Creative Web Developer ...</h2> <div class="cols-2"><div><p class="svelte-vkb8yx">I specialise in delivering beautifully crafted bespoke websites.</p> </div></div> <div class="cta"><a href="/work" class="button svelte-vkb8yx">Learn More</a> <a href="/work" class="button button--primary svelte-vkb8yx">Hire Simon</a></div></section> <section class="more svelte-vkb8yx"><h2 class="svelte-vkb8yx">As a UX &amp; Graphic Designer...</h2> <div class="cols-2"> <div><p class="svelte-vkb8yx">I have designed Websites, Housestyles, Typefaces, Advertising campaigns and Print publications for them.</p></div></div> <div class="cta"><a href="/work" class="button svelte-vkb8yx">Learn More</a> <a href="/work" class="button button--primary svelte-vkb8yx">Hire Simon</a></div></section> <section class="more svelte-vkb8yx"><h2 class="svelte-vkb8yx">I create products that help great companies reach their audiences. Need help?</h2> <div class="cta"><a href="/work" class="button button--xl svelte-vkb8yx">Reach out!</a></div></section></article> ${validate_component(HomeCanvas, "HomeCanvas").$$render($$result, { textsToCanvas: canvasElems }, {}, {})}`;
});
export {
Page as default

2
.netlify/server/entries/pages/blog/_page.svelte.js
View file

@ -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;

2
.netlify/server/entries/pages/test/_page.svelte.js
View file

@ -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",

6
.netlify/server/entries/pages/work/_page.svelte.js
View file

@ -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 `<canvas class="svelte-1819g2x"${add_attribute("this", canvas, 0)}></canvas>`;
});
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"
},
{},

6
.netlify/server/entries/pages/work/_slug_/_page.svelte.js
View file

@ -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 `<div class="heromask svelte-1vxlfgy">${validate_component(CldImage, "CldImage").$$render(
return `<div class="heromask svelte-lxhlir">${validate_component(CldImage, "CldImage").$$render(
$$result,
{
src: data.header_bg_image,
@ -27,7 +27,7 @@ const Page = create_ssr_component(($$result, $$props, $$bindings, slots) => {
},
{},
{}
)}</div> <div class="subnav svelte-1vxlfgy" data-svelte-h="svelte-ywmcpa"><a href="/work" class="subnav-item">← Back</a></div> <article class="work svelte-1vxlfgy">${``} </article>`;
)}</div> <div class="subnav svelte-lxhlir" data-svelte-h="svelte-ywmcpa"><a href="/work" class="subnav-item">← Back</a></div> <article class="work svelte-lxhlir">${``} </article>`;
});
export {
Page as default

2
.netlify/server/manifest-full.js
View file

@ -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')),

2
.netlify/server/manifest.js
View file

@ -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')),

4
.netlify/server/nodes/0.js
View file

@ -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 = [];

2
.netlify/server/nodes/1.js
View file

@ -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 = [];

4
.netlify/server/nodes/2.js
View file

@ -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 = [];

2
.netlify/server/nodes/3.js
View file

@ -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 = [];

2
.netlify/server/nodes/4.js
View file

@ -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 = [];

2
.netlify/server/nodes/5.js
View file

@ -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 = [];

2
.netlify/server/nodes/6.js
View file

@ -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 = [];

4
.netlify/server/nodes/7.js
View file

@ -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 = [];

14
package-lock.json generated
View file

@ -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",

1
package.json
View file

@ -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",

9
src/lib/utils/createCanvasImg.ts
View file

@ -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;
}

8
src/lib/utils/createCanvasText.ts
View file

@ -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;
}

1
src/lib/utils/stores.ts
View file

@ -1,3 +1,4 @@
import { writable } from 'svelte/store';
export const workbulge = writable(0.25);
export const loading = writable(false);

22
src/routes/+layout.svelte
View file

@ -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;
</script>
<Header />
{#key data.pathname}
<div
class="content"
>
{#if $navigating}
<div class="loader">Loading {JSON.stringify($navigating.to?.route.id)}</div>
{/if}
<slot />
</div>
{/key}
<style lang="scss">
.loader {
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;
}
</style>

6
src/routes/+layout.ts
View file

@ -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
}

54
src/routes/+page.svelte
View file

@ -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<HTMLElement>;
let mounted = false;
onMount( () => {
disableScrollHandling();
mounted = true;
gsap.registerPlugin( ScrollTrigger, SplitText );
const sections = document.querySelectorAll('section');
@ -57,6 +59,12 @@
});
</script>
{#if !mounted}
<div class="loader">
<div class="lds-circle"><div></div></div>
<p>Loading...</p>
</div>
{/if}
<article class="scroller">
<section class="splash">
<h1>Simon Flöter creates products that stand out.</h1>
@ -101,8 +109,46 @@
</section>
</article>
<HomeCanvas textsToCanvas={canvasElems}/>
<style lang="scss">
.loader {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
& p {
font-size: 1.25em;
}
}
.lds-circle {
display: inline-block;
transform: translateZ(1px);
}
.lds-circle > div {
display: inline-block;
width: 64px;
height: 64px;
margin: 8px;
border-radius: 50%;
background: var(--color-text);
animation: lds-circle 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
@keyframes 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 {
font-size: clamp(32px, 4.5vw, 4.5vw);
}
@ -133,7 +179,7 @@
letter-spacing: -0.025em;
font-weight: 400;
font-style: normal;
opacity: 0;
visibility: hidden;
margin: 0;
-webkit-touch-callout: none; /* Safari */
-webkit-user-select: none; /* Chrome */

1
src/routes/work/+page.svelte
View file

@ -42,7 +42,6 @@
width="2100"
height="1400"
objectFit="fill"
placeholder="blur"
loading= {i < 10 ? "eager" : "lazy"}
/>
<h2>{work.meta.title}</h2>

68
src/routes/work/[slug]/+page.svelte
View file

@ -13,7 +13,7 @@
ScrollTrigger.getAll().forEach(t => t.kill());
// gsap.to('.heromask img', { duration: .6, x: "-10%", ease: "cubic.inOut" })
gsap.to('.heromask, .coverclone', { duration: .6, x: "-10%", ease: "cubic.inOut" })
gsap.to('.work', {
xPercent: -100,
@ -25,49 +25,53 @@
let heroheight = document.querySelector('.heromask')?.getBoundingClientRect().height || 100;
gsap.to('.heromask', {
clipPath: "polygon(0 0, 50% 0, 25% 100%, 0% 100%)",
clipPath: "polygon(0 0, 60% 0, 35% 100%, 0% 100%)",
duration: .6,
ease: "cubic.inOut",
onStart: () => {
setTimeout(() => {
document.querySelector('.coverclone')?.remove();
}, 100);
},
onComplete: () => {
gsap.fromTo('.heromask', {
clipPath: "polygon(0 0, 50% 0, 25% 100%, 0% 100%)",
},{
clipPath: "polygon(0 0, 30% 0, 25% 100%, 0% 100%)",
duration: .6,
ease: "none",
gsap.to('.heromask', {
ease: "power1.inOut",
clipPath: "polygon(0 0, 50% 0, 50% 100%, 0% 100%)",
scrollTrigger: {
trigger: '.work',
start: '0px 0px',
end: `0px -${heroheight * 0.3}px`,
scrub: true,
start: '0% top',
end: `100px top`,
scrub: true
}
})
}
})
}
function animForMobile() {
ScrollTrigger.getAll().forEach(t => t.kill());
gsap.to('.heromask img', { duration: .6, x: 0, ease: "cubic.inOut" })
gsap.to('.heromask, .coverclone', { duration: .6, y: -20, ease: "cubic.inOut" })
gsap.to('.work', {
opacity: 0,
y: 100,
duration: .66,
ease: "cubic.inOut",
delay: .2
opacity: 1,
yPercent: -100,
duration: .4,
ease: "expo.out",
delay: .2,
})
gsap.to('.heromask', {
clipPath: "polygon(0 0, 100% 0, 100% 75%, 0% 100%)",
duration: .6,
ease: "cubic.inOut",
onStart: () => {
document.querySelector('.coverclone')?.remove();
},
onComplete: () => {
gsap.to('.heromask', {
ease: "power1.out",
scrollTrigger: {
trigger: '.work',
markers: false,
start: '0px -10px',
end: `0px -20px`,
scrub: false,
@ -102,6 +106,7 @@
visible = true;
document.querySelector('.heromask img')?.addEventListener('load', () => {
animForSize();
let portrait = window.matchMedia("(orientation: portrait)");
@ -110,6 +115,7 @@
animForSize();
})
})
})
</script>
<div class="heromask">
@ -143,13 +149,11 @@
width: 100vw;
min-height: 100svh;
overflow: hidden;
padding-bottom: 60px;
background-color: var(--color-bg);
position: relative;
top: 100svh;
box-sizing: border-box;
// background-color: var(--color-bg);
transform: translateY(100%);
@media screen and (min-width: 768px) {
top: 0;
left: 100vw;
transform: translateX(100%);
}
}
.subnav {
@ -158,6 +162,10 @@
right: 0;
z-index: 4;
padding: var(--spacing-outer);
& a {
text-decoration: none;
}
}
.heromask {
position: fixed;
@ -181,19 +189,21 @@
}
.work-content {
padding: 0 var(--spacing-outer);
padding-top: calc(100vw / var(--aspect-ratio-heroes) + 1.5em);
padding-top: calc(66.6vw + 1em);
position: relative;
z-index: 1;
margin-top: 0;
color: var(--color-text);
& :last-child {
margin-bottom: 100px;
}
@media screen and (min-width: 768px) {
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);
}
}
.work-content-text {

9
src/routes/work/workUtils.ts
View file

@ -60,6 +60,7 @@ export function workClickHandler(e:Event){
targetImg.parentElement?.insertBefore(clone, targetImg);
targetImg.style.position = 'fixed';
const coverclone = targetImg.cloneNode(true) as HTMLElement;
coverclone.classList.add('coverclone');
coverclone.style.zIndex = '-1';
coverclone.style.visibility = 'visible';
coverclone.style.opacity = '0';
@ -92,13 +93,7 @@ export function workClickHandler(e:Event){
width: window.innerWidth,
height: window.innerWidth / targetImgAspectRatio,
ease: 'circ.inOut',
delay: 0.3,
onComplete: () => {
setTimeout(() => {
coverclone.remove();
}, 300);
}
delay: 0.3
})
gsap.to(bulge, {
duration: .3,