decabeza.github.io/index.html at master · decabeza/decabeza.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>decabeza | Product Designer - Portfolio</title>
  <meta name="description" content="Portfolio de Alberto, diseñador de productos minimalista.">
  <link rel="stylesheet" href="./stylesheets/styles.css">
  <link rel="shortcut icon" href="favicon.ico">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Baskervville:ital,wght@0,400..700;1,400..700&family=Frank+Ruhl+Libre:wght@300..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Signika:wght@300..700&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap" rel="stylesheet">
</head>
<body>
  <header class="header">
    <div class="wrap">
      <div class="brand">
        <a class="logo" href="#">decabeza</a>
        <span class="status">
          <span class="dot" aria-hidden="true"></span>
          Disponible para nuevos proyectos
        </span>
      </div>

      <nav class="nav" aria-label="Navegación principal">
        <a href="#projects">Casos de estudio</a>
        <a href="about.html">Sobre mí</a>
        <a href="mailto:alberto@decabeza.es">Contacto</a>
      </nav>

      <div class="lang">
        <a href="#" class="active">Español</a>
        <span>/</span>
        <a href="en/index.html">English</a>
      </div>
    </div>
  </header>

  <main id="contenido" class="main">
    <section class="hero homepage">
      <div class="wrap">
        <h1>Soy Alberto, <br><span class="gradient-text">diseñador de producto UX & UI.</span></h1>
        <h2>Diseño productos digitales de principio a fin: investigación, estrategia, interfaz y entrega.<br> Me incorporo a equipos que necesitan a alguien que cubra todo el ciclo de diseño.</h2>
      </div>
    </section>

    <div class="section">
      <div class="wrap">
        <h2>Cómo trabajo</h2>
        <div class="two-columns">
          <div class="facts">
            <div class="fact">
              <span class="k"><strong>Producto</strong></span>
              <span>Estrategia · Research · Definición · Roadmap</span>
              <p>Defino productos desde la idea hasta la validación, conectando negocio, usuario y tecnología.</p>
            </div>
            <div class="fact">
              <span class="k"><strong>Diseño</strong></span>
              <span>UX · UI · Design Systems · Prototipado</span>
              <p>Diseño experiencias claras, sistemas consistentes y soluciones que escalan.</p>
            </div>
          </div>
          <div class="facts">
            <div class="fact">
              <span class="k"><strong>Implementación</strong></span>
              <span>HTML · CSS/SCSS · Accesibilidad · Front-end</span>
              <p>Trabajo cerca del código para asegurar viabilidad, rendimiento y calidad en el detalle.</p>
            </div>
            <div class="fact">
              <span class="k"><strong>Herramientas</strong></span>
              <span>Figma · Photoshop · Git · Edición de vídeo</span>
              <p>Combino herramientas de diseño y desarrollo con IA para iterar más rápido y tomar mejores decisiones.</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="section with-background logos">
      <div class="wrap">
        <h2>Empresas y productos en los que he contribuido</h2>

        <div class="logos-wrapper">
          <div class="logos-track">
            <img src="./images/logo_teowaki.png" alt="Teowaki">
            <img src="./images/logo_zaragoza.png" alt="Ayuntamiento de Zaragoza">
            <img src="./images/logo_grole.png" alt="GRole">
            <img src="./images/logo_hola.png" alt="¡Hola!">
            <img src="./images/logo_qoolife.png" alt="Qoolife">
            <img src="./images/logo_ss.png" alt="Festival de Cine de San Sebastián">
            <img src="./images/logo_ied.png" alt="IED Madrid">

            <img src="./images/logo_teowaki.png" alt="Teowaki">
            <img src="./images/logo_zaragoza.png" alt="Ayuntamiento de Zaragoza">
            <img src="./images/logo_grole.png" alt="GRole">
            <img src="./images/logo_hola.png" alt="¡Hola!">
            <img src="./images/logo_qoolife.png" alt="Qoolife">
            <img src="./images/logo_ss.png" alt="Festival de Cine de San Sebastián">
            <img src="./images/logo_ied.png" alt="IED Madrid">
          </div>
        </div>
      </div>
    </div>

    <div class="section projects" id="projects">
      <div class="wrap">
        <h2>Casos de estudio</h2>
        <div class="grid">
          <article class="card democrateam">
            <h3>democrateam</h3>
            <p>Co-fundador. Especializados en soluciones de participación ciudadana y gobierno abierto utilizando <i>software open source</i>.</p>
            <a href="./projects/democrateam.html">Caso de estudio democrateam &#8594;</a>
            <img src="images/democrateam_homepage.png" alt="" loading="lazy">
          </article>

          <article class="card madrid">
            <h3>Decide Madrid</h3>
            <p>Diseño y desarrollo de la aplicación web de gobierno abierto y democracia directa orientada a la participación ciudadana.</p>
            <a href="./projects/ayuntamiento_madrid.html">Caso de estudio Decide Madrid &#8594;</a>
            <img src="images/ayuntamiento_madrid_homepage.png" alt="" loading="lazy">
          </article>

          <article class="card aap">
            <h3>Aprendo a programar</h3>
            <p>Co-fundador. Proyecto educativo con el objetivo de acercar la programación a niños de forma clara, visual y accesible.</p>
            <a href="./projects/aprendoaprogramar.html">Caso de estudio Aprendo a programar &#8594;</a>
            <img src="images/aprendo_a_programar_homepage.png" alt="" loading="lazy">
          </article>

          <article class="card beruby">
            <h3>beruby</h3>
            <p>Plataforma de cashback y ahorro online. Mejora de experiencia de usuario, claridad visual y diseño <i>responsive</i>.</p>
            <a href="./projects/beruby.html">Caso de estudio beruby &#8594;</a>
            <img src="images/beruby_homepage.png" alt="" loading="lazy">
          </article>
        </div>
      </div>
    </div>
  </main>

  <footer class="footer">
    <ul class="meta">
      <li>
        <a href="https://www.linkedin.com/in/decabeza/" target="_blank" rel="noreferrer" class="ext">
        LinkedIn
        <svg width="14" height="14" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M7 17L17 7M17 7H9M17 7V15"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"/>
        </svg>
        </a>
      </li>
      <li>
        <a href="https://github.com/decabeza/" target="_blank" rel="noreferrer" class="ext">
          GitHub
        <svg width="14" height="14" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M7 17L17 7M17 7H9M17 7V15"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"/>
        </svg>
        </a>
      </li>
      <li>
        <a href="docs/alberto_garcia_cabeza_cv_2026.pdf" target="_blank" rel="noreferrer" class="ext">
          Currículum
        <svg width="14" height="14" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M7 17L17 7M17 7H9M17 7V15"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"/>
        </svg>
        </a>
      </li>
    </ul>
    <p>© 2026 decabeza</p>
  </footer>
</body>
</html>