From d127cb8eff91164c504a3d08307fd20f7fac2e7f Mon Sep 17 00:00:00 2001
From: Notoric <tom@acornes.com>
Date: Wed, 29 May 2024 15:10:20 +0100
Subject: [PATCH] Updated Aboutme and added scroll to top

---
 index.html          |  5 +++--
 scripts/homepage.js | 31 +++++++++++++++++++++++++++++++
 styles/global.css   | 27 +++++++++++++++++++++++++++
 3 files changed, 61 insertions(+), 2 deletions(-)
diff --git a/index.html b/index.html
index caadf20..79751df 100644
--- a/index.html
+++ b/index.html
@@ -5,12 +5,13 @@
     <link rel="stylesheet" type="text/css" href="styles/global.css">
 </head>
 <body>
+    <svg id="top-shrtct" fill="#eee" height="50px" width="50px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 330 330" xml:space="preserve" transform="rotate(270)"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path id="XMLID_27_" d="M15,180h263.787l-49.394,49.394c-5.858,5.857-5.858,15.355,0,21.213C232.322,253.535,236.161,255,240,255 s7.678-1.465,10.606-4.394l75-75c5.858-5.857,5.858-15.355,0-21.213l-75-75c-5.857-5.857-15.355-5.857-21.213,0 c-5.858,5.857-5.858,15.355,0,21.213L278.787,150H15c-8.284,0-15,6.716-15,15S6.716,180,15,180z"></path> </g></svg>
     <img id="nav-btn" src="/assets/plus.svg">
     <div id="navbar">
         <p id="logo">[Notoric]</p>
         <div id="nav">
+            <a href="#aboutme">About</a>
             <a href="projects.html">Projects</a>
-            <a href="about.html">About</a>
             <a href="contact.html">Contact</a>
         </div>
         <div id="links">
@@ -38,7 +39,7 @@
         <div id="aboutme">
             <h1>About Me</h1>
             <div id="box-with-title">
-                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                <p>I am a <em id=age>22</em> year old Computer Science graduate from De Montfort University. For as long as I can remember, I have had a desire to tinker and solve logical problems. As a child, I found myself playing with circuit kits and components all the time. I loved creating a circuit as the instructions told me, and then modifying it to add features or change how it worked. When I got my first laptop I was extatic. I began hosting game servers for my friends, tinkering around in the settings and troubleshooting crashes or installing mods. I wrote my first script in python at the age of 12 and have never looked back since.</p>
             </div>
         </div>
     </main>
diff --git a/scripts/homepage.js b/scripts/homepage.js
index 9f6b5f5..018a4da 100644
--- a/scripts/homepage.js
+++ b/scripts/homepage.js
@@ -1,4 +1,5 @@
 const navbtn = document.getElementById('nav-btn');
+const topshrtct = document.getElementById('top-shrtct');
 
 navbtn.addEventListener('click', () => { 
   const navbar = document.getElementById('navbar');
@@ -6,3 +7,33 @@ navbtn.addEventListener('click', () => {
   navbtn.classList.toggle('expanded');
 });
 
+window.addEventListener('scroll', () => {
+  if (window.scrollY > 100) {
+    topshrtct.classList.add('visible');
+  } else {
+    topshrtct.classList.remove('visible');
+  }
+});
+
+topshrtct.addEventListener('click', () => {
+  if (window.scrollY > 100) {
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  }
+});
+
+async function updateAge() {
+  setInterval(() => {
+    const birthdate = new Date('2002-02-12T07:35:00Z');
+    let age = Date.now() - birthdate.getTime();
+    age = age / 31556952000;
+
+    age = age.toFixed(9);
+
+    const ageElement = document.getElementById('age');
+    ageElement.textContent = age;
+
+    console.log('Hello, world!');
+  }, 50);
+}
+
+updateAge();
\ No newline at end of file
diff --git a/styles/global.css b/styles/global.css
index a393eed..302598f 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -1,4 +1,5 @@
 @import url('https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;500;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400&display=swap');
 
 body {
     background-color: #111;
@@ -13,6 +14,26 @@ body {
     overflow-y: scroll;
 }
 
+#top-shrtct {
+    position: fixed;
+    bottom: 30px;
+    right: 30px;
+    height: 50px;
+    width: 50px;
+    padding: 20px;
+    background-color: #0008;
+    border-radius: 50%;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    z-index: 10;
+}
+
+#top-shrtct.visible {
+    opacity: 1;
+    cursor: pointer;
+    backdrop-filter: blur(6px);
+}
+
 #nav-btn {
     display: none;
 }
@@ -264,6 +285,8 @@ em {
     height: fit-content;
     margin: auto;
     position: relative;
+    font-family: "Barlow", sans-serif;
+    font-size: 18px;
 }
 
 #aboutme h1 {
@@ -280,6 +303,10 @@ em {
     z-index: 2;
 }
 
+#age {
+    font-family: "Fira Mono", monospace;
+}
+
 @media screen and (max-width: 1100px) {
 
     #logo {
