Skip to main content

​
Architecture Overview

The NILVER T.I Portfolio is a single-page application built with vanilla JavaScript, HTML5, and CSS3. The architecture follows a modular component structure with clear separation of concerns.

​
File Structure

portfolio/
├── index.html          # Main HTML structure
├── css/
│   └── estilos.css     # Component styles and animations
├── js/
│   ├── main.js         # Interactive components and UI logic
│   └── fondo.js        # Background particle animation
└── img/                # Project images and assets

​
Core Components

The portfolio consists of six main sections, each with distinct functionality:

Navigation

Fixed header with smooth scroll and mobile menu

Hero Section

Animated character, particle background, and drawing canvas

Skills

Circular and bar chart skill visualizations

Projects

Expandable project cards with live demos

Contact

Form with validation and success animation

Footer

Social media links and copyright

​
Component Interaction Flow

​
Technology Stack

  • Semantic markup with <header>, <section>, <footer>
  • Canvas API for particle effects and drawing
  • SVG graphics for animated character
  • Accessible form elements with proper labels
  • Tailwind CSS via CDN for utility classes
  • Custom animations with @keyframes
  • CSS variables for dynamic styling
  • Responsive grid layouts
  • Transition effects for smooth interactions
  • Event-driven architecture
  • DOM manipulation with modern selectors
  • Canvas rendering for particles and drawing
  • Smooth scroll implementation
  • Dynamic view toggling
  • Form validation
  • Tailwind CSS: Utility-first styling framework
  • Font Awesome: Icon library for social media and UI icons
  • Google Fonts: Poppins font family

​
Component Communication

Components communicate through several mechanisms: The navigation component triggers smooth scrolling to other sections: 
const navLinks = document.querySelectorAll('a[href^="#"]');
navLinks.forEach(link => {
  link.addEventListener('click', e => {
    e.preventDefault();
    const targetId = link.getAttribute('href');
    const section = document.querySelector(targetId);
    if (section) {
      window.scrollTo({ top: section.offsetTop - 80, behavior: 'smooth' });
    }
  });
});

​
2. Event Listeners

All interactive components are initialized in DOMContentLoaded: 
document.addEventListener('DOMContentLoaded', () => {
  // Initialize all components
  // - Mobile menu
  // - Smooth scroll
  // - SVG animation
  // - Canvas drawing
  // - Skills toggle
  // - Project details
});

​
3. CSS Classes

Shared classes create consistent styling across components: 
.red-accent { color: #E50914; }
.bg-red-accent { background-color: #E50914; }
.border-red-accent { border-color: #E50914; }

​
Responsive Design Strategy

The portfolio uses a mobile-first approach with Tailwind’s responsive utilities:
BreakpointPrefixMin WidthExample Usage
Mobile(none)0pxflex flex-col
Tabletmd:768pxmd:flex-row
Desktoplg:1024pxlg:grid-cols-3
Each component is designed to work independently, making it easy to add, remove, or reorder sections without breaking functionality.

​
Customization Points

Key areas for customization:
  1. Color Scheme: Modify the red accent color (#E50914) in CSS
  2. Font: Change the Google Fonts import to use different typography
  3. Sections: Add or remove sections by copying the HTML structure
  4. Animations: Adjust timing in CSS @keyframes and JavaScript intervals
  5. Content: Update text, images, and links directly in index.html

​
Performance Considerations

The particle animation in fondo.js uses requestAnimationFrame for smooth 60fps rendering. Increasing particle count may impact performance on lower-end devices.
  • Lazy Loading: Consider implementing lazy loading for project images
  • Canvas Optimization: Particle count is set to 100; adjust based on target devices
  • Script Loading: Scripts are deferred to prevent blocking page load
  • CSS: Tailwind is loaded via CDN; consider purging for production

​
Next Steps

Explore individual component documentation:

Build docs developers (and LLMs) love

Get started for freeTalk to us