Add years, change to good functions

.gitignore

@@ -2,6 +2,7 @@
 # Created by https://www.toptal.com/developers/gitignore/api/react,webstorm
 # Edit at https://www.toptal.com/developers/gitignore?templates=react,webstorm
 build
+.eslintcache
 
 ### react ###
 .DS_*

src/components/AboutMe.tsx

@@ -4,33 +4,11 @@ import { Tooltip } from "antd";
 import { useState, useEffect } from "react";
 import axios from "axios";
 
-const TelegramOutlinedSvg = () => {
+function LastFmLi() {
-  return (
-    <svg
-      width="24px"
-      height="24px"
-      version="1.1"
-      xmlns="http://www.w3.org/2000/svg"
-      style={{
-        fillRule: "evenodd",
-        clipRule: "evenodd",
-        strokeLinejoin: "round",
-        strokeMiterlimit: 1.41421,
-      }}
-    >
-      <path
-        id="telegram-1"
-        d="M18.384,22.779c0.322,0.228 0.737,0.285 1.107,0.145c0.37,-0.141 0.642,-0.457 0.724,-0.84c0.869,-4.084 2.977,-14.421 3.768,-18.136c0.06,-0.28 -0.04,-0.571 -0.26,-0.758c-0.22,-0.187 -0.525,-0.241 -0.797,-0.14c-4.193,1.552 -17.106,6.397 -22.384,8.35c-0.335,0.124 -0.553,0.446 -0.542,0.799c0.012,0.354 0.25,0.661 0.593,0.764c2.367,0.708 5.474,1.693 5.474,1.693c0,0 1.452,4.385 2.209,6.615c0.095,0.28 0.314,0.5 0.603,0.576c0.288,0.075 0.596,-0.004 0.811,-0.207c1.216,-1.148 3.096,-2.923 3.096,-2.923c0,0 3.572,2.619 5.598,4.062Zm-11.01,-8.677l1.679,5.538l0.373,-3.507c0,0 6.487,-5.851 10.185,-9.186c0.108,-0.098 0.123,-0.262 0.033,-0.377c-0.089,-0.115 -0.253,-0.142 -0.376,-0.064c-4.286,2.737 -11.894,7.596 -11.894,7.596Z"
-      />
-    </svg>
-  );
-};
-
-const LastFmLi = () => {
   const [nowPlayingSong, setNowPlayingSong] = useState<string>("nothing");
   const [nowPlayingArtist, setNowPlayingArtist] = useState<string>("no-one");
 
-  const updateNowPlaying = async () => {
+  async function updateNowPlaying() {
     try {
       const songData = await axios.get(
         "https://jsonplaceholder.typicode.com/posts"
@@ -40,7 +18,7 @@ const LastFmLi = () => {
     } catch (err) {
       console.error(err);
     }
-  };
+  }
 
   useEffect(() => {
     updateNowPlaying();
@@ -54,19 +32,82 @@ const LastFmLi = () => {
   return <li>listening to ____ by ____</li>;
 };
 
-const Age = () => {
+function Age() {
-  const [age, setAge] = useState(
+  // Accounts for leap years and stuff
-    Math.round((new Date().getTime() - 1021004428000) / 1000)
+  function milliseconds_year() {
+    const dateObj = new Date();
+    const dateInit = Math.round(
+      new Date(dateObj.getFullYear(), 0, 1).getTime()
+    );
+    const dateEnd = Math.round(
+      new Date(dateObj.getFullYear(), 11, 31, 23, 59, 59, 999).getTime()
     );
+    return dateEnd - dateInit;
+  }
 
-  const UpdateAge = () => {
+  function searchSternBorcotTree(
-    setAge(Math.round((new Date().getTime() - 1021004428000) / 1000));
+    target: number,
-  };
+    left_n: number,
+    left_d: number,
+    right_n: number,
+    right_d: number,
+    count: number = 0
+  ): [number, number] {
+    count++;
+    const center_n: number = left_n + right_n;
+    const center_d: number = left_d + right_d;
+    // Check to see if we've gone too deep
+    if (count > 25) return [center_n, center_d];
+    // Check to see if we're close enough to the target
+    if (Math.abs(target - (center_n / center_d)) > 0.001) {
+      // Look right down the tree
+      if (target > (center_n / center_d))
+        return searchSternBorcotTree(
+          target,
+          center_n,
+          center_d,
+          right_n,
+          right_d,
+          count
+        );
+      // Ok now look left
+      return searchSternBorcotTree(
+        target,
+        left_n,
+        left_d,
+        center_n,
+        center_d,
+        count
+      );
+    }
+    return [center_n, center_d];
+  }
+
+  function CalcAge() {
+    let ageMs = new Date().getTime() - 1021004428000;
+    const yearMs = milliseconds_year();
+    const ageYearsComponent = Math.floor(ageMs / yearMs);
+    const ageSecondsComponent = Math.floor((ageMs % yearMs) / 1000);
+    const [target_n, target_d] = searchSternBorcotTree(
+      ageSecondsComponent / (yearMs / 1000),
+      0,
+      1,
+      1,
+      1
+    );
+    return `${ageYearsComponent} and ${target_n}/${target_d}`;
+  }
+
+  const [age, setAge] = useState(CalcAge());
+
+  function UpdateAge() {
+    setAge(CalcAge());
+  }
 
   useEffect(() => {
     UpdateAge();
 
-    const interval = setInterval(UpdateAge, 1000);
+    const interval = setInterval(UpdateAge, 5000);
 
     return () => {
       clearInterval(interval);
@@ -75,16 +116,16 @@ const Age = () => {
 
   return (
     <li>
-      <span style={{ fontFamily: "Fira Code" }}>{age}</span> seconds old{" "}
+      {age} years old
     </li>
   );
 };
 
-export const AboutMe = () => {
+export function AboutMe() {
-  const EmailHandler = () => {
+  function EmailHandler() {
     const email = "Y29udGFjdEBqYWtlY292ZXIubWU=";
     window.prompt("Thanks for being a human! Here's my email:", atob(email));
-  };
+  }
 
   return (
     <div id={"about-me-parent"}>
@@ -164,14 +205,23 @@ export const AboutMe = () => {
             <h2>I'm:</h2>
             <ul>
               <Age />
+              <Tooltip
+                title={
+                  "Hey! This part is still a work in progress, check back in a bit to see if it's working!"
+                }
+              >
                 <LastFmLi />
                 <li>
                   doing (general stuff - in class, projects, sleeping, games)
                 </li>
+              </Tooltip>
+              <li>
+                rather colorblind
+              </li>
             </ul>
           </div>
         </div>
       </div>
     </div>
   );
-};
+}

src/components/Footer.tsx

@@ -2,7 +2,7 @@ import "./Footer.scss"
 import { Link } from "react-router-dom";
 
 
-export const Footer = () => {
+export function Footer() {
   return (
     <footer className="site-footer">
       <div className="footer-grid">

src/components/Header.tsx

@@ -4,7 +4,7 @@ import { Button, Space } from "antd";
 import { Link } from "react-router-dom";
 import { MenuOutlined } from "@ant-design/icons";
 
-export const Header = () => {
+export function Header() {
   function showHideHamburger() {
     var x = document.getElementById("myHeader");
     // @ts-ignore
@@ -52,4 +52,4 @@ export const Header = () => {
       </Space>
     </header>
   );
-};
+}

src/components/Home.tsx

@@ -2,11 +2,11 @@ import "./Home.scss";
 import { ProjectGrid } from "./ProjectGrid";
 import { AboutMe } from "./AboutMe";
 
-export const Home = () => {
+export function Home() {
   return (
     <div id={"home"}>
       <AboutMe />
       <ProjectGrid />
     </div>
   );
-};
+}

src/components/Main.tsx

@@ -3,7 +3,7 @@ import { Contact } from "./Contact";
 import { Home } from "./Home";
 import { Resume } from "./Resume";
 
-export const Main = () => {
+export function Main() {
   return (
     <main>
       <Switch>
@@ -13,4 +13,4 @@ export const Main = () => {
       </Switch>
     </main>
   );
-};
+}

src/components/ProjectGrid.tsx

@@ -20,7 +20,6 @@ import Distest from "../images/distest.svg";
 import Scoresaver from "../images/scoresaver.svg";
 import Hashicorp from "../images/HashiCorp_Logo_no_text.png";
 
-
 type GridElementImageProps = {
   image_url: string;
   image_alt: string;
@@ -37,7 +36,7 @@ type GridElementProps = {
   org?: string;
 };
 
-const OneWide = ({ title, text, link, org }: GridElementProps) => {
+function OneWide({ title, text, link, org }: GridElementProps) {
   if (link === undefined) {
     return (
       <div className={"OneWide GridElement"}>
@@ -69,14 +68,7 @@ const OneWide = ({ title, text, link, org }: GridElementProps) => {
   );
 };
 
-const OneWidePic = ({
+function OneWidePic({ image_url, image_alt, title, text, link, org }: GridElementImageProps) {
-  image_url,
-  image_alt,
-  title,
-  text,
-  link,
-  org,
-}: GridElementImageProps) => {
   if (link === undefined) {
     return (
       <div className={"OneWide Pic GridElement"}>
@@ -95,7 +87,12 @@ const OneWidePic = ({
     );
   }
   return (
-    <a className={"OneWide Pic GridElement Link"} href={link} target={"_blank"} rel={"noreferrer"}>
+    <a
+      className={"OneWide Pic GridElement Link"}
+      href={link}
+      target={"_blank"}
+      rel={"noreferrer"}
+    >
       <div className={"GridElementInternal"}>
         <div className={"image"}>
           <img src={image_url} alt={image_alt} />
@@ -109,16 +106,9 @@ const OneWidePic = ({
       </div>
     </a>
   );
-};
+}
 
-const FourByOneGridElement = ({
+function FourByOneGridElement({ image_url, image_alt, title, text, link, org }: GridElementImageProps) {
-  image_url,
-  image_alt,
-  title,
-  text,
-  link,
-  org,
-}: GridElementImageProps) => {
   if (link === undefined) {
     return (
       <div className={"FourByOne GridElement"}>
@@ -136,7 +126,12 @@ const FourByOneGridElement = ({
     );
   }
   return (
-    <a className={"FourByOne GridElement Link"} href={link} target={"_blank"} rel={"noreferrer"}>
+    <a
+      className={"FourByOne GridElement Link"}
+      href={link}
+      target={"_blank"}
+      rel={"noreferrer"}
+    >
       <div className={"GridElementInternal"}>
         <div className={"image"}>
           <img src={image_url} alt={image_alt} />
@@ -150,9 +145,9 @@ const FourByOneGridElement = ({
       </div>
     </a>
   );
-};
+}
 
-export const ProjectGrid = () => {
+export function ProjectGrid() {
   useEffect(() => {
     var elem = document.querySelector("#project-grid");
 
@@ -165,8 +160,8 @@ export const ProjectGrid = () => {
       });
 
       ImagesLoaded(elem).on("progress", () => {
-        msnry.layout?.();
+        setTimeout(() => msnry.layout?.(), 200);
-      })
+      });
     }
   });
 
@@ -176,16 +171,18 @@ export const ProjectGrid = () => {
         <div id={"project-header"}>
           <h2>&lt;/&gt; My Projects</h2>
           <p>
-            A gallery of some of my most interesting projects. Look for <LinkOutlined />, click those projects for more information!
+            A gallery of some of my most interesting projects. Look for{" "}
+            <LinkOutlined />, click those projects for more information!
           </p>
         </div>
         <div id={"project-grid"}>
-
           <div className={"GridSizer"} />
           <OneWide
             title={"ElaticMatch"}
             org={"CodeDay"}
-              text={"A set of tools, including a custom suggestion and weighting system, as well as a custom matching algorithm that I wrote and used to match around 350 students to the best-fitting mentors in the CodeDay Labs summer internship program in 2020."}
+            text={
+              "A set of tools, including a custom suggestion and weighting system, as well as a custom matching algorithm that I wrote and used to match around 350 students to the best-fitting mentors in the CodeDay Labs summer internship program in 2020."
+            }
             link={"https://github.com/codeday/labs-elastic-match"}
           />
           <OneWide
@@ -202,7 +199,9 @@ export const ProjectGrid = () => {
             text={
               "An extension for the alternate discord client BetterDiscord that changes the functionality of copying emoji to copy the actual emoji characters rather than their names from the discord client."
             }
-              link={"https://github.com/JakeCover/BetterDiscordExtensions/tree/main/plugins/CopyMoji"}
+            link={
+              "https://github.com/JakeCover/BetterDiscordExtensions/tree/main/plugins/CopyMoji"
+            }
           />
           <OneWidePic
             image_url={CodeDaySD}
@@ -269,4 +268,4 @@ export const ProjectGrid = () => {
       </div>
     </div>
   );
-};
+}

src/components/Resume.tsx

@@ -1,7 +1,7 @@
-export const Resume = () => {
+export function Resume() {
   return (
     <div>
       <h1 style={{ margin: "auto" }}>Resume</h1>
     </div>
-)
+  );
 }