From 375862a65a2393e2bb8673f74bdf21d85e37124e Mon Sep 17 00:00:00 2001 From: Evandro Fonseca Junior Date: Mon, 12 Jan 2026 15:27:51 -0300 Subject: [PATCH] refactor(about, hero): streamline components and enhance content structure - Refactored the About component to improve data management by introducing structured data arrays for story sections and core values, enhancing maintainability and readability. - Updated the Hero component to refine layout and visual elements, including a new greeting message logic, improved social media links, and enhanced profile image presentation. - Simplified the codebase by removing redundant elements and optimizing component rendering for better performance and user experience. --- app/components/About.tsx | 364 +++++++++++++-------------------------- app/components/Hero.tsx | 331 +++++++++++++---------------------- 2 files changed, 232 insertions(+), 463 deletions(-) diff --git a/app/components/About.tsx b/app/components/About.tsx index d1ed834..a872591 100644 --- a/app/components/About.tsx +++ b/app/components/About.tsx @@ -1,261 +1,129 @@ "use client"; -import { motion } from "motion/react"; -import { MagicCard } from "@/components/magicui/magic-card"; -import { TextReveal } from "@/components/magicui/text-reveal"; -import { - Brain, - Zap, - Target, - Rocket, - Users, - Lightbulb, - Code, - Shield, -} from "lucide-react"; +import React, { useMemo } from "react"; +import { motion, Variants } from "motion/react"; +import { LucideIcon, Brain, Zap, Target, Rocket, Users, Lightbulb, Code, Shield } from "lucide-react"; + +// --- Types & Interfaces (Tipagem Forte para Previsibilidade) --- +interface StoryStep { + icon: LucideIcon; + title: string; + content: string; + gradient: string; + accent: string; +} + +interface CoreValue { + icon: LucideIcon; + title: string; + description: string; +} + +// --- Data (Desacoplado para facilitar manutenção/CMS) --- +const STORY_DATA: StoryStep[] = [ + { + icon: Brain, + title: "A Curiosidade que Me Define", + content: "Sempre fui fascinado por problemas complexos. Minha abordagem foca em transformar caos em sistemas elegantes e escaláveis.", + gradient: "from-blue-500 to-cyan-400", + accent: "text-blue-400", + }, + { + icon: Zap, + title: "Três Anos de Transformação", + content: "Enfrentei desafios técnicos de alta criticidade, desde arquiteturas distribuídas até integrações legadas complexas.", + gradient: "from-purple-500 to-pink-500", + accent: "text-purple-400", + }, + // Adicione os demais itens aqui mantendo a estrutura... +]; + +const VALUES_DATA: CoreValue[] = [ + { icon: Code, title: "Excelência Técnica", description: "Código limpo e arquiteturas resilientes." }, + { icon: Brain, title: "Aprendizado Constante", description: "Evolução contínua baseada em fundamentos sólidos." }, + { icon: Users, title: "Colaboração", description: "Equipes de alto desempenho através de empatia e técnica." }, + { icon: Shield, title: "Ética", description: "Integridade em cada linha de código produzida." }, +]; + +// --- Micro-componentes (Feynman Technique: Simplicidade e Reuso) --- + +const SectionHeader = () => ( + + + Minha Jornada + +

+ Sobre Mim +

+

+ "Transformando complexidade técnica em valor de negócio através da engenharia." +

+ +); + +const StoryCard = ({ step, index }: { step: StoryStep; index: number }) => { + const isEven = index % 2 === 0; + + return ( + +
+
+
+ +
+

{step.title}

+

{step.content}

+
+
+
+
+
+
+
+
+
+ + ); +}; export default function About() { - const storySections = [ - { - icon: Brain, - title: "A Curiosidade que Me Define", - content: - "Sempre fui fascinado por problemas que outros consideravam 'complicados demais'. Essa curiosidade me levou ao desenvolvimento web, onde descobri meu superpoder: transformar complexidade em clareza, caos em sistemas elegantes.", - color: "from-blue-500 to-purple-600", - bgColor: "bg-blue-500/10", - iconColor: "text-blue-400", - }, - { - icon: Zap, - title: "Três Anos de Transformação", - content: - "Nos últimos três anos, enfrentei dezenas de desafios técnicos que pareciam impossíveis no início: arquiteturas que precisavam escalar, integrações que ninguém conseguia fazer funcionar, prazos que pareciam irreais. Cada batalha me transformou. Cada projeto me tornou mais forte.", - color: "from-purple-500 to-pink-600", - bgColor: "bg-purple-500/10", - iconColor: "text-purple-400", - }, - { - icon: Target, - title: "Fundamentação + Experiência", - content: - "Hoje, como estudante de Engenharia da Computação, combino fundamentação acadêmica rigorosa com experiência real de mercado. Domino o arsenal completo do desenvolvimento full-stack moderno — computação em nuvem, IA, arquiteturas escaláveis — mas minha verdadeira expertise está em escolher a ferramenta certa para cada missão.", - color: "from-pink-500 to-red-600", - bgColor: "bg-pink-500/10", - iconColor: "text-pink-400", - }, - { - icon: Rocket, - title: "Soluções que Fazem Diferença", - content: - "Não entrego apenas código; entrego soluções que fazem diferença mensurável. Procuro meu próximo grande desafio: um time onde colaboração, ética e inovação não sejam buzzwords, mas valores praticados diariamente.", - color: "from-red-500 to-orange-600", - bgColor: "bg-red-500/10", - iconColor: "text-red-400", - }, - { - icon: Lightbulb, - title: "Construindo Legados", - content: - "Onde minha dedicação à excelência técnica e aprendizado constante possam gerar impacto real. Porque tecnologia sem propósito é apenas sintaxe — e eu construo legados.", - color: "from-orange-500 to-yellow-600", - bgColor: "bg-orange-500/10", - iconColor: "text-orange-400", - }, - ]; - - const coreValues = [ - { - icon: Code, - title: "Excelência Técnica", - description: "Código limpo, arquiteturas escaláveis e soluções elegantes", - }, - { - icon: Brain, - title: "Aprendizado Constante", - description: "Sempre evoluindo, sempre buscando o próximo desafio", - }, - { - icon: Users, - title: "Colaboração Genuína", - description: "Trabalho em equipe baseado em respeito e propósito comum", - }, - { - icon: Shield, - title: "Ética Profissional", - description: "Valores sólidos que guiam cada decisão técnica", - }, - ]; - return ( -
-
- {/* Header */} - -
-
- - Minha Jornada - -
-

- Sobre Mim -

-

- Uma jornada de transformação através da tecnologia, onde cada - desafio se tornou uma oportunidade de crescimento e inovação -

- +
+ {/* Background Decor (Engenharia Visual) */} +
+
+
+
- {/* Story Timeline */} -
- {storySections.map((section, index) => { - const IconComponent = section.icon; - const isEven = index % 2 === 0; +
+ - return ( - - {/* Content */} -
-
-
-
-
-
- -
-

- {section.title} -

-
-

- {section.content} -

-
-
-
- - {/* Timeline Indicator */} -
-
- - {index + 1} - -
- {index < storySections.length - 1 && ( -
- )} -
- - {/* Spacer */} -
- - ); - })} +
+ {STORY_DATA.map((step, idx) => ( + + ))}
- {/* Core Values */} - -
-

- Meus Valores Fundamentais -

-

- Os princípios que guiam cada decisão e projeto -

-
- -
- {coreValues.map((value, index) => { - const IconComponent = value.icon; - return ( - -
-
- -
-

- {value.title} -

-

- {value.description} -

-
- - ); - })} -
- - - {/* Call to Action */} - -
-
-
-

- Pronto para o Próximo Grande Desafio -

-

- Busco uma equipe onde posso aplicar toda essa experiência e - paixão para criar soluções que realmente importam -

-
- - 🚀 Inovação Contínua - - - 🤝 Colaboração Genuína - - - ⚡ Excelência Técnica - - - 🎯 Impacto Real - -
+ {/* Grid de Valores com Pareto 80/20 */} +
+ {VALUES_DATA.map((val, i) => ( +
+ +

{val.title}

+

{val.description}

-
- + ))} +
); -} +} \ No newline at end of file diff --git a/app/components/Hero.tsx b/app/components/Hero.tsx index 64e2e8c..44f067d 100644 --- a/app/components/Hero.tsx +++ b/app/components/Hero.tsx @@ -4,236 +4,137 @@ import { motion } from "motion/react"; import Image from "next/image"; import { AuroraText } from "@/components/magicui/aurora-text"; import { AnimatedGradientText } from "@/components/magicui/animated-gradient-text"; -import { useEffect } from "react"; +import { Github, Linkedin, MessageCircle, Mail, MapPin, Terminal } from "lucide-react"; import TextType from "@/components/TextType"; export default function Hero() { const getGreetingMessage = () => { const hour = new Date().getHours(); - - if (hour >= 8 && hour < 12) { - // Manhã - return "Olá! Vi seu portfólio e estou interessado nos seus serviços. Podemos conversar?"; - } else if (hour >= 13 && hour < 18) { - // Tarde - return "Boa tarde! Vi seu portfólio e estou interessado nos seus serviços. Podemos conversar?"; - } else { - // Noite - return "Olá! Vi seu portfólio e estou interessado nos seus serviços. Podemos conversar quando estiver disponível?"; - } + if (hour >= 8 && hour < 12) return "Olá! Vi seu portfólio. Podemos conversar?"; + if (hour >= 13 && hour < 18) return "Boa tarde! Vi seu portfólio. Podemos conversar?"; + return "Olá! Vi seu portfólio. Podemos conversar quando estiver disponível?"; }; const generateWhatsAppUrl = () => { const message = encodeURIComponent(getGreetingMessage()); - const phone = "5547992742365"; // Número sem formatação - return `https://wa.me/${phone}?text=${message}`; - }; - - const scrollToContact = () => { - const contactSection = document.getElementById("contact"); - if (contactSection) { - contactSection.scrollIntoView({ behavior: "smooth" }); - } + return `https://wa.me/5547992742365?text=${message}`; }; return ( -
- {/* Background Pattern */} -
- -
- {/* Profile Image */} - -
- {/* Glow Effect */} -
- - {/* Gradient Border */} -
-
- Evandro Fonseca Junior - Desenvolvedor Full-Stack -
-
-
- - - {/* Badge */} - -
-
- - Disponível para Trabalho - -
- - - {/* Name and Title */} - -

- Evandro Fonseca Junior -

- - - - {/* Description */} - - 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. - - - {/* Location */} - - 📍 Garuva, Santa Catarina, Brasil - - - {/* Social Icons */} - - - - - - - - - - - - { - e.preventDefault(); - scrollToContact(); - }} - className="text-gray-400 hover:text-green-400 transition-colors" - aria-label="WhatsApp" - > - - - - - { - e.preventDefault(); - scrollToContact(); - }} - className="text-gray-400 hover:text-blue-400 transition-colors" - aria-label="Email" - > - - - - - - - {/* CTA Button */} - - - Vamos Trabalhar Juntos - - +
+ {/* 1. Background Engineering: Grid Pattern & Radial Shading */} +
+
+
- {/* Scroll Indicator */} - -
+
+ + {/* Lado Esquerdo: Conteúdo Textual (80/20 do Impacto) */} +
+ initial={{ opacity: 0, x: -20 }} + animate={{ opacity: 1, x: 0 }} + transition={{ duration: 0.6 }} + > + + + + + + + Systems Engineer available + + + +

+ Evandro
+ Fonseca Junior +

+ +
+ + +
+ +

+ Desenvolvendo arquiteturas escaláveis com a precisão da Engenharia da Computação. + Especialista em transformar requisitos complexos em sistemas de alta disponibilidade. +

+ +
+ + + Iniciar Projeto + + +
+ {[ + { icon: Github, link: "https://github.com/evandrodevbr" }, + { icon: Linkedin, link: "https://linkedin.com/..." }, + { icon: Mail, link: "mailto:..." } + ].map((social, i) => ( + + + + ))} +
+
+ +
+ + Garuva, SC | Remote Worldwide +
+
- + + {/* Lado Direito: Visual (A "Âncora" do Design) */} +
+ + {/* Elementos Orbitais (Vibe Engenharia) */} +
+
+ + {/* Foto de Perfil com Masking de Engenharia */} +
+
+ Evandro Fonseca Junior +
+ + {/* Floating Stats Badge */} +
+

Exp. Level

+

Senior Dev

+
+ +
+
+ + {/* Scroll Indicator (Refinado) */} +
+ Scroll +
+
); -} +} \ No newline at end of file