start revision
This commit is contained in:
Jack Merrill
parent
ea98b243c4
commit
768a16c170
18
.breakpoints
Normal file
18
.breakpoints
Normal file
|
|
@ -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
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -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" />
|
||||
|
|
|
|||
|
|
@ -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<boolean>()
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -23,46 +32,78 @@ 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 (
|
||||
<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'}`}>
|
||||
<div className="container px-4 mx-auto flex flex-wrap items-center justify-between">
|
||||
<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">
|
||||
<Link href="/" aria-label="Stryx Logo">
|
||||
<h1 className="text-white font-extrabold text-2xl">Jack Merrill</h1>
|
||||
</Link>
|
||||
<Disclosure as="nav" className={`fixed w-full z-50 bg-gray-800 ${atTop ? '' : 'shadow-lg'}`}>
|
||||
{({ open }) => (
|
||||
<>
|
||||
<p>{views}</p>
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex items-center justify-between h-16">
|
||||
<div className="flex items-center">
|
||||
<div className="flex-shrink-0">
|
||||
<Logo className="h-8 w-8" />
|
||||
</div>
|
||||
<button className="md:hidden text-gray-500 w-10 h-10 relative focus:outline-none" onClick={() => setCollapsed(!collapsed)}>
|
||||
<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>
|
||||
<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">
|
||||
<ul className="flex list-none ml-auto items-center">
|
||||
{links.map(({ label, href }) => (
|
||||
<li className="nav-item">
|
||||
<div className="px-3 py-2 flex items-center leading-snug text-white">
|
||||
<Link href={href} passHref>
|
||||
<div className="hidden md:block">
|
||||
<div className="ml-10 flex items-baseline space-x-4">
|
||||
{navigation.map((item) => (
|
||||
<a
|
||||
className="font-bold text-gray-200 hover:underline"
|
||||
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',
|
||||
'px-3 py-2 rounded-md text-sm font-medium'
|
||||
)}
|
||||
aria-current={item.current ? 'page' : undefined}
|
||||
>
|
||||
{label}
|
||||
{item.name}
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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 />
|
||||
|
|
|
|||
|
|
@ -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'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'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'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
|
||||
|
|
|
|||
20
util/hooks/useOnScreen.ts
Normal file
20
util/hooks/useOnScreen.ts
Normal file
|
|
@ -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
|
||||
}
|
||||
10
yarn.lock
10
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"
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user