diff --git a/.gitignore b/.gitignore index 6635cf5..cf92117 100644 --- a/.gitignore +++ b/.gitignore @@ -8,3 +8,6 @@ node_modules !.env.example vite.config.js.timestamp-* vite.config.ts.timestamp-* + +# Local Netlify folder +.netlify diff --git a/.netlify/functions-internal/sveltekit-render.mjs b/.netlify/functions-internal/sveltekit-render.mjs index e8ae3f4..5a9d48b 100644 --- a/.netlify/functions-internal/sveltekit-render.mjs +++ b/.netlify/functions-internal/sveltekit-render.mjs @@ -9,10 +9,10 @@ function __memo(fn) { return { appDir: "_app", appPath: "_app", - assets: new Set([".DS_Store","bg.jpeg","bg.jpg","bg.png","cursor.png","cursor.svg","displacementmap.jpg","displacementmap.png","favicon.png","pointer.png","pointer.svg","video.mp4","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: {".jpeg":"image/jpeg",".jpg":"image/jpeg",".png":"image/png",".svg":"image/svg+xml",".mp4":"video/mp4",".webm":"video/webm"}, + 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.24653ae3.js","app":"_app/immutable/entry/app.5edbf885.js","imports":["_app/immutable/entry/start.24653ae3.js","_app/immutable/chunks/scheduler.880d5f2a.js","_app/immutable/chunks/singletons.e5eb807e.js","_app/immutable/entry/app.5edbf885.js","_app/immutable/chunks/scheduler.880d5f2a.js","_app/immutable/chunks/index.f47f4cf9.js"],"stylesheets":[],"fonts":[]}, + client: {"start":"_app/immutable/entry/start.e3c93b33.js","app":"_app/immutable/entry/app.590275c4.js","imports":["_app/immutable/entry/start.e3c93b33.js","_app/immutable/chunks/scheduler.cd8ec38c.js","_app/immutable/chunks/singletons.6f10bc10.js","_app/immutable/entry/app.590275c4.js","_app/immutable/chunks/scheduler.cd8ec38c.js","_app/immutable/chunks/index.9e7d825d.js"],"stylesheets":[],"fonts":[]}, nodes: [ __memo(() => import('../server/nodes/0.js')), __memo(() => import('../server/nodes/1.js')), diff --git a/.netlify/server/_app/immutable/assets/_page.123fa86f.css b/.netlify/server/_app/immutable/assets/_page.123fa86f.css deleted file mode 100644 index df49550..0000000 --- a/.netlify/server/_app/immutable/assets/_page.123fa86f.css +++ /dev/null @@ -1 +0,0 @@ -canvas.svelte-1819g2x{position:fixed;top:0;left:0;z-index:-1}h1.svelte-aejjwo.svelte-aejjwo{font-size:16vw;font-style:italic;margin:0 0 .5em;letter-spacing:-.04em;text-align:center;position:fixed;top:0;width:100%;visibility:hidden;transition:all .3s cubic-bezier(.175,.885,.32,1.275)}@media screen and (min-width: 768px){h1.svelte-aejjwo.svelte-aejjwo{font-size:7vw}}h1.svelte-aejjwo span.svelte-aejjwo{display:inline-block;padding:0 .25em}h2.svelte-aejjwo.svelte-aejjwo{line-height:1.1;letter-spacing:-.025em;font-size:2.5vw;opacity:0;position:absolute;left:.5em;bottom:.5em;transform:scale(.8) translateY(100%);padding:.1em .4em .2em;text-align:center;transform-origin:center center;width:auto;margin:0;background-color:var(--color-bg);color:var(--color-text);transition:all .3s cubic-bezier(.175,.885,.32,1.275)}.works.svelte-aejjwo .work:not(.active):hover h2.svelte-aejjwo{opacity:1;transform:scale(1) translateY(0)}.works.svelte-aejjwo.svelte-aejjwo{padding:15vw .5em .5em;display:flex;gap:.25em;flex-wrap:wrap}@media screen and (min-width: 768px){.works.svelte-aejjwo.svelte-aejjwo{gap:.25em;padding:8.5vw .5em .5em;width:100%;max-width:1200px;margin:0 auto;padding-bottom:20svh}}.work.svelte-aejjwo.svelte-aejjwo{flex:0 0 calc(50% - .125em);display:block;position:relative;padding:0;transition:all .3s cubic-bezier(.175,.885,.32,1.275);text-decoration:none;overflow:hidden}@media screen and (min-width: 768px){.work.svelte-aejjwo.svelte-aejjwo{flex:0 0 calc(33% - .125em)}}.workhero.svelte-aejjwo.svelte-aejjwo{width:100%;height:auto;aspect-ratio:var(--aspect-ratio-heroes);object-fit:fill;visibility:hidden;display:block} diff --git a/.netlify/server/_app/immutable/assets/_page.a46f57c1.css b/.netlify/server/_app/immutable/assets/_page.a46f57c1.css deleted file mode 100644 index 14b2eb2..0000000 --- a/.netlify/server/_app/immutable/assets/_page.a46f57c1.css +++ /dev/null @@ -1 +0,0 @@ -article.svelte-1nwbod6.svelte-1nwbod6{width:100vw;overflow:hidden;padding-bottom:60px}.subnav.svelte-1nwbod6.svelte-1nwbod6{position:fixed;top:0;right:0;z-index:4;padding:var(--spacing-outer)}.heromask.svelte-1nwbod6.svelte-1nwbod6{position:fixed;top:0;left:0;width:100%;z-index:2;height:auto;aspect-ratio:var(--aspect-ratio-heroes);clip-path:polygon(0 0,100% 0,100% 100%,0% 100%)}@media screen and (min-width: 768px){.heromask.svelte-1nwbod6.svelte-1nwbod6{position:fixed}}.hero.svelte-1nwbod6.svelte-1nwbod6{width:100%;height:100%;object-fit:fill;z-index:0;display:block;position:relative;perspective:400px}.work-content.svelte-1nwbod6.svelte-1nwbod6{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-1nwbod6.svelte-1nwbod6{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-1nwbod6.svelte-1nwbod6{border-top:1px solid var(--color-text)}}h1.svelte-1nwbod6.svelte-1nwbod6{position:relative;z-index:1;margin:0}@media screen and (min-width: 768px){h1.svelte-1nwbod6.svelte-1nwbod6{padding:0 0 1em}}h1.svelte-1nwbod6 .name.svelte-1nwbod6{display:none}h1.svelte-1nwbod6 .svg-logo.svelte-1nwbod6 svg{width:auto;height:auto;max-width:250px;max-height:80px;margin-bottom:1em}@media screen and (min-width: 768px){h1.svelte-1nwbod6 .svg-logo.svelte-1nwbod6 svg{max-width:400px;max-height:200px}}.header-nav{transition:all .3s cubic-bezier(.075,.82,.165,1)}.work .header-nav{transform:translateY(100%)} diff --git a/.netlify/server/chunks/adidas.js b/.netlify/server/chunks/adidas.js index af085bb..977a69e 100644 --- a/.netlify/server/chunks/adidas.js +++ b/.netlify/server/chunks/adidas.js @@ -1,7 +1,7 @@ import { c as create_ssr_component } from "./ssr.js"; const metadata = { "title": "Adidas", - "header_bg_image": "/work/adidas/adidas_hero.jpg", + "header_bg_image": "adidas_hero_ceurd8", "order": 12, "description": "Adidas, as you might have heard, is an international sports and lifestyle clothing brand. I worked on several digital campaigns as a graphic designer and illustrator.", "svg": '' diff --git a/.netlify/server/chunks/formo.js b/.netlify/server/chunks/formo.js index 0f9c63b..01f1861 100644 --- a/.netlify/server/chunks/formo.js +++ b/.netlify/server/chunks/formo.js @@ -1,7 +1,7 @@ import { c as create_ssr_component } from "./ssr.js"; const metadata = { "title": "Formo.bio", - "header_bg_image": "/work/formo/formo_hero.png", + "header_bg_image": "formo_hero_xgb6xo", "video": "/work/formo/formo-rec.webm", "order": 12, "description": "Formo, as you might have heard, is an international sports and lifestyle clothing brand. I worked on several digital campaigns as a graphic designer and illustrator.", diff --git a/.netlify/server/chunks/internal.js b/.netlify/server/chunks/internal.js index 2585f94..ca3647e 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: "185vdsh" + version_hash: "4jgq38" }; function get_hooks() { return {}; diff --git a/.netlify/server/chunks/jpl.js b/.netlify/server/chunks/jpl.js index 9a37e85..56fa762 100644 --- a/.netlify/server/chunks/jpl.js +++ b/.netlify/server/chunks/jpl.js @@ -1,7 +1,7 @@ import { c as create_ssr_component } from "./ssr.js"; const metadata = { "title": "JustPeace Labs", - "header_bg_image": "/work/jpl/jpl_hero.jpg", + "header_bg_image": "jpl_hero_eukxaw", "description": "JustPeace Labs is a non-profit organization that works with local communities to build peace and prevent violence.", "order": 11, "svg": '' diff --git a/.netlify/server/chunks/ssr.js b/.netlify/server/chunks/ssr.js index c91f840..77110cc 100644 --- a/.netlify/server/chunks/ssr.js +++ b/.netlify/server/chunks/ssr.js @@ -44,6 +44,96 @@ function getContext(key) { function ensure_array_like(array_like_or_iterator) { return array_like_or_iterator?.length !== void 0 ? array_like_or_iterator : Array.from(array_like_or_iterator); } +const _boolean_attributes = ( + /** @type {const} */ + [ + "allowfullscreen", + "allowpaymentrequest", + "async", + "autofocus", + "autoplay", + "checked", + "controls", + "default", + "defer", + "disabled", + "formnovalidate", + "hidden", + "inert", + "ismap", + "loop", + "multiple", + "muted", + "nomodule", + "novalidate", + "open", + "playsinline", + "readonly", + "required", + "reversed", + "selected" + ] +); +const boolean_attributes = /* @__PURE__ */ new Set([..._boolean_attributes]); +const invalid_attribute_name_character = /[\s'">/=\u{FDD0}-\u{FDEF}\u{FFFE}\u{FFFF}\u{1FFFE}\u{1FFFF}\u{2FFFE}\u{2FFFF}\u{3FFFE}\u{3FFFF}\u{4FFFE}\u{4FFFF}\u{5FFFE}\u{5FFFF}\u{6FFFE}\u{6FFFF}\u{7FFFE}\u{7FFFF}\u{8FFFE}\u{8FFFF}\u{9FFFE}\u{9FFFF}\u{AFFFE}\u{AFFFF}\u{BFFFE}\u{BFFFF}\u{CFFFE}\u{CFFFF}\u{DFFFE}\u{DFFFF}\u{EFFFE}\u{EFFFF}\u{FFFFE}\u{FFFFF}\u{10FFFE}\u{10FFFF}]/u; +function spread(args, attrs_to_add) { + const attributes = Object.assign({}, ...args); + if (attrs_to_add) { + const classes_to_add = attrs_to_add.classes; + const styles_to_add = attrs_to_add.styles; + if (classes_to_add) { + if (attributes.class == null) { + attributes.class = classes_to_add; + } else { + attributes.class += " " + classes_to_add; + } + } + if (styles_to_add) { + if (attributes.style == null) { + attributes.style = style_object_to_string(styles_to_add); + } else { + attributes.style = style_object_to_string( + merge_ssr_styles(attributes.style, styles_to_add) + ); + } + } + } + let str = ""; + Object.keys(attributes).forEach((name) => { + if (invalid_attribute_name_character.test(name)) + return; + const value = attributes[name]; + if (value === true) + str += " " + name; + else if (boolean_attributes.has(name.toLowerCase())) { + if (value) + str += " " + name; + } else if (value != null) { + str += ` ${name}="${value}"`; + } + }); + return str; +} +function merge_ssr_styles(style_attribute, style_directive) { + const style_object = {}; + for (const individual_style of style_attribute.split(";")) { + const colon_index = individual_style.indexOf(":"); + const name = individual_style.slice(0, colon_index).trim(); + const value = individual_style.slice(colon_index + 1).trim(); + if (!name) + continue; + style_object[name] = value; + } + for (const name in style_directive) { + const value = style_directive[name]; + if (value) { + style_object[name] = value; + } else { + delete style_object[name]; + } + } + return style_object; +} const ATTR_REGEX = /[&"]/g; const CONTENT_REGEX = /[&<]/g; function escape(value, is_attr = false) { @@ -60,6 +150,17 @@ function escape(value, is_attr = false) { } return escaped + str.substring(last); } +function escape_attribute_value(value) { + const should_escape = typeof value === "string" || value && typeof value === "object"; + return should_escape ? escape(value, true) : value; +} +function escape_object(obj) { + const result = {}; + for (const key in obj) { + result[key] = escape_attribute_value(obj[key]); + } + return result; +} function each(items, fn) { items = ensure_array_like(items); let str = ""; @@ -124,6 +225,9 @@ function add_attribute(name, value, boolean) { const assignment = boolean && value === true ? "" : `="${escape(value, true)}"`; return ` ${name}${assignment}`; } +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, @@ -132,6 +236,9 @@ export { escape as e, safe_not_equal as f, getContext as g, + spread as h, + escape_attribute_value as i, + escape_object as j, missing_component as m, noop as n, onDestroy as o, diff --git a/.netlify/server/entries/pages/test/_page.svelte.js b/.netlify/server/entries/pages/test/_page.svelte.js index ad122ff..2cb49aa 100644 --- a/.netlify/server/entries/pages/test/_page.svelte.js +++ b/.netlify/server/entries/pages/test/_page.svelte.js @@ -1,10 +1,12 @@ import { c as create_ssr_component, b 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.07fbd4ee.png"; +const myImg = [ + "/_app/immutable/assets/formo_hero.10e20058.avif", + "/_app/immutable/assets/formo_hero.eb33d576.webp", + "/_app/immutable/assets/formo_hero.07fbd4ee.png" +]; const Page = create_ssr_component(($$result, $$props, $$bindings, slots) => { - console.log(myImgSrcSetWebp); - console.log(myImg); - return `

hakc

`; + return `

hakc

`; }); export { Page as default diff --git a/.netlify/server/entries/pages/work/_page.server.ts.js b/.netlify/server/entries/pages/work/_page.server.ts.js index 5982bd0..e858b3c 100644 --- a/.netlify/server/entries/pages/work/_page.server.ts.js +++ b/.netlify/server/entries/pages/work/_page.server.ts.js @@ -7,22 +7,10 @@ const fetchMarkdownPosts = async () => { const data = await resolver(); const postData = data; const content = postData.default.render(); - const srcJson = await import( - /* @vite-ignore */ - "./assets" + postData.metadata.header_bg_image + "?w=336&format=webp" - ); - const src = JSON.stringify(srcJson.default).replaceAll('"', ""); - const srcsetJson = await import( - /* @vite-ignore */ - "./assets" + postData.metadata.header_bg_image + "?w=1344;672;336&format=webp&as=srcset" - ); - const srcset = JSON.stringify(srcsetJson.default).replaceAll('"', ""); return { meta: postData.metadata, path: postPath, - Content: content.html, - src, - srcset + Content: content.html }; }) ); @@ -34,6 +22,7 @@ async function load() { console.error("No posts found"); return { posts + // images }; } export { diff --git a/.netlify/server/entries/pages/work/_page.svelte.js b/.netlify/server/entries/pages/work/_page.svelte.js index 2ae8e58..43dd5de 100644 --- a/.netlify/server/entries/pages/work/_page.svelte.js +++ b/.netlify/server/entries/pages/work/_page.svelte.js @@ -2,6 +2,7 @@ import { c as create_ssr_component, o as onDestroy, b as add_attribute, d as eac import "pixi.js"; import "pixi-filters"; import { w as writable } from "../../../chunks/index2.js"; +import { C as CldImage } from "../../../chunks/CldImage.js"; const WorkCanvas_svelte_svelte_type_style_lang = ""; const css$1 = { code: "canvas.svelte-1819g2x{position:fixed;top:0;left:0;z-index:-1}", @@ -28,7 +29,7 @@ workbulge.subscribe((value) => { }); const _page_svelte_svelte_type_style_lang = ""; const css = { - code: "h1.svelte-aejjwo.svelte-aejjwo{font-size:16vw;font-style:italic;margin:0 0 0.5em 0;letter-spacing:-0.04em;text-align:center;position:fixed;top:0;width:100%;visibility:hidden;transition:all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)}@media screen and (min-width: 768px){h1.svelte-aejjwo.svelte-aejjwo{font-size:7vw}}h1.svelte-aejjwo span.svelte-aejjwo{display:inline-block;padding:0 0.25em}h2.svelte-aejjwo.svelte-aejjwo{line-height:1.1;letter-spacing:-0.025em;font-size:2.5vw;opacity:0;position:absolute;left:0.5em;bottom:0.5em;transform:scale(0.8) translateY(100%);margin:0;padding:0.1em 0.4em 0.2em 0.4em;text-align:center;transform-origin:center center;width:auto;margin:0;background-color:var(--color-bg);color:var(--color-text);transition:all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)}.works.svelte-aejjwo .work:not(.active):hover h2.svelte-aejjwo{opacity:1;transform:scale(1) translateY(0)}.works.svelte-aejjwo.svelte-aejjwo{padding:15vw 0.5em 0.5em 0.5em;display:flex;gap:0.25em;flex-wrap:wrap}@media screen and (min-width: 768px){.works.svelte-aejjwo.svelte-aejjwo{gap:0.25em;padding:8.5vw 0.5em 0.5em 0.5em;width:100%;max-width:1200px;margin:0 auto;padding-bottom:20svh}}.work.svelte-aejjwo.svelte-aejjwo{flex:0 0 calc(50% - 0.125em);display:block;position:relative;padding:0;transition:all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);text-decoration:none;overflow:hidden}@media screen and (min-width: 768px){.work.svelte-aejjwo.svelte-aejjwo{flex:0 0 calc(33% - 0.125em)}}.workhero.svelte-aejjwo.svelte-aejjwo{width:100%;height:auto;aspect-ratio:var(--aspect-ratio-heroes);object-fit:fill;visibility:hidden;display:block}", + code: "h1.svelte-1wmqw8p.svelte-1wmqw8p{font-size:16vw;font-style:italic;margin:0 0 0.5em 0;letter-spacing:-0.04em;text-align:center;position:fixed;top:0;width:100%;visibility:hidden;transition:all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)}@media screen and (min-width: 768px){h1.svelte-1wmqw8p.svelte-1wmqw8p{font-size:7vw}}h1.svelte-1wmqw8p span.svelte-1wmqw8p{display:inline-block;padding:0 0.25em}h2.svelte-1wmqw8p.svelte-1wmqw8p{line-height:1.1;letter-spacing:-0.025em;font-size:2.5vw;opacity:0;position:absolute;left:0.5em;bottom:0.5em;transform:scale(0.8) translateY(100%);margin:0;padding:0.1em 0.4em 0.2em 0.4em;text-align:center;transform-origin:center center;width:auto;margin:0;background-color:var(--color-bg);color:var(--color-text);transition:all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)}.works.svelte-1wmqw8p .work:not(.active):hover h2.svelte-1wmqw8p{opacity:1;transform:scale(1) translateY(0)}.works.svelte-1wmqw8p.svelte-1wmqw8p{padding:15vw 0.5em 0.5em 0.5em;display:flex;gap:0.25em;flex-wrap:wrap}@media screen and (min-width: 768px){.works.svelte-1wmqw8p.svelte-1wmqw8p{gap:0.25em;padding:8.5vw 0.5em 0.5em 0.5em;width:100%;max-width:1200px;margin:0 auto;padding-bottom:20svh}}.work.svelte-1wmqw8p.svelte-1wmqw8p{flex:0 0 calc(50% - 0.125em);display:block;position:relative;padding:0;transition:all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);text-decoration:none;overflow:hidden}@media screen and (min-width: 768px){.work.svelte-1wmqw8p.svelte-1wmqw8p{flex:0 0 calc(33% - 0.125em)}}.work img{width:100%;height:auto;aspect-ratio:var(--aspect-ratio-heroes);object-fit:fill;visibility:hidden;display:block}", map: null }; const Page = create_ssr_component(($$result, $$props, $$bindings, slots) => { @@ -42,12 +43,20 @@ 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 `

Casestudies

${each(data.posts, (work) => { - return `

${escape(work.meta.title)}

`; - })} ${each(data.posts, (work) => { - return `

${escape(work.meta.title)}

`; - })} ${each(data.posts, (work) => { - return `

${escape(work.meta.title)}

`; + return `

Casestudies

${each(data.posts, (work, i) => { + return `${validate_component(CldImage, "CldImage").$$render( + $$result, + { + src: work.meta.header_bg_image, + sizes: "(min-width: 768px) 20vw, 50vw", + alt: work.meta.title, + width: "2100", + height: "1400", + loading: i < 9 ? "eager" : "lazy" + }, + {}, + {} + )}

${escape(work.meta.title)}

`; })}
${validate_component(WorkCanvas, "WorkCanvas").$$render( $$result, { diff --git a/.netlify/server/entries/pages/work/_slug_/_page.server.ts.js b/.netlify/server/entries/pages/work/_slug_/_page.server.ts.js index 6e6df5f..03d5b48 100644 --- a/.netlify/server/entries/pages/work/_slug_/_page.server.ts.js +++ b/.netlify/server/entries/pages/work/_slug_/_page.server.ts.js @@ -10,16 +10,6 @@ const __variableDynamicImportRuntimeHelper = (glob, path) => { async function load({ params }) { try { const post = await __variableDynamicImportRuntimeHelper(/* @__PURE__ */ Object.assign({ "../md/adidas.md": () => import("../../../../chunks/adidas.js"), "../md/formo.md": () => import("../../../../chunks/formo.js"), "../md/jpl.md": () => import("../../../../chunks/jpl.js") }), `../md/${params.slug}.md`); - const srcJson = await import( - /* @vite-ignore */ - `../../../lib/assets${post.metadata.header_bg_image}?w=336&format=webp` - ); - const src = JSON.stringify(srcJson.default).replaceAll('"', ""); - const srcsetJson = await import( - /* @vite-ignore */ - `../../../lib/assets${post.metadata.header_bg_image}?w=1344;672;336&format=webp&as=srcset` - ); - const srcSet = JSON.stringify(srcsetJson.default).replaceAll('"', ""); const { title, date, header_bg_image, svg, video } = post.metadata; const Content = post.default.render(); return { @@ -28,9 +18,9 @@ async function load({ params }) { header_bg_image, svg, video, - Content, - src, - srcSet + Content + // src, + // srcSet }; } catch (error) { console.error(error); diff --git a/.netlify/server/entries/pages/work/_slug_/_page.svelte.js b/.netlify/server/entries/pages/work/_slug_/_page.svelte.js index 8e2efa8..60e2a25 100644 --- a/.netlify/server/entries/pages/work/_slug_/_page.svelte.js +++ b/.netlify/server/entries/pages/work/_slug_/_page.svelte.js @@ -1,21 +1,34 @@ -import { c as create_ssr_component, o as onDestroy, b as add_attribute } from "../../../../chunks/ssr.js"; +import { c as create_ssr_component, o as onDestroy, v as validate_component } from "../../../../chunks/ssr.js"; import { gsap } from "gsap"; 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: "article.svelte-1nwbod6.svelte-1nwbod6{width:100vw;overflow:hidden;padding-bottom:60px}.subnav.svelte-1nwbod6.svelte-1nwbod6{position:fixed;top:0;right:0;z-index:4;padding:var(--spacing-outer)}.heromask.svelte-1nwbod6.svelte-1nwbod6{position:fixed;top:0;left:0;width:100%;z-index:2;height:auto;aspect-ratio:var(--aspect-ratio-heroes);clip-path:polygon(0 0, 100% 0, 100% 100%, 0% 100%)}@media screen and (min-width: 768px){.heromask.svelte-1nwbod6.svelte-1nwbod6{position:fixed}}.hero.svelte-1nwbod6.svelte-1nwbod6{width:100%;height:100%;object-fit:fill;z-index:0;display:block;position:relative;perspective:400px}.work-content.svelte-1nwbod6.svelte-1nwbod6{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-1nwbod6.svelte-1nwbod6{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-1nwbod6.svelte-1nwbod6{border-top:1px solid var(--color-text)}}h1.svelte-1nwbod6.svelte-1nwbod6{position:relative;z-index:1;margin:0}@media screen and (min-width: 768px){h1.svelte-1nwbod6.svelte-1nwbod6{padding:0 0 1em 0}}h1.svelte-1nwbod6 .name.svelte-1nwbod6{display:none}h1.svelte-1nwbod6 .svg-logo.svelte-1nwbod6 svg{width:auto;height:auto;max-width:250px;max-height:80px;margin-bottom:1em}@media screen and (min-width: 768px){h1.svelte-1nwbod6 .svg-logo.svelte-1nwbod6 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: "article.svelte-nm1xy1.svelte-nm1xy1{width:100vw;overflow:hidden;padding-bottom:60px}.subnav.svelte-nm1xy1.svelte-nm1xy1{position:fixed;top:0;right:0;z-index:4;padding:var(--spacing-outer)}.heromask.svelte-nm1xy1.svelte-nm1xy1{position:fixed;top:0;left:0;width:100%;z-index:2;height:auto;aspect-ratio:var(--aspect-ratio-heroes);clip-path:polygon(0 0, 100% 0, 100% 100%, 0% 100%)}@media screen and (min-width: 768px){.heromask.svelte-nm1xy1.svelte-nm1xy1{position:fixed}}.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-nm1xy1.svelte-nm1xy1{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-nm1xy1.svelte-nm1xy1{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-nm1xy1.svelte-nm1xy1{border-top:1px solid var(--color-text)}}h1.svelte-nm1xy1.svelte-nm1xy1{position:relative;z-index:1;margin:0}@media screen and (min-width: 768px){h1.svelte-nm1xy1.svelte-nm1xy1{padding:0 0 1em 0}}h1.svelte-nm1xy1 .name.svelte-nm1xy1{display:none}h1.svelte-nm1xy1 .svg-logo.svelte-nm1xy1 svg{width:auto;height:auto;max-width:250px;max-height:80px;margin-bottom:1em}@media screen and (min-width: 768px){h1.svelte-nm1xy1 .svg-logo.svelte-nm1xy1 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) => { let { data } = $$props; gsap.registerPlugin(ScrollTrigger); onDestroy(() => { - document.body.classList.remove("work"); }); if ($$props.data === void 0 && $$bindings.data && data !== void 0) $$bindings.data(data); $$result.css.add(css); - return `
← Back
${``}
`; + return `
${validate_component(CldImage, "CldImage").$$render( + $$result, + { + src: data.header_bg_image, + alt: data.title, + sizes: "100vw", + width: 2100, + height: 1400, + loading: "eager", + objectFit: "fill" + }, + {}, + {} + )}
← Back
${``}
`; }); export { Page as default diff --git a/.netlify/server/manifest-full.js b/.netlify/server/manifest-full.js index c008bf8..fd87e8f 100644 --- a/.netlify/server/manifest-full.js +++ b/.netlify/server/manifest-full.js @@ -7,10 +7,10 @@ function __memo(fn) { return { appDir: "_app", appPath: "_app", - assets: new Set([".DS_Store","bg.jpeg","bg.jpg","bg.png","cursor.png","cursor.svg","displacementmap.jpg","displacementmap.png","favicon.png","pointer.png","pointer.svg","video.mp4","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: {".jpeg":"image/jpeg",".jpg":"image/jpeg",".png":"image/png",".svg":"image/svg+xml",".mp4":"video/mp4",".webm":"video/webm"}, + 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.24653ae3.js","app":"_app/immutable/entry/app.5edbf885.js","imports":["_app/immutable/entry/start.24653ae3.js","_app/immutable/chunks/scheduler.880d5f2a.js","_app/immutable/chunks/singletons.e5eb807e.js","_app/immutable/entry/app.5edbf885.js","_app/immutable/chunks/scheduler.880d5f2a.js","_app/immutable/chunks/index.f47f4cf9.js"],"stylesheets":[],"fonts":[]}, + client: {"start":"_app/immutable/entry/start.e3c93b33.js","app":"_app/immutable/entry/app.590275c4.js","imports":["_app/immutable/entry/start.e3c93b33.js","_app/immutable/chunks/scheduler.cd8ec38c.js","_app/immutable/chunks/singletons.6f10bc10.js","_app/immutable/entry/app.590275c4.js","_app/immutable/chunks/scheduler.cd8ec38c.js","_app/immutable/chunks/index.9e7d825d.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 c008bf8..fd87e8f 100644 --- a/.netlify/server/manifest.js +++ b/.netlify/server/manifest.js @@ -7,10 +7,10 @@ function __memo(fn) { return { appDir: "_app", appPath: "_app", - assets: new Set([".DS_Store","bg.jpeg","bg.jpg","bg.png","cursor.png","cursor.svg","displacementmap.jpg","displacementmap.png","favicon.png","pointer.png","pointer.svg","video.mp4","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: {".jpeg":"image/jpeg",".jpg":"image/jpeg",".png":"image/png",".svg":"image/svg+xml",".mp4":"video/mp4",".webm":"video/webm"}, + 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.24653ae3.js","app":"_app/immutable/entry/app.5edbf885.js","imports":["_app/immutable/entry/start.24653ae3.js","_app/immutable/chunks/scheduler.880d5f2a.js","_app/immutable/chunks/singletons.e5eb807e.js","_app/immutable/entry/app.5edbf885.js","_app/immutable/chunks/scheduler.880d5f2a.js","_app/immutable/chunks/index.f47f4cf9.js"],"stylesheets":[],"fonts":[]}, + client: {"start":"_app/immutable/entry/start.e3c93b33.js","app":"_app/immutable/entry/app.590275c4.js","imports":["_app/immutable/entry/start.e3c93b33.js","_app/immutable/chunks/scheduler.cd8ec38c.js","_app/immutable/chunks/singletons.6f10bc10.js","_app/immutable/entry/app.590275c4.js","_app/immutable/chunks/scheduler.cd8ec38c.js","_app/immutable/chunks/index.9e7d825d.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 0498f45..ef1f6d4 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.b1585435.js","_app/immutable/chunks/scheduler.880d5f2a.js","_app/immutable/chunks/index.f47f4cf9.js","_app/immutable/chunks/index.4db78ffb.js"]; +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 fonts = []; diff --git a/.netlify/server/nodes/1.js b/.netlify/server/nodes/1.js index 1a8e707..7a3de86 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.708df2c7.js","_app/immutable/chunks/scheduler.880d5f2a.js","_app/immutable/chunks/index.f47f4cf9.js","_app/immutable/chunks/singletons.e5eb807e.js"]; +export const imports = ["_app/immutable/nodes/1.8366a90d.js","_app/immutable/chunks/scheduler.cd8ec38c.js","_app/immutable/chunks/index.9e7d825d.js","_app/immutable/chunks/singletons.6f10bc10.js"]; export const stylesheets = []; export const fonts = []; diff --git a/.netlify/server/nodes/2.js b/.netlify/server/nodes/2.js index 6bb5003..ce0db2a 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.a824365c.js","_app/immutable/chunks/scheduler.880d5f2a.js","_app/immutable/chunks/index.f47f4cf9.js","_app/immutable/chunks/navigation.95305456.js","_app/immutable/chunks/ScrollTrigger.96597ec4.js","_app/immutable/chunks/singletons.e5eb807e.js","_app/immutable/chunks/index.4db78ffb.js"]; +export const imports = ["_app/immutable/nodes/2.108d664b.js","_app/immutable/chunks/scheduler.cd8ec38c.js","_app/immutable/chunks/index.9e7d825d.js","_app/immutable/chunks/navigation.31299d66.js","_app/immutable/chunks/ScrollTrigger.96597ec4.js","_app/immutable/chunks/singletons.6f10bc10.js","_app/immutable/chunks/index.4db78ffb.js"]; export const stylesheets = ["_app/immutable/assets/2.aabebfd8.css"]; export const fonts = []; diff --git a/.netlify/server/nodes/3.js b/.netlify/server/nodes/3.js index bcbf973..f3517f3 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.f6d21e24.js","_app/immutable/chunks/scheduler.880d5f2a.js","_app/immutable/chunks/index.f47f4cf9.js","_app/immutable/chunks/each.e59479a4.js"]; +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 stylesheets = []; export const fonts = []; diff --git a/.netlify/server/nodes/4.js b/.netlify/server/nodes/4.js index 83d9ab5..ae262f1 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.22335af8.js","_app/immutable/chunks/scheduler.880d5f2a.js","_app/immutable/chunks/index.f47f4cf9.js"]; +export const imports = ["_app/immutable/nodes/4.9ae234c4.js","_app/immutable/chunks/scheduler.cd8ec38c.js","_app/immutable/chunks/index.9e7d825d.js"]; export const stylesheets = []; export const fonts = []; diff --git a/.netlify/server/nodes/5.js b/.netlify/server/nodes/5.js index faec80f..a8b81fa 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.57413a02.js","_app/immutable/chunks/scheduler.880d5f2a.js","_app/immutable/chunks/index.f47f4cf9.js"]; +export const imports = ["_app/immutable/nodes/5.e9f1a99f.js","_app/immutable/chunks/scheduler.cd8ec38c.js","_app/immutable/chunks/index.9e7d825d.js"]; export const stylesheets = []; export const fonts = []; diff --git a/.netlify/server/nodes/6.js b/.netlify/server/nodes/6.js index 662dda8..4bcedd0 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.b81cd63b.js","_app/immutable/chunks/scheduler.880d5f2a.js","_app/immutable/chunks/index.f47f4cf9.js","_app/immutable/chunks/each.e59479a4.js","_app/immutable/chunks/navigation.95305456.js","_app/immutable/chunks/ScrollTrigger.96597ec4.js","_app/immutable/chunks/singletons.e5eb807e.js","_app/immutable/chunks/index.4db78ffb.js"]; -export const stylesheets = ["_app/immutable/assets/6.123fa86f.css"]; +export const imports = ["_app/immutable/nodes/6.92eeee30.js","_app/immutable/chunks/scheduler.cd8ec38c.js","_app/immutable/chunks/index.9e7d825d.js","_app/immutable/chunks/each.e59479a4.js","_app/immutable/chunks/navigation.31299d66.js","_app/immutable/chunks/ScrollTrigger.96597ec4.js","_app/immutable/chunks/singletons.6f10bc10.js","_app/immutable/chunks/index.4db78ffb.js","_app/immutable/chunks/CldImage.ebf46432.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 29477c0..315b4cf 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.9fe2c4e0.js","_app/immutable/chunks/scheduler.880d5f2a.js","_app/immutable/chunks/index.f47f4cf9.js","_app/immutable/chunks/index.4db78ffb.js","_app/immutable/chunks/ScrollTrigger.96597ec4.js"]; -export const stylesheets = ["_app/immutable/assets/7.a46f57c1.css"]; +export const imports = ["_app/immutable/nodes/7.ab267fa5.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.35c55333.css"]; export const fonts = []; diff --git a/netlify.toml b/netlify.toml new file mode 100644 index 0000000..234c61d --- /dev/null +++ b/netlify.toml @@ -0,0 +1,3 @@ +[build] +command = "npm run build" +publish = "build" \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 3969134..2f37ffa 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,11 +13,13 @@ "perlin-noise-2d": "^1.0.0", "pixi-filters": "^5.2.1", "pixi.js": "^7.2.4", - "superjson": "^1.13.1" + "superjson": "^1.13.1", + "svelte-cloudinary": "^1.1.0" }, "devDependencies": { "@sveltejs/adapter-auto": "^2.0.0", "@sveltejs/adapter-netlify": "^2.0.8", + "@sveltejs/adapter-node": "^1.3.1", "@sveltejs/kit": "^1.20.4", "@types/node": "^20.5.1", "@typescript-eslint/eslint-plugin": "^5.45.0", @@ -59,6 +61,36 @@ "node": ">=6.0.0" } }, + "node_modules/@cloudinary-util/url-loader": { + "version": "3.9.0", + "resolved": "https://registry.npmjs.org/@cloudinary-util/url-loader/-/url-loader-3.9.0.tgz", + "integrity": "sha512-DJiu+a3Mr2GEyjAo4Gy2KWX0YoXoP0CFp2jvw8+3gJj7wvmIb7mcjRk1yHSGIyJcolb0uR+tWGO6KVhStpreMg==", + "dependencies": { + "@cloudinary-util/util": "2.1.0", + "@cloudinary/url-gen": "^1.10.1" + } + }, + "node_modules/@cloudinary-util/util": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@cloudinary-util/util/-/util-2.1.0.tgz", + "integrity": "sha512-PGjVxyhhOP8IaD6uawXzfDnI8ArPqpiLfIXc8TEjhv3CGhDFBAM3dCT3xeAgg+92sQsx/AN74j+qckdWPfoO6w==" + }, + "node_modules/@cloudinary/transformation-builder-sdk": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/@cloudinary/transformation-builder-sdk/-/transformation-builder-sdk-1.5.1.tgz", + "integrity": "sha512-7pTKgyrX49T3Qk0+bE/RN7bijGVRPusDXjRHJyO5a7H6CnL1sZ/TvTMAKvXweFLTOpWzWFW6nS0Bah3kBvTb7w==", + "dependencies": { + "@cloudinary/url-gen": "^1.7.0" + } + }, + "node_modules/@cloudinary/url-gen": { + "version": "1.11.2", + "resolved": "https://registry.npmjs.org/@cloudinary/url-gen/-/url-gen-1.11.2.tgz", + "integrity": "sha512-9yL3BlThh3PfyRg/zS8cQVic3FdFaIOp361YrDrQ4fqYbYE47SGWF4ji9KoFxYF4ejfDEptayeG9jF2C465KRQ==", + "dependencies": { + "@cloudinary/transformation-builder-sdk": "^1.5.1" + } + }, "node_modules/@esbuild/android-arm": { "version": "0.18.16", "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.16.tgz", @@ -1223,6 +1255,143 @@ "integrity": "sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==", "dev": true }, + "node_modules/@rollup/plugin-commonjs": { + "version": "25.0.4", + "resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-25.0.4.tgz", + "integrity": "sha512-L92Vz9WUZXDnlQQl3EwbypJR4+DM2EbsO+/KOcEkP4Mc6Ct453EeDB2uH9lgRwj4w5yflgNpq9pHOiY8aoUXBQ==", + "dev": true, + "dependencies": { + "@rollup/pluginutils": "^5.0.1", + "commondir": "^1.0.1", + "estree-walker": "^2.0.2", + "glob": "^8.0.3", + "is-reference": "1.2.1", + "magic-string": "^0.27.0" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "rollup": "^2.68.0||^3.0.0" + }, + "peerDependenciesMeta": { + "rollup": { + "optional": true + } + } + }, + "node_modules/@rollup/plugin-commonjs/node_modules/brace-expansion": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", + "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==", + "dev": true, + "dependencies": { + "balanced-match": "^1.0.0" + } + }, + "node_modules/@rollup/plugin-commonjs/node_modules/estree-walker": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz", + "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==", + "dev": true + }, + "node_modules/@rollup/plugin-commonjs/node_modules/glob": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/glob/-/glob-8.1.0.tgz", + "integrity": "sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==", + "dev": true, + "dependencies": { + "fs.realpath": "^1.0.0", + "inflight": "^1.0.4", + "inherits": "2", + "minimatch": "^5.0.1", + "once": "^1.3.0" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "node_modules/@rollup/plugin-commonjs/node_modules/is-reference": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-1.2.1.tgz", + "integrity": "sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==", + "dev": true, + "dependencies": { + "@types/estree": "*" + } + }, + "node_modules/@rollup/plugin-commonjs/node_modules/magic-string": { + "version": "0.27.0", + "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.27.0.tgz", + "integrity": "sha512-8UnnX2PeRAPZuN12svgR9j7M1uWMovg/CEnIwIG0LFkXSJJe4PdfUGiTGl8V9bsBHFUtfVINcSyYxd7q+kx9fA==", + "dev": true, + "dependencies": { + "@jridgewell/sourcemap-codec": "^1.4.13" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/@rollup/plugin-commonjs/node_modules/minimatch": { + "version": "5.1.6", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz", + "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==", + "dev": true, + "dependencies": { + "brace-expansion": "^2.0.1" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/@rollup/plugin-json": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/@rollup/plugin-json/-/plugin-json-6.0.0.tgz", + "integrity": "sha512-i/4C5Jrdr1XUarRhVu27EEwjt4GObltD7c+MkCIpO2QIbojw8MUs+CCTqOphQi3Qtg1FLmYt+l+6YeoIf51J7w==", + "dev": true, + "dependencies": { + "@rollup/pluginutils": "^5.0.1" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "rollup": "^1.20.0||^2.0.0||^3.0.0" + }, + "peerDependenciesMeta": { + "rollup": { + "optional": true + } + } + }, + "node_modules/@rollup/plugin-node-resolve": { + "version": "15.2.1", + "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-15.2.1.tgz", + "integrity": "sha512-nsbUg588+GDSu8/NS8T4UAshO6xeaOfINNuXeVHcKV02LJtoRaM1SiOacClw4kws1SFiNhdLGxlbMY9ga/zs/w==", + "dev": true, + "dependencies": { + "@rollup/pluginutils": "^5.0.1", + "@types/resolve": "1.20.2", + "deepmerge": "^4.2.2", + "is-builtin-module": "^3.2.1", + "is-module": "^1.0.0", + "resolve": "^1.22.1" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "rollup": "^2.78.0||^3.0.0" + }, + "peerDependenciesMeta": { + "rollup": { + "optional": true + } + } + }, "node_modules/@rollup/pluginutils": { "version": "5.0.3", "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.0.3.tgz", @@ -1277,6 +1446,21 @@ "@sveltejs/kit": "^1.5.0" } }, + "node_modules/@sveltejs/adapter-node": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/@sveltejs/adapter-node/-/adapter-node-1.3.1.tgz", + "integrity": "sha512-A0VgRQDCDPzdLNoiAbcOxGw4zT1Mc+n1LwT1OmO350R7WxrEqdMUChPPOd1iMfIDWlP4ie6E2d/WQf5es2d4Zw==", + "dev": true, + "dependencies": { + "@rollup/plugin-commonjs": "^25.0.0", + "@rollup/plugin-json": "^6.0.0", + "@rollup/plugin-node-resolve": "^15.0.1", + "rollup": "^3.7.0" + }, + "peerDependencies": { + "@sveltejs/kit": "^1.0.0" + } + }, "node_modules/@sveltejs/kit": { "version": "1.22.3", "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.22.3.tgz", @@ -1391,6 +1575,12 @@ "integrity": "sha512-SnHmG9wN1UVmagJOnyo/qkk0Z7gejYxOYYmaAwr5u2yFYfsupN3sg10kyzN8Hep/2zbHxCnsumxOoRIRMBwKCg==", "dev": true }, + "node_modules/@types/resolve": { + "version": "1.20.2", + "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz", + "integrity": "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==", + "dev": true + }, "node_modules/@types/semver": { "version": "7.5.0", "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.0.tgz", @@ -1590,6 +1780,27 @@ "url": "https://opencollective.com/typescript-eslint" } }, + "node_modules/@unpic/core": { + "version": "0.0.24", + "resolved": "https://registry.npmjs.org/@unpic/core/-/core-0.0.24.tgz", + "integrity": "sha512-HFa7ry3iNYfIOkaWGb0N/w1sxt6MAyUfoXXOvjyz50vtomDUbxK4krcRcQWIca64bORQKncxeJbGETRQLF20WQ==", + "dependencies": { + "unpic": "^3.6.1" + } + }, + "node_modules/@unpic/svelte": { + "version": "0.0.25", + "resolved": "https://registry.npmjs.org/@unpic/svelte/-/svelte-0.0.25.tgz", + "integrity": "sha512-jXyOl9BDfspJ03/kAeozy69eHjLtKIZjsZ4257mz8J/sn5Il3xsRD4vR701NjEC0fkkLQg9Xol+v92o0LGImtw==", + "dependencies": { + "@unpic/core": "^0.0.24", + "style-object-to-css-string": "^1.0.1", + "unpic": "^3.6.1" + }, + "peerDependencies": { + "svelte": "*" + } + }, "node_modules/acorn": { "version": "8.10.0", "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz", @@ -1801,6 +2012,18 @@ "node": "*" } }, + "node_modules/builtin-modules": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.3.0.tgz", + "integrity": "sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==", + "dev": true, + "engines": { + "node": ">=6" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/busboy": { "version": "1.6.0", "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz", @@ -1895,6 +2118,28 @@ "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==", "dev": true }, + "node_modules/cloudinary": { + "version": "1.40.0", + "resolved": "https://registry.npmjs.org/cloudinary/-/cloudinary-1.40.0.tgz", + "integrity": "sha512-Fifkl8NRw/M+Enw4cKCXc6e0Or28c5y6RVGYS3OCLzT1W8EfBt416FURhLuuL/S4BCVv8bSilmnM746kCtth3g==", + "dependencies": { + "cloudinary-core": "^2.13.0", + "core-js": "^3.30.1", + "lodash": "^4.17.21", + "q": "^1.5.1" + }, + "engines": { + "node": ">=0.6" + } + }, + "node_modules/cloudinary-core": { + "version": "2.13.0", + "resolved": "https://registry.npmjs.org/cloudinary-core/-/cloudinary-core-2.13.0.tgz", + "integrity": "sha512-Nt0Q5I2FtenmJghtC4YZ3MZZbGg1wLm84SsxcuVwZ83OyJqG9CNIGp86CiI6iDv3QobaqBUpOT7vg+HqY5HxEA==", + "peerDependencies": { + "lodash": ">=4.0" + } + }, "node_modules/code-red": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/code-red/-/code-red-1.0.3.tgz", @@ -1953,6 +2198,12 @@ "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz", "integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==" }, + "node_modules/commondir": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz", + "integrity": "sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==", + "dev": true + }, "node_modules/concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", @@ -1982,6 +2233,16 @@ "url": "https://github.com/sponsors/mesqueeb" } }, + "node_modules/core-js": { + "version": "3.32.1", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.32.1.tgz", + "integrity": "sha512-lqufgNn9NLnESg5mQeYsxQP5w7wrViSj0jr/kv6ECQiByzQkrn1MKvV0L3acttpDqfQrHLwr2KCMgX5b8X+lyQ==", + "hasInstallScript": true, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/core-js" + } + }, "node_modules/cross-spawn": { "version": "7.0.3", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", @@ -2877,6 +3138,33 @@ "node": ">=8" } }, + "node_modules/is-builtin-module": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/is-builtin-module/-/is-builtin-module-3.2.1.tgz", + "integrity": "sha512-BSLE3HnV2syZ0FK0iMA/yUGplUeMmNz4AW5fnTunbCIqZi4vG3WjJT9FHMy5D69xmAYBHXQhJdALdpwVxV501A==", + "dev": true, + "dependencies": { + "builtin-modules": "^3.3.0" + }, + "engines": { + "node": ">=6" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/is-core-module": { + "version": "2.13.0", + "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.0.tgz", + "integrity": "sha512-Z7dk6Qo8pOCp3l4tsX2C5ZVas4V+UxwQodwZhLopL91TX8UyyHEXafPcyoeeWuLrwzHcr3igO78wNLwHJHsMCQ==", + "dev": true, + "dependencies": { + "has": "^1.0.3" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/is-extglob": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", @@ -2898,6 +3186,12 @@ "node": ">=0.10.0" } }, + "node_modules/is-module": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz", + "integrity": "sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g==", + "dev": true + }, "node_modules/is-number": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", @@ -3027,6 +3321,11 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/lodash": { + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" + }, "node_modules/lodash.merge": { "version": "4.6.2", "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", @@ -3359,6 +3658,12 @@ "node": ">=8" } }, + "node_modules/path-parse": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz", + "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==", + "dev": true + }, "node_modules/path-type": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz", @@ -3715,6 +4020,15 @@ "node": ">=6" } }, + "node_modules/q": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz", + "integrity": "sha512-kV/CThkXo6xyFEZUugw/+pIOywXcDbFYgSct5cT3gqlbkBE1SJdwy6UQoZvodiWF/ckQLZyDE/Bu1M6gVu5lVw==", + "engines": { + "node": ">=0.6.0", + "teleport": ">=0.2.0" + } + }, "node_modules/qs": { "version": "6.11.2", "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.2.tgz", @@ -3805,6 +4119,23 @@ "node": ">=8.10.0" } }, + "node_modules/resolve": { + "version": "1.22.4", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.4.tgz", + "integrity": "sha512-PXNdCiPqDqeUou+w1C2eTQbNfxKSuMxqTCuvlmmMsk1NWHL5fRrhY6Pl0qEYYc6+QqGClco1Qj8XnjPego4wfg==", + "dev": true, + "dependencies": { + "is-core-module": "^2.13.0", + "path-parse": "^1.0.7", + "supports-preserve-symlinks-flag": "^1.0.0" + }, + "bin": { + "resolve": "bin/resolve" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/resolve-from": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", @@ -4198,6 +4529,11 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/style-object-to-css-string": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/style-object-to-css-string/-/style-object-to-css-string-1.0.1.tgz", + "integrity": "sha512-ci7tySCofUqq86WziXoEsIE/aGZ2rkw7mmz6Afklhbmk7i05Z1d8hSUaJMUWUOJPbsvK+7TW5ulklZm55/S44Q==" + }, "node_modules/superjson": { "version": "1.13.1", "resolved": "https://registry.npmjs.org/superjson/-/superjson-1.13.1.tgz", @@ -4221,6 +4557,18 @@ "node": ">=8" } }, + "node_modules/supports-preserve-symlinks-flag": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz", + "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==", + "dev": true, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/svelte": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/svelte/-/svelte-4.1.1.tgz", @@ -4266,6 +4614,21 @@ "svelte": "^3.55.0 || ^4.0.0-next.0 || ^4.0.0" } }, + "node_modules/svelte-cloudinary": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/svelte-cloudinary/-/svelte-cloudinary-1.1.0.tgz", + "integrity": "sha512-54QvNw89b3jdvLS7VU/nYF39X7TvgwXvh3szLuf1x5DEUmnoGcSnSK2NWbrsNCyNpggnLhcmxbWHZINQMDQO4Q==", + "dependencies": { + "@cloudinary-util/url-loader": "3.9.0", + "@cloudinary-util/util": "2.1.0", + "@unpic/core": "0.0.24", + "@unpic/svelte": "0.0.25", + "cloudinary": "^1.32.0" + }, + "peerDependencies": { + "svelte": "^3.0.0 || ^4.0.0" + } + }, "node_modules/svelte-eslint-parser": { "version": "0.32.2", "resolved": "https://registry.npmjs.org/svelte-eslint-parser/-/svelte-eslint-parser-0.32.2.tgz", @@ -4553,6 +4916,11 @@ "url": "https://opencollective.com/unified" } }, + "node_modules/unpic": { + "version": "3.10.0", + "resolved": "https://registry.npmjs.org/unpic/-/unpic-3.10.0.tgz", + "integrity": "sha512-EkAvWAd83f7JujI4414AgN2tW3iq1AVBaRr90/BkbB3ADPSj83cLTe07SLXOImh3NjLUlWlHwIB7HLDQbORfrg==" + }, "node_modules/uri-js": { "version": "4.4.1", "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz", diff --git a/package.json b/package.json index 53d9c0d..d395f1a 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "devDependencies": { "@sveltejs/adapter-auto": "^2.0.0", "@sveltejs/adapter-netlify": "^2.0.8", + "@sveltejs/adapter-node": "^1.3.1", "@sveltejs/kit": "^1.20.4", "@types/node": "^20.5.1", "@typescript-eslint/eslint-plugin": "^5.45.0", @@ -40,6 +41,7 @@ "perlin-noise-2d": "^1.0.0", "pixi-filters": "^5.2.1", "pixi.js": "^7.2.4", - "superjson": "^1.13.1" + "superjson": "^1.13.1", + "svelte-cloudinary": "^1.1.0" } } diff --git a/src/lib/importMarkdown.ts b/src/lib/importMarkdown.ts index f2cbe0c..c4e9757 100644 --- a/src/lib/importMarkdown.ts +++ b/src/lib/importMarkdown.ts @@ -27,17 +27,11 @@ export const fetchMarkdownPosts = async () => { const data: unknown = await resolver() const postData = data as Post const content = postData.default.render() as unknown as { html: string } - const srcJson = await import(/* @vite-ignore */'./assets' + postData.metadata.header_bg_image + '?w=336&format=webp') - const src = JSON.stringify(srcJson.default).replaceAll('"', '') - const srcsetJson = await import(/* @vite-ignore */'./assets' + postData.metadata.header_bg_image + '?w=1344;672;336&format=webp&as=srcset') - const srcset = JSON.stringify(srcsetJson.default).replaceAll('"', '') return { meta: postData.metadata, path: postPath, Content: content.html, - src, - srcset } }) ) diff --git a/src/lib/server/importImages.ts b/src/lib/server/importImages.ts new file mode 100644 index 0000000..00f6241 --- /dev/null +++ b/src/lib/server/importImages.ts @@ -0,0 +1,18 @@ +export const getImages = async () => { + const allImages = import.meta.glob('$lib/assets/work/**/*.{png,jpg,jpeg}') + const iterableImages = Object.entries(allImages) + const allImagesData = await Promise.all( + iterableImages.map(async ([path, resolver]) => { + const data: unknown = await resolver() + const imageData = data as { default: string } + const src = JSON.stringify(imageData.default).replaceAll('"', '') + const srcsetJson = await import(/* @vite-ignore */`${path}?w=1344;672;336&format=webp&as=srcset`) + const srcset = JSON.stringify(srcsetJson.default).replaceAll('"', '') + return { + src, + srcset + } + }) + ) + return allImagesData +} \ No newline at end of file diff --git a/src/routes/test/+page.svelte b/src/routes/test/+page.svelte index f6ffdb5..0a6cf85 100644 --- a/src/routes/test/+page.svelte +++ b/src/routes/test/+page.svelte @@ -1,15 +1,12 @@

hakc

my donkey diff --git a/src/routes/work/+page.server.ts b/src/routes/work/+page.server.ts index 66e0484..ff45654 100644 --- a/src/routes/work/+page.server.ts +++ b/src/routes/work/+page.server.ts @@ -2,7 +2,6 @@ import { fetchMarkdownPosts } from '../../lib/importMarkdown' export async function load() { const posts = await fetchMarkdownPosts() - if (!posts) console.error('No posts found') return { diff --git a/src/routes/work/+page.svelte b/src/routes/work/+page.svelte index 0279c88..c6577d2 100644 --- a/src/routes/work/+page.svelte +++ b/src/routes/work/+page.svelte @@ -3,6 +3,7 @@ import { onMount } from 'svelte'; import { workClickHandler, initWorkPage } from './workUtils.js'; import { workbulge } from '$lib/utils/stores.js'; + import { CldImage } from 'svelte-cloudinary'; import { fade } from 'svelte/transition'; export let data; @@ -16,7 +17,7 @@ onMount(() => { const headline: HTMLElement = document.querySelector('.headline') as HTMLElement; - const images: Array = Array.from(document.querySelectorAll('.workhero')); + const images: Array = Array.from(document.querySelectorAll('.work img')); let canvasElems = initWorkPage( headline, images ); canvasTextElems = canvasElems.text as Array; canvasImgElems = canvasElems.images; @@ -25,45 +26,17 @@

Casestudies

- {#each data.posts as work} + + {#each data.posts as work, i} workClickHandler(e) }> - {work.meta.title} -

{work.meta.title}

- - {/each} - {#each data.posts as work} - workClickHandler(e) }> - {work.meta.title} -

{work.meta.title}

- - {/each} - {#each data.posts as work} - workClickHandler(e) }> - {work.meta.title} +

{work.meta.title}

 {/each} diff --git a/src/routes/work/[slug]/+page.server.ts b/src/routes/work/[slug]/+page.server.ts index a538cdd..d1f7292 100644 --- a/src/routes/work/[slug]/+page.server.ts +++ b/src/routes/work/[slug]/+page.server.ts @@ -1,10 +1,6 @@ -export async function load({ params }){ +export async function load( { params }: { params: { slug: string }} ){ try { const post = await import(`../md/${params.slug}.md`) - const srcJson = await import(/* @vite-ignore */`../../../lib/assets${post.metadata.header_bg_image}?w=336&format=webp`) - const src = JSON.stringify(srcJson.default).replaceAll('"', '') - const srcsetJson = await import(/* @vite-ignore */`../../../lib/assets${post.metadata.header_bg_image}?w=1344;672;336&format=webp&as=srcset`); - const srcSet = JSON.stringify(srcsetJson.default).replaceAll('"', '') const { title, date, header_bg_image, svg, video } = post.metadata const Content = post.default.render() @@ -15,8 +11,6 @@ export async function load({ params }){ svg, video, Content, - src, - srcSet } } catch (error) { console.error(error) diff --git a/src/routes/work/[slug]/+page.svelte b/src/routes/work/[slug]/+page.svelte index a92e73e..6d5f50a 100644 --- a/src/routes/work/[slug]/+page.svelte +++ b/src/routes/work/[slug]/+page.svelte @@ -2,6 +2,7 @@ import { onMount, onDestroy } from 'svelte'; import { gsap } from 'gsap'; import { ScrollTrigger } from 'gsap/dist/ScrollTrigger'; + import { CldImage } from 'svelte-cloudinary'; export let data; gsap.registerPlugin(ScrollTrigger); @@ -10,7 +11,7 @@ function animForDesktop() { ScrollTrigger.getAll().forEach(t => t.kill()); - gsap.to('.hero', { duration: .6, x: "-10%", ease: "cubic.inOut" }) + gsap.to('.heromask img', { duration: .6, x: "-10%", ease: "cubic.inOut" }) gsap.from('.work', { xPercent: 100, duration: .66, @@ -45,7 +46,7 @@ } function animForMobile() { ScrollTrigger.getAll().forEach(t => t.kill()); - gsap.to('.hero', { duration: .6, x: 0, ease: "cubic.inOut" }) + gsap.to('.heromask img', { duration: .6, x: 0, ease: "cubic.inOut" }) gsap.from('.work', { opacity: 0, y: 100, @@ -105,21 +106,25 @@ animForSize(); }) - document.body.classList.add('work'); + // document.body.classList.add('work'); }) onDestroy(() => { - document.body.classList.remove('work'); + // document.body.classList.remove('work'); }) + + +
- {data.title} +
← Back @@ -162,14 +167,15 @@ position: fixed; } } - .hero { - width: 100%; - height: 100%; - object-fit: fill; + :global(.heromask img) { z-index: 0; display: block; position: relative; - perspective: 400px; + width: 100%; + height: 100%; + aspect-ratio: var(--aspect-ratio-heroes); + margin: 0; + object-fit: fill; } .work-content { padding: 0 var(--spacing-outer); diff --git a/src/routes/work/md/adidas.md b/src/routes/work/md/adidas.md index 883a677..03d6d47 100644 --- a/src/routes/work/md/adidas.md +++ b/src/routes/work/md/adidas.md @@ -1,6 +1,6 @@ --- title: Adidas -header_bg_image: /work/adidas/adidas_hero.jpg +header_bg_image: adidas_hero_ceurd8 order: 12 description: Adidas, as you might have heard, is an international sports and lifestyle clothing brand. I worked on several digital campaigns as a graphic designer and illustrator. svg: '' diff --git a/src/routes/work/md/formo.md b/src/routes/work/md/formo.md index b8afcaa..73df150 100644 --- a/src/routes/work/md/formo.md +++ b/src/routes/work/md/formo.md @@ -1,6 +1,6 @@ --- title: Formo.bio -header_bg_image: /work/formo/formo_hero.png +header_bg_image: formo_hero_xgb6xo video: /work/formo/formo-rec.webm order: 12 description: Formo, as you might have heard, is an international sports and lifestyle clothing brand. I worked on several digital campaigns as a graphic designer and illustrator. diff --git a/src/routes/work/md/jpl.md b/src/routes/work/md/jpl.md index 1bc50e3..eb64821 100644 --- a/src/routes/work/md/jpl.md +++ b/src/routes/work/md/jpl.md @@ -1,6 +1,6 @@ --- title: JustPeace Labs -header_bg_image: /work/jpl/jpl_hero.jpg +header_bg_image: jpl_hero_eukxaw description: JustPeace Labs is a non-profit organization that works with local communities to build peace and prevent violence. order: 11 svg: '' diff --git a/src/routes/work/work.scss b/src/routes/work/work.scss index bfa581b..12c04bf 100644 --- a/src/routes/work/work.scss +++ b/src/routes/work/work.scss @@ -70,7 +70,7 @@ h2 { flex: 0 0 calc(33% - .125em); } } -.workhero { +:global(.work img) { width: 100%; height: auto; aspect-ratio: var(--aspect-ratio-heroes); diff --git a/src/routes/work/workUtils.ts b/src/routes/work/workUtils.ts index 9727db3..4f098ab 100644 --- a/src/routes/work/workUtils.ts +++ b/src/routes/work/workUtils.ts @@ -48,7 +48,7 @@ export function workClickHandler(e:Event){ e.preventDefault(); const target = e.target as HTMLElement; const originalLink = target.getAttribute('href') as string; - const targetImg = target.querySelector('.workhero') as HTMLElement; + const targetImg = target.querySelector('img') as HTMLElement; const targetImgRect = targetImg.getBoundingClientRect(); const targetImgAspectRatio = targetImgRect.width / targetImgRect.height; target.classList.add('active'); @@ -61,7 +61,7 @@ export function workClickHandler(e:Event){ targetImg.style.position = 'fixed'; - gsap.to('.work:not(.active) .workhero', { + gsap.to('.work:not(.active) img', { duration: .3, opacity: 0, yPercent: 10, diff --git a/static/work/adidas/adidas_hero.jpg b/static/work/adidas/adidas_hero.jpg new file mode 100644 index 0000000..5d0e9ae Binary files /dev/null and b/static/work/adidas/adidas_hero.jpg differ diff --git a/static/work/formo/formo-rec.mp4 b/static/work/formo/formo-rec.mp4 new file mode 100644 index 0000000..d779f44 Binary files /dev/null and b/static/work/formo/formo-rec.mp4 differ diff --git a/static/work/formo/formo-rec.webm b/static/work/formo/formo-rec.webm new file mode 100644 index 0000000..9765a14 Binary files /dev/null and b/static/work/formo/formo-rec.webm differ diff --git a/static/work/formo/formo_hero.png b/static/work/formo/formo_hero.png new file mode 100644 index 0000000..679e5ff Binary files /dev/null and b/static/work/formo/formo_hero.png differ diff --git a/static/work/jpl/jpl_hero.jpg b/static/work/jpl/jpl_hero.jpg new file mode 100644 index 0000000..7912ec0 Binary files /dev/null and b/static/work/jpl/jpl_hero.jpg differ diff --git a/svelte.config.js b/svelte.config.js index f87eea6..c917c86 100644 --- a/svelte.config.js +++ b/svelte.config.js @@ -1,4 +1,5 @@ // import adapter from '@sveltejs/adapter-auto'; +// import adapter from '@sveltejs/adapter-node'; import adapter from '@sveltejs/adapter-netlify'; import { vitePreprocess } from '@sveltejs/kit/vite'; import preprocess from 'svelte-preprocess'; diff --git a/vite.config.ts b/vite.config.ts index 89989a4..b7f1cf1 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,8 +1,24 @@ import { sveltekit } from '@sveltejs/kit/vite'; -import{ imagetools }from'vite-imagetools'; +import { imagetools } from 'vite-imagetools'; import { defineConfig } from 'vite'; +const supportedExtensions = ['png', 'jpg', 'jpeg']; export default defineConfig({ - plugins: [imagetools(),sveltekit()] + plugins: [ + imagetools({ + defaultDirectives: (url) => { + const extension = url.pathname.substring( + url.pathname.lastIndexOf('.') + 1 + ); + if (supportedExtensions.includes(extension)) { + return new URLSearchParams({ + format: 'avif;webp;' + extension, + // picture: true + }); + } + return new URLSearchParams(); + } + }), + sveltekit()] });