Customizing the Welcome section

< Applying Customizations page

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

Welcome component customizations

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

/src/app/welcome

Component schema

The Welcome component files are based on the schema below:

File	Description
welcome.molule.ts	A @NgModule used to encapsulation
welcome.component.html	Contains the view template
welcome.component.scss	Contains the styles
welcome.component.responsivity.scss	Contains the responsive styles
welcome.component.ts	Contains the component's logic
welcome-background	A folder containing the welcome's background child component
welcome-dialog	A folder containing the welcome's dialog child component

The Welcome Background child component files are based on the schema below:

File	Description
welcome-background.component.html	Contains the view template
welcome-background.component.scss	Contains the styles
welcome-background.component.responsivity.scss	Contains the responsive styles
welcome-background.component.ts	Contains the component's logic

The Welcome Dialog child component files are based on the schema below:

File	Description
welcome-dialog.component.html	Contains the view template
welcome-dialog.component.scss	Contains the styles
welcome-dialog.component.responsivity.scss	Contains the responsive styles
welcome-dialog.component.ts	Contains the component's logic
welcome-dialog-typing	A folder containing the welcome's dialog typing directive

Customizing the caricature

The caricature and avatar can be easily replaced by another <img>, just by replacing the value of the src attribute of the <img> tag in the welcome.component.html:

...
<img loading="lazy" class="illustration" src="[your-new-img-address]" alt="[your-new-alt-value]"/>
...

Caricature dimension and weight

The caricature size is 550x780 pixels. Be careful with its weight, heavy resources will slow down your website, jeopardize the user experience, and decrease your SEO index. On production mode, it is good to consider using CDN and GZIP.

Where can I do my caricature?

Several people asked me about the caricature service. I did my caricature on Caricature Master. They did a great job, fair price with great quality.

Customizing the background skill icons

All the skill icons are basic <img> tags, in order to update them, it is just necessary to replace the src attribute with the path of the desired resource (.svg, .png, etc...) and the alt attribute with its new value. The file target of the changes can be found here.

Customizing the dialog phrases

The dialog component has a directive that is in charge of displaying the phrases in the dialog frame. In order to update the phrases displayed in the dialog, its just necessary to update the data property in the view file.

<span
    class="txt-rotate" 
    typingAnimation
    [phrasePeriod]="2000"
    [startDelay]="1500"
    [typeSpeed]="200"
    [data]='[
        { 
            "language": "pt",
            "phrases": [ "Meu nome é Guilherme.", "Seja bem-vindo(a) ao meu resumo online.", "Abaixo, você me conhecerá melhor... :)" ]
        },
        { 
            "language": "en",
            "phrases": [ "My name is Guilherme.", "Be welcome to my Live Resume.", "Down below, you will know me better... :)" ]
        }
    ]'></span>

Directive properties

As you probably noticed, there are four properties in the typingAnimation directive. Follow the table description of each property:

Property	Description
phrasePeriod	The period in milliseconds between the phrases transitions
startDelay	The delay in milliseconds for starting the typing animation
typeSpeed	The interval in milliseconds between each character typing
data	The dialog phrases per language to be displayed

Data properties

Notice that the data property is an array of objects, with the following format:

Property	Description
language	Must contain a valid LOCALE_ID value
phrases	An array of strings per language, containing the individual phases to be displayed