Skip to main content

​
Portfolio Section Component

The portfolio section displays project cards in a responsive grid layout with hover effects, overlay animations, and category badges.

​
Section Structure

<section id="portfolio" class="portfolio-grid-container">
    <div class="container">
        <div class="section-header text-center mb-5">
            <h1 class="fw-bold">Portafolio</h1>
            <p class="text">Encontrarás aquí algunos de mis proyectos</p>
        </div>

        <div class="portfolio-grid">
            <!-- Portfolio items -->
        </div>
    </div>
</section>

​
Portfolio Grid Layout

The grid uses CSS Grid with auto-fill to create responsive columns.

​
Grid CSS

.portfolio-grid-container {
    padding: 20px 0 30px;
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    padding: 0 15px;
    max-width: 1200px;
    margin: 0 auto;
}
​
grid-template-columns
css
repeat(auto-fill, minmax(280px, 1fr)) - Auto-fills columns with min width 280px
​
gap
css
default:"20px"
Space between grid items
​
max-width
css
default:"1200px"
Maximum container width

​
Portfolio Item Structure

Each portfolio card contains an image, category badge, and title.

​
HTML Structure

<div class="portfolio-item">
    <a href="https://github.com/GmzQzvZ/facturas_js" 
       target="_blank" rel="noopener noreferrer" class="image-link">
        <img class="portfolio-img" 
             src="images/crm.jpg" 
             alt="CRM con módulo de facturación">
        <div class="portfolio-info">
            <span class="portfolio-category">Web</span>
            <h3 class="portfolio-title">CRM con Facturación</h3>
        </div>
    </a>
</div>

​
Complete Portfolio Grid Example

<div class="portfolio-grid">
    <!-- Project 1 -->
    <div class="portfolio-item">
        <a href="" target="_blank" rel="noopener noreferrer" class="image-link">
            <img class="portfolio-img" 
                 src="images/whatsappbot.jpg" 
                 alt="Bot de WhatsApp para peluquería">
            <div class="portfolio-info">
                <span class="portfolio-category">En Construccion</span>
                <h3 class="portfolio-title">Bot WhatsApp Peluquería</h3>
            </div>
        </a>
    </div>

    <!-- Project 2 -->
    <div class="portfolio-item">
        <a href="https://github.com/GmzQzvZ/facturas_js" 
           target="_blank" rel="noopener noreferrer" class="image-link">
            <img class="portfolio-img" 
                 src="images/crm.jpg" 
                 alt="CRM con módulo de facturación">
            <div class="portfolio-info">
                <span class="portfolio-category">Web</span>
                <h3 class="portfolio-title">CRM con Facturación</h3>
            </div>
        </a>
    </div>

    <!-- Project 3 -->
    <div class="portfolio-item">
        <a href="https://makaluvye.web.app/" 
           target="_blank" rel="noopener noreferrer" class="image-link">
            <img class="portfolio-img" 
                 src="images/viajes.png" 
                 alt="Sitio web de agencia de viajes">
            <div class="portfolio-info">
                <span class="portfolio-category">Web</span>
                <h3 class="portfolio-title">Agencia de Viajes</h3>
            </div>
        </a>
    </div>

    <!-- Project 4 -->
    <div class="portfolio-item">
        <a href="https://github.com/GmzQzvZ/ticket-administrator" 
           target="_blank" rel="noopener noreferrer" class="image-link">
            <img class="portfolio-img" 
                 src="images/task.png" 
                 alt="Aplicación de administración de tickets">
            <div class="portfolio-info">
                <span class="portfolio-category">Web</span>
                <h3 class="portfolio-title">Ticket Administrator</h3>
            </div>
        </a>
    </div>
</div>

​
Portfolio Item Styling

​
Card Container

.portfolio-item {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    height: 100%;
}

.portfolio-item > a {
    display: block;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

​
Image Styling

.portfolio-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    transition: transform 0.5s ease;
    display: block;
}
​
object-fit
css
default:"cover"
Ensures image fills container while maintaining aspect ratio
​
height
css
default:"180px"
Fixed height for consistent card sizing

​
Info Section

.portfolio-info {
    padding: 15px;
    background: rgba(13, 17, 23, 0.9);
    color: #fff;
    position: relative;
    z-index: 2;
}

​
Category Badges

Category badges display the project type with accent color background. 
.portfolio-category {
    display: inline-block;
    padding: 4px 12px;
    background: var(--accent-color);
    color: #fff;
    font-size: 0.75rem;
    border-radius: 20px;
    font-weight: 600;
    margin-bottom: 10px;
}

​
Usage

<span class="portfolio-category">Web</span>
<span class="portfolio-category">En Construccion</span>

​
Project Title

.portfolio-title {
    margin: 0 0 6px;
    font-size: 1.1rem;
    color: #fff;
}

​
Hover Effects

The portfolio items feature multiple hover effects for enhanced interactivity.

​
Card Hover Effect

.portfolio-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(74, 144, 226, 0.2);
    border-color: var(--accent-color);
}
When hovering over a portfolio item:
  1. Card lifts up 5px using translateY(-5px)
  2. Shadow appears with blue tint and 20% opacity
  3. Border color changes to accent color (blue)
  4. Image scales up to 105% size
  5. Overlay appears with gradient from transparent to dark

​
Image Zoom Effect

.portfolio-item:hover .portfolio-img {
    transform: scale(1.05);
}

​
Overlay Gradient

.portfolio-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.7));
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.portfolio-item:hover::after {
    opacity: 1;
}

​
Responsive Breakpoints

The grid adapts to different screen sizes.

​
Tablet View (≤ 991px)

@media (max-width: 991px) {
    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .portfolio-img {
        height: 180px;
    }
}

​
Mobile View (≤ 576px)

@media (max-width: 576px) {
    .portfolio-grid {
        grid-template-columns: 1fr;
        padding: 0 10px;
    }
    
    .portfolio-img {
        height: 200px;
    }
}

​
Accessibility Features

<a href="https://github.com/project" 
   target="_blank" 
   rel="noopener noreferrer" 
   class="image-link">
​
target
attribute
default:"_blank"
Opens link in new tab
​
rel
attribute
default:"noopener noreferrer"
Security best practice for external links

​
Alt Text for Images

<img class="portfolio-img" 
     src="images/crm.jpg" 
     alt="CRM con módulo de facturación">

​
Layout Behavior

Screen SizeColumnsImage HeightGap
Desktop (> 991px)Auto-fill (min 280px)180px20px
Tablet (≤ 991px)2 columns180px20px
Mobile (≤ 576px)1 column200px20px

​
Key Features

  • CSS Grid layout with auto-fill for responsive columns
  • Fixed image heights for consistent card sizing
  • Hover animations including lift, zoom, and overlay effects
  • Category badges with accent color styling
  • Gradient overlay appearing on hover
  • Responsive design with three breakpoints
  • External link handling with security attributes
  • Equal height cards using height: 100%

Build docs developers (and LLMs) love

Get started for freeTalk to us