Command Palette

Search for a command to run...

0
Blog
PreviousNext

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: "nikhil-dev",
    companyName: "Nikhil Sundriya",
    companyLogo: "https://assets.chanhdai.com/images/companies/quaric.svg",
    positions: [
      {
        id: "2",
        title: "Student Developer",
        employmentPeriod: "07.2024 — present",
        employmentType: "Full-time",
        icon: CodeXmlIcon,
        description: `- Building modern web applications and developer tools.
- Developed TenTalk – a private self-destructing real-time chat application.
- Built Cineverse – an open-source movie & TV streaming platform.
- Created WebCrafter – a browser-based online code editor.
- Developing full stack projects using modern JavaScript technologies.`,
        skills: [
          "JavaScript",
          "React",
          "Next.js",
          "Tailwind CSS",
          "Node.js",
          "Git",
          "UI/UX Design",
          "Problem Solving",
          "Project Development",
        ],
      },
      {
        id: "1",
        title: "Independent Developer",
        employmentPeriod: "2023 — present",
        employmentType: "Freelance / Personal Projects",
        icon: BriefcaseBusinessIcon,
        skills: [
          "Project Development",
          "Open Source",
          "Web Development",
          "GitHub",
          "Problem Solving",
        ],
      },
    ],
    isCurrentEmployer: true,
  },
]

Features

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

Installation

$ pnpm dlx shadcn add @nikhilsundriya/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