start revision

.breakpoints

@@ -0,0 +1,18 @@
+{
+  "files": {
+    "components/Navbar.tsx": [
+      {
+        "id": "5aa0d634-c476-4ab2-9957-d364b66311b2",
+        "line": 2,
+        "version": 15,
+        "index": 39
+      },
+      {
+        "id": "01e112b0-3705-4b70-bf88-5b2716dd492d",
+        "line": 64,
+        "version": 35,
+        "index": 2597
+      }
+    ]
+  }
+}

.replit

@@ -0,0 +1,2 @@
+language = "nodejs"
+run = "yarn dev"

components/Images/Logo.tsx

@@ -1,4 +1,4 @@
-const Logo = () => (
+const Logo = (props) => (
     <svg
         width="100%"
         height="100%"
@@ -11,6 +11,7 @@ const Logo = () => (
         clipRule='evenodd'
         strokeLinejoin='round'
         strokeMiterlimit='2'
+        {...props}
     >
         <g transform="matrix(1.87667,0,0,1.87667,-211.69,-370.379)">
             <path d="M330.006,585.343L506.715,408.388C513.207,401.887 513.2,391.339 506.699,384.847C500.198,378.355 489.65,378.363 483.158,384.863L306.448,561.819C299.956,568.32 299.964,578.868 306.465,585.36C312.965,591.852 323.514,591.844 330.006,585.343Z" fill="white" />

components/Navbar.tsx

@@ -1,14 +1,23 @@
 import Link from "next/link";
-import { useEffect, useState } from "react";
+import { Fragment, useState, useEffect } from 'react'
+import { Disclosure, Menu, Transition } from '@headlessui/react'
+import { BellIcon, MenuIcon, XIcon } from '@heroicons/react/outline'
 
-const Navbar = ({ links }: {
+import Logo from '../components/Images/Logo';
-    links: {
-        label: string;
-        href: string;
-    }[]
-}) => {
-    const [collapsed, setCollapsed] = useState(false);
 
+const navigation = [
+  { name: 'Home', href: '#', current: true },
+  { name: 'About', href: '#', current: false },
+  { name: 'Projects', href: '#', current: false },
+  { name: 'Graphics', href: '#', current: false },
+  { name: 'Contact', href: '#', current: false },
+];
+
+function classNames(...classes) {
+  return classes.filter(Boolean).join(' ')
+}
+
+const Navbar = ({ views }: { views: { view: string, viewing: boolean }[] }) => {
     const [atTop, setAtTop] = useState<boolean>()
 
     useEffect(() => {
@@ -23,47 +32,79 @@ const Navbar = ({ links }: {
             } else {
                 setAtTop(false)
             }
+
+            const currentlyViewing = views.find((view) => view.viewing === true)
+            navigation.forEach((nav) => nav.current = false)
+            navigation.find((nav) => nav.name === currentlyViewing.view).current = true
         })
     })
 
-    return (
+  return (
-      <nav className={`fixed w-full flex flex-wrap items-center justify-between px-2 py-6 navbar-expand-lg z-30 bg-gray-800 ${atTop ? '' : 'shadow-md'}`}>
+    <Disclosure as="nav" className={`fixed w-full z-50 bg-gray-800 ${atTop ? '' : 'shadow-lg'}`}>
-        <div className="container px-4 mx-auto flex flex-wrap items-center justify-between">
+      {({ open }) => (
-          <div className="w-full relative flex justify-between md:w-auto px-4 md:static md:block md:justify-start items-center">
+        <>
-            <div className="text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap text-white">
+        <p>{views}</p>
-              <Link href="/" aria-label="Stryx Logo">
+          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-                <h1 className="text-white font-extrabold text-2xl">Jack Merrill</h1>
+            <div className="flex items-center justify-between h-16">
-              </Link>
+              <div className="flex items-center">
-            </div>
+                <div className="flex-shrink-0">
-            <button className="md:hidden text-gray-500 w-10 h-10 relative focus:outline-none" onClick={() => setCollapsed(!collapsed)}>
+                  <Logo className="h-8 w-8" />
-                <span className="sr-only">Open menu</span>
-                <div className="block w-5 absolute left-1/2 top-1/2   transform  -translate-x-1/2 -translate-y-1/2">
-                    <span aria-hidden="true" className={`block absolute h-0.5 w-5 bg-current transform transition duration-500 ease-in-out ${ !collapsed ? 'rotate-45' : '-translate-y-1.5' }`} />
-                    <span aria-hidden="true" className={`block absolute h-0.5 w-5 bg-current transform transition duration-500 ease-in-out ${ !collapsed && 'opacity-0'}`} ></span>
-                    <span aria-hidden="true" className={`block absolute h-0.5 w-5 bg-current transform transition duration-500 ease-in-out  ${ !collapsed ? '-rotate-45' : 'translate-y-1.5' }`} ></span>
                 </div>
-            </button>
+                <div className="hidden md:block">
-          </div>
+                  <div className="ml-10 flex items-baseline space-x-4">
-          <div className={`md:flex flex-grow items-center md:opacity-1 transition-fadeDown transform ease-in-out ${collapsed ? '-translate-y-1 h-0 opacity-0' : 'translate-y-1 opacity-1 h-10'}`} id="navbar">
+                    {navigation.map((item) => (
-            <ul className="flex list-none ml-auto items-center">
+                      <a
-              {links.map(({ label, href }) => (
+                        key={item.name}
-                <li className="nav-item">
+                        href={item.href}
-                  <div className="px-3 py-2 flex items-center leading-snug text-white">
+                        className={classNames(
-                    <Link href={href} passHref>
+                          item.current
-                        <a
+                            ? 'bg-gray-900 text-white'
-                            className="font-bold text-gray-200 hover:underline"
+                            : 'text-gray-300 hover:bg-gray-700 hover:text-white',
-                        >
+                          'px-3 py-2 rounded-md text-sm font-medium'
-                            {label}
+                        )}
-                        </a>
+                        aria-current={item.current ? 'page' : undefined}
-                    </Link>
+                      >
+                        {item.name}
+                      </a>
+                    ))}
                   </div>
-                </li>
+                </div>
-              ))}
+              </div>
-            </ul>
+              <div className="-mr-2 flex md:hidden">
+                {/* Mobile menu button */}
+                <Disclosure.Button className="bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
+                  <span className="sr-only">Open main menu</span>
+                  {open ? (
+                    <XIcon className="block h-6 w-6" aria-hidden="true" />
+                  ) : (
+                    <MenuIcon className="block h-6 w-6" aria-hidden="true" />
+                  )}
+                </Disclosure.Button>
+              </div>
+            </div>
           </div>
-        </div>
+
-      </nav>
+          <Disclosure.Panel className="md:hidden">
-    )  
+            <div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
+              {navigation.map((item) => (
+                <a
+                  key={item.name}
+                  href={item.href}
+                  className={classNames(
+                    item.current ? 'bg-gray-900 text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white',
+                    'block px-3 py-2 rounded-md text-base font-medium'
+                  )}
+                  aria-current={item.current ? 'page' : undefined}
+                >
+                  {item.name}
+                </a>
+              ))}
+            </div>
+          </Disclosure.Panel>
+        </>
+      )}
+    </Disclosure>
+  )  
 }
 
 export default Navbar;

package.json

@@ -8,6 +8,8 @@
     "type-check": "tsc"
   },
   "dependencies": {
+    "@headlessui/react": "^1.4.1",
+    "@heroicons/react": "^1.0.4",
     "framer-motion": "^4.1.2",
     "next": "^10.1.3",
     "next-page-transitions": "^1.0.0-beta.2",

pages/_app.tsx

@@ -4,7 +4,6 @@ import SEO from '../next-seo.config';
 import { DefaultSeo } from 'next-seo';
 import 'tailwindcss/tailwind.css'
 import { useRouter } from 'next/dist/client/router';
-import Navbar from '../components/Navbar';
 import Footer from '../components/Footer';
 
 function MyApp({ Component, pageProps }: AppProps) {
@@ -29,11 +28,6 @@ function MyApp({ Component, pageProps }: AppProps) {
     <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`} />
-        <Navbar links={[
-          { label: 'Home', href: '/' },
-          { label: 'My Work', href: '#projects' },
-          { label: 'Designs', href: '#designs' },
-        ]} />
         <DefaultSeo {...SEO}/>
         <Component {...pageProps} />
         <Footer />

pages/index.tsx

@@ -1,6 +1,6 @@
 import Link from 'next/link'
 import Image from 'next/image';
-import { useEffect, useState } from 'react'
+import { useEffect, useState, useRef } from 'react'
 import CodeIcon from '../components/Images/CodeIcon'
 import DesignIcon from '../components/Images/DesignIcon'
 import GitHubIcon from '../components/Images/GitHubIcon';
@@ -8,11 +8,26 @@ import MailIcon from '../components/Images/MailIcon';
 import TwitterIcon from '../components/Images/TwitterIcon';
 import Head from 'next/head';
 
+import Navbar from '../components/Navbar';
+import useOnScreen from '../util/hooks/useOnScreen';
+
 const IndexPage = () => {
   const [timeString, setTimeString] = useState(
     (new Date().getHours() < 12 ? 'Morning' : (new Date().getHours() >= 12 && new Date().getHours() <= 17 ? 'Afternoon' : (new Date().getHours() >= 17 && new Date().getHours() <= 24 ? 'Evening' : 'Morning')))
   )
 
+  const homeRef = useRef(null);
+  const aboutRef = useRef(null);
+  const graphicsRef = useRef(null);
+  const projectsRef = useRef(null);
+  const contactRef = useRef(null);
+
+  const viewingHome = useOnScreen(homeRef)
+  const viewingAbout = useOnScreen(aboutRef)
+  const viewingGraphics = useOnScreen(graphicsRef)
+  const viewingProjects = useOnScreen(projectsRef)
+  const viewingContact = useOnScreen(contactRef)
+
   useEffect(() => {
     const hours = new Date().getHours()
 
@@ -33,12 +48,21 @@ const IndexPage = () => {
     return Math.abs(ageDate.getUTCFullYear() - 1970);
   }
 
+
+
   return (
     <>
       <Head>
         <meta name='description' content='Graphic Designer and Fullstack Developer.' />
       </Head>
-      <header className="flex flex-wrap flex-col overflow-hidden space-y-2 lg:px-36 items-center justify-center h-screen w-full">
+      <Navbar views={[
+        { view: 'Home', viewing: viewingHome },
+        { view: 'About', viewing: viewingAbout },
+        { view: 'Projects', viewing: viewingProjects },
+        { view: 'Graphics', viewing: viewingGraphics },
+        { view: 'Contact', viewing: viewingContact },
+      ]} />
+      <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>
         </div>
@@ -59,7 +83,7 @@ const IndexPage = () => {
           </Link>
         </div>
       </header>
-      <div className='bg-gradient-to-b from-purple-600 to-purple-700 h-full lg:max-h-96'>
+      <div className='bg-gradient-to-b from-purple-600 to-purple-700 h-full lg:max-h-96' ref={aboutRef}>
         <div className='flex flex-wrap py-16 px-4 p lg:p-16 space-y-6'>
           <div className='w-full overflow-hidden'>
             <h1 className='text-white text-4xl font-bold text-center'>Nice to meet you!</h1>
@@ -116,7 +140,7 @@ const IndexPage = () => {
           </div>
         </div>
       </div>
-      <div id='projects' className='flex flex-wrap justify-center px-12 lg:px-64 pt-24 space-y-3'>
+      <div id='projects' className='flex flex-wrap justify-center px-12 lg:px-64 pt-24 space-y-3' ref={projectsRef}>
         <h1 className='w-full font-bold text-white text-center text-3xl'>My recent work</h1>
         <p className='w-full font-semibold text-white text-center text-xl'>Here are a few projects I&apos;ve been working on!</p>
         <div className="flex flex-wrap w-full -mx-1 overflow-hidden justify-center">
@@ -168,7 +192,7 @@ const IndexPage = () => {
         </div>
       </div>
       
-      <div id='designs' className='flex flex-wrap justify-center px-12 lg:px-64 pt-24 space-y-3'>
+      <div id='designs' className='flex flex-wrap justify-center px-12 lg:px-64 pt-24 space-y-3' ref={graphicsRef}>
         <h1 className='w-full font-bold text-white text-center text-3xl'>My Designs</h1>
         <p className='w-full font-semibold text-white text-center text-xl'>Here are a few designs I&apos;ve made!</p>
         <div className="flex flex-wrap w-full -mx-1 overflow-hidden justify-center">
@@ -212,7 +236,7 @@ const IndexPage = () => {
         </div>
       </div>
 
-      <div id='contact' className='flex flex-wrap justify-center p-12 space-y-4'>
+      <div id='contact' className='flex flex-wrap justify-center p-12 space-y-4' ref={contactRef}>
         <h1 className='text-white font-bold text-3xl'>Want to contact me?</h1>
         <div className='flex align-middle justify-center w-full'>
           <a

util/hooks/useOnScreen.ts

@@ -0,0 +1,20 @@
+import { useState, useEffect } from 'react';
+
+export default function useOnScreen(ref) {
+
+  let observer = null
+
+  const [isIntersecting, setIntersecting] = useState(false)
+
+  useEffect(() => {
+    observer = new IntersectionObserver(
+      ([entry]) => setIntersecting(entry.isIntersecting)
+    )
+
+    observer.observe(ref.current)
+    // Remove the observer as soon as the component is unmounted
+    return () => { observer.disconnect() }
+  }, [])
+
+  return isIntersecting
+}

yarn.lock

@@ -97,6 +97,16 @@
   resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-9.1.1.tgz#9daf5745156fd84b8e9889a2dc721f0c58e894aa"
   integrity sha512-CAEbWH7OIur6jEOzaai83jq3FmKmv4PmX1JYfs9IrYcGEVI/lyL1EXJGCj7eFVJ0bg5QR8LMxBlEtA+xKiLpFw==
 
+"@headlessui/react@^1.4.1":
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.4.1.tgz#0a8dbb20e1d63dcea55bfc3ab1b87637aaac7777"
+  integrity sha512-gL6Ns5xQM57cZBzX6IVv6L7nsam8rDEpRhs5fg28SN64ikfmuuMgunc+Rw5C1cMScnvFM+cz32ueVrlSFEVlSg==
+
+"@heroicons/react@^1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@heroicons/react/-/react-1.0.4.tgz#11847eb2ea5510419d7ada9ff150a33af0ad0863"
+  integrity sha512-3kOrTmo8+Z8o6AL0rzN82MOf8J5CuxhRLFhpI8mrn+3OqekA6d5eb1GYO3EYYo1Vn6mYQSMNTzCWbEwUInb0cQ==
+
 "@next/env@10.1.3":
   version "10.1.3"
   resolved "https://registry.yarnpkg.com/@next/env/-/env-10.1.3.tgz#29e5d62919b4a7b1859f8d36169848dc3f5ddebe"