commit 7f647e9b0675ad0cabe182d23e5a3790f91d918e
Author: dalfuss <login@dalfuss.net>
Date:   Mon Dec 23 02:05:38 2024 +0100

    first commit

diff --git a/css/sites.css b/css/sites.css
new file mode 100644
index 0000000..65ce4dd
--- /dev/null
+++ b/css/sites.css
@@ -0,0 +1,1374 @@
+/*
+Using these CSS classes it is possible that the buttons get a different color matching the linked page.
+Just change the CSS classes in the index.html which are used for links, e.g. like this: class="link mastodon"
+
+The brands are based on the list of ForkAwesome.
+List is not yet complete.
+*/
+.fivehundredpx {
+    background-color: ;
+    color: ;
+}
+
+.activitypub {
+    background-color: rgba(241, 0, 127, 0.8);
+    color: #ffffff;
+}
+
+.adn {
+    background-color: ;
+    color: ;
+}
+
+.amazon {
+    background-color: rgba(247, 148, 0, 0.8);
+    color: #ffffff;
+}
+
+.amazon-music {
+    background-color: rgba(0, 130, 199, 0.8);
+    color: #ffffff;
+}
+
+.android {
+    background-color: rgba(48, 215, 128, 0.8);
+    color: #ffffff;
+}
+
+.angellist {
+    background-color: rgba(0, 45, 51, 0.8);
+    color: #ffffff;
+}
+
+.apple {
+    background-color: rgba(0, 0, 0, 0.8);
+    color: #ffffff;
+}
+
+.apple-music {
+    background-color: rgba(251, 66, 90, 0.8);
+    color: #ffffff;
+}
+
+.archive-org {
+    background-color: rgba(251, 66, 90, 0.8);
+    color: #ffffff;
+}
+
+.archlinux {
+    background-color: rgba(22, 142, 202, 0.8);
+    color: #ffffff;
+}
+
+.artstation {
+    background-color: rgba(19, 168, 233, 0.8);
+    color: #ffffff;
+}
+
+.att {
+    background-color: rgba(0, 163, 217, 0.8);
+    color: #ffffff;
+}
+
+.bandcamp {
+    background-color: rgba(97, 146, 156, 0.8);
+    color: #ffffff;
+}
+
+.bandcamp-alt {
+    background-color: rgba(29, 160, 195, 0.8);
+    color: #ffffff;
+}
+
+.behance {
+    background-color: rgba(0, 87, 255, 0.8);
+    color: #ffffff;
+}
+
+.behance-alt {
+    background-color: rgba(0, 0, 0, 0.8);
+    color: #ffffff;
+}
+
+.bitbucket {
+    background-color: rgba(37, 128, 247, 0.8);
+    color: #ffffff;
+}
+
+.bitcoin {
+    background-color: rgba(235, 140, 42, 0.8);
+    color: #ffffff;
+}
+
+.black-tie {
+    background-color: rgba(0, 0, 0, 0.8);
+    color: #ffffff;
+}
+
+.bluetooth {
+    background-color: rgba(10, 59, 140, 0.8);
+    color: #ffffff;
+}
+
+.boardgamegeek {
+    background-color: rgba(255, 81, 0, 0.8);
+    color: #ffffff;
+}
+
+.bootstrap {
+    background-color: rgba(113, 16, 239, 0.8);
+    color: #ffffff;
+}
+
+.buymeacoffee {
+    background-color: rgba(247, 214, 0, 0.8);
+    color: #3e3e3e;
+}
+
+.buysellads {
+    background-color: rgba(217, 72, 71, 0.8);
+    color: #ffffff;
+}
+
+
+.paypal {
+    background-color: rgba(3, 164, 236, 0.8);
+    color: #ffffff;
+}
+
+.paypal-alt {
+    background-color: rgba(39, 51, 142, 0.8);
+    color: #ffffff;
+}
+
+.stripe {
+    background-color: rgba(96, 88, 247, 0.8);
+    color: #ffffff;
+}
+
+.chrome {
+    background-color: rgba(245, 203, 10, 0.8);
+    color: #ffffff;
+}
+
+.classicpress {
+    background-color: rgba(4, 122, 147, 0.8);
+    color: #f7f7f7;
+}
+
+.codepen {
+    background-color: rgba(0, 0, 0, 0.8);
+    color: #ffffff;
+}
+
+.codiepie {
+    background-color: rgba(255, 255, 255, 0.8);
+    color: #000000;
+}
+
+.connectdevelop {
+    background-color: rgba(243, 243, 245, 0.8);
+    color: #000000;
+}
+
+.contao {
+    background-color: rgba(236, 120, 0, 0.8);
+    color: #f7f7f7;
+}
+
+.csharp {
+    background-color: rgba(157, 116, 213, 0.8);
+    color: #ffffff;
+}
+
+.css3 {
+    background-color: rgba(40, 98, 233, 0.8);
+    color: #ffffff;
+}
+
+.dashcube {
+    background-color: rgba(247, 124, 0, 0.8);
+    color: #ffffff;
+}
+
+.debian {
+    background-color: rgba(208, 7, 78, 0.8);
+    color: #ffffff;
+}
+
+.deezer {
+    background-color: rgba(245, 162, 0, 0.8);
+    color: #ffffff;
+}
+
+.delicious {
+    background-color: rgba(25, 115, 230, 0.8);
+    color: #ffffff;
+}
+
+.dev-to {
+    background-color: rgba(0, 0, 0, 0.8);
+    color: #ffffff;
+}
+
+.deviantart {
+    background-color: rgba(0, 199, 52, 0.8);
+    color: #000000;
+}
+
+.diaspora {
+    background-color: rgba(0, 0, 0, 0.8);
+    color: #ffffff;
+}
+
+.digg {
+    background-color: rgba(39, 93, 140, 0.8);
+    color: #f7f7f5;
+}
+
+.digitalocean {
+    background-color: rgba(0, 102, 247, 0.8);
+    color: #f7f7f7;
+}
+
+.discord {
+    background-color: rgba(64, 78, 237, 0.8);
+    color: #ffffff;
+}
+
+
+.dogmazic {
+    background-color: rgba(49, 49, 49, 0.8);
+    color: #f7f7f7;
+}
+
+.dribbble {
+    background-color: rgba(225, 74, 132, 0.8);
+    color: #f7f7f7;
+}
+
+.dropbox {
+    background-color: rgba(0, 94, 246, 0.8);
+    color: #f7f7f7;
+}
+
+.drupal {
+    background-color: rgba(41, 164, 217, 0.8);
+    color: #ffffff;
+}
+
+.edge {
+    background-color: rgba(0, 116, 208, 0.8);
+    color: #ffffff;
+}
+
+.ethereum {
+    background-color: rgba(95, 122, 227, 0.8);
+    color: #ffffff;
+}
+
+.etsy {
+    background-color: rgba(219, 100, 0, 0.0.8);
+    color: #ffffff;
+}
+
+.expeditedssl {
+    background-color: ;
+    color: ;
+}
+
+.f-droid {
+    background-color: ;
+    color: ;
+}
+
+.fa {
+    background-color: ;
+    color: ;
+}
+
+.facebook {
+    background-color: ;
+    color: ;
+}
+
+.facebook-f {
+    background-color: ;
+    color: ;
+}
+
+.facebook-messenger {
+    background-color: ;
+    color: ;
+}
+
+.facebook-official {
+    background-color: ;
+    color: ;
+}
+
+.facebook-square {
+    background-color: ;
+    color: ;
+}
+
+.ffmpeg {
+    background-color: ;
+    color: ;
+}
+
+.firefox {
+    background-color: ;
+    color: ;
+}
+
+.first-order {
+    background-color: ;
+    color: ;
+}
+
+.flickr {
+    background-color: ;
+    color: ;
+}
+
+.font-awesome {
+    background-color: ;
+    color: ;
+}
+
+.fonticons {
+    background-color: ;
+    color: ;
+}
+
+.fork-awesome {
+    background-color: ;
+    color: ;
+}
+
+.fork-circle {
+    background-color: ;
+    color: ;
+}
+
+.fort-awesome {
+    background-color: ;
+    color: ;
+}
+
+.forumbee {
+    background-color: ;
+    color: ;
+}
+
+.foursquare {
+    background-color: ;
+    color: ;
+}
+
+.free-code-camp {
+    background-color: ;
+    color: ;
+}
+
+.freedombox {
+    background-color: ;
+    color: ;
+}
+
+.friendica {
+    background-color: ;
+    color: ;
+}
+
+.funkwhale {
+    background-color: ;
+    color: ;
+}
+
+.ge {
+    background-color: ;
+    color: ;
+}
+
+.get-pocket {
+    background-color: ;
+    color: ;
+}
+
+.gg {
+    background-color: ;
+    color: ;
+}
+
+.gg-circle {
+    background-color: ;
+    color: ;
+}
+
+.gimp {
+    background-color: ;
+    color: ;
+}
+
+.git {
+    background-color: ;
+    color: ;
+}
+
+.git-square {
+    background-color: ;
+    color: ;
+}
+
+.gitea {
+    background-color: ;
+    color: ;
+}
+
+.github {
+    background-color: rgba(36, 41, 47, 0.8);
+    color: #ffffff;
+}
+
+.github-alt {
+    background-color: ;
+    color: ;
+}
+
+.github-square {
+    background-color: ;
+    color: ;
+}
+
+.gitlab {
+    background-color: ;
+    color: ;
+}
+
+.gittip {
+    background-color: ;
+    color: ;
+}
+
+.glide {
+    background-color: ;
+    color: ;
+}
+
+.glide-g {
+    background-color: ;
+    color: ;
+}
+
+.gnu {
+    background-color: ;
+    color: ;
+}
+
+.gnu-social {
+    background-color: ;
+    color: ;
+}
+
+.gnupg {
+    background-color: ;
+    color: ;
+}
+
+.google {
+    background-color: ;
+    color: ;
+}
+
+.google-play {
+    background-color: ;
+    color: ;
+}
+
+.google-plus {
+    background-color: ;
+    color: ;
+}
+
+.google-plus-circle {
+    background-color: ;
+    color: ;
+}
+
+.google-plus-g {
+    background-color: ;
+    color: ;
+}
+
+.google-plus-official {
+    background-color: ;
+    color: ;
+}
+
+.google-plus-square {
+    background-color: ;
+    color: ;
+}
+
+.google-wallet {
+    background-color: ;
+    color: ;
+}
+
+.gratipay {
+    background-color: ;
+    color: ;
+}
+
+.grav {
+    background-color: ;
+    color: ;
+}
+
+.hackaday {
+    background-color: ;
+    color: ;
+}
+
+.hacker-news {
+    background-color: ;
+    color: ;
+}
+
+.hackster {
+    background-color: ;
+    color: ;
+}
+
+.hal {
+    background-color: ;
+    color: ;
+}
+
+.hashnode {
+    background-color: ;
+    color: ;
+}
+
+.hassio {
+    background-color: ;
+    color: ;
+}
+
+.heroku {
+    background-color: ;
+    color: ;
+}
+
+.home-assistant {
+    background-color: ;
+    color: ;
+}
+
+.houzz {
+    background-color: ;
+    color: ;
+}
+
+.html5 {
+    background-color: ;
+    color: ;
+}
+
+.hubzilla {
+    background-color: ;
+    color: ;
+}
+
+.imdb {
+    background-color: ;
+    color: ;
+}
+
+.inkscape {
+    background-color: ;
+    color: ;
+}
+
+.instagram {
+    background-color: #e1306c;
+    color: ;
+}
+
+.internet-explorer {
+    background-color: ;
+    color: ;
+}
+
+.ioxhost {
+    background-color: ;
+    color: ;
+}
+
+.java {
+    background-color: ;
+    color: ;
+}
+
+.jirafeau {
+    background-color: ;
+    color: ;
+}
+
+.joomla {
+    background-color: ;
+    color: ;
+}
+
+.joplin {
+    background-color: ;
+    color: ;
+}
+
+.jsfiddle {
+    background-color: ;
+    color: ;
+}
+
+.julia {
+    background-color: ;
+    color: ;
+}
+
+.jupyter {
+    background-color: ;
+    color: ;
+}
+
+.keybase {
+    background-color: ;
+    color: ;
+}
+
+.ko-fi {
+    background-color: rgba(19, 195, 255, 0.8);
+    color: #ffffff;
+}
+
+
+.laravel {
+    background-color: ;
+    color: ;
+}
+
+.lastfm {
+    background-color: ;
+    color: ;
+}
+
+.lastfm-square {
+    background-color: ;
+    color: ;
+}
+
+.leanpub {
+    background-color: ;
+    color: ;
+}
+
+.liberapay {
+    background-color: ;
+    color: ;
+}
+
+.liberapay-square {
+    background-color: ;
+    color: ;
+}
+
+.linkedin {
+    background-color: ;
+    color: ;
+}
+
+.linkedin-square {
+    background-color: ;
+    color: ;
+}
+
+.linode {
+    background-color: ;
+    color: ;
+}
+
+.linux {
+    background-color: ;
+    color: ;
+}
+
+.mariadb {
+    background-color: ;
+    color: ;
+}
+
+.markdown {
+    background-color: ;
+    color: ;
+}
+
+.mastodon {
+    background-color: rgba(99, 100, 255, 0.8);
+    color: #ffffff;
+}
+
+.matrix-org {
+    background-color: ;
+    color: ;
+}
+
+.maxcdn {
+    background-color: ;
+    color: ;
+}
+
+.meanpath {
+    background-color: ;
+    color: ;
+}
+
+.medium {
+    background-color: ;
+    color: ;
+}
+
+.medium-square {
+    background-color: ;
+    color: ;
+}
+
+.meetup {
+    background-color: ;
+    color: ;
+}
+
+.mixcloud {
+    background-color: ;
+    color: ;
+}
+
+.modx {
+    background-color: ;
+    color: ;
+}
+
+.mysql {
+    background-color: ;
+    color: ;
+}
+
+.nextcloud {
+    background-color: ;
+    color: ;
+}
+
+.nextcloud-square {
+    background-color: ;
+    color: ;
+}
+
+.nodejs {
+    background-color: ;
+    color: ;
+}
+
+.nordcast {
+    background-color: ;
+    color: ;
+}
+
+.odnoklassniki {
+    background-color: ;
+    color: ;
+}
+
+.odnoklassniki-square {
+    background-color: ;
+    color: ;
+}
+
+.open-collective {
+    background-color: ;
+    color: ;
+}
+
+.opencart {
+    background-color: ;
+    color: ;
+}
+
+.openid {
+    background-color: ;
+    color: ;
+}
+
+.opera {
+    background-color: ;
+    color: ;
+}
+
+.optin-monster {
+    background-color: ;
+    color: ;
+}
+
+.orcid {
+    background-color: ;
+    color: ;
+}
+
+.pagelines {
+    background-color: ;
+    color: ;
+}
+
+.patreon {
+    background-color: ;
+    color: ;
+}
+
+.paypal {
+    background-color: ;
+    color: ;
+}
+
+.peertube {
+    background-color: ;
+    color: ;
+}
+
+.php {
+    background-color: ;
+    color: ;
+}
+
+.pinterest {
+    background-color: ;
+    color: ;
+}
+
+.pinterest-p {
+    background-color: ;
+    color: ;
+}
+
+.pinterest-square {
+    background-color: ;
+    color: ;
+}
+
+.pixelfed {
+    background-color: rgba(255, 135, 20, 0.8);
+    color: #ffffff;
+}
+
+.pleroma {
+    background-color: ;
+    color: ;
+}
+
+.plume {
+    background-color: ;
+    color: ;
+}
+
+.postgresql {
+    background-color: ;
+    color: ;
+}
+
+.product-hunt {
+    background-color: ;
+    color: ;
+}
+
+.python {
+    background-color: ;
+    color: ;
+}
+
+.qq {
+    background-color: ;
+    color: ;
+}
+
+.quora {
+    background-color: ;
+    color: ;
+}
+
+.ra {
+    background-color: ;
+    color: ;
+}
+
+.ravelry {
+    background-color: ;
+    color: ;
+}
+
+.react {
+    background-color: ;
+    color: ;
+}
+
+.rebel {
+    background-color: ;
+    color: ;
+}
+
+.reddit {
+    background-color: rgba(255, 69, 0, 0.8);
+    color: #ffffff;
+}
+
+.renren {
+    background-color: ;
+    color: ;
+}
+
+.researchgate {
+    background-color: ;
+    color: ;
+}
+
+.resistance {
+    background-color: ;
+    color: ;
+}
+
+.safari {
+    background-color: ;
+    color: ;
+}
+
+.sass {
+    background-color: ;
+    color: ;
+}
+
+.sass-alt {
+    background-color: ;
+    color: ;
+}
+
+.scribd {
+    background-color: ;
+    color: ;
+}
+
+.scuttlebutt {
+    background-color: ;
+    color: ;
+}
+
+.sellsy {
+    background-color: ;
+    color: ;
+}
+
+.shaarli {
+    background-color: ;
+    color: ;
+}
+
+.shaarli-o {
+    background-color: ;
+    color: ;
+}
+
+.share-alt {
+    background-color: ;
+    color: ;
+}
+
+.share-alt-square {
+    background-color: ;
+    color: ;
+}
+
+.shirtsinbulk {
+    background-color: ;
+    color: ;
+}
+
+.simplybuilt {
+    background-color: ;
+    color: ;
+}
+
+.sketchfab {
+    background-color: ;
+    color: ;
+}
+
+.skyatlas {
+    background-color: ;
+    color: ;
+}
+
+.skype {
+    background-color: ;
+    color: ;
+}
+
+.slack {
+    background-color: ;
+    color: ;
+}
+
+.slideshare {
+    background-color: ;
+    color: ;
+}
+
+.snapchat {
+    background-color: ;
+    color: ;
+}
+
+.snapchat-ghost {
+    background-color: ;
+    color: ;
+}
+
+.snapchat-square {
+    background-color: ;
+    color: ;
+}
+
+.snowdrift {
+    background-color: ;
+    color: ;
+}
+
+.social-home {
+    background-color: ;
+    color: ;
+}
+
+.soundcloud {
+    background-color: rgba(255, 85, 0, 0.8);
+    color: #ffffff;
+}
+
+.spotify {
+    background-color: rgba(26, 178, 107, 0.8);
+    color: #ffffff;
+}
+
+.spotify-alt {
+    background-color: rgba(30, 215, 96, 0.8);
+    color: #ffffff;
+}
+
+.ssb {
+    background-color: ;
+    color: ;
+}
+
+.stack-exchange {
+    background-color: ;
+    color: ;
+}
+
+.stack-overflow {
+    background-color: ;
+    color: ;
+}
+
+.steam {
+    background-color: ;
+    color: ;
+}
+
+.steam-square {
+    background-color: ;
+    color: ;
+}
+
+.stumbleupon {
+    background-color: ;
+    color: ;
+}
+
+.stumbleupon-circle {
+    background-color: ;
+    color: ;
+}
+
+.superpowers {
+    background-color: ;
+    color: ;
+}
+
+.syncthing {
+    background-color: ;
+    color: ;
+}
+
+.telegram {
+    background-color: ;
+    color: ;
+}
+
+.tencent-weibo {
+    background-color: ;
+    color: ;
+}
+
+.tex {
+    background-color: ;
+    color: ;
+}
+
+.textpattern {
+    background-color: ;
+    color: ;
+}
+
+.themeisle {
+    background-color: ;
+    color: ;
+}
+
+.tipeee {
+    background-color: ;
+    color: ;
+}
+
+.tor-onion {
+    background-color: ;
+    color: ;
+}
+
+.trello {
+    background-color: ;
+    color: ;
+}
+
+.tripadvisor {
+    background-color: ;
+    color: ;
+}
+
+.tumblr {
+    background-color: ;
+    color: ;
+}
+
+.tumblr-square {
+    background-color: ;
+    color: ;
+}
+
+.twitch {
+    background-color: #9146ff;
+    color: ;
+}
+
+.twitter {
+    background-color: ;
+    color: ;
+}
+
+.twitter-square {
+    background-color: ;
+    color: ;
+}
+
+.tidal {
+    background-color: rgba(16, 16, 18, 0.8);
+    color: #ffffff;
+}
+
+.unity {
+    background-color: ;
+    color: ;
+}
+
+.unsplash {
+    background-color: ;
+    color: ;
+}
+
+.usb {
+    background-color: ;
+    color: ;
+}
+
+.viacoin {
+    background-color: ;
+    color: ;
+}
+
+.viadeo {
+    background-color: ;
+    color: ;
+}
+
+.viadeo-square {
+    background-color: ;
+    color: ;
+}
+
+.vimeo {
+    background-color: ;
+    color: ;
+}
+
+.vimeo-square {
+    background-color: ;
+    color: ;
+}
+
+.vimeo-v {
+    background-color: ;
+    color: ;
+}
+
+.vine {
+    background-color: ;
+    color: ;
+}
+
+.vk {
+    background-color: ;
+    color: ;
+}
+
+.wechat {
+    background-color: ;
+    color: ;
+}
+
+.weibo {
+    background-color: ;
+    color: ;
+}
+
+.weixin {
+    background-color: ;
+    color: ;
+}
+
+.whatsapp {
+    background-color: ;
+    color: ;
+}
+
+.wikidata {
+    background-color: ;
+    color: ;
+}
+
+.wikipedia-w {
+    background-color: ;
+    color: ;
+}
+
+.windows {
+    background-color: ;
+    color: ;
+}
+
+.wire {
+    background-color: ;
+    color: ;
+}
+
+.wordpress {
+    background-color: ;
+    color: ;
+}
+
+.wpbeginner {
+    background-color: ;
+    color: ;
+}
+
+.wpexplorer {
+    background-color: ;
+    color: ;
+}
+
+.wpforms {
+    background-color: ;
+    color: ;
+}
+
+.xing {
+    background-color: ;
+    color: ;
+}
+
+.xing-square {
+    background-color: ;
+    color: ;
+}
+
+.xmpp {
+    background-color: ;
+    color: ;
+}
+
+.y-combinator {
+    background-color: ;
+    color: ;
+}
+
+.yahoo {
+    background-color: ;
+    color: ;
+}
+
+.yc {
+    background-color: ;
+    color: ;
+}
+
+.yelp {
+    background-color: ;
+    color: ;
+}
+
+.yoast {
+    background-color: ;
+    color: ;
+}
+
+.youtube {
+    background-color: rgba(234, 50, 35, 0.8);
+    color: #ffffff;
+}
+
+.youtube-music {
+    background-color: rgba(255, 0, 2, 0.8);
+    color: #fffefd;
+}
+
+.zotero {
+    background-color: ;
+    color: ;
+}
+
+.anilist {
+    background-color: #02a9ff;
+    color: ;
+}
+
+.elftwinks {
+    background-color: #eea3b2;
+    color: ;
+}
+
+svg {
+	height: 1.1em;
+	width: auto;
+}
\ No newline at end of file
diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..a6be43c
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,143 @@
+/*
+                              __ __
+    __   __        __        /_//_/     __                    __
+    | | / /__ ____/ /__ ___  __ _____  / _/_ _____  ___ ____ / /  ___ ___ ____ _
+    | |/ / -_) __/  '_// _ \/ // / _ \/ _/ // / _ \/ _ `(_-</ _ \/ _ `/ // /  ' \
+    |___/\__/_/ /_/\_\/_//_/\_,_/ .__/_/ \_,_/_//_/\_, /___/_.__/\_,_/\_,_/_/_/_/
+                               /_/                /___/
+
+*/
+html,
+body {
+    margin: 0;
+    height: 100%;
+    font-family: monospace;
+}
+
+html {
+    background-image: url('../images/background.webp');
+    background-color: black;
+    background-size: cover;
+    background-attachment: fixed;
+}
+
+body {
+    padding-top: 35px;
+    padding-bottom: 35px;
+    height: fit-content;
+    min-height: 100%;
+}
+
+:root {
+    --accentcolor: #fff;
+    --delay: .3s;
+}
+
+.description,
+.source {
+    color: white;
+    text-align: center;
+    margin: 27px auto;
+    margin-top: 10px;
+    width: 90%;
+    max-width: 500px;
+}
+
+.separator {
+    font-size: 1.1rem;
+    font-weight: unset;
+}
+
+.separator,
+.source {
+    color: white;
+    text-align: center;
+    margin: 25px auto;
+    margin-top: 20px;
+    width: 90%;
+    max-width: 500px;
+}
+
+.source {
+    font-size: small;
+    margin-top: 50px;
+}
+
+.picture,
+.picture img {
+    position: relative;
+    width: 130px;
+    height: 130px;
+    display: block;
+    margin: 35px auto 20px;
+    border-radius: 50%;
+}
+
+.user {
+    color: var(--accentcolor);
+    font-size: x-large;
+    font-weight: bold;
+    line-height: 1.25;
+    display: block;
+    width: 100%;
+    text-align: center;
+    text-decoration: none;
+}
+
+.links,
+.link_list {
+    max-width: 675px;
+    width: auto;
+    display: block;
+    margin: 27px auto;
+    padding-inline-start: 0;
+}
+
+.link_item {
+    list-style: none;
+}
+
+.link {
+    position: relative;
+    background-color: rgba(0, 0, 0, 0.8);
+    color: var(--accentcolor);
+    border: solid var(--accentcolor) 2px;
+    border-radius: 5px;
+    font-size: 1rem;
+    text-align: center;
+    display: block;
+    margin-left: 10px;
+    margin-right: 10px;
+    margin-bottom: 10px;
+    padding: 10px;
+    text-decoration: none;
+    -webkit-tap-highlight-color: transparent;
+}
+
+footer a {
+  color: var(--accentcolor);
+  font-weight: bold;
+  text-decoration: none;
+}
+
+@media (hover: hover) {
+    .link:hover {
+        background-color: var(--accentcolor);
+        color: #000;
+        /* Fallback for older browsers */
+        color: rgba(0, 0, 0, 0.5);
+    }
+}
+
+.link:active {
+    background-color: var(--accentcolor);
+    color: #000;
+    /* Fallback for older browsers */
+    color: rgba(0, 0, 0, 0.5);
+}
+
+
+.flag {
+	width: 1em;
+	border-radius: 0.15em;
+}
\ No newline at end of file
diff --git a/i/222048.jpg b/i/222048.jpg
new file mode 100644
index 0000000..9b4cfa1
Binary files /dev/null and b/i/222048.jpg differ
diff --git a/i/88x31_ElfTwinks_hit.png b/i/88x31_ElfTwinks_hit.png
new file mode 100644
index 0000000..72672ab
Binary files /dev/null and b/i/88x31_ElfTwinks_hit.png differ
diff --git a/i/SonarrV3.1.png b/i/SonarrV3.1.png
new file mode 100644
index 0000000..699093e
Binary files /dev/null and b/i/SonarrV3.1.png differ
diff --git a/i/background.png b/i/background.png
new file mode 100644
index 0000000..9f6ccac
Binary files /dev/null and b/i/background.png differ
diff --git a/i/background1.jpg b/i/background1.jpg
new file mode 100644
index 0000000..2fc37d6
Binary files /dev/null and b/i/background1.jpg differ
diff --git a/i/crush.jpg b/i/crush.jpg
new file mode 100644
index 0000000..b1cc68b
Binary files /dev/null and b/i/crush.jpg differ
diff --git a/i/dcl.png b/i/dcl.png
new file mode 100644
index 0000000..0af9421
Binary files /dev/null and b/i/dcl.png differ
diff --git a/i/dcl_mini_tp.png b/i/dcl_mini_tp.png
new file mode 100644
index 0000000..9e32294
Binary files /dev/null and b/i/dcl_mini_tp.png differ
diff --git a/i/lidarrv3.png b/i/lidarrv3.png
new file mode 100644
index 0000000..c06aacd
Binary files /dev/null and b/i/lidarrv3.png differ
diff --git a/i/sakura.png b/i/sakura.png
new file mode 100644
index 0000000..96233ee
Binary files /dev/null and b/i/sakura.png differ
diff --git a/images/anilist.svg b/images/anilist.svg
new file mode 100644
index 0000000..bb19116
--- /dev/null
+++ b/images/anilist.svg
@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>AniList</title><path d="M6.361 2.943L0 21.056h4.942l1.077-3.133H11.4l1.052 3.133H22.9c.71 0 1.1-.392 1.1-1.101V17.53c0-.71-.39-1.101-1.1-1.101h-6.483V4.045c0-.71-.392-1.102-1.101-1.102h-2.422c-.71 0-1.101.392-1.101 1.102v1.064l-.758-2.166zm2.324 5.948l1.688 5.018H7.144z"/></svg>
\ No newline at end of file
diff --git a/images/background.webp b/images/background.webp
new file mode 100644
index 0000000..90f9caa
Binary files /dev/null and b/images/background.webp differ
diff --git a/images/enby.svg b/images/enby.svg
new file mode 100644
index 0000000..20e3c08
--- /dev/null
+++ b/images/enby.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="800" height="480" viewBox="0 0 800 480">
+  <g fill-rule="evenodd">
+    <rect width="800" height="120" fill="#fef433"/>
+    <rect width="800" height="120" y="120" fill="#ffffff"/>
+    <rect width="800" height="120" y="240" fill="#9a59cf"/>
+    <rect width="800" height="120" y="360" fill="#000000"/>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/images/pansexual.svg b/images/pansexual.svg
new file mode 100644
index 0000000..cdc9a3e
--- /dev/null
+++ b/images/pansexual.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg enable-background="new 0 0 419.53 297.64" height="297.64px" version="1.1" viewBox="0 0 419.53 297.64" width="419.53px" x="0px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" y="0px">
+<switch>
+
+<g extraneous="self">
+<g id="Ebene_1">
+<rect fill="#4AAAE0" height="297.638" width="419.528" x="0.001" y="-0.569"/>
+</g>
+<g id="Ebene_2">
+<rect fill="#FED905" height="198.425" width="419.528" x="0.002" y="0"/>
+</g>
+<g id="Ebene_3">
+<rect fill="#E5318A" height="99.213" width="419.527"/>
+</g>
+</g>
+</switch>
+
+</svg>
\ No newline at end of file
diff --git a/images/profilepicture.webp b/images/profilepicture.webp
new file mode 100644
index 0000000..980f4f8
Binary files /dev/null and b/images/profilepicture.webp differ
diff --git a/images/prog.svg b/images/prog.svg
new file mode 100644
index 0000000..5e483ff
--- /dev/null
+++ b/images/prog.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" id="Ebene_1" data-name="Ebene 1" viewBox="0 0 419.53 297.64"><defs><style>.cls-1{fill:#ee3124;}.cls-2{fill:#f57f29;}.cls-3{fill:#fff000;}.cls-4{fill:#58b947;}.cls-5{fill:#0054a6;}.cls-6{fill:#9f248f;}.cls-7{fill:#603917;}.cls-8{fill:#7cc0ea;}.cls-9{fill:#f498c0;}.cls-10{fill:#fff;}</style></defs><rect class="cls-1" x="-44.5" y="0.02" width="468.17" height="49.36"/><rect class="cls-2" x="-44.5" y="49.38" width="468.17" height="49.89"/><rect class="cls-3" x="-44.5" y="99.27" width="468.17" height="49.89"/><rect class="cls-4" x="-44.5" y="149.16" width="468.17" height="49.89"/><rect class="cls-5" x="-44.5" y="199.05" width="468.17" height="49.89"/><rect class="cls-6" x="-44.5" y="248.94" width="468.17" height="48.76"/><polygon points="-123.67 -190.44 -462.99 148.88 -126.49 488.08 212.83 148.76 -123.67 -190.44"/><polygon class="cls-7" points="179.93 148.76 -123.75 -157.63 -432.88 148.8 -126.49 455.18 179.93 148.76"/><polygon class="cls-8" points="147.04 148.76 -123.58 -124.55 -399.8 148.97 -126.49 422.29 147.04 148.76"/><polygon class="cls-9" points="116.84 148.76 -123.92 -92 -364.55 148.63 -126.49 389.39 116.84 148.76"/><polygon class="cls-10" points="83.94 148.76 -123.74 -58.93 -331.48 148.81 -126.49 356.49 83.94 148.76"/></svg>
\ No newline at end of file
diff --git a/images/trans.svg b/images/trans.svg
new file mode 100644
index 0000000..bf06e6e
--- /dev/null
+++ b/images/trans.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 400">
+  <path fill="#5BCEFA" d="M0 0h800v400H0z"/>
+  <path fill="#F5A9B8" d="M0 80h800v240H0z"/>
+  <path fill="#FFF" d="M0 160h800v80H0z"/>
+</svg>
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..038968f
--- /dev/null
+++ b/index.html
@@ -0,0 +1,137 @@
+    <!--
+                              __ __
+    __   __        __        /_//_/     __                    __
+    | | / /__ ____/ /__ ___  __ _____  / _/_ _____  ___ ____ / /  ___ ___ ____ _
+    | |/ / -_) __/  '_// _ \/ // / _ \/ _/ // / _ \/ _ `(_-</ _ \/ _ `/ // /  ' \
+    |___/\__/_/ /_/\_\/_//_/\_,_/ .__/_/ \_,_/_//_/\_, /___/_.__/\_,_/\_,_/_/_/_/
+                               /_/                /___/
+
+    -->
+<!DOCTYPE html>
+<html lang="en-US">
+   <head> <!--TEST-->
+      <meta charset="UTF-8">
+      <meta name="viewport" content="width=device-width, initial-scale=1.0">
+      <meta name="description" content="YOUR DESCRIPTION HERE">
+      <title>Dalfuss - Verknüpfungsbaum 🌳🔗 </title>
+      <link rel="icon" href="./images/profile.jpg" type="image/x-icon">
+      <link rel="stylesheet" href="./css/style.css">
+      <!--      
+      With sites.css you can give the button a different color 
+         -->
+      <link rel="stylesheet" href="./css/sites.css"> 
+      <!--
+         This script is designed to optimize the display of meta tags when sharing content on social media. By using this script, you can ensure that your content looks its best when it's shared on platforms like Mastodon, Diaspora, and Friendica (and the other pages from corpos!). The script is easy to use and can be customized to fit the specific needs of your website or social media campaign.
+         -->
+      <meta property="og:title" content="Sam Dalfuss - Verknüpfungsbaum 🌳🔗 ">
+      <meta property="og:type" content="website">
+      <meta property="og:image" content="./images/socialmediacard.webp">
+      <meta property="og:url" content="https://dalfuss.link">
+      <meta name="twitter:card" content="summary_large_image">
+      <meta property="og:description" content="send nudes">
+      <meta property="og:site_name" content="Dalfuss - Verknüpfungsbaum 🌳🔗">
+      <!--
+         This script is designed to include the ForkAwesome icon font in your Verknüpfungsbaum. ForkAwesome is a popular icon font that includes hundreds of customizable icons for a variety of purposes.
+         
+         For Icon list see: https://forkaweso.me/Fork-Awesome/icons/
+         -->
+      <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fork-awesome@1.2.0/css/fork-awesome.min.css" integrity="sha256-XoaMnoYC5TH6/+ihMEnospgm0J1PM/nioxbOUdnM8HY=" crossorigin="anonymous"> -->
+      <script src="https://kit.fontawesome.com/14a35c233c.js" crossorigin="anonymous"></script>
+   </head>
+   <body>
+      <header aria-label="Header with profile image and description">
+         <div class="picture" role="img" aria-label="Profile picture">
+            <img src="./images/profilepicture.webp" alt="YOUR ALT TEXT">
+         </div>
+         <h1 class="user" tabindex="0" title="USERNAME">
+            Sam Dalfuss
+         </h1>
+         <p class="description">
+            <script>
+               var dob = new Date("08/21/1998");
+               //calculate month difference from current date in time
+               var month_diff = Date.now() - dob.getTime();
+               
+               //convert the calculated difference in date format
+               var age_dt = new Date(month_diff); 
+               
+               //extract year from date    
+               var year = age_dt.getUTCFullYear();
+               
+               //now calculate the age of the user
+               var age = Math.abs(year - 1970);
+               
+               //display the calculated age
+               document.write(age);
+              </script>
+              | they/them/dey/er | Heidelberg | Streamer | Gamer | Photographer | "Musician" <img class="flag" src="./images/pansexual.svg" /> <img class="flag" src="./images/enby.svg" /> <img class="flag" src="./images/trans.svg" /> <img class="flag" src="./images/prog.svg" />
+         </p>
+         <div class="links link_item">
+            <a class="link" href="https://dalfuss.net" target="_blank">
+               Dalfuss.net
+            </a>
+         </div>
+      </header>
+      <main id="main" aria-label="Main content with links">
+         <div class="link_container">
+            <h2 class="separator" tabindex="0" title="Social Media">
+               Social Media
+            </h2>
+            <ul class="link_list" aria-label="Social Media Link List">
+               <li class="link_item"><a class="link mastodon" href="https://corteximplant.com/@dalfuss" target="_blank"><i class="fa-brands fa-mastodon" aria-hidden="true"></i>
+                  Mastodon / Fediverse
+               </a></li>
+               <li class="link_item"><a class="link twitch" href="https://dalfuss.live" target="_blank"><i class="fa fa-twitch" aria-hidden="true"></i>
+                  Twitch
+               </a></li>
+               <li class="link_item"><a class="link instagram" href="https://dalfuss.link/insta" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i>
+                  Instagram
+               </a></li>
+               <li class="link_item"><a class="link discord" href="https://dalfuss.link/discord" target="_blank"><i class="fa-brands fa-discord" aria-hidden="true"></i>
+                  Discord Server
+               </a></li>
+               <li class="link_item"><a class="link youtube" href="https://dalfuss.link/youtube" target="_blank"><i class="fa fa-youtube" aria-hidden="true"></i>
+                  YouTube
+               </a></li>
+               <li class="link_item"><a class="link tiktok" href="https://dalfuss.link/titok" target="_blank"><i class="fa-brands fa-tiktok" aria-hidden="true"></i>
+                  TikTok
+               </a></li>
+               <li class="link_item"><a class="link anilist" href="https://dalfuss.link/anilist" target="_blank"><svg fill="currentColor" width="800px" height="800px" viewBox="0 0 24 24" role="img" xmlns="http://www.w3.org/2000/svg"><path d="M6.361 2.943 0 21.056h4.942l1.077-3.133H11.4l1.052 3.133H22.9c.71 0 1.1-.392 1.1-1.101V17.53c0-.71-.39-1.101-1.1-1.101h-6.483V4.045c0-.71-.392-1.102-1.101-1.102h-2.422c-.71 0-1.101.392-1.101 1.102v1.064l-.758-2.166zm2.324 5.948 1.688 5.018H7.144z"/></svg>
+                  Anilist
+               </a></li>
+            </ul>
+         </div>
+         <div class="link_container">
+            <h2 class="separator" tabindex="0" title="SEPARATOR 1">
+               Stuff I also do
+            </h2>
+            <ul class="link_list" aria-label="SEPARATOR NAME GOES HERE Link List">
+               <li class="link_item"><a class="link elftwinks" href="https://elftwinks.gay" target="_blank"><i class="fa fa-link" aria-hidden="true"></i>
+                  ElfTwinks.Gay
+               </a></li>
+            </ul>
+         </div>
+<!--         <div class="link_container">
+            <h2 class="separator" tabindex="0" title="SEPARATOR 2">
+               Separator 2
+            </h2>
+            <ul class="link_list" aria-label="SEPARATOR NAME GOES HERE Link List">
+               <li class="link_item"><a class="link" href="#" target="_blank"><i class="fa fa-link" aria-hidden="true"></i>
+                  Example
+               </a></li>
+               <li class="link_item"><a class="link" href="#" target="_blank"><i class="fa fa-link" aria-hidden="true"></i>
+                  Example
+               </a></li>
+               <li class="link_item"><a class="link" href="#" target="_blank"><i class="fa fa-link" aria-hidden="true"></i>
+                  Example
+               </a></li>
+            </ul>
+         </div> -->
+      </main>
+      <footer class="source" aria-label="Footer information">
+         <p>&copy; Sam Dalfuss
+               <script>document.write(new Date().getFullYear())</script>
+            - Created with <a href="https://github.com/revengeday/verknuepfungsbaum" target="_blank">Verknüpfungsbaum 🔗🌳</a></p>
+      </footer>
+   </body>
+</html>