From 89c75b50b50f18cb20918d09bd91c6dfdb12e70a Mon Sep 17 00:00:00 2001
From: j-james
Date: Thu, 8 Apr 2021 21:52:24 -0700
Subject: Create About page

---
 about.html                                         |  17 +-
 css/fonts.css                                      | 208 +++++++++++++++++++++
 css/style.css                                      | 108 +----------
 fonts/ComicMono/ComicMono-Bold.ttf                 | Bin 0 -> 20516 bytes
 fonts/ComicMono/ComicMono.ttf                      | Bin 0 -> 18724 bytes
 fonts/JetBrainsMono/JetBrainsMono-Bold.ttf         | Bin 0 -> 114240 bytes
 fonts/JetBrainsMono/JetBrainsMono-BoldItalic.ttf   | Bin 0 -> 117108 bytes
 fonts/JetBrainsMono/JetBrainsMono-ExtraBold.ttf    | Bin 0 -> 114232 bytes
 .../JetBrainsMono-ExtraBoldItalic.ttf              | Bin 0 -> 117156 bytes
 fonts/JetBrainsMono/JetBrainsMono-ExtraLight.ttf   | Bin 0 -> 114508 bytes
 .../JetBrainsMono-ExtraLightItalic.ttf             | Bin 0 -> 117436 bytes
 fonts/JetBrainsMono/JetBrainsMono-Italic.ttf       | Bin 0 -> 117108 bytes
 fonts/JetBrainsMono/JetBrainsMono-Light.ttf        | Bin 0 -> 114444 bytes
 fonts/JetBrainsMono/JetBrainsMono-LightItalic.ttf  | Bin 0 -> 117312 bytes
 fonts/JetBrainsMono/JetBrainsMono-Medium.ttf       | Bin 0 -> 114348 bytes
 fonts/JetBrainsMono/JetBrainsMono-MediumItalic.ttf | Bin 0 -> 117236 bytes
 fonts/JetBrainsMono/JetBrainsMono-Regular.ttf      | Bin 0 -> 114320 bytes
 fonts/JetBrainsMono/JetBrainsMono-SemiBold.ttf     | Bin 0 -> 114304 bytes
 .../JetBrainsMono/JetBrainsMono-SemiBoldItalic.ttf | Bin 0 -> 117176 bytes
 fonts/JetBrainsMono/JetBrainsMono-Thin.ttf         | Bin 0 -> 114420 bytes
 fonts/JetBrainsMono/JetBrainsMono-ThinItalic.ttf   | Bin 0 -> 117340 bytes
 21 files changed, 233 insertions(+), 100 deletions(-)
 create mode 100644 css/fonts.css
 create mode 100644 fonts/ComicMono/ComicMono-Bold.ttf
 create mode 100644 fonts/ComicMono/ComicMono.ttf
 create mode 100644 fonts/JetBrainsMono/JetBrainsMono-Bold.ttf
 create mode 100644 fonts/JetBrainsMono/JetBrainsMono-BoldItalic.ttf
 create mode 100644 fonts/JetBrainsMono/JetBrainsMono-ExtraBold.ttf
 create mode 100644 fonts/JetBrainsMono/JetBrainsMono-ExtraBoldItalic.ttf
 create mode 100644 fonts/JetBrainsMono/JetBrainsMono-ExtraLight.ttf
 create mode 100644 fonts/JetBrainsMono/JetBrainsMono-ExtraLightItalic.ttf
 create mode 100644 fonts/JetBrainsMono/JetBrainsMono-Italic.ttf
 create mode 100644 fonts/JetBrainsMono/JetBrainsMono-Light.ttf
 create mode 100644 fonts/JetBrainsMono/JetBrainsMono-LightItalic.ttf
 create mode 100644 fonts/JetBrainsMono/JetBrainsMono-Medium.ttf
 create mode 100644 fonts/JetBrainsMono/JetBrainsMono-MediumItalic.ttf
 create mode 100644 fonts/JetBrainsMono/JetBrainsMono-Regular.ttf
 create mode 100644 fonts/JetBrainsMono/JetBrainsMono-SemiBold.ttf
 create mode 100644 fonts/JetBrainsMono/JetBrainsMono-SemiBoldItalic.ttf
 create mode 100644 fonts/JetBrainsMono/JetBrainsMono-Thin.ttf
 create mode 100644 fonts/JetBrainsMono/JetBrainsMono-ThinItalic.ttf

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
Binary files /dev/null and b/fonts/ComicMono/ComicMono-Bold.ttf differ
diff --git a/fonts/ComicMono/ComicMono.ttf b/fonts/ComicMono/ComicMono.ttf
new file mode 100644
index 0000000..9bc7354
Binary files /dev/null and b/fonts/ComicMono/ComicMono.ttf differ
diff --git a/fonts/JetBrainsMono/JetBrainsMono-Bold.ttf b/fonts/JetBrainsMono/JetBrainsMono-Bold.ttf
new file mode 100644
index 0000000..710c34b
Binary files /dev/null and b/fonts/JetBrainsMono/JetBrainsMono-Bold.ttf differ
diff --git a/fonts/JetBrainsMono/JetBrainsMono-BoldItalic.ttf b/fonts/JetBrainsMono/JetBrainsMono-BoldItalic.ttf
new file mode 100644
index 0000000..fdff00f
Binary files /dev/null and b/fonts/JetBrainsMono/JetBrainsMono-BoldItalic.ttf differ
diff --git a/fonts/JetBrainsMono/JetBrainsMono-ExtraBold.ttf b/fonts/JetBrainsMono/JetBrainsMono-ExtraBold.ttf
new file mode 100644
index 0000000..eb94300
Binary files /dev/null and b/fonts/JetBrainsMono/JetBrainsMono-ExtraBold.ttf differ
diff --git a/fonts/JetBrainsMono/JetBrainsMono-ExtraBoldItalic.ttf b/fonts/JetBrainsMono/JetBrainsMono-ExtraBoldItalic.ttf
new file mode 100644
index 0000000..b70b4e7
Binary files /dev/null and b/fonts/JetBrainsMono/JetBrainsMono-ExtraBoldItalic.ttf differ
diff --git a/fonts/JetBrainsMono/JetBrainsMono-ExtraLight.ttf b/fonts/JetBrainsMono/JetBrainsMono-ExtraLight.ttf
new file mode 100644
index 0000000..74efced
Binary files /dev/null and b/fonts/JetBrainsMono/JetBrainsMono-ExtraLight.ttf differ
diff --git a/fonts/JetBrainsMono/JetBrainsMono-ExtraLightItalic.ttf b/fonts/JetBrainsMono/JetBrainsMono-ExtraLightItalic.ttf
new file mode 100644
index 0000000..1a9d2d3
Binary files /dev/null and b/fonts/JetBrainsMono/JetBrainsMono-ExtraLightItalic.ttf differ
diff --git a/fonts/JetBrainsMono/JetBrainsMono-Italic.ttf b/fonts/JetBrainsMono/JetBrainsMono-Italic.ttf
new file mode 100644
index 0000000..ffd5d77
Binary files /dev/null and b/fonts/JetBrainsMono/JetBrainsMono-Italic.ttf differ
diff --git a/fonts/JetBrainsMono/JetBrainsMono-Light.ttf b/fonts/JetBrainsMono/JetBrainsMono-Light.ttf
new file mode 100644
index 0000000..c0682f9
Binary files /dev/null and b/fonts/JetBrainsMono/JetBrainsMono-Light.ttf differ
diff --git a/fonts/JetBrainsMono/JetBrainsMono-LightItalic.ttf b/fonts/JetBrainsMono/JetBrainsMono-LightItalic.ttf
new file mode 100644
index 0000000..f20bac9
Binary files /dev/null and b/fonts/JetBrainsMono/JetBrainsMono-LightItalic.ttf differ
diff --git a/fonts/JetBrainsMono/JetBrainsMono-Medium.ttf b/fonts/JetBrainsMono/JetBrainsMono-Medium.ttf
new file mode 100644
index 0000000..17ff945
Binary files /dev/null and b/fonts/JetBrainsMono/JetBrainsMono-Medium.ttf differ
diff --git a/fonts/JetBrainsMono/JetBrainsMono-MediumItalic.ttf b/fonts/JetBrainsMono/JetBrainsMono-MediumItalic.ttf
new file mode 100644
index 0000000..9b699bb
Binary files /dev/null and b/fonts/JetBrainsMono/JetBrainsMono-MediumItalic.ttf differ
diff --git a/fonts/JetBrainsMono/JetBrainsMono-Regular.ttf b/fonts/JetBrainsMono/JetBrainsMono-Regular.ttf
new file mode 100644
index 0000000..9a5202e
Binary files /dev/null and b/fonts/JetBrainsMono/JetBrainsMono-Regular.ttf differ
diff --git a/fonts/JetBrainsMono/JetBrainsMono-SemiBold.ttf b/fonts/JetBrainsMono/JetBrainsMono-SemiBold.ttf
new file mode 100644
index 0000000..84b7795
Binary files /dev/null and b/fonts/JetBrainsMono/JetBrainsMono-SemiBold.ttf differ
diff --git a/fonts/JetBrainsMono/JetBrainsMono-SemiBoldItalic.ttf b/fonts/JetBrainsMono/JetBrainsMono-SemiBoldItalic.ttf
new file mode 100644
index 0000000..ffa1f39
Binary files /dev/null and b/fonts/JetBrainsMono/JetBrainsMono-SemiBoldItalic.ttf differ
diff --git a/fonts/JetBrainsMono/JetBrainsMono-Thin.ttf b/fonts/JetBrainsMono/JetBrainsMono-Thin.ttf
new file mode 100644
index 0000000..1317bfe
Binary files /dev/null and b/fonts/JetBrainsMono/JetBrainsMono-Thin.ttf differ
diff --git a/fonts/JetBrainsMono/JetBrainsMono-ThinItalic.ttf b/fonts/JetBrainsMono/JetBrainsMono-ThinItalic.ttf
new file mode 100644
index 0000000..bc72439
Binary files /dev/null and b/fonts/JetBrainsMono/JetBrainsMono-ThinItalic.ttf differ
-- 
cgit v1.2.3-70-g09d2