jack/jackmerrill.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

i dont know what i added

Browse Source
This commit is contained in:
Jack Merrill 2021-10-04 22:13:53 +00:00
parent d374d19a8a
commit 58b5c15fe9
9 changed files with 45 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
.breakpoints
View File

@ -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
} }
] ]
} }

2
components/Footer.tsx
View File

@ -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' />

26
components/Navbar.tsx
View File

@ -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}
> >

2
components/Projects.tsx
View File

@ -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.',
}, },

2
components/Skills.tsx
View File

@ -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">

5
pages/_app.tsx
View File

@ -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;
} }

10
pages/index.tsx
View File

@ -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&apos;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&apos;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>

7
tailwind.config.js
View File

@ -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'),

4
util/hooks/useOnScreen.ts
View File

@ -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)