Origin Architecture Features Roadmap
● SYSTEM_ROOT BUILD v2.2.0

PORTFOLIOBACH

Kein Baukasten. Keine Templates.
100% Engineered.

Deep Dive

Chapter I: The Origin

Warum ich das Rad neu erfunden habe.

Motivation

Das "Black Box" Problem

Natürlich hätte ich WordPress oder Wix nehmen können...

Aber im Studium lerne ich Algorithmen...

mindset.sh

# Option A: The Easy Way (Rejected)

$ npm install wordpress-theme-starter

# Option B: The Engineering Way

yusef@home:~$ mkdir PortfolioBach
yusef@home:~$ touch index.html main.css renderer.js
[STATUS] Control acquired.
[STATUS] Bloatware removed.
[READY] Starting development...

Bundle Size Comparison

Standard Template ~5.0 MB
jQuery, Bootstrap, Fonts, Trackers, Ads
PortfolioBach ~50 KB
Pure HTML5, CSS3, Vanilla JS Logic
Performance

Bloatware vs. Handwerk

Fertige Templates laden oft Megabytes...

Der Student-Ansatz: ...

Transfer

Theorie trifft Praxis

In der Hochschule lernen wir Java und OOP...

Das Portfolio ist mein "Labor"...

Modelprojects-data.js
→
Controllerrenderer.js
→
Viewindex.html

Chapter II: The Architecture

Vom statischen HTML zur dynamischen Engine.

Evolution

Statisch vs. Dynamisch

Zu Beginn (v1.0) bestand dieses Portfolio...

Die Lösung (v2.2)...

  • Früher: Copy & Paste von Code-Blöcken.
  • Heute: Eine zentrale Daten-Quelle.

Struktur-Vergleich

📄
v1.0
index.html
about.html
contact.html
➝
⚙️
v2.2
renderer.js
+ data.json
Engineering

Die "Rendering Engine"

Ich wollte verstehen, wie moderne Frameworks...

Das System basiert auf...

  • Data Layer:...
  • Logic Layer:...
  • View Layer:...

Das ermöglicht mir...

project-renderer.js
01// Core Function: Renders projects into the DOM 02function initProjectRender() { 03 const container = document.getElementById("hero-container"); 04 05 // Filter current hero project from data 06 const heroItem = projectsData.find(p => p.id === HERO_ID); 07 08 if (container && heroItem) { 09 container.innerHTML = renderTemplate(heroItem); 10 } 11}

Logic-Layer Snippet

Chapter III: Invisible Tech

Features, die man fühlt, aber nicht sieht.

State Management

Async i18n Engine

Statt 500KB Libraries, dynamisches fetch() in Vanilla TypeScript.

  • Attribute Mapping:...
  • Persistence:...
  • Fade-Transition:...
lang/de.json (Async Chunk)
{ "meta_c3_css_text": "Die Sprache bleibt dank localStorage..." }, "meta_c3_li_2": "Persistence..." } };

Logic Pipeline Visualization

if (heroItem) return renderHero(heroItem);
img/logo.png
→
Detect Path
→
../img/logo.png
Dynamic Rendering

Smart DOM Injection

Die project-renderer.js agiert wie...

Ein besonderes Highlight...

Performance First

Ein Portfolio muss schnell sein...

100
Performance
100
Accessibility
100
Best Practices
100
SEO
Observer Pattern

Ressourcen-Effizienz

Scroll-Events feuern hunderte Male...

STATUS: IDLE
Triggered only when
visible in Viewport

⬆️ Live Demo...

Architecture

Modern CSS & GPU

CSS ist mehr als nur Farbe...

GPU

Hardware Acceleration

.element {
  transform: translate3d(0,0,0);
  will-change: transform;
}

Chapter IV: DevOps & Workflow

Code ist nur so gut wie der Prozess dahinter.

Git History (Main)

8a2b4frefactor: reorganize assets (DDD structure)
3c9d1efeat: impl dynamic renderer & i18n engine
b7a89cfix: mobile nav z-index conflict
1f0e2dmerge: branch 'dev/v2.2' -> 'main'v2.2.0
Version Control

Clean Commits

Ein Portfolio wächst organisch...

  • Semantic Commits:...
  • Branching:...
  • Safety:...
Structure

Domain Driven Design

Anfangs lagen alle Bilder...

Im Zuge des Refactorings...

📂 images/ ├── 📂 ui/ // Logos, Profile ├── 📂 techstack/ // SVG Icons └── 📂 projects/     ├── 📂 phishing/     └── 📂 cv-engine/

Refactored File Structure

Chapter V: Infrastructure

Der Weg zur eigenen Identität (yusefbach.de).

DNS Routing

Vom Hobby zum Pro

Anfangs lief die Seite...

Die Herausforderung...

DNS Zone FileTTL: 3600
TYPEHOSTPRIOVALUE
A@0185.199.108.153
A@0185.199.109.153
A@0185.199.110.153
CNAMEwww0yusef03.github.io

GitHub Pages DNS Configuration

The "Persistence Issue"

Ein klassischer Fallstrick...

⚠️
Das Problem
Ich hatte die Domain...
✅
Der Fix: CNAME File
Die Lösung ist...

Chapter VI: The AI Brain

A Zero-Dependency RAG Chat-Twin.

Architecture

Python Serverless

Die Google Gemini API läuft als isolierter Microservice auf Vercel (FastAPI).

System Context Injection

Eine markdown-basierte Datenbank ('yusef_brain.md') orchestriert das LLM.

Vanilla Bot UI

Das Frontend kommuniziert asynchron via privater Fetch-Pipeline.

Context Safety

CORS Header und Strict Model-Directives verhindern Missbrauch.

RAG_PIPELINE.flow

User
(Glassmorphism)
⚙️ Vercel Serverless
Failover Array
yusef_brain
(Context JSON)
Gemini API

Chapter VII: Future Roadmap

Code is never finished. The journey continues.

Die aktuelle Roadmap des Portfolios — was als Nächstes kommt und was bereits geliefert wurde.

🗺️ Zur Roadmap & Changelog →

Ready for
Production

Dieses Portfolio ist der Beweis...

Lass uns arbeiten Zur Startseite