HOME PROJECTS BLOG MY MUSIC CONTACT ME
Headphones Microphone Phone Keyboard
Alfredo Alberruche

ALFREDO ALBERRUCHE

WEB DEVELOPER & MEDIA CREATOR

Cara de Alfredo observando hacia arriba

FRONTEND

& UX

From studying Web Development in La Rioja to designing, structuring and creating scalable solutions for governments and public administrations.

I worked at Brandcode building with Astro, WordPress and Drupal. Now at MB3 Gestión, I'm the bridge between design and development: I translate design systems from Figma into reusable, accessible and maintainable components.

But I don't just execute. I research, experiment and propose. I explore emerging open-source tools, evaluate cutting-edge technologies and design architectures that scale smoothly. My goal: solve systemic problems, not just individual tickets.

Design Systems · Drupal · Figma · SDC · Storybook · Component Architecture · Technical Innovation · Scalable Solutions

2
years as developer
30
projects successfully delivered
2
companies Brandcode → MB3

STACK

The tools I use daily to build digital experiences.

DEVELOPMENT
Drupal

Drupal

Component development, theming, and complete site creation leveraging the SDC engine

WordPress

WordPress

Both as CMS and Headless CMS. Wpbakery + Salient + LessCSS

Astro

Astro

My platonic love. Perfect for creating ultra-fast and dynamic websites.

Shopify

Shopify

Development and customization of online stores with Shopify, working with Liquid and apps.

Moodle

Moodle

I create, maintain and customize e-learning platforms with Moodle. Also creating courses in both SCORM and H5P.

Storybook

Storybook

Where I create and document reusable UI components for frontend projects.

Razor

Razor

Template syntax for ASP.NET that combines C# code with HTML. Fast and efficient.

Tailwind

Tailwind

Same as Astro, but for CSS. I layout quickly and atomically for MVPs and later scale to BEM if needed.

Bootstrap

Bootstrap

Both in the great stable V4 and V5. Perfect for rapid prototyping and scaling.

01

My main stack. Modern frameworks, clean code and scalable solutions. From Astro for ultra-fast websites to React for interactive applications.

DESIGN & MEDIA
Figma y Zeplin

Figma y Zeplin

I move between design mode and dev mode with ease. I master design with autolayout and components.

FLStudio

FLStudio

For producing, recording vocals and post-processing audio. With it I've created soundtracks, songs and voiceovers for brands like CocaCola and Vicio.

AdobePremiere

AdobePremiere

For video editing, subtitles and shorts. I've edited corporate, promotional and social media videos.

Photopea

Photopea

I optimize for web, crop and edit both images and thumbnails without issues.

Remotion

Remotion

My 2025 discovery for creating videos programmatically with React.

Replicate

Replicate

I use AI models to generate high-quality images and multimedia content.

02

Not just code. I edit video, process audio and optimize images. I understand design because I practice it, and that improves my interface integration.

WORKFLOW
Contentful

Contentful

The CMS I used to feed this website.

Bitbucket

Bitbucket

For project PRs. Accustomed to the workflow.

Jira

Jira

For agile environments, agile projects.

Obsidian

Obsidian

To document my programming and design learning. Nodes everywhere.

Teams

Teams

For communication and video calls in corporate environments.

03

Tools that keep everything in order. Version control, project management and documentation. The ecosystem surrounding the code.

EXPERIENCE

From resolving technical issues to bringing digital solutions to life. A path of constant evolution.

2017 2017 → 2022
ORANGE

FTTH/ADSL Technician

Management, escalation and resolution of technical incidents. I developed communication skills and ability to work under pressure.

N2 TechnicianControl TowerQuality Former
2024 2024 → 2025
BRANDCODE

Frontend Developer

My first experience as a developer. Projects with React, Astro, WordPress and Drupal. I learned to align design with scalability.

React & AstroWordPress & DrupalTailwindCSS
2025 2025 → Currently
MB3 GESTIÓN

UX/UI Integrator

Bridge between design and development in government environments. I translate Design Systems into accessible and maintainable components. I structure and implement sites in Drupal using SDC (Single Directory Components), as well as develop templating in CKAN and manage corporate LMS.

Design SystemsDrupalAccessibilityStorybook

MY SERVICES

More than code. Comprehensive solutions that combine development, design and innovation.

01

Frontend Development

Modern interface development in Drupal, AstroJS, Shopify, WordPress...

02

UX Integration

From Figma to code, respecting Design Systems and advocating for atomic interface design.

03

Drupal & CMS

Robust solutions for enterprise projects. SDC & Advanced Theming.

04

Content Creation

Video editing, audio, music production and voiceover. Premiere, FL Studio, Photoshop...

05

AI Tools

AI models with Flux. Voiceovers and generative content.

06

Research & Innovation

I explore emerging technologies and propose contextual solutions. Finding intersections is my strength.

Swipe to see more

EDUCATION

Continuous learning. Always in learning mode.

Completed
100%

Bachillerato CCSS

IES Brianda de Mendoza · Guadalajara

100%

B2 English Certificate

BabelAcademy · Dublin, Ireland

100%

G.S. Desarrollo Apps Web

IES Comercio · La Rioja

Nota: 8.7 · TFG: 10
80%

Máster Astro.js

Udemy

75%

Web Design Figma

Udemy

Coming Soon

Courses I want to complete:

  • 1 Automation with N8N
  • 2 React Native

"There's always something new to learn. Some say "Jack of all trades, master of none," but I believe that letting curiosity guide me has led me to discover new passions and skills that enrich my professional profile."

SOCIAL

MY SOCIAL

Find me on these platforms

CONTACT

Fill out the form with what you need. It will reach me directly. I'll respond as soon as possible.

  • Landing Pages Creation
  • Multimedia Content Creation
  • UI/UX Project Collaboration
  • Request Voiceover
  • Finding Intersections
  • Development Proposals

¡Enviado!

Lo antes posible tendrás mi respuesta.
¡Gracias por contactar!