From 9b84073c7c8681e6382a4b72c0a6ce22e78aae84 Mon Sep 17 00:00:00 2001
From: Viktor Holta <viktor.holta@outlook.com>
Date: Wed, 8 Oct 2025 18:19:51 +0200
Subject: [PATCH 1/5] Create CollapsableSection component

Co-authored-by: Tove Haernfelt <tove.haernfelt@gmail.com>
---
 src/lib/components/CollapsableSection.svelte | 49 ++++++++++++++++++++
 1 file changed, 49 insertions(+)
 create mode 100644 src/lib/components/CollapsableSection.svelte

diff --git a/src/lib/components/CollapsableSection.svelte b/src/lib/components/CollapsableSection.svelte
new file mode 100644
index 0000000..6d9512f
--- /dev/null
+++ b/src/lib/components/CollapsableSection.svelte
@@ -0,0 +1,49 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import Heading from "./Heading.svelte";
+	import Button from "./inputs/Button.svelte";
+
+	type Layout = "normal" | "thin";
+	type Props = { children: Snippet; title: string };
+
+	const { children, title }: Props = $props();
+	let isCollapsed = $state(false);
+	function toggleCollapsed() {
+		isCollapsed = !isCollapsed;
+	}
+</script>
+
+<div class="collapsable-section">
+	<button onclick={toggleCollapsed}>{title}</button>
+	{#if isCollapsed}
+		<div class="content">
+			{@render children()}
+		</div>
+	{/if}
+</div>
+
+<style lang="scss">
+	@use "$lib/styles/color";
+	button {
+		color: color.$green-2;
+		background-color: color.$gray-2;
+		border: 0;
+		font-family: "Fira Sans";
+		font-size: 1em;
+		display: block;
+		width: 100%;
+		text-align: left;
+		border-radius: 0.5rem;
+		padding: 0.5rem 1rem;
+		cursor: pointer;
+		&:hover {
+			background-color: color.$gray-3;
+		}
+	}
+	div.content {
+		padding-left: 0.5rem;
+	}
+	div.collapsable-section {
+		margin: 1rem 0;
+	}
+</style>

From ef247d14abd0e55f863cbc561c4ce0c2668ac301 Mon Sep 17 00:00:00 2001
From: Viktor Holta <viktor.holta@outlook.com>
Date: Sun, 12 Oct 2025 18:35:20 +0200
Subject: [PATCH 2/5] Init page for hacking resources

Co-authored-by: Tove Haernfelt <tove.haernfelt@gmail.com>
Co-authored-by: ItLiuDavid <davri606@student.liu.se>
---
 src/routes/+layout.svelte         |  1 +
 src/routes/resources/+page.svelte | 81 +++++++++++++++++++++++++++++++
 2 files changed, 82 insertions(+)
 create mode 100644 src/routes/resources/+page.svelte

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 91dce73..d79edc1 100644
--- a/src/routes/+layout.svelte
+++ b/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>
diff --git a/src/routes/resources/+page.svelte b/src/routes/resources/+page.svelte
new file mode 100644
index 0000000..03d471d
--- /dev/null
+++ b/src/routes/resources/+page.svelte
@@ -0,0 +1,81 @@
+<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" />
+		<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>

From d3a97c06043e18ed6cd40a152dc548812ced6246 Mon Sep 17 00:00:00 2001
From: Viktor Holta <viktor.holta@outlook.com>
Date: Sat, 1 Nov 2025 14:23:45 +0100
Subject: [PATCH 3/5] Add transitions & icons to collapsable sections

Co-authored-by: Tove Haernfelt <tove.haernfelt@gmail.com>
---
 src/lib/components/CollapsableSection.svelte | 28 +++++++++++++++-----
 src/lib/styles/default.scss                  |  3 +++
 2 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/src/lib/components/CollapsableSection.svelte b/src/lib/components/CollapsableSection.svelte
index 6d9512f..c22c048 100644
--- a/src/lib/components/CollapsableSection.svelte
+++ b/src/lib/components/CollapsableSection.svelte
@@ -7,19 +7,20 @@
 	type Props = { children: Snippet; title: string };
 
 	const { children, title }: Props = $props();
-	let isCollapsed = $state(false);
+	let isCollapsed = $state(true);
 	function toggleCollapsed() {
 		isCollapsed = !isCollapsed;
 	}
 </script>
 
 <div class="collapsable-section">
-	<button onclick={toggleCollapsed}>{title}</button>
-	{#if isCollapsed}
-		<div class="content">
-			{@render children()}
-		</div>
-	{/if}
+	<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">
@@ -39,9 +40,22 @@
 		&:hover {
 			background-color: color.$gray-3;
 		}
+		i.expanded {
+			transform: rotate(90deg);
+		}
+		i {
+			transition: transform ease 100ms;
+		}
+		transition: background-color ease 100ms;
 	}
 	div.content {
 		padding-left: 0.5rem;
+		height: 0;
+		&.expanded {
+			height: auto;
+		}
+		transition: height ease 100ms;
+		overflow: hidden;
 	}
 	div.collapsable-section {
 		margin: 1rem 0;
diff --git a/src/lib/styles/default.scss b/src/lib/styles/default.scss
index 908cb2b..b5f3fce 100644
--- a/src/lib/styles/default.scss
+++ b/src/lib/styles/default.scss
@@ -2,6 +2,9 @@
 
 @use "color";
 @use "mixin";
+html {
+	interpolate-size: allow-keywords;
+}
 
 body {
 	margin: 0;

From 8ec495ec6f60e204421a42a3826f223471929db5 Mon Sep 17 00:00:00 2001
From: Viktor Holta <viktor.holta@outlook.com>
Date: Wed, 19 Nov 2025 15:12:19 +0100
Subject: [PATCH 4/5] Fix linting & formatting in CollapsableSection

---
 src/lib/components/CollapsableSection.svelte | 34 +++++++++++---------
 1 file changed, 19 insertions(+), 15 deletions(-)

diff --git a/src/lib/components/CollapsableSection.svelte b/src/lib/components/CollapsableSection.svelte
index c22c048..66146c3 100644
--- a/src/lib/components/CollapsableSection.svelte
+++ b/src/lib/components/CollapsableSection.svelte
@@ -1,9 +1,6 @@
 <script lang="ts">
 	import type { Snippet } from "svelte";
-	import Heading from "./Heading.svelte";
-	import Button from "./inputs/Button.svelte";
 
-	type Layout = "normal" | "thin";
 	type Props = { children: Snippet; title: string };
 
 	const { children, title }: Props = $props();
@@ -25,38 +22,45 @@
 
 <style lang="scss">
 	@use "$lib/styles/color";
+
 	button {
-		color: color.$green-2;
-		background-color: color.$gray-2;
+		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;
-		display: block;
-		width: 100%;
 		text-align: left;
-		border-radius: 0.5rem;
-		padding: 0.5rem 1rem;
 		cursor: pointer;
+		transition: background-color ease 100ms;
+
 		&:hover {
 			background-color: color.$gray-3;
 		}
-		i.expanded {
-			transform: rotate(90deg);
-		}
+
 		i {
 			transition: transform ease 100ms;
+
+			&.expanded {
+				transform: rotate(90deg);
+			}
 		}
-		transition: background-color ease 100ms;
 	}
+
 	div.content {
 		padding-left: 0.5rem;
 		height: 0;
+		overflow: hidden;
+		transition: height ease 100ms;
+
 		&.expanded {
 			height: auto;
 		}
-		transition: height ease 100ms;
-		overflow: hidden;
 	}
+
 	div.collapsable-section {
 		margin: 1rem 0;
 	}

From 8ded7e01027b1c42194e364c43eb9f0a233ecdfc Mon Sep 17 00:00:00 2001
From: Viktor Holta <viktor.holta@outlook.com>
Date: Tue, 25 Nov 2025 09:38:04 +0100
Subject: [PATCH 5/5] Add link to TDDE61 on resource page

---
 src/routes/resources/+page.svelte | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/routes/resources/+page.svelte b/src/routes/resources/+page.svelte
index 03d471d..0317705 100644
--- a/src/routes/resources/+page.svelte
+++ b/src/routes/resources/+page.svelte
@@ -15,6 +15,13 @@
 <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