73 lines
2.5 KiB
JavaScript
73 lines
2.5 KiB
JavaScript
import { motion } from 'framer-motion';
|
|
import { Github, Linkedin, Mail, MapPin } from 'lucide-react';
|
|
import { useCVData } from '../admin/hooks/CVContext';
|
|
|
|
export default function Hero() {
|
|
const { data } = useCVData();
|
|
const { personal } = data;
|
|
|
|
return (
|
|
<section className="min-h-screen flex items-center justify-center px-6 py-20">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6 }}
|
|
className="max-w-3xl text-center"
|
|
>
|
|
<motion.div
|
|
initial={{ scale: 0 }}
|
|
animate={{ scale: 1 }}
|
|
transition={{ delay: 0.2, type: "spring", stiffness: 200 }}
|
|
className="w-32 h-32 mx-auto mb-8 rounded-full bg-gradient-to-br from-primary-500 to-primary-700 flex items-center justify-center text-white text-4xl font-bold"
|
|
>
|
|
{personal.name.split(' ').map(n => n[0]).join('')}
|
|
</motion.div>
|
|
|
|
<h1 className="text-4xl md:text-5xl font-bold text-slate-900 mb-2">
|
|
{personal.name}
|
|
</h1>
|
|
|
|
<h2 className="text-xl md:text-2xl text-primary-600 font-medium mb-4">
|
|
{personal.title}
|
|
</h2>
|
|
|
|
<div className="flex items-center justify-center gap-2 text-slate-500 mb-6">
|
|
<MapPin size={18} />
|
|
<span>{personal.location}</span>
|
|
</div>
|
|
|
|
<p className="text-lg text-slate-600 mb-8 max-w-2xl mx-auto">
|
|
{personal.intro}
|
|
</p>
|
|
|
|
<div className="flex justify-center gap-4">
|
|
<a
|
|
href={`mailto:${personal.email}`}
|
|
className="flex items-center gap-2 px-4 py-2 rounded-lg bg-slate-100 hover:bg-slate-200 transition-colors text-slate-700"
|
|
>
|
|
<Mail size={20} />
|
|
<span>Email</span>
|
|
</a>
|
|
<a
|
|
href={personal.github}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="flex items-center gap-2 px-4 py-2 rounded-lg bg-slate-100 hover:bg-slate-200 transition-colors text-slate-700"
|
|
>
|
|
<Github size={20} />
|
|
<span>GitHub</span>
|
|
</a>
|
|
<a
|
|
href={personal.linkedin}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="flex items-center gap-2 px-4 py-2 rounded-lg bg-slate-100 hover:bg-slate-200 transition-colors text-slate-700"
|
|
>
|
|
<Linkedin size={20} />
|
|
<span>LinkedIn</span>
|
|
</a>
|
|
</div>
|
|
</motion.div>
|
|
</section>
|
|
);
|
|
} |