Created assets folder, Moved projects to seperate json file

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."
-}
+}

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

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>

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}
 	</>

src/components/Project.tsx

@@ -1,17 +1,8 @@
 import { FC } from 'react';
 
-interface Button {
+import ProjectType from '@models/project';
-	link: string;
-	text: string;
-}
 
-const Project: FC<{
+const Project: FC<ProjectType> = ({ name, description, buttons, cover, right }) => {
-	name: string;
-	description: string;
-	buttons: Button[];
-	cover?: string;
-	right?: boolean;
-}> = ({ 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>

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
+			{projects.map((project) => (
-				name="Tempo"
+				<Project key={project.name} {...project} />
-				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"
-			/>
 		</div>
 	</div>
 );

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"
+    }
+]

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;
+}

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"],