feat(about): add story sections and core values to About component
Enhance the About page with new story sections detailing personal journey and core values, including icons and structured content for better user engagement and self-presentation.
This commit is contained in:
Evandro Fonseca Junior committed
1 parent
367ca8f495
commit
6ec67c8f5a
11 files changed
+1540
-464
No files matched your search
+235
-85
@@ -3,108 +3,258 @@
|
||||
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";
|
||||
|
||||
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">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<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-16"
|
||||
className="text-center mb-20"
|
||||
>
|
||||
<h2 className="text-4xl md:text-5xl font-bold mb-6">Sobre Mim</h2>
|
||||
<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>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-12 items-center">
|
||||
{/* Main Description */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -30 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<div className="p-8 space-y-6">
|
||||
<TextReveal>
|
||||
Desenvolvedor Full-Stack com 3+ anos de experiência,
|
||||
especializado em soluções web modernas e inovadoras. Cursando
|
||||
Engenharia da Computação, com conhecimentos em computação em
|
||||
nuvem e inteligência artificial. Busco constantemente novos
|
||||
desafios onde possa aplicar minha paixão por tecnologia e
|
||||
resolver problemas de forma criativa.
|
||||
</TextReveal>
|
||||
{/* Story Timeline */}
|
||||
<div className="space-y-12 mb-20">
|
||||
{storySections.map((section, index) => {
|
||||
const IconComponent = section.icon;
|
||||
const isEven = index % 2 === 0;
|
||||
|
||||
<TextReveal>
|
||||
Meu objetivo é entregar soluções de alta qualidade, sempre
|
||||
priorizando colaboração, ética e inovação. Acredito no poder da
|
||||
tecnologia para fazer a diferença e estou comprometido com o
|
||||
aprendizado contínuo e a excelência técnica.
|
||||
</TextReveal>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Soft Skills */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 30 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.4 }}
|
||||
viewport={{ once: true }}
|
||||
className="space-y-6"
|
||||
>
|
||||
<h3 className="text-2xl font-semibold mb-6 text-cyan-400">
|
||||
Soft Skills
|
||||
</h3>
|
||||
|
||||
<div className="space-y-4">
|
||||
{[
|
||||
{ skill: "Comunicação", level: 90 },
|
||||
{ skill: "Trabalho em Equipe", level: 85 },
|
||||
// { skill: "Resolução de Problemas", level: 95 },
|
||||
{ skill: "Aprendizado Contínuo", level: 90 },
|
||||
{ skill: "Adaptabilidade", level: 85 },
|
||||
].map((item) => (
|
||||
<div key={item.skill} className="space-y-2">
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-gray-300">{item.skill}</span>
|
||||
<span className="text-cyan-400">{item.level}%</span>
|
||||
</div>
|
||||
<div className="w-full bg-white/10 rounded-full h-2">
|
||||
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="bg-gradient-to-r from-cyan-400 to-blue-500 h-2 rounded-full transition-all duration-1000"
|
||||
style={{ width: `${item.level}%` }}
|
||||
/>
|
||||
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>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-8">
|
||||
<h4 className="text-lg font-semibold mb-4 text-blue-400">
|
||||
Destaques
|
||||
</h4>
|
||||
<ul className="space-y-2 text-gray-300">
|
||||
<li className="flex items-center gap-2">
|
||||
<div className="w-2 h-2 bg-blue-400 rounded-full" />
|
||||
3+ anos de experiência
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<div className="w-2 h-2 bg-blue-400 rounded-full" />
|
||||
Engenheiro da Computação
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<div className="w-2 h-2 bg-blue-400 rounded-full" />
|
||||
Conhecimento em Cloud e IA
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<div className="w-2 h-2 bg-blue-400 rounded-full" />
|
||||
Ampla gama de conhecimentos
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</motion.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>
|
||||
|
||||
{/* 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>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
Reference in new issue
Block a user