From 0c4a75789cee137f904183af3057e754eac7ad93 Mon Sep 17 00:00:00 2001 From: Claude Date: Thu, 20 Nov 2025 17:50:05 +0000 Subject: [PATCH 01/12] Add smooth page transitions between routes Implemented crossfade page transitions using Svelte's transition system: How it works: - Wrapped in {#key} block that triggers on route changes - Used fade transition with staggered timing for smooth effect - Out transition: 150ms fade (page leaving) - In transition: 300ms fade with 150ms delay (page entering) - Total transition time: 450ms for complete crossfade Benefits: - Smooth visual continuity when navigating - No jarring content swaps - Professional polish to the user experience - Uses cubicOut easing for natural motion The transitions work across all pages and don't interfere with the boot animation or mobile menu. --- src/routes/+layout.svelte | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index e6edbe7..3fd2ac1 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -10,6 +10,8 @@ import type { Selected } from "bits-ui"; import { BROWSER } from 'esm-env'; import { mobileTerminalTrigger } from '$lib/mobileMenuStore'; + import { fade } from 'svelte/transition'; + import { cubicOut } from 'svelte/easing'; let showBootUpAnimation = false; let currentBootThemeOption: ThemeOption | undefined = undefined; @@ -235,7 +237,14 @@
- + {#key $page.url.pathname} +
+ +
+ {/key}
{/if} From 67ad57c755dcb9154442dc545d4720d0bcde939b Mon Sep 17 00:00:00 2001 From: Claude Date: Thu, 20 Nov 2025 17:52:36 +0000 Subject: [PATCH 02/12] Upgrade to elaborate 3D warp page transition Created a custom warp transition that combines multiple effects: Warp Transition Features: - 3D rotation (rotateY 90deg) for flip effect - Dynamic perspective (1000px) for depth - Scale transformation (0.8 to 1.0) - Motion blur (0 to 10px) during transition - Smooth opacity fade - cubicInOut easing for natural motion Timing: - Out transition: 300ms warp exit - In transition: 400ms warp entry with 100ms delay - Total: 700ms for full 3D flip effect Visual Impact: - Pages appear to rotate and flip in 3D space - Blur effect adds motion feel - Scale creates depth perception - Much more dynamic than simple fade - Professional, modern aesthetic The effect gives the impression of pages physically turning/warping as you navigate between routes. --- src/lib/utils.ts | 29 ++++++++++++++++++++++++++++- src/routes/+layout.svelte | 7 +++---- 2 files changed, 31 insertions(+), 5 deletions(-) diff --git a/src/lib/utils.ts b/src/lib/utils.ts index 2c0044e..f83ef4b 100644 --- a/src/lib/utils.ts +++ b/src/lib/utils.ts @@ -1,12 +1,39 @@ import { type ClassValue, clsx } from "clsx"; import { twMerge } from "tailwind-merge"; -import { backOut } from "svelte/easing"; +import { backOut, cubicInOut } from "svelte/easing"; import type { TransitionConfig } from "svelte/transition"; export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } +type WarpParams = { + duration?: number; + delay?: number; +}; + +export const warp = ( + node: Element, + params: WarpParams = {} +): TransitionConfig => { + return { + duration: params.duration ?? 500, + delay: params.delay ?? 0, + css: (t) => { + const eased = cubicInOut(t); + const rotation = (1 - eased) * 90; + const scale = 0.8 + (eased * 0.2); + const blur = (1 - eased) * 10; + + return ` + transform: perspective(1000px) rotateY(${rotation}deg) scale(${scale}); + opacity: ${eased}; + filter: blur(${blur}px); + `; + } + }; +}; + type FlyAndScaleParams = { y?: number; x?: number; diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 3fd2ac1..5e11cd9 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -10,8 +10,7 @@ import type { Selected } from "bits-ui"; import { BROWSER } from 'esm-env'; import { mobileTerminalTrigger } from '$lib/mobileMenuStore'; - import { fade } from 'svelte/transition'; - import { cubicOut } from 'svelte/easing'; + import { warp } from '$lib/utils'; let showBootUpAnimation = false; let currentBootThemeOption: ThemeOption | undefined = undefined; @@ -239,8 +238,8 @@ > {#key $page.url.pathname}
From 8c5b1c5185a93517b312bd0eb6b6055bd2fda1b1 Mon Sep 17 00:00:00 2001 From: Claude Date: Thu, 20 Nov 2025 17:55:02 +0000 Subject: [PATCH 03/12] Refine warp transition to be more subtle and elegant MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Tuned down the intensity while keeping the sophisticated 3D effect: Changes from aggressive to subtle: - Rotation: 90deg → 12deg (gentle tilt vs dramatic flip) - Scale: 0.8-1.0 → 0.96-1.0 (barely noticeable vs obvious) - Blur: 10px → 2px (soft vs heavy) - Added translateX: 30px horizontal slide for smooth lateral movement - Perspective: 1000px → 1200px for more refined depth Effect: - Gentle 3D page slide with subtle depth - Soft blur adds motion feel without overwhelming - Small rotation creates elegant tilt - Horizontal slide gives directional flow - Much more refined and professional - Noticeable but not distracting Perfect balance of sophistication and subtlety. --- src/lib/utils.ts | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/lib/utils.ts b/src/lib/utils.ts index f83ef4b..87c4da4 100644 --- a/src/lib/utils.ts +++ b/src/lib/utils.ts @@ -21,12 +21,13 @@ export const warp = ( delay: params.delay ?? 0, css: (t) => { const eased = cubicInOut(t); - const rotation = (1 - eased) * 90; - const scale = 0.8 + (eased * 0.2); - const blur = (1 - eased) * 10; + const rotation = (1 - eased) * 12; + const translateX = (1 - eased) * 30; + const scale = 0.96 + (eased * 0.04); + const blur = (1 - eased) * 2; return ` - transform: perspective(1000px) rotateY(${rotation}deg) scale(${scale}); + transform: perspective(1200px) rotateY(${rotation}deg) translateX(${translateX}px) scale(${scale}); opacity: ${eased}; filter: blur(${blur}px); `; From 6494a7cd744e6c37728e70b31f0da41da54fe509 Mon Sep 17 00:00:00 2001 From: Claude Date: Thu, 20 Nov 2025 17:56:56 +0000 Subject: [PATCH 04/12] Replace 3D transition with clean professional fade+slide Removed all 3D rotation, blur, and perspective effects in favor of a minimal, elegant approach: New transition: - Simple vertical slide (20px upward) - Smooth opacity fade - cubicInOut easing for natural motion - No blur, rotation, or scaling Timing: - Out: 250ms (page leaving) - Delay: 120ms gap - In: 350ms (page entering) - Total: 720ms smooth transition Benefits: - Clean and professional - Commonly used by high-end websites - No visual gimmicks or distractions - Smooth, polished feel - Works perfectly on all devices - Focuses attention on content Simple, elegant, and timeless - exactly what a professional portfolio needs. --- src/lib/utils.ts | 10 +++------- src/routes/+layout.svelte | 4 ++-- 2 files changed, 5 insertions(+), 9 deletions(-) diff --git a/src/lib/utils.ts b/src/lib/utils.ts index 87c4da4..462d0ba 100644 --- a/src/lib/utils.ts +++ b/src/lib/utils.ts @@ -17,19 +17,15 @@ export const warp = ( params: WarpParams = {} ): TransitionConfig => { return { - duration: params.duration ?? 500, + duration: params.duration ?? 400, delay: params.delay ?? 0, css: (t) => { const eased = cubicInOut(t); - const rotation = (1 - eased) * 12; - const translateX = (1 - eased) * 30; - const scale = 0.96 + (eased * 0.04); - const blur = (1 - eased) * 2; + const translateY = (1 - eased) * 20; return ` - transform: perspective(1200px) rotateY(${rotation}deg) translateX(${translateX}px) scale(${scale}); + transform: translateY(${translateY}px); opacity: ${eased}; - filter: blur(${blur}px); `; } }; diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 5e11cd9..db05858 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -238,8 +238,8 @@ > {#key $page.url.pathname}
From 5d51e256d79aacc9aac85192e4cdc61edc30d7ca Mon Sep 17 00:00:00 2001 From: Claude Date: Thu, 20 Nov 2025 17:58:31 +0000 Subject: [PATCH 05/12] Simplify transition to pure fade with smooth blur Removed all movement - now just fade and blur for maximum smoothness: Transition effects: - Smooth opacity fade (0 to 1) - Gentle blur (4px to 0px) - cubicInOut easing for natural feel - No movement, rotation, or scaling Timing: - Out: 250ms - Delay: 120ms - In: 350ms Result: Ultra-smooth, dreamy transition that focuses purely on the content appearing/disappearing. The blur adds a soft, professional quality without any distracting motion. Clean, simple, and elegant. --- src/lib/utils.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/lib/utils.ts b/src/lib/utils.ts index 462d0ba..f5c3862 100644 --- a/src/lib/utils.ts +++ b/src/lib/utils.ts @@ -21,11 +21,11 @@ export const warp = ( delay: params.delay ?? 0, css: (t) => { const eased = cubicInOut(t); - const translateY = (1 - eased) * 20; + const blur = (1 - eased) * 4; return ` - transform: translateY(${translateY}px); opacity: ${eased}; + filter: blur(${blur}px); `; } }; From 8ad7c1063bb84a49fa17dde7e7a63ab57312a8e2 Mon Sep 17 00:00:00 2001 From: Claude Date: Thu, 20 Nov 2025 18:04:06 +0000 Subject: [PATCH 06/12] Fix page transition conflicts by removing global modifiers Removed |global modifiers from all flyAndScale element animations to prevent them from conflicting with the page-level warp transition. This fixes the zoom/breaking effect that occurred during route changes. - Element animations now only fire on component mount - Page-level fade+blur transition handles route changes - Smoother, cleaner navigation experience --- src/routes/+page.svelte | 8 ++++---- src/routes/about/+page.svelte | 4 ++-- src/routes/infra/+page.svelte | 6 +++--- src/routes/museum/+page.svelte | 2 +- src/routes/projects/+page.svelte | 2 +- 5 files changed, 11 insertions(+), 11 deletions(-) diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index a62e4c0..ecd18bf 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -178,7 +178,7 @@ {#each dashboardLinks as item, i}
@@ -220,7 +220,7 @@ {#if showTerminal}
@@ -248,7 +248,7 @@ bind:this={cardElements[i]} class="terminal-window absolute {activeWindowIndex === i ? 'active' : ''}" style="z-index: {10 + i}; width: {CARD_WIDTH}px;" - in:flyAndScale|global={{ y: 50, duration: 400, start: 0.75, delay: i * 120 }} + in:flyAndScale={{ y: 50, duration: 400, start: 0.75, delay: i * 120 }} use:draggable={{ handleSelector: '.terminal-titlebar', initialPosition: { x: initialPositions[i].x, y: initialPositions[i].y }, @@ -297,7 +297,7 @@ bind:this={terminalElement} class="terminal-window absolute {activeWindowIndex === -1 ? 'active' : ''} w-[90vw] max-w-4xl" style="z-index: 200;" - in:flyAndScale|global={{ y: 60, duration: 450, start: 0.7 }} + in:flyAndScale={{ y: 60, duration: 450, start: 0.7 }} use:draggable={{ handleSelector: '.terminal-titlebar', initialPosition: { x: browser ? (window.innerWidth * 0.05) : 50, y: 300 }, diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte index 008962f..259eb03 100644 --- a/src/routes/about/+page.svelte +++ b/src/routes/about/+page.svelte @@ -89,7 +89,7 @@
-
+
@@ -113,7 +113,7 @@
-
+

Centres d'intérêt diff --git a/src/routes/infra/+page.svelte b/src/routes/infra/+page.svelte index 375e6b4..9bc5ada 100644 --- a/src/routes/infra/+page.svelte +++ b/src/routes/infra/+page.svelte @@ -27,7 +27,7 @@
{#each infrastructure as machine, i (machine.id)} -
+
{#if machine.imageUrl} @@ -94,7 +94,7 @@ {/each}
-
+
-
+

Vous pouvez vérifier le statut de l'infrastructure en temps réel 0}

{#each $visibleItems as item (item.id)} -
+
{#if item.imageUrl}
diff --git a/src/routes/projects/+page.svelte b/src/routes/projects/+page.svelte index c8245d6..d5a25f5 100644 --- a/src/routes/projects/+page.svelte +++ b/src/routes/projects/+page.svelte @@ -123,7 +123,7 @@
{#each projects as project, i (project.id)} {@const statusConfig = getStatusConfig(project.status)} -
+
{#if project.imageUrl} From eadbfb996939f98c9242119a90f80f7c103793ac Mon Sep 17 00:00:00 2001 From: Claude Date: Thu, 20 Nov 2025 18:06:34 +0000 Subject: [PATCH 07/12] Simplify page transition to blur only --- src/lib/utils.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/lib/utils.ts b/src/lib/utils.ts index f5c3862..36a03db 100644 --- a/src/lib/utils.ts +++ b/src/lib/utils.ts @@ -24,7 +24,6 @@ export const warp = ( const blur = (1 - eased) * 4; return ` - opacity: ${eased}; filter: blur(${blur}px); `; } From ec915bba0b7987792ec2a7b165d3552c2d2207a9 Mon Sep 17 00:00:00 2001 From: Claude Date: Thu, 20 Nov 2025 18:26:45 +0000 Subject: [PATCH 08/12] Remove page-level transition to fix double rendering issue --- src/routes/+layout.svelte | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index db05858..e6edbe7 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -10,7 +10,6 @@ import type { Selected } from "bits-ui"; import { BROWSER } from 'esm-env'; import { mobileTerminalTrigger } from '$lib/mobileMenuStore'; - import { warp } from '$lib/utils'; let showBootUpAnimation = false; let currentBootThemeOption: ThemeOption | undefined = undefined; @@ -236,14 +235,7 @@
- {#key $page.url.pathname} -
- -
- {/key} +
{/if}
From 99a3c5093a8dcd7e1bdf67840da6c865369b1fe2 Mon Sep 17 00:00:00 2001 From: Claude Date: Thu, 20 Nov 2025 18:29:23 +0000 Subject: [PATCH 09/12] Add sliding background indicator to navigation bar --- src/routes/+layout.svelte | 54 +++++++++++++++++++++++++++++++++++---- 1 file changed, 49 insertions(+), 5 deletions(-) diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index e6edbe7..804f5b0 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -18,6 +18,29 @@ let mobileMenuOpen = false; let showScrollTop = false; + // Navigation sliding background + let navItemElements: (HTMLAnchorElement | null)[] = []; + let activeIndicatorStyle = ''; + + $: if (navItemElements.length === navItems.length && BROWSER) { + updateActiveIndicator(); + } + + function updateActiveIndicator() { + const activeIndex = navItems.findIndex(item => $page.url.pathname === item.href); + if (activeIndex !== -1 && navItemElements[activeIndex]) { + const activeElement = navItemElements[activeIndex]; + const navContainer = activeElement?.parentElement; + if (activeElement && navContainer) { + const containerRect = navContainer.getBoundingClientRect(); + const activeRect = activeElement.getBoundingClientRect(); + const left = activeRect.left - containerRect.left; + const width = activeRect.width; + activeIndicatorStyle = `transform: translateX(${left}px); width: ${width}px;`; + } + } + } + // Reactive statement to check if win2000 theme is active $: isWin2000Theme = ($currentTheme === 'win2000'); @@ -27,6 +50,10 @@ // Close mobile menu when route changes $: if ($page.url.pathname) { mobileMenuOpen = false; + // Update active indicator when page changes + if (BROWSER) { + setTimeout(updateActiveIndicator, 0); + } } // Listen for boot animation triggers from terminal @@ -71,13 +98,23 @@ showScrollTop = window.scrollY > 300; // Show after 300px scroll }; + // Update active indicator on resize + const handleResize = () => { + updateActiveIndicator(); + }; + window.addEventListener('scroll', handleScroll, { passive: true }); + window.addEventListener('resize', handleResize); + + // Initial update + setTimeout(updateActiveIndicator, 0); } return () => { if (BROWSER) { window.removeEventListener('keydown', handleGlobalKeyDown); window.removeEventListener('scroll', handleScroll); + window.removeEventListener('resize', handleResize); } }; }); @@ -171,15 +208,22 @@