seperator

About me

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.

Lene in front of her desk, smiling
  for the foto in a blazer she wouldn't normally wear

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.

Technologies

  • Wordpress with ACF
  • Tailwind CSS
  • Custom minimal vanilla JS

Visit website

www.reder162012.org

kanzlei-koenigstrasse.de

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.

Technologies

  • Wordpress with ACF, Gravity Forms, WPML
  • Tailwind CSS
  • Custom minimal vanilla JS

Visit website

www.kanzlei-koenigstrasse.de

fundaciongoethe.org

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.

Technologies

  • Eleventy
  • Tailwind CSS
  • Alpine.js

Visit website

www.fundaciongoethe.org

albertoballesteros.com

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.

Technologies

  • Eleventy
  • Tailwind CSS
  • Alpine.js
  • Snipcart

Visit website

www.albertoballesteros.com

Favorite learning resources

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.