WDIPL/Wdipl-react
2
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

working on hire talent banner

Browse Source
This commit is contained in:
priyanshuvish
2025-08-07 19:49:37 +05:30
parent 95d456ca4c
commit 85bd347feb
34 changed files with 3671 additions and 868 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
pages/WearableDeviceDevelopment.tsx
View File

@@ -945,31 +945,37 @@ const WearableTechStack = () => {
name: "Wear OS",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/android/android-original.svg",
category: "Wearable Platform",
color: "green",
},
{
name: "watchOS",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/apple/apple-original.svg",
category: "Wearable Platform",
color: "red",
},
{
name: "Swift",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/swift/swift-original.svg",
category: "iOS Development",
color: "blue",
},
{
name: "Kotlin",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/kotlin/kotlin-original.svg",
category: "Android Development",
color: "green",
},
{
name: "Unity",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/unity/unity-original.svg",
category: "AR/VR Development",
color: "orange",
},
{
name: "AWS IoT",
logo: iotImage,
category: "IoT Platform",
color: "blue",
},
];
@@ -1019,43 +1025,47 @@ const WearableTechStack = () => {
viewport={{ once: true }}
className="mb-16"
>
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6">
{technologies.map((tech, index) => (
<motion.div
key={index}
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, delay: index * 0.01 }}
viewport={{ once: true }}
whileHover={{
y: -5,
scale: 1.05,
transition: {
type: "spring",
damping: 10,
stiffness: 300,
mass: 0.5,
},
}}
className="group"
>
<Card className="bg-card/20 backdrop-blur-md border-accent/30 transition-all duration-300 shadow-xl rounded-2xl p-6 text-center">
<div className="w-12 h-12 mx-auto mb-4 flex items-center justify-center">
<ImageWithFallback
src={tech.logo}
alt={tech.name}
className="w-10 h-10 object-contain filter brightness-100 invert-0 transition-all duration-300"
/>
</div>
<h4 className="font-semibold text-foreground text-sm mb-1">
{tech.name}
</h4>
<p className="text-xs text-muted-foreground">
{tech.category}
</p>
</Card>
</motion.div>
))}
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
{technologies.map((tech, index) => {
// const IconComponent = tech.icon;
const colorClasses = {
blue: "bg-blue-500/20 text-blue-400 border-blue-500/30",
orange: "bg-orange-500/20 text-orange-400 border-orange-500/30",
green: "bg-green-500/20 text-green-400 border-green-500/30",
red: "bg-red-500/20 text-red-400 border-red-500/30",
};
return (
<motion.div
key={index}
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, delay: index * 0.01 }}
viewport={{ once: true }}
whileHover={{ y: -5, scale: 1.05 }}
className="group"
>
<Card className="bg-gray-900/50 backdrop-blur-md border-gray-800 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl p-4 text-center">
<div
className={`w-12 h-12 rounded-lg flex items-center justify-center mx-auto mb-3 ${colorClasses[tech.color as keyof typeof colorClasses] ||
"bg-accent/20"
}`}
>
<ImageWithFallback
src={tech.logo}
alt={tech.name}
className="w-8 h-8 object-contain"
/>
</div>
<h4 className="font-semibold text-white text-sm mb-1">
{tech.name}
</h4>
<p className="text-xs text-gray-400">{tech.category}</p>
</Card>
</motion.div>
);
})}
</div>
</motion.div>