Display work experiences with role details, company logos, and durations.
- Next.js
- Strapi
- Auth0
- VNPAY-QR
- Docker
- NGINX
- Google Cloud
- Docusaurus
- Extension
- Research
- Project Management
- Business Ownership
- Business Law
- Business Tax
Installation
Copy the Source Code
Copy and paste the following code into your project:
experience-item.svelte
experience-position-item.svelte
index.ts
prose.svelte
skill.svelte
work-experience-types.ts
work-experience-utils.ts
work-experience.svelte
Add Tailwind CSS
Add the following to your routes/layout.css file:
tailwind.css
Usage
usage.svelte
Examples
Props
WorkExperience
Container that renders a list of work experiences.
| Name | Type | Default | Description |
|---|---|---|---|
experiences | ExperienceItemType[] | required | Companies and positions displayed in the work experience list. |
class | string | undefined | Additional classes applied to the container. |
ref | HTMLDivElement | null | null | Bindable reference to the container element. |
ExperienceItem
Company entry containing one or more positions.
| Name | Type | Default | Description |
|---|---|---|---|
experience | ExperienceItemType | required | Company name, logo, website, positions, and current-employer state. |
ExperiencePositionItem
Individual role with its dates, details, and skills.
| Name | Type | Default | Description |
|---|---|---|---|
position | ExperiencePositionItemType | required | Role title, employment period, type, description, icon, skills, and initial expanded state. |