From 58b5c15fe96fbe809a96693f4b288ca28e9ec119 Mon Sep 17 00:00:00 2001
From: Jack Merrill <8814123+jackmerrill@users.noreply.github.com>
Date: Mon, 4 Oct 2021 22:13:53 +0000
Subject: [PATCH] i dont know what i added

---
 .breakpoints              | 24 ++++++++++++------------
 components/Footer.tsx     |  2 +-
 components/Navbar.tsx     | 26 ++++++++++++++++----------
 components/Projects.tsx   |  2 +-
 components/Skills.tsx     |  2 +-
 pages/_app.tsx            |  5 ++---
 pages/index.tsx           | 10 +++++-----
 tailwind.config.js        |  7 +++++--
 util/hooks/useOnScreen.ts |  4 ++--
 9 files changed, 45 insertions(+), 37 deletions(-)

diff --git a/.breakpoints b/.breakpoints
index e0035a6..5602e5d 100644
--- a/.breakpoints
+++ b/.breakpoints
@@ -4,48 +4,48 @@
       {
         "id": "5aa0d634-c476-4ab2-9957-d364b66311b2",
         "line": 4,
-        "version": 1395,
+        "version": 1719,
         "index": 217
       },
       {
         "id": "01e112b0-3705-4b70-bf88-5b2716dd492d",
-        "line": 80,
-        "version": 1395,
-        "index": 3234
+        "line": 86,
+        "version": 1719,
+        "index": 3326
       }
     ],
     "components/Projects.tsx": [
       {
         "id": "f1084f0b-cb32-4b05-b4a3-02d058b717b2",
         "line": 15,
-        "version": 704,
+        "version": 1242,
         "index": 512
       },
       {
         "id": "57d95fae-f14a-4006-9f32-bbe9021aa156",
         "line": 90,
-        "version": 1182,
-        "index": 3397
+        "version": 1242,
+        "index": 3381
       },
       {
         "id": "d35f19ba-4d8c-488b-8a38-a26540595f2d",
         "line": 91,
-        "version": 1191,
-        "index": 3410
+        "version": 1242,
+        "index": 3396
       }
     ],
     "pages/index.tsx": [
       {
         "id": "d3363946-0aa7-43f5-b2ee-bc23387ea7a5",
         "line": 14,
-        "version": 1075,
+        "version": 1196,
         "index": 609
       },
       {
         "id": "91f8cc38-eb3c-426c-ba37-749bb88281ac",
         "line": 90,
-        "version": 1075,
-        "index": 3777
+        "version": 1196,
+        "index": 3779
       }
     ]
   }
diff --git a/components/Footer.tsx b/components/Footer.tsx
index 0a7da63..38650de 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -3,7 +3,7 @@ import NextJSIcon from "./Images/NextJSIcon";
 import TailwindIcon from "./Images/TailwindIcon";
 
 const Footer = () => (
-    <footer className='flex flex-wrap justify-center text-center w-full bg-gray-900 p-8'>
+    <footer className='flex flex-wrap justify-center border-t-2 border-white text-center w-full bg-black p-8'>
         <p className='flex w-full items-center justify-center text-white font-bold text-lg space-x-1'>
             Made with
             <HeartIcon className='text-red-500 md:h-6 md:w-6 h-12 w-12 ml-1' />
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index 8e5635a..68fef5e 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -20,6 +20,16 @@ function classNames(...classes: any[]) {
 const Navbar = ({ views }: { views: { view: string, viewing: boolean }[] }) => {
     const [atTop, setAtTop] = useState<boolean>()
 
+    function updateCurrent() {
+      const currentlyViewing = views.find((view) => view.viewing === true)
+      navigation.forEach((nav) => nav.current = false)
+      if (currentlyViewing) {
+        const nav = navigation.find((nav) => nav.name === currentlyViewing.view)
+        if (!nav) return
+        nav.current = true
+      }
+    }
+
     useEffect(() => {
         if (window.scrollY === 0) {
             setAtTop(true)
@@ -33,16 +43,12 @@ const Navbar = ({ views }: { views: { view: string, viewing: boolean }[] }) => {
                 setAtTop(false)
             }
 
-            const currentlyViewing = views.find((view) => view.viewing === true)
-            navigation.forEach((nav) => nav.current = false)
-            if (currentlyViewing) {
-              navigation.find((nav) => nav.name === currentlyViewing.view).current = true
-            }
+            updateCurrent()
         })
     })
 
   return (
-    <Disclosure as="nav" className={`fixed w-full z-50 bg-gray-800 ${atTop ? '' : 'shadow-lg'}`}>
+    <Disclosure as="nav" className={`fixed w-full z-50 bg-black border-b-2 border-white ${atTop ? '' : 'shadow-lg'}`}>
       {({ open }) => (
         <>
           <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
@@ -59,13 +65,13 @@ const Navbar = ({ views }: { views: { view: string, viewing: boolean }[] }) => {
                         href={item.href}
                         id={item.name + item.href}
                         onClick={(e) => {
-                          document.getElementById(item.name + item.href).dispatchEvent(new CustomEvent('scroll'));
+                          updateCurrent()
                         }}
                         className={classNames(
                           item.current
-                            ? 'bg-gray-900 text-white'
-                            : 'text-gray-300 hover:bg-gray-700 hover:text-white',
-                          'px-3 py-2 rounded-md text-sm font-medium'
+                            ? 'border-2 border-white text-white'
+                            : 'text-gray-300 hover:border-gray-300 hover:border-2 hover:text-white',
+                          'px-3 py-2 rounded-md text-sm font-medium transition-border duration-75'
                         )}
                         aria-current={item.current ? 'page' : undefined}
                       >
diff --git a/components/Projects.tsx b/components/Projects.tsx
index 1abd4f3..4b22ca5 100644
--- a/components/Projects.tsx
+++ b/components/Projects.tsx
@@ -23,7 +23,7 @@ const projects = [
   {
     title: 'SCP Mobile',
     href: 'https://github.com/jackmerrill/SCP-Mobile',
-    category: { name: 'Project', color: 'bg-purple-100 text-purple-800' },
+    category: { name: 'CodeDay', color: 'bg-red-100 text-red-800' },
     description:
       'Mobile (iOS) app for the SCP Wiki. Made in 24 hours at CodeDay.',
   },
diff --git a/components/Skills.tsx b/components/Skills.tsx
index 1c6e843..332be89 100644
--- a/components/Skills.tsx
+++ b/components/Skills.tsx
@@ -32,7 +32,7 @@ export default function Skills() {
   }
 
   return (
-    <div className="bg-gray-900" id="about" >
+    <div className="bg-black" id="about" >
       {/* Header */}
       <div className="relative pb-32">
         <div className="absolute inset-0">
diff --git a/pages/_app.tsx b/pages/_app.tsx
index f95475a..cd17339 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -26,13 +26,12 @@ function MyApp({ Component, pageProps }: AppProps) {
 
   return <>
     <div id='app'>
-      <main className="bg-gray-800 w-full h-full min-h-screen">
-        <div id='loader' className={`flex justify-center items-center align-middle fixed dark:bg-gray-800 ${loading ? 'h-screen w-screen z-50 opacity-100' : 'z-10 opacity-0'} transform transition-all duration-300`} />
+      <main className="bg-black w-full h-full min-h-screen">
         <DefaultSeo {...SEO}/>
         <Component {...pageProps} />
         <Footer />
       </main>
-      <style jsx>{`
+      <style jsx global>{`
         html, body {
           scroll-behavior: smooth;
         }
diff --git a/pages/index.tsx b/pages/index.tsx
index b276fdc..1b1a846 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -64,20 +64,20 @@ const IndexPage = () => {
       ]} />
       <header className="flex flex-wrap flex-col overflow-hidden space-y-2 lg:px-36 items-center justify-center h-screen w-full" ref={homeRef}>
         <div className="my-3 px-3 w-full text-center">
-          <h1 className="text-white font-extrabold md:text-6xl text-3xl">Good <span className="text-blue-500">{timeString}</span>! I&apos;m <span className="text-purple-500">Jack Merrill</span>.</h1>
+          <h1 className="text-white font-extrabold md:text-6xl text-3xl">Good <span>{timeString}</span>! I&apos;m <span>Jack Merrill</span>.</h1>
         </div>
         <div className="my-3 px-3 w-full text-center">
           <h2 className="text-white font-bold md:text-4xl text-2xl">A {calculateAge()} year old Graphic and UI Designer and Fullstack Developer from the Windy City.</h2>
         </div>
         <div className="inline-flex flex-wrap md:space-y-0 space-y-4 pt-4 items-center justify-center content-center md:space-x-4 my-3 px-3 w-full text-center">
           <Link href="#projects">
-            <a className="bg-gradient-to-r from-green-400 to-blue-500 px-4 py-2 rounded-xl font-bold text-white md:w-1/6 w-full">
+            <a className="border-white border hover:bg-white hover:text-black transition duration-150 px-4 py-2 rounded-xl font-bold text-white md:w-1/6 w-full truncate">
               See my Work
             </a>
           </Link>
-          <span className="text-sm font-light text-gray-400 md:block hidden">or</span>
+          <span className="text-sm font-light text-white md:block hidden">or</span>
           <Link href="mailto:me@jackmerrill.com">
-            <a className="bg-gradient-to-r from-green-400 to-blue-500 px-4 py-2 rounded-xl font-bold text-white md:w-1/6 w-full">
+            <a className="border-white border hover:bg-white hover:text-black transition duration-150 px-4 py-2 rounded-xl font-bold text-white md:w-1/6 w-full">
               Contact Me
             </a>
           </Link>
@@ -86,7 +86,7 @@ const IndexPage = () => {
       <div ref={aboutRef} id="about">
         <Skills />
       </div>
-      <div id='projects' ref={projectsRef} id="projects">
+      <div id='projects' ref={projectsRef}>
         <Projects />
       </div>
       
diff --git a/tailwind.config.js b/tailwind.config.js
index 12d6006..fcf8b36 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -16,12 +16,15 @@ module.exports = {
         'twitter': '#1DA1F2',
       },
       transitionProperty: {
-        'fadeDown': 'height opacity'
+        'fadeDown': 'height opacity',
+        'border': 'border-width border-color'
       }
     },
   },
   variants: {
-
+    extend: {
+      borderWidth: ['hover']
+    }
   },
   plugins: [
     require('tailwindcss-filters'),
diff --git a/util/hooks/useOnScreen.ts b/util/hooks/useOnScreen.ts
index 9381c15..39ee914 100644
--- a/util/hooks/useOnScreen.ts
+++ b/util/hooks/useOnScreen.ts
@@ -1,8 +1,8 @@
 import { useState, useEffect } from 'react';
 
-export default function useOnScreen(ref) {
+export default function useOnScreen(ref: any) {
 
-  let observer = null
+  let observer: any = null
 
   const [isIntersecting, setIntersecting] = useState(false)