From ee955bb93d1e8416dfe45410d106fd8641cf35e8 Mon Sep 17 00:00:00 2001
From: Arsalan Kazmi <sonicspeed848@gmail.com>
Date: Tue, 30 Jan 2024 21:08:28 +0000
Subject: [PATCH] Updated styling and content

---
 index-naked.html     | 62 ++++++++++++++++++++++++++++------------
 index.html           | 67 +++++++++++++++++++++++++++++++-------------
 m8.css => m8-old.css |  0
 style.css            | 50 +++++++++++++++++++++++++++++++++
 4 files changed, 141 insertions(+), 38 deletions(-)
 rename m8.css => m8-old.css (100%)
 create mode 100644 style.css
diff --git a/index-naked.html b/index-naked.html
index 20103d0..c93f005 100644
--- a/index-naked.html
+++ b/index-naked.html
@@ -1,23 +1,24 @@
 <html>
     <head>
+        <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1" />
 
         <!-- HTML Meta Tags -->
-        <title>Velocity</title>
-        <meta name="description" content="Hi, I'm Velocity. I like doing stupid things with/to computers.">
+        <title>Arsalan "Velocity" Kazmi</title>
+        <meta name="description" content="Game/Software Developer & Creative Author">
 
         <!-- Facebook Meta Tags -->
         <meta property="og:url" content="https://that1m8head.github.io/">
-        <meta property="og:title" content="Velocity">
-        <meta property="og:description" content="Hi, I'm Velocity. I like doing stupid things with/to computers.">
+        <meta property="og:title" content="Arsalan 'Velocity' Kazmi">
+        <meta property="og:description" content="Game/Software Developer & Creative Author">
         <meta property="og:image" content="http://gravatar.com/avatar/f04c2d1fe01f14d1b499227a9e04fff4?s=300">
 
         <!-- Twitter Meta Tags -->
         <meta name="twitter:card" content="summary_large_image">
         <meta property="twitter:domain" content="that1m8head.github.io">
         <meta property="twitter:url" content="https://that1m8head.github.io/">
-        <meta name="twitter:title" content="Velocity">
-        <meta name="twitter:description" content="Hi, I'm Velocity. I like doing stupid things with/to computers.">
+        <meta name="twitter:title" content="Arsalan 'Velocity' Kazmi">
+        <meta name="twitter:description" content="Game/Software Developer & Creative Author">
         <meta name="twitter:image" content="http://gravatar.com/avatar/f04c2d1fe01f14d1b499227a9e04fff4?s=300">
 
         <!-- Meta Tags Generated via dnschecker.org-->
@@ -29,38 +30,55 @@
         <header onclick="window.location.href = 'index.html';">
             <img src="http://gravatar.com/avatar/f04c2d1fe01f14d1b499227a9e04fff4?s=200" class="avatar"></img>
             <div class="header-text">
-                <h1>Velocity</h1>
-                <h2>Arsalan Kazmi</h2>
+                <h1>Arsalan "Velocity" Kazmi</h1>
+                <p>Software Developer/Creative Author</p>
             </div>
         </header>
 
-        <nav id="socials">
-            <p><a href="mailto:sonicspeed848@gmail.com">Email</a> – <a href="https://github.com/that1m8head">GitHub</a> – <a href="https://twitter.com/that1m8head">Twitter</a> – <a href="https://youtube.com/@that1m8head">YouTube</a> – <a rel="me" href="https://social.linux.pizza/@that1m8head">Mastodon</a></p>
+        <nav>
+            <section>
+                <h2>Social and Contact Info</h2>
+                <ul>
+                    <li>Personal email: <a href="mailto:sonicspeed848@gmail.com">sonicspeed848@gmail.com</a></li>
+                    <li>University email: <a href="mailto:arsalankazmi580@gmail.com">arsalankazmi580@gmail.com</a></li>
+                    <li>GitHub: <a href="https://github.com/that1m8head">Profile</a></li>
+                    <li>Twitter: <a href="https://twitter.com/that1m8head">@that1m8head</a></li>
+                    <li>YouTube: <a href="https://youtube.com/@that1m8head">Velocity</a></li>
+                    <li>Mastodon: <a rel="me" href="https://social.linux.pizza/@that1m8head">@that1m8head@social.linux.pizza</a></li>
+                </ul>
+            </section>
         </nav>
 
         <main>
             <section>
                 <h2>About me</h2>
-                <p>Hi, I'm Arsalan, or Velocity. I'm <span id="age">at least 20</span> years old and I'm technically a software developer, but I prefer to call myself a professional computer breaker.</p>
-                <p>My username for the most part is That1M8Head, and I use my old one, SpeedStriker243, if it can't be changed.</p>
-                <p>I'm British (specifically, I'm a Londoner), and I'm currently a student at the <a href="https://herts.ac.uk">University of Hertfordshire</a>.</p>
-                <p>I like spending my time writing code, messing around with computers, playing games, making random edits, watching YouTube videos and sleeping.</p>
-                <p><a href="https://sonic-lockandload.github.io">Sonic: Lock &amp; Load</a> is currently my main project, and what I work on in most of my time.</p>
+                <p>Hi, I'm Arsalan, or Velocity. I'm <span id="age">at least 20</span> years old and I'm a game/software developer and creative author for fun.</p>
+                <p>I live in north west London, and I'm currently a student at the <a href="https://herts.ac.uk">University of Hertfordshire</a>.</p>
+                <p>I mainly write code in Python and Rust, but I'm also learning Haskell. Rust is my primary programming language, and Python is my secondary.</p>
+                <p>As for writing, I use whatever's most convenient at any given time, but it's usually a lightweight markup language like Markdown or a proper typesetting format like LaTeX.</p>
+                <p>My text editors of choice include <a href="https://code.visualstudio.com">Visual Studio Code</a>, <a href="https://gnu.org/software/emacs/">GNU Emacs</a> and <a href="https://neovim.io/">Neovim</a>, but I'm also a text editor <em>fanatic</em>, so there's a lot of text editors I like messing around with.</p>
             </section>
 
             <section>
                 <h2>Projects</h2>
                 <ul>
-                    <li><a href="https://sonic-lockandload.github.io/">Sonic: Lock & Load</a>, a Sonic the Hedgehog first-person shooter DOOM mod and fan game, which uses the GZDoom source port. My passion project.</li>
-                    <li><a href="https://github.com/That1M8Head/that1m8head.github.io">This website.</a></li>
-                    <li><a href="https://that1m8head.github.io/sued/">sued</a>, a line editor similar to the standard editor, <code>ed</code>, but significantly worse and slightly more user-friendly. Includes basic editing functionality, with writing, line replacing and line deleting, as well as the ability to run programs.</li>
+                    <li><a href="https://sonic-lockandload.github.io/">Sonic: Lock & Load</a>, a Sonic the Hedgehog character-action first-person shooter DOOM mod and fan game, which uses the GZDoom source port. My passion project.</li>
+                    <li><a href="https://that1m8head.github.io/sued/">sued</a>, a line editor inspired by the terseness of the standard text editor, <code>ed</code>, but more user-friendly, with a different command set. Source code available <a href="https://github.com/That1M8Head/sued">on GitHub</a>.</li>
                     <li><a href="https://github.com/That1M8Head/QVSED">QVSED</a>, or Qt-based Volatile Small Editor, a graphical editor built using the PyQt5 framework which is entirely stateless and doesn't store any file metadata.</li>
+                    <li><a href="https://that1m8head.github.io/infriendly">Infriendly</a>, an online web platform for writing textual documents that intentionally does not have any "smart" features. Source code available <a href="https://github.com/That1M8Head/infriendly">on GitHub</a>.</li>
                     <li><a href="https://that1m8head.github.io/tlpl/">Take it and Like it Public License</a>, a non-legally binding, not-accepted-by-any-courts super permissive software licence for works that you don't care about. Basically an informal version of the MIT/X licence.</li>
+                    <li>Probably more stuff. Check out my <a href="https://github.com/That1M8Head">GitHub page</a> to see if I come up with some other random stuff.</li>
                 </ul>
             </section>
+
+            <section>
+                <h2>Writings</h2>
+                <p>Okay, well none of them are public. But let's just pretend for a second that I work really hard and that I have a lot of articles and essays here.</p>
+            </section>
         </main>
 
         <footer>
+            <h2>End</h2>
             <p>You are viewing the <em>CSS-free version of this site</em>. <a href="index.html">Go back to the pretty version.</a></p>
             <p xmlns:cc="http://creativecommons.org/ns#" xmlns:dct="http://purl.org/dc/terms/"><span property="dct:title">This website</span> by <a rel="cc:attributionURL dct:creator" property="cc:attributionName" href="https://github.com/that1m8head">Arsalan "Velocity" Kazmi</a> is licensed under <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/?ref=chooser-v1" target="_blank" rel="license noopener noreferrer" style="display:inline-block;">CC BY-NC-SA 4.0.</a></p>
             <p>
@@ -69,6 +87,14 @@ <h2>Projects</h2>
                 <img style="height:40px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/nc.svg?ref=chooser-v1">
                 <img style="height:40px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/sa.svg?ref=chooser-v1">
             </p> 
+            <p>Put simply:</p>
+            <ul>
+                <li><strong>CC</strong> - This is a Creative Commons licence.</li>
+                <li><strong>BY</strong> - Attribution; you have to give me credit if you share or adapt this website.</li>
+                <li><strong>NC</strong> - Non-commercial; you can't sell your adaptations.</li>
+                <li><strong>SA</strong> - Share-alike; when adapting, you can't swap out the licence.</li>
+                <li><strong>4.0</strong> - This is the fourth version of the CC BY-NC-SA licence.</li>
+            </ul>
         </footer>
     </body>
 </html>
diff --git a/index.html b/index.html
index 7491ef7..7cca4fc 100644
--- a/index.html
+++ b/index.html
@@ -1,67 +1,86 @@
 <html>
     <head>
+        <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1" />
 
         <!-- HTML Meta Tags -->
-        <title>Velocity</title>
-        <meta name="description" content="Hi, I'm Velocity. I like doing stupid things with/to computers.">
+        <title>Arsalan "Velocity" Kazmi</title>
+        <meta name="description" content="Game/Software Developer & Creative Author">
 
         <!-- Facebook Meta Tags -->
         <meta property="og:url" content="https://that1m8head.github.io/">
-        <meta property="og:title" content="Velocity">
-        <meta property="og:description" content="Hi, I'm Velocity. I like doing stupid things with/to computers.">
+        <meta property="og:title" content="Arsalan 'Velocity' Kazmi">
+        <meta property="og:description" content="Game/Software Developer & Creative Author">
         <meta property="og:image" content="http://gravatar.com/avatar/f04c2d1fe01f14d1b499227a9e04fff4?s=300">
 
         <!-- Twitter Meta Tags -->
         <meta name="twitter:card" content="summary_large_image">
         <meta property="twitter:domain" content="that1m8head.github.io">
         <meta property="twitter:url" content="https://that1m8head.github.io/">
-        <meta name="twitter:title" content="Velocity">
-        <meta name="twitter:description" content="Hi, I'm Velocity. I like doing stupid things with/to computers.">
+        <meta name="twitter:title" content="Arsalan 'Velocity' Kazmi">
+        <meta name="twitter:description" content="Game/Software Developer & Creative Author">
         <meta name="twitter:image" content="http://gravatar.com/avatar/f04c2d1fe01f14d1b499227a9e04fff4?s=300">
 
         <!-- Meta Tags Generated via dnschecker.org-->
 
         <link rel="shortcut icon" href="http://gravatar.com/avatar/f04c2d1fe01f14d1b499227a9e04fff4" type="image/png">
-        <link rel="stylesheet" href="m8.css" type="text/css">
+        <link rel="stylesheet" href="style.css" type="text/css">
         <script src="script.js"></script>
     </head>
     <body>
         <header onclick="window.location.href = 'index.html';">
             <img src="http://gravatar.com/avatar/f04c2d1fe01f14d1b499227a9e04fff4?s=200" class="avatar"></img>
             <div class="header-text">
-                <h1>Velocity</h1>
-                <h2>Arsalan Kazmi</h2>
+                <h1>Arsalan "Velocity" Kazmi</h1>
+                <p>Software Developer/Creative Author</p>
             </div>
         </header>
 
-        <nav id="socials">
-            <p><a href="mailto:sonicspeed848@gmail.com">Email</a> – <a href="https://github.com/that1m8head">GitHub</a> – <a href="https://twitter.com/that1m8head">Twitter</a> – <a href="https://youtube.com/@that1m8head">YouTube</a> – <a rel="me" href="https://social.linux.pizza/@that1m8head">Mastodon</a></p>
+        <nav>
+            <section>
+                <h2>Social and Contact Info</h2>
+                <ul>
+                    <li>Personal email: <a href="mailto:sonicspeed848@gmail.com">sonicspeed848@gmail.com</a></li>
+                    <li>University email: <a href="mailto:arsalankazmi580@gmail.com">arsalankazmi580@gmail.com</a></li>
+                    <li>GitHub: <a href="https://github.com/that1m8head">Profile</a></li>
+                    <li>Twitter: <a href="https://twitter.com/that1m8head">@that1m8head</a></li>
+                    <li>YouTube: <a href="https://youtube.com/@that1m8head">Velocity</a></li>
+                    <li>Mastodon: <a rel="me" href="https://social.linux.pizza/@that1m8head">@that1m8head@social.linux.pizza</a></li>
+                </ul>
+            </section>
         </nav>
 
         <main>
             <section>
                 <h2>About me</h2>
-                <p>Hi, I'm Arsalan, or Velocity. I'm <span id="age">at least 20</span> years old and I'm technically a software developer, but I prefer to call myself a professional computer breaker.</p>
-                <p>My username for the most part is That1M8Head, and I use my old one, SpeedStriker243, if it can't be changed.</p>
-                <p>I'm British (specifically, I'm a Londoner), and I'm currently a student at the <a href="https://herts.ac.uk">University of Hertfordshire</a>.</p>
-                <p>I like spending my time writing code, messing around with computers, playing games, making random edits, watching YouTube videos and sleeping.</p>
-                <p><a href="https://sonic-lockandload.github.io">Sonic: Lock &amp; Load</a> is currently my main project, and what I work on in most of my time.</p>
+                <p>Hi, I'm Arsalan, or Velocity. I'm <span id="age">at least 20</span> years old and I'm a game/software developer and creative author for fun.</p>
+                <p>I live in north west London, and I'm currently a student at the <a href="https://herts.ac.uk">University of Hertfordshire</a>.</p>
+                <p>I mainly write code in Python and Rust, but I'm also learning Haskell. Rust is my primary programming language, and Python is my secondary.</p>
+                <p>I also enjoy writing short stories and character profiles.</p>
+                <p>For creative writing, I use whatever format is most convenient at any given time, but it's usually a lightweight markup language like Markdown or a proper typesetting format like LaTeX.</p>
+                <p>My text editors of choice include <a href="https://code.visualstudio.com">Visual Studio Code</a>, <a href="https://gnu.org/software/emacs/">GNU Emacs</a> and <a href="https://neovim.io/">Neovim</a>, but I'm also a text editor <em>fanatic</em>, so there's a lot of text editors I like messing around with.</p>
             </section>
 
             <section>
                 <h2>Projects</h2>
                 <ul>
-                    <li><a href="https://sonic-lockandload.github.io/">Sonic: Lock & Load</a>, a Sonic the Hedgehog first-person shooter DOOM mod and fan game, which uses the GZDoom source port. My passion project.</li>
-                    <li><a href="https://github.com/That1M8Head/that1m8head.github.io">This website.</a></li>
-                    <li><a href="https://that1m8head.github.io/sued/">sued</a>, a line editor similar to the standard editor, <code>ed</code>, but significantly worse and slightly more user-friendly. Includes basic editing functionality, with writing, line replacing and line deleting, as well as the ability to run programs.</li>
-                    <li><a href="https://github.com/That1M8Head/QVSED">QVSED</a>, or Qt-based Volatile Small Editor, a graphical editor built using the PyQt5 framework which is entirely stateless and doesn't store any file metadata.</li>
+                    <li><a href="https://sonic-lockandload.github.io/">Sonic: Lock & Load</a>, a Sonic the Hedgehog character-action first-person shooter DOOM mod and fan game, which uses the GZDoom source port. My passion project.</li>
+                    <li><a href="https://that1m8head.github.io/sued/">sued</a>, a line editor inspired by the terseness of the standard text editor, <code>ed</code>, but more user-friendly, with a different command set. Source code available <a href="https://github.com/That1M8Head/sued">on GitHub</a>.</li>
+                    <li><a href="https://github.com/That1M8Head/QVSED">QVSED</a>, or Qt-based Versatile Stateless Editor, a graphical editor built using the PyQt5 framework which is entirely stateless and doesn't store any file metadata.</li>
+                    <li><a href="https://that1m8head.github.io/infriendly">Infriendly</a>, an online web platform for writing textual documents that intentionally does not have any "smart" features. Source code available <a href="https://github.com/That1M8Head/infriendly">on GitHub</a>.</li>
                     <li><a href="https://that1m8head.github.io/tlpl/">Take it and Like it Public License</a>, a non-legally binding, not-accepted-by-any-courts super permissive software licence for works that you don't care about. Basically an informal version of the MIT/X licence.</li>
+                    <li>Probably more stuff. Check out my <a href="https://github.com/That1M8Head">GitHub page</a> to see if I come up with some other random stuff.</li>
                 </ul>
             </section>
+
+            <section>
+                <h2>Writings</h2>
+                <p>Okay, well, none of them are public. But let's just pretend for a second that I work really hard and that I have a lot of articles and essays here.</p>
+            </section>
         </main>
 
         <footer>
+            <h2>End</h2>
             <p>You can view a <a href="index-naked.html">CSS-free version of this site</a> for accessibility reasons or otherwise.</p>
             <p xmlns:cc="http://creativecommons.org/ns#" xmlns:dct="http://purl.org/dc/terms/"><span property="dct:title">This website</span> by <a rel="cc:attributionURL dct:creator" property="cc:attributionName" href="https://github.com/that1m8head">Arsalan "Velocity" Kazmi</a> is licensed under <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/?ref=chooser-v1" target="_blank" rel="license noopener noreferrer" style="display:inline-block;">CC BY-NC-SA 4.0.</a></p>
             <p>
@@ -70,6 +89,14 @@ <h2>Projects</h2>
                 <img style="height:40px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/nc.svg?ref=chooser-v1">
                 <img style="height:40px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/sa.svg?ref=chooser-v1">
             </p> 
+            <p>Put simply:</p>
+            <ul>
+                <li><strong>CC</strong> - This is a Creative Commons licence.</li>
+                <li><strong>BY</strong> - Attribution; you have to give me credit if you share or adapt this website.</li>
+                <li><strong>NC</strong> - Non-commercial; you can't sell your adaptations.</li>
+                <li><strong>SA</strong> - Share-alike; when adapting, you can't swap out the licence.</li>
+                <li><strong>4.0</strong> - This is the fourth version of the CC BY-NC-SA licence.</li>
+            </ul>
         </footer>
     </body>
 </html>
diff --git a/m8.css b/m8-old.css
similarity index 100%
rename from m8.css
rename to m8-old.css
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..9c5714f
--- /dev/null
+++ b/style.css
@@ -0,0 +1,50 @@
+@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro&family=JetBrains+Mono&family=Roboto+Slab&display=swap');
+
+body {
+    background-color: #f5f5f5;
+    color: #000000;
+    font-size: 18px;
+    line-height: 1.5;
+    margin: auto;
+    max-width: 800px;
+    padding: 40px;
+    font-family: "Roboto Slab", serif;
+}
+
+a {
+    color: #4c08a3;
+    text-decoration: none;
+}
+a:hover {
+    text-decoration: underline;
+}
+
+@media (prefers-color-scheme: dark) {
+    body {
+        background-color: #222222;
+        color: #ffffff;
+    }
+    a {
+        color: #bd9ff3;
+    }
+}
+
+li {
+    list-style-type: square;
+    padding-bottom: 5px;
+}
+
+.header-text {
+    text-align: center;
+}
+
+.avatar {
+    height: 200px;
+    width: auto;
+    margin: auto;
+    border-radius: 12px;
+    box-shadow: 0px 0px 9px 5px #00000054;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
\ No newline at end of file
