main: add webgl fallback for browsers that have it disabled.

components/elements/ContactThreeJsComponent.jsx

@@ -9,12 +9,21 @@ import { DotScreenShader } from "three/examples/jsm/shaders/DotScreenShader.js";
 const ContactThreeJsComponent = React.memo(() => {
   const [isMounted, setIsMounted] = useState(false);
   const mountRef = useRef(null);
+  const [webGLSupported, setWebGLSupported] = useState(true);
 
   useEffect(() => {
     setIsMounted(true);
 
     if (isMounted) {
       console.log("useEffect called");
+
+      if (!checkWebGLSupport()) {
+        // Handle browsers that do not support WebGL
+        console.error("WebGL not supported");
+        setWebGLSupported(false);
+        return;
+      }
+
       let camera, renderer, composer;
       let object;
 
@@ -106,7 +115,29 @@ const ContactThreeJsComponent = React.memo(() => {
     }
   }, [isMounted]);
 
-  return <div ref={mountRef} />;
+  const checkWebGLSupport = () => {
+    try {
+      const canvas = document.createElement("canvas");
+      return !!(
+        window.WebGLRenderingContext &&
+        (canvas.getContext("webgl") || canvas.getContext("experimental-webgl"))
+      );
+    } catch (e) {
+      return false;
+    }
+  };
+
+  return (
+    <div class="h-[100%] w-[100%]" ref={mountRef}>
+      {!webGLSupported && (
+        <img
+          src="/web-gl-fallback.png"
+          alt="webgl is disabled in your browser"
+          style={{ width: "100%", height: "100%", objectFit: "cover" }}
+        />
+      )}
+    </div>
+  );
 });
 
 export default ContactThreeJsComponent;

components/layouts/ContactFormSection.jsx

@@ -1,30 +1,24 @@
 import ContactButton from "../buttons/ContactButton.jsx";
 import ContactThreeJsComponent from "../elements/ContactThreeJsComponent.jsx";
 
-const ContactFormSection = ({
-  text,
-  buttonText,
-  email,
-}) => {
+const ContactFormSection = ({ text, buttonText, email }) => {
   return (
     <>
-    <div id="contact" className="relative z-10 h-screen w-screen">
-      <div className="absolute inset-0 z-0">
-        <ContactThreeJsComponent />
-        
-      </div>
-      <div className="relative z-10 flex flex-col items-center justify-center h-full">
-        <div className="relative flex justify-center items-end w-full mb-20">
-          <h1 className="lg:text-5xl md:text-4xl sm:text-3xl text-3xl text-center text-white break-normal">{text}</h1>
+      <div id="contact" className="relative z-10 h-screen w-screen">
+        <div className="absolute inset-0 z-0">
+          <ContactThreeJsComponent />
         </div>
-        <div className="flex justify-start space-x-4 text-center text-white break-normal">
-        <ContactButton
-        buttonText={buttonText}
-        email={email}
-        />
+        <div className="relative z-10 flex flex-col items-center justify-center h-full">
+          <div className="relative flex justify-center items-end w-full mb-20">
+            <h1 className="lg:text-5xl md:text-4xl sm:text-3xl text-3xl text-center text-white break-normal">
+              {text}
+            </h1>
+          </div>
+          <div className="flex justify-start space-x-4 text-center text-white break-normal">
+            <ContactButton buttonText={buttonText} email={email} />
+          </div>
         </div>
       </div>
-    </div>
     </>
   );
 };