diff --git a/package.json b/package.json
index 34cdd33..6eab211 100644
--- a/package.json
+++ b/package.json
@@ -8,9 +8,12 @@
"type-check": "tsc"
},
"dependencies": {
+ "framer-motion": "^4.1.2",
"next": "latest",
+ "next-page-transitions": "^1.0.0-beta.2",
"react": "^17.0.1",
- "react-dom": "^17.0.1"
+ "react-dom": "^17.0.1",
+ "tailwindcss-filters": "^3.0.0"
},
"devDependencies": {
"@fullhuman/postcss-purgecss": "^4.0.3",
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 09dea2f..b3775c1 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,10 +1,43 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
import { AppProps } from 'next/app'
import 'tailwindcss/tailwind.css'
+import { useRouter } from 'next/dist/client/router';
+import Navbar from '../components/Navbar';
+import Footer from '../components/Footer';
function MyApp({ Component, pageProps }: AppProps) {
- return
+ const router = useRouter();
+
+ const [loading, setLoading] = useState(false);
+
+ useEffect(() => {
+ const handleStart = () => {
+ setLoading(true);
+ }
+ const handleComplete = () => {
+ setTimeout(() => setLoading(false), 300)
+ }
+
+ router.events.on('routeChangeStart', handleStart)
+ router.events.on('routeChangeComplete', handleComplete)
+ router.events.on('routeChangeError', handleComplete)
+ })
+
+ return <>
+
+
}
export default MyApp
diff --git a/pages/index.tsx b/pages/index.tsx
index e37bdcd..5386734 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,6 +1,10 @@
import Link from 'next/link'
import { useEffect, useState } from 'react'
-import Navbar from '../components/Navbar'
+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';
const IndexPage = () => {
const [timeString, setTimeString] = useState('Morning')
@@ -20,37 +24,193 @@ const IndexPage = () => {
})
return (
-
-
-
+ <>
+
+
+
Good {timeString}! I'm Jack Merrill.
+
+
+
A Graphic and UI Designer and Fullstack Developer from the Windy City.
+
+
+
+
+
+
+
Nice to meet you!
+
+
+
+ I'm Jack, a 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:
+
+ - Next.js
+ - Node.js / Express
+ - MongoDB
+ - PostgreSQL
+
+
+
+
+
+
+
+
+
Graphic and UI Design
+
I like to create designs and brands.
+
What I enjoy designing:
+
Brands, Logos, Banners, Headers
+
Tools I use:
+
+ - Affinity Designer
+ - TailwindCSS
+ - Bootstrap
+ - React.js
+
+
+
+
+
+
My recent work
+
Here are a few projects I've been working on!
+