Create About page

2 files changed, 218 insertions, 98 deletions

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)}