Portfolio Moderno’s visual style is controlled almost entirely throughDocumentation Index
Fetch the complete documentation index at: https://mintlify.com/nicolasgrajaleshoyos/portafolio/llms.txt
Use this file to discover all available pages before exploring further.
tailwind.config.js. Custom color tokens, font families, and keyframe animations are all defined inside the theme.extend block, meaning they extend Tailwind’s defaults rather than replacing them. Any change to this file is picked up by Vite’s dev server immediately via HMR, and is compiled into the production build automatically.
Changing the Primary Color
Theprimary token — currently set to #06b6d4 (Tailwind’s Cyan 500) — is the site’s main brand color. It appears on links, skill and tag badges, hover effects, the typing cursor in the Hero section, and the main call-to-action button. Change both primary and its darker companion primary-hover together to keep hover states consistent:
tailwind.config.js
bg-primary, text-primary, border-primary, or hover:bg-primary-hover will update simultaneously — no per-component edits required.
All Color Tokens
The full set of six custom tokens currently defined intailwind.config.js is listed below.
| Token | Default | Usage |
|---|---|---|
primary | #06b6d4 | Links, badges, typing cursor, CTA button |
primary-hover | #0891b2 | Hover state on primary elements |
dark | #0f172a | Dark mode page background |
dark-secondary | #1e293b | Dark mode card and section background |
medium | #64748b | Muted body text |
light | #f1f5f9 | Light-colored text on dark backgrounds |
bg-dark, text-medium, dark:bg-dark-secondary) across every component in src/components/.
Changing Fonts
Two font families are registered undertheme.extend.fontFamily in tailwind.config.js:
tailwind.config.js
font-sans is the default body font set on the <body> element in index.html. font-heading is applied to all section headings, card titles, and the navigation logo.
Tailwind references these font names, but the fonts themselves must be loaded by the browser. Google Fonts are loaded by adding a <link> tag inside the <head> of index.html. Without this tag, the browser falls back to the system sans-serif font instead of rendering Inter or Poppins.
To switch to different fonts:
Choose your fonts
Pick your desired font families from fonts.google.com. Note the exact font names as they appear in the Google Fonts URL (e.g.,
Nunito, Outfit, Space+Grotesk).Update the font import in index.html
Open To switch to different fonts, replace the family names in the URL. For example, to use Outfit for body text and Space Grotesk for headings:
index.html and add or update a Google Fonts <link> tag inside the <head> element to load your chosen fonts. For example, to load Inter and Poppins (the current defaults):index.html
index.html
Custom Animations
Five custom keyframe animations are defined intailwind.config.js and used across components:
| Animation class | Duration | Where used |
|---|---|---|
animate-float | 6s ease-in-out infinite | Profile photo in the About section |
animate-blink | 1s steps(1) infinite | Typing cursor in the Hero section |
animate-tilt | 10s linear infinite | Decorative tilt effect on Hero elements |
animate-gradient-shift | 15s ease infinite | Hero section gradient background |
animate-fade-in-up | 0.8s ease-out forwards | Initial page load fade-in |
animation block. For example, to slow the floating profile photo from 6 seconds to 10 seconds:
tailwind.config.js
keyframes block directly beneath animation defines the start and end positions for each effect. You can modify the keyframe values themselves — for instance, increasing the translateY value in the float keyframes to make the photo bob up and down over a larger distance:
tailwind.config.js