Snigdha-OS/Snigdha-OS.github.io
2
0
Fork 0
mirror of https://github.com/Snigdha-OS/Snigdha-OS.github.io.git synced 2025-09-05 20:26:43 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

✨ style: animated card

Browse Source
This commit is contained in:
eshanized
2025-01-07 02:36:37 +05:30
parent bcaf08572c
commit 9719cae1e0
1 changed files with 10 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/developers/TeamMemberCard.tsx
View File

@@ -1,9 +1,9 @@
import { motion } from 'framer-motion'; import { motion } from 'framer-motion';
import { MapPin, Users, Book } from 'lucide-react'; import { MapPin, Users, Book } from 'lucide-react';
import type { GithubUser } from '../../lib/github'; import type { GithubUser } from '../../lib/github';
interface TeamMemberCardProps { interface TeamMemberCardProps {
user: GithubUser; user: GithubUser ;
role: string; role: string;
description: string; description: string;
} }
@@ -11,18 +11,19 @@ interface TeamMemberCardProps {
export function TeamMemberCard({ user, role, description }: TeamMemberCardProps) { export function TeamMemberCard({ user, role, description }: TeamMemberCardProps) {
return ( return (
<motion.div <motion.div
whileHover={{ y: -5 }} whileHover={{ scale: 1.05 }}
className="bg-white/80 backdrop-blur-sm p-6 rounded-lg border border-gray-200" transition={{ type: 'spring', stiffness: 300 }}
className="bg-white shadow-lg rounded-lg p-6 border border-gray-200 flex flex-col justify-between"
> >
<div className="flex items-start gap-4"> <div className="flex items-start gap-4">
<img <img
src={user.avatar_url} src={user.avatar_url}
alt={`${user.login}'s avatar`} alt={`${user.login}'s avatar`}
className="w-16 h-16 rounded-full" className="w-16 h-16 rounded-full border-2 border-cornflower-blue"
/> />
<div> <div>
<h3 className="font-semibold text-gray-900">{user.name || user.login}</h3> <h3 className="font-semibold text-gray-900 text-lg">{user.name || user.login}</h3>
<p className="text-sm text-cornflower-blue">{role}</p> <p className="text-sm text-cornflower-blue font-medium">{role}</p>
{user.location && ( {user.location && (
<div className="flex items-center gap-1 text-sm text-gray-500 mt-1"> <div className="flex items-center gap-1 text-sm text-gray-500 mt-1">
<MapPin className="h-4 w-4" /> <MapPin className="h-4 w-4" />
@@ -32,7 +33,7 @@ export function TeamMemberCard({ user, role, description }: TeamMemberCardProps)
</div> </div>
</div> </div>
<p className="mt-4 text-gray-600">{description}</p> <p className="mt-4 text-gray-600 flex-grow">{description}</p>
<div className="mt-4 flex items-center gap-4 text-sm text-gray-500"> <div className="mt-4 flex items-center gap-4 text-sm text-gray-500">
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
@@ -49,7 +50,7 @@ export function TeamMemberCard({ user, role, description }: TeamMemberCardProps)
href={user.html_url} href={user.html_url}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="mt-4 inline-flex items-center text-sm text-cornflower-blue hover:underline" className="mt-4 inline-flex items-center text-sm text-cornflower-blue hover:underline transition-colors duration-200"
> >
View GitHub Profile → View GitHub Profile →
</a> </a>