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: "quaric",
companyName: "Quaric Co., Ltd.",
companyLogo: "https://assets.chanhdai.com/images/companies/quaric.svg",
positions: [
{
id: "30d3a9fb-021d-452a-9d27-83655369b4b9",
title: "Software Engineer",
employmentPeriod: "03.2024 — present",
employmentType: "Part-time",
icon: "code",
description: `- Integrated VNPAY-QR for secure transactions.
- Registered the e-commerce site with [online.gov.vn](https://online.gov.vn) for compliance.
- Developed online ordering to streamline purchases.
- Build and maintain ZaDark.com with Docusaurus, integrating AdSense.
- Develop and maintain the ZaDark extension for Zalo Web on Chrome, Safari, Edge, and Firefox — with 15,000+ active users via Chrome Web Store.`,
skills: [
"Next.js",
"Strapi",
"Auth0",
"VNPAY-QR",
"Docker",
"NGINX",
"Google Cloud",
"Docusaurus",
"Extension",
"Research",
"Project Management",
],
isExpanded: true,
},
{
id: "7586afb2-40e8-49c4-8983-2254c9446540",
title: "Product Designer",
employmentPeriod: "03.2024 — present",
employmentType: "Part-time",
icon: "design",
description: `- Design UI/UX for Quaric Website with a seamless experience.
- Develop a Design System for consistency and efficiency.
- Create Quaric's brand identity, including logo and guidelines.`,
skills: [
"UI/UX Design",
"UX Writing",
"Design System",
"Brand Design",
"Figma",
],
},
{
id: "991692c4-7d02-4666-8d31-933c4831768d",
title: "Founder & Director",
employmentPeriod: "03.2024 — present",
employmentType: "Part-time",
icon: "business",
description: `- Lead and manage the company's strategy.
- Oversee technical teams and product development.
- Manage relationships with customers and partners.`,
skills: ["Business Ownership", "Business Law", "Business Tax"],
},
],
isCurrentEmployer: true,
},
];
export function WorkExperienceDemo() {
return <WorkExperience className="w-full" experiences={WORK_EXPERIENCE} />;
}Installation
pnpm dlx shadcn add @emmaagwu/work-experienceNote: This CLI command is not yet available. Please follow the manual installation steps below.
Usage
import { WorkExperience } from "@/components/ncdai/work-experience";
import type { ExperienceItemType } from "@/components/ncdai/work-experience";const WORK_EXPERIENCE: ExperienceItemType[] = [
{
id: "kneesup-venues",
companyName: "Kneesup-Venues",
companyLogo: "/images/kneesup-logo.png",
isCurrentEmployer: true,
positions: [
{
id: "3e831244-8d8c-41e2-b2ce-7f3946956afd",
title: "FullStack Developer",
employmentPeriod: "2025 - Present",
employmentType: "Part-time",
description:
"Actively shipping new features and enhancements for a live venue & event booking platform. Translating Figma designs into pixel-perfect, production-ready interfaces.",
icon: "code",
skills: ["Next.js", "React", "Svelte", "SvelteKit", "Firebase"],
isExpanded: true,
},
],
},
{
id: "freelance",
companyName: "Freelance Developer",
positions: [
{
id: "f0becfba-057d-40db-b252-739e1654faa1",
title: "Full-stack Developer",
employmentPeriod: "2023 - Present",
employmentType: "Self-Employed",
description:
"Designed, built, and deployed full-stack web applications tailored to client business needs. Implemented real-time features, API integrations, and interactive dashboards.",
icon: "code",
skills: ["JavaScript", "TypeScript", "React", "Node.js", "MongoDB"],
},
{
id: "alx-mentor",
title: "ALX Technical Mentor (Volunteer)",
employmentPeriod: "Dec 2024 - Feb 2025",
employmentType: "Volunteer · Remote",
description:
"Mentored 200+ aspiring software engineers on backend development best practices, debugging, and system design. Conducted code reviews and technical walkthroughs.",
icon: "code",
skills: ["Node.js", "Express.js", "PostgreSQL", "Docker", "AWS"],
},
],
},
];<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: "quaric",
companyName: "Quaric Co., Ltd.",
companyLogo: "https://assets.chanhdai.com/images/companies/quaric.svg",
positions: [
{
id: "30d3a9fb-021d-452a-9d27-83655369b4b9",
title: "Software Engineer",
employmentPeriod: "03.2024 — present",
employmentType: "Part-time",
icon: "code",
description: `- Integrated VNPAY-QR for secure transactions.
- Registered the e-commerce site with [online.gov.vn](https://online.gov.vn) for compliance.
- Developed online ordering to streamline purchases.
- Build and maintain ZaDark.com with Docusaurus, integrating AdSense.
- Develop and maintain the ZaDark extension for Zalo Web on Chrome, Safari, Edge, and Firefox — with 15,000+ active users via Chrome Web Store.`,
skills: [
"Next.js",
"Strapi",
"Auth0",
"VNPAY-QR",
"Docker",
"NGINX",
"Google Cloud",
"Docusaurus",
"Extension",
"Research",
"Project Management",
],
isExpanded: true,
},
{
id: "7586afb2-40e8-49c4-8983-2254c9446540",
title: "Product Designer",
employmentPeriod: "03.2024 — present",
employmentType: "Part-time",
icon: "design",
description: `- Design UI/UX for Quaric Website with a seamless experience.
- Develop a Design System for consistency and efficiency.
- Create Quaric's brand identity, including logo and guidelines.`,
skills: [
"UI/UX Design",
"UX Writing",
"Design System",
"Brand Design",
"Figma",
],
},
{
id: "991692c4-7d02-4666-8d31-933c4831768d",
title: "Founder & Director",
employmentPeriod: "03.2024 — present",
employmentType: "Part-time",
icon: "business",
description: `- Lead and manage the company's strategy.
- Oversee technical teams and product development.
- Manage relationships with customers and partners.`,
skills: ["Business Ownership", "Business Law", "Business Tax"],
},
],
isCurrentEmployer: true,
},
];
export function WorkExperienceDemo() {
return <WorkExperience className="w-full" experiences={WORK_EXPERIENCE} />;
}