feat: add randomized portfolio hero variants

app/components/About.tsx

@@ -1,7 +1,7 @@
-"use client";
+"use client";
 
 import { motion, type Variants, useReducedMotion } from "framer-motion";
-import profilePhoto from "@/public/edev.jpeg";
+import profilePhoto from "@/public/edev.jpg";
 import { Section } from "./Section";
 import { DrawLine } from "./animations/DrawLine";
 import { LazyRevealImage } from "./animations/LazyRevealImage";
@@ -19,6 +19,12 @@ const STORY_DATA = [
     content:
       "Trabalho bem em contextos com legado, integracoes complexas e pouca margem para erro, priorizando estabilidade, leitura tecnica e evolucao sustentavel.",
   },
+  {
+    label: "Production mindset",
+    title: "Do codigo ao sistema no ar",
+    content:
+      "Penso alem da feature: deploy, observabilidade, manutencao e riscos de operacao entram na decisao tecnica desde o primeiro corte.",
+  },
 ];
 
 const PROFILE_POINTS = [
@@ -91,7 +97,7 @@ export default function About() {
       }
     >
       <motion.div
-        className="ds-grid-2"
+        className="ds-grid-2 items-start"
         initial="hidden"
         whileInView="visible"
         viewport={{ once: true, amount: 0.2 }}
@@ -128,8 +134,8 @@ export default function About() {
           <LazyRevealImage
             src={profilePhoto}
             alt="Retrato de Evandro"
-            className="mb-sp-6 h-[220px] w-full overflow-hidden rounded-[6px] border border-[var(--border)]"
-            imageClassName="object-cover"
+            className="mb-sp-6 aspect-square w-full overflow-hidden rounded-[6px] border border-[var(--border)]"
+            imageClassName="object-contain"
           />
           <div className="ds-kicker">Technical profile</div>
           <DrawLine delay={0.05} />
@@ -158,5 +164,3 @@ export default function About() {
     </Section>
   );
 }
-
-