> For the complete documentation index, see [llms.txt](https://pixeldev.gitbook.io/react-portfolio-doc/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://pixeldev.gitbook.io/react-portfolio-doc/customizing-the-contact-section.md).

# Customizing the Contact Section

**1. Changing the Section Title and Description:**

* Locate the `<h2>` and `<p>` tags within the `Contact` component.
* Modify the text within these tags to reflect the desired section title and description.

```jsx
<div className={styles.text}>
   <h2>[Replace this text with your desired section title]</h2>
   <p>[Replace this text with your desired section description]</p>
</div>
```

**2. Updating Contact Information:**

* Ensure the contact information (email, LinkedIn, GitHub) is accurate.
* Modify the `href` attributes of the anchor tags to link to your respective email address, LinkedIn profile, and GitHub profile.

```jsx
<li className={styles.link}>
   <img src={getImageUrl("contact/emailIcon.png")} alt="Email icon" />
   <a href="mailto:[Replace this with your email address]">[Replace this with your email address]</a>
</li>
<li className={styles.link}>
   <img src={getImageUrl("contact/linkedinIcon.png")} alt="LinkedIn icon" />
   <a href="[Replace this with your LinkedIn profile URL]">[Replace this with your LinkedIn profile URL]</a>
</li>
<li className={styles.link}>
   <img src={getImageUrl("contact/githubIcon.png")} alt="Github icon" />
   <a href="[Replace this with your GitHub profile URL]">[Replace this with your GitHub profile URL]</a>
</li>
```

**3. Customizing Icons:**

* If necessary, replace the existing contact icons with custom icons.
* Ensure the new icons are appropriately named and placed in your project directory.
* Update the `src` attribute of the `<img>` tags with the paths to the new icons.

```jsx
<img src={getImageUrl("[Replace this with the path to your custom icon]")} alt="[Replace this with a brief description of your custom icon]" />
```

**4. Previewing Changes:**

* After making desired customizations, save the files.
* Preview your website to ensure the changes are reflected as intended.

<br>