diff --git a/public/img/argo.png b/public/assets/images/argo.png
similarity index 100%
rename from public/img/argo.png
rename to public/assets/images/argo.png
diff --git a/public/img/autologin.png b/public/assets/images/autologin.png
similarity index 100%
rename from public/img/autologin.png
rename to public/assets/images/autologin.png
diff --git a/public/img/profile-192.png b/public/assets/images/profile-192.png
similarity index 100%
rename from public/img/profile-192.png
rename to public/assets/images/profile-192.png
diff --git a/public/img/profile.svg b/public/assets/images/profile.svg
similarity index 100%
rename from public/img/profile.svg
rename to public/assets/images/profile.svg
diff --git a/public/img/tempo.png b/public/assets/images/tempo.png
similarity index 100%
rename from public/img/tempo.png
rename to public/assets/images/tempo.png
diff --git a/public/manifest.json b/public/manifest.json
index 2d2551c..e194c4f 100644
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -3,7 +3,7 @@
 	"name": "Guus van Meerveld's portfolio",
 	"icons": [
 		{
-			"src": "/img/profile-192.png",
+			"src": "/assets/images/profile-192.png",
 			"type": "image/png",
 			"sizes": "192x192"
 		}
@@ -13,4 +13,4 @@
 	"scope": "/",
 	"theme_color": "#9b4dca",
 	"description": "A simple portfolio website to display my projects."
-}
+}
\ No newline at end of file
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 2352d39..349dc3b 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -4,7 +4,13 @@ const Footer = () => {
 	return (
 		<footer className="footer">
 			<div className="container">
-				<img src="/img/profile.svg" width="100%" height="100%" alt="" className="profile" />
+				<img
+					src="/assets/images/profile.svg"
+					width="100%"
+					height="100%"
+					alt=""
+					className="profile"
+				/>
 				<div className="branding">
 					Guus van Meerveld <br />
 					&#169; 2021
diff --git a/src/components/Landing.tsx b/src/components/Landing.tsx
index acf2858..cccea87 100644
--- a/src/components/Landing.tsx
+++ b/src/components/Landing.tsx
@@ -2,7 +2,7 @@ const Landing = () => (
 	<div className="landing">
 		<div className="container">
 			<span className="profile">
-				<img src="/img/profile.svg" width="100%" height="100%" alt="" />
+				<img src="/assets/images/profile.svg" width="100%" height="100%" alt="" />
 			</span>
 
 			<span className="title">Guus van Meerveld</span>
diff --git a/src/components/Page.tsx b/src/components/Page.tsx
index 2cb04db..bc3a8d9 100644
--- a/src/components/Page.tsx
+++ b/src/components/Page.tsx
@@ -18,7 +18,7 @@ const Page = ({
 			<meta name="description" content={description} />
 			<meta name="keywords" content="guus van meerveld argo magister tempo discord" />
 			<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
-			<link rel="apple-touch-icon" sizes="192x192" href="/img/profile-192.png" />
+			<link rel="apple-touch-icon" sizes="192x192" href="/assets/images/profile-192.png" />
 		</Head>
 		{children}
 	</>
diff --git a/src/components/Project.tsx b/src/components/Project.tsx
index 781f790..97ca611 100644
--- a/src/components/Project.tsx
+++ b/src/components/Project.tsx
@@ -1,17 +1,8 @@
 import { FC } from 'react';
 
-interface Button {
-	link: string;
-	text: string;
-}
+import ProjectType from '@models/project';
 
-const Project: FC<{
-	name: string;
-	description: string;
-	buttons: Button[];
-	cover?: string;
-	right?: boolean;
-}> = ({ name, description, buttons, cover, right }) => {
+const Project: FC<ProjectType> = ({ name, description, buttons, cover, right }) => {
 	return (
 		<div className="project">
 			<div className="content">
@@ -28,7 +19,7 @@ const Project: FC<{
 				</div>
 				{cover ? (
 					<div className="cover">
-						<img src={cover} width="100%" height="100%" alt="" />
+						<img src={`/assets/images/${cover}`} width="100%" height="100%" alt="" />
 					</div>
 				) : null}
 			</div>
diff --git a/src/components/Projects.tsx b/src/components/Projects.tsx
index 941b298..282cb4e 100644
--- a/src/components/Projects.tsx
+++ b/src/components/Projects.tsx
@@ -1,6 +1,7 @@
 import { NextPage } from 'next';
 
 import Project from '@components/Project';
+import projects from '@config/projects.json';
 
 const Projects: NextPage = () => (
 	<div className="projects">
@@ -8,65 +9,10 @@ const Projects: NextPage = () => (
 			<div className="header" id="projects">
 				Projects
 			</div>
-			<Project
-				name="Argo"
-				description="Argo is a new app for Magister 6, made with Dart and Flutter. It will soon be
-					available on the Google Play store and (maybe) even the App store! For more information,
-					click either of the buttons below."
-				buttons={[
-					{ link: 'https://argo-magister.net', text: 'Website' },
-					{ link: 'https://github.com/argo-client/app', text: 'Github' },
-				]}
-				cover="/img/argo.png"
-			/>
 
-			<Project
-				name="Tempo"
-				description="Tempo is a 'simple' Discord bot which can be used to play YouTube, SoundCloud and even
-						Spotify songs. It's made in pure TypeScript and has plentiful settings."
-				right
-				buttons={[
-					{ link: 'https://tempo.g-vm.nl', text: 'Website' },
-					{ link: 'https://tempo.g-vm.nl/invite', text: 'Invite' },
-				]}
-				cover="/img/tempo.png"
-			/>
-
-			<Project
-				name="Keyzo"
-				description="Keyzo is an electron-based program written in JavaScript and CSS but I am
-						planning on moving to
-						TypeScript. It's main use is to bring every keybind you will every need into a
-						single program, with a simple and neat interface."
-				buttons={[
-					{
-						link: 'https://keyzo.net',
-						text: 'Website',
-					},
-					{
-						link: 'https://github.com/Guusvanmeerveld/Keyzo',
-						text: 'Github',
-					},
-				]}
-			/>
-
-			<Project
-				name="Magister Auto-Login"
-				description="Magister Auto-Login is a chrome extension that automatically logs into Magister 6 for
-						you."
-				right
-				buttons={[
-					{
-						link: 'https://chrome.google.com/webstore/detail/magister-auto-login/cekhhgcjpkahghpgeafhmkkjhidodplk?hl=nl',
-						text: 'Add to Chrome',
-					},
-					{
-						link: 'https://github.com/Guusvanmeerveld/Magister-Auto-Login',
-						text: 'Github',
-					},
-				]}
-				cover="/img/autologin.png"
-			/>
+			{projects.map((project) => (
+				<Project key={project.name} {...project} />
+			))}
 		</div>
 	</div>
 );
diff --git a/src/config/projects.json b/src/config/projects.json
new file mode 100644
index 0000000..e6f0fe5
--- /dev/null
+++ b/src/config/projects.json
@@ -0,0 +1,63 @@
+[
+    {
+        "name": "Argo",
+        "description": "Argo is a new app for Magister 6, made with Dart and Flutter. It will soon beavailable on the Google Play store and (maybe) even the App store! For more information, click either of the buttons below.",
+        "cover": "argo.png",
+        "buttons": [
+            {
+                "link": "https://argo-magister.net",
+                "text": "Website"
+            },
+            {
+                "link": "https://github.com/argo-client/app",
+                "text": "Github"
+            }
+        ]
+    },
+    {
+        "name": "Tempo",
+        "description": "Tempo is a 'simple' Discord bot which can be used to play YouTube, SoundCloud and even Spotify songs. It's made in pure TypeScript and has plentiful settings.",
+        "cover": "tempo.png",
+        "right": true,
+        "buttons": [
+            {
+                "link": "https://tempo.g-vm.nl",
+                "text": "Website"
+            },
+            {
+                "link": "https://tempo.g-vm.nl/invite",
+                "text": "Invite"
+            }
+        ]
+    },
+    {
+        "name": "Keyzo",
+        "description": "Keyzo is an electron-based program written in JavaScript and CSS but I amplanning on moving to TypeScript. It's main use is to bring every keybind you will every need into a single program, with a simple and neat interface.",
+        "buttons": [
+            {
+                "link": "https://keyzo.net",
+                "text": "Website"
+            },
+            {
+                "link": "https://github.com/Guusvanmeerveld/Keyzo",
+                "text": "Github"
+            }
+        ]
+    },
+    {
+        "name": "Magister Auto-Login",
+        "description": "Magister Auto-Login is a chrome extension that automatically logs into Magister 6 for you.",
+        "right": true,
+        "buttons": [
+            {
+                "link": "https://chrome.google.com/webstore/detail/magister-auto-login/cekhhgcjpkahghpgeafhmkkjhidodplk?hl=nl",
+                "text": "Add to Chrome"
+            },
+            {
+                "link": "https://github.com/Guusvanmeerveld/Magister-Auto-Login",
+                "text": "Github"
+            }
+        ],
+        "cover": "autologin.png"
+    }
+]
\ No newline at end of file
diff --git a/src/models/project.ts b/src/models/project.ts
new file mode 100644
index 0000000..0ee385a
--- /dev/null
+++ b/src/models/project.ts
@@ -0,0 +1,12 @@
+export default interface Project {
+	name: string;
+	description: string;
+	cover?: string;
+	right?: boolean;
+	buttons: Button[];
+}
+
+interface Button {
+	link: string;
+	text: string;
+}
diff --git a/tsconfig.json b/tsconfig.json
index 0fa2eb5..83ab2a4 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -4,7 +4,9 @@
 		"paths": {
 			"@components/*": ["src/components/*"],
 			"@public/*": ["src/public/*"],
-			"@styles/*": ["src/styles/*"]
+			"@styles/*": ["src/styles/*"],
+			"@models/*": ["src/models/*"],
+			"@config/*": ["src/config/*"]
 		},
 		"target": "es5",
 		"lib": ["dom", "dom.iterable", "esnext"],