text changes

index.html

@@ -600,7 +600,7 @@ footer{
     <div class="hero-copy">
       <div class="hero-eyebrow">Persönliches Portfolio · Web · Systeme · Infrastruktur</div>
       <h1>Interfaces mit<br><em>Haltung.</em><br>Systeme mit<br>Substanz.</h1>
-      <p class="hero-desc">Ich baue digitale Arbeiten, die nicht bei schöner Oberfläche aufhören. Mich interessieren <strong>klare Nutzerführung, saubere Entscheidungen und Betrieb ohne Blackbox</strong> — Frontend, Backend und Deployment als zusammenhängendes System gedacht.</p>
+      <p class="hero-desc">Ich baue digitale Projekte, die nicht bei einer schönen Oberfläche aufhören. Mir ist wichtig, dass <strong>Gestaltung, technische Entscheidungen und Betrieb zusammenpassen</strong> — also nicht nur, wie etwas aussieht, sondern auch, wie sauber es aufgebaut ist und wie zuverlässig es läuft.</p>
       <div class="hero-actions">
         <a href="#projects" class="btn btn-gold">Arbeiten ansehen</a>
         <a href="#contact" class="btn btn-ghost">Kontakt aufnehmen</a>
@@ -609,17 +609,17 @@ footer{
         <div class="hero-metric">
           <div class="hero-metric-label">Fokus</div>
           <div class="hero-metric-val">End-to-End</div>
-          <div class="hero-metric-copy">Interface bis Deployment, in einem Zug.</div>
+          <div class="hero-metric-copy">Vom ersten Layout bis zur laufenden Anwendung mitgedacht.</div>
         </div>
         <div class="hero-metric">
           <div class="hero-metric-label">Arbeitsweise</div>
           <div class="hero-metric-val">Präzise &amp; direkt</div>
-          <div class="hero-metric-copy">Klare Entscheidungen, echte Umsetzung.</div>
+          <div class="hero-metric-copy">Lieber sauber bauen als groß darüber reden.</div>
         </div>
         <div class="hero-metric">
           <div class="hero-metric-label">Stack</div>
           <div class="hero-metric-val">HTML · CSS · JS · Linux</div>
-          <div class="hero-metric-copy">Fokussiert genug für gute Details.</div>
+          <div class="hero-metric-copy">Genug Breite für komplette Projekte, ohne beliebig zu werden.</div>
         </div>
       </div>
     </div>
@@ -637,33 +637,33 @@ footer{
         <div class="hc-grid">
           <div class="hc-cell">
             <div class="hc-cell-label">Schwerpunkt</div>
-            <div class="hc-cell-val">Produktnahe Webprojekte</div>
+            <div class="hc-cell-val">Webprojekte mit Substanz</div>
-            <div class="hc-cell-copy">Interfaces mit klarer technischer Kante.</div>
+            <div class="hc-cell-copy">Oberflächen, die nicht nur gut aussehen, sondern sauber funktionieren.</div>
           </div>
           <div class="hc-cell">
             <div class="hc-cell-label">Umfeld</div>
-            <div class="hc-cell-val">Self-hosted</div>
+            <div class="hc-cell-val">Eigene Infrastruktur</div>
-            <div class="hc-cell-copy">Design, Code und Betrieb direkt vereint.</div>
+            <div class="hc-cell-copy">Ich finde es spannend, Dinge nicht nur zu bauen, sondern auch selbst zu betreiben.</div>
           </div>
           <div class="hc-cell">
             <div class="hc-cell-label">Anspruch</div>
-            <div class="hc-cell-val">Belegen statt zeigen</div>
+            <div class="hc-cell-val">Nachvollziehbare Arbeit</div>
-            <div class="hc-cell-copy">Entscheidungen sichtbar, nicht nur Ergebnisse.</div>
+            <div class="hc-cell-copy">Ich möchte zeigen, wie ich denke und entscheide, nicht nur fertige Screens.</div>
           </div>
           <div class="hc-cell">
             <div class="hc-cell-label">Ideal für</div>
-            <div class="hc-cell-val">Einstieg mit Verantwortung</div>
+            <div class="hc-cell-val">Passend für Teams</div>
-            <div class="hc-cell-copy">Teams mit Eigeninitiative und technischem Anspruch.</div>
+            <div class="hc-cell-copy">Vor allem dort, wo Eigeninitiative und sauberes Arbeiten geschätzt werden.</div>
           </div>
         </div>
         <div class="hc-list">
           <div class="hc-list-item">
-            <strong>Ziel dieser Seite</strong>
+            <strong>Worum es mir hier geht</strong>
-            Entwicklerprofil mit Persönlichkeit statt generischer Agentur-Sprache.
+            Kein aufpoliertes Schaufenster, sondern ein ehrlicher Eindruck davon, wie ich an Projekte herangehe.
           </div>
           <div class="hc-list-item">
-            <strong>Was zählt</strong>
+            <strong>Was mir wichtig ist</strong>
-            Verständliche Projekte, saubere Struktur, Signale für technische Tiefe.
+            Verständliche Projekte, klare Entscheidungen und Technik, die nicht unnötig kompliziert wirkt.
           </div>
         </div>
       </div>
@@ -679,22 +679,22 @@ footer{
   <section id="about">
     <div class="reveal">
       <div class="s-label">// Über mich</div>
-      <h2 class="s-title">Ein Portfolio sollte zeigen,<br>wie jemand <em>denkt.</em></h2>
+      <h2 class="s-title">Ein Portfolio sollte zeigen,<br>wie jemand <em>arbeitet.</em></h2>
-      <p class="s-subtitle">Nicht was er aufzählen kann. Technische Haltung, Lernkurve und Umsetzungskompetenz sichtbar gemacht.</p>
+      <p class="s-subtitle">Nicht nur, was auf einer Liste steht. Mir ist wichtiger, dass man hier ein Gefühl für meine Arbeitsweise, meinen Anspruch und meinen Lernweg bekommt.</p>
     </div>
     <div class="reveal">
       <div class="about-grid">
         <div class="about-cell">
-          <p>Ich entwickle Oberflächen mit Blick auf Wirkung — aber genauso auf Aufbau, Wartbarkeit und Übergabe. Webentwicklung endet für mich nicht am Browserfenster, sondern schließt APIs, Server, Sicherheit und Deployment ein.</p>
+          <p>Ich entwickle Oberflächen nicht nur danach, ob sie gut aussehen, sondern auch danach, ob sie verständlich aufgebaut sind und sich sauber weiterentwickeln lassen. Für mich hört Webentwicklung nicht im Browser auf, sondern geht bis zu Servern, Deployment und dem Betrieb im Alltag.</p>
-          <p>Gerade deshalb passt ein <strong>persönliches Portfolio</strong> besser zu mir als eine sterile Leistungsseite. Es darf Charakter haben, solange die Technik dahinter belastbar bleibt und die Aussagen durch Projekte gedeckt sind.</p>
+          <p>Genau deshalb ist dieses <strong>persönliche Portfolio</strong> bewusst keine klassische Leistungsseite. Ich wollte lieber etwas bauen, das zu mir passt: etwas mit Charakter, aber ohne leere Inszenierung und ohne technische Fassade.</p>
         </div>
         <div class="about-cell" style="border-left:1px solid var(--ink-border)">
-          <div class="notes-label">Was Recruiter hier schnell erfassen sollen</div>
+          <div class="notes-label">Was diese Seite über mich zeigt</div>
           <ul class="notes-list">
-            <li>Gestalten, bauen, deployen und begründen.</li>
+            <li>Ich kombiniere Gestaltung, Umsetzung und Betrieb.</li>
-            <li>Eigenständig, schnell lernend, in Systemen denkend.</li>
+            <li>Ich arbeite gern eigenständig und lerne über echte Projekte.</li>
-            <li>Projekte zeigen technische Reife, nicht nur Optik.</li>
+            <li>Mich interessieren saubere Lösungen statt laute Buzzwords.</li>
-            <li>Keine Platzhalter — echte Entscheidungen.</li>
+            <li>Die Seite soll eher Haltung zeigen als Selbstdarstellung.</li>
           </ul>
         </div>
       </div>
@@ -715,18 +715,18 @@ footer{
     <div class="principles reveal">
       <div class="principle">
         <div class="p-num">01 —</div>
-        <div class="p-title">Klarheit vor Effekthascherei</div>
+        <div class="p-title">Klarheit vor Effekten</div>
-        <p class="p-copy">Gutes Design darf auffallen, muss aber immer lesbar, navigierbar und argumentierbar bleiben.</p>
+        <p class="p-copy">Ich mag Gestaltung, die Charakter hat, aber nicht im Weg steht. Dinge sollen auffallen dürfen, nur eben nicht auf Kosten der Lesbarkeit.</p>
       </div>
       <div class="principle" style="border-left:1px solid var(--ink-border)">
         <div class="p-num">02 —</div>
-        <div class="p-title">Technik sichtbar mitdenken</div>
+        <div class="p-title">Technik mitdenken</div>
-        <p class="p-copy">Lösungen, bei denen man nicht nur das Ergebnis, sondern auch die Struktur dahinter ernst nehmen kann.</p>
+        <p class="p-copy">Mich interessieren Lösungen, bei denen nicht nur das Ergebnis stimmt, sondern auch der Aufbau dahinter nachvollziehbar ist.</p>
       </div>
       <div class="principle" style="border-left:1px solid var(--ink-border)">
         <div class="p-num">03 —</div>
-        <div class="p-title">Wartbarkeit ist Qualität</div>
+        <div class="p-title">Wartbarkeit gehört dazu</div>
-        <p class="p-copy">Sauberer Code, nachvollziehbare Entscheidungen und robuste Deployments sind kein Bonus, sondern Standard.</p>
+        <p class="p-copy">Sauberer Code und vernünftige Strukturen sind für mich kein Extra, sondern Teil davon, ob sich eine Lösung gut anfühlt.</p>
       </div>
     </div>
   </section>
@@ -739,14 +739,14 @@ footer{
   <section id="skills">
     <div class="reveal">
       <div class="s-label">// Fähigkeiten</div>
-      <h2 class="s-title">Breit genug für ganze Produkte.<br><em>Präzise</em> genug für gute Details.</h2>
+      <h2 class="s-title">Breit genug für ganze Projekte.<br><em>Präzise</em> genug für gute Details.</h2>
-      <p class="s-subtitle">Interface, Logik und Betrieb als Einheit — das ist der Bereich, in dem ich am stärksten arbeite.</p>
+      <p class="s-subtitle">Am liebsten arbeite ich dort, wo Oberfläche, Logik und Betrieb nicht getrennt betrachtet werden.</p>
     </div>
     <div class="skills-grid reveal">
       <div class="skill">
         <span class="skill-icon">&lt;/&gt;</span>
         <div class="skill-name">Frontend &amp; Interface Design</div>
-        <p class="skill-desc">Responsive Oberflächen mit Charakter, sauberer Informationshierarchie und einem klaren Gefühl für visuelle Spannung ohne Unordnung.</p>
+        <p class="skill-desc">Responsive Oberflächen mit klarer Struktur, guter Typografie und einem Anspruch daran, dass sich eine Seite bewusst gestaltet anfühlt.</p>
         <div class="tags">
           <span class="tag tag-gold">HTML / CSS</span>
           <span class="tag tag-gold">JavaScript</span>
@@ -757,7 +757,7 @@ footer{
       <div class="skill" style="border-left:1px solid var(--ink-border)">
         <span class="skill-icon">⬡</span>
         <div class="skill-name">Backend &amp; Infrastruktur</div>
-        <p class="skill-desc">Services verbinden, Datenflüsse strukturieren und Hosting so aufsetzen, dass Anwendungen nicht nur laufen, sondern verständlich betrieben werden können.</p>
+        <p class="skill-desc">Ich mag es, Services selbst zu verbinden, Datenflüsse zu ordnen und Hosting so aufzusetzen, dass man eine Anwendung nicht nur startet, sondern auch versteht.</p>
         <div class="tags">
           <span class="tag tag-teal">Docker</span>
           <span class="tag tag-teal">Node.js</span>
@@ -769,7 +769,7 @@ footer{
       <div class="skill" style="border-left:1px solid var(--ink-border)">
         <span class="skill-icon">$_</span>
         <div class="skill-name">Linux &amp; Betrieb</div>
-        <p class="skill-desc">Server einrichten, absichern und nachhaltig betreiben. Self-hosting, Deployments und die Wartbarkeit echter Systeme — das ist der Kern.</p>
+        <p class="skill-desc">Server einrichten, absichern und sinnvoll betreiben. Gerade Self-Hosting und Deployments sind für mich der Bereich, in dem Technik besonders greifbar wird.</p>
         <div class="tags">
           <span class="tag tag-dim">Debian Linux</span>
           <span class="tag tag-dim">SSH</span>
@@ -788,8 +788,8 @@ footer{
   <section id="projects">
     <div class="reveal">
       <div class="s-label">// Portfolio</div>
-      <h2 class="s-title">Ausgewählte Arbeiten mit<br>technischer und <em>gestalterischer</em> Aussage.</h2>
+      <h2 class="s-title">Ausgewählte Arbeiten mit<br>technischer und <em>gestalterischer</em> Handschrift.</h2>
-      <p class="s-subtitle">Kein Produktkatalog. Ein verdichteter Blick darauf, wie ich Probleme angehe und Qualität bewerte.</p>
+      <p class="s-subtitle">Kein Produktkatalog, sondern ein Ausschnitt der Themen und Projektarten, an denen ich wirklich gern arbeite.</p>
     </div>
     <div class="reveal">
       <div class="projects-grid">
@@ -801,15 +801,15 @@ footer{
             </div>
             <div class="proj-icon">⌘</div>
           </div>
-          <p class="proj-desc">Kleine Web-Tools mit klarer UX, schneller Interaktion und pragmatischem Produktgedanken. Der Fokus liegt auf Nutzbarkeit statt Marketing-Schichten.</p>
+          <p class="proj-desc">Kleinere Web-Tools, bei denen schnelle Nutzung und klare Interaktion wichtiger sind als große Verpackung. Gerade solche Projekte zeigen oft am besten, wie sorgfältig man in Details arbeitet.</p>
           <div class="proj-tags">
             <span class="tag tag-gold">Utility-first</span>
             <span class="tag tag-dim">Schnelle Interaktion</span>
             <span class="tag tag-dim">Klares UI</span>
           </div>
           <ul class="proj-pts">
-            <li>Macht Produktgefühl und Reduktion auf das Wesentliche sichtbar.</li>
+            <li>Zeigt, wie viel Wirkung in einer einfachen, gut gebauten Lösung stecken kann.</li>
-            <li>Zeigt, dass auch kleine Projekte sorgfältige Informationsarchitektur brauchen.</li>
+            <li>Gerade kleine Projekte zwingen dazu, auf unnötigen Ballast zu verzichten.</li>
           </ul>
           <div class="proj-foot">
             <div class="proj-status"><span class="dot dot-wip"></span>In Entwicklung</div>
@@ -825,15 +825,15 @@ footer{
             </div>
             <div class="proj-icon" style="font-size:0.65rem">API</div>
           </div>
-          <p class="proj-desc">Eine eigene API-Struktur für persönliche Anwendungen — Routing, Datenmodelle und Hosting nicht ausgelagert, sondern bewusst kontrolliert.</p>
+          <p class="proj-desc">Eine eigene API-Struktur für persönliche Anwendungen, bei der ich Routing, Datenmodelle und Hosting bewusst selbst in der Hand behalte.</p>
           <div class="proj-tags">
             <span class="tag tag-teal">Routing</span>
             <span class="tag tag-teal">Datenmodelle</span>
             <span class="tag tag-dim">Eigenes Hosting</span>
           </div>
           <ul class="proj-pts">
-            <li>Technische Entscheidungen nicht nur verwenden, sondern selbst tragen.</li>
+            <li>Hilft mir, technische Entscheidungen nicht nur zu übernehmen, sondern selbst zu durchdenken.</li>
-            <li>Verbindet Frontend-Anforderungen mit sauberem Service-Aufbau.</li>
+            <li>Verbindet die Anforderungen aus dem Frontend direkt mit einem sauberen Backend-Aufbau.</li>
           </ul>
           <div class="proj-foot">
             <div class="proj-status"><span class="dot dot-wip"></span>In Entwicklung</div>
@@ -849,15 +849,15 @@ footer{
             </div>
             <div class="proj-icon">△</div>
           </div>
-          <p class="proj-desc">Prototypen, visuelle Versuche und technische Experimente. Hier wird sichtbar, wie ich neue Themen erschließe und Entscheidungen teste.</p>
+          <p class="proj-desc">Ein Bereich für Prototypen, visuelle Versuche und technische Experimente. Dort probiere ich Ideen aus, bevor sie in etwas Größeres einfließen.</p>
           <div class="proj-tags">
             <span class="tag tag-dim">Prototyping</span>
             <span class="tag tag-dim">Designstudien</span>
             <span class="tag tag-gold">Lernsystem</span>
           </div>
           <ul class="proj-pts">
-            <li>Neugier und Iteration sichtbar statt nur fertige Ergebnisse.</li>
+            <li>Hier sieht man eher meinen Prozess als eine fertige Fassade.</li>
-            <li>Dort laufen Stil, Technik und persönliche Handschrift am direktesten zusammen.</li>
+            <li>Genau dort treffen Neugier, Stilgefühl und Technik am direktesten aufeinander.</li>
           </ul>
           <div class="proj-foot">
             <div class="proj-status"><span class="dot dot-plan"></span>Geplant</div>
@@ -873,15 +873,15 @@ footer{
             </div>
             <div class="proj-icon">▣</div>
           </div>
-          <p class="proj-desc">Selbst verwalteter VPS mit realen Services, Sicherheitsmaßnahmen und einer Umgebung, die mehr kann als statische Auslieferung.</p>
+          <p class="proj-desc">Ein selbst verwalteter VPS mit echten Services, Sicherheitsmaßnahmen und einer Umgebung, die mehr ist als nur Webspace für statische Dateien.</p>
           <div class="proj-tags">
             <span class="tag tag-dim">VPS</span>
             <span class="tag tag-teal">Deployment</span>
             <span class="tag tag-dim">Security</span>
           </div>
           <ul class="proj-pts">
-            <li>Belegt, dass ich nicht nur UI baue, sondern Betrieb mitdenke.</li>
+            <li>Zeigt, dass mich nicht nur die Oberfläche interessiert, sondern auch das, was dahinter zuverlässig laufen muss.</li>
-            <li>Relevant für Rollen, in denen Eigenständigkeit und technisches Verständnis zählen.</li>
+            <li>Für mich ist das einer der ehrlichsten Teile des Portfolios, weil hier viel Eigeninitiative drinsteckt.</li>
           </ul>
           <div class="proj-foot">
             <div class="proj-status"><span class="dot dot-live"></span>Live</div>
@@ -891,16 +891,16 @@ footer{
       </div>
       <div class="proof-band">
         <div class="proof-item">
-          <div class="proof-label">Portfolio-Ziel</div>
+          <div class="proof-label">Warum diese Auswahl</div>
-          <p class="proof-copy">Arbeiten, die nach echter Substanz aussehen — nicht nach Platzhaltern mit hübschem Rahmen.</p>
+          <p class="proof-copy">Die Projekte stehen nicht hier, um die Seite zu füllen, sondern weil sie etwas Reales über meine Arbeitsweise erzählen.</p>
         </div>
         <div class="proof-item" style="border-left:1px solid var(--ink-border)">
-          <div class="proof-label">Signalwirkung</div>
+          <div class="proof-label">Was man daran erkennt</div>
-          <p class="proof-copy">Jede Karte trägt eine erkennbare Perspektive: Produkt, Architektur, Lernen oder Betrieb.</p>
+          <p class="proof-copy">Jedes Projekt beleuchtet einen anderen Teil dessen, was mich an Webentwicklung wirklich interessiert.</p>
         </div>
         <div class="proof-item" style="border-left:1px solid var(--ink-border)">
-          <div class="proof-label">Wirkung im Gespräch</div>
+          <div class="proof-label">Worüber ich gern spreche</div>
-          <p class="proof-copy">Inhalte als Einstieg für Fachgespräche — statt austauschbarer Selbstdarstellung.</p>
+          <p class="proof-copy">Die Inhalte sind so gewählt, dass daraus echte Gespräche über Entscheidungen, Technik und Arbeitsweise entstehen können.</p>
         </div>
       </div>
     </div>
@@ -914,29 +914,29 @@ footer{
   <section id="snapshot">
     <div class="reveal">
       <div class="s-label">// Profil</div>
-      <h2 class="s-title">Die komprimierte Version — für den<br><em>schnellen Eindruck.</em></h2>
+      <h2 class="s-title">Die kurze Version — für einen<br><em>schnellen Eindruck.</em></h2>
-      <p class="s-subtitle">Vier kurze Aussagen, die im Kopf bleiben sollen, wenn sich jemand nur wenige Minuten Zeit nimmt.</p>
+      <p class="s-subtitle">Vier Punkte, die für mich den Kern ganz gut zusammenfassen.</p>
     </div>
     <div class="snapshot-grid reveal">
       <div class="snap">
         <div class="snap-kicker">Arbeitsweise</div>
         <div class="snap-val">Hands-on</div>
-        <p class="snap-desc">Lernen über echte Umsetzung, Fehleranalyse und Iteration — nicht über Tutorial-Nachbauen.</p>
+        <p class="snap-desc">Ich lerne am meisten über echte Umsetzung, sauberes Nacharbeiten und das Lösen konkreter Probleme.</p>
       </div>
       <div class="snap">
         <div class="snap-kicker">Stärke</div>
         <div class="snap-val">Frontend plus Betrieb</div>
-        <p class="snap-desc">Entscheidungen vom Interface bis zum Deployment zusammenhängend betrachten und daraus bessere Lösungen ableiten.</p>
+        <p class="snap-desc">Ich denke ungern nur in einzelnen Screens, sondern lieber in vollständigen Lösungen vom Interface bis zum Deployment.</p>
       </div>
       <div class="snap">
         <div class="snap-kicker">Motivation</div>
         <div class="snap-val">Systeme wirklich verstehen</div>
-        <p class="snap-desc">Technik reizt mich, wenn ich sie nicht nur benutze, sondern selbst strukturieren und betreiben kann.</p>
+        <p class="snap-desc">Am spannendsten ist Technik für mich dann, wenn ich sie selbst aufbauen, anpassen und betreiben kann.</p>
       </div>
       <div class="snap">
         <div class="snap-kicker">Eindruck</div>
         <div class="snap-val">Substanz vor Buzzwords</div>
-        <p class="snap-desc">Diese Seite zeigt, wie ich arbeite und entscheide — nicht nur welche Begriffe ich aufzählen könnte.</p>
+        <p class="snap-desc">Mir ist wichtiger, nachvollziehbar zu wirken als besonders laut oder überinszeniert.</p>
       </div>
     </div>
   </section>
@@ -949,7 +949,7 @@ footer{
   <section id="contact">
     <div class="contact-box reveal">
       <h2>Kontakt für <em>Bewerbungen,</em><br>Zusammenarbeit und technische Gespräche</h2>
-      <p>Wenn du einen Entwickler suchst, der Design nicht von Technik trennt und Verantwortung auch hinter der Oberfläche übernimmt — schreib mir direkt.</p>
+      <p>Wenn du jemanden suchst, der Gestaltung ernst nimmt, technisch sauber arbeitet und sich auch für das Dahinter interessiert, kannst du mir gern direkt schreiben.</p>
       <a href="mailto:kontakt@noctura.dev" class="btn btn-gold">kontakt@noctura.dev</a>
       <span class="contact-email">noctura.dev — persönliches Portfolio</span>
     </div>