Quick Start Guide

Get your portfolio live in just a few minutes. This guide will walk you through the essential steps to customize the template with your information.

Download the Template

Download or clone the portfolio template to your local machine:

# Clone via Git
git clone <repository-url>

# Or download as ZIP and extract

Open in Browser

Navigate to the template folder and open index.html in your web browser:

cd template/
open index.html  # macOS
start index.html # Windows
xdg-open index.html # Linux

You should see the template with demo content.

Customize Your Information

Open index.html in your favorite text editor and start personalizing!

Essential Customizations

1. Update Your Profile

Replace the profile information in the sidebar (appears twice - desktop sidebar and mobile offcanvas):

<div class="hero-sidebar">
    <header class="hero">
        <div class="hero-container text-center my-4 pt-3">

            <img src="images/sin.png" class="hero-img mb-4 rounded-circle" 
                 alt="Sebastián Gómez" width="160" height="160">
            <h2 class="fw-bold mt-3">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>
                <!-- More social links -->
            </div>
        </div>
    </header>
</div>

<div class="offcanvas-body">
    <header class="hero position-fixed">
        <div class="container hero-container text-center align-content-between">
            <div>
                <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">
                    <!-- Social links -->
                </div>
            </div>
        </div>
    </header>
</div>

What to update:

Replace images/sin.png with your profile photo path
Update the name in <h2> tags
Change the tagline in <p> tags
Update social media links with your profiles

2. Update Hero Section

Customize your main introduction (index.html:144-158):

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

Update the <h1> with your full name and the paragraphs with your professional title and bio.

3. Update Page Title and Meta Tags

Change the browser tab title and SEO information (index.html:5-27):

<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">
</head>

4. Add Your Profile Image

Replace the profile image:

Add your photo

Place your profile photo in the images/ folder (e.g., images/profile.jpg)

Update image paths

Search for images/sin.png in index.html and replace with your image path

Optimize the image

Recommended: Square image, at least 300x300px, under 200KB for fast loading

5. Update Contact Information

Update your contact details in the Personal Info section (index.html:180-186):

<ul class="list-unstyled">
    <li><b>Edad:</b> 25 </li>
    <li><b>Ubicación:</b> Bogotá, Colombia</li>
    <li><b>E-mail:</b> zvzgmzq@gmail.com</li>
    <li><b>Teléfono:</b> +57 322 952 0608</li>
</ul>

And in the contact section (index.html:444-460):

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

6. Configure WhatsApp Contact Form

The template includes a contact form that sends messages directly to WhatsApp. Update the phone number (index.html:559):

const toWhatsapp = '573229520608'; // Your WhatsApp number (country code + number, no + or spaces)

Make sure to include your country code without the + symbol. For example: 573229520608 for Colombia.

Quick Customization Checklist

Use this checklist to ensure you’ve updated all the essential information:

Profile image in sidebar and offcanvas
Your name in hero section
Professional title and bio
Page title and meta descriptions
Social media links (GitHub, LinkedIn, WhatsApp, Email)
Contact information (phone, email, location)
WhatsApp number in contact form script
About section bio
Favicon in images/favicon/ folder

Preview Your Changes

After making changes:

Save index.html
Refresh your browser (or use Cmd/Ctrl + Shift + R for hard refresh)
Test all links and the contact form
Check mobile responsiveness using browser DevTools

Use your browser’s DevTools (F12) to toggle device toolbar and preview how your portfolio looks on different screen sizes.

Next Steps

Once you’ve completed these basic customizations:

Add Your Projects

Replace demo projects with your actual work

Customize Colors

Change the color scheme to match your brand

Add Experience

Update work history and education

Deploy Online

Publish your portfolio to the web

For more detailed customization options, check out the Installation Guide for the complete file structure breakdown.

Getting Started

Customization

Components

Deployment

Quick Start

Quick Start Guide

Essential Customizations

1. Update Your Profile

2. Update Hero Section

3. Update Page Title and Meta Tags

4. Add Your Profile Image

5. Update Contact Information

6. Configure WhatsApp Contact Form

Quick Customization Checklist

Preview Your Changes

Next Steps

Add Your Projects

Customize Colors

Add Experience

Deploy Online

​Quick Start Guide

​Essential Customizations

​1. Update Your Profile

​2. Update Hero Section

​3. Update Page Title and Meta Tags

​4. Add Your Profile Image

​5. Update Contact Information

​6. Configure WhatsApp Contact Form

​Quick Customization Checklist

​Preview Your Changes

​Next Steps

Add Your Projects

Customize Colors

Add Experience

Deploy Online

Quick Start Guide

Essential Customizations

1. Update Your Profile

2. Update Hero Section

3. Update Page Title and Meta Tags

4. Add Your Profile Image

5. Update Contact Information

6. Configure WhatsApp Contact Form

Quick Customization Checklist

Preview Your Changes

Next Steps