About Section Component

Personal info display, services grid layout, and content organization

About Section Component

The about section contains the main bio, personal information, and a services grid showcasing available offerings.

Section Structure

<section id="about" class="mt-0">
    <div class="py-4 my-4">
        <h1 class="fw-bold mt-5">Sobre Mí</h1>
        <p class="lead-paragraph my-4">
            Soy un desarrollador de software con experiencia en el diseño y desarrollo 
            de sistemas de gestión, automatización de procesos y aplicaciones personalizadas.
            <!-- Full bio text -->
        </p>
    </div>
    
    <hr class="mid-break my-2"> <!--linea divisoria -->

    <div class="py-4 my-4">
        <h2 class="fw-bold">Personal Info</h2>
        <ul class="list-unstyled">
            <li><b>Edad:</b> 25 </li>
            <li><b>Ubicación:</b> Bogotá, Colombia</li>
            <li><b>E-mail:</b> [e-mail]</li>
            <li><b>Teléfono:</b> [phone]</li>
        </ul>
    </div>
    
    <hr class="mid-break my-2"> <!--linea divisoria -->

    <div class="py-4 my-4">
        <h2 class="fw-bold pt-4 pb-5">Servicios</h2>
        <!-- Services grid -->
    </div>
</section>

Personal Information Display

The personal info uses an unstyled list with bold labels.

<div class="py-4 my-4">
    <h2 class="fw-bold">Personal Info</h2>

    <ul class="list-unstyled">
        <li><b>Edad:</b> 25 </li>
        <li><b>Ubicación:</b> Bogotá, Colombia</li>
        <li><b>E-mail:</b> [e-mail]</li>
        <li><b>Teléfono:</b> [phone]</li>
    </ul>
</div>

Services Grid Layout

The services section uses Bootstrap’s responsive grid system with a 2-column layout on small screens and above.

Grid Structure

<div class="py-4 my-4">
    <h2 class="fw-bold pt-4 pb-5">Servicios</h2>

    <div class="row row-cols-1 row-cols-sm-2">

        <div class="col d-flex align-items-start pb-5">
            <div>
                <i class="ti ti-device-imac-code"></i>
                <h4 class="fw-bold mb-0">Desarrollo Web</h4>
                <p class="mb-1">
                    Desarrollo de aplicaciones web modernas, escalables y eficientes 
                    utilizando JavaScript, Node.js, HTML y CSS.
                </p>
                <a href="https://github.com/GmzQzvZ" 
                   class="btn btn-outline-primary btn-sm mt-1" 
                   target="_blank" rel="noopener noreferrer">
                    Ver proyectos en GitHub
                </a>
            </div>
        </div>

        <div class="col d-flex align-items-start pb-5">
            <div>
                <i class="ti ti-settings-automation"></i>
                <h4 class="fw-bold mb-0">Automatización de Procesos</h4>
                <p class="mb-1">
                    Optimización de tareas repetitivas mediante scripts y soluciones digitales
                    que mejoran la eficiencia y reducen errores operativos.
                </p>
                <a href="https://github.com/GmzQzvZ" 
                   class="btn btn-outline-primary btn-sm mt-1" 
                   target="_blank" rel="noopener noreferrer">
                    Ver soluciones
                </a>
            </div>
        </div>

        <div class="col d-flex align-items-start pb-5">
            <div>
                <i class="ti ti-sitemap"></i>
                <h4 class="fw-bold mb-0">Desarrollo de Sistemas</h4>
                <p class="mb-1">
                    Creación de sistemas completos a la medida para gestión, control y 
                    optimización de procesos empresariales.
                </p>
                <a href="https://github.com/GmzQzvZ/facturas_js" 
                   class="btn btn-outline-primary btn-sm mt-1" 
                   target="_blank" rel="noopener noreferrer">
                    Ver sistema
                </a>
            </div>
        </div>

        <div class="col d-flex align-items-start pb-5">
            <div>
                <i class="ti ti-user-search"></i>
                <h4 class="fw-bold mb-0">Consultoría Técnica</h4>
                <p class="mb-1">
                    Asesoría técnica en automatización, mejora digital y soluciones 
                    prácticas enfocadas en resultados reales.
                </p>
                <a href="https://wa.me/573229520608" 
                   class="btn btn-outline-primary btn-sm mt-1" 
                   target="_blank" rel="noopener noreferrer">
                    Contactar por WhatsApp
                </a>
            </div>
        </div>
    </div>
</div>

Service Card Components

Service Card Structure

Each service card contains:

• Icon (Tabler Icons)
• Title (h4 heading)
• Description (paragraph)
• Call-to-action button (external link)

<div class="col d-flex align-items-start pb-5">
    <div>
        <i class="ti ti-[icon-name]"></i>
        <h4 class="fw-bold mb-0">Service Title</h4>
        <p class="mb-1">Service description text.</p>
        <a href="#" class="btn btn-outline-primary btn-sm mt-1" 
           target="_blank" rel="noopener noreferrer">
            Button Text
        </a>
    </div>
</div>

Section Dividers

Horizontal rules are used to separate subsections.

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

Typography Styling

The section uses custom typography defined in the CSS.

section h1,
section h2 {
  margin-bottom: 0.6rem;
  position: relative;
  padding-bottom: 0.3rem;
}

section h1::after,
section h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 70px;
  height: 3px;
  background: var(--accent-color);
  border-radius: 2px;
}

h1, .h1 { font-size: 4.4rem; font-weight: 800; margin: 0.3em 0; }
h2, .h2 { font-size: 2.6rem; font-weight: 700; margin: 0.7em 0 0.5em; }

p {
  color: var(--light-text-color);
  font-size: 1.05rem;
  line-height: 1.75;
}

.lead-paragraph {
  font-size: 1.3rem;
  line-height: 1.8;
  color: #d1d9e0;
}

Grid Configuration

row-cols-1 · class

Single column on extra small screens (< 576px)

row-cols-sm-2 · class

Two columns on small screens and above (≥ 576px)

d-flex align-items-start · class

Flexbox layout with items aligned to the start

pb-5 · class

Padding bottom of 3rem for spacing between cards

Tabler Icons

Icons are implemented using Tabler Icons library.

<!-- CDN Link in head -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@2.47.0/tabler-icons.min.css">

<!-- Icon usage -->
<i class="ti ti-device-imac-code"></i>
<i class="ti ti-settings-automation"></i>
<i class="ti ti-sitemap"></i>
<i class="ti ti-user-search"></i>

Responsive Behavior

• Desktop/Tablet: 2-column grid layout
• Mobile: Single column stack
• Typography: Font sizes reduce on smaller screens

@media (max-width: 991px) {
  h1, .h1 { font-size: 3.6rem; }
  h2, .h2 { font-size: 2.3rem; }
}

@media (max-width: 576px) {
  h1, .h1 { font-size: 3rem; }
  .lead-paragraph { font-size: 1.15rem; }
}

Key Features

• Three subsections separated by horizontal dividers
• Responsive grid using Bootstrap utilities
• Icon integration with Tabler Icons
• Underline accent on section headings (blue bar)
• Call-to-action buttons for each service
• External links with proper target and rel attributes