Skip to main content
Get your portfolio running locally in just a few minutes. This guide will walk you through cloning the repository and opening it in your browser.

​
Prerequisites

All you need is a web browser and optionally a local development server for a better experience.
No installation or build process required! This is a pure static website that runs directly in the browser.

​
Quick Setup

1

Clone the Repository

Open your terminal and clone the repository:
git clone https://github.com/NilverTI/PortafolioNilver.git
cd PortafolioNilver
Or download the ZIP file from GitHub and extract it to your preferred location.
2

Open in Browser

You have several options to view the portfolio:
Simply double-click index.html to open it in your default browser.
Some features like loading external resources might not work properly when opened directly. Use a local server for the best experience.
3

Explore the Portfolio

Navigate through all sections to see the features:
  • Home - Animated SVG character and particle effects
  • Skills - Toggle between circular and bar chart views
  • Projects - Expand project cards to see details
  • Contact - Try the contact form validation
Hover over the animated character in the hero section and try drawing on the canvas!
4

Make Your First Edit

Let’s customize the hero section with your name:
  1. Open index.html in your text editor
  2. Find line 68 (the hero title):
index.html
<h2 class="text-4xl md:text-6xl font-bold mb-6">
    Hola, soy <span class="text-red-accent">NILVER T.I</span>
</h2>
  1. Replace NILVER T.I with your name:
index.html
<h2 class="text-4xl md:text-6xl font-bold mb-6">
    Hola, soy <span class="text-red-accent">Your Name</span>
</h2>
  1. Save the file and refresh your browser to see the change!

​
Project Structure

Here’s a quick overview of what’s in the project: 
PortafolioNilver/
├── index.html          # Main HTML file (all content here)
├── css/
│   └── estilos.css    # Custom styles and animations
├── js/
│   ├── main.js        # Main JavaScript (navigation, skills, forms)
│   └── fondo.js       # Particle background animation
├── img/               # Project screenshots and images
└── README.md          # Project documentation

​
Key Features to Try

Particle Background

Animated particles that bounce around the hero section

Interactive SVG

The face follows your mouse movements

Drawing Canvas

Draw your greeting on the interactive canvas

Skills Toggle

Switch between circular and bar chart views

​
Common Customizations

Here are the most common things you’ll want to customize:
What to ChangeFileLine(s)
Your nameindex.html29, 68
Profile descriptionindex.html71-72
Skills and percentagesindex.html122-190
Projectsindex.html256-404
Social media linksindex.html470-489
Primary colorcss/estilos.css11
For detailed customization instructions, see the Customization Guide.

​
Testing Your Changes

After making edits, verify everything works:
  • Particle background animates
  • SVG face responds to mouse
  • Canvas drawing works
  • Skill circles animate on load
  • Project cards expand/collapse
  • Contact form shows validation errors
  • Success message displays after submission
  • All form fields are accessible
  • Desktop view (1920px+)
  • Tablet view (768px - 1024px)
  • Mobile view (320px - 767px)
  • All content readable and accessible

​
Next Steps

Detailed Setup

Learn about configuration options and troubleshooting

Customize Content

Update your information, projects, and skills

Modify Styles

Change colors, fonts, and visual design

Deploy Online

Publish your portfolio to the web

​
Need Help?

Make sure you’re using a local server instead of opening the file directly. Some browsers restrict features when files are opened using the file:// protocol.
Check your browser console (F12) for JavaScript errors. Ensure all files are in the correct locations relative to index.html.
Verify that:
  • css/estilos.css is in the correct location
  • The Tailwind CSS CDN link is working (internet connection required)
  • No browser extensions are blocking CSS
For more comprehensive troubleshooting, see the Installation & Setup guide.

Build docs developers (and LLMs) love

Get started for freeTalk to us