Portfolio Architecture

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

Custom i18n Engine

Statt 500KB für eine Library...

Attribute Mapping:...
Persistence:...
Fade-Transition:...

translations.js

const translations = { "de": { meta_c3_css_text:: "Die Sprache bleibt dank localStorage beim Reload erhalten." }, "en": { meta_c3_li_2:: "The language remains thanks to localStorage on reload" } };

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: Future Roadmap

Code is never finished. The journey continues.

Current Status (v2.2)

Architecture Shift

Migration...

Milestone 1 (Q1 2026)

UX & Accessibility

Einführung...

Milestone 2

Headless CMS

Ablösung...

Long Term Vision

Own Framework