Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/luisllatas-dev/portafolio-programador-web-junior/llms.txt

Use this file to discover all available pages before exploring further.

The portfolio uses a dark theme with blue accent colors. All colors are defined in css/styles.css and can be easily customized to match your brand.

​
Color Palette Overview

The current color scheme includes:
  • Background Gradient: Black to blue gradient (#000000 → #0069a8 → #101828)
  • Primary Accent: #003ba8 (dark blue)
  • Secondary Accent: #0094a8 (cyan blue)
  • Header Background: #0f1011 (near black)
  • Text Color: white

​
Changing Colors

1

Open the CSS file

Navigate to css/styles.css in your source directory.
2

Update the background gradient

Find line 17 in styles.css:
background: linear-gradient(#000000, #0069a8, #101828);
Replace the hex color values with your preferred colors:
/* Example: Purple to pink gradient */
background: linear-gradient(#1a0033, #6b2d5c, #2d1b3d);
The gradient flows from top to bottom across the page.
3

Update the accent colors

The accent color #003ba8 appears in multiple places:Navigation focus outline (styles.css:89):
outline: 4px solid #003ba8;
Navigation hover effect (styles.css:100):
background-color: #003ba8;
Replace all instances with your preferred accent color using Find & Replace.
4

Update the secondary accent

The cyan accent #0094a8 is used for the profile photo drop shadow at line 141:
filter: drop-shadow(1px 1px 30px #0094a8);
Change this to match your accent color or use a complementary shade.
5

Update the header background

Find line 62 in styles.css:
background-color: #0f1011;
Change this to your preferred header background color. Consider using:
  • A solid color from your gradient
  • A semi-transparent color: rgba(15, 16, 17, 0.9)
  • Complete transparency: transparent
6

Test your changes

Open index.html in a browser to preview your new color scheme. Make adjustments as needed.
Use a color picker tool to find perfect hex codes:

​
Color Reference Table

LocationLineCurrent ColorUsage
Body gradient start17#000000Page background (top)
Body gradient middle17#0069a8Page background (middle)
Body gradient end17#101828Page background (bottom)
Header background62#0f1011Navigation bar
Primary accent89, 100#003ba8Links, focus, hover
Secondary accent141#0094a8Photo shadow
Text color18whiteAll text

​
Creating a Cohesive Color Scheme

Ensure sufficient contrast between background and text colors for readability. Use a contrast checker to verify WCAG compliance.
Professional Blue (current): 
/* Dark blue professional theme */
background: linear-gradient(#000000, #0069a8, #101828);
accent: #003ba8;
secondary: #0094a8;
Warm Sunset: 
/* Orange to purple gradient */
background: linear-gradient(#0f0f0f, #c2410c, #1a1425);
accent: #ea580c;
secondary: #fb923c;
Forest Green: 
/* Nature-inspired green theme */
background: linear-gradient(#0a0f0a, #166534, #0f1410);
accent: #16a34a;
secondary: #4ade80;
Modern Purple: 
/* Vibrant purple theme */
background: linear-gradient(#0c0a14, #7c3aed, #14111f);
accent: #9333ea;
secondary: #a855f7;

​
Using CSS Variables (Advanced)

For easier color management, consider converting the colors to CSS variables: 
:root {
  --color-bg-start: #000000;
  --color-bg-middle: #0069a8;
  --color-bg-end: #101828;
  --color-accent-primary: #003ba8;
  --color-accent-secondary: #0094a8;
  --color-header: #0f1011;
  --color-text: white;
}

.body {
  background: linear-gradient(
    var(--color-bg-start),
    var(--color-bg-middle),
    var(--color-bg-end)
  );
  color: var(--color-text);
}
This allows you to change all colors from a single location at the top of your CSS file.

​
Next Steps

Customize Content

Update text and add your information

Customize Images

Replace photos and skill icons

CSS Architecture

Learn about the CSS structure and organization

Responsive Design

See how colors adapt across devices

Build docs developers (and LLMs) love

Get started for freeTalk to us