working on hire talent banner
This commit is contained in:
priyanshuvish
160
components/vectors/DeveloperSkillsVector.tsx
Normal file
160
components/vectors/DeveloperSkillsVector.tsx
Normal file
@@ -0,0 +1,160 @@
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
export const DeveloperSkillsVector = () => {
|
||||
const skills = [
|
||||
{ name: "Frontend", color: "from-blue-500 to-blue-600", icon: "🎨", position: { x: -60, y: -30 } },
|
||||
{ name: "Backend", color: "from-green-500 to-green-600", icon: "⚙️", position: { x: 60, y: -30 } },
|
||||
{ name: "Database", color: "from-purple-500 to-purple-600", icon: "🗄️", position: { x: 0, y: 50 } }
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="relative w-full h-80 flex items-center justify-center font-manrope">
|
||||
{/* Subtle Background Glow */}
|
||||
<div className="absolute inset-0 opacity-10">
|
||||
<svg className="w-full h-full" viewBox="0 0 400 400" fill="none">
|
||||
<defs>
|
||||
<radialGradient id="bgGlow" cx="50%" cy="50%" r="40%">
|
||||
<stop offset="0%" stopColor="#E5195E" stopOpacity="0.08" />
|
||||
<stop offset="100%" stopColor="#3B82F6" stopOpacity="0.02" />
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<circle cx="200" cy="200" r="120" fill="url(#bgGlow)" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
{/* Central Developer Icon */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="relative z-20"
|
||||
>
|
||||
<motion.div
|
||||
animate={{ y: [0, -8, 0] }}
|
||||
transition={{ duration: 4, repeat: Infinity, ease: "easeInOut" }}
|
||||
className="w-20 h-20 bg-gradient-to-br from-accent to-purple-600 rounded-2xl flex items-center justify-center shadow-xl border border-white/10"
|
||||
>
|
||||
<svg className="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
|
||||
</svg>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
|
||||
{/* Skill Badges */}
|
||||
{skills.map((skill, index) => (
|
||||
<motion.div
|
||||
key={skill.name}
|
||||
initial={{ opacity: 0, scale: 0, x: 0, y: 0 }}
|
||||
animate={{
|
||||
opacity: 1,
|
||||
scale: 1,
|
||||
x: skill.position.x,
|
||||
y: skill.position.y
|
||||
}}
|
||||
transition={{
|
||||
duration: 0.6,
|
||||
delay: 0.4 + index * 0.2,
|
||||
type: "spring",
|
||||
stiffness: 100
|
||||
}}
|
||||
className="absolute z-10"
|
||||
>
|
||||
<motion.div
|
||||
animate={{
|
||||
y: [0, -6, 0],
|
||||
scale: [1, 1.05, 1]
|
||||
}}
|
||||
transition={{
|
||||
duration: 3 + index * 0.5,
|
||||
repeat: Infinity,
|
||||
ease: "easeInOut",
|
||||
delay: index * 0.8
|
||||
}}
|
||||
className={`w-16 h-16 bg-gradient-to-br ${skill.color} rounded-xl flex items-center justify-center shadow-lg border border-white/20`}
|
||||
>
|
||||
<span className="text-2xl">{skill.icon}</span>
|
||||
</motion.div>
|
||||
|
||||
{/* Skill Label */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 0.4, delay: 0.8 + index * 0.2 }}
|
||||
className="absolute -bottom-8 left-1/2 transform -translate-x-1/2 text-white text-xs font-manrope whitespace-nowrap"
|
||||
>
|
||||
{skill.name}
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
))}
|
||||
|
||||
{/* Subtle Connecting Elements */}
|
||||
<svg className="absolute inset-0 w-full h-full pointer-events-none opacity-20 z-15">
|
||||
<defs>
|
||||
<linearGradient id="connectionGradient" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stopColor="#E5195E" stopOpacity="0.3" />
|
||||
<stop offset="50%" stopColor="#3B82F6" stopOpacity="0.2" />
|
||||
<stop offset="100%" stopColor="#8B5CF6" stopOpacity="0.3" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
{skills.map((skill, index) => (
|
||||
<motion.line
|
||||
key={`connection-${index}`}
|
||||
x1="50%"
|
||||
y1="50%"
|
||||
x2={`${50 + (skill.position.x / 4)}%`}
|
||||
y2={`${50 + (skill.position.y / 4)}%`}
|
||||
stroke="url(#connectionGradient)"
|
||||
strokeWidth="1"
|
||||
strokeDasharray="2,4"
|
||||
initial={{ pathLength: 0, opacity: 0 }}
|
||||
animate={{ pathLength: 1, opacity: 1 }}
|
||||
transition={{ duration: 1.5, delay: 1 + index * 0.3 }}
|
||||
/>
|
||||
))}
|
||||
</svg>
|
||||
|
||||
{/* Status Indicator */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.5, delay: 1.8 }}
|
||||
className="absolute top-8 right-8 z-25"
|
||||
>
|
||||
<div className="bg-black/30 backdrop-blur-sm rounded-lg px-3 py-2 border border-white/10">
|
||||
<div className="flex items-center space-x-2">
|
||||
<motion.div
|
||||
animate={{ scale: [1, 1.2, 1] }}
|
||||
transition={{ duration: 2, repeat: Infinity }}
|
||||
className="w-2 h-2 bg-green-400 rounded-full"
|
||||
></motion.div>
|
||||
<span className="text-green-400 text-xs font-manrope">Available</span>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Experience Level */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 2 }}
|
||||
className="absolute bottom-8 left-1/2 transform -translate-x-1/2 z-25"
|
||||
>
|
||||
<div className="bg-black/30 backdrop-blur-sm rounded-lg px-4 py-2 border border-white/10">
|
||||
<div className="flex items-center space-x-3">
|
||||
{[1, 2, 3, 4, 5].map((star, index) => (
|
||||
<motion.div
|
||||
key={star}
|
||||
initial={{ scale: 0 }}
|
||||
animate={{ scale: 1 }}
|
||||
transition={{ duration: 0.3, delay: 2.2 + index * 0.1 }}
|
||||
className="w-3 h-3 bg-yellow-400 rounded-full"
|
||||
></motion.div>
|
||||
))}
|
||||
<span className="text-white text-xs font-manrope ml-2">Expert Level</span>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user