Enhance Hero and Overlay components for improved responsiveness

- Introduced constants for camera positions in the Hero component to optimize rendering based on device type.
- Updated camera position logic to dynamically adjust for mobile and desktop views.
- Refined Overlay component layout for better alignment and responsiveness across different screen sizes.

Author: valebearzotti

src/components/hero/index.tsx

@@ -16,6 +16,9 @@ import { Overlay } from "../overlay";
 const DESKTOP_HEIGHT = 256;
 const MOBILE_HEIGHT = 356;
 
+const DESKTOP_CAMERA_POSITION = 2.3;
+const MOBILE_CAMERA_POSITION = 2.7;
+
 export const HeroASCII = () => {
   const containerRef = useRef<HTMLDivElement>(null);
   useEffect(() => {
@@ -93,15 +96,20 @@ void main() {
   }
   fragColor = vec4(col, 1.0);
 }`;
+
+    const isMobile = () => window.innerWidth < 768;
+
     const renderer = new Renderer({ antialias: true });
     const gl = renderer.gl;
     containerRef.current?.appendChild(gl.canvas);
     const camera = new Camera(gl, { near: 0.1, far: 100 });
-    camera.position.set(2.2, 2.2, 2.2);
+    camera.position.set(
+      isMobile()
+        ? new Vec3(MOBILE_CAMERA_POSITION)
+        : new Vec3(DESKTOP_CAMERA_POSITION)
+    );
     camera.lookAt(new Vec3(0, 0, 0));
 
-    const isMobile = () => window.innerWidth < 768; // Common breakpoint for mobile
-
     const updateSize = () => {
       const height = isMobile() ? MOBILE_HEIGHT : DESKTOP_HEIGHT;
       renderer.setSize(window.innerWidth - 32, window.innerHeight - height);

src/components/overlay/index.tsx

@@ -2,11 +2,11 @@ export const Overlay = () => {
   return (
     <div className="absolute inset-0 z-50 flex items-center justify-center">
       <div className="w-full h-full relative">
-        <div className="absolute top-12 right-12 text-white bg-black w-[264px] text-right font-mono text-sm pl-4 py-2">
+        <div className="absolute top-1 md:top-12 left-1/2 -translate-x-1/2 md:left-auto md:right-12 md:translate-x-0 text-white bg-black w-[274px] lg:w-[264px] text-right font-mono text-sm lg:pl-4 py-2">
           Vortex is a highly performant, extensible columnar data format
         </div>
 
-        <div className="absolute bottom-1 left-14 text-white bg-black w-[324px] text-left font-mono text-sm px-4 py-2">
+        <div className="absolute bottom-1 left-1/2 -translate-x-1/2 md:left-14 md:translate-x-0 text-white bg-black w-[274px] lg:w-[324px] text-left font-mono text-sm lg:px-4 py-2">
           It&apos;s both a file format and a memory format, enabling compute
           over compressed data
         </div>