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

Understanding the component structure

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.

Understanding each interface

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

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."
    }
]

IAboutMedia interface properties

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

IAboutHobby interface properties

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 example

"hobbies": [        
    {
        "icon": "biking",
        "title": "Cycling"
    },
    {
        "icon": "dumbbell",
        "title": "Gym"
    },
    {
        "icon": "suitcase-rolling",
        "title": "Travel"
    },
    {
        "icon": "book",
        "title": "Read"
    }
]

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 social media

Access the about.json:12 and update the JSON accordingly to your expectations:

In case of doubt read about the IAboutMedia interface properties.

Updating hobbies

Access the about.json:29 and update the JSON accordingly to your expectations:

In case of doubt read about the IAboutHobby interface properties.

Updating About me text elements

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:

Updating name & years old

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]
}
...

Updating profile text description(s)

Access the about.json file and update the description text for each available language.

In case of doubt, read about the IAboutInternationalization interface properties.