PORTFOLIOBACH
No Builders. No Templates.
100% Engineered.
Chapter I: The Origin
Why I reinvented the wheel.
The "Black Box" Problem
Of course, I could have used WordPress or Wix. That takes 2 hours and looks good.
But in my studies, I learn algorithms, data structures, and how computers 'think'. Using a builder feels like cheating. It's a 'Black Box' – I throw content in, and a website comes out, but I have no idea why.
The Goal: I wanted to own the code. I wanted to press Inspect Element in the browser and understand every single class because I wrote it myself.
# Option A: The Easy Way (Rejected)
# Option B: The Engineering Way
[STATUS] Bloatware removed.
[READY] Starting development...
Bundle Size Comparison
Bloatware vs. Craftsmanship
Finished templates often load megabytes of JavaScript libraries (jQuery, Bootstrap, countless plugins) just to display a bit of text. That is wasteful.
The Student Approach: I set myself a challenge: Zero Dependencies. No Bootstrap, no React, no Tailwind. Only native HTML5, CSS3, and Vanilla JS.
Through this, I learned how CSS Grid really works instead of just writing col-md-6. The result? A page that loads in milliseconds (Lighthouse 100).
Theory meets Practice
At university, we learn Java and OOP (Object Oriented Programming). Many students ask: 'Do I need this for websites?'
The portfolio is my 'Lab'. I wanted to see if I could apply concepts like the MVC Pattern (Model-View-Controller) to a simple website. Here, I can break things and fix them without a client complaining. It is the only way to build truly deep understanding.
Chapter II: The Architecture
From static HTML to a dynamic engine.
Static vs. Dynamic
In the beginning (v1.0), this portfolio consisted of individual HTML files. The problem: If I wanted to change a link in the menu, I had to do it in five different files. That was error-prone and didn't feel 'smart'.
The Solution (v2.2): I tried to apply the 'Don't Repeat Yourself' (DRY) principle. Instead of hardcoding content in HTML, I outsourced it to data structures.
- Before: Copy & Paste of code blocks.
- Today: A central data source (Single Source of Truth).
Struktur-Vergleich
about.html
contact.html
+ data.json
The "Rendering Engine"
I wanted to understand how modern frameworks (like React) work at their core. So I built a heavily simplified version myself.
The system is based on Separation of Concerns:
- Data Layer:
projects-data.jsholds all info (texts, image paths) as JSON objects. - Logic Layer:
project-renderer.jstakes this data and builds the HTML live in the browser. - View Layer: The
index.htmlis just an empty frame (container).
This allows me to add a new project by simply adding an entry to the array – without writing a single line of HTML.
Logic-Layer Snippet
Chapter III: Invisible Tech
Features you feel but don't see.
Custom i18n Engine
Instead of loading 500KB for a library like i18next, I wrote my own engine.
- Attribute Mapping: Content is decoupled from HTML (
data-i18n). - Persistence: The language remains thanks to
localStorageon reload. - Fade-Transition: A Promise-based transition ensures smooth animations instead of hard flickering.
localStorage..."
},
"meta_c3_li_2":
"Persistence..."
}
};
Logic Pipeline Visualization
Smart DOM Injection
The project-renderer.js acts like a mini-framework ('Vanilla React'). It decides at runtime what is rendered.
A special highlight is Path Normalization. Since the engine runs on both the start page (Root) and in the archive (Subfolder), it automatically repairs relative image paths before injecting them into the DOM. No 'Broken Images', no matter where the code runs.
Performance First
A portfolio must be fast. By avoiding frameworks and using hardware acceleration (GPU), we achieve top scores.
Resource Efficiency
Scroll events fire hundreds of times per second. That kills mobile device batteries. My solution: The Intersection Observer API.
visible in Viewport
⬆️ Live Demo: This box was only activated when you just saw it. Before that, it consumed 0% computing power.
Modern CSS & GPU
CSS is more than just color. I use Custom Properties for global theming. Additionally, I force rendering on the Graphics Card (GPU) via transform: translate3d instead of the CPU.
Hardware Acceleration
transform: translate3d(0,0,0);
will-change: transform;
}
Chapter IV: DevOps & Workflow
Code is only as good as the process behind it.
Git History (Main)
Clean Commits
A portfolio grows organically. To control the chaos, I use a strict Git strategy.
- Semantic Commits: Every commit starts with
feat:,fix:, orchore:. This makes the history readable. - Branching: New features (like this meta page) are created in isolated branches before being merged into the
mainbranch. - Safety: No code lands in the production build without testing (local live server).
Domain Driven Design
Initially, all images were in one folder. Chaos was pre-programmed.
During the refactoring (v2.2), I cleaned up the structure. Assets are now logically grouped by their domain. This makes the project maintainable and scalable for future expansions.
Refactored File Structure
Chapter V: Infrastructure
The path to my own identity (yusefbach.de).
From Hobby to Pro
Initially, the site ran under yusef03.github.io. For a professional appearance, a Top-Level Domain (TLD) was needed.
The challenge: GitHub Pages is a static host. You have to manually build the bridge between domain provider and GitHub. I use redundant A-Records (4 Load Balancer IPs) for reliability.
GitHub Pages DNS Configuration
The "Persistence Issue"
A classic pitfall with GitHub Pages that cost me some nerves.
git push, the setting was suddenly gone and the site offline.Reason: GitHub overwrites manual settings on deployment.
CNAME (no extension) in the root directory.Content:
yusefbach.deThis makes the domain 'Code-defined'. No matter how often I deploy, GitHub now knows: 'This belongs to me.'
Chapter VI: The AI Brain
A Zero-Dependency RAG Chat-Twin.
Python Serverless
The Google Gemini 1.5 Flash API runs as an isolated microservice on Vercel (FastAPI).
System Context Injection
A markdown-based database ('yusef_brain.md') strictly orchestrates the LLM to my developer persona.
Vanilla Bot UI
The frontend asynchronously communicates via a private fetch-pipeline. The Glassmorphism UI is built without React or external packages.
Context Safety
CORS headers and strict model directives prevent misuse (prompt injections).
RAG_PIPELINE.flow
(Glassmorphism)
(Context JSON)
Chapter VII: Future Roadmap
Code is never finished. The journey continues.
Ready for
Production
This portfolio is proof that I am ready to turn theory into real value.