diff --git a/icons/geizkragen.png b/icons/geizkragen.png
new file mode 100644
index 0000000..6698b4a
Binary files /dev/null and b/icons/geizkragen.png differ
diff --git a/icons/geizkragen.svg b/icons/geizkragen.svg
new file mode 100644
index 0000000..fa2bfb2
--- /dev/null
+++ b/icons/geizkragen.svg
@@ -0,0 +1,5 @@
+svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+
+ G
+
+
diff --git a/icons/gitea.svg b/icons/gitea.svg
new file mode 100644
index 0000000..9df6b83
--- /dev/null
+++ b/icons/gitea.svg
@@ -0,0 +1,31 @@
+
+
diff --git a/icons/nas.svg b/icons/nas.svg
new file mode 100644
index 0000000..0937bbf
--- /dev/null
+++ b/icons/nas.svg
@@ -0,0 +1,14 @@
+
+
diff --git a/icons/nextcloud.svg b/icons/nextcloud.svg
new file mode 100644
index 0000000..cc0cdb6
--- /dev/null
+++ b/icons/nextcloud.svg
@@ -0,0 +1,3 @@
+
+
+
\ No newline at end of file
diff --git a/icons/synology.svg b/icons/synology.svg
new file mode 100644
index 0000000..1627dfd
--- /dev/null
+++ b/icons/synology.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/index.php b/index.php
index 903e49b..3e46f17 100644
--- a/index.php
+++ b/index.php
@@ -5,14 +5,14 @@ $projects = [
"title" => "Gitea",
"description" => "Mein privates Git-Repository – Quellcode, Projekte & mehr.",
"url" => "/git",
- "icon" => "fab fa-git-alt",
- "color" => "#f97316"
+ "logo" => "icons/gitea.svg",
+ "color" => "#609926"
],
[
"title" => "Nextcloud",
"description" => "Meine persönliche Cloud – Dateien, Kalender & Kontakte.",
"url" => "/nextcloud",
- "icon" => "fas fa-cloud",
+ "logo" => "icons/nextcloud.svg",
"color" => "#0082c9"
],
],
@@ -21,8 +21,8 @@ $projects = [
"title" => "Geizkragen.store",
"description" => "Schulprojekt – Ein Online-Shop für Schnäppchenjäger.",
"url" => "https://geizkragen.store",
- "icon" => "fas fa-store",
- "color" => "#22c55e",
+ "logo" => "icons/geizkragen.png",
+ "color" => "#e8281e",
"external" => true
],
],
@@ -30,16 +30,16 @@ $projects = [
[
"title" => "Home Assistant",
"description" => "Meine Smart-Home-Zentrale – Automatisierungen & Geräte.",
- "url" => "https://homeassistant.fabianschieder.com",
- "icon" => "fas fa-house-signal",
- "color" => "#f59e0b",
+ "url" => "http://homeassistant.fabianschieder.com",
+ "logo" => "icons/homeassistant.svg",
+ "color" => "#18BCF2",
"external" => true
],
[
"title" => "NAS",
"description" => "Mein Netzwerkspeicher – Daten & Backups.",
- "url" => "https://nas.fabianschieder.com",
- "icon" => "fas fa-server",
+ "url" => "http://nas.fabianschieder.com",
+ "logo" => "icons/nas.svg",
"color" => "#a855f7",
"external" => true
],
@@ -86,7 +86,15 @@ $projects = [
style="--accent: = htmlspecialchars($project['color']) ?>;"
>
-
+
+
![<?= htmlspecialchars($project['title']) ?> Logo](<?= htmlspecialchars($project['logo']) ?>)
+
+
+
= htmlspecialchars($project['title']) ?>
@@ -111,3 +119,9 @@ $projects = [
+
+
+
+
+
+
diff --git a/style.css b/style.css
index 9bc4e9b..f65f170 100644
--- a/style.css
+++ b/style.css
@@ -179,6 +179,25 @@ section {
background: rgba(255, 255, 255, 0.09);
}
+.card-logo {
+ width: 28px;
+ height: 28px;
+ object-fit: contain;
+}
+
+.card-logo--invert {
+ filter: invert(1) brightness(1.8);
+}
+
+.card-logo--bg {
+ width: 36px;
+ height: 36px;
+ border-radius: 6px;
+ background: #fff;
+ padding: 3px;
+ object-fit: contain;
+}
+
/* ===== CARD BODY ===== */
.card-body {
flex: 1;
@@ -234,3 +253,5 @@ footer {
}
}
+
+