1 Commits

Author SHA1 Message Date
google-labs-jules[bot]
d817d42174 perf(effects): reduce GC pressure in GradientBlinds animation loop
Refactors `GradientBlinds` to use mutable references for pointer position tracking instead of creating new objects on every `pointermove` event and animation frame. This reduces Garbage Collection overhead during high-frequency updates.

- Changes `pointerPosRef` to a stable object with an `active` flag.
- Updates `mouseTargetRef` (array) in-place instead of reassigning.
- Ensures distinct array references for dampening logic to prevent aliasing bugs.

Co-authored-by: ragusa-it <196988693+ragusa-it@users.noreply.github.com>
2026-02-01 02:08:43 +00:00
3 changed files with 157 additions and 181 deletions

View File

@@ -65,7 +65,8 @@ const GradientBlinds: React.FC<GradientBlindsProps> = ({
const rendererRef = useRef<Renderer | null>(null); const rendererRef = useRef<Renderer | null>(null);
const mouseTargetRef = useRef<[number, number]>([0, 0]); const mouseTargetRef = useRef<[number, number]>([0, 0]);
// Optimization: store raw pointer position (viewport coords) to decouple event handling from calculation // Optimization: store raw pointer position (viewport coords) to decouple event handling from calculation
const pointerPosRef = useRef<{ x: number; y: number } | null>(null); // Changed to a stable object to avoid GC pressure in high-frequency event handlers
const pointerPosRef = useRef<{ x: number; y: number; active: boolean }>({ x: 0, y: 0, active: false });
const isMobileRef = useRef<boolean>(false); const isMobileRef = useRef<boolean>(false);
const lastTimeRef = useRef<number>(0); const lastTimeRef = useRef<number>(0);
const firstResizeRef = useRef<boolean>(true); const firstResizeRef = useRef<boolean>(true);
@@ -304,7 +305,8 @@ void main() {
const cx = gl.drawingBufferWidth / 2; const cx = gl.drawingBufferWidth / 2;
const cy = gl.drawingBufferHeight / 2; const cy = gl.drawingBufferHeight / 2;
uniforms.iMouse.value = [cx, cy]; uniforms.iMouse.value = [cx, cy];
mouseTargetRef.current = [cx, cy]; mouseTargetRef.current[0] = cx;
mouseTargetRef.current[1] = cy;
} }
}; };
@@ -332,10 +334,13 @@ void main() {
x = (e.clientX - rect.left) * scale; x = (e.clientX - rect.left) * scale;
y = (rect.height - (e.clientY - rect.top)) * scale; y = (rect.height - (e.clientY - rect.top)) * scale;
} }
mouseTargetRef.current = [x, y]; mouseTargetRef.current[0] = x;
pointerPosRef.current = null; // Ensure loop doesn't override mouseTargetRef.current[1] = y;
pointerPosRef.current.active = false; // Ensure loop doesn't override
} else { } else {
pointerPosRef.current = { x: e.clientX, y: e.clientY }; pointerPosRef.current.x = e.clientX;
pointerPosRef.current.y = e.clientY;
pointerPosRef.current.active = true;
} }
}; };
@@ -344,7 +349,7 @@ void main() {
uniforms.iTime.value = t * 0.001; uniforms.iTime.value = t * 0.001;
// Update target based on pointer position and scroll offset // Update target based on pointer position and scroll offset
if (pointerPosRef.current) { if (pointerPosRef.current.active) {
const scale = (renderer as unknown as { dpr?: number }).dpr || 1; const scale = (renderer as unknown as { dpr?: number }).dpr || 1;
let x, y; let x, y;
@@ -361,7 +366,8 @@ void main() {
x = (pointerPosRef.current.x - rect.left) * scale; x = (pointerPosRef.current.x - rect.left) * scale;
y = (rect.height - (pointerPosRef.current.y - rect.top)) * scale; y = (rect.height - (pointerPosRef.current.y - rect.top)) * scale;
} }
mouseTargetRef.current = [x, y]; mouseTargetRef.current[0] = x;
mouseTargetRef.current[1] = y;
} }
if (mouseDampening > 0) { if (mouseDampening > 0) {
@@ -376,8 +382,13 @@ void main() {
cur[0] += (target[0] - cur[0]) * factor; cur[0] += (target[0] - cur[0]) * factor;
cur[1] += (target[1] - cur[1]) * factor; cur[1] += (target[1] - cur[1]) * factor;
} else { } else {
if (pointerPosRef.current || isMobileRef.current) { if (pointerPosRef.current.active || isMobileRef.current) {
uniforms.iMouse.value = mouseTargetRef.current; // In no-dampening mode, update values directly.
// We copy values instead of assigning the reference to avoid aliasing issues
// (where cur and target become the same array) if dampening is enabled later
// without re-creating uniforms (though currently effect deps handle that).
uniforms.iMouse.value[0] = mouseTargetRef.current[0];
uniforms.iMouse.value[1] = mouseTargetRef.current[1];
} }
lastTimeRef.current = t; lastTimeRef.current = t;
} }

View File

@@ -1,94 +1,78 @@
export const de = { export const de = {
// Navigation // Navigation
nav: { nav: {
home: "Startseite", home: 'Startseite',
about: "Über mich", about: 'Über uns',
contact: "Kontakt", contact: 'Kontakt',
}, },
// Hero Section // Hero Section
hero: { hero: {
greeting: "Willkommen bei", greeting: 'Willkommen bei',
company: "Ragusa IT-Consulting", company: 'Ragusa IT-Consulting',
tagline: "Websites, die", tagline: 'Ihr Partner für',
rotatingWords: [ rotatingWords: ['Webentwicklung', 'IT-Support', 'Digitale Lösungen', 'Tech-Beratung'],
"Anfragen bringen", cta: 'Projekt starten',
"Kunden überzeugen", ctaSecondary: 'Mehr erfahren',
"messbar performen", scroll: 'Scrollen',
"Ihr Business stärken",
],
cta: "Kostenloses Erstgespräch",
ctaSecondary: "Warum Ragusa IT?",
scroll: "Scrollen",
}, },
// Services // Services
services: { services: {
title: "Leistungen mit Ergebnisfokus", title: 'Unsere Leistungen',
subtitle: subtitle: 'Professionelle IT-Lösungen für Ihr Unternehmen',
"Konkrete IT-Lösungen, die Zeit sparen und neue Anfragen ermöglichen",
items: [ items: [
{ {
title: "Webentwicklung", title: 'Webentwicklung',
description: description: 'Moderne, responsive Websites und Web-Applikationen mit React, TypeScript und aktuellen Technologien.',
"Conversion-orientierte Websites und Web-Apps, die Vertrauen schaffen und qualifizierte Leads generieren.", icon: 'code',
icon: "code",
}, },
{ {
title: "Tech-Support", title: 'Tech-Support',
description: description: 'Schnelle und zuverlässige technische Unterstützung für Hardware und Software vor Ort.',
"Schnelle Hilfe bei akuten Problemen, damit Ihr Betrieb ohne lange Ausfälle weiterläuft.", icon: 'support',
icon: "support",
}, },
{ {
title: "IT-Beratung", title: 'IT-Beratung',
description: description: 'Strategische Beratung für Ihre IT-Infrastruktur und digitale Transformation.',
"Praxisnahe Entscheidungen für Infrastruktur, Tools und Prozesse passend zu Ihrem Budget.", icon: 'consulting',
icon: "consulting",
}, },
{ {
title: "Hosting & Wartung", title: 'Hosting & Wartung',
description: description: 'Zuverlässiges Webhosting, regelmäßige Updates und proaktive Wartung Ihrer Systeme.',
"Stabile Betreuung mit Updates, Monitoring und klaren Verantwortlichkeiten für Ihre Webpräsenz.", icon: 'hosting',
icon: "hosting",
}, },
], ],
}, },
// About // About
about: { about: {
title: "Über mich", title: 'Über uns',
subtitle: "Ihr persönlicher IT-Partner", subtitle: 'Ihr lokaler IT-Partner',
intro: intro: 'Ragusa IT-Consulting bietet professionelle IT-Dienstleistungen mit persönlichem Service. Wir kombinieren technische Expertise mit einem tiefen Verständnis für die Bedürfnisse unserer Kunden.',
"Ich bin Melvin Ragusa und unterstütze als Einzelunternehmer Unternehmen und Selbstständige mit persönlichem IT-Service. Mein Fokus: klare Lösungen statt unnötiger Komplexität.", experience: 'Mit jahrelanger Erfahrung in der Webentwicklung und IT-Beratung unterstützen wir Unternehmen und Privatpersonen dabei, ihre technischen Herausforderungen zu meistern.',
experience:
"Mit Erfahrung in Webentwicklung und IT-Beratung helfe ich dabei, technische Herausforderungen schnell und pragmatisch zu lösen.",
skills: { skills: {
title: "Technologien", title: 'Technologien',
subtitle: "Moderne Tools für moderne Lösungen", subtitle: 'Moderne Tools für moderne Lösungen',
}, },
values: { values: {
title: "Warum mit mir arbeiten?", title: 'Warum Ragusa IT?',
items: [ items: [
{ {
title: "Direkter Kontakt", title: 'Persönlicher Service',
description: description: 'Direkter Ansprechpartner für alle Ihre IT-Anliegen.',
"Sie sprechen immer direkt mit mir ohne Umwege oder wechselnde Ansprechpartner.",
}, },
{ {
title: "Nahbar & vor Ort", title: 'Lokale Präsenz',
description: description: 'Vor-Ort-Support und persönliche Beratungsgespräche.',
"Ich bin lokal erreichbar und begleite Sie auf Wunsch auch persönlich vor Ort.",
}, },
{ {
title: "Faire, klare Preise", title: 'Faire Preise',
description: description: 'Transparente Preisgestaltung ohne versteckte Kosten.',
"Ich arbeite mit transparenter Preisstruktur ohne versteckte Zusatzkosten.",
}, },
{ {
title: "Schnelle Rückmeldung", title: 'Schnelle Reaktion',
description: description: 'Kurze Reaktionszeiten bei Anfragen und Problemen.',
"Ich antworte zeitnah auf Anfragen und kümmere mich pragmatisch um Probleme.",
}, },
], ],
}, },
@@ -96,40 +80,38 @@ export const de = {
// Contact // Contact
contact: { contact: {
title: "Kontakt", title: 'Kontakt',
subtitle: "Lassen Sie uns zusammenarbeiten", subtitle: 'Lassen Sie uns zusammenarbeiten',
intro: intro: 'Haben Sie ein Projekt im Sinn oder benötigen Sie technische Unterstützung? Ich freue mich auf Ihre Nachricht!',
"Beschreiben Sie kurz Ihr Projekt oder Problem ich melde mich schnell mit einer konkreten Einschätzung und nächstem Schritt.",
form: { form: {
name: "Name", name: 'Name',
namePlaceholder: "Ihr Name", namePlaceholder: 'Ihr Name',
email: "E-Mail", email: 'E-Mail',
emailPlaceholder: "ihre@email.de", emailPlaceholder: 'ihre@email.de',
subject: "Betreff", subject: 'Betreff',
subjectPlaceholder: "Worum geht es?", subjectPlaceholder: 'Worum geht es?',
message: "Nachricht", message: 'Nachricht',
messagePlaceholder: "Ihre Nachricht...", messagePlaceholder: 'Ihre Nachricht...',
submit: "Nachricht senden", submit: 'Nachricht senden',
sending: "Wird gesendet...", sending: 'Wird gesendet...',
success: "Nachricht erfolgreich gesendet! Ich melde mich bald bei Ihnen.", success: 'Nachricht erfolgreich gesendet! Ich melde mich bald bei Ihnen.',
error: error: 'Fehler beim Senden. Bitte versuchen Sie es erneut oder kontaktieren Sie mich direkt.',
"Fehler beim Senden. Bitte versuchen Sie es erneut oder kontaktieren Sie mich direkt.", rateLimit: 'Zu viele Anfragen. Bitte warten Sie einen Moment.',
rateLimit: "Zu viele Anfragen. Bitte warten Sie einen Moment.",
}, },
info: { info: {
title: "Kontaktdaten", title: 'Kontaktdaten',
email: "E-Mail", email: 'E-Mail',
location: "Standort", location: 'Standort',
github: "GitHub", github: 'GitHub',
}, },
}, },
// Footer // Footer
footer: { footer: {
copyright: "© {year} Ragusa IT-Consulting. Alle Rechte vorbehalten.", copyright: '© {year} Ragusa IT-Consulting. Alle Rechte vorbehalten.',
madeIn: "Entwickelt in Deutschland mit", madeIn: 'Entwickelt in Deutschland mit',
love: "Liebe", love: 'Liebe',
impressum: "Impressum", impressum: 'Impressum',
}, },
}; };

View File

@@ -1,96 +1,80 @@
import type { Translations } from "./de"; import type { Translations } from './de';
export const en: Translations = { export const en: Translations = {
// Navigation // Navigation
nav: { nav: {
home: "Home", home: 'Home',
about: "About Me", about: 'About',
contact: "Contact", contact: 'Contact',
}, },
// Hero Section // Hero Section
hero: { hero: {
greeting: "Welcome to", greeting: 'Welcome to',
company: "Ragusa IT-Consulting", company: 'Ragusa IT-Consulting',
tagline: "Websites that", tagline: 'Your partner for',
rotatingWords: [ rotatingWords: ['Web Development', 'IT Support', 'Digital Solutions', 'Tech Consulting'],
"generate leads", cta: 'Start Project',
"convert visitors", ctaSecondary: 'Learn More',
"perform measurably", scroll: 'Scroll',
"support your growth",
],
cta: "Book a Free Discovery Call",
ctaSecondary: "Why Ragusa IT?",
scroll: "Scroll",
}, },
// Services // Services
services: { services: {
title: "Services Built for Outcomes", title: 'Our Services',
subtitle: subtitle: 'Professional IT solutions for your business',
"Practical IT solutions that save time and help you win new clients",
items: [ items: [
{ {
title: "Web Development", title: 'Web Development',
description: description: 'Modern, responsive websites and web applications built with React, TypeScript, and cutting-edge technologies.',
"Conversion-focused websites and web apps that build trust and generate qualified leads.", icon: 'code',
icon: "code",
}, },
{ {
title: "Tech Support", title: 'Tech Support',
description: description: 'Fast and reliable technical support for hardware and software, available on-site.',
"Fast help for critical issues so your day-to-day operations keep running smoothly.", icon: 'support',
icon: "support",
}, },
{ {
title: "IT Consulting", title: 'IT Consulting',
description: description: 'Strategic consulting for your IT infrastructure and digital transformation.',
"Hands-on guidance for infrastructure, tools, and processes aligned with your budget.", icon: 'consulting',
icon: "consulting",
}, },
{ {
title: "Hosting & Maintenance", title: 'Hosting & Maintenance',
description: description: 'Reliable web hosting, regular updates, and proactive maintenance of your systems.',
"Reliable care with updates, monitoring, and clear ownership for your online presence.", icon: 'hosting',
icon: "hosting",
}, },
], ],
}, },
// About // About
about: { about: {
title: "About Me", title: 'About Us',
subtitle: "Your personal IT partner", subtitle: 'Your local IT partner',
intro: intro: 'Ragusa IT-Consulting provides professional IT services with a personal touch. We combine technical expertise with a deep understanding of our clients\' needs.',
"I'm Melvin Ragusa, and I run Ragusa IT-Consulting as a solo business. I help companies and freelancers with hands-on IT support and web solutions — focused on clear, practical outcomes.", experience: 'With years of experience in web development and IT consulting, we help businesses and individuals overcome their technical challenges.',
experience:
"With experience in web development and IT consulting, I help businesses and individuals solve technical challenges quickly and pragmatically.",
skills: { skills: {
title: "Technologies", title: 'Technologies',
subtitle: "Modern tools for modern solutions", subtitle: 'Modern tools for modern solutions',
}, },
values: { values: {
title: "Why work with me?", title: 'Why Ragusa IT?',
items: [ items: [
{ {
title: "Direct Contact", title: 'Personal Service',
description: description: 'Direct point of contact for all your IT needs.',
"You always work directly with me — no handoffs and no changing points of contact.",
}, },
{ {
title: "Local & Accessible", title: 'Local Presence',
description: description: 'On-site support and in-person consultations.',
"I am locally available and can support you on-site when needed.",
}, },
{ {
title: "Fair, Clear Pricing", title: 'Fair Pricing',
description: description: 'Transparent pricing with no hidden costs.',
"I work with transparent pricing and no hidden extra fees.",
}, },
{ {
title: "Fast Response", title: 'Quick Response',
description: description: 'Short response times for inquiries and issues.',
"I reply quickly and handle issues in a practical, no-nonsense way.",
}, },
], ],
}, },
@@ -98,38 +82,37 @@ export const en: Translations = {
// Contact // Contact
contact: { contact: {
title: "Contact", title: 'Contact',
subtitle: "Let's work together", subtitle: 'Let\'s work together',
intro: intro: 'Have a project in mind or need technical support? I look forward to hearing from you!',
"Share your project or issue briefly — I'll reply quickly with a concrete assessment and recommended next action.",
form: { form: {
name: "Name", name: 'Name',
namePlaceholder: "Your name", namePlaceholder: 'Your name',
email: "Email", email: 'Email',
emailPlaceholder: "your@email.com", emailPlaceholder: 'your@email.com',
subject: "Subject", subject: 'Subject',
subjectPlaceholder: "What is it about?", subjectPlaceholder: 'What is it about?',
message: "Message", message: 'Message',
messagePlaceholder: "Your message...", messagePlaceholder: 'Your message...',
submit: "Send Message", submit: 'Send Message',
sending: "Sending...", sending: 'Sending...',
success: "Message sent successfully! I'll get back to you soon.", success: 'Message sent successfully! I\'ll get back to you soon.',
error: "Error sending message. Please try again or contact me directly.", error: 'Error sending message. Please try again or contact me directly.',
rateLimit: "Too many requests. Please wait a moment.", rateLimit: 'Too many requests. Please wait a moment.',
}, },
info: { info: {
title: "Contact Info", title: 'Contact Info',
email: "Email", email: 'Email',
location: "Location", location: 'Location',
github: "GitHub", github: 'GitHub',
}, },
}, },
// Footer // Footer
footer: { footer: {
copyright: "© {year} Ragusa IT-Consulting. All rights reserved.", copyright: '© {year} Ragusa IT-Consulting. All rights reserved.',
madeIn: "Made in Germany with", madeIn: 'Made in Germany with',
love: "love", love: 'love',
impressum: "Imprint", impressum: 'Imprint',
}, },
}; };