From b74919bd399021041e7f4bfcada03a6796e0037e Mon Sep 17 00:00:00 2001
From: Grayson Riffe <grayson@graysonriffe.com>
Date: Sun, 27 Aug 2023 21:54:54 -0500
Subject: [PATCH] Major cleanup and update content

---
 about/index.html | 13 +++-----
 index.html       | 19 +++++++-----
 nf/index.html    | 22 ++++++-------
 style.css        | 81 +++++++++++++++++-------------------------------
 transitions.js   | 18 +++++------
 5 files changed, 62 insertions(+), 91 deletions(-)

diff --git a/about/index.html b/about/index.html
index 83643e4..20fbc60 100644
--- a/about/index.html
+++ b/about/index.html
@@ -10,7 +10,6 @@
     <meta name="description" content="Grayson Riffe's Portfolio Website">
     <meta name="theme-color" content="#ff3535">
     <meta name="og:image" content="/portrait.jpg">
-    <meta name="format-detection" content="telephone=no">
 
     <link rel="icon" href="/favicon.png" type="image/png">
     <link rel="stylesheet" href="/style.css">
@@ -25,11 +24,10 @@
             <img src="/logo.png" alt="Grayson Riffe">
         </div>
         <nav>
-            <ul>
-                <a href="/"><li>Home</li></a>
-                <a href="/nf"><li>Nothin' Fancy</li></a>
-                <a class="selectedpage" href="#"><li>About</li></a>
-            </ul>
+            <div><a href="/">Home</a></div>
+            <div><a href="/nf/">Nothin' Fancy</a></div>
+            <div><a href="/resume/" class="notransition">Resume</a></div>
+            <div class="selectedpage"><a href="#">About</a></div>
         </nav>
     </header>
 
@@ -39,9 +37,6 @@
             <div class="portrait">
                 <img src="/portrait.jpg" alt="Portrait">
             </div>
-            <div class="centeredportrait">
-                <img src="/portrait.jpg" alt="Portrait">
-            </div>
             <p>
                 I'm from Kennedale, a little suburb in the DFW area of Texas. It's here where I grew up and found my home in computer science. I wrote my first Java games and discovered the magic that is Stack Overflow here. In 2022, I graduated from high school and spent my last semester in my hometown, and now I'm in College Station studying what I love.
 
diff --git a/index.html b/index.html
index a0082fa..645abd1 100644
--- a/index.html
+++ b/index.html
@@ -24,11 +24,10 @@
             <img src="logo.png" alt="Grayson Riffe">
         </div>
         <nav>
-            <ul>
-                <a class="selectedpage" href="#"><li>Home</li></a>
-                <a href="nf"><li>Nothin' Fancy</li></a>
-                <a href="about"><li>About</li></a>
-            </ul>
+            <div class="selectedpage"><a href="#">Home</a></div>
+            <div><a href="/nf/">Nothin' Fancy</a></div>
+            <div><a href="/resume/" class="notransition">Resume</a></div>
+            <div><a href="/about/">About</a></div>
         </nav>
     </header>
 
@@ -36,12 +35,16 @@
         <article>
             <h1>Grayson Riffe</h1>
             <p>
-                Hello! My name is Grayson Riffe, and I am an engineering student at Texas A&M studying Computer Science. Ever since I can remember, I've been interested in computers and how to tell them what to do. I started my programming journey in 5th grade with Java, writing tiny games such as tic-tac-toe, a number guessing game, and "Button Clicker" (a very bad knockoff of Cookie Clicker with only two buyable things). As I started to get more competent, I then started looking into C++ on Windows and quickly fell in love with MSVC and Visual Studio. I'm mainly interested in compiled application development.
+                Hello! My name is Grayson Riffe, and I am an undergraduate at Texas A&M studying Computer Science. Ever since I can remember, I've been interested in computers and how to tell them what to do.
+
+                I started my programming journey in 5th grade with Java, writing tiny games such as tic-tac-toe, a number guessing game, and "Button Clicker" (a very bad knockoff of Cookie Clicker). As I started to get more competent, I then started looking into C++ on Windows and quickly fell in love with MSVC and Visual Studio. I'm mainly interested in compiled application development.
             </p>
-            <div class="space"></div>
+        </article>
+        <div class="space"></div>
+        <article>
             <h2>What's on this website?</h2>
             <p>
-                Mostly words, but it will eventually contain a portfolio which includes an in-development project of mine, a game engine I call Nothin' Fancy.
+                At the top of this page, you can find links to a few of my past and present projects. I also have a link to my current resume as well as a short biography and contact information on the About page.
             </p>
         </article>
         <footer>
diff --git a/nf/index.html b/nf/index.html
index 8d835a8..909b237 100644
--- a/nf/index.html
+++ b/nf/index.html
@@ -24,11 +24,10 @@
             <img src="/logo.png" alt="Grayson Riffe">
         </div>
         <nav>
-            <ul>
-                <a href="/"><li>Home</li></a>
-                <a class="selectedpage" href="#"><li>Nothin' Fancy</li></a>
-                <a href="/about"><li>About</li></a>
-            </ul>
+            <div><a href="/">Home</a></div>
+            <div class="selectedpage"><a href="#">Nothin' Fancy</a></div>
+            <div><a href="/resume/" class="notransition">Resume</a></div>
+            <div><a href="/about/">About</a></div>
         </nav>
     </header>
 
@@ -39,22 +38,23 @@
         <article>
             <h1>Nothin' Fancy</h1>
             <p>
-                Nothin' Fancy (or NF) is a closed-source and in-development game engine / visualizer for Windows built with MSVC. It has two revisions. I ultimately want to use my engine to create a game I can release on Steam for free.
-            </p>
-            <div class="space"></div>
-            <h2>Revision 1</h2>
-            <p>
+                Nothin' Fancy (or NF) is a closed-source and in-development game engine / visualizer for Windows built with MSVC. I ultimately want to use my engine to create a game I can release on Steam for free.
+
                 The first revision was developed in 2021 as an experimental project for learning. It has a number of cool features including an asset system complete with model cooking, an easy way to create a UI, material texture support including normal maps, and even a physics engine, but it is still missing a number of important features.
 
                 I worked on this project during my senior year of high school, and it is the result of about 4 months of constant work.
             </p>
-            <div class="space"></div>
+        </article>
+        <div class="space"></div>
+        <article>
             <h2>Revision 2</h2>
             <p>
                 A second revision was needed after I realized how much I could improve my first revision using everything I had learned along the way.
 
                 This project is still in development, but I plan to include every feature present in the first revision along with other notable features such as networking and Steamworks API integration. It will also include major internal changes such as the switch from OpenGL to DirectX 11.
 
+                This project is still in development, and I plan to include notable features such as networking and Steam API integration. It runs with Direct3D 11 and 90% of everything is written by me.
+
                 This section will be updated when it is available to download. 
             </p>
         </article>
diff --git a/style.css b/style.css
index 0c22fe8..0250177 100644
--- a/style.css
+++ b/style.css
@@ -26,8 +26,8 @@ body {
     background-size: cover;
     background-position: center;
     filter: blur(2px);
-    height: 100vh;
     width: 100%;
+    height: 100%;
     position: fixed;
     top: 0;
     left: 0;
@@ -47,13 +47,13 @@ body {
 
 header {
     background-color: var(--headercolor);
-    color: white;
     position: fixed;
     top: 0;
-    width: 100%;
+    left: 0;
+    right: 0;
     display: flex;
     justify-content: center;
-    align-items: center;
+
     z-index: 100;
 }
 
@@ -64,7 +64,6 @@ header.out {
 
 .logo {
     height: 100%;
-    aspect-ratio: 1;
     position: absolute;
     left: 1em;
 }
@@ -77,41 +76,31 @@ img {
 nav {
     background-color: #FFFFFF77;
     border-radius: 1em;
-    width: max-content;
-    margin: .5em;
-    color: black;
-}
-
-nav ul {
+    margin: .5em 0;
     display: flex;
-    justify-content: center;
 }
 
-nav a {
-    color: inherit;
-    text-decoration: none;
+nav div {
+    margin: 0.5em;
+    border-radius: 0.5em;
+}
+
+nav div a {
+    display: block;
+    padding: 0.5em;
     font-weight: bold;
     font-size: 1.2em;
-    text-align: center;
-    margin: 0.5em 1em;
-    display: flex;
-    align-items: center;
+    text-decoration: none;
+    white-space: nowrap;
+    color: inherit;
 }
 
-nav li {
-    list-style: none;
-    padding: 10px;
-    pointer-events: none;
-}
-
-.selectedpage {
+nav div.selectedpage {
     background-color: grey;
-    border-radius: .5em;
 }
 
-nav a:not(.selectedpage):hover {
+nav div:not(.selectedpage):hover {
     background-color: #FFFFFF44;
-    border-radius: 5px;
 }
 
 main {
@@ -122,8 +111,7 @@ main {
     background-color: var(--maincolor);
     padding: 1em;
     padding-bottom: 0;
-    border-radius: 10px;
-    overflow: hidden;
+    border-radius: 1em;
 
     opacity: 0;
     animation: main-animation 500ms ease-in-out 500ms;
@@ -144,29 +132,19 @@ main.out {
 .portrait {
     width: 300px;
     float: right;
-    margin: 0.5em;
 }
 
-.portrait img,
-.centeredportrait img {
-    box-sizing: border-box;
-    border: 0.5em black solid;
-    border-radius: 10%;
-}
-
-.centeredportrait {
-    display: none;
-    width: 70%;
-    margin: 0 auto;
+.portrait img {
+    border: 0.2em black solid;
+    border-radius: 1em;
 }
 
 article {
     background-color: var(--articlecolor);
     border: 0.2em solid black;
-    border-radius: 10px;
+    border-radius: 1em;
     padding: 1em;
     overflow: hidden;
-    position: relative;
 }
 
 .space {
@@ -183,7 +161,6 @@ p {
 }
 
 .contact {
-    width: max-content;
     padding: 0 2em;
     font-size: 1.2em;
 }
@@ -191,7 +168,7 @@ p {
 footer {
     text-align: center;
     font-size: 1.2em;
-    margin: 0.5em;
+    padding: 0.5em;
 }
 
 @keyframes main-animation {
@@ -226,7 +203,7 @@ footer {
 
 @media screen and (max-width: 750px) {
 
-    nav a {
+    nav div a {
         font-size: 3vw;
     }
 
@@ -240,10 +217,8 @@ footer {
     }
 
     .portrait {
-        display: none;
-    }
-
-    .centeredportrait {
-        display: block;
+        float: none;
+        width: 70%;
+        margin: 0 auto;
     }
 }
\ No newline at end of file
diff --git a/transitions.js b/transitions.js
index 99ec32a..b48b517 100644
--- a/transitions.js
+++ b/transitions.js
@@ -1,12 +1,10 @@
 window.onload = () => {
     const anchors = document.querySelectorAll('a');
-    const trans1 = document.querySelector('header');
-    const trans2 = document.querySelector('.background');
-    const trans3 = document.querySelector('main');
-
-    for (let i = 0; i < anchors.length; i++) {
-        const anchor = anchors[i];
+    const header = document.querySelector('header');
+    const background = document.querySelector('.background');
+    const main = document.querySelector('main');
 
+    anchors.forEach((anchor) => {
         if (anchor.classList.contains("notransition"))
             return;
             
@@ -26,13 +24,13 @@ window.onload = () => {
                 document.documentElement.style.setProperty('--targetheadercolor', getComputedStyle(document.documentElement).getPropertyValue('--indexheadercolor'))
             }
 
-            trans1.classList.add('out');
-            trans2.classList.add('out');
-            trans3.classList.add('out');
+            header.classList.add('out');
+            background.classList.add('out');
+            main.classList.add('out');
 
             setTimeout(() => {
                 window.location.href = target;
             }, 500);
         });
-    }
+    });
 }
\ No newline at end of file