Customizing the About section

< Applying Customizations page

This Wiki page will lead you through the customization of the About section. In case of issues, feel free to enter in our community on and post your questions.

About component customizations

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

/src/app/about

Component schema

The About component files are based on the schema below:

File	Description
about-interfaces.ts	Contains the interfaces used to standardize inputs
about.component.html	Contains the view template
about.component.scss	Contains the styles
about.component.responsivity.scss	Contains the responsive styles
about.component.ts	Contains the component's logic

Updating the profile picture

In order to update the About Me profile picture, go to the about.component.scss:96 and update the background-image: url(...) with the URL of the desired profile image.

P.S: use the /src/assetsfolder for placing your assets.

Updating About me text contents

All the text content is placed into a single JSON file, placed in the src/assets/data/about.json. By updating the JSON file, the About me section will reflect those changes. In order to avoid issues, make sure to understand the JSON file data structure in the next topic.

Understanding each interface

The About Me component used the about-interfaces.ts in order to standardize the inputs coming from the src/assets/data/about.json. Below it's described the structure of each property in the IAbout interface.

Property Name	Type Interface	Is Mandatory
internationalization	IAboutInternationalization	✔️
medias	IAboutMedia	❌
hobbies	IAboutHobby	❌

IAboutInternationalization interface properties

The table below describes the properties of the IAboutInternationalization interface:

Property Name	Type	Description
language	String	Must contain a valid LOCALE_ID value
description	String	The profile text description per language

IAboutMedia interface properties

The table below describes the properties of the IAboutMedia interface:

Property Name	Type	Description
icon	String	The icon description 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