Improved 404 page; ported over about page content

src/app/about/page.tsx

@@ -1,7 +1,19 @@
+import ContentCard from "@/components/ContentCard";
+import AboutMe from "@/components/about/AboutMe";
+import AboutSite from "@/components/about/AboutSite";
+
 export default function About() {
     return (
-        <div>
+        <>
-            test!
+            <ContentCard outerClass={'mb-4'} innerClass={'!shadow-zinc-700'}>
+                <h1 className={"text-center"}>{'<< About >>'}</h1>
+            </ContentCard>
+
+            <div className="grid grid-cols-1 lg:grid-cols-[2fr_1fr] gap-4">
+                <AboutMe></AboutMe>
+                <AboutSite></AboutSite>
             </div>
+
+        </>
     )
 }

src/app/globals.css

@@ -18,24 +18,24 @@
 
 body {
     font-family: var(--font-ibm-vga), monospace;
-    font-size: 17px;
+    font-size: 18px;
-    @apply bg-zinc-900 text-zinc-300
+    @apply bg-zinc-900 text-zinc-100
 }
 
 b {
-    @apply text-white font-normal
+    @apply text-white
 }
 
-apotify{
+a{
     @apply text-blue-400 hover:text-blue-300 underline
 }
 
 h1 {
-    @apply text-shadow-md font-bold shadow-zinc-950 text-white text-6xl
+    @apply text-shadow-h1 font-bold shadow-zinc-950 text-white text-4xl text-center
 }
 
 h2 {
-    @apply text-shadow-sm font-bold shadow-zinc-950 text-white text-xl
+    @apply text-shadow-sm font-bold shadow-zinc-950 text-white text-2xl
 }
 
 hr {

src/components/about/AboutMe.tsx

@@ -0,0 +1,44 @@
+import ContentCard from "@/components/ContentCard";
+
+export default function AboutMe() {
+    return (
+        <ContentCard>
+            <h2>{'< About Me >'}</h2>
+            <hr/>
+
+            <p>
+                For as long as I can remember, I have been fascinated with computers and other electronic devices. As a
+                kid, I would attempt to disassemble (usually already broken) electronic devices of all types to see
+                what&lsquo;s inside and <b>attempt to decipher how they function</b>. Sometimes these devices would not
+                be broken <i>before</i> I took them apart, to the dismay of my family. When I was 8 or so, I received an
+                old hand-me-down computer (an IBM Aptiva with matching CRT monitor). I must have clicked just about
+                every button there was to click, learning about the computer&lsquo;s functions as I went along and
+                <b>learning how to fix things I&lsquo;d inadvertently break in the process</b>. I also ran a website
+                during this period, created with MS Frontpage, explaining how computers work and describing their
+                various components. </p>
+            <br/>
+            <p>
+                Fast forward a few years and I&lsquo;m messing around with Android smartphones, learning about things
+                like ADB, Fastboot and flashing custom ROMs to <b>expand their capabilities after the manufacturer had
+                long stopped pushing out new software versions</b>. Around this time, I also experimented with
+                installing Linux, going back and forth between this new and unknown thing, and the various Windows
+                versions I was familiar with. I&lsquo;d picked up some simple HTML and CSS skills, and occasionally
+                dabbled in game development through the use of Game Maker 7/8. </p>
+            <br/>
+            <p>
+                The latter introduced me to the concept of <b>object-oriented programming</b>. After understanding the
+                basics of Game Maker, I discovered projects like <a href="https://godotengine.org/">Godot</a>, and
+                attempted to wrap my brain about &ldquo;proper&rdquo; programming, teaching myself to <b> write small
+                Python-based games on the Raspberry Pi </b> using <a href="https://pygame.org">Pygame</a> (I say
+                &lsquo;games&rsquo;, but they&lsquo;re probably better described as &lsquo;tech demos&rsquo;). </p>
+            <br/>
+            <p>
+                I also started writing some simple applications using C# and WinForms, <b>creating a small tool to help
+                me calculate note transpositions when playing music</b>. I also wrote a program that converted game
+                controller inputs into MIDI signals, allowing me to play digital instruments and keyboards using the
+                controller. Additionally, I occasionally attempted to solve small programming exercises given to me by
+                my uncle, a seasoned software developer and big inspiration to little me.
+            </p>
+        </ContentCard>
+    )
+}

src/components/about/AboutSite.tsx

@@ -0,0 +1,12 @@
+import Link from "next/link";
+import ContentCard from "@/components/ContentCard";
+
+export default function AboutSite() {
+    return (
+        <ContentCard>
+            <h2>{'< About this website >'}</h2>
+            <hr/>
+            A detailed list of changes can be found at the <Link href={"/changelog"}>changelog</Link>.
+        </ContentCard>
+    )
+}

src/components/home/Contact.tsx

@@ -7,17 +7,17 @@ export default function Contact() {
             <h2>{'< Contact info >'}</h2>
             <hr/>
             <p>
-                If you&lsquo;d like to <b>get in touch with me</b>, consider sending me an <a href="">e-mail</a>, find me on
+                If you&lsquo;d like to <b>get in touch with me</b>, consider sending me an <a href="">e-mail</a>, find
-                <a rel="me" href="https://mastodon.world/@niisse">Mastodon</a>, or connect on <a
+                me on <a rel="me" href="https://mastodon.world/@niisse">Mastodon</a>, or connect on <a
                 href="https://www.linkedin.com/in/nisse-lommerde-9042b6215/">LinkedIn</a>. I also occasionally show off
                 projects I&lsquo;m working on over at my <a href="https://www.youtube.com/@Niiisse">YouTube Channel</a>.
             </p>
             <br/>
             <p>
-                This website was designed from scratch as an homage to <b>90&lsquo;s and early 00&lsquo;s web design</b> as well as
+                This website was designed from scratch as an homage to <b>90&lsquo;s and early 00&lsquo;s web design</b>
-                even older <b>text-based computer programs</b>, perhaps somewhat reminiscent of spaces like GeoCities.
+                as well as even older <b>text-based computer programs</b>, perhaps somewhat reminiscent of spaces like
-                Partial inspiration for this website&lsquo;s design, as well as the font being used, came from the wonderful
+                GeoCities. Partial inspiration for this website&lsquo;s design, as well as the font being used, came
-                <a href="https://int10h.org/oldschool-pc-fonts/">int10h.org</a>.
+                from the wonderful <a href="https://int10h.org/oldschool-pc-fonts/">int10h.org</a>.
             </p>
         </ContentCard>
     )

tailwind.config.js

@@ -26,6 +26,7 @@ module.exports = {
                 DEFAULT: '0px 2px var(--tw-shadow-color)',
                 md: '2px 5px var(--tw-shadow-color)',
                 lg: '0px 5px var(--tw-shadow-color)',
+                h1: '3px 3px var(--tw-shadow-color)',
             },
         },
     },