From aa07d6faebc75ac4b1dfb0977ffc2db479a6fc67 Mon Sep 17 00:00:00 2001 From: Evandro Fonseca Junior Date: Sat, 7 Mar 2026 06:50:56 -0300 Subject: [PATCH] feat: Implement initial portfolio website structure with core components and a new post creator tool. --- app/components/About.tsx | 228 ++++----------- app/components/Contact.tsx | 296 +++++++------------ app/components/Experience.tsx | 214 +++----------- app/components/Header.tsx | 256 +++++++--------- app/components/Hero.tsx | 323 +++++++++++++-------- app/components/Projects.tsx | 267 +++++------------ app/components/Skills.tsx | 150 ++-------- app/components/WorkModalities.tsx | 296 +++++-------------- app/globals.css | 468 ++++++++++++++++++++---------- app/layout.tsx | 57 +--- app/page.tsx | 75 +---- pnpm-lock.yaml | 462 +++++++++++++++-------------- pnpm-workspace.yaml | 11 +- tailwind.config.js | 65 ++++- tsconfig.json | 24 +- 15 files changed, 1337 insertions(+), 1855 deletions(-) diff --git a/app/components/About.tsx b/app/components/About.tsx index fd42ad4..fadea9e 100644 --- a/app/components/About.tsx +++ b/app/components/About.tsx @@ -1,194 +1,90 @@ -"use client"; +import { Section } from "./Section"; -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 { - icon: LucideIcon; - title: string; - content: string; - gradient: string; - accent: string; - id: string; -} - -interface CoreValue { - icon: LucideIcon; - title: string; - description: string; -} - -// --- Data (Desacoplado para facilitar manutenção/CMS) --- -const STORY_DATA: StoryStep[] = [ +const STORY_DATA = [ { 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.", - gradient: "from-blue-600 to-cyan-500", - accent: "text-blue-400", + title: "Engenharia de fundamentos", + content: + "Projeto sistemas com foco em previsibilidade, manutenção e crescimento real. Escala entra na arquitetura desde o início.", }, { 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.", - gradient: "from-purple-600 to-pink-600", - accent: "text-purple-400", + title: "Entrega sob restrições", + content: + "Atuo bem em cenários com legado, prazos apertados e decisões de produto em movimento, sem sacrificar legibilidade técnica.", }, ]; -const VALUES_DATA: CoreValue[] = [ +const VALUES_DATA = [ { - 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." + title: "Pragmatismo arquitetural", + description: + "Decisões guiadas por ROI, operabilidade e clareza para o time que mantém o sistema depois.", }, { - icon: Brain, - title: "Fundacionalismo Técnico", - description: "Domínio profundo de estruturas de dados e protocolos. Tecnologias mudam, fundamentos são perenes." + title: "Fundação técnica", + description: + "Fundamentos fortes em dados, protocolos e modelagem para evitar soluções frágeis e modismos vazios.", }, { - icon: Users, - title: "Propriedade e Ownership", - description: "Comunicação de baixa latência e responsabilidade radical sobre cada entrega e decisão técnica." + title: "Ownership real", + description: + "Responsabilidade sobre entrega, comunicação e qualidade final, não só sobre o trecho de código escrito.", }, { - icon: Shield, - title: "Security by Design", - description: "Integridade e conformidade técnica (GDPR/LGPD) tratadas como requisitos funcionais, não opcionais." + title: "Security by design", + description: + "Integridade, proteção de dados e conformidade tratadas como parte do produto, não como remendo.", }, ]; -// --- Micro-componentes (Feynman Technique: Simplicidade e Reuso) --- - -const SectionHeader = () => ( -
- - - 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}

-
-
-
- - {/* Connection Line & Node */} -
-
-
-
- -
- - ); -}; - export default function About() { return ( -
- {/* Background Gradients */} -
-
-
-
- -
- - -
- {/* Center Line for Mobile/Desktop */} -
- - {STORY_DATA.map((step, idx) => ( - +
+ + Garuva, SC · Remote worldwide +
+ } + > +
+
+ {STORY_DATA.map((step) => ( +
+
{step.id}
+

{step.title}

+

{step.content}

+
))}
- {/* Grid de Valores com Pareto 80/20 */} -
- {VALUES_DATA.map((val, i) => ( - -
- -
-

{val.title}

-

{val.description}

- - ))} -
- - {/* SEO Semantic Content - Visible but subtle */} -
-
- - 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 +

+
System Signature
+

Base técnica e postura de entrega

+

+ Evandro Fonseca Junior. Engenheiro Full-Stack com foco em Next.js, + React, Node.js, Tauri, integrações e arquitetura pragmática.

+
+ {VALUES_DATA.map((value) => ( +
+
+ {value.title} +
+

{value.description}

+
+ ))} +
-
+ ); -} \ No newline at end of file +} diff --git a/app/components/Contact.tsx b/app/components/Contact.tsx index b9213c6..57f285a 100644 --- a/app/components/Contact.tsx +++ b/app/components/Contact.tsx @@ -1,223 +1,123 @@ -"use client"; +"use client"; -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"; +import type React from "react"; +import { useState } from "react"; +import { Section } from "./Section"; -// --- 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"; -interface FormData { - name: string; - email: string; - subject: string; - message: string; -} - -/** - * Wrapper Component: Resolve o erro de tipagem TS2322 (IntrinsicAttributes) - * Estendemos a interface para aceitar propriedades de estilo customizadas. - */ -interface ExtendedShimmerProps extends React.ComponentProps { - shimmerColor?: string; - shimmerSize?: string; - type?: "button" | "submit" | "reset"; - disabled?: boolean; -} - -const CustomShimmerButton = ({ - children, - className, - shimmerColor = "#3b82f6", - shimmerSize = "0.1em", - ...props -}: ExtendedShimmerProps) => { - return ( - - {children} - - ); -}; - export default function Contact() { - const [isSubmitting, setIsSubmitting] = useState(false); - const [formData, setFormData] = useState({ + const [formData, setFormData] = useState({ name: "", email: "", subject: "full-stack", message: "", }); - const handleSubmit = async (e: React.FormEvent) => { + const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); - setIsSubmitting(true); - await new Promise((resolve) => setTimeout(resolve, 800)); - - // Definimos os emojis via Unicode Escape para máxima compatibilidade - const icons = { - rocket: "\u{1F680}", - person: "\u{1F464}", - email: "\u{1F4E7}", - tools: "\u{1F6E0}", - chat: "\u{1F4AC}" - }; - - const messageTemplate = `*NOVA SOLICITAÇÃO DE PROJETO* - -*Origem:* Portfólio Profissional -*Prioridade:* Alta (Lead Qualificado) - ---- - *CLIENTE:* ${formData.name} - *EMAIL:* ${formData.email} - *ÁREA:* ${formData.subject.toUpperCase()} - - *DESCRIÇÃO:* -"${formData.message}" ---- -_Mensagem gerada via Evandro.dev | Garuva, SC_`; + const messageTemplate = `*NOVA SOLICITACAO DE PROJETO*\n\n*Origem:* Portfolio Profissional\n*Prioridade:* Alta\n\n---\n*CLIENTE:* ${formData.name}\n*EMAIL:* ${formData.email}\n*AREA:* ${formData.subject.toUpperCase()}\n\n*DESCRICAO:*\n"${formData.message}"\n---\n_Mensagem gerada via Evandro.dev | Garuva, SC_`; const encodedMessage = encodeURIComponent(messageTemplate); const whatsappUrl = `https://wa.me/${WHATSAPP_NUMBER}?text=${encodedMessage}`; window.open(whatsappUrl, "_blank", "noopener,noreferrer"); - setIsSubmitting(false); }; - const inputStyles = - "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-[10px] font-bold text-slate-500 uppercase tracking-widest mb-2 flex items-center gap-2 transition-colors group-hover:text-slate-400"; - return ( -
- - -
- -
- -
-

- Vamos Construir o Futuro -

-

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

+
+
+
+
Response SLA
+

Retorno inicial em até 24h

+

+ Ideal para discovery técnico, revisão de arquitetura, rescue de + projeto, otimização de performance ou construção de produto do + zero. +

+
+
WhatsApp: +55 47 99274-2365
+
E-mail: evandrofonsecajunior@gmail.com
+
Base: Garuva, Santa Catarina · atuação remota
+
-
-
-
- - setFormData({ ...formData, name: e.target.value })} - /> -
- -
- - setFormData({ ...formData, email: e.target.value })} - /> -
-
- -
- -
- -
- -
-
-
- -
- -