feat: initialize portfolio site with core components, pages, and content structure, and update Next.js configuration.

app/components/Experience.tsx

@@ -1,11 +1,10 @@
-"use client";
+"use client";
 
 import { useMemo } from "react";
 import { motion, type Variants, useReducedMotion } from "framer-motion";
 import { usePortfolioData } from "@/lib/usePortfolioData";
 import { Section } from "./Section";
 import { DrawLine } from "./animations/DrawLine";
-import { CounterValue } from "./animations/CounterValue";
 import { SectionLoading } from "./SectionLoading";
 
 export default function Experience() {
@@ -24,11 +23,11 @@ export default function Experience() {
   }, [data]);
 
   if (loading) {
-    return <SectionLoading message="Loading system logs" />;
+    return <SectionLoading message="Loading selected experience" />;
   }
 
   if (error || !data) {
-    return <div className="ds-error">Error loading system logs</div>;
+    return <div className="ds-error">Error loading selected experience</div>;
   }
 
   const listVariants: Variants = {
@@ -58,9 +57,9 @@ export default function Experience() {
   return (
     <Section
       id="experience"
-      eyebrow="SYSTEM_LOGS.history"
-      title="Trajetoria focada em produto, legado e crescimento sustentavel"
-      description="Experiencias recentes onde combinei entrega rapida com responsabilidade arquitetural."
+      eyebrow="Selected experience"
+      title="Experiencia em engenharia de software e sistemas criticos"
+      description="Projetos e contextos em que combinei arquitetura de software, integracoes complexas e entrega com responsabilidade operacional."
       disableChildrenAnimation
     >
       <motion.div
@@ -86,33 +85,28 @@ export default function Experience() {
             whileTap={shouldReduceMotion ? undefined : { scale: 0.995 }}
             transition={{ type: "spring", stiffness: 170, damping: 20 }}
           >
-            <div className="flex flex-col lg:grid lg:grid-cols-[1fr_auto] gap-sp-4 items-start">
-              <div>
+            <div className="flex flex-col gap-sp-4 lg:flex-row lg:items-start lg:justify-between">
+              <div className="max-w-[720px]">
                 <div className="ds-kicker">{exp.period}</div>
                 <DrawLine delay={0.04} />
                 <h3 className="ds-card-title">{exp.title}</h3>
-                <div className="mt-sp-3 text-[11px] uppercase tracking-[0.1em] text-meta">
-                  {exp.company} | {exp.type}
-                </div>
-              </div>
-              <div className="flex flex-wrap items-start justify-start gap-sp-3 lg:justify-end">
-                <span className="ds-tag">{exp.location}</span>
-                <span className="ds-tag">
-                  <CounterValue
-                    value={exp.technologies.length}
-                    suffix=" tecnologias"
-                  />
-                </span>
+                <p className="mt-sp-3 text-[13px] leading-6 text-[rgba(10,10,10,.64)] dark:text-[rgba(255,255,255,.6)]">
+                  {exp.company} • {exp.type}
+                </p>
               </div>
+              <div className="ds-metric">{exp.location}</div>
             </div>
+
             <p className="ds-copy">{exp.description}</p>
+
             <ul className="ds-list">
               {exp.achievements?.map((achievement) => (
                 <li key={achievement}>{achievement}</li>
               ))}
             </ul>
+
             <ul className="ds-tags mt-sp-6">
-              {exp.technologies?.map((tech) => (
+              {exp.technologies?.slice(0, 6).map((tech) => (
                 <li key={tech} className="ds-tag">
                   {tech}
                 </li>
@@ -124,3 +118,5 @@ export default function Experience() {
     </Section>
   );
 }
+
+