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 
The entire code that belongs to the Welcome component can be found here:
/src/app/welcome
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 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]"/>
...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.
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.
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.