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.
After reaching my limits with static websites, I discovered Wordpress. Theme platforms like Themeforest didn't exist yet, so I messed around with the default theme until I liked the way it looked. Next, I played around with PHP to broaden the possibilities. For a long time I didn't have the confidence to learn Javascript properly. A few years ago, I started studying it after all. Now I really enjoy experimenting with Javascript.
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.
Me in my (home)office
I enjoy building sites with vanilla Javascript and the possibilities of modern CSS.
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.
Tools
These are the tools I work with or have worked with in the past. Bold indicates higher preference/proficiency.
Languages
Semantic HTML
CSS
Javascript ES6, Node.js
SVG
PHP (within the scope of WP)
Python (automation scripts)
CSS & JS-Frameworks
Tailwind CSS
Alpine.js
Svelte
React
Bootstrap
jQuery
SSG/SSR/Metaframework
Eleventy
Astro
SvelteKit
Next.js
API
REST
GraphQL
CMS
Wordpress
Netlify CMS
Strapi
Sanity
Shopify
Templating Languages
Markdown
Nunjucks
Liquid
Twig
Blade
Pug
Bundler / Build tools
vite
esbuild
snowpack
webpack
CSS & JS preprocessors
PostCSS
Typescript
Sass
Version Control, Hosts
Git/GitHub
Netlify
Siteground
Vercel
Design
Figma
Photoshop
InDesign
Premiere
After Effects
SEO / Monitoring
Plausible.io
ahrefs
Google Search Console
Google Analytics
Code editors / Terminal
VSCode
Notepad++
Hyper
Recent Projects
Expand to see the details of some of my recent client projects.
reder162012.org
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.
Javascript Cookbook
book / 2021, JavascriptBy far my favourite Javascript book and the one I recommend to anyone with basic knowledge. At no point did I have the feeling of being left behind, the code examples are simple and true to life and wonderfully comprehensible. There's but one foo-bar-baz example (and I think it got in there by accident), which I really appreciate. The book even shows a sense of humour. I really enjoyed reading it and I always have it near me to look something up.
Inclusive Components
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.
Every Layout
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
book / 2020, JavascriptAnother Javascript book that I enjoyed very much. Kyle Simpson is renowned for his consistent affection for classic Javascript elements like var and the equality operator, but if you know a bit about the different opinions (which overwhelmingly disagree with him) it's almost refreshing. Apart from that, he explains the basic workings of Javascript with comprehensible code examples. The book was crucial for me to understand concepts like closure, prototypes and scope.
learnjavascript.online
course / 2021, JavascriptThis course comes with an interactive environment. Short lessons are directly followed by challenges, inspired by real-world projects. Exercising anywhere is a joy thanks to a separate flashcards app. It's all about practice!
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.
