Skip to main content

Documentation 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.

The skills grid in the About section is driven by a skills: Skill[] array defined at the top of src/components/About.tsx. The array currently contains 18 entries. Each entry specifies the skill’s display name, an icon component to render, and an optional Tailwind CSS color class applied to that icon. The grid automatically accommodates any number of entries by wrapping across rows.

​
The Skill Type

Each object in the skills array must conform to the Skill interface defined in src/types.ts.
​
name
string
required
The display label rendered below the icon inside each skill card (e.g., 'React', 'Docker', 'PostgreSQL').
​
icon
React.FC<{ className?: string }>
required
A functional component that accepts a className prop and renders the skill icon. This can be a component from @/components/Icons/SkillIcons, a direct react-icons component, or any other component matching this signature. The component is rendered at h-10 w-10 size.
​
className
string
A Tailwind CSS utility class applied to the icon element to set its color (e.g., 'text-sky-500', 'text-green-500'). When omitted, the icon inherits its color from the surrounding text context.

​
Icon Sources

Icons for the skills grid come from two sources: @/components/Icons/SkillIcons — a local re-export module at src/components/Icons/SkillIcons.tsx that provides named aliases for ten react-icons/si components: 
import {
  ReactIcon, TypeScriptIcon, JavaScriptIcon, NextJsIcon, NodeJsIcon,
  TailwindIcon, HTMLIcon, CSSIcon, FigmaIcon, GitIcon,
} from '@/components/Icons/SkillIcons';
react-icons packages — imported directly in src/components/About.tsx. The project already uses imports from these six packages:
PackagePrefixExamples
react-icons/diDiDiDocker, DiMongodb
react-icons/faFaFaAngular, FaPython
react-icons/fa6FaFaDocker, FaVuejs
react-icons/piPiPiNotionLogoBold
react-icons/siSiSiMongodb, SiPostgresql
react-icons/biBiBiLogoVisualStudio

​
Adding a Skill

1

Find the icon

Browse react-icons.github.io/react-icons to locate the icon you want to add. Note the icon name and its package. If an appropriate icon already exists in src/components/Icons/SkillIcons.tsx, you can import it from there instead.
2

Import the icon

Add a named import for the icon at the top of src/components/About.tsx. If the package is already imported, add the icon name to the existing import statement. If it is a new package, add a new import line.
// Adding to an existing import:
import { SiMongodb, SiPostgresql, SiKubernetes } from 'react-icons/si';

// Or adding a brand-new package:
import { SiKubernetes } from 'react-icons/si';
3

Add an entry to the skills array

Append a new object to the skills array in src/components/About.tsx. Set the className to a Tailwind color class that matches the technology’s brand color.
{ name: 'Kubernetes', icon: SiKubernetes, className: 'text-blue-600' },
4

Save and verify

Save the file. Vite’s HMR will update the skills grid in the browser instantly. The new card slides into the grid in its array position with the staggered fade-in animation.

​
Removing a Skill

To remove a skill, delete its object from the skills array in src/components/About.tsx. If the icon component you removed is no longer referenced anywhere else in the file, also remove it from its import statement to keep the bundle clean. Unused imports will cause lint warnings in most editor setups.

​
Grid Layout

The skills grid uses a responsive column count defined with Tailwind breakpoint utilities: 
// From About.tsx — the grid container class:
'grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 gap-6 max-w-3xl mx-auto'
BreakpointColumns
Default (mobile)3
sm (≥640px)4
md (≥768px)5
The max-w-3xl mx-auto container centers the grid and caps its width. With more than five skills, the grid simply wraps onto additional rows automatically — no configuration change is needed.

​
Staggered Animation

Each skill card uses an inline transitionDelay to create a cascading reveal effect when the About section scrolls into view: 
style={{ transitionDelay: `${index * 100}ms`, ... }}
The index is the zero-based position of the skill in the array. The first card appears immediately, the second after 100 ms, the third after 200 ms, and so on. If you add many skills, the last cards in the array will take noticeably longer to fully appear on scroll. Reduce the multiplier (e.g., from 100 to 50) to speed up the cascade with a large skill set.
Use Tailwind’s named color classes to match each icon’s official brand color for a polished look. For example: text-sky-500 for React, text-yellow-400 for JavaScript, text-orange-600 for HTML5, and text-teal-500 for Tailwind CSS. You can preview all available Tailwind color shades at tailwindcss.com/docs/customizing-colors.

Build docs developers (and LLMs) love

Get started for freeTalk to us