> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/RicardoAlejandroSantillan/dev-showcase/llms.txt
> Use this file to discover all available pages before exploring further.

# Responsive Design

> Mobile-first responsive design strategy and breakpoints in the Dev Showcase portfolio

## Overview

The Dev Showcase portfolio implements a comprehensive responsive design strategy using CSS media queries to adapt layouts and interactions across all device sizes.

**Location**: `wwwroot/css/responsive.css`

***

## Responsive Strategy

### Mobile-First Approach

The application uses a mobile-first design philosophy:

1. **Base styles**: Optimized for mobile devices
2. **Progressive enhancement**: Additional features for larger screens
3. **Media queries**: Add complexity as viewport increases

### Fluid Layouts

Layouts use:

* Flexible grids with CSS Grid and Flexbox
* Percentage-based widths
* `max-width` constraints
* Viewport-relative units (`vw`, `vh`)

***

## Breakpoints

The application defines five main responsive breakpoints:

| Breakpoint        | Width           | Target Devices                   |
| ----------------- | --------------- | -------------------------------- |
| **Desktop Large** | > 1200px        | Large desktops, wide monitors    |
| **Desktop**       | 1025px - 1200px | Standard desktops, laptops       |
| **Tablet**        | 769px - 1024px  | Tablets landscape, small laptops |
| **Mobile Large**  | 481px - 768px   | Tablets portrait, large phones   |
| **Mobile**        | ≤ 480px         | Small phones                     |

***

## Media Query Breakpoints

### 1200px and Below

```css theme={null}
@media (max-width: 1200px)
```

**Target**: Large tablets and smaller desktops

#### Layout Changes

**Projects Layout**:

```css theme={null}
.projects-layout {
    grid-template-columns: 1fr; /* Stack to single column */
}
```

**Carousel Cards**:

```css theme={null}
.carousel-card {
    flex: 0 0 calc(33.333% - 8px); /* Show 3 cards on large tablets */
}
```

**Grid Adjustments**:

```css theme={null}
.vocational-bars-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 columns */
}

.logos-grid {
    grid-template-columns: repeat(3, 1fr); /* 3 columns */
}

.interactive-panels-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 columns */
}
```

***

### 1024px and Below

```css theme={null}
@media (max-width: 1024px)
```

**Target**: Tablets and below

#### Navigation Changes

**Sidebar Behavior**:

```css theme={null}
.sidebar {
    transform: translateX(-100%); /* Hide off-screen */
    width: 280px;
}

.sidebar.active {
    transform: translateX(0); /* Slide in when active */
}
```

**Main Content**:

```css theme={null}
.main-wrapper {
    margin-left: 0 !important; /* Full width */
}
```

**Mobile Menu**:

```css theme={null}
.menu-toggle {
    display: flex; /* Show hamburger menu */
}

.menu-overlay {
    display: block; /* Enable overlay */
}

.menu-overlay.active {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 998;
}
```

#### Component Adjustments

**Language Selector**:

```css theme={null}
.language-selector {
    top: 80px; /* Move down to avoid menu button */
}
```

**Project Info**:

```css theme={null}
.project-info {
    grid-template-columns: 1fr; /* Stack project details */
}
```

**Grids**:

```css theme={null}
.vocational-grid-lists,
.proyecto-top-grid {
    grid-template-columns: 1fr; /* Single column */
}
```

***

### 768px and Below

```css theme={null}
@media (max-width: 768px)
```

**Target**: Large phones and small tablets

#### Header Adjustments

```css theme={null}
.header-particles {
    height: 300px; /* Reduce header height */
}

.header-content h1 {
    font-size: 2rem; /* Smaller main heading */
}

.header-content h2 {
    font-size: 1.25rem; /* Smaller subheading */
}
```

#### Typography

```css theme={null}
h2 {
    font-size: 1.75rem;
}

h3 {
    font-size: 1.35rem;
}
```

#### Layout

```css theme={null}
.main-content {
    padding: 1.5rem; /* Reduce padding */
}
```

#### Grids

```css theme={null}
.vocational-bars-grid {
    grid-template-columns: 1fr; /* Single column */
}

.logos-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 columns */
}

.interactive-panels-grid {
    grid-template-columns: 1fr; /* Single column */
    gap: 1.5rem;
}
```

#### Filters

```css theme={null}
.skill-filter,
.project-filter,
.education-filter,
.vocational-section-filter {
    flex-direction: column; /* Stack buttons vertically */
}

.filter button,
.vocational-section-btn {
    width: 100%; /* Full width buttons */
    text-align: center;
}
```

#### Carousel

```css theme={null}
.carousel-card {
    flex: 0 0 calc(50% - 6px); /* Show 2 cards */
}

.carousel-arrow {
    width: 40px; /* Smaller arrows */
    height: 40px;
}

.carousel-arrow.left {
    left: -15px;
}

.carousel-arrow.right {
    right: -15px;
}
```

#### Certificates

```css theme={null}
.certificates-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
```

#### Chart Legends

```css theme={null}
.radar-legend,
.cognitive-legend {
    grid-template-columns: 1fr; /* Single column legends */
}
```

***

### 640px and Below

```css theme={null}
@media (max-width: 640px)
```

**Target**: Small tablets

```css theme={null}
.logos-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 columns for tech logos */
}
```

***

### 480px and Below

```css theme={null}
@media (max-width: 480px)
```

**Target**: Mobile phones

#### Navigation

```css theme={null}
.sidebar {
    width: 100%; /* Full width sidebar on mobile */
}
```

#### Positioning

```css theme={null}
.language-selector {
    right: 10px; /* Reduce margin */
    top: 70px;
}
```

#### Header

```css theme={null}
.header-particles {
    height: 250px; /* Further reduce height */
}

.header-content h1 {
    font-size: 1.5rem; /* Smallest heading size */
}

.header-content h2 {
    font-size: 1rem; /* Smallest subheading */
}
```

#### Layout

```css theme={null}
.main-content {
    padding: 1rem; /* Minimal padding */
}
```

#### Panels

```css theme={null}
.glow-panel {
    padding: 1.5rem;
    min-height: 150px; /* Reduce height */
}

.glow-panel .icon {
    font-size: 2rem; /* Smaller icons */
}
```

#### Statistics

```css theme={null}
.stat-bar-container {
    height: 10px; /* Thinner progress bars */
}
```

#### Logos

```css theme={null}
.logos-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 columns */
}

.logo-text span {
    font-size: 1rem; /* Smaller text */
}
```

#### Carousel

```css theme={null}
.carousel-card {
    flex: 0 0 100%; /* One card at a time */
}
```

#### Projects

```css theme={null}
.projects-block {
    padding: 1rem; /* Reduce padding */
}
```

#### Charts

```css theme={null}
.chart-container {
    height: 300px; /* Reduce chart height */
}

.chart-container-bar {
    height: 250px; /* Reduce bar chart height */
}
```

#### Certificates

```css theme={null}
.certificates-grid {
    grid-template-columns: 1fr; /* Single column */
}
```

#### Typography

```css theme={null}
.project-info-card h2 {
    font-size: 1.5rem;
}

.project-info-card h3 {
    font-size: 1.25rem;
}
```

#### Modals

```css theme={null}
.modal-content {
    max-width: 95%; /* Nearly full width */
}

.modal-close-btn {
    top: -45px;
    width: 35px;
    height: 35px;
}
```

***

## Touch vs Desktop Interactions

### Touch Device Detection

```css theme={null}
@media (hover: none) and (pointer: coarse)
```

**Target**: Touch-only devices (phones, tablets)

#### Glow Panels

```css theme={null}
.glow-panel::before {
    opacity: 0.5; /* Always show partial glow on touch devices */
}
```

**Reason**: No hover state on touch devices

#### Carousel Arrows

```css theme={null}
.carousel-arrow {
    opacity: 0.8; /* Always visible on touch devices */
}
```

**Reason**: No hover to reveal on touch devices

***

## Navigation Menu Behavior

### Desktop (> 1024px)

* Sidebar always visible
* Fixed position on left
* Main content offset by sidebar width
* No hamburger menu
* No overlay

### Tablet/Mobile (≤ 1024px)

* Sidebar hidden by default (`transform: translateX(-100%)`)
* Hamburger menu button visible
* Click menu to slide in sidebar
* Dark overlay covers main content
* Click overlay or navigation item to close
* Body scroll locked when menu open

**JavaScript Implementation** (`main.js:7-37`):

```javascript theme={null}
function toggleMenu() {
    sidebar.classList.toggle('active');
    menuToggle.classList.toggle('active');
    menuOverlay.classList.toggle('active');
    document.body.style.overflow = sidebar.classList.contains('active') ? 'hidden' : '';
}

// Auto-close on resize to desktop
window.addEventListener('resize', () => {
    if (window.innerWidth > 1024 && sidebar.classList.contains('active')) {
        sidebar.classList.remove('active');
        menuToggle.classList.remove('active');
        menuOverlay.classList.remove('active');
        document.body.style.overflow = '';
    }
});
```

***

## Carousel Touch Support

### Touch Events (`carousel.js:147-215`)

**Touch Support**:

* `touchstart` / `mousedown`: Begin drag
* `touchmove` / `mousemove`: Track finger/mouse position
* `touchend` / `mouseup`: Complete drag, snap to slide

**Drag Behavior**:

* Minimum 5px movement to activate drag (prevents accidental drags on tap)
* Minimum 50px drag to trigger slide change
* Smooth animation on release
* Prevents default scroll during horizontal drag

**Multi-input Support**:

```javascript theme={null}
getPositionX(event) {
    return event.type.includes('mouse') ? event.pageX : event.touches[0].clientX;
}
```

### Click vs Drag Detection

```javascript theme={null}
touchEnd() {
    if (!this.hasMoved) {
        // Handle as click
        return;
    }
    // Handle as drag
}
```

Prevents card click handlers from firing during drags.

***

## Layout Changes by Viewport

### Grid Transformations

#### Projects Layout

* **> 1200px**: 2-column layout
* **≤ 1200px**: 1-column stacked

#### Vocational Bars Grid

* **> 1200px**: 3 columns
* **1025px - 1200px**: 2 columns
* **≤ 768px**: 1 column

#### Tech Logos Grid

* **> 1200px**: 4+ columns (auto-fit)
* **769px - 1200px**: 3 columns
* **481px - 768px**: 2 columns
* **≤ 480px**: 2 columns

#### Interactive Panels Grid

* **> 1200px**: 3+ columns
* **769px - 1200px**: 2 columns
* **≤ 768px**: 1 column

#### Carousel Visible Cards

* **> 1200px**: 2.1 cards (partial 3rd visible)
* **481px - 768px**: 2 cards (1.1 in JS)
* **≤ 480px**: 1 card at a time

***

## Responsive Images

### Base Styles (`base.css:89-93`)

```css theme={null}
img {
    max-width: 100%;
    height: auto;
    display: block;
}
```

**Benefits**:

* Images never overflow container
* Maintain aspect ratio
* No inline gaps (block display)

***

## Responsive Typography

Font sizes scale down on smaller viewports:

| Element   | Desktop | 768px   | 480px  |
| --------- | ------- | ------- | ------ |
| h1        | 2.5rem  | 2rem    | 1.5rem |
| h2        | 2rem    | 1.75rem | -      |
| h3        | 1.5rem  | 1.35rem | -      |
| Header h1 | -       | 2rem    | 1.5rem |
| Header h2 | -       | 1.25rem | 1rem   |

***

## Best Practices Applied

### 1. Mobile-First CSS

Base styles target mobile, enhancements for larger screens:

```css theme={null}
/* Base: Mobile styles */
.element {
    width: 100%;
    padding: 1rem;
}

/* Enhancement: Desktop */
@media (min-width: 1025px) {
    .element {
        width: 50%;
        padding: 2rem;
    }
}
```

### 2. Fluid Grids

Use CSS Grid with `auto-fit` and `minmax()`:

```css theme={null}
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}
```

### 3. Flexible Images

All images scale with container:

```css theme={null}
img {
    max-width: 100%;
    height: auto;
}
```

### 4. Touch-Friendly Targets

Buttons and interactive elements sized for touch:

```css theme={null}
.carousel-arrow {
    width: 50px;  /* Desktop */
    height: 50px;
}

@media (max-width: 768px) {
    .carousel-arrow {
        width: 40px;  /* Touch-friendly size */
        height: 40px;
    }
}
```

### 5. Content-First Breakpoints

Breakpoints chosen based on when content needs adjustment, not device sizes.

### 6. Progressive Enhancement

Core functionality works on all devices, enhancements for capable devices:

* Base: Touch navigation works everywhere
* Enhancement: Hover effects on desktop
* Enhancement: Glow panels follow mouse on desktop

***

## Testing Responsive Design

### Browser DevTools

**Chrome/Edge**:

1. Open DevTools (F12)
2. Click device toolbar icon (Ctrl+Shift+M)
3. Select device or custom dimensions
4. Test touch events with "Toggle device mode"

**Firefox**:

1. Open DevTools (F12)
2. Click Responsive Design Mode (Ctrl+Shift+M)
3. Test various viewports

### Test Different Breakpoints

Key widths to test:

* 1920px (desktop)
* 1200px (breakpoint)
* 1024px (tablet/mobile toggle)
* 768px (mobile large)
* 480px (mobile)
* 360px (small phones)

### Test Interactions

* Resize browser window to trigger responsive changes
* Test menu toggle at 1024px breakpoint
* Test carousel touch drag on mobile simulation
* Test hover effects with mouse vs touch

***

## Related Files

* `wwwroot/css/responsive.css`: All responsive styles
* `wwwroot/css/base.css`: Base styles and variables
* `wwwroot/js/main.js`: Responsive menu JavaScript
* `wwwroot/js/carousel.js`: Touch-enabled carousel