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",
|
||||
"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
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
@ -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' />
|
||||
|
|
|
@ -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}
|
||||
>
|
||||
|
|
|
@ -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.',
|
||||
},
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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'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 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>
|
||||
|
||||
|
|
|
@ -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'),
|
||||
|
|
|
@ -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)
|
||||
|
||||
|
|
Loading…
Reference in New Issue
Block a user