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 property

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	Required
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	✔️
internationalizations	IExperienceInternationalization[ ]	Read interface description	✔️
website	string	The company's website URL	❌
backgroundUrl	string	The city's background image URL	❌
technologies	string[]	List of technologies used on the job experience	❌
medias	IExperienceMedia[ ]	Read interface description	❌

JSON example

{
    "position": 6,
    "startAt": "05-01-2020",
    "companyName": "Swisscom AG",
    "website": "https://www.swisscom.ch/",
    "internationalizations": [
        {
            "language": "pt",
            "city": "Rotterdão",
            "country": "Países Baixos",
            "role": "Engenheiro DevOps",
            "description": "<b>Swisscom</b> é a empresa <b>#1</b> de telecomunicações e uma das principais empresas de TI da Suíça. Seus produtos e serviços variam de soluções B2C, como a Swisscom TV, a soluções de TI B2B em vários setores, como Bancos, Saúde, Energia, Entretenimento e Publicidade.<br><br>Na <i>Swisscom DevOps Center</i>, inovação e experimentação estão profundamente enraizadas no DNA da empresa. O ambiente multicultural com 15 nacionalidades, somado à cultura de <i>Tribos/Esquadrões</i>, contribui para colocar nós, funcionários, como parte de uma equipe virtual internacional, especializada em DevOps, entre várias outras tecnologias de ponta."
        },
        {
            "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."
        }
    ],
    "technologies": [
        "Java", "Spring Boot", "Angular", "Typescript", "Javascript", "SDX", "Versioning Control", "DevOps", "CI/CD", "JUnit", "Karma", "Jasmine", "Selenium", "Jenkins", "Docker", "NPM", "Gradle", "Jira"
    ],
    "medias": [
        {
            "icon": "linkedin",
            "title": "LinkedIn Swisscom",
            "http": "https://www.linkedin.com/company/swisscom/"
        },
        {
            "icon": "facebook",
            "title": "Facebook Swisscom",
            "http": "https://www.facebook.com/Swisscom"
        },
        {
            "icon": "youtube",
            "title": "Youtube Swisscom",
            "http": "https://www.youtube.com/swisscom"
        }
    ],
    "backgroundUrl": "https://assets.guilhermeborgesbastos.com/live-resume/template/experience/rotterdam.jpg"
}

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/"
}

Experience Timeline

The experience timeline is built dynamically chronologically, based on the startDate and endDate of each job experience.