From b23d320725091525c158afe8cf0b8ecce0c83ca5 Mon Sep 17 00:00:00 2001 From: Claude Date: Thu, 20 Nov 2025 17:30:00 +0000 Subject: [PATCH 1/6] Completely rework the About page with engaging design MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Transformed the About page from basic text sections into a modern, visually rich experience: New Sections: - Hero section with gradient name, role badges, and icon - Stats grid (experience, projects, technologies, coffee ☕) - Expanded "Who I am" section with better storytelling - Skills & Technologies section with 4 categories (Dev, Infra, Hardware, Other) - Passions section with 3 feature cards - Philosophy section with inspirational quote Visual Enhancements: - Gradient text effect for the name - Stat cards with shimmer hover effect - Color-coded skill categories with icons - Badge tags for individual skills - Better typography and spacing - Consistent hover animations across all cards - Staggered entrance animations for sections Content Improvements: - More detailed personal introduction - Specific technology listings - Clear categorization of skills - Emphasis on autodidact journey and experimentation - Professional yet personable tone The page now tells a complete story and showcases skills/passions in an organized, visually appealing way. --- src/routes/about/+page.svelte | 330 +++++++++++++++++++++++++++++----- 1 file changed, 284 insertions(+), 46 deletions(-) diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte index 7e8b564..0b21ea7 100644 --- a/src/routes/about/+page.svelte +++ b/src/routes/about/+page.svelte @@ -1,91 +1,329 @@ - Az' - À propos de moi - + Az' - À propos de moi +
+
-

- - À propos de moi +
+ +
+

+ Dylan "Az'" R.

-

- Un peu plus d'informations sur qui je suis et ce qui me passionne. +

+ Passionné de technologie & Autodidacte

+
+ + + Developer + + + + Sysadmin + + + + Hardware Enthusiast + +

-
-
-
- -

Qui je suis

- _ -
- - -

- Je suis Dylan R. (ou Az' sur internet), {yearsSince()} ans, passionné de technologie. Je passe mon temps à cultiver ma passion en tant qu'autodidacte au travers de plus en plus de domaines. + +

+ {#each stats as stat, i} + + +
{stat.value}
+
{stat.label}
+ + {/each} +
+ + +
+
+ +

Qui je suis

+ _ +
+ + +
+

+ Bonjour! Je suis Dylan R., aussi connu sous le pseudo Az' sur internet. + À {yearsSince()} ans, je suis un passionné de technologie qui aime explorer et maîtriser de nouveaux domaines en autodidacte. +

+

+ Mon parcours dans la tech a commencé il y a plus de 10 ans, et depuis, je n'ai jamais cessé d'apprendre. + Ce qui me motive, c'est la curiosité sans limite et l'envie de comprendre comment les choses fonctionnent, + que ce soit au niveau logiciel ou matériel. +

+

+ Au fil des années, j'ai développé une expertise dans le développement web, la gestion d'infrastructures serveurs, + et le hardware. Mais ma passion ne s'arrête pas là - j'explore également l'électronique, la domotique, et même la musique! +

+
+ + +
+ + +
+
+ +

Compétences & Technologies

+ _ +
+ +
+ {#each skills as skillGroup, i} + + + +
+ +
+ {skillGroup.category} + + + +
+ {#each skillGroup.items as skill} + + {skill} + + {/each} +
+ + + {/each} +
+
+ + +
+
+ +

Ce qui me passionne

+ _ +
+ +
+ + +
+ +
+

Développement

+

+ Créer des applications web modernes et performantes avec les dernières technologies. + J'aime construire des interfaces élégantes et des systèmes robustes.

-
- -
-
- -

Ce que je fais

- _ -
- - -

- Je cultive mes connaissances depuis de nombreuses années dans plusieurs domaines tels que le développement, le "hardware", ou la gestion de serveurs - informatiques, mais aussi dans d'autres domaines plus éloignés de l'informatique comme l'électronique ou la musique. + + + +

+ +
+

Infrastructure

+

+ Concevoir et maintenir des infrastructures serveurs efficaces. + De la virtualisation au monitoring, j'adore optimiser les systèmes.

-
-
+ + + +
+ +
+

Expérimentation

+

+ Toujours curieux d'explorer de nouveaux domaines : électronique, IoT, domotique, musique... + L'apprentissage permanent est mon moteur. +

+ + +
+ + + +
+ + +
+
+ +
+
+

Ma philosophie

+
+ "La technologie n'est pas juste un outil, c'est un terrain de jeu infini. + Chaque projet est une opportunité d'apprendre, chaque problème est un puzzle à résoudre, + et chaque ligne de code est une petite victoire." +
+
+
+
+

+ En tant qu'autodidacte, j'ai appris que la meilleure façon de maîtriser quelque chose est de se lancer et expérimenter. + Que ce soit en déployant un nouveau service, en codant un projet personnel, ou en démontant un serveur pour comprendre son fonctionnement, + c'est dans la pratique que naît la véritable compréhension. +

+
+ + +
From d05237bc315e711f68715a6290365519495fb720 Mon Sep 17 00:00:00 2001 From: Claude Date: Thu, 20 Nov 2025 17:35:27 +0000 Subject: [PATCH 2/6] Streamline About page - remove bloat, focus on essentials Simplified the About page to be more concise and direct: Removed: - Stats section (10+ years, 50+ projects, etc.) - Passions section (3 feature cards) - Philosophy section with quote - Excessive paragraph breaks and storytelling Kept: - Clean header with gradient name and role badges - Single concise bio paragraph (4 sentences) - Skills section with 4 categories - All hover animations and visual polish The page now gets straight to the point while maintaining a modern, professional look. Content reduced from ~330 lines to ~145 lines. --- src/routes/about/+page.svelte | 257 +++++----------------------------- 1 file changed, 36 insertions(+), 221 deletions(-) diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte index 0b21ea7..fa7ef17 100644 --- a/src/routes/about/+page.svelte +++ b/src/routes/about/+page.svelte @@ -7,16 +7,8 @@ Terminal, Code2, Server, - Wrench, - Music, - Zap, - Brain, - Heart, - Sparkles, Cpu, - Database, - Globe, - Box + Sparkles } from "lucide-svelte"; const startDate = new Date('2003-06-11'); @@ -24,14 +16,11 @@ const yearsSince = (): number => { const now = new Date(); let years = now.getFullYear() - startDate.getFullYear(); - const monthDiff = now.getMonth() - startDate.getMonth(); const dayDiff = now.getDate() - startDate.getDate(); - if (monthDiff < 0 || (monthDiff === 0 && dayDiff < 0)) { years--; } - return years; }; @@ -40,67 +29,32 @@ category: "Développement", icon: Code2, color: "text-blue-500", - items: [ - "JavaScript/TypeScript", - "Python", - "Svelte/SvelteKit", - "React", - "Node.js", - "Web APIs" - ] + items: ["JavaScript/TypeScript", "Python", "Svelte/SvelteKit", "React", "Node.js"] }, { category: "Infrastructure", icon: Server, color: "text-green-500", - items: [ - "Linux Administration", - "Docker & Containers", - "Proxmox", - "Networking", - "Monitoring", - "Automation" - ] + items: ["Linux", "Docker", "Proxmox", "Networking", "Monitoring"] }, { category: "Hardware", icon: Cpu, color: "text-orange-500", - items: [ - "Server Architecture", - "Hardware Diagnostics", - "System Building", - "Component Selection", - "Performance Tuning", - "Troubleshooting" - ] + items: ["Server Architecture", "Diagnostics", "Building", "Performance Tuning"] }, { category: "Autres", icon: Sparkles, color: "text-purple-500", - items: [ - "Électronique", - "Musique", - "Conception 3D", - "Domotique", - "IoT", - "Sécurité" - ] + items: ["Électronique", "Musique", "Domotique", "IoT"] } ]; - - const stats = [ - { label: "Années d'expérience", value: "10+", icon: Terminal }, - { label: "Projets réalisés", value: "50+", icon: Box }, - { label: "Technologies maîtrisées", value: "20+", icon: Brain }, - { label: "Tasses de café", value: "∞", icon: Zap } - ]; Az' - À propos de moi - + -
- -
-
- +
+ +
+
+
-

+

Dylan "Az'" R.

-

- Passionné de technologie & Autodidacte +

+ {yearsSince()} ans • Passionné de technologie & Autodidacte

-
+
Developer @@ -171,67 +92,39 @@ Sysadmin - - Hardware Enthusiast + + Hardware
- -
- {#each stats as stat, i} - - -
{stat.value}
-
{stat.label}
- - {/each} -
- - -
-
- -

Qui je suis

- _ -
+ +
-
-

- Bonjour! Je suis Dylan R., aussi connu sous le pseudo Az' sur internet. - À {yearsSince()} ans, je suis un passionné de technologie qui aime explorer et maîtriser de nouveaux domaines en autodidacte. -

-

- Mon parcours dans la tech a commencé il y a plus de 10 ans, et depuis, je n'ai jamais cessé d'apprendre. - Ce qui me motive, c'est la curiosité sans limite et l'envie de comprendre comment les choses fonctionnent, - que ce soit au niveau logiciel ou matériel. -

-

- Au fil des années, j'ai développé une expertise dans le développement web, la gestion d'infrastructures serveurs, - et le hardware. Mais ma passion ne s'arrête pas là - j'explore également l'électronique, la domotique, et même la musique! -

-
+

+ Développeur et administrateur système autodidacte depuis plus de 10 ans. + Je travaille principalement avec JavaScript/TypeScript, Python, et je gère des infrastructures Linux/Docker. + Au-delà du code et des serveurs, j'explore l'électronique, la domotique et la musique. + Chaque projet est une opportunité d'apprendre quelque chose de nouveau. +

- -
-
- -

Compétences & Technologies

- _ -
+ +
+

+ + Compétences +

-
- {#each skills as skillGroup, i} +
+ {#each skills as skillGroup} - - -
- -
+ + + {skillGroup.category} @@ -248,82 +141,4 @@ {/each}
- - -
-
- -

Ce qui me passionne

- _ -
- -
- - -
- -
-

Développement

-

- Créer des applications web modernes et performantes avec les dernières technologies. - J'aime construire des interfaces élégantes et des systèmes robustes. -

- - - - - -
- -
-

Infrastructure

-

- Concevoir et maintenir des infrastructures serveurs efficaces. - De la virtualisation au monitoring, j'adore optimiser les systèmes. -

- - - - - -
- -
-

Expérimentation

-

- Toujours curieux d'explorer de nouveaux domaines : électronique, IoT, domotique, musique... - L'apprentissage permanent est mon moteur. -

- - -
-
- - -
- - -
-
- -
-
-

Ma philosophie

-
- "La technologie n'est pas juste un outil, c'est un terrain de jeu infini. - Chaque projet est une opportunité d'apprendre, chaque problème est un puzzle à résoudre, - et chaque ligne de code est une petite victoire." -
-
-
-
-

- En tant qu'autodidacte, j'ai appris que la meilleure façon de maîtriser quelque chose est de se lancer et expérimenter. - Que ce soit en déployant un nouveau service, en codant un projet personnel, ou en démontant un serveur pour comprendre son fonctionnement, - c'est dans la pratique que naît la véritable compréhension. -

-
- - -
From c054f8f1d50f68a8d98a899a3df876945c3025f4 Mon Sep 17 00:00:00 2001 From: Claude Date: Thu, 20 Nov 2025 17:37:39 +0000 Subject: [PATCH 3/6] Reframe About page as personal portfolio, not dev resume MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Made the page less developer-focused and more balanced: Changes: - Removed tech-specific role badges (Developer, Sysadmin, Hardware) - Simplified header to just age and location - Changed "Compétences" to "Centres d'intérêt" (Skills → Interests) - Removed specific tech stack mentions (JS/TS, Python, React, etc.) - Used general terms instead (web development, servers, networks) - Added Creativity section highlighting music and DIY projects - Rewrote bio to focus on passion and learning, not credentials - Added lightbulb icon for more personal touch The page now presents a well-rounded individual with diverse interests rather than a technical resume. --- src/routes/about/+page.svelte | 97 +++++++++++++++++------------------ 1 file changed, 47 insertions(+), 50 deletions(-) diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte index fa7ef17..188792d 100644 --- a/src/routes/about/+page.svelte +++ b/src/routes/about/+page.svelte @@ -4,11 +4,12 @@ import { flyAndScale } from "$lib/utils"; import { UserCircle, - Terminal, - Code2, + Laptop, Server, - Cpu, - Sparkles + Wrench, + Music, + Lightbulb, + Zap } from "lucide-svelte"; const startDate = new Date('2003-06-11'); @@ -24,37 +25,37 @@ return years; }; - const skills = [ + const interests = [ { - category: "Développement", - icon: Code2, + category: "Technologie", + icon: Laptop, color: "text-blue-500", - items: ["JavaScript/TypeScript", "Python", "Svelte/SvelteKit", "React", "Node.js"] - }, - { - category: "Infrastructure", - icon: Server, - color: "text-green-500", - items: ["Linux", "Docker", "Proxmox", "Networking", "Monitoring"] + items: ["Développement web", "Serveurs", "Réseaux", "Automatisation"] }, { category: "Hardware", - icon: Cpu, + icon: Wrench, color: "text-orange-500", - items: ["Server Architecture", "Diagnostics", "Building", "Performance Tuning"] + items: ["Architecture serveur", "Assemblage", "Optimisation", "Diagnostic"] }, { - category: "Autres", - icon: Sparkles, + category: "Électronique", + icon: Zap, + color: "text-yellow-500", + items: ["Circuits", "IoT", "Domotique", "Prototypage"] + }, + { + category: "Créativité", + icon: Music, color: "text-purple-500", - items: ["Électronique", "Musique", "Domotique", "IoT"] + items: ["Musique", "Conception 3D", "Projets DIY", "Expérimentation"] } ]; Az' - À propos de moi - + diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte index 188792d..49ed0e9 100644 --- a/src/routes/about/+page.svelte +++ b/src/routes/about/+page.svelte @@ -2,6 +2,7 @@ import { Card, CardHeader, CardTitle, CardContent } from "$lib/components/ui/card/index.js"; import { Badge } from "$lib/components/ui/badge"; import { flyAndScale } from "$lib/utils"; + import FloatingOrbs from "$lib/components/FloatingOrbs.svelte"; import { UserCircle, Laptop, @@ -71,7 +72,9 @@ } -
+ + +
From 61a084abf19932c929a427325dc5de29aa696bdb Mon Sep 17 00:00:00 2001 From: Claude Date: Thu, 20 Nov 2025 17:46:12 +0000 Subject: [PATCH 5/6] Make FloatingOrbs more subtle and fix title quotes Orbs adjustments for subtlety: - Reduced orb count from 15 to 10 - Reduced opacity range from 0.3-0.5 to 0.15-0.25 - Reduced orb radius from 20-60px to 15-40px - Reduced speed from 0.2-0.5 to 0.1-0.25 - Reduced connection line opacity from 0.08 to 0.04 - Reduced connection line width from 1px to 0.5px - Reduced glow gradient opacity by ~50% - Reduced core orb opacity by ~50% - Reduced connection distance from 200px to 180px Title quote fix: - Changed double quotes around "Az'" to HTML entities (“ ”) - Used ’ for the apostrophe in Az' - Prevents quote conflicts with HTML attributes The orbs are now much more subtle and serve as ambient background rather than a focal point. --- src/lib/components/FloatingOrbs.svelte | 26 +++++++++++++------------- src/routes/about/+page.svelte | 2 +- 2 files changed, 14 insertions(+), 14 deletions(-) diff --git a/src/lib/components/FloatingOrbs.svelte b/src/lib/components/FloatingOrbs.svelte index 4f5b475..600d1b6 100644 --- a/src/lib/components/FloatingOrbs.svelte +++ b/src/lib/components/FloatingOrbs.svelte @@ -20,8 +20,8 @@ } let orbs: Orb[] = []; - const orbCount = 15; - const connectionDistance = 200; + const orbCount = 10; + const connectionDistance = 180; const colors = [ { h: 180, s: 60, l: 50 }, // Teal (primary) @@ -39,7 +39,7 @@ for (let i = 0; i < orbCount; i++) { const colorData = colors[Math.floor(Math.random() * colors.length)]; - const speed = 0.2 + Math.random() * 0.3; + const speed = 0.1 + Math.random() * 0.15; const angle = Math.random() * Math.PI * 2; orbs.push({ @@ -47,12 +47,12 @@ y: Math.random() * height, vx: Math.cos(angle) * speed, vy: Math.sin(angle) * speed, - radius: 20 + Math.random() * 40, + radius: 15 + Math.random() * 25, color: `hsl(${colorData.h}, ${colorData.s}%, ${colorData.l}%)`, - glowIntensity: 0.15 + Math.random() * 0.1, - pulseSpeed: 0.5 + Math.random() * 0.8, + glowIntensity: 0.08 + Math.random() * 0.05, + pulseSpeed: 0.4 + Math.random() * 0.5, pulseOffset: Math.random() * Math.PI * 2, - opacity: 0.3 + Math.random() * 0.2 + opacity: 0.15 + Math.random() * 0.1 }); } } @@ -70,12 +70,12 @@ const distance = Math.sqrt(dx * dx + dy * dy); if (distance < connectionDistance) { - const opacity = (1 - distance / connectionDistance) * 0.08; + const opacity = (1 - distance / connectionDistance) * 0.04; ctx.beginPath(); ctx.moveTo(orbs[i].x, orbs[i].y); ctx.lineTo(orbs[j].x, orbs[j].y); ctx.strokeStyle = `hsla(180, 50%, 60%, ${opacity})`; - ctx.lineWidth = 1; + ctx.lineWidth = 0.5; ctx.stroke(); } } @@ -103,8 +103,8 @@ orb.x, orb.y, 0, orb.x, orb.y, currentRadius * 2 ); - gradient.addColorStop(0, orb.color.replace(')', `, ${currentOpacity * 0.6})`).replace('hsl', 'hsla')); - gradient.addColorStop(0.5, orb.color.replace(')', `, ${currentOpacity * 0.2})`).replace('hsl', 'hsla')); + gradient.addColorStop(0, orb.color.replace(')', `, ${currentOpacity * 0.3})`).replace('hsl', 'hsla')); + gradient.addColorStop(0.5, orb.color.replace(')', `, ${currentOpacity * 0.1})`).replace('hsl', 'hsla')); gradient.addColorStop(1, orb.color.replace(')', ', 0)').replace('hsl', 'hsla')); ctx.fillStyle = gradient; @@ -117,8 +117,8 @@ orb.x, orb.y, 0, orb.x, orb.y, currentRadius ); - coreGradient.addColorStop(0, orb.color.replace(')', `, ${currentOpacity})`).replace('hsl', 'hsla')); - coreGradient.addColorStop(1, orb.color.replace(')', `, ${currentOpacity * 0.3})`).replace('hsl', 'hsla')); + coreGradient.addColorStop(0, orb.color.replace(')', `, ${currentOpacity * 0.5})`).replace('hsl', 'hsla')); + coreGradient.addColorStop(1, orb.color.replace(')', `, ${currentOpacity * 0.15})`).replace('hsl', 'hsla')); ctx.fillStyle = coreGradient; ctx.beginPath(); diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte index 49ed0e9..ec3af81 100644 --- a/src/routes/about/+page.svelte +++ b/src/routes/about/+page.svelte @@ -81,7 +81,7 @@

- Dylan "Az'" R. + Dylan “Az’” R.

{yearsSince()} ans • Belgique From c52b1133a1f3ff1e37b5defff0267c9d15667caa Mon Sep 17 00:00:00 2001 From: Claude Date: Thu, 20 Nov 2025 17:48:11 +0000 Subject: [PATCH 6/6] Use regular apostrophe in Az' while keeping HTML entity quotes Changed ’ back to regular apostrophe ' in "Az'" while keeping “ and ” for the double quotes. This prevents confusion - the double quotes are the ones that typically conflict with HTML attributes, not the apostrophe. Result: Dylan "Az'" R. with proper typographic double quotes. --- src/routes/about/+page.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte index ec3af81..008962f 100644 --- a/src/routes/about/+page.svelte +++ b/src/routes/about/+page.svelte @@ -81,7 +81,7 @@

- Dylan “Az’” R. + Dylan “Az'” R.

{yearsSince()} ans • Belgique