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.
240 lines
11 KiB
TypeScript
240 lines
11 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "motion/react";
|
|
import Image from "next/image";
|
|
import { AuroraText } from "@/components/magicui/aurora-text";
|
|
import { AnimatedGradientText } from "@/components/magicui/animated-gradient-text";
|
|
import { useEffect } from "react";
|
|
import TextType from "@/components/TextType";
|
|
|
|
export default function Hero() {
|
|
const getGreetingMessage = () => {
|
|
const hour = new Date().getHours();
|
|
|
|
if (hour >= 8 && hour < 12) {
|
|
// Manhã
|
|
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 message = encodeURIComponent(getGreetingMessage());
|
|
const phone = "5547992742365"; // Número sem formatação
|
|
return `https://wa.me/${phone}?text=${message}`;
|
|
};
|
|
|
|
const scrollToContact = () => {
|
|
const contactSection = document.getElementById("contact");
|
|
if (contactSection) {
|
|
contactSection.scrollIntoView({ behavior: "smooth" });
|
|
}
|
|
};
|
|
|
|
return (
|
|
<section className="relative min-h-screen flex items-center justify-center px-4">
|
|
{/* Background Pattern */}
|
|
<div className="absolute inset-0 opacity-20"></div>
|
|
|
|
<div className="relative z-10 text-center max-w-4xl mx-auto">
|
|
{/* 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>
|
|
|
|
{/* Scroll Indicator */}
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
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
|
|
animate={{ y: [0, 12, 0] }}
|
|
transition={{ duration: 1.5, repeat: Infinity }}
|
|
className="w-1 h-3 bg-white/50 rounded-full mt-2"
|
|
/>
|
|
</div>
|
|
</motion.div>
|
|
</section>
|
|
);
|
|
}
|