Merge branch 'brand-changes' of github.com:MutaTechTips/website into brand-changes

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 - present, Project Segfault team
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package.json

@@ -25,6 +25,7 @@
 		"svelte-hcaptcha": "^0.1.1",
 		"svelte-preprocess": "^4.10.7",
 		"svelte-seo": "^1.4.1",
+		"svelte-vertical-timeline": "^0.0.2",
 		"tslib": "^2.4.0",
 		"typescript": "^4.7.4",
 		"unplugin-icons": "^0.14.7",

pnpm-lock.yaml

@@ -13,6 +13,7 @@ specifiers:
   svelte-hcaptcha: ^0.1.1
   svelte-preprocess: ^4.10.7
   svelte-seo: ^1.4.1
+  svelte-vertical-timeline: ^0.0.2
   tslib: ^2.4.0
   typescript: ^4.7.4
   unplugin-icons: ^0.14.7
@@ -31,6 +32,7 @@ devDependencies:
   svelte-hcaptcha: 0.1.1
   svelte-preprocess: 4.10.7_uslzfc62di2n2otc2tvfklnwji
   svelte-seo: 1.4.1_typescript@4.7.4
+  svelte-vertical-timeline: 0.0.2
   tslib: 2.4.0
   typescript: 4.7.4
   unplugin-icons: 0.14.7_vite@3.0.4
@@ -1108,6 +1110,10 @@ packages:
       - typescript
     dev: true
 
+  /svelte-vertical-timeline/0.0.2:
+    resolution: {integrity: sha512-tM+wghFsIW3Xb/KC+ImlTw1S1THTEhcVki8x4/u+XVLGAnRGiPbeiO/aRhVj0k8v7D8YZHwlRm0X295KyAKQdg==}
+    dev: true
+
   /svelte/3.49.0:
     resolution: {integrity: sha512-+lmjic1pApJWDfPCpUUTc1m8azDqYCG1JN9YEngrx/hUyIcFJo6VZhj0A1Ai0wqoHcEIuQy+e9tk+4uDgdtsFA==}
     engines: {node: '>= 8'}

src/lib/Footer.svelte

@@ -1,87 +1,59 @@
 <script>
-	import IconMatrix from "~icons/simple-icons/matrix";
-	import IconGitHub from "~icons/simple-icons/github";
-	import IconSignal from "~icons/fa6-solid/signal";
 	import { page } from "$app/stores";
 </script>
 
 <footer>
 	{#if $page.url.pathname === "/"}
+	<div class="badge">
 		<a
 			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"
-			style="width: fit-content;"
+			style="width: fit-content; padding: 1rem;"
 		>
 			<img
 				src="https://www.abuseipdb.com/contributor/82331.svg"
 				alt="AbuseIPDB Contributor Badge"
 			/>
 		</a>
+	</div>
 	{/if}
-	<hr />
 	<div class="content">
-		<span>© 2021 - present, Project Segfault</span>
+		<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>
-		<div class="links">
-			<a href="https://matrix.to/#/#project-segfault:projectsegfau.lt/">
-				<IconMatrix />
-			</a>
-			<a href="https://github.com/ProjectSegfault/">
-				<IconGitHub />
-			</a>
-			<a href="https://status.projectsegfau.lt/">
-				<IconSignal />
-			</a>
-		</div>
 	</div>
 </footer>
 
 <style>
 	footer {
-		padding: 1rem;
 		display: flex;
 		flex-direction: column;
 		font-size: 20px;
 		position: sticky;
 		top: 100vh;
-		width: calc(100vw - 2rem);
-	}
-
-	hr {
-		color: var(--accent-primary);
-		width: 100%;
-		margin-left: 0;
 	}
 
 	div.content {
-		display: flex;
-		justify-content: space-between;
-	}
-
-	div.links {
-		display: flex;
-		gap: 12px;
-		margin-left: 8px;
-	}
-
-	.links a {
-		text-decoration: none;
 		display: flex;
 		align-items: center;
+		flex-direction: column;
+		border-top: 1px solid var(--grey);
+		padding: .5rem;
 	}
 
-	@media only screen and (max-width: 500px) {
+	div.content > * {
-		.content {
+		color: var(--text);
-			display: flex;
+		font-size: 13px;
-			flex-direction: column;
+		font-weight: 500;
-			gap: 8px;
+		text-align: center;
-		}
-
-		div.links {
-			margin-left: 0;
-		}
 	}
 
+    .badge {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+    }
+
 	img {
 		width: 270px;
 		background: var(--accent-primary);

src/lib/Nav.svelte

@@ -1,5 +1,7 @@
 <script>
 	import IconBars from "~icons/fa6-solid/bars";
+	import IconMatrix from "~icons/simple-icons/matrix";
+	import IconGitHub from "~icons/simple-icons/github";
 </script>
 
 <nav>
@@ -16,7 +18,7 @@
 	</label>
 
 	<div class="links">
-		<a href="https://instances.projectsegfau.lt/">Hosted services</a
+		<a href="https://instances.projectsegfau.lt/">Instances</a
 		>
 		<a href="/minecraft">Minecraft</a>
 		<a href="/donate">Donate</a>
@@ -25,6 +27,13 @@
 		<a href="/team">Our team</a>
 		<a href="https://blog.projectsegfau.lt/">Blog</a>
 		<a href="/legal">Legal</a>
+		<a href="https://status.projectsegfau.lt/">Status</a>
+		<a href="https://matrix.to/#/#project-segfault:projectsegfau.lt/">
+			<IconMatrix />
+		</a>
+		<a href="https://github.com/ProjectSegfault/">
+			<IconGitHub />
+		</a>
 	</div>
 </nav>
 
@@ -54,6 +63,7 @@
 	.links {
 		display: flex;
 		gap: 0.5rem;
+		
 	}
 
 	.links > * {
@@ -64,6 +74,8 @@
 		transition: color .25s;
 		font-size: 13px;
 		font-weight: 500;
+		display: flex;
+		align-items: center;
 	}
 
 	.links > *:hover {
@@ -85,7 +97,7 @@
 		display: none;
 	}
 
-	@media screen and (max-width: 1150px) {
+	@media screen and (max-width: 870px) {
 		.links {
 			display: none;
 			width: 100%;
@@ -109,7 +121,7 @@
 			z-index: 1;
 			position: absolute;
 			right: 1rem;
-			top: .35rem;
+			top: .5rem;
 			border: none;
 			border-radius: 10px;
 			height: 30px;

src/lib/Projects.json

@@ -0,0 +1,14 @@
+[
+	{
+		"name": "Website",
+		"description": "Our website written in SvelteKit.",
+		"github": "https://github.com/ProjectSegfault/website/",
+		"website": "https://projectsegfau.lt/"
+	},
+	{
+		"name": "Segfautils",
+		"description": "Web utilities (APIs) for Project Segfault, but you could probably use them too.",
+		"github": "https://github.com/ProjectSegfault/Segfautils/",
+		"website": "https://segfautils.projectsegfau.lt/"
+	}
+]

src/lib/app.css

@@ -10,17 +10,23 @@
 	font-display: swap;
 }
 
+@font-face {
+	font-family: Raleway;
+	src: url("/Raleway.ttf");
+	font-display: swap;
+}
+
 html {
 	--primary: #151515;
 	--secondary: #252525;
 	--tertiary: #353535;
-	--accent-primary: #00d4aa;
+	--accent-primary: #B59BD8;
-	--accent-secondary: #00d4aa;
+	--accent-secondary: #B59BD8;
-	--accent-tertiary: #00d4aa;
+	--accent-tertiary: #B59BD8;
 	--text: #ffffffde;
 	--grey: #5454547a;
-	--font-primary: Comfortaa;
+	--font-primary: Raleway;
-	--font-header: Inter
+	--font-header: Raleway;
 
 }
 
@@ -44,4 +50,9 @@ a {
 	text-decoration: underline;
 	color: var(--accent-primary);
 	text-underline-offset: 5px;
+	transition: filter .25s;
 }
+
+a:hover {
+	filter: brightness(125%);
+}

src/routes/faq.md

@@ -9,6 +9,9 @@ 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](/members).
 
+## 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!
 
 You can contact us by mail or Matrix and we can figure this out with you. But we recommend that you put most of these requests in our support channel at [#support:projectsegfau.lt](https://matrix.to/#/#support:projectsegfau.lt) on Matrix. If it's something personal, just say that you have a report against someone on one of our services and you'd like to be contacted by an admin and we'll contact you as soon as possible. We generally tend to be active throughout the day.

src/routes/index.svelte

@@ -2,6 +2,7 @@
     import SvelteSeo from "svelte-seo";
 
     let description: string = "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";
 </script>
 
 <SvelteSeo
@@ -12,33 +13,19 @@
 <div class="hero">
     <h1><span>Project</span> <span>Segfault</span></h1>
     
-    <p>Open source development <br /> and hosted services</p>
+    <p>Open source development and hosted services</p>
+    
+    <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>
 </div>
 
-<h2>What is this?</h2>
-
-<p>
-    We are 7 humans who have a decently powerful server. What do we do with this server? Host game servers and random assortment of privacy respecting tools like Invidious, Nextcloud, Matrix etc.... and maybe some original works. You'll see eventually!
-</p>
-
-<h2>Tell me more! What do you guys host? Where can I contact you? Can you fix my daughter's iPad?</h2>
-
-<p>
-    We can't fix your daughter's iPad, but there is a navigation bar at the top of the page with links to websites and pages that explain things about us, or contain useful information about our services.
-</p>
-
 <style>
     h1 {
         font-size: 50px;
         font-weight: 800;
-        text-shadow: 0px 2px 2px rgba(78, 78, 78, 0.6);
-    }
-
-    h1 > *:first-child {
-        color: var(--accent-secondary);
-    }
-
-    h1 > *:last-child {
         color: var(--accent-primary);
     }
 
@@ -46,19 +33,44 @@
         display: flex;
         flex-direction: column;
         align-items: center;
-        justify-content: flex-start;
+        justify-content: center;
-        text-align: start;
+        margin-top: 7%;
         font-family: var(--font-header);
     }
 
-    .hero > p {
+    .hero > * {
         margin: 0;
         padding: 0;
+        text-align: center;
     }
 
     .hero > p {
-        font-size: 40px;
+        font-size: 30px;
-        font-weight: 600;
         color: #b6b6b6;
     }
+
+    .buttons {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        gap: 1rem;
+        margin: 1rem;
+    }
+
+    a {
+        text-decoration: none;
+        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;
+    }
+
+    a:hover {
+        filter: brightness(125%);
+    }
 </style>

src/routes/projects.svelte

@@ -0,0 +1,106 @@
+<script lang="ts">
+	import projects from "$lib/Projects.json";
+	import IconGitHub from "~icons/simple-icons/github";
+
+	import IconGlobe from "~icons/fa6-solid/globe";
+	import IconEmail from "~icons/fa6-solid/envelope";
+	import IconCamera from "~icons/fa6-solid/camera";
+</script>
+
+<svelte:head>
+	<title>Our projects | Project Segfault</title>
+	<meta name="description" content="Our collection of projects." />
+</svelte:head>
+
+<div class="team">
+	<h1>Our projects</h1>
+	<div class="projects-outer">
+		{#each projects as { name, description, github, website }}
+			<div class="projects-inner">
+				<div class="main">
+					<span>{name}</span>
+
+					{#if description}
+						<p class="description">{description}</p>
+					{/if}
+				</div>
+
+				<div class="socials">
+					{#if github}
+						<a href={github} class="githubcolored"><IconGitHub /></a
+						>
+					{/if}
+
+					{#if website}
+						<a href={website} class="web"><IconGlobe /></a>
+					{/if}
+				</div>
+			</div>
+		{/each}
+	</div>
+</div>
+
+<style>
+	.projects-outer {
+		display: flex;
+		flex-direction: column;
+		gap: 2rem;
+		flex-flow: row wrap;
+	}
+
+	.projects-inner {
+		background-color: #252525;
+		border-radius: 10px;
+		padding: 1rem;
+		width: 30em;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.main {
+		flex: 1;
+	}
+
+	span {
+		font-size: 25px;
+		font-weight: bold;
+	}
+
+	a {
+		border: none;
+		border-radius: 10px;
+		padding: 0.5rem;
+		cursor: pointer;
+		font-family: var(--font-primary);
+		color: var(--secondary);
+		text-decoration: none;
+		width: fit-content;
+	}
+
+	.githubcolored {
+		background-color: #333;
+		color: #fff !important;
+		font-size: 20px;
+		height: 23px;
+	}
+
+	.web {
+		background-color: var(--tertiary);
+		color: #fff !important;
+		font-size: 20px;
+		height: 23px;
+		transition: all 0.5s;
+	}
+
+	.web:hover {
+		background-color: var(--accent-tertiary);
+		color: var(--secondary) !important;
+		
+	}
+
+	.socials {
+		display: flex;
+		flex-direction: row;
+		gap: 0.5rem;
+	}
+</style>

src/routes/team.svelte

@@ -128,15 +128,14 @@
 		height: 23px;
 	}
 
-	.web:hover {
+	.web {
-		background-color: var(--accent-tertiary);
-		color: var(--secondary) !important;
 		transition: all 0.5s;
 	}
 
-	.web:active {
+	.web:hover {
-		background-color: var(--accent-primary);
+		background-color: var(--accent-tertiary);
-		transition: all 0.5s;
+		color: var(--secondary) !important;
+		
 	}
 
 	.socials {

src/routes/timeline.svelte

@@ -0,0 +1,153 @@
+<script>
+	import {
+		Timeline,
+		TimelineItem,
+		TimelineSeparator,
+		TimelineDot,
+		TimelineConnector,
+		TimelineContent,
+		TimelineOppositeContent
+	} from 'svelte-vertical-timeline';
+</script>
+
+<Timeline position="alternate">
+	<TimelineItem>
+		<TimelineOppositeContent slot="opposite-content">
+			<p>2020</p>
+		</TimelineOppositeContent>
+		<TimelineSeparator>
+			<TimelineDot
+				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>
+		</TimelineContent>
+	</TimelineItem>
+
+	<TimelineItem>
+		<TimelineOppositeContent slot="opposite-content">
+			<p>January 2021</p>
+		</TimelineOppositeContent>
+		<TimelineSeparator>
+			<TimelineDot
+				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>
+		</TimelineContent>
+	</TimelineItem>
+
+	<TimelineItem>
+		<TimelineOppositeContent slot="opposite-content">
+			<p>Somewhere in July 2021?</p>
+		</TimelineOppositeContent>
+		<TimelineSeparator>
+			<TimelineDot
+				style={'background-color: #fff; '}
+			/>
+            <TimelineConnector />
+		</TimelineSeparator>
+		<TimelineContent>
+			<h3>Midou meets a guy named MrLeRien</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 that was running Arch Linux. Eventually, they decided to buy a couple of VPSes.</p>
+		</TimelineContent>
+	</TimelineItem>
+	<TimelineItem>
+		<TimelineOppositeContent slot="opposite-content">
+			<p>Probably October 2021</p>
+		</TimelineOppositeContent>
+		<TimelineSeparator>
+            <TimelineDot
+				style={'background-color: #fff; '}
+			/>
+            <TimelineConnector />
+		</TimelineSeparator>
+		<TimelineContent>
+			<h3>Mutahar.rocks obtained a powerful server</h3>
+			<p>MrLeRien's dad's work had an unused Hitcachi Compute Rack with 320GB of ram and... I forgot the CPU, midou fill this in. Well, once MrLeRien got his hands on the Hitachi, mutahar.rocks started hosting more stuff.</p>
+		</TimelineContent>
+	</TimelineItem>
+	<TimelineItem>
+		<TimelineOppositeContent slot="opposite-content">
+			<p>December 2021</p>
+		</TimelineOppositeContent>
+		<TimelineSeparator>
+			<TimelineDot
+				style={'background-color: #fff; '}
+			/>
+            <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>
+		</TimelineContent>
+	</TimelineItem>
+	<TimelineItem>
+		<TimelineOppositeContent slot="opposite-content">
+			<p>February 2022</p>
+		</TimelineOppositeContent>
+		<TimelineSeparator>
+			<TimelineDot
+				style={'background-color: #fff; '}
+			/>
+            <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>
+		</TimelineContent>
+	</TimelineItem>
+	<TimelineItem>
+		<TimelineOppositeContent slot="opposite-content">
+			<p>April 2022</p>
+		</TimelineOppositeContent>
+		<TimelineSeparator>
+			<TimelineDot
+				style={'background-color: #fff; '}
+			>
+			</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>
+		</TimelineContent>
+	</TimelineItem>
+	<TimelineItem>
+		<TimelineOppositeContent slot="opposite-content">
+			<p>April 2022</p>
+		</TimelineOppositeContent>
+		<TimelineSeparator>
+			<TimelineDot
+				style={'background-color: #fff; '}
+			/>
+            <TimelineConnector />
+		</TimelineSeparator>
+		<TimelineContent>
+			<h3>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>
+		<TimelineOppositeContent slot="opposite-content">
+			<p>Now</p>
+		</TimelineOppositeContent>
+		<TimelineSeparator>
+			<TimelineDot
+				style={'background-color: #fff; '}
+			>
+			</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. This is just the beginning. We are going to take over the world, and become the NWO. Just kidding.</p>
+		</TimelineContent>
+	</TimelineItem>
+</Timeline>