Added Profile and fixed style

4 files changed, 84 insertions, 70 deletions

diff --git a/data/metadata.js b/data/metadata.js
index aa6a595..d75013c 100644
--- a/data/metadata.js
+++ b/data/metadata.js
@@ -7,7 +7,7 @@ export default {
 	author: {
 		name: "Marc Pervaz Boocha",
 		email: "mboocha@sudomsg.com",
-		image: "/public/favicon.svg",
+		image: "/public/profile.jpg",
 		url: "/about/#marc-pervaz-boocha"
 	}
 }
diff --git a/includes/main.css b/includes/main.css
index 0f94c46..5f33cfb 100644
--- a/includes/main.css
+++ b/includes/main.css
@@ -1,20 +1,21 @@
 html {
-    accent-color: darkred;
-    text-align: justify;
+	accent-color: darkred;
+	text-align: justify;
 }
 
 * :any-link {
-    color: inherit;
-    text-decoration: underline;
+	color: inherit;
+	text-decoration: underline;
 }
 
 aside {
-    max-width: max(40%, 12rem);
-    background: darkred;
-    color: white;
-    float: right;
-    margin: 1rem;
-    padding: 0.5rem;
+	max-width: max(40%, 12rem);
+	background: darkred;
+	color: white;
+	float: right;
+	margin: 0.5rem;
+	margin-left: 1rem;
+	padding: 0.5rem;
 }
 
 img,
@@ -25,88 +26,101 @@ audio,
 iframe,
 embed,
 object {
-    max-width: 100%;
-    width: fit-content;
-    padding: 1rem;
-    margin: auto;
+	max-width: 100%;
+	width: fit-content;
+	display: block;
 }
 
 img,
 svg,
 video,
 canvas {
-    height: auto;
+	height: auto;
 }
 
 picture {
-    display: contents;
+	display: contents;
+
 }
 
 @media screen {
 
-    * :any-link:hover,
-    * :any-link:active {
-        font-style: italic;
-    }
+	* :any-link:hover,
+	* :any-link:active {
+		font-style: italic;
+	}
+
+	body {
+		max-width: min(100dvw, 58rem);
+		min-height: 100dvh;
+		padding: 0.5rem;
+		margin-left: auto;
+		margin-right: auto;
+		grid-template-columns: 1fr;
+		grid-template-rows: auto 1fr auto;
+		grid-template-areas:
+			'header'
+			'main'
+			'footer';
+		display: grid;
+	}
+
+	header,
+	footer {
+		padding: 1rem;
+		font-weight: bolder;
+		background-color: darkred;
 
-    body {
-        max-width: min(100dvw, 58rem);
-        min-height: 100dvh;
-        padding: 0.5rem;
-        margin-left: auto;
-        margin-right: auto;
-        grid-template-columns: 1fr;
-        grid-template-rows: auto 1fr auto;
-        grid-template-areas:
-            'header'
-            'main'
-            'footer';
-        display: grid;
-    }
+		*:any-link {
+			text-decoration: none;
+		}
+	}
 
-    :is(header, footer) {
-        padding: 1rem;
-        font-weight: bolder;
-        background-color: darkred;
-    }
+	header {
+		grid-area: header;
+	}
 
-    :is(header, footer) *:any-link {
-        text-decoration: none;
-    }
+	main {
+		grid-area: main;
+	}
 
-    header {
-        grid-area: header;
-    }
+	footer {
+		align-self: end;
+		grid-area: footer;
+	}
+
+	nav>a {
+		margin-right: 0.5rem;
+	}
+}
 
-    main {
-        grid-area: main;
-    }
+@media (forced-colors: active) {
 
-    footer {
-        align-self: end;
-        grid-area: footer;
-    }
+	header,
+	footer {
+		border: 2px solid;
+	}
 
-    nav>a {
-        margin-right: 0.5rem;
-    }
+	aside {
+		border: 2px solid;
+	}
 }
 
 @media print {
 
-    header,
-    footer {
-        display: none;
-    }
+	header,
+	footer {
+		display: none;
+	}
 
-    section,
-    table {
-        orphans: 4;
-        break-inside: auto;
-    }
+	section,
+	table {
+		orphans: 4;
+		break-inside: auto;
+	}
 
-    tr {
-        break-inside: avoid;
-        break-before: auto;
-    }
+	tr {
+		break-inside: avoid;
+		break-before: auto;
+	}
 }
diff --git a/src/about.html b/src/about.html
index 264d8a6..a940600 100644
--- a/src/about.html
+++ b/src/about.html
@@ -11,8 +11,8 @@
 
 <div itemscope :itemtype="schema('ProfilePage')">
 	<section itemprop="mainEntity" itemscope :itemtype="schema('Person')">
-		<h2 itemprop="name" :id="slugify(metadata.author.name)" @content="metadata.author.name">Marc</h2>
 		<aside><img itemprop="image" alt="A Photo of me" :src="metadata.author.image"></aside>
+		<h2 itemprop="name" @text="metadata.author.name"></h2>
 		<div itemprop="description">
 			Likes to create programs. Loves to be updated on the latest news and in General
 			Knowledge.
diff --git a/src/public/profile.jpg b/src/public/profile.jpg
new file mode 100644
index 0000000..b180c73
--- /dev/null
+++ b/src/public/profile.jpg