evandro/portifolio-evandrodevbr
1
0 Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(about, hero): streamline components and enhance content structure

Browse Source 
- 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.
This commit is contained in:
Evandro Fonseca Junior committed 2026-01-12 15:27:51 -03:00
1 parent 495dc669d8
commit 375862a65a
2 files changed
+232 -463
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app/components/About.tsx
+116 -248
View File
@@ -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 = () => (
<motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
className="text-center mb-24"
>
<span className="px-4 py-1.5 rounded-full bg-blue-500/10 border border-blue-500/20 text-blue-400 text-xs font-bold uppercase tracking-widest">
Minha Jornada
</span>
<h2 className="mt-6 text-5xl font-extrabold tracking-tight text-white sm:text-6xl">
Sobre <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-cyan-300">Mim</span>
</h2>
<p className="mt-6 text-lg text-slate-400 max-w-2xl mx-auto leading-relaxed italic">
"Transformando complexidade técnica em valor de negócio através da engenharia."
</p>
</motion.div>
);
const StoryCard = ({ step, index }: { step: StoryStep; index: number }) => {
const isEven = index % 2 === 0;
return (
<motion.div
initial={{ opacity: 0, x: isEven ? -30 : 30 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true, margin: "-100px" }}
className={`flex flex-col ${isEven ? "md:flex-row" : "md:flex-row-reverse"} items-center gap-12 mb-20`}
>
<div className="flex-1 w-full">
<div className="group relative p-8 rounded-3xl bg-slate-900/50 border border-slate-800 hover:border-blue-500/50 transition-all duration-500 shadow-2xl backdrop-blur-xl">
<div className={`absolute -top-6 ${isEven ? 'left-6' : 'right-6'} p-4 rounded-2xl bg-slate-900 border border-slate-800 shadow-xl group-hover:scale-110 transition-transform`}>
<step.icon className={`w-8 h-8 ${step.accent}`} />
</div>
<h3 className="mt-4 text-2xl font-bold text-white mb-4">{step.title}</h3>
<p className="text-slate-400 leading-relaxed text-base font-light">{step.content}</p>
</div>
</div>
<div className="hidden md:flex flex-col items-center">
<div className="w-12 h-12 rounded-full bg-slate-900 border-4 border-slate-800 flex items-center justify-center z-10">
<div className="w-3 h-3 rounded-full bg-blue-500 animate-pulse" />
</div>
<div className="w-[2px] h-32 bg-gradient-to-b from-blue-500/50 to-transparent" />
</div>
<div className="flex-1 hidden md:block" />
</motion.div>
);
};
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 (
<section id="about" className="py-20 px-4 relative">
<div className="max-w-7xl mx-auto relative z-10">
{/* Header */}
<motion.div
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
viewport={{ once: true }}
className="text-center mb-20"
>
<div className="inline-flex items-center gap-2 bg-gradient-to-r from-cyan-400/10 to-blue-500/10 px-6 py-3 rounded-full mb-6 border border-cyan-400/20">
<div className="w-2 h-2 bg-cyan-400 rounded-full animate-pulse"></div>
<span className="text-sm font-medium text-cyan-300">
Minha Jornada
</span>
</div>
<h2 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 bg-gradient-to-r from-cyan-400 via-blue-400 to-blue-500 bg-clip-text text-transparent">
Sobre Mim
</h2>
<p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
Uma jornada de transformação através da tecnologia, onde cada
desafio se tornou uma oportunidade de crescimento e inovação
</p>
</motion.div>
<section className="relative py-24 bg-[#030712] overflow-hidden">
{/* Background Decor (Engenharia Visual) */}
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-full h-full pointer-events-none">
<div className="absolute top-0 left-1/4 w-96 h-96 bg-blue-600/10 rounded-full blur-[120px]" />
<div className="absolute bottom-0 right-1/4 w-96 h-96 bg-purple-600/10 rounded-full blur-[120px]" />
</div>
{/* Story Timeline */}
<div className="space-y-12 mb-20">
{storySections.map((section, index) => {
const IconComponent = section.icon;
const isEven = index % 2 === 0;
<div className="container max-w-6xl mx-auto px-6 relative z-10">
<SectionHeader />
return (
<motion.div
key={index}
initial={{ opacity: 0, x: isEven ? -50 : 50 }}
whileInView={{ opacity: 1, x: 0 }}
transition={{ duration: 0.8, delay: index * 0.2 }}
viewport={{ once: true }}
className={`flex flex-col ${
isEven ? "md:flex-row" : "md:flex-row-reverse"
} items-center gap-8`}
>
{/* Content */}
<div className={`flex-1 ${isEven ? "md:pr-12" : "md:pl-12"}`}>
<div className="relative">
<div
className={`absolute inset-0 bg-gradient-to-r ${section.color} opacity-10 rounded-2xl blur-xl`}
></div>
<div className="relative bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-8">
<div className="flex items-center gap-4 mb-6">
<div className={`p-4 rounded-xl ${section.bgColor}`}>
<IconComponent
className={`w-8 h-8 ${section.iconColor}`}
/>
</div>
<h3 className="text-2xl font-bold text-white">
{section.title}
</h3>
</div>
<p className="text-gray-300 leading-relaxed text-lg">
{section.content}
</p>
</div>
</div>
</div>
{/* Timeline Indicator */}
<div className="flex flex-col items-center">
<div
className={`w-16 h-16 rounded-full ${section.bgColor} border-4 border-white/20 flex items-center justify-center`}
>
<span className="text-2xl font-bold text-white">
{index + 1}
</span>
</div>
{index < storySections.length - 1 && (
<div className="w-1 h-16 bg-gradient-to-b from-white/20 to-transparent mt-4"></div>
)}
</div>
{/* Spacer */}
<div className="flex-1 hidden md:block"></div>
</motion.div>
);
})}
<div className="relative">
{STORY_DATA.map((step, idx) => (
<StoryCard key={idx} step={step} index={idx} />
))}
</div>
{/* Core Values */}
<motion.div
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.4 }}
viewport={{ once: true }}
className="mb-16"
>
<div className="text-center mb-12">
<h3 className="text-3xl font-bold mb-4 bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent">
Meus Valores Fundamentais
</h3>
<p className="text-gray-400 text-lg">
Os princípios que guiam cada decisão e projeto
</p>
</div>
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
{coreValues.map((value, index) => {
const IconComponent = value.icon;
return (
<motion.div
key={value.title}
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6, delay: index * 0.1 }}
viewport={{ once: true }}
className="group"
>
<div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-6 h-full hover:border-cyan-500/30 transition-all duration-300 hover:scale-105">
<div className="p-3 rounded-lg bg-blue-500/20 w-fit mb-4 group-hover:bg-blue-500/30 transition-colors">
<IconComponent className="w-6 h-6 text-blue-400" />
</div>
<h4 className="text-lg font-semibold text-white mb-3">
{value.title}
</h4>
<p className="text-gray-400 text-sm leading-relaxed">
{value.description}
</p>
</div>
</motion.div>
);
})}
</div>
</motion.div>
{/* Call to Action */}
<motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.6 }}
viewport={{ once: true }}
className="text-center"
>
<div className="relative max-w-4xl mx-auto">
<div className="absolute inset-0 bg-gradient-to-r from-blue-500/10 via-purple-500/10 to-pink-500/10 rounded-2xl blur-xl"></div>
<div className="relative bg-gradient-to-r from-blue-500/5 to-purple-500/5 border border-blue-500/20 rounded-2xl p-8 backdrop-blur-sm">
<h4 className="text-2xl font-bold text-white mb-4">
Pronto para o Próximo Grande Desafio
</h4>
<p className="text-gray-300 text-lg mb-6">
Busco uma equipe onde posso aplicar toda essa experiência e
paixão para criar soluções que realmente importam
</p>
<div className="flex flex-wrap justify-center gap-4">
<span className="px-4 py-2 bg-blue-500/20 text-blue-400 rounded-full text-sm font-medium border border-blue-500/30">
🚀 Inovação Contínua
</span>
<span className="px-4 py-2 bg-purple-500/20 text-purple-400 rounded-full text-sm font-medium border border-purple-500/30">
🤝 Colaboração Genuína
</span>
<span className="px-4 py-2 bg-pink-500/20 text-pink-400 rounded-full text-sm font-medium border border-pink-500/30">
⚡ Excelência Técnica
</span>
<span className="px-4 py-2 bg-green-500/20 text-green-400 rounded-full text-sm font-medium border border-green-500/30">
🎯 Impacto Real
</span>
</div>
{/* Grid de Valores com Pareto 80/20 */}
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mt-32">
{VALUES_DATA.map((val, i) => (
<div key={i} className="p-6 rounded-2xl bg-white/5 border border-white/10 hover:bg-white/10 transition-colors">
<val.icon className="w-6 h-6 text-blue-400 mb-4" />
<h4 className="text-white font-semibold mb-2">{val.title}</h4>
<p className="text-slate-500 text-sm">{val.description}</p>
</div>
</div>
</motion.div>
))}
</div>
</div>
</section>
);
}
}