> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/GmzQzvZ/portafolio/llms.txt
> Use this file to discover all available pages before exploring further.

# Contact Section Component

> Contact form with WhatsApp integration, contact info cards, and social links

# Contact Section Component

The contact section includes a form that sends messages via WhatsApp, contact information cards, and social media links.

## Section Structure

```html theme={null}
<section id="contact">
  <div class="container">

    <!-- Title -->
    <div class="py-4 my-4">
      <h1 class="fw-bold mt-5">Contacto</h1>
      <p>¿Tienes una idea o quieres trabajar conmigo? ¡Hablemos!</p>
    </div>

    <hr class="mid-break my-2">

    <!-- Contact Form -->
    <div class="py-4 my-4">
      <!-- Form content -->
    </div>

    <hr class="mid-break my-2">

    <!-- Contact Information -->
    <div class="py-4 my-4">
      <!-- Contact cards -->
    </div>

    <hr class="mid-break my-2">

    <!-- Social Networks -->
    <div class="py-4 my-4">
      <!-- Social links -->
    </div>
  </div>
</section>
```

## Contact Form

The form collects user information and sends it via WhatsApp using JavaScript.

### Form HTML

```html theme={null}
<div class="py-4 my-4">
  <div class="row justify-content-center">
    <div class="col-lg-8">
      <form id="miniContactForm" class="row g-3">
        <div class="col-md-6">
          <label for="contactName" class="form-label">Nombre</label>
          <input type="text" 
                 class="form-control" 
                 id="contactName" 
                 name="name" 
                 placeholder="Tu nombre" 
                 required>
        </div>
        
        <div class="col-md-6">
          <label for="contactEmail" class="form-label">Email</label>
          <input type="email" 
                 class="form-control" 
                 id="contactEmail" 
                 name="email" 
                 placeholder="tucorreo@dominio.com" 
                 required>
        </div>
        
        <div class="col-12">
          <label for="contactMessage" class="form-label">Mensaje</label>
          <textarea class="form-control" 
                    id="contactMessage" 
                    name="message" 
                    rows="4" 
                    placeholder="Cuéntame brevemente tu idea" 
                    required></textarea>
        </div>
        
        <div class="col-12 d-flex gap-2">
          <button type="submit" class="btn btn-primary">
            <i class="ti ti-send"></i> Enviar
          </button>
          <button type="reset" class="btn btn-outline-secondary">
            <i class="ti ti-rotate"></i> Limpiar
          </button>
        </div>
      </form>
    </div>
  </div>
</div>
```

### Form Layout

<ParamField path="col-lg-8" type="class">
  Form container uses 8 columns (66% width) on large screens, centered
</ParamField>

<ParamField path="row g-3" type="class">
  Grid layout with 1rem gap between elements
</ParamField>

<ParamField path="col-md-6" type="class">
  Name and email fields use 50% width on medium screens and above
</ParamField>

<ParamField path="col-12" type="class">
  Message field and buttons span full width
</ParamField>

## WhatsApp Integration

The form submission is handled by JavaScript that formats the data and opens WhatsApp.

### JavaScript Implementation

```javascript theme={null}
// Form handling: WhatsApp only
(function () {
  const form = document.getElementById('miniContactForm');
  if (!form) return;

  const toWhatsapp = '573229520608'; // Destination number without symbols, with country code

  form.addEventListener('submit', function (e) {
    e.preventDefault();

    const name = document.getElementById('contactName').value.trim();
    const email = document.getElementById('contactEmail').value.trim();
    const message = document.getElementById('contactMessage').value.trim();

    if (!name || !email || !message) {
      alert('Por favor completa nombre, email y mensaje.');
      return;
    }

    // Build base message
    const msg = `Hola Buen DIa, soy ${name}.\n mi correo es: ${email}\n y quiero conversar con tigo de:${message}`;

    // Send to WhatsApp
    const waUrl = `https://wa.me/${toWhatsapp}?text=${encodeURIComponent(msg)}`;
    window.open(waUrl, '_blank');

    // Reset form
    form.reset();
  });
})();
```

<Accordion title="WhatsApp Integration Details">
  **How it works:**

  1. **Prevent default** form submission behavior
  2. **Validate** all required fields are filled
  3. **Format message** with name, email, and message content
  4. **Encode message** using `encodeURIComponent()` for URL safety
  5. **Build WhatsApp URL** using `wa.me` API format
  6. **Open in new tab** using `window.open()`
  7. **Reset form** after successful submission

  **WhatsApp URL Format:**

  ```
  https://wa.me/{phone_number}?text={encoded_message}
  ```

  **Phone Number Format:**

  * No spaces, dashes, or parentheses
  * Include country code
  * Example: `573229520608` (Colombia +57)
</Accordion>

### Customizing WhatsApp Number

```javascript theme={null}
const toWhatsapp = '573229520608'; // Change this to your number
```

### Message Template

```javascript theme={null}
const msg = `Hola Buen DIa, soy ${name}.\n mi correo es: ${email}\n y quiero conversar con tigo de:${message}`;
```

## Contact Information Cards

Three cards display contact methods with icons.

### Cards HTML

```html theme={null}
<div class="py-4 my-4">
  <div class="row justify-content-around text-center">

    <div class="col-md-4 contact-list mb-3">
      <i class="ti ti-phone"></i>
      <p class="contact-paragraph mt-2">+57 322 952 0608</p>
    </div>

    <div class="col-md-4 contact-list mb-3">
      <i class="ti ti-mail"></i>
      <p class="contact-paragraph mt-2">zvzgmzq@gmail.com</p>
    </div>

    <div class="col-md-4 contact-list mb-3">
      <i class="ti ti-map-pin"></i>
      <p class="contact-paragraph mt-2">Bogotá, Colombia</p>
    </div>

  </div>
</div>
```

### Card Styling

```css theme={null}
.contact-list {
  padding: 2rem;
  background: rgba(255,255,255,0.05);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.09);
  transition: all 0.35s ease;
}

.contact-list:hover {
  transform: translateY(-8px);
  background: rgba(74, 144, 226, 0.09);
  border-color: var(--accent-color);
}

.contact-list i {
  font-size: 2.8rem;
  color: var(--accent-color);
  margin-bottom: 1.2rem;
}
```

### Hover Effects

* **Lift effect**: Card moves up 8px
* **Background change**: Opacity increases with blue tint
* **Border color**: Changes to accent blue
* **Transition duration**: 0.35s

## Social Media Links

Full-width button links to social platforms.

### Social Links HTML

```html theme={null}
<div class="py-4 my-4">
  <h2 class="fw-bold pb-4 text-center">Redes Sociales</h2>

  <div class="row justify-content-around text-center">
    <div class="col-md-3 mb-3">
      <i class="ti ti-brand-github"></i>
      <a href="https://github.com/GmzQzvZ" 
         target="_blank" 
         rel="noopener noreferrer"
         class="btn btn-outline-primary btn-lg w-100">GitHub</a>
    </div>

    <div class="col-md-3 mb-3">
      <i class="ti ti-brand-linkedin"></i>
      <a href="https://www.linkedin.com/in/juan-sebastian-gomez-qui%C3%B1ones-439a502b8/"
         target="_blank" 
         rel="noopener noreferrer"
         class="btn btn-outline-primary btn-lg w-100">LinkedIn</a>
    </div>

    <div class="col-md-3 mb-3">
      <i class="ti ti-brand-whatsapp"></i>
      <a href="https://wa.link/oqpuez" 
         target="_blank" 
         rel="noopener noreferrer"
         class="btn btn-outline-primary btn-lg w-100">WhatsApp</a>
    </div>

    <div class="col-md-3 mb-3">
      <i class="ti ti-mail"></i>
      <a href="mailto:zvzgmzq@gmail.com" 
         class="btn btn-outline-primary btn-lg w-100">Email</a>
    </div>
  </div>
</div>
```

### Social Button Layout

<ParamField path="col-md-3" type="class">
  Each button occupies 25% width on medium screens and above
</ParamField>

<ParamField path="btn-lg" type="class">
  Large button size for better touch targets
</ParamField>

<ParamField path="w-100" type="class">
  Button spans full width of its column
</ParamField>

## Form Validation

HTML5 validation is used with the `required` attribute.

```html theme={null}
<input type="text" required>
<input type="email" required>
<textarea required></textarea>
```

### JavaScript Validation

```javascript theme={null}
if (!name || !email || !message) {
  alert('Por favor completa nombre, email y mensaje.');
  return;
}
```

## Icons Used

### Contact Cards

* `ti-phone` - Phone number
* `ti-mail` - Email address
* `ti-map-pin` - Location

### Social Links

* `ti-brand-github` - GitHub profile
* `ti-brand-linkedin` - LinkedIn profile
* `ti-brand-whatsapp` - WhatsApp contact
* `ti-mail` - Email link

### Form Buttons

* `ti-send` - Submit button
* `ti-rotate` - Reset button

## Section Dividers

```html theme={null}
<hr class="mid-break my-2">
```

Horizontal rules separate the four subsections:

1. Title
2. Contact form
3. Contact information cards
4. Social media links

## Responsive Layout

### Desktop (≥ 768px)

* Form: 66% width, centered
* Contact cards: 3 columns side by side
* Social buttons: 4 columns side by side

### Mobile (\< 768px)

* Form: Full width
* Contact cards: Stack vertically
* Social buttons: Stack vertically

## Key Features

* **WhatsApp integration** - Form submits directly to WhatsApp
* **No backend required** - Pure client-side JavaScript
* **Form validation** - HTML5 and JavaScript validation
* **Reset functionality** - Clear form with dedicated button
* **Hover effects** - Interactive contact cards
* **Responsive grid** - Bootstrap-based layout
* **Icon integration** - Tabler Icons for visual elements
* **External links** - Proper security attributes (`noopener noreferrer`)
* **Multiple contact methods** - Form, direct links, and social media