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 example
"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 |
Preview and JSON example
"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 |
Preview and JSON example
"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.
Access the about.json:12 and update the JSON accordingly to your expectations:
In case of doubt read about the IAboutMedia interface properties.
Access the about.json:29 and update the JSON accordingly to your expectations:
In case of doubt read about the IAboutHobby interface properties.
All the About me text elements are placed into about.json file or in the template file. By updating those files, the About me section will reflect the changes. See examples below:
Access the template file and update the value of the variables name and yearsOld:
...
ngOnInit(): void {
this.name = 'Guilherme Borges Bastos' // Sets here, your full name
this.yearsOld = this.calcAge("1993-06-29"); // Sets here, your date birthday [ format YYYY-MM-DD]
}
...Access the about.json file and update the description text for each available language.
"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."
}
]In case of doubt read about the IAboutInternationalization interface properties.