Customizing Content

Learn how to customize all text content in your portfolio template, including personal information, bio, work experience, and services.

This guide shows you how to customize all the text content in your portfolio template using real examples from the source code.

Updating Personal Information

Your personal information appears in multiple places throughout the template. Here’s where to update it:

Header Section

Locate the header section in index.html around lines 72-92:

index.html

<img src="images/sin.png" class="hero-img mb-4 rounded-circle" alt="Sebastián Gómez"
    width="140" height="140" loading="lazy">

<h2 class="fw-bold">Sebastián Gómez</h2>
<p>Desarrollador Web App | Apasionado por la tecnología</p>

<div class="social-icon my-4">
    <a href="https://github.com/GmzQzvZ" class="social-link" target="_blank" rel="noopener noreferrer" aria-label="GitHub">
    <i class="ti ti-brand-github"></i>
    </a>
    <a href="https://www.linkedin.com/in/juan-sebastian-gomez-qui%C3%B1ones-439a502b8/" class="social-link" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn">
        <i class="ti ti-brand-linkedin"></i>
    </a>
    <a href="https://wa.link/oqpuez" class="social-link" target="_blank" rel="noopener noreferrer" aria-label="WhatsApp">
        <i class="ti ti-brand-whatsapp"></i>
    </a>
    <a href="mailto:[e-mail]" class="social-link" aria-label="Email">
        <i class="ti ti-mail"></i>
    </a>
</div>

1. Update Profile Image

   Replace images/sin.png with your own profile photo path. The image should be square (recommended: 300x300px minimum).

2. Change Your Name

   Update the <h2> tag with your full name.

3. Update Your Title

   Modify the <p> tag below your name with your professional title or tagline.

4. Update Social Links

   Replace the URLs in each href attribute with your own social media profiles.

Home Section

The main introduction appears around lines 144-156:

index.html

<section id="home" class="mt-0">
    <div class=" py-lg-4 my-lg-4 text-center">
        <h1 class="fw-bold">Juan Sebastián Gómez Quiñones</h1>
        <div class="col-lg-10 mx-auto">
            <p class="lead-paragraph mb-4">Desarrollador de Software Junior | Estudiante de Ingeniería de Software</p>
        </div>
        <p class="lead-paragraph mb-4">Desarrollador Web App apasionado por la tecnología, automatización e innovación digital. Creo soluciones prácticas con Node.js, JavaScript y WhatsApp Business API.</p>
        <div class=" gap-2 d-sm-flex justify-content-sm-center">
            <a href="#contact" class="btn btn-primary btn-lg mt-3">Contactarme</a>
        </div>
    </div>
</section>

The lead-paragraph class creates larger, more prominent text. Use it for your main introduction and key messages.

Personal Info Section

Update your detailed contact information around lines 177-186:

index.html

<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>

Modifying the About Section

The About section is located around lines 160-173. This is where you tell your professional story:

index.html

<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. Actualmente curso Ingeniería de Software en la Corporación Universitaria Iberoamericana, fortaleciendo mis conocimientos técnicos y mi visión estratégica en el ciclo completo de desarrollo de software.
            <br><br>
            Domino lenguajes como PHP, C, C++, C#, HTML, CSS, JavaScript básico y Node.js, con experiencia en bases de datos MySQL y estructuras de almacenamiento en JSON. Me destaco por mi capacidad de aprendizaje autónomo, liderazgo, comunicación asertiva y trabajo en equipo, cualidades que me han permitido asumir el rol de líder de área por casi un año, gestionando proyectos y equipos con éxito.
            <br><br>
            He participado en proyectos que integran metodologías ágiles, documentación técnica y buenas prácticas de desarrollo, orientados a resultados medibles y de calidad. Además, cuento con experiencia en la integración de APIs externas como WhatsApp Business API y Google Calendar, aplicando soluciones enfocadas en la eficiencia, escalabilidad y seguridad.
            <br><br>
            Mi objetivo es seguir creciendo como profesional, aportando innovación tecnológica y valor agregado en cada proyecto que desarrollo.
        </p>
    </div>
</section>

Keep your bio focused and professional. Aim for 3-4 paragraphs that highlight your experience, skills, and career goals.

Adding Work Experience

Work experience entries are structured as timeline items around lines 277-305:

index.html

<section id="experiencia-laboral" class="resume-section">
    <div class="container">
        <div class="section-title">
            <div class="py-4 my-4 "></div>
            <h2 class="fw-bold pb-4">Experiencia Laboral</h2>
        </div>
    
        <hr class="mid-break my-2">
        <div class="timeline">
            <div class="timeline-item" data-aos="fade-up">
                <div class="timeline-content">
                    <div class="data-info">
                        <p class="meta-date">Ene 2022 - Oct 2025 <span class="divider">•</span> <span class="company">Vita Support SAS</span></p>
                        <h3 class="info-title">Técnico de Software Junior</h3>
                        <p>Liderazgo de área por casi 11 meses, gestionando proyectos y coordinando equipo. Desarrollo de sistemas a medida garantizando seguridad, escalabilidad y cumplimiento de plazos. Documentación técnica y soporte continuo.</p>
                    </div>
                </div>
            </div>
            <div class="timeline-item" data-aos="fade-up">
                <div class="timeline-content">
                    <div class="data-info">
                        <p class="meta-date">Ene 2022 - Jul 2022 <span class="divider">•</span> <span class="company">Aprendiz SENA – FUNDEM PSP</span></p>
                        <h3 class="info-title">Desarrollador de Software</h3>
                        <p>Pruebas de calidad y validación de desarrollos. Desarrollo de una plataforma educativa desde cero. Elaboración de reportes técnicos para clientes.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

1. Duplicate Timeline Item

   Copy the entire <div class="timeline-item" data-aos="fade-up"> block to add a new experience entry.

2. Update Date and Company

   Modify the meta-date paragraph with your employment dates and company name.

3. Add Job Title

   Update the info-title heading with your position.

4. Describe Your Role

   Write 2-3 sentences describing your key responsibilities and achievements.

Education Entries

Education follows the same timeline structure around lines 308-344:

index.html

<section id="education" class="resume-section">
<div class="container">
    <div class="section-title">
        <div class="py-4 my-4 "></div>
        <h2 class="fw-bold pb-4">Educación</h2>
    </div>

    <hr class="mid-break my-2">
    <div class="timeline">
        <div class="timeline-item" data-aos="fade-up">
            <div class="timeline-content">
                <div class="data-info">
                    <p class="meta-date">En curso <span class="divider">•</span> <span class="company">Corporación Universitaria Iberoamericana</span></p>
                    <h3 class="info-title">Ingeniería de Software</h3>
                    <p>Formación universitaria en ingeniería de software con enfoque en arquitectura de sistemas, desarrollo de aplicaciones y gestión de proyectos tecnológicos.</p>
                </div>
            </div>
        </div>
    </div>
</section>

Use the same duplication process as work experience to add multiple degrees or certifications.

Customizing Services Offered

The services section is a grid layout around lines 192-254:

index.html

<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>
</div>

Available Tabler Icons

The template uses Tabler Icons. Common service icons include:

• ti ti-device-imac-code - Web Development
• ti ti-settings-automation - Automation
• ti ti-sitemap - Systems Development
• ti ti-user-search - Consulting
• ti ti-database - Database Management
• ti ti-api - API Development
• ti ti-brand-github - GitHub
• ti ti-palette - Design

Browse all available icons at Tabler Icons and use the class format ti ti-icon-name.

Technical Skills Section

Update your skills around lines 262-274:

index.html

<div class="py-4 my-4 ">
    <h2 class="fw-bold pb-4">Habilidades Técnicas</h2>

    <div class="skills-list">
        <h4><i class="ti ti-brand-nodejs"></i> Node.js</h4>
        <h4><i class="ti ti-brand-javascript"></i> JavaScript</h4>
        <h4><i class="ti ti-brand-php"></i> PHP</h4>
        <h4><i class="ti ti-brand-mysql"></i> MySQL</h4>
        <h4><i class="ti ti-brand-html5"></i> HTML & CSS</h4>
        <h4><i class="ti ti-brand-c-sharp"></i> C#</h4>
        <h4><i class="ti ti-brand-git"></i> Git</h4>
    </div>
</div>

Each skill is a simple <h4> tag with an icon. Add or remove skills as needed by duplicating the lines.

SEO and Meta Tags

Don’t forget to update your SEO information in the <head> section around lines 5-27:

index.html

<head>
    <title>Sebastián Gómez - Desarrollador Web App</title>

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- SEO -->
    <meta name="description" content="Portafolio de Juan Sebastián Gómez Quiñones. Desarrollador Web App. Proyectos con Node.js, JavaScript, PHP, MySQL y automatización con APIs.">
    <meta name="author" content="Sebastián Gómez">

    <!-- Open Graph -->
    <meta property="og:title" content="Sebastián Gómez - Desarrollador Web App">
    <meta property="og:description" content="Portafolio, experiencia y proyectos. Desarrollo web, automatización y soluciones a medida.">
    <meta property="og:type" content="website">
    <meta property="og:url" content="">
    <meta property="og:image" content="images/sin.png">

    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Sebastián Gómez - Desarrollador Web App">
    <meta name="twitter:description" content="Portafolio, experiencia y proyectos. Desarrollo web, automatización y soluciones a medida.">
    <meta name="twitter:image" content="images/sin.png">
</head>

Always update the og:url meta tag with your actual website URL for proper social media sharing.