> 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-hero-section.md).

# Customizing the Hero Section

#### Customizing the Hero Section

**1. Changing the Name:**

* Locate the `<h1>` tag within the `Hero` component.
* Modify the text within the `<h1>` tag to reflect the desired name.

```jsx
<h1 className={styles.title}>[Replace this text with your desired name]</h1>
```

**2. Customizing the Description:**

* Locate the `<p>` tag with the class `description`.
* Edit the text within the `<p>` tag to describe yourself or your business in a personalized manner.

```jsx
<p className={styles.description}>
   [Replace this text with your personalized description]
</p>
```

**3. Updating Contact Information:**

* Locate the `<a>` tag with the class `contactBtn`.
* Replace the `href` attribute value with your desired contact method (e.g., email, phone number, contact form link).

```jsx
<a href="[Replace this with your preferred contact method]" className={styles.contactBtn}>
   Contact Me
</a>
```

**4. Changing the Hero Image:**

* Ensure you have the desired image prepared.
* Replace the existing image file with your preferred image.
* Update the `src` attribute of the `<img>` tag with the new image path.

```jsx
<img
   src="[Replace this with the path to your new image]"
   alt="[Replace this with a brief description of your new image]"
   className={styles.heroImg}
/>
```

**5. Previewing Changes:**

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