i dont know what i added
This commit is contained in:
parent
d374d19a8a
commit
58b5c15fe9
24
.breakpoints
24
.breakpoints
|
@ -4,48 +4,48 @@
|
||||||
{
|
{
|
||||||
"id": "5aa0d634-c476-4ab2-9957-d364b66311b2",
|
"id": "5aa0d634-c476-4ab2-9957-d364b66311b2",
|
||||||
"line": 4,
|
"line": 4,
|
||||||
"version": 1395,
|
"version": 1719,
|
||||||
"index": 217
|
"index": 217
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": "01e112b0-3705-4b70-bf88-5b2716dd492d",
|
"id": "01e112b0-3705-4b70-bf88-5b2716dd492d",
|
||||||
"line": 80,
|
"line": 86,
|
||||||
"version": 1395,
|
"version": 1719,
|
||||||
"index": 3234
|
"index": 3326
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"components/Projects.tsx": [
|
"components/Projects.tsx": [
|
||||||
{
|
{
|
||||||
"id": "f1084f0b-cb32-4b05-b4a3-02d058b717b2",
|
"id": "f1084f0b-cb32-4b05-b4a3-02d058b717b2",
|
||||||
"line": 15,
|
"line": 15,
|
||||||
"version": 704,
|
"version": 1242,
|
||||||
"index": 512
|
"index": 512
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": "57d95fae-f14a-4006-9f32-bbe9021aa156",
|
"id": "57d95fae-f14a-4006-9f32-bbe9021aa156",
|
||||||
"line": 90,
|
"line": 90,
|
||||||
"version": 1182,
|
"version": 1242,
|
||||||
"index": 3397
|
"index": 3381
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": "d35f19ba-4d8c-488b-8a38-a26540595f2d",
|
"id": "d35f19ba-4d8c-488b-8a38-a26540595f2d",
|
||||||
"line": 91,
|
"line": 91,
|
||||||
"version": 1191,
|
"version": 1242,
|
||||||
"index": 3410
|
"index": 3396
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"pages/index.tsx": [
|
"pages/index.tsx": [
|
||||||
{
|
{
|
||||||
"id": "d3363946-0aa7-43f5-b2ee-bc23387ea7a5",
|
"id": "d3363946-0aa7-43f5-b2ee-bc23387ea7a5",
|
||||||
"line": 14,
|
"line": 14,
|
||||||
"version": 1075,
|
"version": 1196,
|
||||||
"index": 609
|
"index": 609
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": "91f8cc38-eb3c-426c-ba37-749bb88281ac",
|
"id": "91f8cc38-eb3c-426c-ba37-749bb88281ac",
|
||||||
"line": 90,
|
"line": 90,
|
||||||
"version": 1075,
|
"version": 1196,
|
||||||
"index": 3777
|
"index": 3779
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
|
@ -3,7 +3,7 @@ import NextJSIcon from "./Images/NextJSIcon";
|
||||||
import TailwindIcon from "./Images/TailwindIcon";
|
import TailwindIcon from "./Images/TailwindIcon";
|
||||||
|
|
||||||
const Footer = () => (
|
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'>
|
<p className='flex w-full items-center justify-center text-white font-bold text-lg space-x-1'>
|
||||||
Made with
|
Made with
|
||||||
<HeartIcon className='text-red-500 md:h-6 md:w-6 h-12 w-12 ml-1' />
|
<HeartIcon className='text-red-500 md:h-6 md:w-6 h-12 w-12 ml-1' />
|
||||||
|
|
|
@ -20,6 +20,16 @@ function classNames(...classes: any[]) {
|
||||||
const Navbar = ({ views }: { views: { view: string, viewing: boolean }[] }) => {
|
const Navbar = ({ views }: { views: { view: string, viewing: boolean }[] }) => {
|
||||||
const [atTop, setAtTop] = useState<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(() => {
|
useEffect(() => {
|
||||||
if (window.scrollY === 0) {
|
if (window.scrollY === 0) {
|
||||||
setAtTop(true)
|
setAtTop(true)
|
||||||
|
@ -33,16 +43,12 @@ const Navbar = ({ views }: { views: { view: string, viewing: boolean }[] }) => {
|
||||||
setAtTop(false)
|
setAtTop(false)
|
||||||
}
|
}
|
||||||
|
|
||||||
const currentlyViewing = views.find((view) => view.viewing === true)
|
updateCurrent()
|
||||||
navigation.forEach((nav) => nav.current = false)
|
|
||||||
if (currentlyViewing) {
|
|
||||||
navigation.find((nav) => nav.name === currentlyViewing.view).current = true
|
|
||||||
}
|
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
return (
|
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 }) => (
|
{({ open }) => (
|
||||||
<>
|
<>
|
||||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
<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}
|
href={item.href}
|
||||||
id={item.name + item.href}
|
id={item.name + item.href}
|
||||||
onClick={(e) => {
|
onClick={(e) => {
|
||||||
document.getElementById(item.name + item.href).dispatchEvent(new CustomEvent('scroll'));
|
updateCurrent()
|
||||||
}}
|
}}
|
||||||
className={classNames(
|
className={classNames(
|
||||||
item.current
|
item.current
|
||||||
? 'bg-gray-900 text-white'
|
? 'border-2 border-white text-white'
|
||||||
: 'text-gray-300 hover:bg-gray-700 hover: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'
|
'px-3 py-2 rounded-md text-sm font-medium transition-border duration-75'
|
||||||
)}
|
)}
|
||||||
aria-current={item.current ? 'page' : undefined}
|
aria-current={item.current ? 'page' : undefined}
|
||||||
>
|
>
|
||||||
|
|
|
@ -23,7 +23,7 @@ const projects = [
|
||||||
{
|
{
|
||||||
title: 'SCP Mobile',
|
title: 'SCP Mobile',
|
||||||
href: 'https://github.com/jackmerrill/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:
|
description:
|
||||||
'Mobile (iOS) app for the SCP Wiki. Made in 24 hours at CodeDay.',
|
'Mobile (iOS) app for the SCP Wiki. Made in 24 hours at CodeDay.',
|
||||||
},
|
},
|
||||||
|
|
|
@ -32,7 +32,7 @@ export default function Skills() {
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="bg-gray-900" id="about" >
|
<div className="bg-black" id="about" >
|
||||||
{/* Header */}
|
{/* Header */}
|
||||||
<div className="relative pb-32">
|
<div className="relative pb-32">
|
||||||
<div className="absolute inset-0">
|
<div className="absolute inset-0">
|
||||||
|
|
|
@ -26,13 +26,12 @@ function MyApp({ Component, pageProps }: AppProps) {
|
||||||
|
|
||||||
return <>
|
return <>
|
||||||
<div id='app'>
|
<div id='app'>
|
||||||
<main className="bg-gray-800 w-full h-full min-h-screen">
|
<main className="bg-black 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`} />
|
|
||||||
<DefaultSeo {...SEO}/>
|
<DefaultSeo {...SEO}/>
|
||||||
<Component {...pageProps} />
|
<Component {...pageProps} />
|
||||||
<Footer />
|
<Footer />
|
||||||
</main>
|
</main>
|
||||||
<style jsx>{`
|
<style jsx global>{`
|
||||||
html, body {
|
html, body {
|
||||||
scroll-behavior: smooth;
|
scroll-behavior: smooth;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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}>
|
<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">
|
<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>
|
<h1 className="text-white font-extrabold md:text-6xl text-3xl">Good <span>{timeString}</span>! I'm <span>Jack Merrill</span>.</h1>
|
||||||
</div>
|
</div>
|
||||||
<div className="my-3 px-3 w-full text-center">
|
<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>
|
<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>
|
||||||
<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">
|
<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">
|
<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
|
See my Work
|
||||||
</a>
|
</a>
|
||||||
</Link>
|
</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">
|
<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
|
Contact Me
|
||||||
</a>
|
</a>
|
||||||
</Link>
|
</Link>
|
||||||
|
@ -86,7 +86,7 @@ const IndexPage = () => {
|
||||||
<div ref={aboutRef} id="about">
|
<div ref={aboutRef} id="about">
|
||||||
<Skills />
|
<Skills />
|
||||||
</div>
|
</div>
|
||||||
<div id='projects' ref={projectsRef} id="projects">
|
<div id='projects' ref={projectsRef}>
|
||||||
<Projects />
|
<Projects />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
@ -16,12 +16,15 @@ module.exports = {
|
||||||
'twitter': '#1DA1F2',
|
'twitter': '#1DA1F2',
|
||||||
},
|
},
|
||||||
transitionProperty: {
|
transitionProperty: {
|
||||||
'fadeDown': 'height opacity'
|
'fadeDown': 'height opacity',
|
||||||
|
'border': 'border-width border-color'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
variants: {
|
variants: {
|
||||||
|
extend: {
|
||||||
|
borderWidth: ['hover']
|
||||||
|
}
|
||||||
},
|
},
|
||||||
plugins: [
|
plugins: [
|
||||||
require('tailwindcss-filters'),
|
require('tailwindcss-filters'),
|
||||||
|
|
|
@ -1,8 +1,8 @@
|
||||||
import { useState, useEffect } from 'react';
|
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)
|
const [isIntersecting, setIntersecting] = useState(false)
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue
Block a user