Medieninformatik-Student & Frontend Entwickler Media Informatics Student & Frontend Developer

Strukturierte Logik.
Saubere Interfaces. Structured Logic.
Clean Interfaces.

Ich entwickle nutzerorientierte Web-Interfaces und strukturierte Projekte mit modernen Frontend-Technologien. Aktuell erweitere ich meinen Stack mit Fokus auf HTML, CSS-Architektur und UI/UX-Prinzipien. I build clean, user-oriented web interfaces and structured web projects using modern frontend technologies. Currently expanding my stack while focusing on strong foundations in HTML, CSS architecture, and UI/UX thinking.

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

Kooperationen & Projekte Collaborations & Clients

Meine Arbeitsweise My Approach

Fokus auf saubere, strukturierte und nutzerfreundliche Web-Erlebnisse bei gleichzeitig schneller Lernkurve. I focus on building clean, structured, and user-friendly web experiences while learning rapidly.

UI/UX & Frontend

Meine Kernkompetenz liegt in modernen Frontend-Technologien. Ich übersetze Konzepte in funktionale und barrierefreie Interfaces. My core strengths are modern frontend technologies and UI/UX-oriented development. I enjoy translating ideas into functional and accessible interfaces.

Strukturiertes Engineering Structured Engineering

Ich lege Wert auf klare Projektstrukturen und wartbaren Code. Dabei wende ich Software-Engineering-Konzepte aus dem Studium an. I value clear project structures and maintainable code. I apply software engineering concepts from my studies to build reliable web projects.

Kontinuierliches Lernen Continuous Learning

Neben der Frontend-Entwicklung erweitere ich mein Wissen in JavaScript-Ökosystemen, Java und Python. Alongside frontend development, I actively expand my knowledge in JavaScript ecosystems, Java, and Python.

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 Basics 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.

Ausgewählte Projekte Selected Projects

Praktische Beispiele, Prototypen und Lehrmodule, die meine Fähigkeit zur Frontend-Entwicklung zeigen. Practical examples, prototypes, and educational modules demonstrating my frontend capabilities.

Production

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 Cloudflare Pages Live Project
Live ansehen View Live Site
ALLFIX

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.
Frontend Cloudflare Pages Live Project
Live ansehen View Live
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

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 WhatsApp @karamatrix

Impressum

Angaben gemäß § 5 DDG (ehemals TMG):

Karam Ababneh
Tile-Brügge-Weg 62
13509 Berlin

Kontakt

Telefon: +49 176 72559394
E-Mail: karam.a3@hotmail.com

Verantwortlich für den Inhalt nach § 55 Abs. 2 RStV:
Karam Ababneh (Anschrift wie oben)

Datenschutzerklärung

1. Datenschutz auf einen Blick

Allgemeine Hinweise
Die folgenden Hinweise geben einen einfachen Überblick darüber, was mit Ihren personenbezogenen Daten passiert, wenn Sie diese Website besuchen.

Datenerfassung auf dieser Website
Die Datenverarbeitung auf dieser Website erfolgt durch den Websitebetreiber. Dessen Kontaktdaten können Sie dem Impressum entnehmen. Wir nutzen keine Analyse-Tools, kein Tracking und keine externen Web Fonts (wie Google Fonts), um Ihre Privatsphäre maximal zu schützen.

2. Hosting

Diese Website wird extern gehostet. Personenbezogene Daten, die auf dieser Website erfasst werden, werden auf den Servern des Hosters gespeichert. Hierbei kann es sich v. a. um IP-Adressen, Meta- und Kommunikationsdaten handeln.

3. Cookies & Lokaler Speicher

Diese Seite verzichtet vollständig auf Tracking-Cookies. Wir nutzen lediglich den lokalen Speicher Ihres Browsers (`localStorage`), um Ihre Präferenz für das helle oder dunkle Design (Dark/Light Mode) sowie die Sprache zu speichern. Dieser Vorgang ist technisch notwendig, um die Funktion bereitzustellen und erfordert nach geltendem Recht keine aktive Einwilligung (Cookie-Banner).

4. Externe Links (Social Media / Messenger)

Unsere Website enthält Links zu externen Diensten (z.B. Instagram, WhatsApp). Wenn Sie diese Links anklicken, verlassen Sie unsere Seite. Die Datenverarbeitung auf den Zielseiten entzieht sich unserer Kontrolle und unterliegt den Datenschutzbestimmungen der jeweiligen Anbieter.