refactor(ui): adjust hero section styling and content

Refactor the Hero component to improve visual spacing and update descriptive text for clarity.
- Adjusted `h1` margin-bottom and text color for better visual hierarchy.
- Updated the descriptive paragraph to be more concise and impactful.
- Modified the scroll indicator's bottom position for improved placement.
- Ensured `html` and `body` elements prevent horizontal overflow.
- Applied `max-w-full` to canvas elements to prevent layout issues.
- Updated `portfolio-data.json` to refine skill categories and add new skills (Python, Docker, Cloudflare).

components/Squares.tsx

@@ -164,7 +164,7 @@ const Squares: React.FC<SquaresProps> = ({
   return (
     <canvas
       ref={canvasRef}
-      className="w-full h-full border-none block"
+      className="w-full h-full border-none block max-w-full"
     ></canvas>
   );
 };

components/magicui/squares.tsx

@@ -116,6 +116,8 @@ const Particles: React.FC<ParticlesProps> = ({
 
     const renderer = new Renderer({ depth: false, alpha: true });
     const gl = renderer.gl;
+    gl.canvas.style.maxWidth = "100%";
+    gl.canvas.style.maxHeight = "100%";
     container.appendChild(gl.canvas);
     gl.clearColor(0, 0, 0, 0);