fix: rendering issues on chrome for background effect

src/components/effects/GradientBlinds.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef } from 'react';
-import { Renderer, Program, Mesh, Triangle } from 'ogl';
+import { Renderer, Program, Mesh, Geometry } from 'ogl';
 import './GradientBlinds.css';
 
 export interface GradientBlindsProps {
@@ -60,8 +60,8 @@ const GradientBlinds: React.FC<GradientBlindsProps> = ({
   const containerRef = useRef<HTMLDivElement | null>(null);
   const rafRef = useRef<number | null>(null);
   const programRef = useRef<Program | null>(null);
-  const meshRef = useRef<Mesh<Triangle> | null>(null);
-  const geometryRef = useRef<Triangle | null>(null);
+  const meshRef = useRef<Mesh | null>(null);
+  const geometryRef = useRef<Geometry | null>(null);
   const rendererRef = useRef<Renderer | null>(null);
   const mouseTargetRef = useRef<[number, number]>([0, 0]);
   const lastTimeRef = useRef<number>(0);
@@ -98,7 +98,7 @@ void main() {
 
     const fragment = `
 #ifdef GL_ES
-precision mediump float;
+precision highp float;
 #endif
 
 uniform vec3  iResolution;
@@ -264,7 +264,13 @@ void main() {
     });
     programRef.current = program;
 
-    const geometry = new Triangle(gl);
+    // Create a quad (two triangles) to ensure full screen coverage without relying on a single large triangle
+    // which might face precision or clipping issues on some GPU/browser combinations.
+    const geometry = new Geometry(gl, {
+      position: { size: 2, data: new Float32Array([-1, -1, 3, -1, -1, 3]) },
+      uv: { size: 2, data: new Float32Array([0, 0, 2, 0, 0, 2]) }
+    });
+    
     geometryRef.current = geometry;
     const mesh = new Mesh(gl, { geometry, program });
     meshRef.current = mesh;

src/components/sections/Hero.module.css

@@ -18,6 +18,17 @@
   z-index: 0;
 }
 
+.overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: radial-gradient(circle at 50% 40%, rgba(0, 0, 0, 0.6) 0%, transparent 65%);
+  pointer-events: none;
+  z-index: 1;
+}
+
 .content {
   position: relative;
   z-index: 1;
@@ -38,6 +49,7 @@
   margin-bottom: var(--space-md);
   letter-spacing: 0.05em;
   text-transform: uppercase;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
 }
 
 .title {
@@ -56,6 +68,7 @@
   -webkit-text-fill-color: transparent;
   background-clip: text;
   animation: shimmer 3s ease-in-out infinite;
+  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.5));
 }
 
 @keyframes shimmer {
@@ -77,6 +90,7 @@
   color: var(--md-sys-color-on-surface);
   opacity: 0.9;
   margin-bottom: var(--space-2xl);
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
 }
 
 .typed {

src/components/sections/Hero.tsx

@@ -64,6 +64,7 @@ export function Hero() {
           shineDirection="left"
           mixBlendMode="lighten"
         />
+        <div className={styles.overlay} />
       </div>
 
       <div className={`${styles.content} container`}>