From 1afa2f3cd877d9bcc66067aa241e8f557c1d5632 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Wed, 28 Jan 2026 01:56:37 +0000
Subject: [PATCH 1/5] =?UTF-8?q?=F0=9F=9B=A1=EF=B8=8F=20Sentinel:=20[HIGH]?=
 =?UTF-8?q?=20Add=20HSTS=20and=20Permissions-Policy=20headers?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Added Strict-Transport-Security (HSTS) and Permissions-Policy headers to firebase.json to improve security posture.

- HSTS ensures browsers only connect via HTTPS for 1 year.
- Permissions-Policy restricts usage of sensitive features (camera, mic, geolocation).

Co-authored-by: ragusa-it <196988693+ragusa-it@users.noreply.github.com>
---
 firebase.json | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/firebase.json b/firebase.json
index 50e9a41..1fc4858 100644
--- a/firebase.json
+++ b/firebase.json
@@ -24,6 +24,14 @@
             "key": "X-Frame-Options",
             "value": "DENY"
           },
+          {
+            "key": "Strict-Transport-Security",
+            "value": "max-age=31536000; includeSubDomains"
+          },
+          {
+            "key": "Permissions-Policy",
+            "value": "camera=(), microphone=(), geolocation=()"
+          },
           {
             "key": "Referrer-Policy",
             "value": "strict-origin-when-cross-origin"

From 669e96a77ca1ae2a0738153f2d61b17969ce5cee Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Wed, 28 Jan 2026 01:58:55 +0000
Subject: [PATCH 2/5] feat: optimize Hero component by isolating typing effect
 state

Extracted the high-frequency typing animation logic into a new, memoized `TypedText` component.
This prevents the entire `Hero` component (including the heavy `GradientBlinds`) from re-rendering on every character update.

- Created `TypedText` component in `Hero.tsx`
- Wrapped `TypedText` in `React.memo`
- Moved `useTypingEffect` call into `TypedText`
- Updated `Hero` to use `TypedText`

Co-authored-by: ragusa-it <196988693+ragusa-it@users.noreply.github.com>
---
 .jules/bolt.md                   |  4 ++++
 src/components/sections/Hero.tsx | 26 +++++++++++++++++---------
 2 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/.jules/bolt.md b/.jules/bolt.md
index a7efe75..8242db8 100644
--- a/.jules/bolt.md
+++ b/.jules/bolt.md
@@ -1,3 +1,7 @@
 ## 2024-05-22 - Missing Scripts and Environment
 **Learning:** The project lacks `lint` script in `package.json`. Running `pnpm lint` might invoke system tools (like Android Lint?) instead of failing or doing nothing useful. Always check `package.json` scripts first.
 **Action:** Use specific commands like `pnpm exec tsc --noEmit` or `npx vitest` as discovered/documented, rather than assuming standard scripts exist.
+
+## 2024-05-22 - High-Frequency State Isolation
+**Learning:** High-frequency state updates (like typing effects) in large parent components (`Hero`) trigger massive unnecessary re-renders of expensive sub-trees (`GradientBlinds`, `Button`).
+**Action:** Isolate high-frequency state into small, leaf-node components (e.g., `TypedText`) and wrap them in `React.memo` if necessary, keeping the heavy parent static.
diff --git a/src/components/sections/Hero.tsx b/src/components/sections/Hero.tsx
index b2c0d21..e9ef169 100644
--- a/src/components/sections/Hero.tsx
+++ b/src/components/sections/Hero.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef } from "react";
+import { useState, useEffect, useRef, memo } from "react";
 import { Link } from "react-router-dom";
 import { motion } from "motion/react";
 import { useTranslation } from "../../i18n";
@@ -9,6 +9,21 @@ import styles from "./Hero.module.css";
 
 const GRADIENT_COLORS = ["#26a269", "#8ff0a4"];
 
+interface TypedTextProps {
+  words: string[];
+}
+
+const TypedText = memo(({ words }: TypedTextProps) => {
+  const { text } = useTypingEffect({
+    words,
+    typingSpeed: 80,
+    deletingSpeed: 40,
+    pauseDuration: 2500,
+  });
+
+  return <>{text}</>;
+});
+
 export function Hero() {
   const { t } = useTranslation();
   const [showScrollIndicator, setShowScrollIndicator] = useState(true);
@@ -29,13 +44,6 @@ export function Hero() {
     return () => observer.disconnect();
   }, []);
 
-  const { text } = useTypingEffect({
-    words: t.hero.rotatingWords,
-    typingSpeed: 80,
-    deletingSpeed: 40,
-    pauseDuration: 2500,
-  });
-
   return (
     <section className={styles.hero}>
       <div
@@ -100,7 +108,7 @@ export function Hero() {
           >
             <span>{t.hero.tagline}</span>
             <span className={styles.typed}>
-              {text}
+              <TypedText words={t.hero.rotatingWords} />
               <span className={styles.cursor}>|</span>
             </span>
           </motion.div>

From e14ce38f615faab9715ad27d3c4cd861cf688196 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Wed, 28 Jan 2026 02:10:17 +0000
Subject: [PATCH 3/5] feat: add accessible required field indicators and alerts

- Add visual asterisk for required inputs in Input.tsx
- Add .required style in Input.module.css
- Update Contact form to use required props and noValidate
- Add role="alert" to Contact form success/error messages
- Add tests for required field rendering

Co-authored-by: ragusa-it <196988693+ragusa-it@users.noreply.github.com>
---
 .jules/palette.md                          |  3 +++
 src/components/ui/Input.module.css         |  5 +++++
 src/components/ui/Input.tsx                | 10 +++++++++
 src/components/ui/__tests__/Input.test.tsx | 24 ++++++++++++++++++++++
 src/pages/Contact.tsx                      | 14 ++++++++++++-
 5 files changed, 55 insertions(+), 1 deletion(-)
 create mode 100644 .jules/palette.md

diff --git a/.jules/palette.md b/.jules/palette.md
new file mode 100644
index 0000000..8c4d7fb
--- /dev/null
+++ b/.jules/palette.md
@@ -0,0 +1,3 @@
+## 2024-05-22 - Semantic Required Fields with Custom Validation
+**Learning:** To combine custom validation UI with semantic `required` attributes (vital for a11y), add `noValidate` to the `<form>`. This prevents native browser bubbles while keeping the accessibility benefits.
+**Action:** Use `noValidate` on forms when implementing custom validation but keep `required` attributes on inputs.
diff --git a/src/components/ui/Input.module.css b/src/components/ui/Input.module.css
index 6cb7aa9..3acc481 100644
--- a/src/components/ui/Input.module.css
+++ b/src/components/ui/Input.module.css
@@ -10,6 +10,11 @@
   color: var(--md-sys-color-on-surface);
 }
 
+.required {
+  color: var(--md-sys-color-error);
+  margin-left: 0.25rem;
+}
+
 .input {
   padding: var(--space-md);
   font-family: var(--md-sys-typescale-body-font);
diff --git a/src/components/ui/Input.tsx b/src/components/ui/Input.tsx
index b3d0c24..185bfbe 100644
--- a/src/components/ui/Input.tsx
+++ b/src/components/ui/Input.tsx
@@ -15,6 +15,11 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
       <div className={`${styles.field} ${error ? styles.hasError : ''} ${className || ''}`}>
         <label htmlFor={inputId} className={styles.label}>
           {label}
+          {props.required && (
+            <span className={styles.required} aria-hidden="true">
+              *
+            </span>
+          )}
         </label>
         <input
           ref={ref}
@@ -46,6 +51,11 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
       <div className={`${styles.field} ${error ? styles.hasError : ''} ${className || ''}`}>
         <label htmlFor={inputId} className={styles.label}>
           {label}
+          {props.required && (
+            <span className={styles.required} aria-hidden="true">
+              *
+            </span>
+          )}
         </label>
         <textarea
           ref={ref}
diff --git a/src/components/ui/__tests__/Input.test.tsx b/src/components/ui/__tests__/Input.test.tsx
index dd09cdd..bc99ca3 100644
--- a/src/components/ui/__tests__/Input.test.tsx
+++ b/src/components/ui/__tests__/Input.test.tsx
@@ -32,6 +32,19 @@ describe('Input', () => {
     expect(input.getAttribute('aria-invalid')).toBe('false');
     expect(input.hasAttribute('aria-describedby')).toBe(false);
   });
+
+  it('renders required asterisk when required prop is passed', () => {
+    render(<Input label="Required Input" required />);
+
+    // We search for the asterisk specifically
+    // Note: getByText('*') matches the content of the span
+    const asterisk = screen.getByText('*');
+    expect(asterisk).toBeTruthy();
+    expect(asterisk.getAttribute('aria-hidden')).toBe('true');
+
+    const input = screen.getByRole('textbox', { name: /Required Input/i });
+    expect(input.hasAttribute('required')).toBe(true);
+  });
 });
 
 describe('Textarea', () => {
@@ -49,4 +62,15 @@ describe('Textarea', () => {
     expect(error.id).toBeDefined();
     expect(error.id).not.toBe('');
   });
+
+  it('renders required asterisk when required prop is passed', () => {
+    render(<Textarea label="Required Textarea" required />);
+
+    const asterisk = screen.getByText('*');
+    expect(asterisk).toBeTruthy();
+    expect(asterisk.getAttribute('aria-hidden')).toBe('true');
+
+    const textarea = screen.getByRole('textbox', { name: /Required Textarea/i });
+    expect(textarea.hasAttribute('required')).toBe(true);
+  });
 });
diff --git a/src/pages/Contact.tsx b/src/pages/Contact.tsx
index 708d7c8..6747d4e 100644
--- a/src/pages/Contact.tsx
+++ b/src/pages/Contact.tsx
@@ -158,9 +158,14 @@ export function Contact() {
             >
               <p className={styles.intro}>{t.contact.intro}</p>
 
-              <form onSubmit={handleSubmit} className={styles.form}>
+              <form
+                onSubmit={handleSubmit}
+                className={styles.form}
+                noValidate
+              >
                 <Input
                   label={t.contact.form.name}
+                  required
                   placeholder={t.contact.form.namePlaceholder}
                   value={formData.name}
                   onChange={(e) => handleChange("name", e.target.value)}
@@ -170,6 +175,7 @@ export function Contact() {
                 <Input
                   label={t.contact.form.email}
                   type="email"
+                  required
                   placeholder={t.contact.form.emailPlaceholder}
                   value={formData.email}
                   onChange={(e) => handleChange("email", e.target.value)}
@@ -178,6 +184,7 @@ export function Contact() {
 
                 <Input
                   label={t.contact.form.subject}
+                  required
                   placeholder={t.contact.form.subjectPlaceholder}
                   value={formData.subject}
                   onChange={(e) => handleChange("subject", e.target.value)}
@@ -186,6 +193,7 @@ export function Contact() {
 
                 <Textarea
                   label={t.contact.form.message}
+                  required
                   placeholder={t.contact.form.messagePlaceholder}
                   value={formData.message}
                   onChange={(e) => handleChange("message", e.target.value)}
@@ -210,6 +218,8 @@ export function Contact() {
                     className={styles.success}
                     initial={{ opacity: 0, y: 10 }}
                     animate={{ opacity: 1, y: 0 }}
+                    role="alert"
+                    aria-live="polite"
                   >
                     {t.contact.form.success}
                   </motion.p>
@@ -220,6 +230,8 @@ export function Contact() {
                     className={styles.error}
                     initial={{ opacity: 0, y: 10 }}
                     animate={{ opacity: 1, y: 0 }}
+                    role="alert"
+                    aria-live="polite"
                   >
                     {t.contact.form.error}
                   </motion.p>

From bac867f228cd7782549af50ffe9646249c78350b Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Thu, 29 Jan 2026 01:40:38 +0000
Subject: [PATCH 4/5] perf(GradientBlinds): decouple pointer events from render
 loop

- Move scroll position and bounding client rect calculations from `pointermove` handler to `requestAnimationFrame` loop.
- Use `pointerPosRef` to store raw event coordinates, reducing overhead in high-frequency event handlers.
- Ensure spotlight effect correctly accounts for scroll position updates during animation frames.
- Add regression test to verify `scrollX` is not accessed during pointer events.

Co-authored-by: ragusa-it <196988693+ragusa-it@users.noreply.github.com>
---
 .../effects/GradientBlinds.test.tsx           | 38 +++++++++++----
 src/components/effects/GradientBlinds.tsx     | 48 +++++++++++--------
 2 files changed, 58 insertions(+), 28 deletions(-)

diff --git a/src/components/effects/GradientBlinds.test.tsx b/src/components/effects/GradientBlinds.test.tsx
index fdb4c45..2d3eb5b 100644
--- a/src/components/effects/GradientBlinds.test.tsx
+++ b/src/components/effects/GradientBlinds.test.tsx
@@ -176,17 +176,11 @@ describe('GradientBlinds', () => {
     unmount();
     expect(removeEventListenerSpy).toHaveBeenCalledWith('pointermove', expect.any(Function));
   });
+
   it('minimizes getBoundingClientRect calls during pointer move', () => {
     const { unmount } = render(<GradientBlinds />);
 
-    // Spy on getBoundingClientRect
-    // Note: In jsdom, canvas is an HTMLCanvasElement which inherits from HTMLElement
     const spy = vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect');
-
-    // Trigger pointer move to clear any initial calls or verify baseline
-    // The initial render calls resize(), which calls getBoundingClientRect on container
-
-    // Clear spy history from initial render
     spy.mockClear();
 
     act(() => {
@@ -198,9 +192,37 @@ describe('GradientBlinds', () => {
       window.dispatchEvent(event);
     });
 
-    // EXPECTATION: It should NOT be called because the listener shouldn't be attached (not visible)
     expect(spy).not.toHaveBeenCalled();
 
     unmount();
   });
+
+  it('avoids expensive DOM reads (scrollX/Y) in pointermove handler when visible', () => {
+    const { unmount } = render(<GradientBlinds />);
+
+    // Spy on scrollX/scrollY getters
+    // Note: In jsdom, these are properties on window.
+    const scrollSpy = vi.spyOn(window, 'scrollX', 'get');
+
+    // Make visible to attach listener
+    act(() => {
+      if (ioCallback) {
+        ioCallback([{ isIntersecting: true } as IntersectionObserverEntry]);
+      }
+    });
+
+    scrollSpy.mockClear();
+
+    // Trigger pointer move
+    act(() => {
+       window.dispatchEvent(new PointerEvent('pointermove', { clientX: 100, clientY: 100 }));
+    });
+
+    // With the optimization (moving to RAF loop), this should be 0.
+    // Without optimization, this will be > 0.
+    // Since we are mocking RAF and not running the loop, if it's in the loop, it won't be called.
+    expect(scrollSpy).not.toHaveBeenCalled();
+
+    unmount();
+  });
 });
diff --git a/src/components/effects/GradientBlinds.tsx b/src/components/effects/GradientBlinds.tsx
index 48c0a71..f53da04 100644
--- a/src/components/effects/GradientBlinds.tsx
+++ b/src/components/effects/GradientBlinds.tsx
@@ -64,6 +64,8 @@ const GradientBlinds: React.FC<GradientBlindsProps> = ({
   const geometryRef = useRef<Geometry | null>(null);
   const rendererRef = useRef<Renderer | null>(null);
   const mouseTargetRef = useRef<[number, number]>([0, 0]);
+  // Optimization: store raw pointer position (viewport coords) to decouple event handling from calculation
+  const pointerPosRef = useRef<{ x: number; y: number } | null>(null);
   const lastTimeRef = useRef<number>(0);
   const firstResizeRef = useRef<boolean>(true);
   const rectRef = useRef<DOMRect | null>(null);
@@ -309,31 +311,34 @@ void main() {
     ro.observe(container);
 
     const onPointerMove = (e: PointerEvent) => {
-      const scale = (renderer as unknown as { dpr?: number }).dpr || 1;
-      let x, y;
-
-      if (rectRef.current) {
-        const dx = window.scrollX - scrollPosRef.current.x;
-        const dy = window.scrollY - scrollPosRef.current.y;
-        const rectLeft = rectRef.current.left - dx;
-        const rectTop = rectRef.current.top - dy;
-        x = (e.clientX - rectLeft) * scale;
-        y = (rectRef.current.height - (e.clientY - rectTop)) * scale;
-      } else {
-        const rect = canvas.getBoundingClientRect();
-        x = (e.clientX - rect.left) * scale;
-        y = (rect.height - (e.clientY - rect.top)) * scale;
-      }
-
-      mouseTargetRef.current = [x, y];
-      if (mouseDampening <= 0) {
-        uniforms.iMouse.value = [x, y];
-      }
+      pointerPosRef.current = { x: e.clientX, y: e.clientY };
     };
 
     const loop = (t: number) => {
       rafRef.current = requestAnimationFrame(loop);
       uniforms.iTime.value = t * 0.001;
+
+      // Update target based on pointer position and scroll offset
+      if (pointerPosRef.current) {
+        const scale = (renderer as unknown as { dpr?: number }).dpr || 1;
+        let x, y;
+
+        if (rectRef.current) {
+          const dx = window.scrollX - scrollPosRef.current.x;
+          const dy = window.scrollY - scrollPosRef.current.y;
+          const rectLeft = rectRef.current.left - dx;
+          const rectTop = rectRef.current.top - dy;
+          x = (pointerPosRef.current.x - rectLeft) * scale;
+          y = (rectRef.current.height - (pointerPosRef.current.y - rectTop)) * scale;
+        } else {
+           // Fallback if rectRef missing
+           const rect = canvas.getBoundingClientRect();
+           x = (pointerPosRef.current.x - rect.left) * scale;
+           y = (rect.height - (pointerPosRef.current.y - rect.top)) * scale;
+        }
+        mouseTargetRef.current = [x, y];
+      }
+
       if (mouseDampening > 0) {
         if (!lastTimeRef.current) lastTimeRef.current = t;
         const dt = (t - lastTimeRef.current) / 1000;
@@ -346,6 +351,9 @@ void main() {
         cur[0] += (target[0] - cur[0]) * factor;
         cur[1] += (target[1] - cur[1]) * factor;
       } else {
+        if (pointerPosRef.current) {
+          uniforms.iMouse.value = mouseTargetRef.current;
+        }
         lastTimeRef.current = t;
       }
       if (!paused && programRef.current && meshRef.current) {

From e84a3313c79f116e84542b84b4f49915dd6355f9 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Thu, 29 Jan 2026 02:00:58 +0000
Subject: [PATCH 5/5] feat(security): enforce input length limits in contact
 form

- Added `EMAIL_MAX_LENGTH` constant (254).
- Added `maxLength` attributes to Name, Email, Subject, and Message inputs.
- Updated `validateForm` to check email length.
- Mitigates client-side DoS and improves UX.

Co-authored-by: ragusa-it <196988693+ragusa-it@users.noreply.github.com>
---
 src/pages/Contact.tsx | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/pages/Contact.tsx b/src/pages/Contact.tsx
index 708d7c8..1e85df1 100644
--- a/src/pages/Contact.tsx
+++ b/src/pages/Contact.tsx
@@ -9,6 +9,7 @@ import { sanitizeInput, isValidEmail } from "../utils/security";
 import styles from "./Contact.module.css";
 
 const NAME_MAX_LENGTH = 100;
+const EMAIL_MAX_LENGTH = 254;
 const SUBJECT_MAX_LENGTH = 200;
 const MESSAGE_MAX_LENGTH = 5000;
 
@@ -53,6 +54,8 @@ export function Contact() {
 
     if (!formData.email.trim()) {
       newErrors.email = "Required";
+    } else if (formData.email.length > EMAIL_MAX_LENGTH) {
+      newErrors.email = `Max ${EMAIL_MAX_LENGTH} characters`;
     } else if (!isValidEmail(formData.email)) {
       newErrors.email = "Invalid email";
     }
@@ -165,6 +168,7 @@ export function Contact() {
                   value={formData.name}
                   onChange={(e) => handleChange("name", e.target.value)}
                   error={errors.name}
+                  maxLength={NAME_MAX_LENGTH}
                 />
 
                 <Input
@@ -174,6 +178,7 @@ export function Contact() {
                   value={formData.email}
                   onChange={(e) => handleChange("email", e.target.value)}
                   error={errors.email}
+                  maxLength={EMAIL_MAX_LENGTH}
                 />
 
                 <Input
@@ -182,6 +187,7 @@ export function Contact() {
                   value={formData.subject}
                   onChange={(e) => handleChange("subject", e.target.value)}
                   error={errors.subject}
+                  maxLength={SUBJECT_MAX_LENGTH}
                 />
 
                 <Textarea
@@ -191,6 +197,7 @@ export function Contact() {
                   onChange={(e) => handleChange("message", e.target.value)}
                   error={errors.message}
                   rows={6}
+                  maxLength={MESSAGE_MAX_LENGTH}
                 />
 
                 <Button