Work Experience
Displays a list of work experiences with role details and durations.
Quaric Co., Ltd.
Current Employer- Integrated VNPAY-QR for secure transactions.
- Registered the e-commerce site with 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.
- Next.js
- Strapi
- Auth0
- VNPAY-QR
- Docker
- NGINX
- Google Cloud
- Docusaurus
- Extension
- Research
- Project Management
Installation
pnpm dlx shadcn@latest add https://chanhdai.com/r/work-experience.json
Add the @tailwindcss/typography plugin:
@import "tailwindcss";
@plugin "@tailwindcss/typography";Usage
import { WorkExperience } from "@/components/work-experience";
import type { ExperienceItemType } from "@/components/work-experience";const WORK_EXPERIENCE: ExperienceItemType[] = [
{
id: "1",
companyName: "Acme Inc.",
companyLogo: "https://assets.chanhdai.com/images/companies/quaric.svg",
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 | (Optional) |
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
Quaric Co., Ltd.
Current Employer- Integrated VNPAY-QR for secure transactions.
- Registered the e-commerce site with 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.
- Next.js
- Strapi
- Auth0
- VNPAY-QR
- Docker
- NGINX
- Google Cloud
- Docusaurus
- Extension
- Research
- Project Management