KaraMatrix · KI & Automatisierung KaraMatrix · AI & Automation

Karam Ababneh. Karam Ababneh.

Softwareentwickler (Medieninformatik) mit Fokus auf KI-Integration und Automatisierung. Ich baue Web-Anwendungen, verbinde sie mit KI-Workflows und automatisiere, was repetitiv ist. Software developer (Media Informatics) focused on AI integration and automation. I build web applications, wire them into AI workflows, and automate what should not be manual.

Offen für Zusammenarbeit Open for collaboration Projekte ansehen View my work

Kooperationen & Projekte Collaborations & Clients

Schwerpunkte Focus Areas

Von der statischen Seite bis zur KI-Integration — die Themen, mit denen ich arbeite und die ich vertiefe. From static sites to AI integrations — the areas I work in and keep deepening.

Webentwicklung Web Development

Schnelle, barrierefreie und DSGVO-konforme Websites — von der Landingpage bis zur mehrseitigen Unternehmensseite. Vanilla HTML/CSS/JS, kein Framework-Overhead. Fast, accessible and GDPR-compliant websites — from landing pages to multi-page corporate sites. Vanilla HTML/CSS/JS, no framework overhead.

Softwareentwicklung Software Development

Web-Applikationen mit klarer Architektur — Datenbanken, APIs, Supabase-Backend, TanStack-Frontend. Fokus auf wartbaren, strukturierten Code. Web applications with clean architecture — databases, APIs, Supabase backend, TanStack frontend. Focus on maintainable, structured code.

KI-Integration AI Integration

Einbindung von LLMs (Claude, GPT) in bestehende Anwendungen — Berichts-Generierung, Datenextraktion, KI-gestützte Workflows mit Prompt-Engineering und Caching. Integrating LLMs (Claude, GPT) into existing applications — report generation, data extraction, AI-powered workflows with prompt engineering and caching.

Automatisierung Automation

Repetitive Prozesse automatisieren — Web-Scraping, Daten-Pipelines, Zapier-Ablösung durch eigene Lösungen, Schnittstellen zwischen Tools und Systemen. Automating repetitive processes — web scraping, data pipelines, replacing no-code tools with custom solutions, connecting systems via APIs.

Ausgewählte Projekte Selected Projects

Live-Kundenprojekte, Prototypen und Eigenentwicklungen. Weiterer Code auf github.com/karam-ababneh. Live client projects, prototypes and personal builds. More code at github.com/karam-ababneh.

allfix-service.de

ALLFIX Reinigungsservice Live

Overview: Live-Kundenprojekt mit eigener Domain. Statische, schnelle und DSGVO-konforme Website für einen Berliner Reinigungs- und Hausmeisterservice. Live client project with custom domain. Static, fast and GDPR-compliant website for a Berlin cleaning and facility service. Technologies:HTML, CSS, JavaScript, Cloudflare Pages. Outcome: Eigene Domain mit SSL und Google-Workspace-Mail; vollständig live im Einsatz. Custom domain with SSL and Google Workspace mail; fully live in production.

Web Design UI/UX Cloudflare Pages Live

Live ansehen View Live Site

cine-videoproduktion.de

Cine Videoproduktion Live

Overview: Live-Kundenprojekt mit eigener Domain. Responsive Unternehmenswebseite für eine Berliner Filmagentur. Live client project with custom domain. Responsive corporate website for a Berlin film agency. Technologies:HTML, CSS, SCSS, JavaScript. Outcome: Auslieferung einer strukturierten Seite mit optimierter UI für zuverlässige Kundenanfragen. Delivered a clean, structured site with an optimized UI that reliably handles client inquiries.

Web Design UI/UX SCSS Live

Live ansehen View Live Site

Weitere Projekte & Demos More Projects & Demos

Fitness UI

Personal Trainer Platform

Overview: Ein Frontend-Prototyp zur Buchung und Präsentation von Fitness-Dienstleistungen. A frontend prototype designed for booking and presenting fitness services. Technologies:HTML, CSS, JavaScript. Outcome: Demonstriert responsives Komponenten-Design und saubere UI-Architektur. Demonstrates responsive component design and clean UI architecture.

Frontend Component Design Prototype

Prototyp ansehen View Prototype

Coaching

Psychologische Beratung Psychological Counseling

Overview: Ein interaktives UI-Konzept für ein psychologisches Beratungsportal. An interactive UI concept for a psychological counseling portal. Technologies:HTML, SCSS, JavaScript. Outcome: Fokus auf professionelle Ästhetik, strukturiertes Layout und zielgerichtete Navigation. Focuses on professional aesthetics, structured layout, and targeted navigation.

Web Architecture Styling Prototype

Prototyp ansehen View Prototype

E-Learning

AI Literacy E-Learning

Overview: Eine Serie interaktiver Web-Präsentationen zur Vermittlung von KI-Grundlagen. A series of interactive web presentations teaching AI fundamentals. Technologies:HTML, CSS, JavaScript. Outcome: Verbindet Medientheorie aus dem Studium mit praktischer Frontend-Umsetzung. Combines media theory from my studies with practical frontend execution.

Education Interactive UI Concept

Modul ansehen View Module

Resume UI

Dynamic CV Tool

Overview: Ein Frontend-Prototyp zur dynamischen Erstellung und Formatierung von Lebensläufen. A frontend prototype for dynamic resume creation and formatting. Technologies:HTML, CSS, JavaScript. Outcome: Fokus auf komplexe Formularverarbeitung und DOM-Aktualisierung in Echtzeit. Focuses on complex form handling and real-time DOM manipulation.

Frontend DOM Tooling

Prototyp ansehen View Prototype

Creator UI

IG Content Creator

Overview: Ein UI-Prototyp zur Erstellung von Social-Media Inhalten mit API-Anbindungsmöglichkeit. A tool prototype for creating social media content, designed for API integration. Technologies:HTML, CSS, JavaScript. Outcome: Demonstriert die Architektur für datengetriebene Interfaces und asynchrone Datenverarbeitung. Demonstrates the architecture of data-driven interfaces and asynchronous preparations.

UI/UX Tooling API Ready

Prototyp ansehen View Prototype

Technische Skills Technical Skills

Eine ehrliche Übersicht meiner aktuellen Fähigkeiten und aktiven Lernbereiche. An honest overview of my current capabilities and areas where I am actively expanding my knowledge.

Core Skills

Fundiertes Wissen für den Aufbau responsiver Interfaces. Technologies I use confidently to build responsive interfaces.

HTML5 CSS3 SCSS / SASS Responsive Design UI / UX Fundamentals Accessibility Awareness

Erweiterte Kenntnisse Working Knowledge & Expanding

Konzepte und Werkzeuge zum Aufbau eines breiteren Projektverständnisses. Concepts and tools I am learning to build broader project understanding.

Java (Basic) JavaScript (Basic) Python (Basic) Software Engineering (Basic) Clean Project Structure AI-Assisted Workflows

KI-gestützte Entwicklung AI-Assisted Development

Ich nutze KI-Workflows, nicht um Entwicklungskompetenz zu ersetzen, sondern um Problemlösungen und Lernen zu beschleunigen. I actively experiment with AI-assisted workflows. The goal is not replacing development skills, but accelerating problem-solving and learning.

Prompt Engineering

Focus: Präzise Kontextgestaltung für LLMs. Crafting precise context and instructions for LLMs. Benefit: Beschleunigt Boilerplate-Aufbau und löst komplexe logische Hürden. Speeds up boilerplate generation and helps break down complex logical hurdles.

Architecture Planning

Focus: KI zur Validierung struktureller Konzepte. Using AI to validate structural concepts. Benefit: Dient als Sparringspartner zur Evaluierung technischer Ansätze. Provides a sounding board to evaluate different technical approaches before coding.

Debugging Assistance

Focus: Analyse von Fehler-Logs und Edge Cases. Analyzing error logs and understanding edge cases. Benefit: Reduziert Frustration im Entwicklungsprozess und beschleunigt das Lernen. Significantly reduces friction during development and accelerates the learning curve.

Entwicklungsprinzipien Development Principles

Kernwerte, die meine Arbeit leiten und wartbaren Code gewährleisten. Core guidelines I follow to ensure my code is reliable, readable, and easy to maintain.

Clean Code

Approach: Schreiben von gut strukturiertem und dokumentiertem Code. Writing code that is well-structured and properly documented. Benefit: Stellt sicher, dass Projekte verständlich und teamfreundlich bleiben. Ensures that projects remain understandable and team-friendly over time.

User-Centric

Approach: Priorisierung intuitiver Navigation und Barrierefreiheit. Prioritizing intuitive navigation and web accessibility standards. Benefit: Schafft inklusive Erlebnisse auf verschiedenen Endgeräten. Creates inclusive experiences that work reliably across different devices.

Pragmatism

Approach: Einsatz nativer Web-Technologien statt schwerer Frameworks. Choosing native web technologies over heavy frameworks when appropriate. Benefit: Hält die Codebasis leichtgewichtig und reduziert Komplexität. Keeps the codebase lightweight and reduces technical complexity.

Warum eine Zusammenarbeit? Why work with me?

Was Sie bei einer Integration in Ihr Team erwarten können. What you can expect when collaborating on a project or integrating me into your team.

Strukturierte Denkweise Structured Thinking Ich zerlege komplexe Anforderungen in logische, umsetzbare Schritte. I break down complex requirements into logical, actionable steps before writing code.
Zuverlässige Kommunikation Reliable Communication Ich schätze Transparenz, stelle Fragen und dokumentiere den Fortschritt. I value transparency, ask the right questions, and document my progress clearly.
Schnelle Auffassungsgabe Fast Learner Als Student ist Lernen meine Kernkompetenz. Ich begreife neue Konzepte schnell und integriere mich nahtlos. As a student, my primary skill is learning. I quickly grasp new concepts and integrate smoothly into existing workflows.

Technische Fokusbereiche Technical Focus Areas

Bereiche der Webentwicklung, die ich studiere und praktisch anwende. Areas of web development I continuously study and apply to my practical work.

Web Architecture

Focus: Kommunikation zwischen Client, Server und APIs. Understanding how client, server, and APIs communicate. Goal: Solides Modell für zukünftige Fullstack-Integrationen. Building a reliable mental model for future full-stack integration.

Performance

Focus: Semantisches HTML und effizientes CSS. Writing semantic HTML and efficient CSS. Goal: Schnelle Ladezeiten ohne unnötige Abhängigkeiten. Ensuring fast load times without relying on unnecessary dependencies.

Accessibility

Focus: Semantische Tags und ARIA-Attribute. Applying semantic tags and ARIA attributes correctly. Goal: Inklusive und nutzbare Web-Interfaces für alle. Making web interfaces usable and inclusive for everyone.

Maintainability

Focus: DRY-Prinzipien und modulares Styling. Following DRY principles and modular styling. Goal: Skalierbarkeit von Stylesheets und Projektlogik. Keeping stylesheets and project logic scalable.

Welche Art der Zusammenarbeit suchen Sie? What kind of collaboration are you looking for?

Was ist der Hauptfokus der Rolle/des Projekts? What is the main focus of the role or project?

Wie sieht Ihre Zeitplanung aus? What is your timeline?

Danke für die Details. Thank you for the details.

Ich freue mich darauf, einen echten Mehrwert für Ihr Team zu leisten. I am eager to learn and contribute to a professional team. Let's connect!

Nachricht senden Send message

Kontakt aufnehmen Get in Touch

Interesse an einer Zusammenarbeit? Ich freue mich auf Ihre Nachricht. Interested in working together or discussing a project? Feel free to reach out.

karam.a3@hotmail.com GitHub @karamatrix