Add page with links to etical hacking resources

src/lib/components/CollapsableSection.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+
+	type Props = { children: Snippet; title: string };
+
+	const { children, title }: Props = $props();
+	let isCollapsed = $state(true);
+	function toggleCollapsed() {
+		isCollapsed = !isCollapsed;
+	}
+</script>
+
+<div class="collapsable-section">
+	<button onclick={toggleCollapsed}>
+		<i class={["fa-solid", "fa-caret-right", !isCollapsed && "expanded"]}></i>
+		{title}
+	</button>
+	<div class={["content", !isCollapsed && "expanded"]}>
+		{@render children()}
+	</div>
+</div>
+
+<style lang="scss">
+	@use "$lib/styles/color";
+
+	button {
+		display: block;
+		border: 0;
+		padding: 0.5rem 1rem;
+		width: 100%;
+		border-radius: 0.5rem;
+		background-color: color.$gray-2;
+		color: color.$green-2;
+		font-family: "Fira Sans";
+		font-size: 1em;
+		text-align: left;
+		cursor: pointer;
+		transition: background-color ease 100ms;
+
+		&:hover {
+			background-color: color.$gray-3;
+		}
+
+		i {
+			transition: transform ease 100ms;
+
+			&.expanded {
+				transform: rotate(90deg);
+			}
+		}
+	}
+
+	div.content {
+		padding-left: 0.5rem;
+		height: 0;
+		overflow: hidden;
+		transition: height ease 100ms;
+
+		&.expanded {
+			height: auto;
+		}
+	}
+
+	div.collapsable-section {
+		margin: 1rem 0;
+	}
+</style>

src/lib/styles/default.scss

@@ -2,6 +2,9 @@
 
 @use "color";
 @use "mixin";
+html {
+	interpolate-size: allow-keywords;
+}
 
 body {
 	margin: 0;

src/routes/+layout.svelte

@@ -18,6 +18,7 @@
 		{ href: "/new-member", label: "Member" },
 		{ href: "/events", label: "Upcoming Events" },
 		{ href: "/events/previous", label: "Previous Events" },
+		{ href: "/resources", label: "Hacking Resources" },
 		// TODO(72): Redesign nav links to include dropdowns
 	];
 </script>

src/routes/resources/+page.svelte

@@ -0,0 +1,88 @@
+<script>
+	import Article from "$lib/components/Article.svelte";
+	import ArticleGroup from "$lib/components/ArticleGroup.svelte";
+	import CollapsableSection from "$lib/components/CollapsableSection.svelte";
+	import Heading from "$lib/components/Heading.svelte";
+	import Link from "$lib/components/Link.svelte";
+	import PageHead from "$lib/components/PageHead.svelte";
+</script>
+
+<PageHead
+	title="Hacking Resources"
+	description="A page for hacking resources and tools as well as other important information such as laws and news"
+/>
+
+<ArticleGroup layout="thin">
+	<Article>
+		<Heading level={1} content="Hacking Resources" />
+		<p>
+			Here is a list of resources to help you with hacking. It is a shorter version of the list on
+			the <Link href="https://www.ida.liu.se/~TDDE61/resources/index.en.shtml">
+				TDDE61 course page
+			</Link> with added descriptions.
+		</p>
+
+		<CollapsableSection title="Legal and policy information">
+			<p>
+				Swedish criminal code, Chapter 4, paragraphs
+				<Link href="https://lagen.nu/1962:700#K4P8S1" rel="noopener noreferrer">8</Link>
+				and
+				<Link href="https://lagen.nu/1962:700#K4P9cS1" rel="noopener noreferrer">9c</Link>
+			</p>
+		</CollapsableSection>
+		<CollapsableSection title="Hacking basics">
+			<p>
+				<Link href="https://tryhackme.com/" rel="noopener noreferrer">Tryhackme</Link> is a gamified
+				cybersecurity platform with hands-on labs and challenges for learning ethical hacking and SOC
+				at any skill level.
+			</p>
+			<p>
+				<Link href="https://www.hackthebox.com/" rel="noopener noreferrer">Hack The Box</Link> is a platform
+				that provides a variety of challenges and labs for learning ethical hacking and penetration testing.
+			</p>
+			<p>
+				<Link href="https://play.picoctf.org/practice" rel="noopener noreferrer">picoctf</Link> is a
+				free online platform that offers CTF challenges and competitions for students and beginners.
+			</p>
+		</CollapsableSection>
+		<CollapsableSection title="Linux distributions">
+			<p>
+				<Link href="https://www.kali.org/" rel="noopener noreferrer">Kali Linux</Link> is a Debian-based
+				Linux distribution that comes pre-installed with a wide range of security tools for penetration
+				testing and ethical hacking.
+			</p>
+			<p>
+				<Link href="https://www.parrotsec.org/" rel="noopener noreferrer">Parrot Security OS</Link> is
+				another Debian-based Linux distribution that provides a suite of security tools for ethical hacking
+				and penetration testing.
+			</p>
+		</CollapsableSection>
+		<CollapsableSection title="Tools">
+			<p>
+				<Link href="https://www.nmap.org/" rel="noopener noreferrer">Nmap</Link> is a network scanning
+				tool used for scanning ip addresses and ports in a network.
+			</p>
+			<p>
+				<Link href="https://www.wireshark.org/" rel="noopener noreferrer">Wireshark</Link> is a network
+				protocol analyzer that allows you to capture and interactively browse the traffic running on
+				a network.
+			</p>
+			<p>
+				<Link href="https://www.burpsuite.com/" rel="noopener noreferrer">Burp Suite</Link> is a collection
+				of tools used for pentesting web applications.
+			</p>
+			<p>
+				<Link href="https://www.openwall.com/john/" rel="noopener noreferrer">John the ripper</Link>
+				John the ripper is a free and open-source password cracking software tool that supports various
+				encryption algorithms.
+			</p>
+		</CollapsableSection>
+		<CollapsableSection title="Finding vulnerabilities">
+			<p>
+				<Link href="https://www.cvedetails.com/" rel="noopener noreferrer">CVE Details</Link> is a database
+				of known vulnerabilities and exposures, providing information on security issues in software
+				and hardware.
+			</p>
+		</CollapsableSection>
+	</Article>
+</ArticleGroup>