Command Palette

Search for a command to run...

1.5k
UI
Previous

Work Experience

Display work experiences with role details, company logos, and durations.

Loading…
import { BriefcaseBusinessIcon, CodeXmlIcon } from "lucide-react"
 
import type { ExperienceItemType } from "@/components/work-experience"
import { WorkExperience } from "@/components/work-experience"
 
export function WorkExperienceDemo() {
  return <WorkExperience className="w-full" experiences={WORK_EXPERIENCE} />
}
 
const WORK_EXPERIENCE: ExperienceItemType[] = [
  {
    id: "quaric",
    companyName: "Quaric",
    companyLogo: "https://assets.chanhdai.com/images/companies/quaric.svg",
    positions: [
      {
        id: "2",
        title: "Design Engineer",
        employmentPeriod: "03.2024 — present",
        employmentType: "Part-time",
        icon: CodeXmlIcon,
        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",
        ],
      },
      {
        id: "1",
        title: "Founder & Director",
        employmentPeriod: "03.2024 — present",
        employmentType: "Part-time",
        icon: BriefcaseBusinessIcon,
        skills: ["Business Ownership", "Business Law", "Business Tax"],
      },
    ],
    isCurrentEmployer: true,
  },
]

Features

  • Supports multiple positions per company.
  • Markdown rendering for position descriptions.
  • Company logos and duration display.

Installation

$ pnpm dlx shadcn add @ncdai/work-experience

Usage

import { WorkExperience } from "@/components/work-experience"
import type { ExperienceItemType } from "@/components/work-experience"
const experiences: ExperienceItemType[] = []
 
<WorkExperience experiences={experiences} />

API Reference

WorkExperience

Prop

Type

ExperienceItemType

Prop

Type

ExperiencePositionItemType

Prop

Type