Add detail to the main page

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>

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