Customizing the Experience section
< Applying Customizations page
This Wiki page will lead you through the customization of the Experience section. In case of issues, feel free to enter in our community on 
The entire code that belongs to the Experience component can be found here:
/src/app/experience
The Experience component files are based on the schema below:
| File | Description |
|---|---|
| experience.molule.ts | A @NgModule used to encapsulation |
| experience-interfaces.ts | Contains the interfaces used to standardize inputs |
| experience.component.html | Contains the view template |
| experience.component.scss | Contains the styles |
| experience.component.responsivity.scss | Contains the responsive styles |
| experience.component.ts | Contains the component's logic |
| experience-timeline | A folder containing the experience's timeline child component |
The Experience section is built dynamically, in case of keeping the original structure, no coding is required. For content customization, it is only required a few changes on the experiences.json file.
In order to avoid issues and re-work, make sure to understand the JSON file data structure in the next topics.
The Experience component uses the experience-interfaces.ts in order to standardize the inputs coming from the src/assets/data/experiences.json. Below, it's described each property of the IExperience interface.
| Property Name | Type / Interface | Description | Is Mandatory |
|---|---|---|---|
| position | number | Chronicle order experience position - Unique value | ✔️ |
| startAt | string | The experience's start date - MM-DD-YYYY | ✔️ |
| endAt | string | The experience's end date - MM-DD-YYYY | ✔️ |
| companyName | string | The company name | ✔️ |
| website | string | The company's website URL | ❌ |
| backgroundUrl | string | The city's background image URL | ✔️ |