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

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

@@ -3,7 +3,7 @@ import { MapPin, Users, Book } from 'lucide-react';
import type { GithubUser } from '../../lib/github';
interface TeamMemberCardProps {
user: GithubUser;
user: GithubUser ;
role: string;
description: string;
}
@@ -11,18 +11,19 @@ interface TeamMemberCardProps {
export function TeamMemberCard({ user, role, description }: TeamMemberCardProps) {
return (
<motion.div
whileHover={{ y: -5 }}
className="bg-white/80 backdrop-blur-sm p-6 rounded-lg border border-gray-200"
whileHover={{ scale: 1.05 }}
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">
<img
src={user.avatar_url}
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>
<h3 className="font-semibold text-gray-900">{user.name || user.login}</h3>
<p className="text-sm text-cornflower-blue">{role}</p>
<h3 className="font-semibold text-gray-900 text-lg">{user.name || user.login}</h3>
<p className="text-sm text-cornflower-blue font-medium">{role}</p>
{user.location && (
<div className="flex items-center gap-1 text-sm text-gray-500 mt-1">
<MapPin className="h-4 w-4" />
@@ -32,7 +33,7 @@ export function TeamMemberCard({ user, role, description }: TeamMemberCardProps)
</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="flex items-center gap-1">
@@ -49,7 +50,7 @@ export function TeamMemberCard({ user, role, description }: TeamMemberCardProps)
href={user.html_url}
target="_blank"
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 →
</a>