From 3a1d9fa6232f1f1d3cc22958f6abccc539fba05d Mon Sep 17 00:00:00 2001
From: Niisse <nisselommerde@gmail.com>
Date: Mon, 19 Jun 2023 17:03:28 +0200
Subject: [PATCH] work on about page

---
 resources/css/app.css                        |  2 +-
 resources/views/about.blade.php              | 53 ++++++++++++++++----
 resources/views/changelog.blade.php          |  4 +-
 resources/views/dashboard.blade.php          |  2 +-
 resources/views/home/changelog.blade.php     |  2 +-
 resources/views/layouts/navigation.blade.php | 13 +++--
 6 files changed, 57 insertions(+), 19 deletions(-)

diff --git a/resources/css/app.css b/resources/css/app.css
index 5f6eaa7..858ecca 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -12,7 +12,7 @@
 @layer base {
     html {
         font-family: ibm-vga, monospace;
-        font-size: 20px;
+        font-size: 17px;
     }
     b {
         @apply text-white font-normal
diff --git a/resources/views/about.blade.php b/resources/views/about.blade.php
index 61eeeeb..1ed02b9 100644
--- a/resources/views/about.blade.php
+++ b/resources/views/about.blade.php
@@ -6,16 +6,49 @@
             </x-inner-card>
         </x-outer-card>
 
-        <div class="grid grid-cols-2 gap-4">
-           <div>
-               <x-outer-card>
-                   <x-inner-card>
-                       <h2>< About Me ></h2>
-                       <hr>
-                       gay boi
-                   </x-inner-card>
-               </x-outer-card>
-           </div>
+        <div class="grid grid-cols-[2fr_1fr] gap-4">
+            <div>
+                <x-outer-card>
+                    <x-inner-card>
+                        <h2>< Early Interest ></h2>
+                        <hr>
+
+                        <p>
+                            For as long as I can remember, I have been fascinated with computers and other forms of
+                            electronics. As a kid, I would attempt to disassemble (usually already broken)
+                            electronic devices of all types to see what'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.
+                        </p>
+                        <br>
+                        <p>
+                            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 of
+                            the computer's functions as I went along and <b>learning how to fix things I'd inadvertently
+                                                                            break in the process</b>. I also ran a
+                            website during this period, created with Frontpage '97, explaining how computers work and
+                            describing the their various components.
+                        </p>
+                        <br>
+                        <p>
+                            Fast forward a few years and I'm messing around with Android smartphones, learning about
+                            things like flashing custom ROMs to expand their capabilities after the manufacturer had
+                            long stopped pushing out new software versions. 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'd picked up some simple HTML and CSS skills, and
+                            occasionally dabbled in game development through Game Maker 7/8. The latter introduced me to
+                            the concept of <b>object-oriented programming</b>.
+                        </p>
+                        <br>
+
+                        <h2>Test</h2>
+                        <hr>
+                        <p>
+                            More text
+                        </p>
+                    </x-inner-card>
+                </x-outer-card>
+            </div>
 
             <div>
                 <x-outer-card>
diff --git a/resources/views/changelog.blade.php b/resources/views/changelog.blade.php
index 2f9ac0f..87d0568 100644
--- a/resources/views/changelog.blade.php
+++ b/resources/views/changelog.blade.php
@@ -1,8 +1,8 @@
 <x-app-layout>
     <div class="space-y-4">
         <x-outer-card class="select-none">
-            <x-inner-card class="!shadow-purple-500">
-                <h1 class="text-center text-4xl text-shadow-md font-bold shadow-zinc-950">< Changelog ></h1>
+            <x-inner-card class="!shadow-zinc-700">
+                <h1 class="text-center text-4xl text-shadow-md font-bold shadow-zinc-950"><< Changelog >></h1>
             </x-inner-card>
         </x-outer-card>
 
diff --git a/resources/views/dashboard.blade.php b/resources/views/dashboard.blade.php
index 95fb056..7cc67e9 100644
--- a/resources/views/dashboard.blade.php
+++ b/resources/views/dashboard.blade.php
@@ -2,7 +2,7 @@
 
     @include('home.title-banner')
 
-    <div class="mt-4 grid grid-rows-[1fr] sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-[auto_auto_400px] gap-4 ">
+    <div class="mt-4 grid auto-rows-auto sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-[400px_auto_400px] gap-4 ">
 
         <x-outer-card class="md:col-span-2">
             <x-inner-card class="h-full">
diff --git a/resources/views/home/changelog.blade.php b/resources/views/home/changelog.blade.php
index 2e2de80..495cebd 100644
--- a/resources/views/home/changelog.blade.php
+++ b/resources/views/home/changelog.blade.php
@@ -56,7 +56,7 @@
                 <hr>
                 <div>
                     // For more, see the
-                    <span class="text-blue-400 hover:text-blue-300 underline"><a href="">changelog</a></span>.
+                    <span class="text-blue-400 hover:text-blue-300 underline"><a href="{{route('changelog')}}">changelog</a></span>.
                 </div>
             </div>
 
diff --git a/resources/views/layouts/navigation.blade.php b/resources/views/layouts/navigation.blade.php
index 45b61c7..144d867 100644
--- a/resources/views/layouts/navigation.blade.php
+++ b/resources/views/layouts/navigation.blade.php
@@ -3,24 +3,29 @@
     <div class="my-4">
         <div class="flex flex-row gap-x-2 text-xl font-ibm whitespace-nowrap">
 
-            <x-nav-button class="text-blue-400 shadow-blue-950"
+            <x-nav-button class="text-red-400 shadow-red-950"
                           :route="route('dashboard')"
                           :active="request()->routeIs('dashboard')">Home
             </x-nav-button>
-            <x-nav-button class="text-lime-400 shadow-lime-950"
+            <x-nav-button class="text-yellow-400 shadow-yellow-950"
                           :route="route('about')"
                           :active="request()->routeIs('about')">About
             </x-nav-button>
-            <x-nav-button class="text-yellow-400 shadow-yellow-950"
+            <x-nav-button class="text-lime-400 shadow-lime-950"
                           :route="route('projects.index')"
                           :active="request()->routeIs('projects.*')"
             >Projects
             </x-nav-button>
-            <x-nav-button class="text-red-400 shadow-red-950"
+            <x-nav-button class="text-blue-400 shadow-blue-950"
                           :route="route('blog')"
                           :active="request()->routeIs('blog')"
             >Blog
             </x-nav-button>
+            <x-nav-button class="text-purple-300 shadow-purple-950"
+                          :route="route('changelog')"
+                          :active="request()->routeIs('changelog')"
+            >Changelog
+            </x-nav-button>
 
             <div class="ml-auto hidden md:flex">
                 <x-nav-button class="text-zinc-200 shadow-zinc-950"