From 4163d22ad40e32ac19ac4aa30492a84e40edd622 Mon Sep 17 00:00:00 2001
From: Marc Pervaz Boocha <mboocha@sudomsg.xyz>
Date: Fri, 2 Aug 2024 23:16:18 +0530
Subject: Added Profile and fixed style

---
 data/metadata.js       |   2 +-
 includes/main.css      | 168 ++++++++++++++++++++++++++-----------------------
 src/about.html         |   2 +-
 src/public/profile.jpg | Bin 0 -> 7401478 bytes
 4 files changed, 93 insertions(+), 79 deletions(-)
 create mode 100644 src/public/profile.jpg

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;
-    }
-
-    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;
-    }
-
-    :is(header, footer) {
-        padding: 1rem;
-        font-weight: bolder;
-        background-color: darkred;
-    }
-
-    :is(header, footer) *:any-link {
-        text-decoration: none;
-    }
-
-    header {
-        grid-area: header;
-    }
-
-    main {
-        grid-area: main;
-    }
-
-    footer {
-        align-self: end;
-        grid-area: footer;
-    }
-
-    nav>a {
-        margin-right: 0.5rem;
-    }
+	* :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;
+
+		*:any-link {
+			text-decoration: none;
+		}
+	}
+
+	header {
+		grid-area: header;
+	}
+
+	main {
+		grid-area: main;
+	}
+
+	footer {
+		align-self: end;
+		grid-area: footer;
+	}
+
+	nav>a {
+		margin-right: 0.5rem;
+	}
+}
+
+@media (forced-colors: active) {
+
+	header,
+	footer {
+		border: 2px solid;
+	}
+
+	aside {
+		border: 2px solid;
+	}
 }
 
 @media print {
 
-    header,
-    footer {
-        display: none;
-    }
-
-    section,
-    table {
-        orphans: 4;
-        break-inside: auto;
-    }
-
-    tr {
-        break-inside: avoid;
-        break-before: auto;
-    }
+	header,
+	footer {
+		display: none;
+	}
+
+	section,
+	table {
+		orphans: 4;
+		break-inside: 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
Binary files /dev/null and b/src/public/profile.jpg differ
-- 
cgit v1.2.3-70-g09d2