feat(about, skills, workModalities): update content and improve styling
- Revamped the About component with new titles and descriptions for core values, enhancing clarity and engagement. - Updated the Skills component by removing unnecessary type handling and improving animation effects for better user experience. - Adjusted styling in the WorkModalities component, refining color variants and badge presentation for improved visual consistency.
This commit is contained in:
Evandro Fonseca Junior committed
1 parent
6841552de7
commit
b58c5dabbc
3 files changed
+37
-39
No files matched your search
+26
-11
@@ -23,26 +23,41 @@ interface CoreValue {
|
||||
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",
|
||||
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",
|
||||
},
|
||||
{
|
||||
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",
|
||||
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",
|
||||
},
|
||||
// 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." },
|
||||
{
|
||||
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: 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."
|
||||
},
|
||||
];
|
||||
|
||||
// --- Micro-componentes (Feynman Technique: Simplicidade e Reuso) ---
|
||||
|
||||
@@ -1,27 +1,13 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import { motion } from "framer-motion"; // Ajustado para o padrão estável
|
||||
import { MagicCard } from "@/components/magicui/magic-card";
|
||||
import { motion } from "framer-motion";
|
||||
import {
|
||||
Code, Database, Cloud, Cpu, Smartphone,
|
||||
Zap, GitBranch, TestTube, Terminal, Layers
|
||||
} from "lucide-react";
|
||||
import { usePortfolioData } from "@/lib/usePortfolioData";
|
||||
|
||||
// --- RESOLUÇÃO DE TIPAGEM (Wrapper) ---
|
||||
// Estendemos a interface original para aceitar as props de gradiente que a lib pode ter omitido nos tipos
|
||||
interface FixedMagicCardProps extends React.ComponentProps<typeof MagicCard> {
|
||||
gradientColor?: string;
|
||||
gradientSize?: number;
|
||||
gradientOpacity?: number;
|
||||
}
|
||||
|
||||
const FixedMagicCard = (props: FixedMagicCardProps) => {
|
||||
// @ts-ignore - Forçamos o cast para o componente original aceitar as props em runtime
|
||||
return <MagicCard {...props} />;
|
||||
};
|
||||
|
||||
const ICON_MAP: Record<string, React.ElementType> = {
|
||||
Code, Database, Cloud, Cpu, Smartphone, Zap, GitBranch, TestTube, Terminal, Layers
|
||||
};
|
||||
@@ -74,20 +60,17 @@ export default function Skills() {
|
||||
return (
|
||||
<motion.div
|
||||
key={category.category}
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
initial={{ opacity: 0, y: 90 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, amount: 0.2 }}
|
||||
viewport={{ once: true, amount: 0.5 }}
|
||||
transition={{
|
||||
duration: 0.5,
|
||||
delay: index * 0.05,
|
||||
ease: "easeOut"
|
||||
}}
|
||||
>
|
||||
<FixedMagicCard
|
||||
className="group p-8 flex flex-col h-full bg-slate-900/50 border-slate-800 transition-colors duration-300 cursor-default"
|
||||
gradientColor="#262626"
|
||||
gradientSize={250}
|
||||
gradientOpacity={0.4}
|
||||
<div
|
||||
className="group p-8 flex flex-col h-full bg-slate-900/50 border border-slate-800 rounded-lg transition-colors duration-300 cursor-default"
|
||||
>
|
||||
<div className="flex items-start justify-between mb-8">
|
||||
<div className={`p-4 rounded-2xl ${styles.bg} border border-white/5 transition-all duration-500 group-hover:scale-110 group-hover:rotate-3`}>
|
||||
@@ -112,7 +95,7 @@ export default function Skills() {
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</FixedMagicCard>
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
|
||||
@@ -96,13 +96,13 @@ const WorkModalitiesData = [
|
||||
|
||||
// --- 2. DESIGN TOKENS ---
|
||||
const COLOR_VARIANTS: Record<string, string> = {
|
||||
blue: "border-blue-500/30 bg-blue-500/5 text-blue-400 hover:border-blue-500/60 shadow-blue-500/5",
|
||||
blue: "border-blue-500/15 bg-blue-500/3 text-blue-300 hover:border-blue-500/30 shadow-blue-500/3",
|
||||
green:
|
||||
"border-green-500/30 bg-green-500/5 text-green-400 hover:border-green-500/60 shadow-green-500/5",
|
||||
"border-green-500/15 bg-green-500/3 text-green-300 hover:border-green-500/30 shadow-green-500/3",
|
||||
purple:
|
||||
"border-purple-500/30 bg-purple-500/5 text-purple-400 hover:border-purple-500/60 shadow-purple-500/5",
|
||||
"border-purple-500/15 bg-purple-500/3 text-purple-300 hover:border-purple-500/30 shadow-purple-500/3",
|
||||
orange:
|
||||
"border-orange-500/30 bg-orange-500/5 text-orange-400 hover:border-orange-500/60 shadow-orange-500/5",
|
||||
"border-orange-500/15 bg-orange-500/3 text-orange-300 hover:border-orange-500/30 shadow-orange-500/3",
|
||||
};
|
||||
|
||||
export function WorkModalities() {
|
||||
@@ -191,7 +191,7 @@ export function WorkModalities() {
|
||||
className={`relative p-8 rounded-[2.5rem] border-2 backdrop-blur-xl transition-all duration-500 shadow-xl ${style}`}
|
||||
>
|
||||
{modality.badge && (
|
||||
<span className="absolute -top-3 right-8 bg-blue-600 text-white px-4 py-1 rounded-full text-[10px] font-black tracking-widest uppercase shadow-lg shadow-blue-600/20">
|
||||
<span className="absolute -top-3 right-8 bg-blue-500/20 border border-blue-500/30 text-blue-300 px-4 py-1 rounded-full text-[10px] font-black tracking-widest uppercase shadow-lg shadow-blue-500/10">
|
||||
{modality.badge}
|
||||
</span>
|
||||
)}
|
||||
|
||||
Reference in new issue
Block a user