diff --git a/app/components/About.tsx b/app/components/About.tsx index 5ccc90e..fd42ad4 100644 --- a/app/components/About.tsx +++ b/app/components/About.tsx @@ -1,8 +1,9 @@ "use client"; -import React, { useMemo } from "react"; -import { motion, Variants } from "motion/react"; -import { LucideIcon, Brain, Zap, Target, Rocket, Users, Lightbulb, Code, Shield } from "lucide-react"; +import React from "react"; +import { motion } from "framer-motion"; +import { LucideIcon, Brain, Zap, Target, Rocket, Users, Lightbulb, Code, Shield, Terminal, Cpu } from "lucide-react"; +import Squares from "@/components/Squares"; // --- Types & Interfaces (Tipagem Forte para Previsibilidade) --- interface StoryStep { @@ -11,6 +12,7 @@ interface StoryStep { content: string; gradient: string; accent: string; + id: string; } interface CoreValue { @@ -22,6 +24,7 @@ interface CoreValue { // --- Data (Desacoplado para facilitar manutenção/CMS) --- const STORY_DATA: StoryStep[] = [ { + id: "KERNEL_INIT", icon: Brain, title: "Engenharia de Fundamentos", content: "Minha mentalidade é pautada pela redução de entropia. Não apenas escrevo código; projeto sistemas onde a escalabilidade é uma propriedade intrínseca da arquitetura, não um ajuste posterior.", @@ -29,6 +32,7 @@ const STORY_DATA: StoryStep[] = [ accent: "text-blue-400", }, { + id: "RUNTIME_EXEC", icon: Zap, title: "Entrega sob Restrições", content: "Em 3 anos de atuação profissional, especializei-me em cenários de alta criticidade. Atuei na ponte entre sistemas legados e microserviços, garantindo a resolução do problema.", @@ -38,73 +42,94 @@ const STORY_DATA: StoryStep[] = [ ]; const VALUES_DATA: CoreValue[] = [ - { - icon: Code, - title: "Pragmatismo Arquitetural", - description: "Priorizo a manutenibilidade e a resiliência. Código limpo é o meio, sistemas que geram ROI são o fim." + { + icon: Code, + title: "Pragmatismo Arquitetural", + description: "Priorizo a manutenibilidade e a resiliência. Código limpo é o meio, sistemas que geram ROI são o fim." }, - { - icon: Brain, - title: "Fundacionalismo Técnico", - description: "Domínio profundo de estruturas de dados e protocolos. Tecnologias mudam, fundamentos são perenes." + { + icon: Brain, + title: "Fundacionalismo Técnico", + description: "Domínio profundo de estruturas de dados e protocolos. Tecnologias mudam, fundamentos são perenes." }, - { - icon: Users, - title: "Propriedade e Ownership", - description: "Comunicação de baixa latência e responsabilidade radical sobre cada entrega e decisão técnica." + { + icon: Users, + title: "Propriedade e Ownership", + description: "Comunicação de baixa latência e responsabilidade radical sobre cada entrega e decisão técnica." }, - { - icon: Shield, - title: "Security by Design", - description: "Integridade e conformidade técnica (GDPR/LGPD) tratadas como requisitos funcionais, não opcionais." + { + icon: Shield, + title: "Security by Design", + description: "Integridade e conformidade técnica (GDPR/LGPD) tratadas como requisitos funcionais, não opcionais." }, ]; // --- Micro-componentes (Feynman Technique: Simplicidade e Reuso) --- const SectionHeader = () => ( - - - Minha Jornada - -

- Sobre Mim -

-

+

+ + + WHOAMI.sys + + + Engenharia
+ Nuclear + +

"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 ( -
-
-
- +
+ {/* Background Glow */} +
+ +
+
+
+ +
+ + {step.id} + +
+ +

{step.title}

+

{step.content}

-

{step.title}

-

{step.content}

-
-
-
-
-
+ + {/* Connection Line & Node */} +
+
+
+
); @@ -112,17 +137,20 @@ const StoryCard = ({ step, index }: { step: StoryStep; index: number }) => { export default function About() { return ( -
- {/* Background Decor (Engenharia Visual) */} -
-
-
+
+ {/* Background Gradients */} +
+
+
-
+
+ {/* Center Line for Mobile/Desktop */} +
+ {STORY_DATA.map((step, idx) => ( ))} @@ -131,21 +159,33 @@ export default function About() { {/* Grid de Valores com Pareto 80/20 */}
{VALUES_DATA.map((val, i) => ( -
- -

{val.title}

-

{val.description}

-
+ +
+ +
+

{val.title}

+

{val.description}

+ ))}
{/* SEO Semantic Content - Visible but subtle */} -
-

- Evandro Fonseca Junior é Engenheiro Full-Stack especializado em Next.js, - React, Angular e Node.js. Desenvolvedor de aplicações desktop com Tauri, - sistemas web escaláveis e automação de processos. Experiência em PostgreSQL, - MySQL, computação em nuvem e IoT. Localizado em Garuva, Santa Catarina, Brasil. +

+
+ + System_Signature +
+

+ Evandro Fonseca Junior :: Engenheiro Full-Stack
+ Next.js / React / Angular / Node.js / Tauri / PostgreSQL / IoT
+ Garuva, Santa Catarina, Brasil :: Lat: -26.0264, Long: -48.8544

diff --git a/app/components/Contact.tsx b/app/components/Contact.tsx index 3315f82..b9213c6 100644 --- a/app/components/Contact.tsx +++ b/app/components/Contact.tsx @@ -4,10 +4,11 @@ import React, { useState } from "react"; import { motion } from "framer-motion"; import { Send, User, Mail, MessageSquare, Sparkles } from "lucide-react"; import { ShimmerButton as MagicShimmerButton } from "@/components/magicui/shimmer-button"; +import Squares from "@/components/Squares"; // --- CONFIGURAÇÃO DE ENGENHARIA --- // Substitua pelo seu número real: CódigoPaís + DDD + Número (sem espaços ou símbolos) -const WHATSAPP_NUMBER = "5547992742365"; +const WHATSAPP_NUMBER = "5547992742365"; interface FormData { name: string; @@ -71,17 +72,17 @@ export default function Contact() { chat: "\u{1F4AC}" }; - const messageTemplate = `*NOVA REQUISICAO DE PROJETO* + const messageTemplate = `*NOVA SOLICITAÇÃO DE PROJETO* -*Origem:* Portfolio Profissional +*Origem:* Portfólio Profissional *Prioridade:* Alta (Lead Qualificado) --- *CLIENTE:* ${formData.name} *EMAIL:* ${formData.email} - *AREA:* ${formData.subject.toUpperCase()} + *ÁREA:* ${formData.subject.toUpperCase()} - *DESCRICAO:* + *DESCRIÇÃO:* "${formData.message}" --- _Mensagem gerada via Evandro.dev | Garuva, SC_`; @@ -94,102 +95,129 @@ _Mensagem gerada via Evandro.dev | Garuva, SC_`; }; const inputStyles = - "w-full bg-slate-950/50 border border-slate-800 rounded-xl px-4 py-3 text-slate-200 placeholder:text-slate-600 focus:border-blue-500/50 focus:ring-2 focus:ring-blue-500/10 outline-none transition-all duration-300 font-mono text-sm"; + "w-full bg-black/40 border border-white/5 rounded-xl px-4 py-3 text-slate-200 placeholder:text-slate-600 focus:border-blue-500/50 focus:ring-2 focus:ring-blue-500/10 focus:bg-black/60 outline-none transition-all duration-300 font-mono text-sm backdrop-blur-sm group-hover:border-white/10"; const labelStyles = - "text-xs font-bold text-slate-500 uppercase tracking-widest mb-2 flex items-center gap-2"; + "text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-2 flex items-center gap-2 transition-colors group-hover:text-slate-400"; return ( -
-
-
-
- - setFormData({ ...formData, name: e.target.value })} - /> +
+ + +
+ +
+ +
+

+ Vamos Construir o Futuro +

+

+ Descreva seu desafio técnico. Retorno com uma arquitetura sólida em até 24h. +

-
- - setFormData({ ...formData, email: e.target.value })} - /> -
-
+ +
+
+ + setFormData({ ...formData, name: e.target.value })} + /> +
-
- - -
- -
- -