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