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 and post your questions.

Experience component customizations

The entire code that belongs to the Experience component can be found here:

/src/app/experience

Component schema

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

Understanding the component structure

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.

Understanding each interface

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 or 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	✔️
internationalizations	IExperienceInternationalization[ ]	Read interface description	✔️

IExperienceInternationalization interface properties

The table below describes the properties of the IExperienceInternationalization interface:

Property Name	Type	Description
language	String	Must contain a valid LOCALE_ID value
city	String	The internationalized city name per language
country	String	The internationalized country name per language
role	String	The internationalized role name per language
description	String	The internationalized experience description per language

JSON example

{
    "language": "en",
    "city": "Rotterdam",
    "country": "Netherlands",
    "role": "DevOps Engeneer",
    "description": "<b>Swisscom</b> is the <b>#1</b> telecommunications company and one of the leading IT companies in Switzerland. Its products and services range from B2C products, such as <i>Swisscom TV</i>, to B2B IT solutions in multiple industries, such as <i>Banking, Health, Energy, Entertainment, and Advertising</i>.<br><br>In the <i>Swisscom DevOps Center</i> innovation and experimenting are deeply rooted in the DNA of the company. The multicultural environment with 15 nationalities, and a <i>Tribe/Squad</i> culture, contribute to putting us, the employees, as part of an international virtual team, specialized in DevOps among various other top technologies."
}

IExperienceMedia interface properties

The table below describes the properties of the IExperienceMedia interface:

Property Name	Type	Description
icon	String	The social media icon according to the Font Awesome catalog
title	String	The value displayed in the alt attribute of the icon
http	String	The HTTP address used in the anchor that wraps the icon

JSON example

{
    "icon": "linkedin",
    "title": "LinkedIn Swisscom",
    "http": "https://www.linkedin.com/company/swisscom/"
}