Skip to content

Customizing the Welcome section

Guilherme Borges Bastos edited this page Jun 4, 2020 · 15 revisions

< 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 Gitter and post your questions.

Welcome component

Welcome Preview Image

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

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