Evandro Fonseca Junior
6ec67c8f5a
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.
262 lines
11 KiB
TypeScript
262 lines
11 KiB
TypeScript
"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";
|
|
|
|
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>
|
|
|
|
{/* Story Timeline */}
|
|
<div className="space-y-12 mb-20">
|
|
{storySections.map((section, index) => {
|
|
const IconComponent = section.icon;
|
|
const isEven = index % 2 === 0;
|
|
|
|
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>
|
|
|
|
{/* 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>
|
|
);
|
|
}
|