https://www.niklasknaack.de

{
  "url": "https://www.niklasknaack.de",
  "timestamp": 1786000648324,
  "fetch": {
    "mode": "simple",
    "timeMs": 149,
    "htmlSizeBytes": 87737,
    "supportsMarkdown": false,
    "markdownAgents": {
      "contentNegotiation": false,
      "mdUrl": {
        "found": false,
        "url": null
      },
      "linkTag": {
        "found": false,
        "url": null
      },
      "linkHeader": {
        "found": false,
        "url": null
      },
      "responseHeaders": {
        "contentSignal": null,
        "xMarkdownTokens": null,
        "vary": null
      },
      "frontmatter": {
        "present": false,
        "fields": [],
        "level": "none"
      },
      "level": "none"
    },
    "statusCode": 200
  },
  "extraction": {
    "title": "Niklas Knaack – Webentwicklung & Creative Coding aus Düsseldorf",
    "excerpt": "Persönliche Webseite von Niklas Knaack: Webentwicklung, Frontend, UI, JavaScript, CSS, Canvas und kreative Code-Experimente aus Düsseldorf.",
    "byline": "Niklas Knaack",
    "siteName": "Niklas Knaack",
    "lang": "de",
    "contentLength": 9041,
    "metadata": {
      "description": "Persönliche Website von Niklas Knaack aus Düsseldorf: Webentwicklung, Frontend, UI, JavaScript, CSS, Canvas und kreative Code-Experimente.",
      "ogTitle": "Niklas Knaack – Webentwicklung & Creative Coding aus Düsseldorf",
      "ogDescription": "Persönliche Webseite von Niklas Knaack: Webentwicklung, Frontend, UI, JavaScript, CSS, Canvas und kreative Code-Experimente aus Düsseldorf.",
      "ogImage": "https://niklasknaack.de/img/niklas-knaack-og.jpg",
      "ogType": "website",
      "canonical": "https://niklasknaack.de/",
      "lang": "de",
      "schemas": [
        {
          "@context": "https://schema.org",
          "@type": "ProfilePage",
          "url": "https://niklasknaack.de/",
          "name": "Niklas Knaack",
          "description": "Persönliche Website von Niklas Knaack aus Düsseldorf: Webentwicklung, Frontend, UI, JavaScript, CSS, Canvas und kreative Code-Experimente.",
          "mainEntity": {
            "@type": "Person",
            "name": "Niklas Knaack",
            "url": "https://niklasknaack.de/",
            "image": "https://niklasknaack.de/img/niklas-knaack-og.jpg",
            "jobTitle": "Webentwickler",
            "address": {
              "@type": "PostalAddress",
              "addressLocality": "Düsseldorf",
              "addressCountry": "DE"
            },
            "knowsAbout": [
              "Webentwicklung",
              "Frontend-Entwicklung",
              "UI-Entwicklung",
              "Responsive Webdesign",
              "JavaScript",
              "TypeScript",
              "CSS",
              "SCSS",
              "HTML",
              "Canvas",
              "SVG",
              "WebGL",
              "Creative Coding",
              "Animation",
              "Performance-Optimierung",
              "Web-Applikationen",
              "Interaktive Web-Erlebnisse",
              "Mediengestaltung",
              "Tools und Automatisierung",
              "Künstliche Intelligenz"
            ],
            "sameAs": [
              "https://github.com/NiklasKnaack",
              "https://codepen.io/NiklasKnaack",
              "https://de.linkedin.com/in/niklas-knaack-043658b1",
              "https://www.xing.com/profile/Niklas_Knaack",
              "https://www.instagram.com/niklasknaack/",
              "https://x.com/niklaswebdev"
            ]
          }
        }
      ],
      "robotsMeta": "index, follow",
      "author": "Niklas Knaack",
      "generator": null,
      "markdownAlternateHref": null
    }
  },
  "markdown": "![Niklas Knaack](https://www.niklasknaack.de/img/hero-mobile-560.jpg)\n\nIch arbeite als Entwickler in Düsseldorf und baue Webseiten, Interfaces, Spiele, Tools, Experimente und interaktive Dinge fürs Web.\n\nHier findest du eine kleine Auswahl meiner Projekte, Experimente und Profile.\n\nMein Schwerpunkt liegt auf Frontend-Entwicklung, UI, Animation, Canvas, CSS und JavaScript – irgendwo zwischen sauberem Handwerk, technischer Struktur und kreativem Spielraum.\n\nInteressant wird es für mich besonders dann, wenn ein Projekt klare Anforderungen hat, aber trotzdem Platz für gute Ideen, Bewegung, Details und visuelle Qualität lässt.\n\nOb UI-Komponente, Animation, Canvas-Experiment oder Web-App: Ich mag Projekte, bei denen Gestaltung und Entwicklung zusammen gedacht werden.\n\n### Frontend & UI\n\nSaubere, zugängliche Interfaces mit Fokus auf Typografie, Layout und Performance.\n\n### Interaktive Erlebnisse\n\nAnimationen, Microinteractions und Canvas-Experimente beyond Tellerrand.\n\n### Web-Applikationen\n\nLeichte, wartbare Anwendungen mit modernen Technologien, klarer Struktur und nachvollziehbarer Architektur.\n\n### Creative Coding\n\nIdeen, Algorithmen und Code als kreative Werkzeuge für neue visuelle Formen und interaktive Erfahrungen.\n\nVisuelle Ideen, Experimente und interaktive Prototypen auf [CodePen](https://codepen.io/NiklasKnaack).\n\nHier findest du eine kleine Auswahl meiner CodePen-Experimente.\n\n### Wähle ein Experiment aus\n\nEin Klick öffnet das jeweilige Projekt, beim Hover bekommst du eine kurze Info dazu.\n\n### Wire Curtain Playground\n\nEin kleines Experiment, das einen hängenden Vorhang aus mehreren Fäden simuliert.\n\n### Flying Donuts V2\n\nEin Experiment mit fliegenden Donuts, Backface Culling, dynamischem Licht und LOD.\n\n### Pine forest - bird's-eye view\n\nIn diesem Experiment fliegt ihr über einen endlos großen Kiefernwald.\n\n### Bird’s Eye Metropolis\n\nIn diesem Experiment fliegt ihr in der Vogelperspektive über eine endlos große Metropole.\n\n### Radiohead - House Of Cards\n\nInteraktives Video Experiment mit dem Material von James Frost zu „House of Cards“ von Radiohead.\n\n### SVG Glyph Pattern Doodler\n\nEin einfacher Algorithmus, der Muster aus Glyphen in ein SVG-Dokument zeichnet.\n\n### Cuboid Warptunnel Audio Visualizer\n\nEin interaktives Audio-Visualizer-Tunnel-Experiment.\n\n### QLOCKTWO - time in words\n\nDieses Experiment ist mein Versuch, die QLOCKTWO Uhr fürs Web umzusetzen.\n\n### Rheinturm Lichtzeitpegel Clock\n\nEine mit CSS gestaltete Version des Rheinturms in Düsseldorf mit Lichtzeitpegel Uhr.\n\n### Pixel Flame Canvas - Doom Fire\n\nEine “Doom Fire” Simulation.\n\n### Starfield/Warpdrive Particles\n\nEin Starfield/Hyperspace Experiment.\n\n### Generative Art Gallery - Metaballs V2\n\nEin WebGL Metaballs Experiment inspiriert von Jamie Wong & Jan Kaláb\n\nSeit über 25 Jahren beschäftige ich mich mit Webtechnologien, Mediengestaltung und digitalen Oberflächen. Aus den ersten eigenen Seiten und Experimenten wurde irgendwann mein Beruf: Heute arbeite ich als Entwickler und baue Webseiten, Interfaces, Anwendungen, Spiele, kleine Tools und interaktive Erlebnisse fürs Web.\n\nDabei nutze ich je nach Projekt unterschiedliche Technologien, Frameworks und Werkzeuge – mal klassisch, mal experimentell, aber immer mit Blick auf Struktur, Gestaltung, Performance und gute Bedienbarkeit.\n\nAktuell interessieren mich besonders performante Interfaces, generative Gestaltung, Canvas/WebGL-Experimente, neue CSS Features und der sinnvolle Einsatz von KI im Entwicklungsalltag.\n\nEine Auswahl an Technologien, Frameworks, Libraries und Tools, mit denen ich gearbeitet habe, aktuell arbeite oder immer wieder experimentiere.\n\nHier findest du ein paar Orte, an denen ich Code, Experimente, Projekte und manchmal auch Gedanken teile.\n\nWenn du sehen möchtest, womit ich mich technisch und visuell beschäftige, findest du hier weitere Profile, Eindrücke und Wege, mit mir in Kontakt zu bleiben.\n\nHast du eine Idee, ein Projekt oder einfach eine Frage? Schreib mir gerne.\n\nNutze einfach das Kontaktformular oder schreibe mir direkt eine [E-Mail](mailto:[email protected]).\n",
  "fullPageMarkdown": "Niklas Knaack – Webentwicklung & Creative Coding aus Düsseldorf\n\n![Niklas Knaack](https://www.niklasknaack.de/img/logo-nk-prod.svg)\n\n   ![Niklas Knaack](https://www.niklasknaack.de/img/hero-mobile-560.jpg)\n\n// 00 Intro\n\n# Niklas Knaack\n\nIch arbeite als Entwickler in Düsseldorf und baue Webseiten, Interfaces, Spiele, Tools, Experimente und interaktive Dinge fürs Web.\n\nHier findest du eine kleine Auswahl meiner Projekte, Experimente und Profile.\n\n// 01 Profil\n\n## Webentwicklung\n\nMein Schwerpunkt liegt auf Frontend-Entwicklung, UI, Animation, Canvas, CSS und JavaScript – irgendwo zwischen sauberem Handwerk, technischer Struktur und kreativem Spielraum.\n\nInteressant wird es für mich besonders dann, wenn ein Projekt klare Anforderungen hat, aber trotzdem Platz für gute Ideen, Bewegung, Details und visuelle Qualität lässt.\n\nOb UI-Komponente, Animation, Canvas-Experiment oder Web-App: Ich mag Projekte, bei denen Gestaltung und Entwicklung zusammen gedacht werden.\n\n### Frontend & UI\n\nSaubere, zugängliche Interfaces mit Fokus auf Typografie, Layout und Performance.\n\n### Interaktive Erlebnisse\n\nAnimationen, Microinteractions und Canvas-Experimente beyond Tellerrand.\n\n### Web-Applikationen\n\nLeichte, wartbare Anwendungen mit modernen Technologien, klarer Struktur und nachvollziehbarer Architektur.\n\n### Creative Coding\n\nIdeen, Algorithmen und Code als kreative Werkzeuge für neue visuelle Formen und interaktive Erfahrungen.\n\n// 02 Experimente\n\n## Code, Canvas und visuelle Prototypen\n\nVisuelle Ideen, Experimente und interaktive Prototypen auf [CodePen](https://codepen.io/NiklasKnaack).\n\nHier findest du eine kleine Auswahl meiner CodePen-Experimente.\n\n-   [CodePen Experiment 1](https://codepen.io/NiklasKnaack/full/dPpqEgW)\n-   [CodePen Experiment 2](https://codepen.io/NiklasKnaack/full/XJmwvLE)\n-   [CodePen Experiment 3](https://codepen.io/NiklasKnaack/full/poXMwEW)\n-   [CodePen Experiment 4](https://codepen.io/NiklasKnaack/full/rNEwYWZ)\n-   [CodePen Experiment 5](https://codepen.io/NiklasKnaack/full/Jjjxgea)\n-   [CodePen Experiment 6](https://codepen.io/NiklasKnaack/full/xxGpOOb)\n-   [CodePen Experiment 7](https://codepen.io/NiklasKnaack/full/WyWqja)\n-   [CodePen Experiment 8](https://codepen.io/NiklasKnaack/full/raBxyvo)\n-   [CodePen Experiment 9](https://codepen.io/NiklasKnaack/full/ByQjLor)\n-   [CodePen Experiment 10](https://codepen.io/NiklasKnaack/full/OJKoyKd)\n-   [CodePen Experiment 11](https://codepen.io/NiklasKnaack/full/RwqeGQr)\n-   [CodePen Experiment 12](https://codepen.io/NiklasKnaack/full/xxJxzOP)\n\n### Wähle ein Experiment aus\n\nEin Klick öffnet das jeweilige Projekt, beim Hover bekommst du eine kurze Info dazu.\n\n### Wire Curtain Playground\n\nEin kleines Experiment, das einen hängenden Vorhang aus mehreren Fäden simuliert.\n\n### Flying Donuts V2\n\nEin Experiment mit fliegenden Donuts, Backface Culling, dynamischem Licht und LOD.\n\n### Pine forest - bird's-eye view\n\nIn diesem Experiment fliegt ihr über einen endlos großen Kiefernwald.\n\n### Bird’s Eye Metropolis\n\nIn diesem Experiment fliegt ihr in der Vogelperspektive über eine endlos große Metropole.\n\n### Radiohead - House Of Cards\n\nInteraktives Video Experiment mit dem Material von James Frost zu „House of Cards“ von Radiohead.\n\n### SVG Glyph Pattern Doodler\n\nEin einfacher Algorithmus, der Muster aus Glyphen in ein SVG-Dokument zeichnet.\n\n### Cuboid Warptunnel Audio Visualizer\n\nEin interaktives Audio-Visualizer-Tunnel-Experiment.\n\n### QLOCKTWO - time in words\n\nDieses Experiment ist mein Versuch, die QLOCKTWO Uhr fürs Web umzusetzen.\n\n### Rheinturm Lichtzeitpegel Clock\n\nEine mit CSS gestaltete Version des Rheinturms in Düsseldorf mit Lichtzeitpegel Uhr.\n\n### Pixel Flame Canvas - Doom Fire\n\nEine “Doom Fire” Simulation.\n\n### Starfield/Warpdrive Particles\n\nEin Starfield/Hyperspace Experiment.\n\n### Generative Art Gallery - Metaballs V2\n\nEin WebGL Metaballs Experiment inspiriert von Jamie Wong & Jan Kaláb\n\n [![](https://www.niklasknaack.de/img/codepen-example-01.png)\n\n### Wire Curtain Playground\n\nEin kleines Experiment, das einen hängenden Vorhang aus mehreren Fäden simuliert.](https://codepen.io/NiklasKnaack/full/dPpqEgW)\n\n [![](https://www.niklasknaack.de/img/codepen-example-02.png)\n\n### Flying Donuts V2\n\nEin Experiment mit fliegenden Donuts, Backface Culling, dynamischem Licht und LOD.](https://codepen.io/NiklasKnaack/full/XJmwvLE)\n\n [![](https://www.niklasknaack.de/img/codepen-example-03.png)\n\n### Pine forest - bird's-eye view\n\nIn diesem Experiment fliegt ihr über einen endlos großen Kiefernwald.](https://codepen.io/NiklasKnaack/full/poXMwEW)\n\n [![](https://www.niklasknaack.de/img/codepen-example-04.png)\n\n### Bird’s Eye Metropolis\n\nIn diesem Experiment fliegt ihr in der Vogelperspektive über eine endlos große Metropole.](https://codepen.io/NiklasKnaack/full/rNEwYWZ)\n\n [![](https://www.niklasknaack.de/img/codepen-example-05.png)\n\n### Radiohead - House Of Cards\n\nInteraktives Video Experiment mit dem Material von James Frost zu „House of Cards“ von Radiohead.](https://codepen.io/NiklasKnaack/full/Jjjxgea)\n\n [![](https://www.niklasknaack.de/img/codepen-example-06.png)\n\n### SVG Glyph Pattern Doodler\n\nEin einfacher Algorithmus, der Muster aus Glyphen in ein SVG-Dokument zeichnet.](https://codepen.io/NiklasKnaack/full/xxGpOOb)\n\n [![](https://www.niklasknaack.de/img/codepen-example-07.png)\n\n### Cuboid Warptunnel Audio Visualizer\n\nEin interaktives Audio-Visualizer-Tunnel-Experiment.](https://codepen.io/NiklasKnaack/full/WyWqja)\n\n [![](https://www.niklasknaack.de/img/codepen-example-08.png)\n\n### QLOCKTWO - time in words\n\nDieses Experiment ist mein Versuch, die QLOCKTWO Uhr fürs Web umzusetzen.](https://codepen.io/NiklasKnaack/full/raBxyvo)\n\n [![](https://www.niklasknaack.de/img/codepen-example-09.png)\n\n### Rheinturm Lichtzeitpegel Clock\n\nEine mit CSS gestaltete Version des Rheinturms in Düsseldorf mit Lichtzeitpegel Uhr.](https://codepen.io/NiklasKnaack/full/ByQjLor)\n\n [![](https://www.niklasknaack.de/img/codepen-example-10.png)\n\n### Pixel Flame Canvas - Doom Fire\n\nEine “Doom Fire” Simulation.](https://codepen.io/NiklasKnaack/full/OJKoyKd)\n\n [![](https://www.niklasknaack.de/img/codepen-example-11.png)\n\n### Starfield/Warpdrive Particles\n\nEin Starfield/Hyperspace Experiment.](https://codepen.io/NiklasKnaack/full/RwqeGQr)\n\n [![](https://www.niklasknaack.de/img/codepen-example-12.png)\n\n### Generative Art Gallery - Metaballs V2\n\nEin WebGL Metaballs Experiment inspiriert von Jamie Wong & Jan Kaláb](https://codepen.io/NiklasKnaack/full/xxJxzOP)\n\n// 03 Technologien\n\n## Techno­logien im Einsatz\n\nSeit über 25 Jahren beschäftige ich mich mit Webtechnologien, Mediengestaltung und digitalen Oberflächen. Aus den ersten eigenen Seiten und Experimenten wurde irgendwann mein Beruf: Heute arbeite ich als Entwickler und baue Webseiten, Interfaces, Anwendungen, Spiele, kleine Tools und interaktive Erlebnisse fürs Web.\n\nDabei nutze ich je nach Projekt unterschiedliche Technologien, Frameworks und Werkzeuge – mal klassisch, mal experimentell, aber immer mit Blick auf Struktur, Gestaltung, Performance und gute Bedienbarkeit.\n\nAktuell interessieren mich besonders performante Interfaces, generative Gestaltung, Canvas/WebGL-Experimente, neue CSS Features und der sinnvolle Einsatz von KI im Entwicklungsalltag.\n\nEine Auswahl an Technologien, Frameworks, Libraries und Tools, mit denen ich gearbeitet habe, aktuell arbeite oder immer wieder experimentiere.\n\n-   [HTML5](https://developer.mozilla.org/en-US/docs/Glossary/HTML5)\n\n-   [CSHTML](https://learn.microsoft.com/en-us/aspnet/core/mvc/views/razor)\n\n-   [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS)\n\n-   [CSS3](https://developer.mozilla.org/en-US/docs/Web/CSS)\n\n-   [SCSS / Sass](https://sass-lang.com/)\n\n-   [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript)\n\n-   [Canvas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API)\n\n-   [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG)\n\n-   [WebGL](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API)\n\n-   [Bootstrap](https://getbootstrap.com/)\n\n-   [Select2](https://select2.org/)\n\n-   [Slick Slider](https://kenwheeler.github.io/slick/)\n\n-   [SweetAlert2](https://sweetalert2.github.io/)\n\n-   [Foundation](https://get.foundation/)\n\n-   [JSON](https://www.json.org/json-en.html)\n\n-   [Angular](https://angular.dev/)\n\n-   [React](https://react.dev/)\n\n-   [Vue.js](https://vuejs.org/)\n\n-   [Node.js](https://nodejs.org/)\n\n-   [Next.js](https://nextjs.org/)\n\n-   [GSAP](https://gsap.com/)\n\n-   [Three.js](https://threejs.org/)\n\n-   [CreateJS](https://createjs.com/)\n\n-   [p5.js](https://p5js.org/)\n\n-   [Matter.js](https://brm.io/matter-js/)\n\n-   [ExtJS](https://www.sencha.com/products/extjs/)\n\n-   [PlayCanvas](https://playcanvas.com/)\n\n-   [D3.js](https://d3js.org/)\n\n-   [PixiJS](https://pixijs.com/)\n\n-   [Svelte](https://svelte.dev/)\n\n-   [jQuery](https://jquery.com/)\n\n-   [Responsive Design](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design)\n\n-   [UI Development](https://developer.mozilla.org/en-US/docs/Learn/Accessibility)\n\n-   [Animation](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations)\n\n-   [Performance](https://web.dev/performance/)\n\n-   [Creative Coding](https://en.wikipedia.org/wiki/Creative_coding)\n\n-   [AI](https://en.wikipedia.org/wiki/Artificial_intelligence)\n\n-   [Prompt Engineering](https://www.promptingguide.ai/)\n\n-   [Ollama](https://ollama.com/)\n\n-   [npm](https://www.npmjs.com/)\n\n-   [nvm](https://github.com/nvm-sh/nvm)\n\n-   [Gulp](https://gulpjs.com/)\n\n-   [Grunt](https://gruntjs.com/)\n\n-   [Webpack](https://webpack.js.org/)\n\n-   [Git](https://git-scm.com/)\n\n-   [Accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility)\n\n-   [Web APIs](https://developer.mozilla.org/en-US/docs/Web/API)\n\n-   [Web Workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API)\n\n-   [Web Audio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API)\n\n-   [WebXR](https://developer.mozilla.org/en-US/docs/Web/API/WebXR_Device_API)\n\n-   [GLSL](https://www.khronos.org/webgl/)\n\n-   [ShaderToy](https://www.shadertoy.com/)\n\n-   [WebGPU](https://developer.mozilla.org/en-US/docs/Web/API/WebGPU_API)\n\n-   [TypeScript](https://www.typescriptlang.org/)\n\n-   [Swiper](https://swiperjs.com/)\n\n-   [ESLint](https://eslint.org/)\n\n-   [Prettier](https://prettier.io/)\n\n-   [PostCSS](https://postcss.org/)\n\n-   [Babel](https://babeljs.io/)\n\n-   [Yarn](https://yarnpkg.com/)\n\n-   [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview)\n\n### Frontend\n\n-   [Accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility)\n-   [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS)\n-   [CSHTML](https://learn.microsoft.com/en-us/aspnet/core/mvc/views/razor)\n-   [HTML5](https://developer.mozilla.org/en-US/docs/Glossary/HTML5)\n-   [Animation](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations)\n-   [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript)\n-   [JSON](https://www.json.org/json-en.html)\n-   [Performance](https://web.dev/performance/)\n-   [Responsive Design](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design)\n-   [SCSS / Sass](https://sass-lang.com/)\n-   [TypeScript](https://www.typescriptlang.org/)\n-   [UI Development](https://developer.mozilla.org/en-US/docs/Learn/Accessibility)\n-   [Web APIs](https://developer.mozilla.org/en-US/docs/Web/API)\n\n### Creative Coding\n\n-   [Canvas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API)\n-   [Creative Coding](https://en.wikipedia.org/wiki/Creative_coding)\n-   [CreateJS](https://createjs.com/)\n-   [D3.js](https://d3js.org/)\n-   [GLSL](https://www.khronos.org/webgl/)\n-   [GSAP](https://gsap.com/)\n-   [Matter.js](https://brm.io/matter-js/)\n-   [p5.js](https://p5js.org/)\n-   [PixiJS](https://pixijs.com/)\n-   [PlayCanvas](https://playcanvas.com/)\n-   [ShaderToy](https://www.shadertoy.com/)\n-   [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG)\n-   [Three.js](https://threejs.org/)\n-   [Web Audio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API)\n-   [WebGL](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API)\n-   [WebGPU](https://developer.mozilla.org/en-US/docs/Web/API/WebGPU_API)\n-   [WebXR](https://developer.mozilla.org/en-US/docs/Web/API/WebXR_Device_API)\n\n### Frameworks & Libraries\n\n-   [Angular](https://angular.dev/)\n-   [Bootstrap](https://getbootstrap.com/)\n-   [ExtJS](https://www.sencha.com/products/extjs/)\n-   [Foundation](https://get.foundation/)\n-   [jQuery](https://jquery.com/)\n-   [Next.js](https://nextjs.org/)\n-   [React](https://react.dev/)\n-   [Select2](https://select2.org/)\n-   [Slick Slider](https://kenwheeler.github.io/slick/)\n-   [Svelte](https://svelte.dev/)\n-   [SweetAlert2](https://sweetalert2.github.io/)\n-   [Swiper](https://swiperjs.com/)\n-   [Vue.js](https://vuejs.org/)\n\n### Tools & Automation\n\n-   [AI](https://en.wikipedia.org/wiki/Artificial_intelligence)\n-   [Babel](https://babeljs.io/)\n-   [ESLint](https://eslint.org/)\n-   [Git](https://git-scm.com/)\n-   [Grunt](https://gruntjs.com/)\n-   [Gulp](https://gulpjs.com/)\n-   [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview)\n-   [Node.js](https://nodejs.org/)\n-   [nvm](https://github.com/nvm-sh/nvm)\n-   [npm](https://www.npmjs.com/)\n-   [Ollama](https://ollama.com/)\n-   [PostCSS](https://postcss.org/)\n-   [Prettier](https://prettier.io/)\n-   [Prompt Engineering](https://www.promptingguide.ai/)\n-   [Web Workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API)\n-   [Webpack](https://webpack.js.org/)\n-   [Yarn](https://yarnpkg.com/)\n\n// 04 Links\n\n## Profile und digitale Spuren\n\nHier findest du ein paar Orte, an denen ich Code, Experimente, Projekte und manchmal auch Gedanken teile.\n\nWenn du sehen möchtest, womit ich mich technisch und visuell beschäftige, findest du hier weitere Profile, Eindrücke und Wege, mit mir in Kontakt zu bleiben.\n\n[GitHub](https://github.com/NiklasKnaack) [CodePen](https://codepen.io/NiklasKnaack) [LinkedIn](https://de.linkedin.com/in/niklas-knaack-043658b1) [Xing](https://www.xing.com/profile/Niklas_Knaack) [Instagram](https://www.instagram.com/niklasknaack/) [X](https://x.com/niklaswebdev) [JSFiddle](https://jsfiddle.net/u/NiklasKnaack/fiddles/) [Blog](http://blog.niklasknaack.de/) [DeviantArt](https://www.deviantart.com/nkunited)\n\n[GitHub](https://github.com/NiklasKnaack) [CodePen](https://codepen.io/NiklasKnaack) [LinkedIn](https://de.linkedin.com/in/niklas-knaack-043658b1) [Xing](https://www.xing.com/profile/Niklas_Knaack) [Instagram](https://www.instagram.com/niklasknaack/) [X](https://x.com/niklaswebdev) [JSFiddle](https://jsfiddle.net/u/NiklasKnaack/fiddles/) [Blog](http://blog.niklasknaack.de/) [DeviantArt](https://www.deviantart.com/nkunited)\n\n// 05 Kontakt\n\n## Schreib mir\n\nHast du eine Idee, ein Projekt oder einfach eine Frage? Schreib mir gerne.\n\nNutze einfach das Kontaktformular oder schreibe mir direkt eine [E-Mail](mailto:[email protected]).\n\nFehler: Kein gültiger Name\n\nFehler: Keine gültige Email Adresse\n\nFehler: Deine Nachricht ist zu kurz\n\nAbsenden →\n\nIch verwende Cookies, um meine Website zu verbessern und zu analysieren. Weitere Informationen findest du in der [Datenschutzerklärung](https://www.niklasknaack.de/datenschutz.html).\n\nAblehnen Akzeptieren\n",
  "markdownStats": {
    "images": 1,
    "links": 2,
    "tables": 0,
    "codeBlocks": 0,
    "headings": 17
  },
  "tokens": {
    "htmlTokens": 16570,
    "markdownTokens": 1036,
    "reduction": 15534,
    "reductionPercent": 94
  },
  "score": {
    "score": 83,
    "grade": "B",
    "rubricVersion": 2,
    "dimensions": {
      "accessibility": {
        "score": 100,
        "weight": 30,
        "grade": "A",
        "checks": {
          "content_without_js": {
            "score": 100,
            "weight": 55,
            "evidence": "proven",
            "details": "Content available without JavaScript"
          },
          "fast_content_position": {
            "score": 100,
            "weight": 25,
            "evidence": "plausible",
            "details": "Main content starts at 7% of HTML"
          },
          "reasonable_page_size": {
            "score": 100,
            "weight": 20,
            "evidence": "plausible",
            "details": "Page size: 86KB"
          }
        }
      },
      "aiDiscoverability": {
        "score": 60,
        "weight": 25,
        "grade": "C",
        "checks": {
          "robots_allows_ai_bots": {
            "score": 100,
            "weight": 35,
            "evidence": "proven",
            "details": "All major AI search bots allowed"
          },
          "supports_markdown_negotiation": {
            "score": 0,
            "weight": 20,
            "evidence": "plausible",
            "details": "No Markdown for Agents support detected"
          },
          "has_sitemap": {
            "score": 100,
            "weight": 15,
            "evidence": "plausible",
            "details": "Sitemap found"
          },
          "has_robots_txt": {
            "score": 100,
            "weight": 10,
            "evidence": "plausible",
            "details": "robots.txt exists"
          },
          "has_llms_txt": {
            "score": 0,
            "weight": 10,
            "evidence": "speculative",
            "details": "No llms.txt found"
          },
          "has_content_signals": {
            "score": 0,
            "weight": 10,
            "evidence": "speculative",
            "details": "No Content-Signal found (robots.txt or HTTP headers)"
          }
        }
      },
      "structuredData": {
        "score": 83,
        "weight": 20,
        "grade": "B",
        "checks": {
          "has_schema_org": {
            "score": 50,
            "weight": 35,
            "evidence": "proven",
            "details": "JSON-LD found but basic types: ProfilePage"
          },
          "has_open_graph": {
            "score": 100,
            "weight": 20,
            "evidence": "plausible",
            "details": "All OG tags present"
          },
          "has_meta_description": {
            "score": 100,
            "weight": 20,
            "evidence": "plausible",
            "details": "Meta description: 138 chars"
          },
          "has_canonical_url": {
            "score": 100,
            "weight": 15,
            "evidence": "plausible",
            "details": "Canonical URL present"
          },
          "has_lang_attribute": {
            "score": 100,
            "weight": 10,
            "evidence": "plausible",
            "details": "lang=\"de\""
          }
        }
      },
      "semanticHtml": {
        "score": 90,
        "weight": 15,
        "grade": "A",
        "checks": {
          "proper_heading_hierarchy": {
            "score": 100,
            "weight": 30,
            "evidence": "plausible",
            "details": "Clean heading hierarchy"
          },
          "uses_article_or_main": {
            "score": 100,
            "weight": 25,
            "evidence": "plausible",
            "details": "Has both <article> and <main>"
          },
          "semantic_elements": {
            "score": 50,
            "weight": 20,
            "evidence": "plausible",
            "details": "37 semantic elements, 209 divs (ratio: 15%)"
          },
          "meaningful_alt_texts": {
            "score": 100,
            "weight": 15,
            "evidence": "plausible",
            "details": "2/2 images with meaningful alt text (12 decorative, not counted)"
          },
          "low_div_nesting": {
            "score": 98,
            "weight": 10,
            "evidence": "speculative",
            "details": "Avg div depth: 5.2, max: 7"
          }
        }
      },
      "contentEfficiency": {
        "score": 75,
        "weight": 10,
        "grade": "B",
        "checks": {
          "token_reduction_ratio": {
            "score": 100,
            "weight": 40,
            "evidence": "speculative",
            "details": "94% token reduction (HTML→Markdown)"
          },
          "content_to_noise_ratio": {
            "score": 50,
            "weight": 30,
            "evidence": "speculative",
            "details": "Content ratio: 10.3% (9041 content chars / 87737 HTML bytes)"
          },
          "reasonable_page_weight": {
            "score": 100,
            "weight": 20,
            "evidence": "speculative",
            "details": "HTML size: 86KB"
          },
          "minimal_inline_styles": {
            "score": 0,
            "weight": 10,
            "evidence": "speculative",
            "details": "114/871 elements with inline styles (13.1%)"
          }
        }
      }
    }
  },
  "recommendations": [
    {
      "id": "add_markdown_negotiation",
      "priority": "critical",
      "category": "aiDiscoverability",
      "titleKey": "rec.add_markdown_negotiation.title",
      "descriptionKey": "rec.add_markdown_negotiation.description",
      "howToKey": "rec.add_markdown_negotiation.howto",
      "effort": "significant",
      "estimatedImpact": 5,
      "maxImpact": 5,
      "evidence": "plausible",
      "checkScore": 0,
      "checkDetails": "No Markdown for Agents support detected"
    },
    {
      "id": "add_llms_txt",
      "priority": "high",
      "category": "aiDiscoverability",
      "titleKey": "rec.add_llms_txt.title",
      "descriptionKey": "rec.add_llms_txt.description",
      "howToKey": "rec.add_llms_txt.howto",
      "effort": "quick-win",
      "estimatedImpact": 2.5,
      "maxImpact": 2.5,
      "evidence": "speculative",
      "checkScore": 0,
      "checkDetails": "No llms.txt found"
    },
    {
      "id": "add_content_signals",
      "priority": "high",
      "category": "aiDiscoverability",
      "titleKey": "rec.add_content_signals.title",
      "descriptionKey": "rec.add_content_signals.description",
      "howToKey": "rec.add_content_signals.howto",
      "effort": "quick-win",
      "estimatedImpact": 2.5,
      "maxImpact": 2.5,
      "evidence": "speculative",
      "checkScore": 0,
      "checkDetails": "No Content-Signal found (robots.txt or HTTP headers)"
    },
    {
      "id": "remove_inline_styles",
      "priority": "medium",
      "category": "contentEfficiency",
      "titleKey": "rec.remove_inline_styles.title",
      "descriptionKey": "rec.remove_inline_styles.description",
      "howToKey": "rec.remove_inline_styles.howto",
      "effort": "moderate",
      "estimatedImpact": 1,
      "maxImpact": 1,
      "evidence": "speculative",
      "checkScore": 0,
      "checkDetails": "114/871 elements with inline styles (13.1%)"
    }
  ],
  "llmsTxtPreview": "# Niklas Knaack\n\n> Persönliche Website von Niklas Knaack aus Düsseldorf: Webentwicklung, Frontend, UI, JavaScript, CSS, Canvas und kreative Code-Experimente.\n\n## Main\n- [Niklas Knaack – Webentwicklung & Creative Coding aus Düsseldorf](https://www.niklasknaack.de): Persönliche Website von Niklas Knaack aus Düsseldorf: Webentwicklung, Frontend, UI, JavaScript, CSS, Canvas und kreativ…\n- [Profil](https://www.niklasknaack.de/)\n- [Impressum](https://www.niklasknaack.de/impressum.html)\n- [Datenschutz](https://www.niklasknaack.de/datenschutz.html)\n\n",
  "llmsTxtExisting": null,
  "emergingProtocols": {
    "oauthProtectedResource": {
      "exists": false,
      "url": "https://www.niklasknaack.de/.well-known/oauth-protected-resource"
    },
    "oauthDiscovery": {
      "exists": false,
      "url": "https://www.niklasknaack.de/.well-known/oauth-authorization-server"
    },
    "mcpServerCard": {
      "exists": false,
      "url": "https://www.niklasknaack.de/.well-known/mcp/server-card.json",
      "draft": true
    },
    "a2aAgentCard": {
      "exists": false,
      "url": "https://www.niklasknaack.de/.well-known/agent-card.json"
    },
    "apiCatalog": {
      "exists": false,
      "url": "https://www.niklasknaack.de/.well-known/api-catalog"
    },
    "agentSkills": {
      "exists": false,
      "url": "https://www.niklasknaack.de/.well-known/agent-skills/index.json",
      "draft": true
    },
    "count": 0,
    "total": 6
  },
  "botAccess": {
    "probed": true,
    "bot": "OAI-SearchBot",
    "controlStatus": 200,
    "botStatus": 200,
    "discriminates": false,
    "refusedAsBot": false,
    "edge": null,
    "verifiable": false,
    "detail": "This origin answers OAI-SearchBot exactly as it answers any other client (200). No edge-level filtering of AI crawlers observed."
  },
  "snippets": [
    {
      "id": "add_llms_txt",
      "title": "Create /llms.txt",
      "description": "Upload this file to your web root. It tells AI agents what your site is about and which pages matter.",
      "language": "markdown",
      "code": "# Niklas Knaack\n\n> Persönliche Website von Niklas Knaack aus Düsseldorf: Webentwicklung, Frontend, UI, JavaScript, CSS, Canvas und kreative Code-Experimente.\n\n## Main\n- [Niklas Knaack – Webentwicklung & Creative Coding aus Düsseldorf](https://www.niklasknaack.de): Persönliche Website von Niklas Knaack aus Düsseldorf: Webentwicklung, Frontend, UI, JavaScript, CSS, Canvas und kreativ…\n- [Profil](https://www.niklasknaack.de/)\n- [Impressum](https://www.niklasknaack.de/impressum.html)\n- [Datenschutz](https://www.niklasknaack.de/datenschutz.html)\n\n",
      "filename": "/llms.txt"
    },
    {
      "id": "add_content_signals",
      "title": "Add Content-Signal directives",
      "description": "Content-Signal tells AI agents how they may use your content. The canonical location is robots.txt, but you can also expose it as an HTTP header from any stack.",
      "language": "txt",
      "code": "User-agent: *\nContent-Signal: search=yes, ai-input=yes, ai-train=no",
      "filename": "/robots.txt",
      "stacks": [
        {
          "id": "robots",
          "label": "robots.txt",
          "language": "txt",
          "filename": "/robots.txt",
          "code": "User-agent: *\nContent-Signal: search=yes, ai-input=yes, ai-train=no"
        },
        {
          "id": "nginx",
          "label": "Nginx",
          "language": "nginx",
          "filename": "server block",
          "code": "# Inside your server { } block:\nadd_header Content-Signal \"search=yes, ai-input=yes, ai-train=no\" always;"
        },
        {
          "id": "apache",
          "label": "Apache",
          "language": "apache",
          "filename": ".htaccess",
          "code": "# In .htaccess (or VirtualHost):\nHeader set Content-Signal \"search=yes, ai-input=yes, ai-train=no\""
        },
        {
          "id": "wordpress",
          "label": "WordPress",
          "language": "php",
          "filename": "functions.php",
          "code": "<?php\n// In your theme's functions.php or a small mu-plugin\nadd_action('send_headers', function () {\n    header('Content-Signal: search=yes, ai-input=yes, ai-train=no');\n});\n\n// Optional: also append the directive to the dynamic robots.txt\nadd_filter('robots_txt', function ($output) {\n    return $output . \"\\nContent-Signal: search=yes, ai-input=yes, ai-train=no\\n\";\n}, 10, 1);"
        },
        {
          "id": "nextjs",
          "label": "Next.js",
          "language": "typescript",
          "filename": "middleware.ts",
          "code": "// middleware.ts (Next.js 13+ App Router or Pages Router)\nimport { NextResponse } from 'next/server';\nexport function middleware() {\n  const res = NextResponse.next();\n  res.headers.set(\n    'Content-Signal',\n    'search=yes, ai-input=yes, ai-train=no'\n  );\n  return res;\n}\nexport const config = { matcher: '/:path*' };"
        },
        {
          "id": "cloudflare",
          "label": "Cloudflare Workers",
          "language": "javascript",
          "filename": "worker.js",
          "code": "// Cloudflare Worker that proxies your origin and adds the header\nexport default {\n  async fetch(request, env, ctx) {\n    const res = await fetch(request);\n    const newRes = new Response(res.body, res);\n    newRes.headers.set(\n      'Content-Signal',\n      'search=yes, ai-input=yes, ai-train=no'\n    );\n    return newRes;\n  },\n};"
        },
        {
          "id": "express",
          "label": "Express / Fastify",
          "language": "javascript",
          "filename": "server.js",
          "code": "// Express\napp.use((req, res, next) => {\n  res.setHeader('Content-Signal', 'search=yes, ai-input=yes, ai-train=no');\n  next();\n});\n\n// Fastify\nfastify.addHook('onSend', (request, reply, payload, done) => {\n  reply.header('Content-Signal', 'search=yes, ai-input=yes, ai-train=no');\n  done();\n});"
        }
      ]
    },
    {
      "id": "add_markdown_negotiation",
      "title": "Support Markdown for Agents",
      "description": "Let AI agents request a clean Markdown version of any page via content negotiation, .md alternate URLs, link tags or Link headers.",
      "language": "html",
      "code": "<!-- Mechanism 3: link tag advertising the .md alternate -->\n<link rel=\"alternate\" type=\"text/markdown\" href=\"/page.md\">",
      "filename": "<head>",
      "stacks": [
        {
          "id": "html",
          "label": "HTML <head>",
          "language": "html",
          "filename": "<head>",
          "code": "<!-- Mechanism 3: link tag advertising the .md alternate -->\n<link rel=\"alternate\" type=\"text/markdown\" href=\"/page.md\">"
        },
        {
          "id": "express",
          "label": "Express",
          "language": "javascript",
          "filename": "server.js",
          "code": "// Mechanisms 1 + 4: content negotiation + Link header\napp.get('/page', (req, res) => {\n  res.setHeader('Vary', 'Accept');\n  res.setHeader('Link', '</page.md>; rel=\"alternate\"; type=\"text/markdown\"');\n  if ((req.headers.accept || '').includes('text/markdown')) {\n    res.type('text/markdown; charset=utf-8');\n    return res.send(renderMarkdown('page'));\n  }\n  res.render('page');\n});"
        },
        {
          "id": "fastify",
          "label": "Fastify",
          "language": "javascript",
          "filename": "server.js",
          "code": "// Mechanisms 1 + 4: content negotiation + Link header\nfastify.get('/page', async (req, reply) => {\n  reply.header('Vary', 'Accept');\n  reply.header('Link', '</page.md>; rel=\"alternate\"; type=\"text/markdown\"');\n  if ((req.headers.accept || '').includes('text/markdown')) {\n    return reply.type('text/markdown; charset=utf-8').send(renderMarkdown('page'));\n  }\n  return reply.view('/page.ejs');\n});"
        },
        {
          "id": "nextjs",
          "label": "Next.js",
          "language": "typescript",
          "filename": "app/page/route.ts",
          "code": "// Next.js App Router — Route Handler returning Markdown\nimport { NextRequest } from 'next/server';\nimport { renderMarkdown } from '@/lib/md';\nexport async function GET(req: NextRequest) {\n  const accept = req.headers.get('accept') || '';\n  if (accept.includes('text/markdown')) {\n    return new Response(await renderMarkdown('page'), {\n      headers: {\n        'Content-Type': 'text/markdown; charset=utf-8',\n        'Vary': 'Accept',\n      },\n    });\n  }\n  // Fall through to the page component\n  return new Response(null, { status: 404 });\n}"
        },
        {
          "id": "wordpress",
          "label": "WordPress",
          "language": "php",
          "filename": "functions.php",
          "code": "<?php\n// Mechanism 1: respond to Accept: text/markdown on the same URL\nadd_action('template_redirect', function () {\n    if (!is_singular()) return;\n    $accept = $_SERVER['HTTP_ACCEPT'] ?? '';\n    if (strpos($accept, 'text/markdown') === false) return;\n    header('Content-Type: text/markdown; charset=utf-8');\n    header('Vary: Accept');\n    $post = get_queried_object();\n    echo \"# \" . get_the_title($post) . \"\\n\\n\";\n    echo wp_strip_all_tags(apply_filters('the_content', $post->post_content));\n    exit;\n});"
        },
        {
          "id": "static",
          "label": "Hugo / Jekyll / Astro",
          "language": "txt",
          "filename": "static/page.md",
          "code": "# Mechanism 2: serve .md alongside .html\n# Hugo: place page.md in /static/ — built unchanged\n# Jekyll: drop page.md in /assets/ — copied as-is\n# Astro: src/pages/page.md.ts that exports a GET returning markdown\n\n# Then advertise with mechanism 3 in <head>:\n#   <link rel=\"alternate\" type=\"text/markdown\" href=\"/page.md\">"
        }
      ]
    }
  ]
}

API를 사용하여 프로그래밍 방식으로 가져올 수 있습니다 (곧 출시)