Styling Customization

This guide covers all visual customization options in the portfolio, including color schemes, typography, Tailwind utilities, and custom CSS.

Color Scheme

The portfolio uses a distinctive red accent color (#E50914) against a dark background. All color values are defined in css/estilos.css:10-20.

Primary Colors

The main color palette consists of:

css/estilos.css

body {
    background-color: #0f0f0f;
    color: #fff;
}

.red-accent {
    color: #E50914;
}

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

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

Step 1: Change the Accent Color

Open css/estilos.css and modify the red accent color:

Original

.red-accent {
    color: #E50914; /* Netflix red */
}

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

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

Blue Theme

.red-accent {
    color: #0EA5E9; /* Sky blue */
}

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

.border-red-accent {
    border-color: #0EA5E9;
}

Green Theme

.red-accent {
    color: #10B981; /* Emerald green */
}

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

.border-red-accent {
    border-color: #10B981;
}

Step 2: Update Background Colors

Modify the main background color in css/estilos.css:6:

body {
    background-color: #0f0f0f; /* Change to #1a1a2e for dark blue, #1e1e1e for charcoal */
}

Step 3: Update Tailwind Inline Colors

Find and replace Tailwind color classes throughout index.html:

Header Navigation (Line 32)

<!-- Before -->
<a href="#home" class="nav-link text-white hover:text-red-accent transition">Inicio</a>

<!-- After (for blue theme) -->
<a href="#home" class="nav-link text-white hover:text-blue-500 transition">Inicio</a>

Buttons (Line 75)

<!-- Before -->
<a href="#projects" class="bg-red-accent hover:bg-red-700 text-white px-6 py-3 rounded-md">

<!-- After (for green theme) -->
<a href="#projects" class="bg-green-500 hover:bg-green-700 text-white px-6 py-3 rounded-md">

When changing the accent color, make sure to update it in three places: the CSS classes (.red-accent, .bg-red-accent, .border-red-accent), the JavaScript files (js/fondo.js:36, js/main.js:95), and all Tailwind utility classes in HTML.

Typography

The portfolio uses the Poppins font family from Google Fonts with multiple weights.

Current Font Configuration

css/estilos.css:1

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

body {
    font-family: 'Poppins', sans-serif;
}

Changing the Font

Step 1: Update Google Fonts Import

Replace the import in both css/estilos.css:1 and index.html:17-18:

Poppins (Current)

index.html

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
    rel="stylesheet" />

Inter

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"
    rel="stylesheet" />

Montserrat

<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap"
    rel="stylesheet" />

Roboto

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap"
    rel="stylesheet" />

Step 2: Update CSS Font Family

body {
    font-family: 'Inter', sans-serif; /* or 'Montserrat', 'Roboto', etc. */
}

Step 3: Adjust Font Sizes (Optional)

Modify heading sizes in index.html:

<!-- Main heading (Line 67) -->
<h2 class="text-4xl md:text-6xl font-bold mb-6">
    <!-- Change to text-3xl md:text-5xl for smaller -->
    <!-- Change to text-5xl md:text-7xl for larger -->
</h2>

Spacing and Layout

Container Padding

All sections use consistent padding controlled by Tailwind classes:

index.html:64

<div class="container relative z-10 mx-auto px-6 py-24">
  <!-- px-6 = 1.5rem horizontal padding -->
  <!-- py-24 = 6rem vertical padding -->
</div>

Increase py-24 to py-32 for more vertical spacing, or decrease to py-16 for tighter sections.

Section Spacing

Modify section padding in index.html:108, 249, 411:

<!-- Current -->
<section id="skills" class="py-20 bg-black bg-opacity-50">

<!-- Larger spacing -->
<section id="skills" class="py-28 bg-black bg-opacity-50">

<!-- Tighter spacing -->
<section id="skills" class="py-12 bg-black bg-opacity-50">

Grid Gaps

Control spacing between skill items and project cards:

index.html:121

<!-- Skills grid (current: gap-8) -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-8">

<!-- Tighter: gap-4 | Wider: gap-12 -->

Borders and Shadows

Card Hover Effects

Project cards have custom hover shadows defined in css/estilos.css:51-54:

.project-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(229, 9, 20, 0.2);
}

Customize Shadow Intensity

/* Subtle shadow */
box-shadow: 0 5px 15px rgba(229, 9, 20, 0.1);

/* Strong shadow */
box-shadow: 0 15px 30px rgba(229, 9, 20, 0.4);

/* Multi-layer shadow */
box-shadow: 0 10px 20px rgba(229, 9, 20, 0.2), 
            0 4px 8px rgba(0, 0, 0, 0.3);

Add Border Radius

Modify card containers in index.html:257:

<!-- Current -->
<div class="bg-gray-900 rounded-xl overflow-hidden">

<!-- More rounded: rounded-2xl | Less: rounded-lg | Square: rounded-none -->

Input Field Styling

The contact form inputs have custom focus effects in css/estilos.css:102-111:

.form-input {
    background: rgba(255, 255, 255, 0.1);
    border-bottom: 2px solid #333;
    transition: all 0.3s ease;
}

.form-input:focus {
    border-bottom-color: #E50914;
    background: rgba(255, 255, 255, 0.15);
}

The navigation links have an animated underline effect in css/estilos.css:83-96:

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -5px;
    left: 0;
    background-color: #E50914;
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

Customize Underline Thickness

.nav-link::after {
    height: 3px; /* Thicker | Use 1px for subtle */
}

Change Underline Position

.nav-link::after {
    bottom: -8px; /* Further below | Use -2px for closer */
}

Add Underline Animation

/* Animate from center */
.nav-link::after {
    left: 50%;
    transform: translateX(-50%);
}

.nav-link:hover::after {
    width: 100%;
}

Background Opacity

Section backgrounds use semi-transparent overlays:

index.html:108

<section id="skills" class="py-20 bg-black bg-opacity-50">

Adjust bg-opacity-50 to control transparency:

bg-opacity-30: More transparent (lighter)
bg-opacity-70: Less transparent (darker)
bg-opacity-0: Fully transparent

Tailwind Utility Classes

The portfolio heavily uses Tailwind CSS. Here are the most common utilities:

Responsive Design

<!-- Mobile-first approach -->
<div class="text-4xl md:text-6xl"> <!-- 4xl on mobile, 6xl on tablet+ -->
<div class="flex-col md:flex-row"> <!-- Column on mobile, row on tablet+ -->
<div class="grid-cols-1 md:grid-cols-2 lg:grid-cols-5"> <!-- Responsive grid -->

Hover Effects

<!-- Color transitions -->
<a class="text-white hover:text-red-accent transition">

<!-- Transform effects -->
<button class="hover:scale-105 transition">

<!-- Background changes -->
<div class="hover:bg-gray-900 transition">

When modifying Tailwind classes, always include the transition class for smooth animations between states.

Custom Scroll Behavior

Smooth scrolling is enabled in css/estilos.css:5:

body {
    scroll-behavior: smooth;
}

To disable or adjust:

/* Instant scrolling */
scroll-behavior: auto;

/* Native smooth scrolling */
scroll-behavior: smooth;

Quick Reference: Common Customizations

Change Accent Color

Update .red-accent, .bg-red-accent, .border-red-accent in css/estilos.css

Modify Font

Update Google Fonts import in index.html:17 and font-family in css/estilos.css:4

Adjust Spacing

Modify py-* and px-* Tailwind classes throughout sections

Customize Shadows

Edit box-shadow values in css/estilos.css:53 for project cards

Next Steps

Content Customization

Learn how to update text, skills, projects, and personal information

Animation Customization

Customize particles, SVG animations, and interactive effects

Get Started

Components

Customization

Deployment

Color Scheme

Primary Colors

Typography

Current Font Configuration

Changing the Font

Spacing and Layout

Container Padding

Section Spacing

Grid Gaps

Borders and Shadows

Card Hover Effects

Input Field Styling

Navigation Underline Effect

Background Opacity

Tailwind Utility Classes

Responsive Design

Hover Effects

Custom Scroll Behavior

Quick Reference: Common Customizations

Change Accent Color

Modify Font

Adjust Spacing

Customize Shadows

Next Steps

Content Customization

Animation Customization

Build docs developers (and LLMs) love

Get Started

Components

Customization

Deployment

​Color Scheme

​Primary Colors

​Typography

​Current Font Configuration

​Changing the Font

​Spacing and Layout

​Container Padding

​Section Spacing

​Grid Gaps

​Borders and Shadows

​Card Hover Effects

​Input Field Styling

​Navigation Underline Effect

​Background Opacity

​Tailwind Utility Classes

​Responsive Design

​Hover Effects

​Custom Scroll Behavior

​Quick Reference: Common Customizations

Change Accent Color

Modify Font

Adjust Spacing

Customize Shadows

​Next Steps

Content Customization

Animation Customization

Build docs developers (and LLMs) love

Color Scheme

Primary Colors

Typography

Current Font Configuration

Changing the Font

Spacing and Layout

Container Padding

Section Spacing

Grid Gaps

Borders and Shadows

Card Hover Effects

Input Field Styling

Navigation Underline Effect

Background Opacity

Tailwind Utility Classes

Responsive Design

Hover Effects

Custom Scroll Behavior

Quick Reference: Common Customizations

Next Steps