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 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() 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.

See my Work or Contact Me

Nice to meet you!

I'm Jack, a {calculateAge()} year old Graphic/UI Designer and Fullstack Developer from Chicago. Since I started programming in 2014, I've used Python, NodeJS, HTML and CSS. Nowadays, I prefer to use NextJS, TailwindCSS, and NodeJS. Being a fullstack developer, I've had to create numerous logos and brands for various projects of mine.

Fullstack Developer

I strive to make great things.

What I've made:

SaaS applications, Image websites, Social Networks

Tools I use:

  1. Next.js
  2. Node.js / Express
  3. MongoDB
  4. PostgreSQL
  5. Docker

Graphic and UI Design

I like to create designs and brands.

What I enjoy designing:

Brands, Logos, Banners, Headers

Tools I use:

  1. Affinity Designer
  2. Figma
  3. TailwindCSS
  4. Bootstrap
  5. React.js

My recent work

Here are a few projects I've been working on!

{/* Stryx Photo */}

Lunar Design

American counterpart of the French-American duo making software that's out of this world.

Visit
Stryx Photo

Stryx

Roblox Group Management made easy (defunct, no long associated)

Visit
Snacc.chat Photo

Snacc.chat

Made in 24 hours at CodeDay, Snacc.chat is a simple social network for programmers alike.

Visit
FRCMS Docs Photo

FRCMS

FIRST Robotics CMS (WIP)

Visit
Ricky.cat Photo

Ricky.cat

My first Next.js project! A place to share my cat. Discontinued (for now).

Visit

My Designs

Here are a few designs I've made!

Personal Logo
Demo App Icon
Stryx Logo
Comet Design
Isometric Building Design
Grape Logo
New Stryx Logo
Nyxx Logo
Lunar Design Logo

Want to contact me?

GitHub Profile
Email
Twitter
) } export default IndexPage