Create About page

21 files changed, 233 insertions, 100 deletions

diff --git a/about.html b/about.html
index 491302e..736b70b 100644
--- a/about.html
+++ b/about.html
@@ -19,7 +19,20 @@
 			<a href="https://j-james.me/bookshelf">bookshelf</a>
 		</nav>
 	</header>
-	<br>
-	<span>Under Construction</span>
+	<main>
+		<h1>About</h1>
+		<p> Hello again. I'm Justice, but you might know me as JJ or j-james. I prefer either of the latter. </p>
+		<p> I'm currently an outgoing senior at <a href="https://www.bisd303.org/bhs">Bainbridge High School</a>. In the near future, I'll be a freshman at the <a href="https://www.ubc.ca/">University of British Columbia</a> in Vancouver, Canada, studying <a href="https://you.ubc.ca/ubc_programs/mathematical-sciences-vancouver/">Mathematical Sciences</a>. </p>
+		<!-- <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> -->
+		<p> I'm passionate about decentralized and resilient systems, cryptographic security, general mathematics, and origami. In my spare time, I enjoy playing hockey (roller and ice), competing in ultimate frisbee, and on occasion, rock climbing. </p>
+		<!-- <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p> -->
+		<p> I'm also a hobbyist programmer, skilled at <a href="https://nim-lang.org/">Nim</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/HTML">HTML</a>/<a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a>, and <a href="https://www.java.com/en/">Java</a>, sufficiently proficient in <a href="https://www.python.org/">Python</a> and <a href="https://golang.org/">Go</a>, and learning <a href="https://en.wikipedia.org/wiki/C_(programming_language)">C</a>. Most of my projects are created in one or more of those languages. If you're interested, my higher-quality projects are available <a href="https://j-james.me/projects">here on my website</a>, with the rest having taken up residence in <a href="https://github.com/j-james">the depths of my GitHub profile</a> (a number are also on <a href="https://sr.ht/~j-james">SourceHut</a>). </p>
+		<p> If you're looking to contact me, feel free to reach out over email to <code>jj [at] this.website</code>. </p>
+		<h1>Credits</h1>
+		<p> This website is based off of the websites of <a href="https://czeng.org">Catherine Zeng</a>, <a href="https://hojberg.xyz">Simon Højberg</a>, and <a href="https://victoria.dev">Victoria Drake</a>. </p>
+	</main>
+	<footer>
+		<p> © 2020-2021 j-james </p>
+	</footer>
 </body>
 </html>
diff --git a/css/fonts.css b/css/fonts.css
new file mode 100644
index 0000000..297d61e
--- /dev/null
+++ b/css/fonts.css
@@ -0,0 +1,208 @@
+@font-face {
+	font-family: Alegreya;
+	src: url(../fonts/Alegreya/Alegreya-Regular.ttf);
+	font-style: normal;
+	font-weight: 400;
+}
+
+@font-face {
+	font-family: Alegreya;
+	src: url(../fonts/Alegreya/Alegreya-Italic.ttf);
+	font-style: italic;
+	font-weight: 400;
+}
+
+@font-face {
+	font-family: Alegreya;
+	src: url(../fonts/Alegreya/Alegreya-Medium.ttf);
+	font-weight: 500;
+}
+
+@font-face {
+	font-family: Alegreya;
+	src: url(../fonts/Alegreya/Alegreya-MediumItalic.ttf);
+	font-style: italic;
+	font-weight: 500;
+}
+
+@font-face {
+	font-family: Alegreya;
+	src: url(../fonts/Alegreya/Alegreya-SemiBold.ttf);
+	font-weight: 600;
+}
+
+@font-face {
+	font-family: Alegreya;
+	src: url(../fonts/Alegreya/Alegreya-SemiBoldItalic.ttf);
+	font-style: italic;
+	font-weight: 600;
+}
+
+@font-face {
+	font-family: Alegreya;
+	src: url(../fonts/Alegreya/Alegreya-Bold.ttf);
+	font-weight: 700;
+}
+
+@font-face {
+	font-family: Alegreya;
+	src: url(../fonts/Alegreya/Alegreya-BoldItalic.ttf);
+	font-style: italic;
+	font-weight: 700;
+}
+
+@font-face {
+	font-family: Alegreya;
+	src: url(../fonts/Alegreya/Alegreya-ExtraBold.ttf);
+	font-weight: 800;
+}
+
+@font-face {
+	font-family: Alegreya;
+	src: url(../fonts/Alegreya/Alegreya-ExtraBoldItalic.ttf);
+	font-style: italic;
+	font-weight: 800;
+}
+
+@font-face {
+	font-family: Alegreya;
+	src: url(../fonts/Alegreya/Alegreya-Black.ttf);
+	font-weight: 900;
+}
+
+@font-face {
+	font-family: Alegreya;
+	src: url(../fonts/Alegreya/Alegreya-BlackItalic.ttf);
+	font-style: italic;
+	font-weight: 900;
+}
+
+@font-face {
+	font-family: Calvin;
+	src: url(../fonts/Calvin/Calvin-Regular.ttf);
+	font-style: normal;
+}
+
+@font-face {
+	font-family: Calvin;
+	src: url(../fonts/Calvin/Calvin-Outline.ttf);
+	font-style: oblique;
+}
+
+@font-face {
+	font-family: ComicMono;
+	src: url(../fonts/ComicMono/ComicMono.ttf);
+	font-style: normal;
+	font-weight: 400;
+}
+
+@font-face {
+	font-family: ComicMono;
+	src: url(../fonts/ComicMono/ComicMono-Bold.ttf);
+	font-weight: 700;
+}
+
+@font-face {
+	font-family: JetBrainsMono;
+	src: url(../fonts/JetBrainsMono/JetBrainsMono-Thin.ttf);
+	font-weight: 100;
+}
+
+@font-face {
+	font-family: JetBrainsMono;
+	src: url(../fonts/JetBrainsMono/JetBrainsMono-ThinItalic.ttf);
+	font-style: italic;
+	font-weight: 100;
+}
+
+@font-face {
+	font-family: JetBrainsMono;
+	src: url(../fonts/JetBrainsMono/JetBrainsMono-ExtraLight.ttf);
+	font-weight: 200;
+}
+
+@font-face {
+	font-family: JetBrainsMono;
+	src: url(../fonts/JetBrainsMono/JetBrainsMono-ExtraLightItalic.ttf);
+	font-style: italic;
+	font-weight: 200;
+}
+
+@font-face {
+	font-family: JetBrainsMono;
+	src: url(../fonts/JetBrainsMono/JetBrainsMono-Light.ttf);
+	font-weight: 300;
+}
+
+@font-face {
+	font-family: JetBrainsMono;
+	src: url(../fonts/JetBrainsMono/JetBrainsMono-LightItalic.ttf);
+	font-style: italic;
+	font-weight: 300;
+}
+
+@font-face {
+	font-family: JetBrainsMono;
+	src: url(../fonts/JetBrainsMono/JetBrainsMono-Regular.ttf);
+	font-style: normal;
+	font-weight: 400;
+}
+
+@font-face {
+	font-family: JetBrainsMono;
+	src: url(../fonts/JetBrainsMono/JetBrainsMono-Italic.ttf);
+	font-style: italic;
+	font-weight: 400;
+}
+
+@font-face {
+	font-family: JetBrainsMono;
+	src: url(../fonts/JetBrainsMono/JetBrainsMono-Medium.ttf);
+	font-weight: 500;
+}
+
+@font-face {
+	font-family: JetBrainsMono;
+	src: url(../fonts/JetBrainsMono/JetBrainsMono-MediumItalic.ttf);
+	font-style: italic;
+	font-weight: 500;
+}
+
+@font-face {
+	font-family: JetBrainsMono;
+	src: url(../fonts/JetBrainsMono/JetBrainsMono-SemiBold.ttf);
+	font-weight: 600;
+}
+
+@font-face {
+	font-family: JetBrainsMono;
+	src: url(../fonts/JetBrainsMono/JetBrainsMono-SemiBoldItalic.ttf);
+	font-style: italic;
+	font-weight: 600;
+}
+
+@font-face {
+	font-family: JetBrainsMono;
+	src: url(../fonts/JetBrainsMono/JetBrainsMono-Bold.ttf);
+	font-weight: 700;
+}
+
+@font-face {
+	font-family: JetBrainsMono;
+	src: url(../fonts/JetBrainsMono/JetBrainsMono-BoldItalic.ttf);
+	font-style: italic;
+	font-weight: 700;
+}
+
+@font-face {
+	font-family: JetBrainsMono;
+	src: url(../fonts/JetBrainsMono/JetBrainsMono-ExtraBold.ttf);
+	font-weight: 800;
+}
+
+@font-face {
+	font-family: JetBrainsMono;
+	src: url(../fonts/JetBrainsMono/JetBrainsMono-ExtraBoldItalic.ttf);
+	font-style: italic;
+	font-weight: 800;
+}
diff --git a/css/style.css b/css/style.css
index 5b8aeff..adb2440 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,3 +1,5 @@
+@import url("fonts.css");
+
 body {
 	font-family: Alegreya, serif;
 	font-size: 20px;
@@ -10,7 +12,7 @@ body {
 }
 
 a {
-	color: inherit;
+	color: #1455FB;
 	text-decoration: none;
 }
 
@@ -18,8 +20,9 @@ a:hover {
 	text-decoration: underline;
 }
 
-a:visited {
-	color: inherit;
+code {
+	font-family: JetBrainsMono, monospace;
+	font-size: 18px;
 }
 
 h1 {
@@ -34,6 +37,10 @@ header {
 	text-align: center;
 }
 
+header a {
+	color: inherit;
+}
+
 header h1 {
 	font-size: inherit;
 	margin: 0;
@@ -77,10 +84,6 @@ nav a:hover {
 	/*https://getcssscan.com/css-box-shadow-examples*/
 }
 
-#profile a {
-	color: #1455FB;
-}
-
 #profile p {
 	margin-top: 0;
 }
@@ -109,97 +112,6 @@ footer {
 	}
 }
 
-@font-face {
-	font-family: Alegreya;
-	src: url(../fonts/Alegreya/Alegreya-Regular.ttf);
-	font-style: normal;
-	font-weight: 400;
-}
-
-@font-face {
-	font-family: Alegreya;
-	src: url(../fonts/Alegreya/Alegreya-Italic.ttf);
-	font-style: italic;
-	font-weight: 400;
-}
-
-@font-face {
-	font-family: Alegreya;
-	src: url(../fonts/Alegreya/Alegreya-Medium.ttf);
-	font-weight: 500;
-}
-
-@font-face {
-	font-family: Alegreya;
-	src: url(../fonts/Alegreya/Alegreya-MediumItalic.ttf);
-	font-style: italic;
-	font-weight: 500;
-}
-
-@font-face {
-	font-family: Alegreya;
-	src: url(../fonts/Alegreya/Alegreya-SemiBold.ttf);
-	font-weight: 600;
-}
-
-@font-face {
-	font-family: Alegreya;
-	src: url(../fonts/Alegreya/Alegreya-SemiBoldItalic.ttf);
-	font-style: italic;
-	font-weight: 600;
-}
-
-@font-face {
-	font-family: Alegreya;
-	src: url(../fonts/Alegreya/Alegreya-Bold.ttf);
-	font-weight: 700;
-}
-
-@font-face {
-	font-family: Alegreya;
-	src: url(../fonts/Alegreya/Alegreya-BoldItalic.ttf);
-	font-style: italic;
-	font-weight: 700;
-}
-
-@font-face {
-	font-family: Alegreya;
-	src: url(../fonts/Alegreya/Alegreya-ExtraBold.ttf);
-	font-weight: 800;
-}
-
-@font-face {
-	font-family: Alegreya;
-	src: url(../fonts/Alegreya/Alegreya-ExtraBoldItalic.ttf);
-	font-style: italic;
-	font-weight: 800;
-}
-
-@font-face {
-	font-family: Alegreya;
-	src: url(../fonts/Alegreya/Alegreya-Black.ttf);
-	font-weight: 900;
-}
-
-@font-face {
-	font-family: Alegreya;
-	src: url(../fonts/Alegreya/Alegreya-BlackItalic.ttf);
-	font-style: italic;
-	font-weight: 900;
-}
-
-@font-face {
-	font-family: Calvin;
-	src: url(../fonts/Calvin/Calvin-Regular.ttf);
-	font-style: normal;
-}
-
-@font-face {
-	font-family: Calvin;
-	src: url(../fonts/Calvin/Calvin-Outline.ttf);
-	font-style: oblique;
-}
-
 @keyframes shake {
 	0%, 100% {transform:translate(0, 0) rotate(0)}
 	2%  {transform:translate(1.5px, 0.5px) rotate(-0.5deg)}
diff --git a/fonts/ComicMono/ComicMono-Bold.ttf b/fonts/ComicMono/ComicMono-Bold.ttf
new file mode 100644
index 0000000..e03f41e
--- /dev/null
+++ b/fonts/ComicMono/ComicMono-Bold.ttf
diff --git a/fonts/ComicMono/ComicMono.ttf b/fonts/ComicMono/ComicMono.ttf
new file mode 100644
index 0000000..9bc7354
--- /dev/null
+++ b/fonts/ComicMono/ComicMono.ttf
diff --git a/fonts/JetBrainsMono/JetBrainsMono-Bold.ttf b/fonts/JetBrainsMono/JetBrainsMono-Bold.ttf
new file mode 100644
index 0000000..710c34b
--- /dev/null
+++ b/fonts/JetBrainsMono/JetBrainsMono-Bold.ttf
diff --git a/fonts/JetBrainsMono/JetBrainsMono-BoldItalic.ttf b/fonts/JetBrainsMono/JetBrainsMono-BoldItalic.ttf
new file mode 100644
index 0000000..fdff00f
--- /dev/null
+++ b/fonts/JetBrainsMono/JetBrainsMono-BoldItalic.ttf
diff --git a/fonts/JetBrainsMono/JetBrainsMono-ExtraBold.ttf b/fonts/JetBrainsMono/JetBrainsMono-ExtraBold.ttf
new file mode 100644
index 0000000..eb94300
--- /dev/null
+++ b/fonts/JetBrainsMono/JetBrainsMono-ExtraBold.ttf
diff --git a/fonts/JetBrainsMono/JetBrainsMono-ExtraBoldItalic.ttf b/fonts/JetBrainsMono/JetBrainsMono-ExtraBoldItalic.ttf
new file mode 100644
index 0000000..b70b4e7
--- /dev/null
+++ b/fonts/JetBrainsMono/JetBrainsMono-ExtraBoldItalic.ttf
diff --git a/fonts/JetBrainsMono/JetBrainsMono-ExtraLight.ttf b/fonts/JetBrainsMono/JetBrainsMono-ExtraLight.ttf
new file mode 100644
index 0000000..74efced
--- /dev/null
+++ b/fonts/JetBrainsMono/JetBrainsMono-ExtraLight.ttf
diff --git a/fonts/JetBrainsMono/JetBrainsMono-ExtraLightItalic.ttf b/fonts/JetBrainsMono/JetBrainsMono-ExtraLightItalic.ttf
new file mode 100644
index 0000000..1a9d2d3
--- /dev/null
+++ b/fonts/JetBrainsMono/JetBrainsMono-ExtraLightItalic.ttf
diff --git a/fonts/JetBrainsMono/JetBrainsMono-Italic.ttf b/fonts/JetBrainsMono/JetBrainsMono-Italic.ttf
new file mode 100644
index 0000000..ffd5d77
--- /dev/null
+++ b/fonts/JetBrainsMono/JetBrainsMono-Italic.ttf
diff --git a/fonts/JetBrainsMono/JetBrainsMono-Light.ttf b/fonts/JetBrainsMono/JetBrainsMono-Light.ttf
new file mode 100644
index 0000000..c0682f9
--- /dev/null
+++ b/fonts/JetBrainsMono/JetBrainsMono-Light.ttf
diff --git a/fonts/JetBrainsMono/JetBrainsMono-LightItalic.ttf b/fonts/JetBrainsMono/JetBrainsMono-LightItalic.ttf
new file mode 100644
index 0000000..f20bac9
--- /dev/null
+++ b/fonts/JetBrainsMono/JetBrainsMono-LightItalic.ttf
diff --git a/fonts/JetBrainsMono/JetBrainsMono-Medium.ttf b/fonts/JetBrainsMono/JetBrainsMono-Medium.ttf
new file mode 100644
index 0000000..17ff945
--- /dev/null
+++ b/fonts/JetBrainsMono/JetBrainsMono-Medium.ttf
diff --git a/fonts/JetBrainsMono/JetBrainsMono-MediumItalic.ttf b/fonts/JetBrainsMono/JetBrainsMono-MediumItalic.ttf
new file mode 100644
index 0000000..9b699bb
--- /dev/null
+++ b/fonts/JetBrainsMono/JetBrainsMono-MediumItalic.ttf
diff --git a/fonts/JetBrainsMono/JetBrainsMono-Regular.ttf b/fonts/JetBrainsMono/JetBrainsMono-Regular.ttf
new file mode 100644
index 0000000..9a5202e
--- /dev/null
+++ b/fonts/JetBrainsMono/JetBrainsMono-Regular.ttf
diff --git a/fonts/JetBrainsMono/JetBrainsMono-SemiBold.ttf b/fonts/JetBrainsMono/JetBrainsMono-SemiBold.ttf
new file mode 100644
index 0000000..84b7795
--- /dev/null
+++ b/fonts/JetBrainsMono/JetBrainsMono-SemiBold.ttf
diff --git a/fonts/JetBrainsMono/JetBrainsMono-SemiBoldItalic.ttf b/fonts/JetBrainsMono/JetBrainsMono-SemiBoldItalic.ttf
new file mode 100644
index 0000000..ffa1f39
--- /dev/null
+++ b/fonts/JetBrainsMono/JetBrainsMono-SemiBoldItalic.ttf
diff --git a/fonts/JetBrainsMono/JetBrainsMono-Thin.ttf b/fonts/JetBrainsMono/JetBrainsMono-Thin.ttf
new file mode 100644
index 0000000..1317bfe
--- /dev/null
+++ b/fonts/JetBrainsMono/JetBrainsMono-Thin.ttf
diff --git a/fonts/JetBrainsMono/JetBrainsMono-ThinItalic.ttf b/fonts/JetBrainsMono/JetBrainsMono-ThinItalic.ttf
new file mode 100644
index 0000000..bc72439
--- /dev/null
+++ b/fonts/JetBrainsMono/JetBrainsMono-ThinItalic.ttf