From e77e0b5c0cf9b1339817fe6c1abc16ca7c07843e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C2=A8evandrodevbr=C2=A8?= <¨asemlk54@hotmail.com¨>
Date: Wed, 3 Sep 2025 02:06:27 -0300
Subject: [PATCH] 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        |  8 ++++----
 app/globals.css                |  3 ++-
 components/Squares.tsx         |  2 +-
 components/magicui/squares.tsx |  2 ++
 public/portfolio-data.json     | 13 ++++++++++---
 5 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/app/components/Hero.tsx b/app/components/Hero.tsx
index ab8e480..d95c184 100644
--- a/app/components/Hero.tsx
+++ b/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
diff --git a/app/globals.css b/app/globals.css
index 3c7d0b1..ea577dd 100644
--- a/app/globals.css
+++ b/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];
   }
 }
 
diff --git a/components/Squares.tsx b/components/Squares.tsx
index 901585c..acd2cee 100644
--- a/components/Squares.tsx
+++ b/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>
   );
 };
diff --git a/components/magicui/squares.tsx b/components/magicui/squares.tsx
index a3f441e..8946080 100644
--- a/components/magicui/squares.tsx
+++ b/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);
 
diff --git a/public/portfolio-data.json b/public/portfolio-data.json
index 1e100e5..50cc9e0 100644
--- a/public/portfolio-data.json
+++ b/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",