# Aufgabe Eine fertige website für jd-portfolio # Ziel Diese Website soll für mich mein aushängeschild werden. Diese Website würde ich in meiner Bewerbung erwähnen damit Recruiter sich diese angucken können. ## Aufbau ### Überschriften * `h1` – Hauptüberschrift der Website * `h2` – Hauptbereiche der Website * `h3` – Unterbereiche innerhalb eines Hauptbereichs Eine logische und semantisch sinnvolle Überschriftenhierarchie verwenden. ### Header Navigation, Logo, Links, Theme-Switch etc. Die Hauptwebsite ist https://jd-schuldt.de. Verweise auf "Home" führen immer dorthin. Gerne eine Top-Nav Bar Top-Navigation bleibt beim Scrollen am oberen Bildschirmrand sichtbar (sticky oder fixed). mit verlinkung auf: - Home -> https://jd-schuldt.de - GitHub - LinkedIn - Microsoft Learn - Funktionierender Dark-/Light-Mode-Switch Gerne eine Seiten nav-bar Desktop: schwebende vertikale Navigation links, die beim Scrollen sichtbar bleibt. Auf kleineren Displays sinnvoll reduzieren oder ausblenden. mit verlinkung auf: - Hero - Über mich - Skills & Technologien - Zertifikate & Nachweise - Projekte - Prompts ### Hero / Profilbereich Profilbild links. Rechts: "JD", eine kurze Beschreibung meines aktuellen IT-Lernwegs und mein Ziel des beruflichen Quereinstiegs in die IT. ### Hauptinhalt Gewünschte Sections / Articles und deren Reihenfolge 1. Über mich - Absätze von einander getrennt, natürlich und ehrlich. 2. Skills & Technologien - Einzelne kleine Kacheln für Skills und Technologien. 3. Zertifikate & Nachweise - Einzelne kleine Karten, die des Zertifikat/Badge beschreibt. - Name , kleine beschreibung was ich im Kurs gelernt habe. 4. Projekte - Einzelne kleine Karten, die dass Projekt beschreibt. - aufklickbar mit anschließender Kurzfassung: - Verwendete Technologien (z. B. HTML, CSS, JavaScript, Python) - Kennzeichnen, welche Teile selbst entwickelt und welche mit KI-Unterstützung erstellt wurden. - verlinkung zum GitHub Repo 5. Prompts - Einzelne kleine Karten, die den Prompt kurz beschreiben. - aufklickbar mit anschließender auflistung der aufrufbaren Datein. z.B: - website-prompt.md - index.html - style.css - ... - ... - Die aufgeführten Dateien als erkennbare Links darstellen und direkt aufrufbar machen. ### Footer Kontakt, Impressum sowie relevante externe Links. # Inhalte Bilder liegen unter \assets/images/`.Vorhandene Bilder verwenden und keine Bilddateien erfinden.` ## Über mich: Text: "Ich interessiere mich schon länger für IT und beschäftige mich inzwischen gezielt mit Programmierung, Webentwicklung und Systemen. Aktuell baue ich meine Grundlagen in HTML, CSS sowie Git und GitHub aus und setze das Gelernte direkt in eigenen Projekten wie diesem Portfolio um. Parallel beschäftige ich mich mit Python, Systemarchitektur, Datenbanken und grundlegenden Security-Themen. Dabei ist mir wichtig, nicht einfach fertige Lösungen zu übernehmen. Ich möchte verstehen, warum etwas funktioniert, Fehler selbst nachvollziehen können und meine Kenntnisse Schritt für Schritt praktisch ausbauen. Langfristig möchte ich meinen beruflichen Weg in die IT verlagern und mich technisch kontinuierlich weiterentwickeln." ## Skills Aktuell HTML5 Grundlagen - aktuelle projekte: jd-portfolio Aktuell CSS3 Grundlagen - aktuelle projekte: jd-portfolio Aktuell Git & GitHub Grundlagen - aktuelle projekte: jd-portfolio Aktuell Python Erste Erfahrungen PostgreSQL / Supabase Erste Erfahrungen - aktuelle projekte: Axiom Core Linux Erste Erfahrungen - aktuelle projekte: RaspberryPi zuhause ## Zertifikate & Nachweise PDF-Dateien liegen unter \assets/certificates/`.` In der Zertifikate-Section zusätzlich auf mein Microsoft-Learn-Profil verweisen. Bei einzelnen Zertifikaten/Badges ausschließlich die vorhandene PDF-Datei verlinken. microsoft-ai-prompting.pdf "Microsoft Applied Skills / AI Prompting Grundlagen des KI-gestützten Promptings mit Fokus auf die Erstellung klarer und zielgerichteter Eingaben. Vermittelt wurden grundlegende Prompting-Techniken, praktische Anwendungsbeispiele sowie der effektive Einsatz von KI-Tools." html-css-Anfänger-Zertifikat.pdf das is der Fertige kurs, er bestand aus 3 einzelnen Badges die ich auch alle habe. die kannst du gerne einfach eingerückt in den Anfänger mit einbauen. am besten wenn man drauf Klickt. "Website erstellen mit HTML & CSS (Anfänger) Grundlagen der Webentwicklung mit HTML und CSS. Behandelt wurden der strukturierte Aufbau von Webseiten, grundlegendes Styling, Barrierefreiheit sowie bewährte Methoden für eine saubere und benutzerfreundliche Webentwicklung." html-grundkenntnisse.pdf "Erste Website mit HTML erstellen Grundlagen und erste befehle in HTML ausgeführt. Eine kleine übungswebsite erstellt." css-grundlagen.pdf "Verwenden von CSS auf einer Website Grundlagen und erste befehle in CSS ausgeführt. Einbindung von .css Datein in HTML gelernt. Erste optische änderungen gemacht." barrierefreiheit-html.pdf "Grundlagen zur Barrierefreiheit in HTML Erste Grundlagen von WCAG standard gelernt, FONT und FARB arten, Lighthouse etc." ## Projekte JD Portfolio "Meine erste selbst entwickelte Portfolio-Website. Das Projekt dient dazu, meine Kenntnisse in HTML, CSS, Git und GitHub praktisch auszubauen." Axiom Core "Ein persönliches KI- und Automatisierungsprojekt zur Entwicklung eines modularen Assistenzsystems. Der Fokus liegt auf Systemarchitektur, APIs, Datenbanken, Automatisierung und der Anbindung verschiedener Dienste." ## Prompts Dateien eines Prompt-Artikels liegen unter \assets/prompts//`.` ## Wichtige Links: - Home(https://jd-schuldt.de) - Prompts(https://prompting.jd-schuldt.de) - GitHub(https://github.com/JayD-Labs) - LinkedIn(https://www.linkedin.com/in/justin-daniel-schuldt-23577b3b0/) - Microsoft Learn(https://learn.microsoft.com/de-de/users/justindanielschuldt-7930/achievements) # Funktionen / Interaktionen Buttons, Navigation, Dropdowns, Theme-Switch, Akkordeons etc. Interaktive Elemente müssen auch per Tastatur bedienbar sein. - Button zum Zurückscrollen an den Seitenanfang - Aufklappbare Inhalte als zugängliche Akkordeons umsetzen. Zustand über aria-expanded kenntlich machen. Bedienung per Maus und Tastatur ermöglichen. Keine wichtigen Inhalte ausschließlich über Hover zugänglich machen. # Design Dark Mode ist Standard. Der gewählte Modus soll per localStorage gespeichert werden und beim nächsten Besuch erhalten bleiben. * Halbtransparente Karten und Navigation mit `backdrop-filter` * Abgerundete Kanten und weiche Schatten * Dezente transparente Rahmen für einen Glas-Effekt * Grüner verschwommener Glow links oder hinter Karten / Elementen * Dunkler Hintergrund mit leichter Tiefenwirkung * Keine großen Lücken zwischen zusammengehörenden Elementen * Dezente Hover- und Übergangseffekte * Lesbarkeit und Kontrast haben Vorrang vor visuellen Effekten * Responsive für Desktop, Tablet und Smartphone * Einheitliche Abstände, Größen und Border-Radien * Klare visuelle Hierarchie # Technische Anforderungen * HTML5 * CSS3 * Semantisches HTML verwenden * Keine Frameworks, sofern nicht ausdrücklich verlangt * Vanilla JavaScript * Keine JavaScript-Frameworks oder externen Bibliotheken, sofern nicht ausdrücklich verlangt. * Vorhandene CSS-Variablen haben Vorrang vor neu definierten festen Farb-, Abstands- oder Radiuswerten. * Vor dem Styling zuerst `jd-design-tokens.css` analysieren. Farben, Abstände, Radien und andere vorhandene Variablen daraus übernehmen, statt neue Werte zu erfinden. * Keine bestehenden Design-Tokens unnötig überschreiben * Sinnvolle Klassen- und Elementnamen verwenden * Wiederverwendbare Bausteine sinnvoll strukturieren CSS-Bereiche, JavaScript übersichtlich kommentieren, zum Beispiel: ```css /* ========================= Header ========================= */ ``` ## Barrierefreiheit * Sinnvolle HTML-Semantik verwenden * Tastaturnavigation berücksichtigen * Sichtbare Fokuszustände * `aria-*` nur einsetzen, wenn semantisches HTML nicht ausreicht * Bilder mit sinnvollen `alt`-Attributen versehen * Farbkontraste berücksichtigen * Ausreichende Farbkontraste nach WCAG berücksichtigen. ## Responsive Verhalten Mobile-First umsetzen und anschließend für Tablet und Desktop erweitern. Layout soll sich an kleinere Bildschirmgrößen anpassen und keine horizontalen Scrollbars erzeugen. # Einschränkungen * Keine externen Frameworks oder Bibliotheken verwenden. * Keine Inline-Styles und kein Inline-JavaScript. * Keine Fähigkeiten, Zertifikate, Projekte oder persönlichen Angaben erfinden. * Nur vorhandene Bilder, PDFs, Links und Inhalte verwenden. * Wenn notwendige Informationen fehlen, einen sinnvollen Platzhalter verwenden und diesen eindeutig kennzeichnen. # Ausgabe Dateien getrennt voneinander ausgeben. Benötigte Dateien: * `index.html` * `style.css` * `script.js` Bestehende Projektdateien dürfen angepasst werden, wenn dies zur Umsetzung der beschriebenen Anforderungen notwendig ist. # Qualitätsprüfung Vor der Ausgabe prüfen: * HTML, CSS und JavaScript funktionieren zusammen. * Verwendete Klassen und IDs stimmen zwischen den Dateien überein. * Interne Links und Dateipfade sind korrekt. * Es gibt keine unnötigen oder ungenutzten Elemente. * Die Website erzeugt keine horizontalen Scrollbars. * Interaktive Elemente sind mit Maus und Tastatur bedienbar. * Die Browser-Konsole enthält keine offensichtlichen JavaScript-Fehler.