From e2a556e3dd7edbd305b124224fb0b0837b9afffb Mon Sep 17 00:00:00 2001
From: Jonas Leder <jonas@jonasled.de>
Date: Thu, 18 Nov 2021 05:57:23 +0000
Subject: [PATCH] display skills with images
---
js/customElements/skills.js | 12 ++++++++++++
js/script.js | 1 +
public/index.html | 2 ++
scss/_skills.scss | 5 +++++
scss/style.scss | 1 +
5 files changed, 21 insertions(+)
create mode 100644 js/customElements/skills.js
create mode 100644 scss/_skills.scss
diff --git a/js/customElements/skills.js b/js/customElements/skills.js
new file mode 100644
index 0000000..d1938b8
--- /dev/null
+++ b/js/customElements/skills.js
@@ -0,0 +1,12 @@
+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
diff --git a/js/script.js b/js/script.js
index 0514b87..f9ec471 100644
--- a/js/script.js
+++ b/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
diff --git a/public/index.html b/public/index.html
index af38efd..4b4bf8b 100644
--- a/public/index.html
+++ b/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"
diff --git a/scss/_skills.scss b/scss/_skills.scss
new file mode 100644
index 0000000..2f24da8
--- /dev/null
+++ b/scss/_skills.scss
@@ -0,0 +1,5 @@
+jl-skills {
+ img {
+ max-height: 80px;
+ }
+}
\ No newline at end of file
diff --git a/scss/style.scss b/scss/style.scss
index 1432519..5d4550c 100644
--- a/scss/style.scss
+++ b/scss/style.scss
@@ -15,5 +15,6 @@
@import "home";
@import "prism";
@import "sellingTable";
+@import "skills";
@import "../node_modules/basiclightbox/src/styles/main";
--
GitLab