Installation & Setup - NILVER T.I Portfolio

Overview

This guide provides detailed instructions for setting up the NILVER T.I Portfolio on your local machine, including prerequisites, multiple installation methods, configuration options, and troubleshooting tips.

This is a static HTML/CSS/JavaScript portfolio that requires no build process or package management. All dependencies are loaded via CDN.

Prerequisites

Required

Modern Web Browser

Any recent version of:

Google Chrome (recommended)
Mozilla Firefox
Safari
Microsoft Edge

Internet Explorer is not supported due to modern JavaScript features used in the portfolio.

Text Editor or IDE

Any code editor will work, but these are recommended:

Visual Studio Code (with Live Server extension)
Sublime Text
Atom
WebStorm
Any text editor

Internet Connection

Required for loading CDN resources:

Tailwind CSS (styling framework)
Font Awesome (icons)
Google Fonts (Poppins font family)

Without internet connection, the portfolio will display with limited styling and no icons.

Optional (Recommended)

Git

For version control and easy updatesDownload from git-scm.com

Local Server

For proper file loading and testingOptions: Python, Node.js, or PHP

Installation Methods

Method 1: Git Clone (Recommended)

If you have Git installed, this is the easiest method:

Terminal

git clone <repository-url>
cd "Practica 2"

This method allows you to:

Easily pull updates from the repository
Track your changes with version control
Contribute back to the project

Method 2: Download ZIP

For users without Git:

Download

Download the ZIP file from the repository

Extract

Extract the contents to your desired location

Navigate

Open the extracted folder in your file explorer

Method 3: Manual Setup

Create the project structure manually:

Create Directory Structure

Terminal

mkdir -p "Practica 2/css" "Practica 2/js" "Practica 2/img"
cd "Practica 2"

Create Files

Create these empty files:

index.html
css/estilos.css
js/main.js
js/fondo.js
README.md

Copy Content

Copy the code from the repository into each file

Add Images

Place your project images in the img/ directory

Running the Portfolio

Choose one of these methods to run the portfolio locally:

Option 1: VS Code Live Server (Easiest)

Best for development with auto-reload capability:

Install Live Server Extension

Open VS Code
Go to Extensions (Ctrl+Shift+X / Cmd+Shift+X)
Search for “Live Server” by Ritwick Dey
Click Install

Open Project

File → Open Folder → Select your portfolio directory

Start Server

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

View Portfolio

Browser opens automatically at http://127.0.0.1:5500

Changes auto-refresh when you save files!

Option 2: Python HTTP Server

Built into Python, no installation needed:

# Navigate to project directory
cd "Practica 2"

# Start server
python -m http.server 8000

# Or specify a different port
python -m http.server 3000

Then open your browser to http://localhost:8000

Press Ctrl+C in the terminal to stop the server

Option 3: Node.js HTTP Server

If you have Node.js installed:

Install serve (one-time)

Terminal

npm install -g serve

Navigate to Project

Terminal

cd "Practica 2"

Start Server

Terminal

serve
# Or specify port
serve -p 8000

Open Browser

Visit the URL shown in terminal (usually http://localhost:3000)

Option 4: PHP Built-in Server

If you have PHP installed:

Terminal

cd "Practica 2"
php -S localhost:8000

Open browser to http://localhost:8000

Option 5: Direct File Access

Simplest but with limitations:

Open File

Double-click index.html or drag it into your browser

Verify URL

Browser URL will start with file:///

Limitations of Direct File Access:

CORS restrictions may prevent loading local resources
Some JavaScript features may not work properly
Cannot test form submissions or AJAX requests
Relative paths may break

Use a local server for best results!

Project Structure Explained

Practica 2/
├── index.html          # Main HTML file with all sections
├── README.md           # Project documentation
├── css/
│   └── estilos.css    # Custom styles and animations
├── js/
│   ├── fondo.js       # Particle background animation
│   └── main.js        # Interactive features and navigation
└── img/
    ├── home.jpeg      # Hero section background
    ├── redes.jpg      # Social media manager project
    ├── flores.jpg     # Virtual flowers project
    ├── arbol.jpg      # Christmas tree project
    ├── corazon.jpg    # Heart animation project
    └── cicsa.jpg      # CICSA medical center project

File Descriptions

File	Purpose	Size
`index.html`	Main HTML structure with all content sections	~498 lines
`css/estilos.css`	Custom CSS including animations and color theme	~131 lines
`js/main.js`	Interactive features: navigation, SVG animation, canvas drawing, skills toggle	~178 lines
`js/fondo.js`	Canvas particle animation system	~44 lines

Configuration

Customizing Colors

The portfolio uses a red accent theme. To change the primary color:

Open estilos.css

Find the color definitions around line 10:

css/estilos.css

.red-accent {
    color: #E50914;
}

.bg-red-accent {
    background-color: #E50914;
}

.border-red-accent {
    border-color: #E50914;
}

Replace Color Values

Change #E50914 to your preferred color:

css/estilos.css

.red-accent {
    color: #your-color-here;
}

Update Additional Locations

Search for #E50914 in all files and replace:

css/estilos.css (multiple locations)
js/main.js (line 95, drawing color)
js/fondo.js (line 36, particle color)

Updating Personal Information

<!-- Line 29 in index.html -->
<h1 class="text-2xl font-bold red-accent">
    YOUR NAME <span class="text-white">T.I</span>
</h1>

Adding Your Skills

Skills appear in both circular and bar chart views. Update around line 122:

index.html

<div class="skill-item text-center p-6 rounded-lg hover:bg-gray-900 transition cursor-pointer">
    <div class="relative w-32 h-32 mx-auto mb-4">
        <svg width="120" height="120" viewBox="0 0 120 120" class="mx-auto">
            <circle cx="60" cy="60" r="50" fill="none" stroke="#333" stroke-width="8" />
            <circle class="skill-circle" cx="60" cy="60" r="50" 
                    style="--dash-offset: 94.2;" data-value="70" />
            <text x="60" y="65" text-anchor="middle" fill="#fff" font-size="20">70%</text>
        </svg>
    </div>
    <h3 class="text-xl font-semibold mb-2">YOUR SKILL</h3>
    <p class="text-gray-400">Description of your skill</p>
</div>

Calculating dash-offset for skill percentage: For a skill at X%, use formula: 314 - (314 × X / 100) Examples:

90% → 314 - (314 × 0.9) = 31.4
80% → 314 - (314 × 0.8) = 62.8
70% → 314 - (314 × 0.7) = 94.2
60% → 314 - (314 × 0.6) = 125.6
50% → 314 - (314 × 0.5) = 157

Adding Projects

Project cards are located around line 256. Here’s the template:

index.html

<div class="bg-gray-900 rounded-xl overflow-hidden shadow-md hover:shadow-red-700 transition relative">
    <div class="h-48 bg-slate-800 flex items-center justify-center">
        <img src="img/proyecto.jpg" alt="Project Name" class="h-full object-contain" />
    </div>
    <div class="p-6">
        <h3 class="text-xl font-semibold mb-2 text-white">Your Project Title</h3>
        <p class="text-gray-400 mb-4">
            Project description and key features
        </p>
        <button onclick="toggleDetails(this)"
            class="bg-red-accent hover:bg-red-600 text-white px-4 py-2 rounded-md text-sm transition">
            Ver más
        </button>
        <div class="details-container max-h-0 overflow-hidden transition-all duration-500 ease-in-out">
            <div class="mt-3 flex gap-2">
                <a href="https://your-live-demo.com" target="_blank"
                    class="block w-full bg-gray-800 text-white text-center py-2 rounded-md hover:bg-gray-700 transition">
                    🌐 Ver Web
                </a>
                <a href="https://github.com/username/repo" target="_blank"
                    class="block w-full bg-gray-800 text-white text-center py-2 rounded-md hover:bg-gray-700 transition">
                    💻 Ver Código
                </a>
            </div>
        </div>
    </div>
</div>

Update your social media profiles in the footer (line 470):

index.html

<a href="https://www.instagram.com/your-username/" 
   class="hover:text-pink-500 transition" target="_blank" title="Instagram">
    <i class="fab fa-instagram"></i>
</a>
<a href="https://github.com/your-username" 
   class="hover:text-white transition" target="_blank" title="GitHub">
    <i class="fab fa-github"></i>
</a>
<a href="https://www.linkedin.com/in/your-username/" 
   class="hover:text-blue-500 transition" target="_blank" title="LinkedIn">
    <i class="fab fa-linkedin"></i>
</a>

Troubleshooting

Common Issues

Styles not loading / Page looks broken

Problem: Tailwind CSS not loading from CDNSolutions:

Check your internet connection

Verify the CDN link in index.html line 16:

<script src="https://cdn.tailwindcss.com"></script>

Try opening in incognito/private mode
Clear browser cache
Check browser console (F12) for errors

Icons not appearing

Problem: Font Awesome icons not loadingSolutions:

Verify Font Awesome CDN link (line 20-21)
Check internet connection
Ensure you’re using valid icon class names
Look for blocked content in browser (mixed content warnings)

Particle animation not working

Problem: Canvas particles not animatingSolutions:

Ensure js/fondo.js is loaded properly (line 494)
Check browser console for JavaScript errors
Verify canvas element exists (line 63)
Try in a different browser
Make sure scripts have defer attribute

Interactive features not responding

Problem: Clicks, hovers, or animations not workingSolutions:

Verify js/main.js is loading (line 495)
Open browser console (F12) and check for errors
Ensure you’re using a local server, not file:// protocol
Check if JavaScript is enabled in browser
Try hard refresh (Ctrl+Shift+R / Cmd+Shift+R)

Images not displaying

Problem: Project images showing as broken linksSolutions:

Verify images exist in img/ directory
Check file names match exactly (case-sensitive)
Ensure proper file extensions (.jpg, .jpeg, .png)
Verify image paths in HTML are correct
Try using absolute paths if relative paths fail

Mobile menu not working

Smooth scroll not working

Problem: Navigation links jump instead of smoothly scrollingSolutions:

Ensure CSS scroll-behavior: smooth is applied (line 5 in estilos.css)
Check that js/main.js scroll function is working (line 26)
Verify section IDs match link hrefs
Try adding scroll-behavior: smooth to html element
Check if browser supports smooth scrolling

Browser Console Debugging

To check for errors:

Open Developer Tools

Windows/Linux: Press F12 or Ctrl+Shift+I
Mac: Press Cmd+Option+I

Check Console Tab

Look for red error messages that indicate:

Failed to load resources
JavaScript errors
CORS issues
Missing files

Network Tab

Check if all resources loaded successfully:

All items should have status 200 (green)
Red items indicate failed loads
Check for blocked resources

File Path Issues

If resources aren’t loading, verify these paths:

index.html

<!-- Line 19: Custom CSS -->
<link rel="stylesheet" href="css/estilos.css" />

<!-- Line 494-495: JavaScript files -->
<script src="js/fondo.js" defer></script>
<script src="js/main.js" defer></script>

<!-- Line 259: Project images -->
<img src="img/redes.jpg" alt="Redes Sociales" class="h-full object-contain" />

All paths are relative to index.html location.

Performance Optimization

Optimize Images

Compress Images

Use tools like:

TinyPNG
Squoosh
ImageOptim (Mac)
GIMP or Photoshop

Recommended Sizes

Project thumbnails: 800×600px, under 200KB
Hero background: 1920×1080px, under 500KB
Use modern formats: WebP or AVIF when possible

Lazy Loading

Add lazy loading for images:

<img src="img/project.jpg" alt="Project" loading="lazy" />

Reduce Particle Count

For better performance on slower devices, reduce particle count in js/fondo.js:

js/fondo.js

// Change from 100 to 50 for better performance
for (let i = 0; i < 50; i++) {
    particles.push({ /* ... */ });
}

Host Resources Locally

For offline usage or faster loading:

Download Libraries

Tailwind CSS: Download standalone build
Font Awesome: Download icon fonts
Google Fonts: Use google-webfonts-helper

Update Links

Change CDN links to local paths in index.html

Hosting locally increases initial setup complexity but improves offline capability and reduces dependency on external CDNs.

Deployment

Deploy to Netlify

Fastest deployment method:

Create Account

Drag & Drop

Simply drag your project folder onto Netlify’s deploy zone

Get URL

Netlify provides a free URL: https://random-name.netlify.app

Custom Domain (Optional)

Configure your own domain in site settings

Deploy to Vercel

Install Vercel CLI

npm install -g vercel

Deploy

cd "Practica 2"
vercel

Follow Prompts

Answer setup questions and get your live URL

Deploy to GitHub Pages

Create Repository

Create a new GitHub repository

Push Code

git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin <your-repo-url>
git push -u origin main

Enable GitHub Pages

Go to repository Settings
Navigate to Pages section
Select source: main branch
Save and wait for deployment

Access Site

Your site will be at: https://username.github.io/repo-name/

Next Steps

Customize Your Portfolio

Update content, colors, and projects with your personal information

Learn the Code

Explore the JavaScript files to understand interactive features

Add New Features

Extend functionality with additional sections or animations

Share Your Work

Deploy online and share your portfolio URL

Additional Resources

Tailwind CSS Documentation
Font Awesome Icons
MDN Web Docs - HTML/CSS/JavaScript reference
Canvas API Tutorial

For questions or issues, check the project README or open an issue in the GitHub repository.

Get Started

Components

Customization

Deployment

​Overview

​Prerequisites

​Required

​Optional (Recommended)

Git

Local Server

​Installation Methods

​Method 1: Git Clone (Recommended)

​Method 2: Download ZIP

​Method 3: Manual Setup

​Running the Portfolio

​Option 1: VS Code Live Server (Easiest)

​Option 2: Python HTTP Server

​Option 3: Node.js HTTP Server

​Option 4: PHP Built-in Server

​Option 5: Direct File Access

​Project Structure Explained

​File Descriptions

​Configuration

​Customizing Colors

​Updating Personal Information

​Adding Your Skills

​Adding Projects

​Social Media Links

​Troubleshooting

​Common Issues

​Browser Console Debugging

​File Path Issues

​Performance Optimization

​Optimize Images

​Reduce Particle Count

​Host Resources Locally

​Deployment

​Deploy to Netlify

​Deploy to Vercel

​Deploy to GitHub Pages

​Next Steps

Customize Your Portfolio

Learn the Code

Add New Features

Share Your Work

​Additional Resources

Build docs developers (and LLMs) love

Overview

Prerequisites

Required

Optional (Recommended)

Installation Methods

Method 1: Git Clone (Recommended)

Method 2: Download ZIP

Method 3: Manual Setup

Running the Portfolio

Option 1: VS Code Live Server (Easiest)

Option 2: Python HTTP Server

Option 3: Node.js HTTP Server

Option 4: PHP Built-in Server

Option 5: Direct File Access

Project Structure Explained

File Descriptions

Configuration

Customizing Colors

Updating Personal Information

Adding Your Skills

Adding Projects

Social Media Links

Troubleshooting

Common Issues

Browser Console Debugging

File Path Issues

Performance Optimization

Optimize Images

Reduce Particle Count

Host Resources Locally

Deployment

Deploy to Netlify

Deploy to Vercel

Deploy to GitHub Pages

Next Steps

Additional Resources