From d7cab5d526b2ba5610995d1a97401c278f697436 Mon Sep 17 00:00:00 2001 From: saiminh Date: Thu, 22 Jan 2026 17:24:51 +1300 Subject: [PATCH] upgrades and updates --- package-lock.json | 2 +- package.json | 2 +- src/lib/components/HomeIlluShapes.svelte | 6 +- src/lib/components/MainNav.svelte | 14 ++-- src/lib/styles/global.scss | 4 + src/routes/+layout.svelte | 57 +++++++++---- src/routes/+page.svelte | 3 - .../ethical-webdevelopment/+page.svelte | 43 ++++++++++ src/routes/work/+page.svelte | 82 +++++++++++-------- src/routes/work/[slug]/+page.svelte | 16 ++-- src/routes/work/work.scss | 7 +- 11 files changed, 163 insertions(+), 73 deletions(-) create mode 100644 src/routes/ethical-webdevelopment/+page.svelte diff --git a/package-lock.json b/package-lock.json index dba289f..4c2212b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,7 +11,7 @@ "gsap": "^3.13.0", "mdsvex": "^0.11.0", "pixi-filters": "^6.1.5", - "pixi.js": "^8.0.0", + "pixi.js": "^8.15.0", "superjson": "^1.13.1", "svelte-cloudinary": "^1.1.0" }, diff --git a/package.json b/package.json index 5518062..bee8488 100644 --- a/package.json +++ b/package.json @@ -40,8 +40,8 @@ "dependencies": { "gsap": "^3.13.0", "mdsvex": "^0.11.0", + "pixi.js": "^8.15.0", "pixi-filters": "^6.1.5", - "pixi.js": "^8.0.0", "superjson": "^1.13.1", "svelte-cloudinary": "^1.1.0" } diff --git a/src/lib/components/HomeIlluShapes.svelte b/src/lib/components/HomeIlluShapes.svelte index a05e4fd..48bf930 100644 --- a/src/lib/components/HomeIlluShapes.svelte +++ b/src/lib/components/HomeIlluShapes.svelte @@ -72,6 +72,7 @@ + \ No newline at end of file diff --git a/src/lib/components/MainNav.svelte b/src/lib/components/MainNav.svelte index cf81537..17c5a88 100644 --- a/src/lib/components/MainNav.svelte +++ b/src/lib/components/MainNav.svelte @@ -1,7 +1,7 @@ @@ -25,14 +52,14 @@ - - {$page.data.title ? $page.data.title : 'Simon Flöter, Designer and Creative Developer'} + + {page.data.title ? page.data.title : 'Simon Flöter, Designer and Creative Developer'}
{#key data.pathname}
- {#if $navigating} + {#if showLoader} {/if} {@render children()} diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index f5ee135..7e36ea4 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -93,9 +93,6 @@ -{#if !mounted} - -{/if}

I create digital experiences that stand out from the rest.

diff --git a/src/routes/ethical-webdevelopment/+page.svelte b/src/routes/ethical-webdevelopment/+page.svelte new file mode 100644 index 0000000..cdfedac --- /dev/null +++ b/src/routes/ethical-webdevelopment/+page.svelte @@ -0,0 +1,43 @@ +
+
+ Research & Thoughts +
+

Ethical Web Development

+

+ What does that mean? For me, it means building websites and applications that prioritize user privacy, accessibility, and sustainability. +

+
+ + \ No newline at end of file diff --git a/src/routes/work/+page.svelte b/src/routes/work/+page.svelte index 0f28bfb..bd9650f 100644 --- a/src/routes/work/+page.svelte +++ b/src/routes/work/+page.svelte @@ -94,12 +94,12 @@ transformOrigin: '0 0', }) gsap.set('.work',{ - opacity: 0, + autoAlpha: 0, yPercent: 50, scaleY: 0, }) gsap.to('.work',{ - opacity:1, + autoAlpha:1, yPercent: 0, scaleY: 1, duration: .75, @@ -129,36 +129,50 @@ overwrite: true, }) } - // Hover states of .work - works.forEach((work, index) => { - work.addEventListener('mouseenter', (e) => { - if (isZoomed) return; - gsap.to(work, { - backgroundColor: 'var(--color-bg)', - duration: .125, - ease: 'power1.inOut', - }) - gsap.to(work.querySelector('.work-logo'), { - color: 'var(--color-highlight)', - duration: .125, - ease: 'power1.inOut', - }) - }) - work.addEventListener('mouseleave', (e) => { - if (isZoomed) return; - gsap.to(work, { - backgroundColor: 'var(--color-highlight)', - duration: .125, - ease: 'power1.inOut', - }) - gsap.to(work.querySelector('.work-logo'), { - color: 'var(--color-bg)', - duration: .125, - ease: 'power1.inOut', - }) - }) - }) window.addEventListener('mousemove', mouseMoveHandler); + + // Create handler functions outside the loop for proper cleanup + const handleMouseEnter = (work: HTMLElement) => { + if (isZoomed) return; + gsap.killTweensOf([work, work.querySelector('.work-logo')]); + gsap.to(work, { + backgroundColor: 'rgb(63, 111, 207)', + duration: .125, + ease: 'power1.inOut', + }) + const logo = work.querySelector('.work-logo'); + if (logo) { + gsap.to(logo, { + color: 'rgb(29, 12, 18)', + duration: .125, + ease: 'power1.inOut', + }) + } + } + + const handleMouseLeave = (work: HTMLElement) => { + if (isZoomed) return; + gsap.killTweensOf([work, work.querySelector('.work-logo')]); + gsap.to(work, { + backgroundColor: 'rgb(29, 12, 18)', + duration: .125, + ease: 'power1.inOut', + }) + const logo = work.querySelector('.work-logo'); + if (logo) { + gsap.to(logo, { + color: 'rgb(63, 111, 207)', + duration: .125, + ease: 'power1.inOut', + }) + } + } + + // Hover states of .work + works.forEach((work) => { + work.addEventListener('mouseenter', () => handleMouseEnter(work)); + work.addEventListener('mouseleave', () => handleMouseLeave(work)); + }) // Move the works the same way on touch drag let touchMoveHandler = (e: TouchEvent) => { @@ -186,9 +200,9 @@ window.removeEventListener('mousemove', mouseMoveHandler); window.removeEventListener('touchmove', touchMoveHandler); gsap.killTweensOf('.works, .work'); - works.forEach((work, index) => { - work.removeEventListener('mouseenter', (e) => {}); - work.removeEventListener('mouseleave', (e) => {}); + works.forEach((work) => { + work.removeEventListener('mouseenter', () => handleMouseEnter(work)); + work.removeEventListener('mouseleave', () => handleMouseLeave(work)); work.removeEventListener('click', (e) => {}); }) } diff --git a/src/routes/work/[slug]/+page.svelte b/src/routes/work/[slug]/+page.svelte index 70f85f8..e2b6c24 100644 --- a/src/routes/work/[slug]/+page.svelte +++ b/src/routes/work/[slug]/+page.svelte @@ -56,8 +56,9 @@ gsap.to('.logo-wrapper', { opacity: 0, + scale: 0.85, zIndex: -1, - duration: 1, + duration: .5, ease: 'power2.out', }) gsap.from('.work', { @@ -163,10 +164,10 @@
{#if visible} -

{data.title}

{data.description}
+

{data.title}

@@ -245,19 +246,20 @@ } } h1 { - margin: .5em 0 0.25em 0; + margin: .125em 0 0.5em 0; font-size: 2.5rem; @media screen and (min-width: 768px) { - font-size: 5rem; + font-size: 6rem; } } .description { - margin-bottom: 1.5em; + margin-top: 1.5em; line-height: 1.3; - letter-spacing: -0.0075em; + letter-spacing: 0; + text-transform: uppercase; font-size: 1.25rem; @media screen and (min-width: 768px) { - font-size: 2.5rem; + font-size: 1.75rem; } } .infobox { diff --git a/src/routes/work/work.scss b/src/routes/work/work.scss index 023073f..4862fef 100644 --- a/src/routes/work/work.scss +++ b/src/routes/work/work.scss @@ -11,6 +11,7 @@ overflow: hidden; perspective: 700px; transform-origin: 0 0; + will-change: transform; } .headline { position: fixed; @@ -48,9 +49,8 @@ display: grid; grid-template-columns: repeat(6, 100vw); grid-auto-rows: 100vh; - // grid-template-rows: repeat(6, 100vh); - // grid-auto-flow: column; gap: 6px; + will-change: transform; } .work { background-color: var(--color-highlight); @@ -59,7 +59,9 @@ width: 100vw; height: 100vh; opacity: 0; + visibility: hidden; transform: translateZ(700px); + will-change: transform; } :global(.work-logo) { width: 100%; @@ -70,6 +72,7 @@ display: flex; flex-direction: column; justify-content: center; + will-change: transform; @media screen and (min-width: 768px) { width: 60%;