feat: Initialize portfolio website with core sections, smooth scrolling, scroll reveal animations, and comprehensive SEO.

app/components/Skills.tsx

@@ -2,6 +2,7 @@
 
 import { usePortfolioData } from "@/lib/usePortfolioData";
 import { Section } from "./Section";
+import { Reveal } from "./Reveal";
 
 export default function Skills() {
   const { data, loading, error } = usePortfolioData();
@@ -18,23 +19,26 @@ export default function Skills() {
       title="Stack modular para produto, operação e escala"
       description="Ferramentas escolhidas por previsibilidade operacional, velocidade de entrega e facilidade de manutenção."
       dark
+      disableChildrenAnimation
     >
       <div className="ds-grid-2">
         {data.skills.technical.map((category, index) => (
-          <article key={category.category} className="ds-card">
-            <div className="flex items-center justify-between gap-sp-4">
-              <div className="ds-kicker">ID_0{index + 1}X</div>
-              <div className="ds-metric">{category.skills.length} items</div>
-            </div>
-            <h3 className="ds-card-title">{category.category}</h3>
-            <ul className="ds-tags mt-sp-6">
-              {category.skills.map((skill) => (
-                <li key={skill} className="ds-tag">
-                  {skill}
-                </li>
-              ))}
-            </ul>
-          </article>
+          <Reveal key={category.category} y={40} duration={0.8} delay={0.1 * index}>
+            <article className="ds-card h-full">
+              <div className="flex items-center justify-between gap-sp-4">
+                <div className="ds-kicker">ID_0{index + 1}X</div>
+                <div className="ds-metric">{category.skills.length} items</div>
+              </div>
+              <h3 className="ds-card-title">{category.category}</h3>
+              <ul className="ds-tags mt-sp-6">
+                {category.skills.map((skill) => (
+                  <li key={skill} className="ds-tag">
+                    {skill}
+                  </li>
+                ))}
+              </ul>
+            </article>
+          </Reveal>
         ))}
       </div>
     </Section>