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).

app/components/Hero.tsx

@@ -71,7 +71,7 @@ export default function Hero() {
           transition={{ duration: 0.8, delay: 0.2 }}
           className="mb-8"
         >
-          <h1 className="text-3xl md:text-5xl lg:text-6xl font-black mb-6 leading-tight text-gray-200">
+          <h1 className="text-3xl md:text-5xl lg:text-6xl font-black mb-1 leading-tight text-gray-300">
             Evandro Fonseca Junior
           </h1>
           <RotatingText
@@ -93,8 +93,8 @@ export default function Hero() {
           transition={{ duration: 0.8, delay: 0.4 }}
           className="text-xl md:text-2xl lg:text-3xl text-gray-300 max-w-3xl mx-auto mb-12 leading-relaxed"
         >
-          Especialista em soluções web modernas e inovadoras. Formado em
-          Engenharia da Computação, com conhecimentos em computação em nuvem e
+          Focado em soluções web modernas e inovadoras. Formado em Engenharia da
+          Computação, com sólidos conhecimentos em computação em nuvem e
           inteligência artificial.
         </motion.p>
 
@@ -196,7 +196,7 @@ export default function Hero() {
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
         transition={{ duration: 0.8, delay: 1.2 }}
-        className="absolute bottom-8 left-1/2 transform -translate-x-1/2"
+        className="absolute bottom-2 left-1/2 transform -translate-x-1/2"
       >
         <div className="w-6 h-10 border-2 border-white/30 rounded-full flex justify-center">
           <motion.div

app/globals.css

@@ -141,8 +141,9 @@
   * {
     @apply border-border outline-ring/50;
   }
+  html,
   body {
-    @apply bg-background text-foreground;
+    @apply bg-background text-foreground overflow-x-hidden max-w-[100vw];
   }
 }
 

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);
 

public/portfolio-data.json

@@ -111,17 +111,24 @@
         "icon": "Database",
         "color": "text-blue-400",
         "bgColor": "bg-blue-500/20",
-        "skills": ["Node.js", "PHP", "MySQL", "APIs RESTful", "Firebase"]
+        "skills": [
+          "Node.js",
+          "PHP",
+          "MySQL",
+          "Python",
+          "APIs RESTful",
+          "Firebase"
+        ]
       },
       {
         "category": "DevOps & Tools",
         "icon": "GitBranch",
         "color": "text-blue-400",
         "bgColor": "bg-blue-500/20",
-        "skills": ["GitHub Actions", "Git", "Jest & Testing", "Vercel", "CI/CD"]
+        "skills": ["GitHub Actions", "Git", "Vercel", "Docker", "Cloudflare"]
       },
       {
-        "category": "Especialidades",
+        "category": "Foco",
         "icon": "Cpu",
         "color": "text-blue-400",
         "bgColor": "bg-blue-500/20",