refactor(about, hero): streamline components and enhance content structure
- 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
1 parent
495dc669d8
commit
375862a65a
2 files changed
+232
-463
No files matched your search
+116
-248
@@ -1,261 +1,129 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { motion } from "motion/react";
|
import React, { useMemo } from "react";
|
||||||
import { MagicCard } from "@/components/magicui/magic-card";
|
import { motion, Variants } from "motion/react";
|
||||||
import { TextReveal } from "@/components/magicui/text-reveal";
|
import { LucideIcon, Brain, Zap, Target, Rocket, Users, Lightbulb, Code, Shield } from "lucide-react";
|
||||||
import {
|
|
||||||
Brain,
|
// --- Types & Interfaces (Tipagem Forte para Previsibilidade) ---
|
||||||
Zap,
|
interface StoryStep {
|
||||||
Target,
|
icon: LucideIcon;
|
||||||
Rocket,
|
title: string;
|
||||||
Users,
|
content: string;
|
||||||
Lightbulb,
|
gradient: string;
|
||||||
Code,
|
accent: string;
|
||||||
Shield,
|
}
|
||||||
} from "lucide-react";
|
|
||||||
|
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() {
|
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 (
|
return (
|
||||||
<section id="about" className="py-20 px-4 relative">
|
<section className="relative py-24 bg-[#030712] overflow-hidden">
|
||||||
<div className="max-w-7xl mx-auto relative z-10">
|
{/* Background Decor (Engenharia Visual) */}
|
||||||
{/* Header */}
|
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-full h-full pointer-events-none">
|
||||||
<motion.div
|
<div className="absolute top-0 left-1/4 w-96 h-96 bg-blue-600/10 rounded-full blur-[120px]" />
|
||||||
initial={{ opacity: 0, y: 30 }}
|
<div className="absolute bottom-0 right-1/4 w-96 h-96 bg-purple-600/10 rounded-full blur-[120px]" />
|
||||||
whileInView={{ opacity: 1, y: 0 }}
|
</div>
|
||||||
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="container max-w-6xl mx-auto px-6 relative z-10">
|
||||||
<div className="space-y-12 mb-20">
|
<SectionHeader />
|
||||||
{storySections.map((section, index) => {
|
|
||||||
const IconComponent = section.icon;
|
|
||||||
const isEven = index % 2 === 0;
|
|
||||||
|
|
||||||
return (
|
<div className="relative">
|
||||||
<motion.div
|
{STORY_DATA.map((step, idx) => (
|
||||||
key={index}
|
<StoryCard key={idx} step={step} index={idx} />
|
||||||
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>
|
</div>
|
||||||
|
|
||||||
{/* Core Values */}
|
{/* Grid de Valores com Pareto 80/20 */}
|
||||||
<motion.div
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mt-32">
|
||||||
initial={{ opacity: 0, y: 30 }}
|
{VALUES_DATA.map((val, i) => (
|
||||||
whileInView={{ opacity: 1, y: 0 }}
|
<div key={i} className="p-6 rounded-2xl bg-white/5 border border-white/10 hover:bg-white/10 transition-colors">
|
||||||
transition={{ duration: 0.8, delay: 0.4 }}
|
<val.icon className="w-6 h-6 text-blue-400 mb-4" />
|
||||||
viewport={{ once: true }}
|
<h4 className="text-white font-semibold mb-2">{val.title}</h4>
|
||||||
className="mb-16"
|
<p className="text-slate-500 text-sm">{val.description}</p>
|
||||||
>
|
|
||||||
<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>
|
||||||
</div>
|
))}
|
||||||
</motion.div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
+116
-215
@@ -4,236 +4,137 @@ import { motion } from "motion/react";
|
|||||||
import Image from "next/image";
|
import Image from "next/image";
|
||||||
import { AuroraText } from "@/components/magicui/aurora-text";
|
import { AuroraText } from "@/components/magicui/aurora-text";
|
||||||
import { AnimatedGradientText } from "@/components/magicui/animated-gradient-text";
|
import { AnimatedGradientText } from "@/components/magicui/animated-gradient-text";
|
||||||
import { useEffect } from "react";
|
import { Github, Linkedin, MessageCircle, Mail, MapPin, Terminal } from "lucide-react";
|
||||||
import TextType from "@/components/TextType";
|
import TextType from "@/components/TextType";
|
||||||
|
|
||||||
export default function Hero() {
|
export default function Hero() {
|
||||||
const getGreetingMessage = () => {
|
const getGreetingMessage = () => {
|
||||||
const hour = new Date().getHours();
|
const hour = new Date().getHours();
|
||||||
|
if (hour >= 8 && hour < 12) return "Olá! Vi seu portfólio. Podemos conversar?";
|
||||||
if (hour >= 8 && hour < 12) {
|
if (hour >= 13 && hour < 18) return "Boa tarde! Vi seu portfólio. Podemos conversar?";
|
||||||
// Manhã
|
return "Olá! Vi seu portfólio. Podemos conversar quando estiver disponível?";
|
||||||
return "Olá! Vi seu portfólio e estou interessado nos seus serviços. Podemos conversar?";
|
|
||||||
} else if (hour >= 13 && hour < 18) {
|
|
||||||
// Tarde
|
|
||||||
return "Boa tarde! Vi seu portfólio e estou interessado nos seus serviços. Podemos conversar?";
|
|
||||||
} else {
|
|
||||||
// Noite
|
|
||||||
return "Olá! Vi seu portfólio e estou interessado nos seus serviços. Podemos conversar quando estiver disponível?";
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const generateWhatsAppUrl = () => {
|
const generateWhatsAppUrl = () => {
|
||||||
const message = encodeURIComponent(getGreetingMessage());
|
const message = encodeURIComponent(getGreetingMessage());
|
||||||
const phone = "5547992742365"; // Número sem formatação
|
return `https://wa.me/5547992742365?text=${message}`;
|
||||||
return `https://wa.me/${phone}?text=${message}`;
|
|
||||||
};
|
|
||||||
|
|
||||||
const scrollToContact = () => {
|
|
||||||
const contactSection = document.getElementById("contact");
|
|
||||||
if (contactSection) {
|
|
||||||
contactSection.scrollIntoView({ behavior: "smooth" });
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section className="relative min-h-screen flex items-center justify-center px-4">
|
<section className="relative min-h-screen flex items-center justify-center overflow-hidden bg-[#030712]">
|
||||||
{/* Background Pattern */}
|
{/* 1. Background Engineering: Grid Pattern & Radial Shading */}
|
||||||
<div className="absolute inset-0 opacity-20"></div>
|
<div className="absolute inset-0 z-0">
|
||||||
|
<div className="absolute inset-0 bg-[linear-gradient(to_right,#1f2937_1px,transparent_1px),linear-gradient(to_bottom,#1f2937_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)] opacity-20" />
|
||||||
<div className="relative z-10 text-center max-w-4xl mx-auto">
|
<div className="absolute inset-0 bg-radial-at-t from-blue-500/10 via-transparent to-transparent" />
|
||||||
{/* Profile Image */}
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0, scale: 0.5 }}
|
|
||||||
animate={{ opacity: 1, scale: 1 }}
|
|
||||||
transition={{ duration: 0.8 }}
|
|
||||||
className="mb-8"
|
|
||||||
>
|
|
||||||
<div className="relative w-48 h-48 mx-auto mb-8 mt-10">
|
|
||||||
{/* Glow Effect */}
|
|
||||||
<div className="absolute inset-0 bg-gradient-to-r from-cyan-400 to-blue-500 opacity-20 rounded-lg blur-xl animate-pulse"></div>
|
|
||||||
|
|
||||||
{/* Gradient Border */}
|
|
||||||
<div className="absolute inset-0 bg-gradient-to-r from-cyan-400 to-blue-500 rounded-lg p-1">
|
|
||||||
<div className="w-full h-full bg-black rounded-lg">
|
|
||||||
<Image
|
|
||||||
src="/edev.jpeg"
|
|
||||||
alt="Evandro Fonseca Junior - Desenvolvedor Full-Stack"
|
|
||||||
fill
|
|
||||||
className="rounded-lg object-cover"
|
|
||||||
priority
|
|
||||||
sizes="(max-width: 768px) 192px, 192px"
|
|
||||||
quality={85}
|
|
||||||
placeholder="blur"
|
|
||||||
blurDataURL="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAIAAoDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAv/xAAhEAACAQMDBQAAAAAAAAAAAAABAgMABAUGIWGRkqGx0f/EABUBAQEAAAAAAAAAAAAAAAAAAAMF/8QAGhEAAgIDAAAAAAAAAAAAAAAAAAECEgMRkf/aAAwDAQACEQMRAD8AltJagyeH0AthI5xdrLcNM91BF5pX2HaH9bcfaSXWGaRmknyJckliyjqTzSlT54b6bk+h0R+IRjWjBqO6O2mhP//Z"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
{/* Badge */}
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0, y: 30 }}
|
|
||||||
animate={{ opacity: 1, y: 0 }}
|
|
||||||
transition={{ duration: 0.8, delay: 0.1 }}
|
|
||||||
className="mb-8"
|
|
||||||
>
|
|
||||||
<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">
|
|
||||||
Disponível para Trabalho
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
{/* Name and Title */}
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0, y: 30 }}
|
|
||||||
animate={{ opacity: 1, y: 0 }}
|
|
||||||
transition={{ duration: 0.8, delay: 0.2 }}
|
|
||||||
className="mb-8"
|
|
||||||
>
|
|
||||||
<h1 className="text-4xl md:text-5xl lg:text-6xl font-black mb-1 leading-tight text-gray-300">
|
|
||||||
Evandro Fonseca Junior
|
|
||||||
</h1>
|
|
||||||
<TextType
|
|
||||||
text={[
|
|
||||||
"Full-Stack Developer",
|
|
||||||
"Cloud Solutions",
|
|
||||||
"UI/UX Focused",
|
|
||||||
"Performance Focused",
|
|
||||||
]}
|
|
||||||
className="text-xl md:text-2xl lg:text-3xl font-bold bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent"
|
|
||||||
typingSpeed={80}
|
|
||||||
deletingSpeed={50}
|
|
||||||
pauseDuration={2000}
|
|
||||||
loop={true}
|
|
||||||
showCursor={true}
|
|
||||||
cursorCharacter="|"
|
|
||||||
/>
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
{/* Description */}
|
|
||||||
<motion.p
|
|
||||||
initial={{ opacity: 0, y: 30 }}
|
|
||||||
animate={{ opacity: 1, y: 0 }}
|
|
||||||
transition={{ duration: 0.8, delay: 0.4 }}
|
|
||||||
className="text-xl md:text-2xl lg:text-3xl text-gray-300 max-w-3xl mx-auto mb-12 leading-relaxed"
|
|
||||||
>
|
|
||||||
Focado em soluções web modernas e inovadoras. Formado em Engenharia da
|
|
||||||
Computação, com sólidos conhecimentos em computação em nuvem e
|
|
||||||
inteligência artificial.
|
|
||||||
</motion.p>
|
|
||||||
|
|
||||||
{/* Location */}
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0, y: 30 }}
|
|
||||||
animate={{ opacity: 1, y: 0 }}
|
|
||||||
transition={{ duration: 0.8, delay: 0.6 }}
|
|
||||||
className="text-gray-400 mb-8"
|
|
||||||
>
|
|
||||||
📍 Garuva, Santa Catarina, Brasil
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
{/* Social Icons */}
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0, y: 30 }}
|
|
||||||
animate={{ opacity: 1, y: 0 }}
|
|
||||||
transition={{ duration: 0.8, delay: 0.8 }}
|
|
||||||
className="flex justify-center space-x-6 mb-8"
|
|
||||||
>
|
|
||||||
<a
|
|
||||||
href="https://www.linkedin.com/in/evandro-fonseca-junior-0969aa1b0/"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="text-gray-400 hover:text-blue-400 transition-colors"
|
|
||||||
aria-label="LinkedIn"
|
|
||||||
>
|
|
||||||
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />
|
|
||||||
</svg>
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
href="https://github.com/evandrodevbr"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="text-gray-400 hover:text-white transition-colors"
|
|
||||||
aria-label="GitHub"
|
|
||||||
>
|
|
||||||
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
|
|
||||||
</svg>
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
href="#contact"
|
|
||||||
onClick={(e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
scrollToContact();
|
|
||||||
}}
|
|
||||||
className="text-gray-400 hover:text-green-400 transition-colors"
|
|
||||||
aria-label="WhatsApp"
|
|
||||||
>
|
|
||||||
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893A11.821 11.821 0 0020.885 3.488" />
|
|
||||||
</svg>
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
href="#contact"
|
|
||||||
onClick={(e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
scrollToContact();
|
|
||||||
}}
|
|
||||||
className="text-gray-400 hover:text-blue-400 transition-colors"
|
|
||||||
aria-label="Email"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
className="w-6 h-6"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
strokeWidth={2}
|
|
||||||
d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</a>
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
{/* CTA Button */}
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0, y: 30 }}
|
|
||||||
animate={{ opacity: 1, y: 0 }}
|
|
||||||
transition={{ duration: 0.8, delay: 1 }}
|
|
||||||
className="flex justify-center mb-8"
|
|
||||||
>
|
|
||||||
<a
|
|
||||||
href="#contact"
|
|
||||||
className="bg-gradient-to-r from-cyan-500 to-blue-600 hover:from-cyan-600 hover:to-blue-700 text-white px-8 py-3 rounded-lg font-semibold transition-all duration-300 hover:scale-105 shadow-lg shadow-cyan-500/25"
|
|
||||||
>
|
|
||||||
Vamos Trabalhar Juntos
|
|
||||||
</a>
|
|
||||||
</motion.div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Scroll Indicator */}
|
<div className="relative z-10 w-full max-w-6xl mx-auto px-6 grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0 }}
|
{/* Lado Esquerdo: Conteúdo Textual (80/20 do Impacto) */}
|
||||||
animate={{ opacity: 1 }}
|
<div className="lg:col-span-7 text-left">
|
||||||
transition={{ duration: 0.8, delay: 1.2 }}
|
|
||||||
className="absolute bottom-2 left-1/2 transform -translate-x-1/2"
|
|
||||||
>
|
|
||||||
<div className="w-6 h-10 border-2 border-white/30 rounded-full flex justify-center">
|
|
||||||
<motion.div
|
<motion.div
|
||||||
animate={{ y: [0, 12, 0] }}
|
initial={{ opacity: 0, x: -20 }}
|
||||||
transition={{ duration: 1.5, repeat: Infinity }}
|
animate={{ opacity: 1, x: 0 }}
|
||||||
className="w-1 h-3 bg-white/50 rounded-full mt-2"
|
transition={{ duration: 0.6 }}
|
||||||
/>
|
>
|
||||||
|
<AnimatedGradientText className="mb-6 inline-flex items-center gap-2 px-4 py-2 rounded-full border border-blue-500/20 bg-blue-500/5 backdrop-blur-md">
|
||||||
|
<span className="relative flex h-2 w-2">
|
||||||
|
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-cyan-400 opacity-75"></span>
|
||||||
|
<span className="relative inline-flex rounded-full h-2 w-2 bg-cyan-500"></span>
|
||||||
|
</span>
|
||||||
|
<span className="text-sm font-medium text-cyan-300 tracking-wide uppercase">
|
||||||
|
Systems Engineer available
|
||||||
|
</span>
|
||||||
|
</AnimatedGradientText>
|
||||||
|
|
||||||
|
<h1 className="text-5xl md:text-7xl font-black text-white mb-4 tracking-tight leading-none">
|
||||||
|
Evandro <br />
|
||||||
|
<AuroraText className="italic">Fonseca Junior</AuroraText>
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<div className="h-10 flex items-center gap-2 mb-6">
|
||||||
|
<Terminal className="w-5 h-5 text-blue-400" />
|
||||||
|
<TextType
|
||||||
|
text={["Full-Stack Engineer", "Cloud Solutions Architect", "AI Integration Specialist"]}
|
||||||
|
className="text-2xl font-mono text-slate-400"
|
||||||
|
typingSpeed={60}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="text-lg text-slate-400 max-w-xl mb-10 leading-relaxed">
|
||||||
|
Desenvolvendo arquiteturas escaláveis com a precisão da <span className="text-white font-medium">Engenharia da Computação</span>.
|
||||||
|
Especialista em transformar requisitos complexos em sistemas de alta disponibilidade.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="flex flex-wrap gap-4 items-center">
|
||||||
|
<motion.a
|
||||||
|
whileHover={{ scale: 1.05 }}
|
||||||
|
whileTap={{ scale: 0.95 }}
|
||||||
|
href={generateWhatsAppUrl()}
|
||||||
|
className="px-8 py-4 bg-blue-600 hover:bg-blue-500 text-white rounded-xl font-bold transition-all shadow-lg shadow-blue-600/20 flex items-center gap-2"
|
||||||
|
>
|
||||||
|
<MessageCircle className="w-5 h-5" />
|
||||||
|
Iniciar Projeto
|
||||||
|
</motion.a>
|
||||||
|
|
||||||
|
<div className="flex gap-4 px-4">
|
||||||
|
{[
|
||||||
|
{ icon: Github, link: "https://github.com/evandrodevbr" },
|
||||||
|
{ icon: Linkedin, link: "https://linkedin.com/..." },
|
||||||
|
{ icon: Mail, link: "mailto:..." }
|
||||||
|
].map((social, i) => (
|
||||||
|
<a key={i} href={social.link} className="p-3 rounded-lg border border-slate-800 text-slate-400 hover:text-white hover:border-slate-600 transition-all">
|
||||||
|
<social.icon className="w-5 h-5" />
|
||||||
|
</a>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-8 flex items-center gap-2 text-slate-500 text-sm">
|
||||||
|
<MapPin className="w-4 h-4" />
|
||||||
|
<span>Garuva, SC | Remote Worldwide</span>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
</div>
|
</div>
|
||||||
</motion.div>
|
|
||||||
|
{/* Lado Direito: Visual (A "Âncora" do Design) */}
|
||||||
|
<div className="lg:col-span-5 relative flex justify-center">
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, scale: 0.8 }}
|
||||||
|
animate={{ opacity: 1, scale: 1 }}
|
||||||
|
transition={{ duration: 0.8, ease: "easeOut" }}
|
||||||
|
className="relative w-72 h-72 md:w-96 md:h-96"
|
||||||
|
>
|
||||||
|
{/* Elementos Orbitais (Vibe Engenharia) */}
|
||||||
|
<div className="absolute inset-0 rounded-full border border-dashed border-blue-500/30 animate-[spin_20s_linear_infinite]" />
|
||||||
|
<div className="absolute inset-10 rounded-full border border-blue-500/10 animate-[spin_15s_linear_infinite_reverse]" />
|
||||||
|
|
||||||
|
{/* Foto de Perfil com Masking de Engenharia */}
|
||||||
|
<div className="relative z-10 w-full h-full rounded-[2.5rem] overflow-hidden border-2 border-slate-800 shadow-2xl">
|
||||||
|
<div className="absolute inset-0 bg-blue-500/10 z-10 hover:opacity-0 transition-opacity duration-500" />
|
||||||
|
<Image
|
||||||
|
src="/edev.jpeg"
|
||||||
|
alt="Evandro Fonseca Junior"
|
||||||
|
fill
|
||||||
|
className="object-cover grayscale hover:grayscale-0 transition-all duration-700 scale-105 hover:scale-100"
|
||||||
|
priority
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Floating Stats Badge */}
|
||||||
|
<div className="absolute -bottom-6 -right-6 bg-slate-900 border border-slate-800 p-4 rounded-2xl shadow-2xl z-20 backdrop-blur-xl">
|
||||||
|
<p className="text-xs text-slate-500 uppercase font-bold tracking-tighter">Exp. Level</p>
|
||||||
|
<p className="text-xl font-mono text-blue-400">Senior Dev</p>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Scroll Indicator (Refinado) */}
|
||||||
|
<div className="absolute bottom-8 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2">
|
||||||
|
<span className="text-[10px] text-slate-600 uppercase tracking-[0.2em]">Scroll</span>
|
||||||
|
<div className="w-[1px] h-12 bg-gradient-to-b from-blue-500 to-transparent" />
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
Reference in new issue
Block a user