Assegurar el disseny responsive per a tots els dispositius

Disseny Responsive - Love Nature

Justificació: Disseny Responsive Avançat

Aquest disseny implementa un sistema responsive complet utilitzant tècniques professionals:

📱 Media Queries Estratègiques

480px: Mòbils petits - Botons a pantalla completa, menú vertical
768px: Tauletes - Submenú adaptat, grid de 2 columnes
1024px: Escriptori - Grid de 3 columnes
1600px: Pantalles grans - Grid de 4 columnes, amplada màxima 1400px

📐 Unitats Relatives

%, vw, vh: Per a amplades i altures proporcionals
rem, em: Per a tipografia i espaiats escalables
clamp(): Per a tipografia fluida entre límits

🔲 Flexbox i Grid

CSS Grid: Graella de reptes amb repeat(auto-fit, minmax(300px, 1fr))
Flexbox: Menú, footer i botons amb flex-wrap per a reorganització

Implementació: Menú Professional

Menú completament funcional amb navegació fluida i coherent:

📋 Característiques del menú

✓ Estructura jeràrquica: Inici, Reptes (amb 5 subelements), Sobre mi, Contacte
✓ Submenú desplegable: Apareix en hover (escriptori) i en clic (mòbil)
✓ Menú hamburguesa: S'activa automàticament en mòbils (≤768px)
✓ Enllaços complets: Tots els botons enllacen a les seccions corresponents
✓ Accessibilitat: Atribut aria-label per a lectors de pantalla

Comportament del menú per dispositiu:

Dispositiu	Amplada	Comportament menú	Submenú
Mòbil	≤768px	Hamburguesa (☰)	Desplegable vertical
Tauleta	769-1024px	Horitzontal	Hover desplegable
Escriptori	≥1025px	Horitzontal	Hover desplegable

Els meus reptes - Love Nature

Els 5 reptes estan organitzats en un submenú accessible i en aquesta graella responsive:

Repte 1.1

Gestión, Configuración y Documentación de Herramientas Digitales y WordPress

Configuració completa d'eines digitals i WordPress amb documentació exhaustiva.

Veure detall

Repte 1.2

Implementació i Gestió Completa d'Aules Digitalitzades i Xarxes Educatives

Disseny i implementació d'infraestructures TIC per a entorns educatius.

Veure detall

Repte 1.3

International Help Desk - Case #806

Assistència telefònica internacional amb terminologia tècnica en anglès.

Veure detall

Repte 1.4

Flowcharts per a Resolució d'Incidències

Diagrames de flux professionals per a help desk amb simbologia ISO.

Veure detall

Repte 1.5

Disseny de Cartelleria LAN Party 2026

Cartell professional amb tècniques avançades de disseny gràfic.

Veure detall

Sobre mi

Tarik Aberdane

Estudiant de SMX a l'INS Castellbisbal, apassionat per la tecnologia i el suport informàtic. Aquest espai recull el meu aprenentatge i projectes realitzats durant el cicle.

Competències

✓ Configuració WordPress
✓ Xarxes i sistemes
✓ Help Desk internacional
✓ Disseny gràfic
✓ Flowcharts i documentació

Contacte

El teu proper projecte pot començar aquí. Contesta'm a través de:

📧 Correu electrònic 📱 LinkedIn 🐙 GitHub

Evidències del disseny responsive

Documentació visual del comportament responsive en diferents dispositius:

📱 MÒBIL

Vista en mòbil (≤768px)

Menú hamburguesa (☰) visible
Submenú desplegable vertical
Botons a pantalla completa
Tipografia escalada amb clamp()

📱 TAU LETA

Vista en tauleta (769-1024px)

Menú horitzontal complet
Submenú hover desplegable
Grid de 2 columnes per reptes

🖥️ ESCRIPTORI

Vista en escriptori (≥1025px)

Menú horitzontal complet
Submenú hover desplegable
Grid de 3 columnes per reptes

📊 MÈTRIQUES

Especificacions tècniques

4 media queries (480, 768, 1024, 1600px)
Unitats: rem, %, vw, clamp()
Flexbox + Grid combinats
Menú amb 5 subelements

📋 Compliment de la rúbrica PRO+

✓ Media Queries avançades
✓ Unitats relatives (rem, %, vw)
✓ Flexbox per a navegació
✓ Grid per a continguts
✓ Menú hamburguesa funcional
✓ Submenú amb 5 elements
✓ Enllaços a totes les seccions
✓ Adaptació perfecta a 3 dispositius
✓ Evidències documentades