🖥️ Disseny Responsive PRO+

El portafolis asaldana.inscastellbisbal.net implementa un sistema responsive complet utilitzant tècniques professionals. Cada decisió tècnica té una justificació concreta: no s’han aplicat valors arbitraris, sinó criteris basats en l’estàndard CSS i les bones pràctiques de desenvolupament web.

📐 Media Queries Estratègiques — per què aquests punts de ruptura?

📏 Unitats Relatives — per què cada una?

• % i vw — S’utilitzen per a amplades de contenidors (max-width: 90%, padding: clamp(12px, 3vw, 32px)) perquè es calculen en relació al viewport, no a un valor fix. Així, un contenidor al 90% sempre deixa marges laterals independentment de la pantalla.
• rem — S’utilitza per a tipografia perquè és relatiu a la mida base del document (16px per defecte). Si l’usuari augmenta la mida de lletra al navegador per accessibilitat, tot s’escala proporcionalment. Un valor fix com 14px no s’escalaria.
• clamp(mínim, preferit, màxim) — S’utilitza per a tipografia fluida: clamp(14px, 2.2vw, 16px) significa que la font mai serà inferior a 14px (llegible en mòbil) ni superior a 16px (no excessiva en pantalla gran), ajustant-se proporcionalment entremig. Elimina la necessitat de múltiples media queries per a la tipografia.

🔲 Flexbox i CSS Grid — per què cada un i on?

• CSS Grid per a les targetes de reptes: repeat(auto-fit, minmax(260px, 1fr)) — He triat Grid perquè les targetes necessiten alineació en dues dimensions (files i columnes). El valor auto-fit fa que el navegador calculi automàticament quantes columnes caben, sense necessitat de media queries extra. Si afegeixo un repte nou, la graella s’adapta sola.
• Flexbox per al menú de navegació: He triat Flexbox perquè el menú és una estructura unidimensional (elements en línia horitzontal). Amb flex-wrap: wrap els elements passen a la línia següent si no hi caben, i amb flex-direction: column en mòbil el menú es reorganitza verticalment de manera natural.
• Decisió tècnica clau: No he usat Grid per al menú ni Flexbox per a les targetes perquè cada eina té el seu ús òptim: Grid = distribució bidimensional; Flexbox = alineació unidimensional. Barrejar-los incorrectament genera comportaments imprevisibles en mòbil.

El menú de navegació del portafolis és completament funcional, amb navegació fluida i coherent en tots els dispositius. S’ha implementat mitjançant el sistema natiu del tema IT Security combinat amb CSS personalitzat per garantir el comportament correcte en cada breakpoint:

📋 Comportament del menú per dispositiu

🍔 Implementació tècnica del menú hamburguesa

El menú hamburguesa s’activa automàticament quan l’amplada de pantalla és inferior a 768px. El CSS personalitzat afegit al tema controla aquest comportament:

• Ocultació del menú: .main-navigation ul { display: none !important; } — el menú complet queda ocult per defecte en mòbil.
• Activació per clic: .main-navigation.toggled ul { display: block !important; } — quan l’usuari fa clic al botó «Menu», el tema afegeix la classe toggled via JavaScript, i el menú es despliega verticalment.
• Submenú accessible: .main-navigation ul ul { position: static !important; border-left: 3px solid #39ff14; } — el submenú passa de posicionament absolut (escriptori) a estàtic (mòbil), quedant indentat visualment per indicar la jerarquia.
• Botons tàctils adequats: padding: 12px 16px als elements del menú garanteix una àrea de pulsació mínima de 44px recomanada per les directrius d’accessibilitat WCAG 2.1.

🗂️ Estructura del submenú de reptes

El submenú «Reptes» conté tots els reptes actuals del portafolis, accessible tant en mòbil com en escriptori:

• ✓
  Estructura jeràrquica: Inici, Reptes (amb 4+1 subelements), iPOP Final, Política de privadesa.
• ✓
  Submenú desplegable: Apareix en hover (escriptori/tauleta) i en clic (mòbil).
• ✓
  Menú hamburguesa: S’activa automàticament en mòbils (≤768px) gràcies al tema IT Security.
• ✓
  Tots els enllaços funcionals: Cada element del submenú apunta a la seva pàgina real.
• ✓
  Accessibilitat: Atribut aria-label al nav per a lectors de pantalla.
• ✓
  Navegació coherent: L’estructura és consistent en tots els dispositius.

Els reptes estan organitzats en un submenú accessible i en aquesta graella responsive que s’adapta automàticament: 1 columna en mòbil, 2 en tauleta, 3 en escriptori.

Documentació visual del comportament responsive del portafolis en diferents dispositius. Captures realitzades amb Chrome DevTools (F12 → Ctrl+Shift+P → «Capture full size screenshot») i simulació de dispositiu (Toggle device toolbar).

📱 MÒBIL (≤768px)

📱

✓ Botó «Menu» visible (hamburguesa)

✓ Submenú desplegable vertical amb tots els reptes

✓ Contingut en 1 columna adaptat a la pantalla

✓ Tipografia fluida amb clamp()

Capturat: iPhone · Safari · 390px

📟 TAULETA (769–1024px)

📟

✓ Botó «Menu» + submenú desplegat complet

✓ Tots els reptes visibles al submenú

✓ Contingut adaptat a amplada mitja

✓ Taules amb scroll horitzontal

Capturat: Firefox DevTools · 768px

🖥️ ESCRIPTORI (≥1025px)

🖥️

✓ Menú horitzontal complet amb submenú

✓ Layout de dues columnes (contingut + sidebar)

✓ Capçalera hero image a pantalla completa

✓ Amplada màxima controlada (90% del viewport)

Capturat: Firefox · Portàtil · 1366px

📊 Mètriques tècniques implementades

• 4 media queries — Punts de ruptura a 480px, 768px, 1024px i 960px (contingut principal).
• Unitats relatives — rem, %, vw, vh, clamp() en tota la tipografia i els espaiats.
• Flexbox + Grid combinats — Estratègia diferenciada per a cada tipus de contingut.
• Imatges responsive — max-width: 100%; height: auto; a totes les imatges del contingut.
• Taules amb scroll horitzontal — overflow-x: auto en mòbil per evitar desbordaments.
• Accessibilitat — Focus visible (outline), aria-label al menú i suport a prefers-reduced-motion.

Accés directe a totes les seccions i evidències del portafolis d’Araceli Saldaña Martinez. Tots els enllaços són funcionals i obren en nova pestanya: