Go and get a new browser

Work

I am passionate about building digital products. I specialise in UI/UX engineering, integrating front-end and back-end systems, and optimising performance and accessibility (a11y) with respect and responsibility. My expertise includes server-side rendering and framework-agnostic approaches, complemented by a background in DevOps, HTML5, CSS, ES6, and various CMS and frameworks, with a particular love for KirbyCMS. I utilise GIT for version control and follow Agile methodologies to ensure seamless collaboration and continuous improvement.
“You build it, you run it” — And I am committed to society. 𓁙

People and Companies

<p>Winner of 2024 DigAMus Award! Winner website or online exhibition 2024 | Website or online exhibition| Website or online exhibition shortlist 2024.<strong><br><br></strong>Even today, relatives of former prisoners contact the concentration camp memorials every day. You want to know whether there are any documents that could shed light on the fate of a family member. "Research Stories", a new digital platform for research stories, provides insights into the work of the memorial archives and shows step by step how these inquiries are answered.</p><p>The digitization of concentration camp documents has also changed the work of the memorial archives. Today, research is usually no longer carried out in the magazine rooms, but in various databases. Search queries can sometimes clarify the fate of prisoners that previously seemed unsolvable.</p><p>The Flossenbürg Concentration Camp Memorial began building a digital research platform on Nazi victims, the “Memorial Archives,” in 2012. The online accessible database shows at a glance all the documents and information available about a prisoner, which makes it easier to track, for example, prison routes. The “Memorial Archives” help the archive staff immensely in answering inquiries from relatives and researchers. Since 2020, there has also been a cooperation project with the Auschwitz-Birkenau State Museum to create a new database for the holdings of the Auschwitz concentration camp based on the “Memorial Archives”.</p><p>In order to show how the digitization of the archives helps to answer historical questions decades after the liberation of the camps, a project team from the two memorial sites has developed “Research Stories”. This is a digital platform for research stories. Using specific cases, employees of the Auschwitz Museum and the Flossenbürg Concentration Camp Memorial explain the sometimes detective methods they use every day to clarify the fates of prisoners. However, their descriptions also illustrate the fragmentary nature of possible findings, as many documents were destroyed by the SS when the camps were evacuated.</p><p>“Research Stories” allows people to participate in research and thus responds to the interest in many archive inquiries. Information has changed, not least because of online databases: anyone who contacts a memorial today has often already done their own research in advance. Scans of documents found online are therefore often attached to the requests. Relatives sometimes have a portrait of the person being sought or know something about the circumstances of the arrest. When you send photos, letters and personal documents to the memorial sites, you help to put a face to those who were persecuted and murdered.</p><p>The information available online has made research possible for everyone. However, those who do their own research often reach their limits. The databases of museums, archives and memorials are usually not fully accessible for data protection reasons. In order to understand found documents such as index cards, transport lists or personnel forms, special knowledge is also necessary. “Research Stories” therefore deals with topics that regularly recur in inquiries to memorial sites: How can the grave of a relative be found? Is it possible to find out how an inmate died? Why can I hardly find any documents? The website also provides advice for your own research and points to useful links and addresses.</p><p>“Research stories. Traces and Stories of Concentration Camp Inmates” is a digital offering from the Flossenbürg Concentration Camp Memorial and the Auschwitz-Birkenau State Museum in three languages: Polish, English and German. The website will gradually be expanded to include additional research stories.</p>

CSS
Docker
KirbyCMS
Laravel
MIX
Php8.1
tailwindCSS
vanillaJS
Webpack

KZ-Gedenkstätte Flossenbürg — Zoff 2024

<p>The frontend development for icl-rechtsanwaelte.de was a solo project led by UI/UX Designer Andres Lexa, incorporating modern web development technologies and methodologies to deliver a seamless and efficient user experience. This project utilized Atomic Design principles, enabling the creation of a modular and reusable component library, ensuring a cohesive and scalable UI across the website.</p><p>HTML5 was employed for structuring content, offering modern web capabilities and enhancing overall site performance. The site was built on Kirby4, a flexible and user-friendly content management system, which facilitated easy content updates and management. Vite served as the build tool, providing a fast and optimized development environment, while TailwindCSS was used for styling, ensuring a utility-first, responsive design system that streamlined the CSS development process.</p><p>The frontend architecture was enhanced with ES6, bringing modern JavaScript features and improved code maintainability. AlpineJS was used to add interactivity to the site with minimal overhead, offering a lightweight and reactive framework for handling UI interactions.</p><p>To ensure a consistent development environment and smooth deployment process, Docker was utilized. MailJet was integrated for email functionalities, providing reliable email delivery services.</p><p>Throughout the project, performance and efficiency were key focuses. Vite's hot module replacement and fast build times significantly improved the development workflow, while TailwindCSS and AlpineJS enabled rapid prototyping and iteration, allowing for quick implementation and testing of new features.</p><p>The final deliverables for icl-rechtsanwaelte.de included a fully functional, responsive, and visually appealing website. The use of Atomic Design ensured a consistent look and feel across all pages, and the modern tech stack provided a robust and maintainable codebase. Andres Lexa's solo efforts in UI/UX design and frontend development resulted in a user-centric website that effectively meets the needs of its audience.</p>

AlpineJS
Atomic Design
Docker
ES6
HTML5
Kirby4
mailJet
TailwindCSS
Vite

ICL — Andreas Lexa 2024

<p>From 1939 on, almost half the Jewish population of Berlin was forcibly rehoused. Jewish people were evicted from their homes and allocated rooms in apartments occupied by other Jewish tenants. Most of these forced homes were the occupants’ last place of residence before they were deported and murdered. This participative project looks at the history of these forced homes. </p><p>At least 791 buildings contained forced homes<br>The stories behind selected buildings tell of how people were allocated forced housing, the conditions under which the Jewish occupants lived, and what happened to the apartments and their contents after they were deported. **Key points of research** Discrimination against Jewish tenants began before 1939. Berlin housing associations stopped accommodating Jewish tenants as early as 1936. From 1939 on, almost half the Jewish population was forced to move into allocated housing. Jews who had previously lived on the outskirts of Berlin were concentrated in inner-city lodgings. The “Law on Tenancy with Jews” of April 30, 1939, provided the legal basis for forcing Jews to move into allocated housing. At least 791 buildings in Berlin contained apartments where Jews were forcibly housed. Although most of these buildings were in Jewish ownership, they did not have exclusively Jewish residents. The non-Jewish residents lived close enough to witness the plight and persecution of their Jewish neighbors. Various players – from property managers to tax officers – were involved in ousting Jewish tenants from their homes and forcibly concentrating them in other buildings. This process was part of the “Germania” project directed by General Building Inspector Albert Speer. Complete strangers were often forced to share accommodation. The duration of occupancies varied greatly, making life for Jewish tenants extremely unsettled and uncertain.<br><br>The project for Aktives Museum Berlin was an innovative web development endeavor led by Zoff Berlin. This project aimed to create an engaging and informative digital experience that effectively communicated the historical narrative through advanced web technologies and interactive storytelling.</p><p>Guided by Atomic Design principles, the project focused on creating a modular and reusable component library, ensuring a consistent and scalable user interface. The backend was built using Kirby3, a flexible and user-friendly content management system, which facilitated easy content updates and management. TailwindCSS was employed for styling, providing a utility-first, responsive design system that streamlined the CSS development process. Laravel Mix was used for compiling and optimizing assets, enhancing the performance and efficiency of the development workflow.</p><p>The frontend architecture was powered by ES6, bringing modern JavaScript features and improved code maintainability. AlpineJS was utilized to add interactivity with minimal overhead, offering a lightweight and reactive framework for handling UI interactions. Webpack was employed for module bundling and asset optimization, ensuring a seamless and efficient build process.</p><p>A standout feature of the Zwangsräume project was its innovative use of map-based storytelling. MapTiler, MapsLibre, MapsLibreGL, and MapBoxGL were integrated to create dynamic and interactive maps that enhanced the storytelling experience. GeoJSON was used to manage and display geographical data, while three.js was employed for advanced 3D visualizations. This combination of mapping technologies allowed for an immersive and engaging user experience, bringing historical events to life through interactive maps and visual storytelling.</p><p>The project also emphasized modern web standards, leveraging HTML5 for structuring web content and ensuring cross-browser compatibility. OpenGraph meta tags were integrated to improve social media sharing and SEO, enhancing the website's visibility and reach.</p><p>The use of Docker ensured a consistent development environment, streamlining the deployment process and minimizing the risk of configuration-related issues. This approach allowed for a robust and scalable infrastructure, supporting the project's complex requirements.</p><p>The final deliverable was a fully functional, responsive, and visually appealing website that effectively communicated the historical narrative through interactive maps and advanced storytelling techniques. The collaboration between developers, designers, and historians, coupled with the use of modern web technologies, resulted in a user-centric platform that meets the needs of its audience and showcases the historical significance of the Zwangsräume project.</p>

AlpineJS
Atomic Design
Docker
ES6
geoJSON
HTML5
KIRBY
Kirby3
Laraval
mapBoxGL
mapsLibre
mapsLibreGL
mapTiler
Mix
openGraph
storytelling
TailwindCSS
three.js
webpack

Zwangsräume — Zoff 2023

<p>The frontend development for TOWIO by Würth was a solo project led by UI/UX Designer Andreas Lexa, leveraging a range of modern web development technologies and methodologies to create a polished and user-friendly website. This project was driven by an agile approach, allowing for iterative development and continuous improvement throughout the process.</p><p>Central to the project was the implementation of Atomic Design principles, which facilitated the creation of a modular and reusable component library. This ensured consistency and scalability across the website's UI elements. HTML5 was used for structuring content, providing modern web capabilities and enhancing the overall performance of the site.</p><p>The backend was built using Kirby3, a flexible and user-friendly content management system, which allowed for easy content updates and management. The build process was powered by Laravel MIX, which, combined with Webpack, optimized the development workflow and asset compilation. TailwindCSS was employed for styling, offering a utility-first, responsive design system that streamlined the CSS development process.</p><p>The frontend development utilized vanillaJS for interactivity and functionality, ensuring a lightweight and efficient codebase. Docker was used to create a consistent development environment, ensuring that the deployment process was smooth and error-free.</p><p>The project emphasized performance and efficiency. Webpack's capabilities were leveraged to manage and bundle JavaScript modules, while Laravel MIX streamlined the process of compiling assets. TailwindCSS and vanillaJS enabled rapid prototyping and iteration, allowing for quick implementation and testing of new features.</p><p>The final deliverables for TOWIO included a fully functional, responsive, and visually appealing website. The use of Atomic Design principles ensured a consistent look and feel across all pages, while the modern tech stack provided a robust and maintainable codebase. Andreas Lexa's expertise in UI/UX design and frontend development resulted in a user-centric website that effectively meets the needs of its audience, showcasing Würth's offerings in a professional and engaging manner.</p>

agile
Atomic Design
CSS
Docker
HTML5
Kirby3
Laravel MIX
TailwindCSS
vanillaJS
webpack

towio — Andreas Lexa 2022

<p>Why De-Zentralbild? So far, pictures from the everyday life of former contract workers, international students or political emigrants in the GDR are widely unknown. Occasionally that even includes their own families, where the old photos gather dust in boxes and albums. They rarely make it into publications, museums or archives, despite the fact that they open up important perspectives on the history of migration to the GDR.</p><p>The Archive and Online Exhibition De-Zentralbild feature private photos of people, who have lived between 1957 and 1990 in the GDR. The pictures are linked with memories contained in those captured moments as well as with narratives about the life in East Germany. De-Zentralbild publishes and preserves photos that depict images of the migrants’ everyday life in the GDR, of private moments and situations, and represent them in the collective memory. Likewise, De-Zentralbild collects pictures and stories of people who voluntarily or involuntarily returned to their countries of origin. Their pictures and narratives also belong to Germany’s migration history.</p><p>DOMiD e. V. — Documentation Center and Museum on Migration in Germany — archives those photos and information on a permanent basis, for which the lenders have given their consent.</p>

agile
CSS
html
HTML5
node
npm
nvm
roots.io
SASS
TailwindCSS
vanillaJS
webpack
WordPress

De-Zentralbild (TBC) — Zoff 2022

<p>MØBELWERFT is a Hamburg-based carpentry firm specializing in creating high-quality, durable wooden products. Their 20-member team combines traditional craftsmanship with modern technology to produce timeless designs for kitchens, interior spaces, and custom furniture. They work with architects and designers to create inspiring residential, commercial, and retail spaces. MØBELWERFT emphasizes precision and sustainability, using materials like solid wood. They also offer a modular kitchen series called 'Serie Null Eins.'<br><br>onepager; front & backend engineering/ technical concept component based wordpress-theme based on roots.io sage 10</p>

ACF
ES6
sageIO
TailwindCSS
Wordpress

møbelwerft — Møbelwerft Hamburg 2021

<p>This freelance project for Tom Tailor B2B involved a comprehensive rebrush of their B2B Spryker webstore, focusing on enhancing both frontend design and user experience (UX). The project utilized TailwindCSS to revamp the site's styling, ensuring a modern, utility-first approach to CSS that streamlined the development process and improved visual consistency.</p><p>The primary objective was to elevate the overall look and feel of the B2B platform, making it more intuitive and engaging for users. By applying a fresh design and optimizing the user interface, the project aimed to enhance usability and align with contemporary design standards.</p>

Frontend
Spryker
TailwindCSS
UX

Tom Tailor B2B — Patrick and Friends 2021

front & backend engineering component based sage10 php CMS website.

ACF
Atomic Design
BEM
CSS
DevOps
es6
esLint
pipelines
PostCSS
purgeCSS
roots.io
sage10
SASS
Tailwind
ui
utility-first
vanillaJS
webpack
yarn
🧑🏽‍💻

altoba — W.A.F. GmbH 2021

<p>The website discusses the concept of being different and the challenges faced by those perceived as different in various contexts. It contrasts the acceptance of diversity in democratic societies with the harsh repression in authoritarian regimes, focusing on the Soviet Union. The narrative describes how dissenters in the Soviet Union were persecuted, isolated, and even killed for their differences. Despite this, many resisted, driven by a sense of human dignity and social responsibility. The special feature Being Different – Dissent in the Soviet Union by dekoder examines the history of resistance in the Soviet Union, highlighting the cultural and social efforts to challenge the authoritarian regime and the impact of these actions.<br><br>The frontend development for Dekoder was a collaborative solo project executed alongside Developer Daniel Marcus from Dekoder. The project was led by Zoff Berlin, with illustrations by Anna Che and animations by Philipp Yarin, supported by Victoria Spiryagina. This project utilized a range of modern web development technologies and methodologies to deliver a sophisticated and user-centric website.</p><p>Guided by agile methodologies, the project followed an iterative development process, allowing for continuous improvement and effective collaboration among the team. The implementation of Atomic Design principles was central to the project, facilitating the creation of a modular and reusable component library that ensured consistency and scalability across the website.</p><p>The tech stack included HTML5 for content structure, React for building dynamic user interfaces, and Gatsby as the framework to create a fast and optimized static site. TailwindCSS was employed for styling, providing a utility-first, responsive design system that streamlined the CSS development process. SASS was used as a CSS preprocessor to enhance styling capabilities.</p><p>The project also utilized Node.js, npm, and nvm to manage development dependencies and workflows efficiently. Webpack was employed for module bundling and asset optimization, while a styleguide ensured consistent design and implementation across all components.</p><p>API integration was a key aspect of the project, with RESTful APIs facilitating seamless data exchange between the frontend and backend. The use of components and a robust framework ensured that the website was maintainable and scalable.</p><p>The final deliverables for Dekoder included a fully functional, responsive, and visually appealing website. The collaboration between developers, designers, and animators, coupled with the use of modern web technologies, resulted in a user-centric platform that effectively meets the needs of its audience. The project showcases a commitment to high-quality digital craftsmanship, built with respect and responsibility.</p>

agile
API
Atomic Design
components
CSS
framework
gatsby
HTML5
node
npm
nvm
react
REST
SASS
styleguide
TailwindCSS
webpack

Dissidents — Zoff 2021