I have always enjoyed experimenting with computers. In 2004, I tried building my first websites with HTML and CSS. Four years later, I started earning a living with my hobby. Since 2010, I have been living and working in Madrid. I have worked as a freelancer mainly on small to medium-sized business websites.
In 2018 I discovered Jamstack and soon after changed all my (somewhat antiquated) methods. I started integrating Git by default for all projects, tested new bundlers, CSS and Javscript frameworks and discovered the wonderful world of Continuous deployments via GitHub and Netlify.
Currently I'm tinkering with combining the
CUBE CSS methodology and algorithmic layout design of
Every Layout with the utility classes of
Tailwind CSS to get the best of both worlds.
I take accessibility and performance very seriously, testing and re-testing until the result is what I want it to be. Which is (as close as I can get to) perfect.
I'm constantly reading and learning, and I'm especially enthusiastic about everything that's happening in the areas of Jamstack, accessibility and performance. I don't consider myself an expert anywhere, as I'm constantly optimising and every field is incredibly large. But I am a quick and flexible learner and have no trouble familiarising myself with new methods and techniques.
These are the tools I work with or have worked with in the past. Bold indicates higher preference/proficiency.
PHP (within the scope of WP)
Python (automation scripts)
CSS & JS-Frameworks
Bundler / Build tools
CSS & JS preprocessors
Version Control, Hosts
SEO / Monitoring
Google Search Console
Code editors / Terminal
Expand to see the details of some of my recent client projects.
Reder is a coalition of NGOs, collectives, movements, organisations and individuals that campaigns for universal access to healthcare in Spain and denounces exclusion in the healthcare system. This site has been designed with performance and accessibility in mind. This should help visitors - in many cases socially excluded people such as refugees - to find their way around quickly. No fonts are specified, but the system font stack is used to contribute to performance. The editorial team had experience with Wordpress and requested this system. Only five plugins are activated on the site: Advanced Custom Fields PRO, Akismet Anti-Spam, SiteGround Security, WP Rocket Pro and Yoast SEO.
Customers were already familiar and happy with Wordpress, so this system was maintained. Design was delivered in Figma. The English section has been expanded and unnecessary auxiliary plugins have been reduced to a minimum. All necessary functions are provided by the theme itself. However, there was a lot of technical debt, which is why I started from scratch. Only the existing contents were imported, then sorted into appropriate custom post types (previously all contents were unsorted in "pages"). A lot of restructuring was done and formerly independent routes were sorted into superior areas, where they are now accessible in an accordeon. To save the good SEO rankings as much as possible, all changed routes were stored as redirects in the htaccess.
Fundación Goethe is a non-profit foundation whose goal is to create socio-economic connections between Germany and Spain through culture. I created the design in Figma and then transferred it to my Eleventy starter. For most of the CSS I used Tailwind CSS, the functionality for menu and accordion comes from Alpine.js. The client wanted a colourful, modern and fast website, where they could present their artists, venues and patrons each on their own pages. In addition, the site needed to be bilingual. The two languages are located in separate folders with their own structure, links between the two languages work via a key in the frontmatter. The locales are referenced in the global data files. The most important element of the website are the events. These are highlighted if they are in the future or placed in the archive if they have already taken place. The archive is an accordion filtered by years and months, so that all past events can be selected quickly. I also took care of the search engine optimisation. The client and I can easily view the statistics via plausible.io. All elements, including Youtube videos, are incorporated in a data protection-compliant manner, which is why a cookie consent is not necessary.
As with most websites I've done, I was responsible for all components, from design to deployment. The website, created with the Jamstack method, had to represent the dynamism, strength and electricity of the singer-songwriter's new album. The shop was created with Snipcart. With Plausible.io the statistics can be viewed in compliance with the data protection law.
Technical books I've read and courses I've taken in the past years. I'll only mention what made a difference for me, the learning resources I really appreciate and recommend wholeheartedly.
book / 2019, Accessible UI patternsInclusive Components is all about accessible patterns like accordions, dropdowns, sliders and modals. I use Heydon Pickering redundant click solution for cards in literally every project.
book / 2022, CSSA book by two individuals that share a deep understanding of the web in general and CSS in particular. I love how it's written and how much it teaches me. It gets regular updates and provides access to invaluable code.
CSS for JS
course / 2021, CSSVery detailed, interactive and comprehensive course made by Josh Comeau. It's huge, 9 modules taking you from the fundamentals to very advanced tricks for next-level user experiences. I'm not done with it yet and it's a joy every time I get to continue to progress.
You Don't Know JS Yet: Get Started
Git for Humans
book / 2016, GitI understand Git (or at least I think I do) thanks to this book. It really let me understand how this complex system works, and it's nice and short.