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 | ❌ |
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 |
JSON representation
"internationalizations": [
{
"language": "pt",
"description": "Minha caminhada como <i>programador</i> teve início aos nove anos de idade quando me apaixonei pelo <i>Logo</i>, uma linguagem de programação educacional usada para cativar crianças nas maravilhosas terras da <i>Programação</i>. Costumava passar horas seguidas tentando criar figuras e animações, usando matemática e geometria. Naquela época, eu simplesmente não conhecia os desafios emocionantes que ainda estavam por vir.<br><br>Alguns anos depois, consegui um estágio como <i>Webmaster</i>, desde então, nunca mais parei, sendo mais de uma década, onde venho tendo a chance de trabalhar com pessoas maravilhosas, aprendendo todos os dias, viajando pelo mundo e, principalmente, sempre fazendo grandes amizades.<br><br>Tive experiência como empreendedor, quando um amigo apresentou-me <i>Magento</i>, um framework de comércio eletrônico extremamente popular. Depois de fazer vários cursos e muita prática, consegui contratos com agências de São Paulo e Rio de Janeiro, Brasil. Essa experiência de empreendedorismo me deu a chance de ver o outro lado da moeda, o que contribuiu para expandir um pouco mais minha consciência como colaborador.<br><br>Atualmente, continuo buscando novas habilidades, aprendendo e compartilhando meu humilde conhecimento, tanto quanto possível."
},
{
"language": "en",
"description": "My path as a <i>programmer</i> has started at nineish years old, when I've fallen in love with <i>Logo</i>, an educational programming language used to captivate kids in the wonderful lands of <i>Programming</i>. I used to spend hours in a row trying to build figures and animations, using math and geometry. At that time, I just did not know the exciting challenges that were yet to come.<br><br>A few years later, I got an internship as a <i>Webmaster</i>, since then, I have never stopped. It has been more than a decade, where I'm having the chance to work with marvelous people, learning every day, traveling the world, and mainly, always making great friendships.<br><br>I had an entrepreneurship experience, when a friend of mine presented me <i>Magento</i>, an extremely popular e-commerce framework. After doing several courses and a lot of practice, I got contracts with agencies from São Paulo and Rio de Janeiro, Brazil. This entrepreneurship experience gave me the chance to see the other side of the coin, which contributed to sort of expand a bit more my consciousness as an employee.<br><br>Nowadays, I keep seeking new skills, learning and sharing my humble knowledge as much as possible."
}
]The table below describes the properties of the IAboutMedia 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 representation
"medias": [
{
"icon": "linkedin",
"title": "LinkedIn",
"http": "https://www.linkedin.com/in/guilhermeborgesbastos/"
},
{
"icon": "github",
"title": "GitHub",
"http": "https://github.com/guilhermeborgesbastos"
},
{
"icon": "facebook",
"title": "Facebook",
"http": "https://www.facebook.com/guilherme.borgesbastos"
}
]The table below describes the properties of the IAboutHobby interface:
| Property Name | Type | Description |
|---|---|---|
| icon | String | The hobby icon according to the Font Awesome catalog |
| title | String | The value displayed in the alt attribute of the icon |
JSON representation
"hobbies": [
{
"icon": "biking",
"title": "Cycling"
},
{
"icon": "dumbbell",
"title": "Gym"
},
{
"icon": "suitcase-rolling",
"title": "Travel"
},
{
"icon": "book",
"title": "Read"
}
]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.