diff --git a/.breakpoints b/.breakpoints new file mode 100644 index 0000000..74e7c48 --- /dev/null +++ b/.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 + } + ] + } +} \ No newline at end of file diff --git a/.replit b/.replit new file mode 100644 index 0000000..0ac7acd --- /dev/null +++ b/.replit @@ -0,0 +1,2 @@ +language = "nodejs" +run = "yarn dev" \ No newline at end of file diff --git a/components/Images/Logo.tsx b/components/Images/Logo.tsx index 03a2e3d..0a7469b 100644 --- a/components/Images/Logo.tsx +++ b/components/Images/Logo.tsx @@ -1,4 +1,4 @@ -const Logo = () => ( +const Logo = (props) => ( ( clipRule='evenodd' strokeLinejoin='round' strokeMiterlimit='2' + {...props} > diff --git a/components/Navbar.tsx b/components/Navbar.tsx index 6febf97..a6d0c12 100644 --- a/components/Navbar.tsx +++ b/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 }: { - links: { - label: string; - href: string; - }[] -}) => { - const [collapsed, setCollapsed] = useState(false); +import Logo from '../components/Images/Logo'; +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() 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 ( -
-
-
- -

Jack Merrill

- -
- -
- +
+
+ {/* Mobile menu button */} + + Open main menu + {open ? ( + +
+ - - - ) + + +
+ {navigation.map((item) => ( + + {item.name} + + ))} +
+ + + )} + + ) } export default Navbar; \ No newline at end of file diff --git a/package.json b/package.json index ced01f6..c1ad390 100644 --- a/package.json +++ b/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", diff --git a/pages/_app.tsx b/pages/_app.tsx index 07d6bf2..add3f4c 100644 --- a/pages/_app.tsx +++ b/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) {
-
diff --git a/pages/index.tsx b/pages/index.tsx index 792c757..5f1ec73 100644 --- a/pages/index.tsx +++ b/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 ( <> -
+ +

Good {timeString}! I'm Jack Merrill.

@@ -59,7 +83,7 @@ const IndexPage = () => {
-
+

Nice to meet you!

@@ -116,7 +140,7 @@ const IndexPage = () => {
-
+

My recent work

Here are a few projects I've been working on!

@@ -168,7 +192,7 @@ const IndexPage = () => {
-