# Customization Guide — Hero Section 03 (Personal Portfolio)

This guide explains how to customize the assets, styling, coordinates, and content of the Personal Portfolio Hero Section (`Hero-03`).

---

## 1. Customizing Logo & Navigation
Open `index.html` and search for `.premium-header`. 
- **Logo Brandmark:** Edit the text `Gabriel.D` or replace it with your own signature or logo:
  ```html
  <a href="#" class="logo-link">YourName<span class="logo-dot">.</span></a>
  ```
- **Navigation Links:** Modify nav links inside `<nav class="main-nav">` in `index.html`. Make sure to sync edits to `<nav class="mobile-nav">`.

---

## 2. Text Content & Typography
The typography styles use **Syne** (for headlines) and **Inter** (for body copy) loaded via Google Fonts.
- **Headline:** Update the `h1` tag inside the `.hero-left` container. The `.gradient-text` class applies a dual-layer purple-to-blue linear color mask:
  ```html
  <h1 class="hero-title">
    Designing <br>
    Digital Products <br>
    <span class="gradient-text">That People Love.</span>
  </h1>
  ```
- **Introduction:** Locate `.hero-description` and update the paragraph.

---

## 3. Changing the Profile Photo
The right column displays a large portrait showcase. Search for `.image-showcase` inside `index.html` and edit the `src` attribute of the image tag:
```html
<div class="image-showcase" data-tilt>
  <img src="path/to/your/avatar.jpg" class="showcase-img" alt="...">
</div>
```
- Replace the `src` with a high-resolution portrait photograph of yourself or an abstract creative workspace graphic.
- The `data-tilt` attribute activates the JavaScript interactive tilt physics. Remove it if you wish to disable this behavior.

---

## 4. Customizing Theme Colors
All colors, grids, card backgrounds, and gradient glows are mapped to CSS custom variables in `:root` scope of `style.css`:
```css
:root {
  --color-bg: #0a0a0a;                 /* Main background (Obsidian black) */
  --color-card-bg: rgba(18, 18, 20, 0.7); /* Floating cards background fill */
  --color-primary: #ffffff;            /* Primary Text Color */
  --color-accent: #2563eb;             /* Electric Blue highlight accent */
  --color-secondary: #a855f7;          /* Soft Purple accent */
  --color-success: #10b981;            /* Emerald Green status accent */
}
```
Modify these variables to instantly update the overall layout colors.

---

## 5. Modifying Statistics & Floating Badges
- **Statistics Grid:** The numbers in the statistics grid count up automatically. Edit the target numbers in the `data-count` attribute in `index.html`:
  ```html
  <span class="stat-value" data-count="120">0</span>
  ```
  The script will parse this number on viewport entry and count up cleanly.
- **Floating Cards:** You can customize the tags inside the floating cards (`UI/UX Designer`, `120+ Projects Completed`, `8 Years Experience`) directly in the HTML. Adjust their absolute coordinate layouts inside `style.css` under `.card-designer`, `.card-experience`, and `.card-projects`.
