import { Calendar, ExternalLink, Share2 } from "lucide-react"; import Image from "next/image"; import { Button } from "@/components/ui/button"; interface Skill { name: string; level: number; } interface PortfolioCardProps { name?: string; role?: string; image?: string; status?: string; skills?: Skill[]; portfolio?: string; } const defaultProfile = { name: "Ruixen", role: "Software Developer Engineer", image: "https://github.com/shadcn.png", status: "Available for Remote Projects", skills: [ { name: "TypeScript", level: 5 }, { name: "Node.js", level: 4 }, { name: "AWS", level: 3 }, ], portfolio: "https://github.com/ruixenui", } satisfies PortfolioCardProps; export function PortfolioCard({ name = defaultProfile.name, role = defaultProfile.role, image = defaultProfile.image, status = defaultProfile.status, skills = defaultProfile.skills, portfolio = defaultProfile.portfolio, }: PortfolioCardProps = defaultProfile) { return (

{/* Banner */}

{/*

Driven by Impact · Delivering Clean Code

*/}

{/* Profile Image */}

{/* Info */}

{name}

{role}

{status}

{/* Skills */}

{skills.map((skill) => (

{skill.name} {skill.level}/5

))}

{/* Actions */}

); }

Prop	Type	Default	Description
`name`	`string`	`"Ruixen"`	Name of the person
`role`	`string`	`"Software Developer Engineer"`	Professional role or title
`image`	`string`	-	Profile image URL
`status`	`string`	`"Available for Remote Projects"`	Current availability status
`skills`	`Skill[]`	-	Array of skills with levels (1-5)
`portfolio`	`string`	-	Portfolio or website URL

Portfolio Card

Ruixen

Installation

Props

Ruixen