Go and get a new browser

Work

I am passionate about building digital products. I specialize in UI/UX coding, integrating front-end and back-end systems, and optimising performance and accessibility (a11y) with respect and responsibility.
My expertise includes framework-agnostic approaches, complemented by a background in DevOps, HTML5, CSS, ES6, and various CMS, with a particular love for KirbyCMS.
I believe in the power of simple web standards with some progressive enhancements. I utilize GIT for version control and follow Agile methodologies to ensure collaboration and continuous improvement. “You build it, you run it” — I am committed to society. 𓁙

People and Companies

<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

<p>The website RS LXMBRG by the Rosa-Luxemburg-Stiftung commemorates Rosa Luxemburg's 150th birthday. It features her ideas on capitalism, socialism, and revolution. Luxemburg critiqued capitalist exploitation, supported combining reform and revolution, and emphasized freedom and democracy in socialism. The site includes essays, historical analyses, and multimedia content about her legacy and relevance to contemporary issues like climate activism and economic inequality.<br><br>front & backend engineering/ technical concept of a web compilation for rosa luxemburg stiftung berlin. multi-lingual wordpress-theme based on roots.io sage 10</p>

Atomic Design
BEM
CSS
HTML5
living styleguide
node
npm
nvm
REST
restfull
roots.io
SASS
Softwareentwicklung
TailwindCSS
vanillaJS
webpack
WordPress

RS LXMBRG — Zoff 2021

agile
CSS
HTML5
jQuery
SASS
scrum
Softwareentwicklung

DEPT/ C&A — deptagency 2020

<p>LILA Management is a creative agency representing photographers and artists. The website showcases recent projects, including collaborations with Vogue, Marie Claire, and L'Officiel. It highlights the work of photographers such as Mario Schmolka, Valentin Jeck, and Pulmanns, featuring fashion editorials, beauty shoots, and conceptual art. The site provides contact information and links to their social media.<br><br>front & backend engineering for lila management 📸</p>

es6
esLint
Kirby3
php
PostCSS
purgeCSS
TailwindCSS
webpack

Lila Management/ W.A.F. gmbh — W.A.F. GmbH 2020

More than 23.000 people lost their life in the Central Mediterranean Sea since 2014. It remains one of the world’s deadliest borders.

The crew of the Iuventa was conducting Search and Rescue operations during 2016 and 2017, until the ship was confiscated by Italian authorities on 2nd August 2017. Part of the crew, along with other NGOs, has been under investigation for aiding and abetting illegal migration. For 6 out of 10 defendants, the case was closed in March 2021. Against the remaining four crew members, the proceedings were opened.

The first preliminary hearing had taken place on the 21th May 2022 in Trapani. Over a number of hearings and over a course of months, the judge will decide whether the trial is continued or dismissed.

Atomic Design
BEM
CSS
CSS framework
gitHub
GraphQL
gridsome
Jamstack
Markdown
PRPL
PWA
SASS
staticSite
Tailwind
UI Developper
utility-first
vue
vue.js

iuventa 10 | Solidarity at Sea — Zoff 2020

<p>The Brinckmann & Lange website has been successfully developed using a component-based system powered by Fractal.js. This project aimed to create a modern, scalable, and maintainable frontend architecture. By employing a component-based approach, we were able to build a comprehensive library of reusable UI components, ensuring they are modular, self-contained, and in line with Brinckmann & Lange's design guidelines.</p><p>Fractal.js was integrated to manage and document these UI components effectively. This integration has facilitated a well-documented, easy-to-use, and reusable component library. The entire website has been designed with responsiveness in mind, ensuring accessibility and functionality across various devices and screen sizes.</p><p>To maintain design consistency throughout the site, we adhered to a unified style guide. This, combined with a clean, well-documented codebase, ensures the site's maintainability. Frontend performance was optimized to guarantee fast load times and smooth interactions, with techniques such as lazy loading and code splitting implemented where applicable.</p><p>The project utilized technologies such as React.js for building the component-based architecture, SCSS for modular styles, Webpack for module bundling, and Babel for browser compatibility. Testing frameworks like Jest ensured the quality and reliability of the code.</p><p>The final deliverables include a fully functional, component-based frontend for the Brinckmann & Lange website, a well-documented component library using Fractal.js, a responsive and accessible design, a maintainable and scalable codebase, and performance-optimized pages. This project, completed over several months, involved frontend developers, UI/UX designers, QA engineers, and a project manager, all contributing to the successful delivery of a modern, user-friendly, and efficient website.</p>

atlassian
Atomic Design
BEM
Bootstrap
code reviews
CSS
Fractal.js
html
https://fractal.build
preprocessor
SASS
UI Developper

brinckmann & lange | CHRIST GMBH - WEB-UI 💍 — BEJOND Germany GmbH 2019

<p>At Sinner Schrader Hamburg, the frontend development for comdirect.de was successfully completed, incorporating modern web technologies and development practices. The project revolved around a comprehensive rebrush of the website, utilizing an agile methodology to ensure iterative progress and continuous improvement. Central to the development process was the adoption of Atomic Design principles, which facilitated the creation of a robust, modular, and reusable component library.</p><p>The development team employed a living styleguide to maintain design consistency across the site, leveraging tools such as Sketch.app for design and Bitbucket Server for version control. The tech stack included a blend of modern and proven technologies: ES6 for modern JavaScript, handlebars for templating, and Java for backend integration. The use of Node.js, npm, and nvm streamlined development workflows, while SASS and LESS were utilized as CSS preprocessors to enhance styling capabilities.</p><p>Version control and collaboration were managed through GitHub and Stash, with rigorous code reviews and commit hooks in place to ensure code quality. The team utilized Atlassian tools, including Jira for project management and Confluence for documentation. The development environment was further supported by Citrix for remote access and Charles.app for debugging.</p><p>The frontend architecture followed BEM methodology to ensure maintainable and scalable CSS. The use of vanillaJS and jQuery allowed for flexible and dynamic user interactions. The team also incorporated various modules and preprocessors to optimize the development process, while CSS Comb was used to enforce consistent CSS formatting.</p><p>UI Developers played a crucial role in translating designs into functional interfaces, with a strong emphasis on creating a responsive and accessible user experience. The integration of HTML5 and JSON facilitated modern web functionalities and data handling.</p><p>Throughout the project, the agile Scrum framework was employed to manage sprints and track progress. This approach, combined with continuous integration and deployment practices, ensured that the project was delivered on time and met all quality standards.</p><p>The final deliverables include a fully revamped frontend for comdirect.de, characterized by a cohesive design system, a living styleguide, and a maintainable codebase. This project, completed through the collaborative efforts of frontend developers, UI designers, and project managers, exemplifies the application of cutting-edge web development practices to deliver a modern, user-centric web experience.</p>

SinnerSchrader Hamburg — SinnerSchrader 2019