Work Experience
Displays a list of work experiences with role details and durations.
Loading...
import type { ExperienceItemType } from "@/components/ncdai/work-experience";
import { WorkExperience } from "@/components/ncdai/work-experience";
const WORK_EXPERIENCE: ExperienceItemType[] = [
{
id: "busnet",
companyName: "Busnet",
companyLogo: "https://github.com/Zephinax.png",
positions: [
{
id: "f2c92c5f-c3f7-4b4c-9dbd-83ef20041378",
title: "Frontend Developer",
employmentPeriod: "2024 — present",
employmentType: "Full-time",
icon: "code",
description: `- Build and ship user-facing features in React/Next.js with strong TypeScript foundations.
- Harden performance and accessibility for production releases.
- Collaborate with backend teams to refine APIs and data flows.`,
skills: [
"Next.js",
"React",
"TypeScript",
"Tailwind CSS",
"API Integration",
"Performance",
],
isExpanded: true,
},
{
id: "56af98ec-28de-45c3-b9df-425e688c5475",
title: "Hardware & Software Engineer",
employmentPeriod: "2023 — present",
employmentType: "Part-time",
icon: "design",
description: `- Prototype and integrate embedded hardware with web dashboards.
- Bridge firmware data into cloud services for monitoring and control.
- Mentor teammates on testing and release best practices.`,
skills: [
"Embedded Systems",
"IoT",
"TypeScript",
"DevOps",
"Testing",
"Observability",
],
},
],
isCurrentEmployer: true,
},
];
export function WorkExperienceDemo() {
return <WorkExperience className="w-full" experiences={WORK_EXPERIENCE} />;
}Installation
bunx --bun shadcn add @zephinax/work-experience
Usage
import { WorkExperience } from "@/components/zephinax/work-experience";
import type { ExperienceItemType } from "@/components/zephinax/work-experience";const WORK_EXPERIENCE: ExperienceItemType[] = [
{
id: "1",
companyName: "Acme Inc.",
companyLogo: "https://github.com/Zephinax.png",
isCurrentEmployer: true,
positions: [
{
id: "1-1",
title: "Senior Software Engineer",
employmentPeriod: "Jan 2022 - Present",
employmentType: "Full-time",
description:
"Leading a team of developers to build scalable web applications.",
icon: "code",
skills: ["JavaScript", "React", "Node.js"],
isExpanded: true,
},
{
id: "1-2",
title: "Software Engineer",
employmentPeriod: "Jan 2020 - Dec 2021",
employmentType: "Full-time",
description:
"Developed and maintained web applications using modern technologies.",
icon: "code",
skills: ["HTML", "CSS", "JavaScript"],
},
],
},
];<WorkExperience experiences={WORK_EXPERIENCE} />Props
Props for the WorkExperience component:
| Prop | Type | Description |
|---|---|---|
experiences | ExperienceItemType[] | An array of work experience items to display. Each item includes company details and positions held. |
className | string | Additional CSS classes to apply to the root element. |
Types
type ExperiencePositionIconType = "design" | "code" | "business" | "education";
type ExperiencePositionItemType = {
/** Unique identifier for the position */
id: string;
/** The job title or position name */
title: string;
/** The period during which the position was held (e.g., "Jan 2020 - Dec 2021") */
employmentPeriod: string;
/** The type of employment (e.g., "Full-time", "Part-time", "Contract") */
employmentType?: string;
/** A brief description of the position or responsibilities */
description?: string;
/** An icon representing the position */
icon?: ExperiencePositionIconType;
/** A list of skills associated with the position */
skills?: string[];
/** Indicates if the position details are expanded in the UI */
isExpanded?: boolean;
};
type ExperienceItemType = {
/** Unique identifier for the experience item */
id: string;
/** Name of the company where the experience was gained */
companyName: string;
/** URL or path to the company's logo image */
companyLogo?: string;
/** List of positions held at the company */
positions: ExperiencePositionItemType[];
/** Indicates if this is the user's current employer */
isCurrentEmployer?: boolean;
};Examples
Loading...
import type { ExperienceItemType } from "@/components/ncdai/work-experience";
import { WorkExperience } from "@/components/ncdai/work-experience";
const WORK_EXPERIENCE: ExperienceItemType[] = [
{
id: "busnet",
companyName: "Busnet",
companyLogo: "https://github.com/Zephinax.png",
positions: [
{
id: "f2c92c5f-c3f7-4b4c-9dbd-83ef20041378",
title: "Frontend Developer",
employmentPeriod: "2024 — present",
employmentType: "Full-time",
icon: "code",
description: `- Build and ship user-facing features in React/Next.js with strong TypeScript foundations.
- Harden performance and accessibility for production releases.
- Collaborate with backend teams to refine APIs and data flows.`,
skills: [
"Next.js",
"React",
"TypeScript",
"Tailwind CSS",
"API Integration",
"Performance",
],
isExpanded: true,
},
{
id: "56af98ec-28de-45c3-b9df-425e688c5475",
title: "Hardware & Software Engineer",
employmentPeriod: "2023 — present",
employmentType: "Part-time",
icon: "design",
description: `- Prototype and integrate embedded hardware with web dashboards.
- Bridge firmware data into cloud services for monitoring and control.
- Mentor teammates on testing and release best practices.`,
skills: [
"Embedded Systems",
"IoT",
"TypeScript",
"DevOps",
"Testing",
"Observability",
],
},
],
isCurrentEmployer: true,
},
];
export function WorkExperienceDemo() {
return <WorkExperience className="w-full" experiences={WORK_EXPERIENCE} />;
}