diff --git a/index.html b/index.html index 95a7ff7..44e57ab 100644 --- a/index.html +++ b/index.html @@ -1,1511 +1,1023 @@ - - - noctura.dev | Portfolio für Web, Systeme und Infrastruktur - - - - - + + +noctura.dev — Portfolio + + + + + - -
-
-
- -
-
-
-
-
Persönliches Portfolio / Web, Systeme, Infrastruktur
-

- Interfaces mit Haltung. - Systeme mit Substanz. - Umsetzungen, die man versteht. -

-

- Ich baue digitale Arbeiten, die nicht bei schöner Oberfläche aufhören. Mich interessieren - klare Nutzerführung, saubere technische Entscheidungen und Betrieb ohne Blackbox. - Deshalb denke ich Frontend, Backend, Linux und Deployment als zusammenhängendes System. -

-
- Arbeiten ansehen - Kontakt aufnehmen +
- -
- -
-
-
// Über mich
-

Ein Portfolio sollte zeigen, wie jemand denkt, nicht nur was er aufzählt.

-

Genau darauf ist diese Seite ausgerichtet: technische Haltung, Lernkurve und Umsetzungskompetenz sichtbar machen.

-
-
-
-

- Ich entwickle Oberflächen mit Blick auf Wirkung, aber genauso auf Aufbau, Wartbarkeit und Übergabe. - Für mich endet Webentwicklung nicht am Browserfenster, sondern schließt APIs, Server, Sicherheit und Deployment ein. -

-

- Gerade deshalb passt ein persönliches Portfolio besser zu mir als eine sterile Leistungsseite. - Es darf Charakter haben, solange die Technik dahinter belastbar bleibt und die Aussagen durch Projekte gedeckt sind. -

-
-
Was Recruiter und Teams hier schnell erfassen sollen
-
    -
  • Ich kann gestalten, bauen, deployen und Entscheidungen begründen.
    • -
  • Ich arbeite eigenständig, lerne schnell und denke in funktionierenden Systemen.
    • -
  • Meine Projekte dienen nicht nur der Optik, sondern zeigen konkrete technische Reife.
    • +
+ +
+ +
+ +
+ + +
+
+
+
// Über mich
+

Ein Portfolio sollte zeigen,
wie jemand denkt.

+

Nicht was er aufzählen kann. Technische Haltung, Lernkurve und Umsetzungskompetenz sichtbar gemacht.

+
+
+
+
+

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.

+

Gerade deshalb passt ein persönliches Portfolio besser zu mir als eine sterile Leistungsseite. Es darf Charakter haben, solange die Technik dahinter belastbar bleibt und die Aussagen durch Projekte gedeckt sind.

+
+
+
Was Recruiter hier schnell erfassen sollen
+
    +
  • Gestalten, bauen, deployen und begründen.
    • +
  • Eigenständig, schnell lernend, in Systemen denkend.
    • +
  • Projekte zeigen technische Reife, nicht nur Optik.
    • +
  • Keine Platzhalter — echte Entscheidungen.
-
-
-
Prinzip 01
-
Klarheit vor Effekthascherei
-

Gutes Design darf auffallen, muss aber immer lesbar, navigierbar und argumentierbar bleiben.

-
-
-
Prinzip 02
-
Technik sichtbar mitdenken
-

Ich mag Lösungen, bei denen man nicht nur das Ergebnis, sondern auch die Struktur dahinter ernst nehmen kann.

-
-
-
Prinzip 03
-
Wartbarkeit ist Teil der Qualität
-

Sauberer Code, nachvollziehbare Entscheidungen und robuste Deployments sind kein Bonus, sondern Standard.

+
+
Stack & Kontext
+
    +
  • HTML / CSS / JavaScript
    • +
  • Node.js / REST APIs
    • +
  • Docker & Compose
    • +
  • Debian Linux
    • +
  • Caddy / systemd
    • +
  • Forgejo
    • +
  • ufw / fail2ban
    • +
  • SSH-Härtung
    • +
+
+
+
+
+
01 —
+
Klarheit vor Effekthascherei
+

Gutes Design darf auffallen, muss aber immer lesbar, navigierbar und argumentierbar bleiben.

+
+
+
02 —
+
Technik sichtbar mitdenken
+

Lösungen, bei denen man nicht nur das Ergebnis, sondern auch die Struktur dahinter ernst nehmen kann.

+
+
+
03 —
+
Wartbarkeit ist Qualität
+

Sauberer Code, nachvollziehbare Entscheidungen und robuste Deployments sind kein Bonus, sondern Standard.

+
+
+
+
+ +
+ + +
+
+
+
// Fähigkeiten
+

Breit genug für ganze Produkte.
Präzise genug für gute Details.

+

Interface, Logik und Betrieb als Einheit — das ist der Bereich, in dem ich am stärksten arbeite.

+
+
+
+ </> +
Frontend & Interface Design
+

Responsive Oberflächen mit Charakter, sauberer Informationshierarchie und einem klaren Gefühl für visuelle Spannung ohne Unordnung.

+
+ HTML / CSS + JavaScript + UI Systems + Responsive
-
- -
- -
-
-
// Fähigkeiten
-

Breit genug für ganze Produkte. Präzise genug für gute Details.

-

Die Kombination aus Interface, Logik und Betrieb ist der Bereich, in dem ich am stärksten arbeite.

-
-
-
- ⟨/⟩ -
Frontend & Interface Design
-

Responsive Oberflächen mit Charakter, sauberer Informationshierarchie und einem klaren Gefühl für visuelle Spannung ohne Unordnung.

-
- HTML / CSS - JavaScript - UI Systems - Responsive Layouts -
-
-
- ⬡ -
Backend & Infrastruktur
-

Services verbinden, Datenflüsse strukturieren und Hosting so aufsetzen, dass Anwendungen nicht nur laufen, sondern verständlich betrieben werden können.

-
- Docker - Node.js - REST APIs - Caddy - Forgejo -
-
-
- $_ -
Linux & Betrieb
-

Server einrichten, absichern und nachhaltig betreiben. Besonders spannend finde ich Self-hosting, Deployments und die Wartbarkeit echter Systeme.

-
- Debian Linux - SSH - systemd - ufw / fail2ban -
+
+ ⬡ +
Backend & Infrastruktur
+

Services verbinden, Datenflüsse strukturieren und Hosting so aufsetzen, dass Anwendungen nicht nur laufen, sondern verständlich betrieben werden können.

+
+ Docker + Node.js + REST APIs + Caddy + Forgejo
-
- -
- -
-
-
// Portfolio
-

Ausgewählte Arbeiten mit technischer und gestalterischer Aussage.

-

Nicht als Produktkatalog, sondern als verdichteter Blick darauf, wie ich Probleme angehe und Qualität bewerte.

+
+ $_ +
Linux & Betrieb
+

Server einrichten, absichern und nachhaltig betreiben. Self-hosting, Deployments und die Wartbarkeit echter Systeme — das ist der Kern.

+
+ Debian Linux + SSH + systemd + ufw / fail2ban +
-
-
-
+
+
+
+ +
+ + +
+
+
+
// Portfolio
+

Ausgewählte Arbeiten mit
technischer und gestalterischer Aussage.

+

Kein Produktkatalog. Ein verdichteter Blick darauf, wie ich Probleme angehe und Qualität bewerte.

+
+
+
+
+
-
Tooling
-
Developer Utilities
+
Tooling
+
Developer Utilities
- ⌘ +
⌘
-

Kleine Web-Tools mit klarer UX, schneller Interaktion und pragmatischem Produktgedanken. Der Fokus liegt auf Nutzbarkeit statt auf Marketing-Schichten.

-
- Utility-first Denken - Schnelle Interaktion - Klares UI +

Kleine Web-Tools mit klarer UX, schneller Interaktion und pragmatischem Produktgedanken. Der Fokus liegt auf Nutzbarkeit statt Marketing-Schichten.

+
+ Utility-first + Schnelle Interaktion + Klares UI
-
    -
  • Geeignet, um Produktgefühl und Reduktion auf das Wesentliche sichtbar zu machen.
    • -
  • Zeigt, dass kleine Projekte trotzdem sorgfältige Informationsarchitektur brauchen.
    • +
      +
    • Macht Produktgefühl und Reduktion auf das Wesentliche sichtbar.
      • +
    • Zeigt, dass auch kleine Projekte sorgfältige Informationsarchitektur brauchen.
    -
    -
    - - In Entwicklung -
    - Work in progress ↗ +
    +
    In Entwicklung
    + Work in progress ↗
-
-
+
+
-
Backend
-
Custom Backend API
+
Backend
+
Custom Backend API
- API +
API
-

Eine eigene API-Struktur für persönliche Anwendungen, bei der Routing, Datenmodelle und Hosting nicht ausgelagert, sondern bewusst kontrolliert werden.

-
- Routing - Datenmodelle - Eigenes Hosting +

Eine eigene API-Struktur für persönliche Anwendungen — Routing, Datenmodelle und Hosting nicht ausgelagert, sondern bewusst kontrolliert.

+
+ Routing + Datenmodelle + Eigenes Hosting
-
    -
  • Hilft dabei, technische Entscheidungen nicht nur zu verwenden, sondern selbst zu tragen.
    • -
  • Stärkt die Verbindung zwischen Frontend-Anforderungen und sauberem Service-Aufbau.
    • +
      +
    • Technische Entscheidungen nicht nur verwenden, sondern selbst tragen.
      • +
    • Verbindet Frontend-Anforderungen mit sauberem Service-Aufbau.
    -
    -
    - - In Entwicklung -
    - Architekturaufbau ↗ +
    +
    In Entwicklung
    + Architekturaufbau ↗
-
-
+
+
-
Experiment
-
Lab / Playground
+
Experiment
+
Lab / Playground
- △ +
△
-

Ein Bereich für Prototypen, visuelle Versuche und technische Experimente. Gerade dort wird sichtbar, wie ich neue Themen erschließe und Entscheidungen teste.

-
- Prototyping - Designstudien - Lernsystem +

Prototypen, visuelle Versuche und technische Experimente. Hier wird sichtbar, wie ich neue Themen erschließe und Entscheidungen teste.

+
+ Prototyping + Designstudien + Lernsystem
-
    -
  • Macht Neugier und Iteration sichtbar, statt nur fertige Ergebnisse zu zeigen.
    • -
  • Ist der Bereich, in dem Stil, Technik und persönliche Handschrift am direktesten zusammenlaufen.
    • +
      +
    • Neugier und Iteration sichtbar statt nur fertige Ergebnisse.
      • +
    • Dort laufen Stil, Technik und persönliche Handschrift am direktesten zusammen.
    -
    -
    - - Geplant -
    - In Vorbereitung ↗ +
    +
    Geplant
    + In Vorbereitung ↗
-
-
+
+
-
Infrastruktur
-
noctura.dev Infrastruktur
+
Infrastruktur
+
noctura.dev Infrastruktur
- ▣ +
▣
-

Der stärkste Portfolio-Baustein im Hintergrund: ein selbst verwalteter VPS mit realen Services, Sicherheitsmaßnahmen und einer Umgebung, die mehr kann als nur statische Auslieferung.

-
- VPS - Deployment - Security Basics +

Selbst verwalteter VPS mit realen Services, Sicherheitsmaßnahmen und einer Umgebung, die mehr kann als statische Auslieferung.

+
+ VPS + Deployment + Security
-
    -
  • Belegt, dass ich nicht nur UI baue, sondern Verantwortung für den Betrieb mitdenke.
    • -
  • Ist besonders relevant für Rollen, in denen Eigenständigkeit und technisches Verständnis erwartet werden.
    • +
      +
    • Belegt, dass ich nicht nur UI baue, sondern Betrieb mitdenke.
      • +
    • Relevant für Rollen, in denen Eigenständigkeit und technisches Verständnis zählen.
    -
    -
    - - Live -
    - Produktiv im Einsatz ↗ +
    +
    Live
    + Produktiv im Einsatz ↗
-
+
Portfolio-Ziel
-

Die Arbeiten sollen nach echter Substanz aussehen, nicht nach Platzhaltern mit hübschem Rahmen.

+

Arbeiten, die nach echter Substanz aussehen — nicht nach Platzhaltern mit hübschem Rahmen.

-
+
Signalwirkung

Jede Karte trägt eine erkennbare Perspektive: Produkt, Architektur, Lernen oder Betrieb.

-
+
Wirkung im Gespräch
-

Die Inhalte liefern Einstiegspunkte für Fachgespräche statt austauschbarer Selbstdarstellung.

+

Inhalte als Einstieg für Fachgespräche — statt austauschbarer Selbstdarstellung.

-
- -
- -
-
-
// Profil
-

Die komprimierte Version für Bewerbung, Erstgespräch und schnellen Eindruck.

-

Vier kurze Aussagen, die im Kopf bleiben sollen, wenn sich jemand nur wenige Minuten Zeit nimmt.

-
-
-
-
Arbeitsweise
-
Hands-on
-

Ich lerne bevorzugt über echte Umsetzung, Fehleranalyse und Iteration statt über reines Tutorial-Nachbauen.

-
-
-
Stärke
-
Frontend plus Betrieb
-

Ich kann Entscheidungen vom Interface bis zum Deployment zusammenhängend betrachten und daraus bessere Lösungen ableiten.

-
-
-
Motivation
-
Systeme wirklich verstehen
-

Mich reizt Technik dann besonders, wenn ich sie nicht nur benutze, sondern selbst strukturieren und betreiben kann.

-
-
-
Eindruck
-
Substanz vor Buzzwords
-

Diese Seite soll zeigen, wie ich arbeite und entscheide, nicht nur welche Begriffe ich aufzählen könnte.

-
-
-
- -
- -
-
-

Kontakt für Bewerbungen, Zusammenarbeit oder technische Gespräche

-

Wenn du einen Entwickler suchst, der Design nicht von Technik trennt und Verantwortung auch hinter der Oberfläche übernimmt, schreib mir direkt.

- kontakt@noctura.dev -
-
-
- - + + - + requestAnimationFrame(draw); + } + + window.addEventListener('resize',init); + init(); + if(!rm) draw(); +})(); + +// Reveal on scroll +(function(){ + const els=document.querySelectorAll('.reveal'); + const rm=window.matchMedia('(prefers-reduced-motion: reduce)').matches; + if(rm){els.forEach(e=>e.classList.add('in'));return;} + const io=new IntersectionObserver((entries)=>{ + entries.forEach((e,i)=>{ + if(e.isIntersecting){ + setTimeout(()=>e.target.classList.add('in'),i*80); + io.unobserve(e.target); + } + }); + },{threshold:0.1}); + els.forEach(e=>io.observe(e)); +})(); +