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 
The entire code that belongs to the About component can be found here:
/src/app/about
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 |
The About Me 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 about.json file.
In order to avoid issues and re-work, make sure to understand the JSON file data structure in the next topics.
The About Me component uses 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 |
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.
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.