Installation

This guide covers everything you need to know about setting up and understanding the portfolio template structure.

Prerequisites

The beauty of this template is its simplicity - you only need:

Web Browser

Any modern browser (Chrome, Firefox, Safari, Edge)

Text Editor

VS Code, Sublime Text, Atom, or any code editor

No Node.js, build tools, or package managers required! This is a pure HTML/CSS/JavaScript template.

Getting the Template

Choose one of the following methods to get started:

Download ZIP
Git Clone
Fork on GitHub

Download

Download the template as a ZIP file from the repository

Extract

Extract the ZIP file to your desired location:

unzip portfolio-template.zip
cd portfolio-template/

Open

Navigate to the extracted folder and open index.html

Clone Repository

git clone <repository-url>
cd portfolio-template/

Open in Editor

code .  # If using VS Code

Preview

Open index.html in your browser

Fork Repository

Click the “Fork” button on GitHub to create your own copy

Clone Your Fork

git clone https://github.com/YOUR-USERNAME/portfolio-template.git
cd portfolio-template/

Start Customizing

Make changes and push to your fork for easy GitHub Pages deployment

File Structure

Here’s how the template is organized:

template/
├── index.html          # Main portfolio page
├── 404.html           # Custom 404 error page
├── css/
│   ├── style.css      # Custom styles and theme variables
│   └── vendor.css     # Third-party CSS (if any)
├── js/
│   └── script.js      # Custom JavaScript functionality
├── images/
│   ├── favicon/       # Favicon files (16px, 32px, 96px)
│   ├── sin.png        # Demo profile image
│   ├── crm.jpg        # Portfolio project screenshot
│   ├── viajes.png     # Portfolio project screenshot
│   ├── task.png       # Portfolio project screenshot
│   └── whatsappbot.jpg # Portfolio project screenshot
└── README.md          # Project documentation

Core Files Explained

index.html - Main Portfolio Page

The main HTML file containing all sections:

Lines 1-51: HTML head with meta tags, SEO, and external libraries
Lines 53-98: Mobile offcanvas navigation
Lines 103-139: Vertical navigation bar (desktop)
Lines 144-158: Hero/Home section
Lines 160-256: About section with services
Lines 258-345: Resume section (skills, experience, education)
Lines 347-401: Portfolio grid
Lines 404-498: Contact section with form
Lines 501-527: Fixed sidebar (desktop)
Lines 529-584: Scripts and initialization

Total: 588 lines of well-structured HTML

css/style.css - Custom Styling

The main stylesheet with all custom styles:CSS Variables (lines 1-9):

:root {
  --accent-color: #4A90E2;
  --secondary-color: #1A1F2E;
  --dark-color: #0D1117;
  --grey-color: #2C3E50;
  --body-text-color: #E1E8ED;
  --light-text-color: #B8C5D6;
  --link-color: #4A90E2;
}

Key Sections:

Typography and spacing (lines 27-89)
Navigation styles (lines 104-150)
Hero sidebar (lines 154-231)
Skills grid (lines 261-292)
Portfolio grid (lines 296-409)
Contact cards (lines 414-433)
Responsive breakpoints (lines 437-496)

js/script.js - JavaScript Features

Custom JavaScript functionality including:Chocolat Lightbox (lines 6-12):

var initChocolat = function () {
  Chocolat(document.querySelectorAll('.image-link'), {
    imageSize: 'contain',
    loop: true,
  })
}

AOS Initialization (lines 62-66):

AOS.init({
  duration: 600,
  once: true,
})

Isotope Grid (lines 71-106): For portfolio filtering (if needed)

404.html - Error Page

A custom 404 error page (2,313 bytes) for when users navigate to non-existent pages. Useful when deploying to hosting services.

External Dependencies

The template uses CDN-hosted libraries (no local installation needed):

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
      rel="stylesheet" 
      integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" 
      crossorigin="anonymous">

All libraries are loaded from CDNs, which means:

No npm install required
Faster initial page loads (browser caching)
Automatic updates to patch versions
Works offline if previously cached

Opening and Previewing

Method 1: Direct Browser Open

Simply double-click index.html or open it via your browser’s File menu:

open index.html

Method 2: VS Code Live Server

For a better development experience with auto-reload:

Install Live Server

Install the “Live Server” extension in VS Code

Open Folder

Open the template folder in VS Code:

code .

Start Server

Right-click index.html and select “Open with Live Server”Or click “Go Live” in the status bar

Preview

Your browser will open at http://127.0.0.1:5500/index.htmlChanges auto-reload when you save files!

Method 3: Python Simple Server

If you have Python installed:

cd template/
python3 -m http.server 8000

# Visit http://localhost:8000

Method 4: Node.js http-server

If you have Node.js installed:

npx http-server -p 8000

# Visit http://localhost:8000

The template uses Bootstrap’s ScrollSpy for automatic navigation highlighting:

<body data-bs-spy="scroll" data-bs-target="#navigation-bar" tabindex="0">

The navigation links use hash anchors that correspond to section IDs:

Nav Link	Section ID	Content
`#home`	`<section id="home">`	Hero introduction
`#about`	`<section id="about">`	About and services
`#resume`	`<section id="resume">`	Skills and experience
`#portfolio`	`<section id="portfolio">`	Project showcase
`#contact`	`<section id="contact">`	Contact form

The navigation automatically highlights as you scroll. The active class is managed by Bootstrap’s ScrollSpy.

Responsive Design Breakpoints

The template adapts to different screen sizes:

/* Desktop: Sidebar visible, navigation icons on left */
@media (min-width: 1200px) {
  .hero-sidebar { display: flex; }
  .navigation { display: flex; }
  .offcanvas-btn { display: none; }
}

/* Tablet/Mobile: Sidebar becomes offcanvas */
@media (max-width: 1199px) {
  .hero-sidebar { transform: translateX(100%); }
  .navigation { display: none; }
  .offcanvas-btn { display: block; }
}

/* Mobile optimizations */
@media (max-width: 576px) {
  h1 { font-size: 3rem; }
  .skills-list { grid-template-columns: 1fr; }
}

Image Assets

The images/ folder structure:

Profile Images

sin.png: Demo profile photo (replace with your own)
Recommended: 300x300px minimum, square ratio, under 200KB

Portfolio Screenshots

crm.jpg: CRM with invoicing project
viajes.png: Travel agency website
task.png: Ticket administrator app
whatsappbot.jpg: WhatsApp bot project

Replace these with your project screenshots (recommended: 600x400px)

Favicon Files

Located in images/favicon/:

icons8-dev-windows-10-16.png (16x16)
icons8-dev-windows-10-32.png (32x32)
icons8-dev-windows-10-96.png (96x96)

Replace with your own brand icon

Testing Your Installation

Verify everything works correctly:

Visual Check

Profile image loads correctly
All sections are visible
Navigation highlights on scroll
Portfolio grid displays projects

Responsive Test

Open DevTools (F12) and toggle device toolbar:

Desktop: Sidebar visible on right
Tablet: Hamburger menu appears
Mobile: Offcanvas menu works

Functionality Test

Click navigation icons (smooth scroll)
Test contact form (opens WhatsApp)
Click portfolio items (opens links)
Hover effects work on cards

Console Check

Open browser console (F12 → Console):

No errors should appear
AOS should initialize
Bootstrap tooltips should activate

If images don’t load, check:

File paths are relative (images/profile.jpg not /images/profile.jpg)
Image files exist in the images/ folder
File extensions match exactly (case-sensitive on some systems)

Next Steps

Now that you have the template installed:

Quick Start

Follow the quick customization guide

Customization

Deep dive into styling and content

Add Content

Update your bio, projects, and resume

Deploy

Publish your portfolio online

Troubleshooting

Styles not loading

Problem: Page appears unstyled or brokenSolutions:

Check internet connection (CDN libraries need to load)
Open browser console and check for 404 errors
Verify css/style.css path is correct
Clear browser cache (Cmd/Ctrl + Shift + R)

Icons not showing

Problem: Icon placeholders or squares instead of iconsSolutions:

Check Tabler Icons CDN link in <head>
Verify icon class names (e.g., ti ti-brand-github)
Check browser console for font loading errors

Images broken

Problem: Images show broken icon or don’t loadSolutions:

Verify image files exist in images/ folder
Check file paths (relative, not absolute)
Ensure file extensions match (jpg vs jpeg, png vs PNG)
Check file permissions (should be readable)

Animations not working

Problem: No scroll animations or transitionsSolutions:

Check AOS library loaded from CDN
Verify AOS.init() in scripts section
Ensure elements have data-aos attributes
Check browser console for JavaScript errors

Still having issues? Check the browser console (F12 → Console) for error messages - they usually point directly to the problem!

Getting Started

Customization

Components

Deployment

Installation

Installation

Prerequisites

Web Browser

Text Editor

Getting the Template

File Structure

Core Files Explained

External Dependencies

Opening and Previewing

Method 1: Direct Browser Open

Method 2: VS Code Live Server

Method 3: Python Simple Server

Method 4: Node.js http-server

Understanding the Navigation System

Responsive Design Breakpoints

Image Assets

Testing Your Installation

Next Steps

Quick Start

Customization

Add Content

Deploy

Troubleshooting

Build docs developers (and LLMs) love

Getting Started

Customization

Components

Deployment

​Installation

​Prerequisites

Web Browser

Text Editor

​Getting the Template

​File Structure

​Core Files Explained

​External Dependencies

​Opening and Previewing

​Method 1: Direct Browser Open

​Method 2: VS Code Live Server

​Method 3: Python Simple Server

​Method 4: Node.js http-server

​Understanding the Navigation System

​Responsive Design Breakpoints

​Image Assets

​Testing Your Installation

​Next Steps

Quick Start

Customization

Add Content

Deploy

​Troubleshooting

Build docs developers (and LLMs) love

Installation

Prerequisites

Getting the Template

File Structure

Core Files Explained

External Dependencies

Opening and Previewing

Method 1: Direct Browser Open

Method 2: VS Code Live Server

Method 3: Python Simple Server

Method 4: Node.js http-server

Understanding the Navigation System

Responsive Design Breakpoints

Image Assets

Testing Your Installation

Next Steps

Troubleshooting