fix time

README.md

@@ -16,4 +16,4 @@ Live at [projectsegfau.lt](https://projectsegfau.lt).
 2. Change directory into the clone using `cd ./website`.
 3. Install dependencies using `pnpm i` (recommended) or `npm i`.
 4. Run the dev server using `pnpm dev` (recommended) or `npm run dev`.
-5. Open a browser on `http://localhost:5173/` and you should see the website running locally!
+5. Open a browser on `http://localhost:5173/` and you should see the website running locally!

package.json

@@ -17,6 +17,7 @@
 		"@iconify-json/simple-icons": "^1.1.20",
 		"@sveltejs/adapter-static": "1.0.0-next.38",
 		"@sveltejs/kit": "1.0.0-next.396",
+		"dayjs": "^1.11.4",
 		"mdsvex": "^0.10.6",
 		"prettier": "^2.7.1",
 		"prettier-plugin-svelte": "^2.7.0",

pnpm-lock.yaml

@@ -5,6 +5,7 @@ specifiers:
   '@iconify-json/simple-icons': ^1.1.20
   '@sveltejs/adapter-static': 1.0.0-next.38
   '@sveltejs/kit': 1.0.0-next.396
+  dayjs: ^1.11.4
   mdsvex: ^0.10.6
   prettier: ^2.7.1
   prettier-plugin-svelte: ^2.7.0
@@ -24,6 +25,7 @@ devDependencies:
   '@iconify-json/simple-icons': 1.1.20
   '@sveltejs/adapter-static': 1.0.0-next.38
   '@sveltejs/kit': 1.0.0-next.396_svelte@3.49.0+vite@3.0.4
+  dayjs: 1.11.4
   mdsvex: 0.10.6_svelte@3.49.0
   prettier: 2.7.1
   prettier-plugin-svelte: 2.7.0_o3ioganyptcsrh6x4hnxvjkpqi
@@ -264,6 +266,10 @@ packages:
       which: 2.0.2
     dev: true
 
+  /dayjs/1.11.4:
+    resolution: {integrity: sha512-Zj/lPM5hOvQ1Bf7uAvewDaUcsJoI6JmNqmHhHl3nyumwe0XHwt8sWdOVAPACJzCebL8gQCi+K49w7iKWnGwX9g==}
+    dev: true
+
   /debug/4.3.4:
     resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==}
     engines: {node: '>=6.0'}

src/lib/Footer.svelte

@@ -4,22 +4,27 @@
 
 <footer>
 	{#if $page.url.pathname === "/"}
-	<div class="badge">
+		<div class="badge">
-		<a
+			<a
-			href="https://www.abuseipdb.com/user/82331"
+				href="https://www.abuseipdb.com/user/82331"
-			title="AbuseIPDB is an IP address blacklist for webmasters and sysadmins to report IP addresses engaging in abusive behavior on their networks"
+				title="AbuseIPDB is an IP address blacklist for webmasters and sysadmins to report IP addresses engaging in abusive behavior on their networks"
-			style="width: fit-content; padding: 1rem;"
+				style="width: fit-content; padding: 1rem;"
-		>
+			>
-			<img
+				<img
-				src="https://www.abuseipdb.com/contributor/82331.svg"
+					src="https://www.abuseipdb.com/contributor/82331.svg"
-				alt="AbuseIPDB Contributor Badge"
+					alt="AbuseIPDB Contributor Badge"
-			/>
+				/>
-		</a>
+			</a>
-	</div>
+		</div>
 	{/if}
 	<div class="content">
 		<span>© 2021 - present, Project Segfault <a href="/team">team</a></span>
-		<span>Made with <a href="https://kit.svelte.dev/">SvelteKit</a> and released under the <a href="https://opensource.org/licenses/MIT/">MIT license</a>.</span>
+		<span
+			>Made with <a href="https://kit.svelte.dev/">SvelteKit</a> and
+			released under the
+			<a href="https://opensource.org/licenses/MIT/">MIT license</a
+			>.</span
+		>
 	</div>
 </footer>
 
@@ -37,7 +42,7 @@
 		align-items: center;
 		flex-direction: column;
 		border-top: 1px solid var(--grey);
-		padding: .5rem;
+		padding: 0.5rem;
 	}
 
 	div.content > * {
@@ -47,12 +52,12 @@
 		text-align: center;
 	}
 
-    .badge {
+	.badge {
-        display: flex;
+		display: flex;
-        flex-direction: row;
+		flex-direction: row;
-        justify-content: center;
+		justify-content: center;
-        align-items: center;
+		align-items: center;
-    }
+	}
 
 	img {
 		width: 270px;

src/lib/Hero.svelte

@@ -1,42 +1,42 @@
 <script lang="ts">
-    export let title: string;
+	export let title: string;
-    export let description: string;
+	export let description: string;
-    export let marginTop: string;
+	export let marginTop: string;
 </script>
 
 <div class="hero" style="margin-top: {marginTop}%;">
-    {#if title}
+	{#if title}
-        <h1>{title}</h1>
+		<h1>{title}</h1>
-    {/if}
+	{/if}
-    {#if description}
+	{#if description}
-        <p>{description}</p>
+		<p>{description}</p>
-    {/if}
+	{/if}
-    <slot />
+	<slot />
 </div>
 
 <style>
-    .hero {
+	.hero {
-        display: flex;
+		display: flex;
-        flex-direction: column;
+		flex-direction: column;
-        align-items: center;
+		align-items: center;
-        justify-content: center;
+		justify-content: center;
-        font-family: var(--font-header);
+		font-family: var(--font-header);
-    }
+	}
 
-    .hero > * {
+	.hero > * {
-        margin: 0;
+		margin: 0;
-        padding: 0;
+		padding: 0;
-        text-align: center;
+		text-align: center;
-    }
+	}
 
-    p {
+	p {
-        font-size: 30px;
+		font-size: 30px;
-        color: #b6b6b6;
+		color: #b6b6b6;
-    }
+	}
 
-    h1 {
+	h1 {
-        font-size: 50px;
+		font-size: 50px;
-        font-weight: 800;
+		font-weight: 800;
-        color: var(--accent-primary);
+		color: var(--accent-primary);
-    }
+	}
-</style>
+</style>

src/lib/Nav.svelte

@@ -18,8 +18,7 @@
 	</label>
 
 	<div class="links">
-		<a href="https://instances.projectsegfau.lt/">Instances</a
+		<a href="https://instances.projectsegfau.lt/">Instances</a>
-		>
 		<a href="/minecraft">Minecraft</a>
 		<a href="/donate">Donate</a>
 		<a href="/faq">FAQ</a>
@@ -43,7 +42,7 @@
 		background-color: var(--primary);
 		border-bottom: 1px solid var(--grey);
 		display: flex;
-		padding: .5rem;
+		padding: 0.5rem;
 		flex-direction: row;
 		align-items: center;
 		justify-content: space-between;
@@ -54,25 +53,24 @@
 		text-decoration: none;
 		color: var(--text);
 		gap: 8px;
-		transition: opacity .25s;
+		transition: opacity 0.25s;
 	}
 
 	a.brand:hover {
-		opacity: .6;
+		opacity: 0.6;
 	}
 
 	.links {
 		display: flex;
 		gap: 0.5rem;
-		
 	}
 
 	.links > * {
-		padding: .5rem;
+		padding: 0.5rem;
 		cursor: pointer;
 		color: var(--text);
 		text-decoration: none;
-		transition: color .25s;
+		transition: color 0.25s;
 		font-size: 13px;
 		font-weight: 500;
 		display: flex;
@@ -122,7 +120,7 @@
 			z-index: 1;
 			position: absolute;
 			right: 1rem;
-			top: .5rem;
+			top: 0.5rem;
 			border: none;
 			border-radius: 10px;
 			height: 30px;

src/lib/Team.json

@@ -26,7 +26,6 @@
 		"website": "https://miicord.com/",
 		"email": "midou@projectsegfau.lt",
 		"pgp": "https://keys.openpgp.org/vks/v1/by-fingerprint/E2CA3E4AAC6FF624A1EB993FFC7429AE78981D71"
-		
 	},
 	{
 		"name": "MrLeRien",

src/lib/app.css

@@ -20,14 +20,13 @@ html {
 	--primary: #151515;
 	--secondary: #252525;
 	--tertiary: #353535;
-	--accent-primary: #B59BD8;
+	--accent-primary: #b59bd8;
-	--accent-secondary: #B59BD8;
+	--accent-secondary: #b59bd8;
-	--accent-tertiary: #B59BD8;
+	--accent-tertiary: #b59bd8;
 	--text: #ffffffde;
 	--grey: #5454547a;
 	--font-primary: Raleway;
 	--font-header: Raleway;
-
 }
 
 body {
@@ -50,9 +49,9 @@ a {
 	text-decoration: underline;
 	color: var(--accent-primary);
 	text-underline-offset: 5px;
-	transition: filter .25s;
+	transition: filter 0.25s;
 }
 
 a:hover {
 	filter: brightness(125%);
-}
+}

src/routes/faq.md

@@ -10,6 +10,7 @@ description: Frequently Asked Questions
 The project doesn't have a single owner but is made up of a team of people. A list of the people involved and their positions can be found [on our members page](/team).
 
 ## What's the backstory to Project Segfault?
+
 We have a rather interesting backstory, if I do say so myself. [Click here to see a timeline of things that happened in Project Segfault's history](/timeline)
 
 ## One of your services contains toxic people!

src/routes/index.svelte

@@ -1,150 +1,155 @@
 <script lang="ts">
-    import SvelteSeo from "svelte-seo";
+	import SvelteSeo from "svelte-seo";
-    import Hero from "$lib/Hero.svelte";
+	import Hero from "$lib/Hero.svelte";
 
-    let description: string = "7 idiots, 2 OVH vpses, a BuyVM 1024 Slice, a Sun server and a Hitachi Compute Rack.";
+	let description: string =
-    import IconMoneyBill from "~icons/fa6-solid/money-bill";
+		"7 idiots, 2 OVH vpses, a BuyVM 1024 Slice, a Sun server and a Hitachi Compute Rack.";
+	import IconMoneyBill from "~icons/fa6-solid/money-bill";
 
-    let announcements: any = [];
+	let announcements: any = [];
 	async function fetchAnnouncements() {
 		const url = `https://segfautils.projectsegfau.lt/api/announcements`;
 		const response = await fetch(url);
 		announcements = await response.json();
-        return announcements;
+		return announcements;
 	}
 
-    const promise = fetchAnnouncements();
+	const promise = fetchAnnouncements();
 
-    import IconCircleInfo from "~icons/fa6-solid/circle-info";
+	import IconCircleInfo from "~icons/fa6-solid/circle-info";
-    import IconTriangleExclamation from "~icons/fa6-solid/triangle-exclamation";
+	import IconTriangleExclamation from "~icons/fa6-solid/triangle-exclamation";
+
+	import dayjs from "dayjs";
+
+	const formattedTime = dayjs(announcements.created).format(
+		"DD/MM/YYYY HH:mm"
+	);
 </script>
 
-<SvelteSeo
+<SvelteSeo title="Home" {description} />
-	title="Home"
-	description={description}
-/>
 
-<Hero title="Project Segfault" description="Open source development and hosted services" marginTop=7>
+<Hero
-    <div class="buttons">
+	title="Project Segfault"
-        <a href="https://instances.projectsegfau.lt/">Explore our services</a>
+	description="Open source development and hosted services"
-        <a href="/projects">Explore our projects</a>
+	marginTop="7"
-        <a href="/donate"><IconMoneyBill /> Donate</a>
+>
-    </div>
+	<div class="buttons">
+		<a href="https://instances.projectsegfau.lt/">Explore our services</a>
+		<a href="/projects">Explore our projects</a>
+		<a href="/donate"><IconMoneyBill /> Donate</a>
+	</div>
 </Hero>
 
 <div class="announcements">
-    {#await promise}
+	{#await promise}
-    <span></span>
+		<span />
-    {:then}
+	{:then}
-            <div class="announcement-container">
+		<div class="announcement-container">
-                <div class="announcement">
+			<div class="announcement">
-                    <div class="general">
+				<div class="general">
-                        {#if (announcements.severity === "info") }
+					{#if announcements.severity === "info"}
-                            <IconCircleInfo />
+						<IconCircleInfo />
-                            {:else}
+					{:else}
-                                <IconTriangleExclamation />
+						<IconTriangleExclamation />
-                        {/if}
+					{/if}
-                        <span>
+					<span>
-                            {announcements.created}
+						{formattedTime}
-                        </span>
+					</span>
-                    </div>
+				</div>
-                    <div class="title">
+				<div class="title">
-                        <h1>{announcements.title}</h1>
+					<h1>{announcements.title}</h1>
-                    </div>
+				</div>
 
-                    <div class="read-more">
+				<div class="read-more">
-                        <a href={announcements.link}>Read more...</a>
+					<a href={announcements.link}>Read more...</a>
-                    </div>
+				</div>
-                </div>
+			</div>
-            </div>
+		</div>
-    {:catch}
+	{:catch}
-        <span></span>
+		<span />
-    {/await}
+	{/await}
 </div>
 
-
+{#if announcements.severity === "info"}
+	<style>
+		.announcement {
+			background-color: #8caaee;
+		}
+	</style>
+{:else if announcements.severity === "low"}
+	<style>
+		.announcement {
+			background-color: #a6d189;
+		}
+	</style>
+{:else if announcements.severity === "medium"}
+	<style>
+		.announcement {
+			background-color: #e5c890;
+		}
+	</style>
+{:else if announcements.severity === "high"}
+	<style>
+		.announcement {
+			background-color: #e78284;
+		}
+	</style>
+{/if}
 
 <style>
+	.buttons {
+		display: flex;
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+		gap: 1rem;
+		margin: 1rem;
+	}
 
-    .buttons {
+	@media screen and (max-width: 452px) {
-        display: flex;
+		.buttons {
-        flex-direction: row;
+			flex-direction: column;
-        justify-content: center;
+		}
-        align-items: center;
+	}
-        gap: 1rem;
-        margin: 1rem;
-    }
 
-    @media screen and (max-width: 452px) {
+	.buttons a {
-        .buttons {
+		text-decoration: none;
-            flex-direction: column;
+		background-color: var(--accent-primary);
-        }
+		padding: 8px 1em 8px 1em;
-    }
+		color: var(--primary);
+		border-radius: 10px;
+		transition: filter 0.25s;
+		display: flex;
+		align-items: center;
+		gap: 4px;
+	}
 
-    .buttons a {
+	.buttons a:hover {
-        text-decoration: none;
+		filter: brightness(125%);
-        background-color: var(--accent-primary);
+	}
-        padding: 8px 1em 8px 1em;
-        color: var(--primary);
-        border-radius: 10px;
-        transition: filter .25s;
-        display: flex;
-        align-items: center;
-        gap: 4px;
-    }
 
-    .buttons a:hover {
+	.announcement-container {
-        filter: brightness(125%);
+		display: flex;
-    }
+		justify-content: center;
+		margin-top: 4rem;
+	}
 
-    .announcement-container {
+	.announcement {
-        display: flex;
+		color: var(--primary);
-        justify-content: center;
+		padding: 2rem 1rem;
-        margin-top: 4rem;
+		border-radius: 10px;
-    }
+		width: fit-content;
-    
+		display: flex;
-    .announcement {
+		flex-direction: column;
-        color: var(--primary);
+	}
-        padding: 2rem 1rem;
-        border-radius: 10px;
-        width: fit-content;
-        display: flex;
-        flex-direction: column;
-    }
 
-    .announcement a {
+	.announcement a {
-        color: var(--primary);
+		color: var(--primary);
-    }
+	}
 
-    .announcement .general {
+	.announcement .general {
-        display: flex;
+		display: flex;
-        align-items: center;
+		align-items: center;
-        gap: 8px;
+		gap: 8px;
-    }
+	}
 </style>
-
-{#if (announcements.severity === "info") }
-    <style>
-        .announcement {
-            background-color: #8caaee;
-        }
-    </style>
-    {:else if (announcements.severity === "low") }
-        <style>
-            .announcement {
-                background-color: #a6d189;
-            }
-        </style>
-    {:else if (announcements.severity === "medium") }
-        <style>
-            .announcement {
-                background-color: #e5c890;
-            }
-        </style>
-    {:else if (announcements.severity === "high") }
-        <style>
-            .announcement {
-                background-color: #e78284;
-            }
-        </style>
-{/if}

src/routes/legal/privacy-policy.md

@@ -39,5 +39,4 @@ Often times you can clear your own data simply by deleting your account.
 
 As we said, you can request any GDPR/Privacy things in [this Matrix room](https://matrix.to/#/#gdpr:projectsegfau.lt). But, if there's any ongoing investigations and a law enforcement agency contacts us, we will comply. But, we will only do it if we can verify it's official and they have a warrant.
 
-
 _Last updated 28.07.2022 22:00 UTC+1_

src/routes/projects.svelte

@@ -95,7 +95,6 @@
 	.web:hover {
 		background-color: var(--accent-tertiary);
 		color: var(--secondary) !important;
-		
 	}
 
 	.socials {

src/routes/team.svelte

@@ -50,7 +50,7 @@
 					{/if}
 
 					{#if email}
-						<a href=mailto:{email} class="email"><IconEmail /></a>
+						<a href="mailto:{email}" class="email"><IconEmail /></a>
 					{/if}
 
 					{#if pgp}

src/routes/timeline.svelte

@@ -7,13 +7,12 @@
 		TimelineConnector,
 		TimelineContent,
 		TimelineOppositeContent
-	} from 'svelte-vertical-timeline';
+	} from "svelte-vertical-timeline";
 	import Hero from "$lib/Hero.svelte";
 </script>
 
-
 <Hero>
-    <h1>A timeline of <span>Project Segfault</span>'s history</h1>
+	<h1>A timeline of <span>Project Segfault</span>'s history</h1>
 </Hero>
 
 <Timeline position="alternate">
@@ -22,14 +21,21 @@
 			<p>2020</p>
 		</TimelineOppositeContent>
 		<TimelineSeparator>
-			<TimelineDot
+			<TimelineDot style={"background-color: #fff; "} />
-				style={'background-color: #fff; '}
-			/>
 			<TimelineConnector />
 		</TimelineSeparator>
 		<TimelineContent>
 			<h3>Terrific Tea Studios is formed</h3>
-			<p>While not intended to be as the beginning of the founding of Project Segfault, it grouped 3 core team members together: Odyssey, Midou and Devnol, with some other people. This was all of us' first attempt at making an organization that focuses on computers. It primarily focused on development of products. This organization was ultimately killed in February 2021 when Odyssey brutally murdered it by abusing a backdoor in it's Discord bot, Cytrus-RE.</p>
+			<p>
+				While not intended to be as the beginning of the founding of
+				Project Segfault, it grouped 3 core team members together:
+				Odyssey, Midou and Devnol, with some other people. This was all
+				of us' first attempt at making an organization that focuses on
+				computers. It primarily focused on development of products. This
+				organization was ultimately killed in February 2021 when Odyssey
+				brutally murdered it by abusing a backdoor in it's Discord bot,
+				Cytrus-RE.
+			</p>
 		</TimelineContent>
 	</TimelineItem>
 
@@ -38,14 +44,22 @@
 			<p>January 2021</p>
 		</TimelineOppositeContent>
 		<TimelineSeparator>
-			<TimelineDot
+			<TimelineDot style={"background-color: #fff; "} />
-				style={'background-color: #fff; '}
-			/>
 			<TimelineConnector />
 		</TimelineSeparator>
 		<TimelineContent>
 			<h3>Neutron Technologies is formed</h3>
-			<p>This was our second attempt at an organization, attempting to not follow our previous mistakes. While it went nicely at first, it eventually got to the point where Devnol (the current organizer) decided he had better things to do (not really) and left. From there, things went south and eventually we just deleted the entire organization's Discord (we werent convinced of Matrix at this time.). Since we had access to some hardware, this was supposed to be focused on making backend stuff rather than desktop apps.</p>
+			<p>
+				This was our second attempt at an organization, attempting to
+				not follow our previous mistakes. While it went nicely at first,
+				it eventually got to the point where Devnol (the current
+				organizer) decided he had better things to do (not really) and
+				left. From there, things went south and eventually we just
+				deleted the entire organization's Discord (we werent convinced
+				of Matrix at this time.). Since we had access to some hardware,
+				this was supposed to be focused on making backend stuff rather
+				than desktop apps.
+			</p>
 		</TimelineContent>
 	</TimelineItem>
 
@@ -54,14 +68,18 @@
 			<p>Somewhere in July 2021?</p>
 		</TimelineOppositeContent>
 		<TimelineSeparator>
-			<TimelineDot
+			<TimelineDot style={"background-color: #fff; "} />
-				style={'background-color: #fff; '}
+			<TimelineConnector />
-			/>
-            <TimelineConnector />
 		</TimelineSeparator>
 		<TimelineContent>
 			<h3>MrLeRien opens a small homeserver with the help of Midou</h3>
-			<p>This eventually formed a nice little (primarily focused on hosting) project called mutahar.rocks. Here, the duo focused on hosting anything they could on a Core 2 Duo HP machine with 8GB of RAM running Arch Linux. This alongside a small VPS they already had.</p>
+			<p>
+				This eventually formed a nice little (primarily focused on
+				hosting) project called mutahar.rocks. Here, the duo focused on
+				hosting anything they could on a Core 2 Duo HP machine with 8GB
+				of RAM running Arch Linux. This alongside a small VPS they
+				already had.
+			</p>
 		</TimelineContent>
 	</TimelineItem>
 	<TimelineItem>
@@ -69,14 +87,16 @@
 			<p>Probably October 2021</p>
 		</TimelineOppositeContent>
 		<TimelineSeparator>
-            <TimelineDot
+			<TimelineDot style={"background-color: #fff; "} />
-				style={'background-color: #fff; '}
+			<TimelineConnector />
-			/>
-            <TimelineConnector />
 		</TimelineSeparator>
 		<TimelineContent>
 			<h3>Mutahar.rocks obtained a powerful server</h3>
-			<p>MrLeRien's dad's work had an unused Hitachi Compute Rack with 320GB of ram and two decade-old Xeons. Once he got his hands on the server, mutahar.rocks started hosting more stuff.</p>
+			<p>
+				MrLeRien's dad's work had an unused Hitachi Compute Rack with
+				320GB of ram and two decade-old Xeons. Once he got his hands on
+				the server, mutahar.rocks started hosting more stuff.
+			</p>
 		</TimelineContent>
 	</TimelineItem>
 	<TimelineItem>
@@ -84,14 +104,16 @@
 			<p>December 2021</p>
 		</TimelineOppositeContent>
 		<TimelineSeparator>
-			<TimelineDot
+			<TimelineDot style={"background-color: #fff; "} />
-				style={'background-color: #fff; '}
+			<TimelineConnector />
-			/>
-            <TimelineConnector />
 		</TimelineSeparator>
 		<TimelineContent>
 			<h3>Odyssey joins Mutahar.rocks</h3>
-			<p>At this point, it wasn't "official", but he did some work for them (like try to make a website, which eventually got lost and never found), and that's about it.</p>
+			<p>
+				At this point, it wasn't "official", but he did some work for
+				them (like try to make a website, which eventually got lost and
+				never found), and that's about it.
+			</p>
 		</TimelineContent>
 	</TimelineItem>
 	<TimelineItem>
@@ -99,14 +121,18 @@
 			<p>February 2022</p>
 		</TimelineOppositeContent>
 		<TimelineSeparator>
-			<TimelineDot
+			<TimelineDot style={"background-color: #fff; "} />
-				style={'background-color: #fff; '}
+			<TimelineConnector />
-			/>
-            <TimelineConnector />
 		</TimelineSeparator>
 		<TimelineContent>
 			<h3>Mutahar.rocks started hosting gameservers.</h3>
-			<p>Odyssey was in charge of most of them, which made him an official member of Mutahar.rocks. We primarily focused on hosting Source game servers, for example Garry's Mod. We also hosted a Minecraft server to a couple of... annoying people. I'm glad they're out of my life now.</p>
+			<p>
+				Odyssey was in charge of most of them, which made him an
+				official member of Mutahar.rocks. We primarily focused on
+				hosting Source game servers, for example Garry's Mod. We also
+				hosted a Minecraft server to a couple of... annoying people. I'm
+				glad they're out of my life now.
+			</p>
 		</TimelineContent>
 	</TimelineItem>
 	<TimelineItem>
@@ -114,15 +140,18 @@
 			<p>April 2022</p>
 		</TimelineOppositeContent>
 		<TimelineSeparator>
-			<TimelineDot
+			<TimelineDot style={"background-color: #fff; "} />
-				style={'background-color: #fff; '}
+			<TimelineConnector />
-			>
-			</TimelineDot>
-            <TimelineConnector />
 		</TimelineSeparator>
 		<TimelineContent>
 			<h3>Mutahar.rocks' main server was forced to shut down.</h3>
-			<p>Eventually, after many months and pointless arguments with his dad, MrLeRien decided to give up on fighting with his dad to keep the server online. I don't remember exactly when, but I had to make an announcement in the middle of a class to tell people what was going on. Not fun.</p>
+			<p>
+				Eventually, after many months and pointless arguments with his
+				dad, MrLeRien decided to give up on fighting with his dad to
+				keep the server online. I don't remember exactly when, but I had
+				to make an announcement in the middle of a class to tell people
+				what was going on. Not fun.
+			</p>
 		</TimelineContent>
 	</TimelineItem>
 	<TimelineItem>
@@ -130,14 +159,19 @@
 			<p>April 2022</p>
 		</TimelineOppositeContent>
 		<TimelineSeparator>
-			<TimelineDot
+			<TimelineDot style={"background-color: #fff; "} />
-				style={'background-color: #fff; '}
+			<TimelineConnector />
-			/>
-            <TimelineConnector />
 		</TimelineSeparator>
 		<TimelineContent>
-			<h3>Devnol comes in and joins Mutahar.rocks with his server, Helios.</h3>
+			<h3>
-			<p>When he joined, we decided that this was huge for Mutahar.rocks and we decided it was time to rebrand... This is when Mutahar.rocks became Project Segfault. Same thing - just a bit more professional.</p>
+				Devnol comes in and joins Mutahar.rocks with his server, Helios.
+			</h3>
+			<p>
+				When he joined, we decided that this was huge for Mutahar.rocks
+				and we decided it was time to rebrand... This is when
+				Mutahar.rocks became Project Segfault. Same thing - just a bit
+				more professional.
+			</p>
 		</TimelineContent>
 	</TimelineItem>
 	<TimelineItem>
@@ -145,15 +179,20 @@
 			<p>Now</p>
 		</TimelineOppositeContent>
 		<TimelineSeparator>
-			<TimelineDot
+			<TimelineDot style={"background-color: #fff; "} />
-				style={'background-color: #fff; '}
+			<TimelineConnector />
-			>
-			</TimelineDot>
-            <TimelineConnector />
 		</TimelineSeparator>
 		<TimelineContent>
 			<h3>Months later, 3 new members, we're better than ever.</h3>
-			<p>We decided to get some new members. First, we started by getting someone who likes to do frontend development, Akis. Then, we got an amazing sysadmin who goes by the alias "openssl_rand". He does a lot of cool stuff for us, and he is very dedicated. Then we also decided that we needed backups, and then one of our friends told us he could help us with that. His name is Stephenvk. We also decided to just get better.</p>
+			<p>
+				We decided to get some new members. First, we started by getting
+				someone who likes to do frontend development, Akis. Then, we got
+				an amazing sysadmin who goes by the alias "openssl_rand". He
+				does a lot of cool stuff for us, and he is very dedicated. Then
+				we also decided that we needed backups, and then one of our
+				friends told us he could help us with that. His name is
+				Stephenvk. We also decided to just get better.
+			</p>
 		</TimelineContent>
 	</TimelineItem>
 	<TimelineItem>
@@ -161,15 +200,19 @@
 			<p>Now-er</p>
 		</TimelineOppositeContent>
 		<TimelineSeparator>
-			<TimelineDot
+			<TimelineDot style={"background-color: #fff; "} />
-				style={'background-color: #fff; '}
-			>
-			</TimelineDot>
 			<TimelineConnector />
 		</TimelineSeparator>
 		<TimelineContent>
-			<h3>Project Segfault decides to expand and now develops software.</h3>
+			<h3>
-			<p>This started after Odyssey decided to work on Segfautils, an API for Project Segfault. Midou plans to start a huge project in the near future together with the team that can help people with multiple servers.</p>
+				Project Segfault decides to expand and now develops software.
+			</h3>
+			<p>
+				This started after Odyssey decided to work on Segfautils, an API
+				for Project Segfault. Midou plans to start a huge project in the
+				near future together with the team that can help people with
+				multiple servers.
+			</p>
 		</TimelineContent>
 	</TimelineItem>
 </Timeline>
@@ -177,10 +220,10 @@
 <style>
 	h1 {
 		font-size: 50px;
-        font-weight: 800;
+		font-weight: 800;
 	}
 
-    span {
+	span {
 		color: var(--accent-primary);
 	}
-</style>
+</style>