display skills with images

js/customElements/skills.js

+class Skill extends HTMLElement {
+    constructor() {
+        super();
+        ["python", "php", "sass", "css", "c_sharp", "html", "java", "arduino", "raspberry", "linux", "arch", "gitlab", "traefik", "proxmox"].forEach( skill => {
+            const image = document.createElement("img");
+            image.src = "/API/getFile.php?filename=skills/" + skill + ".png";
+            this.appendChild(image);
+        })
+    }
+}
+
+customElements.define("jl-skills", Skill);
\ No newline at end of file

js/script.js

@@ -18,3 +18,4 @@ require("./customElements/mainMenu");
 require("./customElements/footer");
 require("./customElements/ebkBanner");
 require("./customElements/sellingTable");
+require("./customElements/skills");
\ No newline at end of file

public/index.html

@@ -23,6 +23,8 @@
         <h2>Blog</h2>
         <jl-blog_index id="blog"></jl-blog_index>
         <jl-ebk-banner></jl-ebk-banner>
+        <h2>Skills</h2>
+        <jl-skills></jl-skills>
         <div id="banner">
             <h2>Banner</h2>
             <a href="https://ipv6.he.net" target="_blank"><img class="no-corner"

scss/_skills.scss

+jl-skills {
+    img {
+        max-height: 80px;
+    }
+}
\ No newline at end of file

scss/style.scss

@@ -15,5 +15,6 @@
 @import "home";
 @import "prism";
 @import "sellingTable";
+@import "skills";
 
 @import "../node_modules/basiclightbox/src/styles/main";