PHP 20:16 Uhr · Live-Demos · HTML/CSS/JS + Bootstrap

Skills.
Technik.
Chaos kontrolliert.

Diese Seite ist Absicht übertrieben: Aurora, Conic-Gradient-Ränder, Scroll-Timeline (wenn Ihr Browser mitmacht), 3D-Karten, Marquee — plus ein Playground mit Code↔Live-Vorschau, Pop-ups, Konfetti und einem rein CSS-gesteuerten „Chaos“-Schalter. Darunter: Nerd-UI (SVG, Perioden-Spaß, Terminal) und optional Three.js/WebGL mit Shader-Themes. Klassisch: HTML/CSS/JS, Bootstrap, React.

Runterscrollen

Das Labor

Hier simulieren wir „was Web heute kann“ — ohne Backend-Pflicht. Alles läuft im Tab; PHP rendert nur diese eine Zeile mit Uhrzeit oben.

Schichten & Tiefe

Fixed Noise, rotierender Conic-Aurora, Mesh-Gradient — Show statt Produktions-Minimalismus.

Klick mich

Motion

Keyframes, staggered delays, Glitch-Text — gezielt einsetzen, nicht auf jeder Behörden-Seite.

Klick mich

Progressive Enhancement

Erst Inhalt & Semantik, dann Glitzer. Barrierefreiheit und SEO liegen im gleichen Boot.

Klick mich
Conic-Gradient-Rahmen
Animiert mit @property — moderne Browser lieben das.

Playground — Code & Live-Vorschau

Dieselbe Idee wie in echten Projekten: links (oder oben auf dem Handy) der Quelltext, rechts das Ergebnis. Tabs wechseln das Snippet; ein paar Buttons feuern Extra-Animationen oder Pop-ups — alles Vanilla JS, keine Framework-Pflicht.

Quelle
Browser

Klassische Webentwicklung

HTML strukturiert, CSS gestaltet, JavaScript macht’s interaktiv — der Ur-Stack. Cool: Landingpages mit Charakter, Micro-Interactions, kleine Tools, volle Kontrolle.

Vanilla-JS Mini-Demo

0

Nerd-Modus: Tabelle, Radar, Terminal

SVG + CSS-Animation, ein Perioden-ähnliches Gitter für Tech-„Elemente“, und ein Spaß-Terminal — ohne Framework.

Periodensystem der Tech

1HHTML
6CCSS
9JJS
15PPHP
74WWebGL
88RReact
23VVite
7NNode
16SSQL
32GGit
∞ΣSkills

SVG-Radar (Hover)

Terminal-„Skill-Tree“

skills@defiebre

            
            
          

        

      

    


    

      

        
Bootstrap — was ist das?

        

          Bootstrap = fertiges Raster, Buttons, Cards, Collapse … Cool für Dashboards, Admin-UIs, schnelle Prototypen.
        

        

          

            

              
Live-Grid

              

                
col-6

                
col-6

                
4

                
4

                
4

              

            

            

              

                

                  
Card + Collapse

                  
Bootstrap-JS aus CDN — ein Klick, eingebaute Komponente.

                  
                  
Fertig.

                

              

            

          

        

      

    


    

      

        

          
Echte Arbeit statt Deko

          
Animationen sind Spaß — Referenzen zeigen, was bei Kunden im Einsatz ist: Websites, Software, konkrete Screens.

           Zu den Referenzen
        

      

    


    

      

        
React — was ist das?

        

          React: UI als Funktion von Daten; State-Änderung → gezieltes DOM-Update. Cool für SPAs (wie unsere Online-Tools), Komponenten-Bibliotheken, große Teams.
        

        

          Diese Seite läuft bewusst ohne React-Bundle. Die Tools unter x9k2m7wp/ sind dagegen React + Vite.
        

        

          

            
<App />

            

              
<Header />

              
<Main />

              
<Footer />

            

            
Tipp: Knoten fokussieren und Enter / Klick — kleines Pop-up mit „was passiert in React“.

          

        

      

    


    

      

        
Pure-CSS-Spielerei

        
Ohne JavaScript: ein versteckter Checkbox-Schalter stylt die Karte darunter — so kann man Themes, Akkordeons oder Menüs nur mit HTML+CSS bauen.

        

          
          
          

            
Modus aus: dezenter Verlauf, Ruhe.

            
Modus an: Neon-Rand, leichtes Wackeln, andere Typo — alles nur über :checked ~ … Selektoren.

          

        

      

    


    

      
      

        
        
Jetzt wird's ernst — Three.js

        

          Hybrid wie besprochen: oben bleibt das CSS-Labor — hier ein WebGL-Band mit Partikeln, Icosahedron-„Tech-Brocken“ und Maus-Parallax.
          Klick auf einen Brocken zum „Einsammeln“. Auf schmalen Viewports oder bei prefers-reduced-motion wird WebGL bewusst nicht gestartet.
          Stilistische Referenz zum Reinschauen: Bruno Simon,
          samsy.ninja,
          bilal.show — hier bewusst schlanker, aber erweiterbar.
        

        
        

          
Eingesammelt: 0 / 10

          

          
        

        
Tipp: Konami-Code auf der Tastatur…