mein changes

Signed-off-by: Alex J <odyssey346@disroot.org>

src/lib/Members.json

@@ -2,23 +2,34 @@
 	{
 		"name": "Midou",
         "matrix": "https://matrix.to/#/@midou:projectsegfau.lt/",
-        "position": "System administrator"
+        "position": "System administrator",
+        "description": "Fill out your fucking description",
+        "github": "https://github.com/Midou36O",
+        "website": "https://miicord.com"
 	},
 	{
 		"name": "MrLeRien",
         "discord": "https://discord.com/users/213634643327582208/",
-        "position": "Hoster"
+        "position": "Hoster",
+        "description": "Fill out your fucking description",
+        "github": "https://github.com/MrLeRien"
 	},
     {
 		"name": "akisblack",
         "matrix": "https://matrix.to/#/@akis:projectsegfau.lt/",
         "discord": "https://discord.com/users/845535118285602866/",
-        "position": "Web developer"
+        "position": "Web developer",
+        "description": "Fill out your fucking description",
+        "github": "https://github.com/akisblack",
+        "website": "https://akisblack.github.io"
 	},
     {
 		"name": "Devnol",
         "matrix": "https://matrix.to/#/@devnol:projectsegfau.lt/",
         "discord": "https://discord.com/users/429353559566319626/",
-        "position": "Hoster"
+        "position": "Hoster",
+        "description": "I am the asshole",
+        "github": "https://github.com/Devnol",
+        "website": "https://devnol.github.io"
 	}
 ]

src/lib/app.css

@@ -35,4 +35,4 @@ a {
 	text-decoration: underline;
 	color: var(--accent-primary);
 	text-underline-offset: 5px;
-}
+}

src/routes/members.svelte

@@ -1,5 +1,10 @@
 <script lang="ts">
 	import members from "$lib/Members.json";
+    import IconDiscord from "~icons/simple-icons/discord";
+	import IconMatrix from "~icons/simple-icons/matrix";
+	import IconGitHub from "~icons/simple-icons/github";
+
+	import IconGlobe from "~icons/fa6-solid/globe";
 </script>
 
 <svelte:head>
@@ -10,19 +15,29 @@
 <div class="members">
 	<h1>Members</h1>
 	<div class="member-outer">
-		{#each members as { name, discord, matrix, position }}
+		{#each members as { name, discord, matrix, position, description, github, website }}
             <div class="member-inner">
-                <h2>{name}</h2>
+                <h2 class="stupidh2">{name} - Position: {position}</h2>
+                {#if description}
+                    <p class="description">{description}</p>
+                {/if}
 
-                <h3>Position: {position} </h3>
-    
                 <div class="socials">
+
                     {#if matrix}
-                        <a href={matrix} class="matrixcolored">[Matrix]</a>
+                        <a href={matrix} class="matrixcolored"><IconMatrix /></a>
                     {/if}
 
                     {#if discord}
-                        <a href={discord} class="discordcolored">Discord</a>
+                        <a href={discord} class="discordcolored"><IconDiscord /></a>
+                    {/if}
+
+                    {#if github}
+                        <a href={github} class="githubcolored"><IconGitHub /></a>
+                    {/if}
+
+                    {#if website}
+                        <a href={website} class="button"><IconGlobe /></a>
                     {/if}
                 </div>
             </div>
@@ -36,7 +51,12 @@
         flex-direction: column;
         gap: 2rem;
     }
-
+    .member-inner {
+        background-color: #252525;
+        border-radius: 16px;
+        padding: 10px;
+        width: 30%;
+    }
     a {
         border: none;
 		border-radius: 10px;
@@ -50,16 +70,55 @@
 
     .matrixcolored {
 		background-color: #fff;
-	}
+        margin-left: 0px;
+        font-size: 20px;
+        height: 23px;
+        vertical-align: middle;
+    }
 
 	.discordcolored {
 		background-color: #5865f2;
 		color: #fff !important;
+        margin-left: 0px;
+        font-size: 20px;
+        height: 23px;
+        vertical-align: middle;
 	}
 
+    .githubcolored {
+		background-color: #333;
+		color: #fff !important;
+        margin-left: 0px;
+        font-size: 20px;
+        height: 23px;
+        vertical-align: middle;
+	}
+
+    .button {
+		background-color: var(--tertiary);
+		color: #fff !important;
+        margin-left: 0px;
+        font-size: 20px;
+        height: 23px;
+        vertical-align: middle;
+	}
+    .button:hover {
+        background-color: var(--accent-tertiary);
+        color: var(--secondary) !important;
+        transition: all 0.5s;
+    }
+    .button:active {
+		background-color: var(--accent-primary);
+        transition: all 0.5s;
+    }
     .socials {
         display: flex;
         flex-direction: row;
         gap: .5rem;
     }
+	@media only screen and (max-width: 820px) {
+        .member-inner {
+            width: initial;
+        }
+    }
 </style>