From 1df319f20528a419b4dc1dab4055cc5716d1a77b Mon Sep 17 00:00:00 2001
From: The Magician <themagician@engineer.com>
Date: Sat, 2 Dec 2023 20:36:49 +0000
Subject: [PATCH] Add detail to the main page

---
 index.html       | 25 +++++++++++++++++++++++--
 styles/index.css | 12 ++++++++++++
 2 files changed, 35 insertions(+), 2 deletions(-)
 create mode 100644 styles/index.css

diff --git a/index.html b/index.html
index 8b58bb0..7c34f75 100644
--- a/index.html
+++ b/index.html
@@ -7,6 +7,7 @@
 		<meta http-equiv="X-UA-Compatible" content="ie-edge">
 		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, width=device-width, user-scalable=no" />
 
+		<link rel="stylesheet" href="./styles/index.css">
 		<link rel="stylesheet" href="./styles/common.css">
 		<link rel="stylesheet" href="./styles/starfield.css">
 		<link rel="stylesheet" href="./node_modules/@themagician23/tarotcard.css/tarotcard.css">
@@ -35,8 +36,28 @@
 						</div>
 					</div>
 					<div class="tarot-card__side tarot-card__side--back">
-						<div class="tarot-card__section">
-							<p>This is the back side of The Magician.</p>
+						<div class="tarot-card__section the-magician__info">
+							<div>
+								<h1>The Magician</h1>
+								<h3>Freelance Computer Scientist</h3>
+							</div>
+
+							<div>
+								<h2>Meanings (Upright)</h2>
+								<p>Software developer, open-source contributor, technologist</p>
+							</div>
+
+							<div>
+								<h2>Meanings (Inverted)</h2>
+								<p>Penetration tester, bug hunter, exploit developer</p>
+							</div>
+
+							<div>
+								<h2>Links</h2>
+								<p><a href="https://git.themagician.cc">Personal Projects (Gitea)</a></p>
+								<p><a href="https://github.com/TheMagician23">Open-Source Contributions (Github)</a></p>
+								<p><a href="https://www.youtube.com/channel/UCkG21Ug-DAj4i1C_TpWIlbQ">Tutorials (Youtube)</a></p>
+							</div>
 						</div>
 					</div>
 				</div>
diff --git a/styles/index.css b/styles/index.css
new file mode 100644
index 0000000..9695dcf
--- /dev/null
+++ b/styles/index.css
@@ -0,0 +1,12 @@
+.the-magician__info {
+    height: 100%;
+
+    background: white;
+
+    text-align: center;
+    font-family: monospace;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+}