Customizing the Contact section

< Applying Customizations page

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

Contact component customizations

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

/src/app/contact

Component schema

The Posts component files are based on the schema below:

File	Description
contact.service.ts	The service that connects to the Firestore
contact.component.html	Contains the view template
contact.component.scss	Contains the styles
contact.component.responsivity.scss	Contains the responsive styles
contact.component.ts	Contains the component's logic

---

Updating Firebase info

This step is mandatory in order to enable the contact form.

The contact form uses Firestore from Firebase to store the form submissions. Follow the next steps in order to set up your Firebase credentials:

Set up Firebase account

On this official link, do steps 1 and 2 only, which explains the necessary steps for the creation of a Firebase account. As soon as you reach the point where Firebase provides the firebaseConfig information, copy this information and keep it:

firebaseConfig example

var firebaseConfig = {
  apiKey: "api-key",
  authDomain: "project-id.firebaseapp.com",
  databaseURL: "https://project-id.firebaseio.com",
  projectId: "project-id",
  storageBucket: "project-id.appspot.com",
  messagingSenderId: "sender-id",
  appID: "app-id",
};

Go to the environments.ts file, paste the firebaseConfig information and save it.

After that, refresh the application, fill and submit the contact form. Go to the Firebase Console and open the Database tab, on the sidebar. You should see a new document in the contacts collection:

Updating contact info

Access the contact template file and update the value of the variables name, email, phone and location:

...
ngOnInit(): void {
    this.name = "Your name";
    this.email = "your-email@gmail.com";
    this.phone = "+1 (xxx) xxx-xx-xx"; // optional, hide it from the resume by setting its value as empty "".
    this.location = "your location";
}
...

Preview

Updating contact photo

In order to update the Contact profile picture, go to the about.component.scss:129 and update the background-image: url(...) with the URL of the desired profile image.

P.S: use the /src/assets folder for placing your assets.