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
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>
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
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> [email protected]</li>
<li><b>Teléfono:</b> +57 322 952 0608</li>
</ul>
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">[email protected]</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>
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:
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