import Link from 'next/link'
import Image from 'next/image';
import { useEffect, useState, useRef } from 'react'
import CodeIcon from '../components/Images/CodeIcon'
import DesignIcon from '../components/Images/DesignIcon'
import GitHubIcon from '../components/Images/GitHubIcon';
import MailIcon from '../components/Images/MailIcon';
import TwitterIcon from '../components/Images/TwitterIcon';
import Head from 'next/head';
import Navbar from '../components/Navbar';
import Skills from '../components/Skills';
import Projects from '../components/Projects';
import useOnScreen from '../util/hooks/useOnScreen';
const Graphics = [
{
name: 'Personal Logo',
src: '/img/designs/NewPersonalLogo.png',
},
{
name: 'Old Personal Logo',
src: '/img/designs/PersonalLogo.png',
},
{
name: 'Demo App Icon',
src: '/img/designs/AppIcon.png',
},
{
name: 'Stryx Logo',
src: '/img/designs/Stryx.png',
},
{
name: 'Isometric Building',
src: '/img/designs/IsometricBuilding.png',
},
{
name: 'AmusedGrape Icon',
src: '/img/designs/Grape.png',
},
{
name: 'New Stryx Icon',
src: '/img/designs/StryxNew.png',
},
{
name: 'Nyxx Logo',
src: '/img/designs/Nyxx.png',
},
{
name: 'Lunar Design Logo',
src: '/img/designs/LunarDesign.png',
},
];
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()
console.log(new Date())
if (hours < 12) {
setTimeString('Morning')
} else if (hours >= 12 && hours <= 17) {
setTimeString('Afternoon')
} else if (hours >= 17 && hours <= 24) {
setTimeString('Evening')
}
})
function calculateAge() {
var ageDifMs = Date.now() - new Date('July 13, 2004').getTime();
var ageDate = new Date(ageDifMs);
return Math.abs(ageDate.getUTCFullYear() - 1970);
}
return (
<>
Good {timeString}! I'm Jack Merrill.
A {calculateAge()} year old Graphic and UI Designer and Fullstack Developer from the Windy City.
My Designs
Here are a few designs I've made!
{Graphics.map((gfx) => (
))}
)
}
export default IndexPage