fix(again): Fonts issue?
This commit is contained in:
parent
9e2e6579eb
commit
bae21571e9
|
@ -1,50 +1,57 @@
|
|||
import Link from 'next/link'
|
||||
import { useEffect, useState } from 'react'
|
||||
import Navbar from '../components/Navbar'
|
||||
|
||||
function GetTimeString() {
|
||||
const hours = new Date().getHours()
|
||||
const IndexPage = () => {
|
||||
const [timeString, setTimeString] = useState('Morning')
|
||||
|
||||
if (hours < 12) {
|
||||
return 'Morning'
|
||||
} else if (hours >= 12 && hours <= 17) {
|
||||
return 'Afternoon'
|
||||
} else if (hours >= 17 && hours <= 24) {
|
||||
return 'Evening'
|
||||
}
|
||||
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')
|
||||
}
|
||||
})
|
||||
|
||||
return (
|
||||
<div id='app'>
|
||||
<main className="bg-gray-800 w-screen h-full min-h-screen">
|
||||
<Navbar links={[
|
||||
{ label: 'Home', href: '/' },
|
||||
{ label: 'Portfolio', href: '/portfolio' },
|
||||
{ label: 'Projects', href: '/projects' },
|
||||
]} />
|
||||
|
||||
<header className="flex flex-wrap flex-col overflow-hidden space-y-2 px-36 items-center justify-center h-screen w-screen">
|
||||
<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-400">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 Graphic and UI/UX Designer and Fullstack Developer from Chicago.</h2>
|
||||
</div>
|
||||
<div className="inline-flex items-center justify-center content-center space-x-4 my-3 px-3 w-full text-center">
|
||||
<Link href="/portfolio">
|
||||
<a className="bg-gradient-to-r from-green-400 to-blue-500 px-4 py-2 rounded-xl font-bold text-white">
|
||||
See my Work
|
||||
</a>
|
||||
</Link>
|
||||
<span className="text-sm font-light text-gray-400">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">
|
||||
Contact Me
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
</header>
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const IndexPage = () => (
|
||||
<div id='app'>
|
||||
<main className="bg-gray-800 w-screen h-full min-h-screen">
|
||||
<Navbar links={[
|
||||
{ label: 'Home', href: '/' },
|
||||
{ label: 'Portfolio', href: '/portfolio' },
|
||||
{ label: 'Projects', href: '/projects' },
|
||||
]} />
|
||||
|
||||
<header className="flex flex-wrap flex-col overflow-hidden space-y-2 px-36 items-center justify-center h-screen w-screen">
|
||||
<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">{GetTimeString()}</span>! I'm <span className="text-purple-400">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 Graphic and UI/UX Designer and Fullstack Developer from Chicago.</h2>
|
||||
</div>
|
||||
<div className="inline-flex items-center justify-center content-center space-x-4 my-3 px-3 w-full text-center">
|
||||
<Link href="/portfolio">
|
||||
<a className="bg-gradient-to-r from-green-400 to-blue-500 px-4 py-2 rounded-xl font-bold text-white">
|
||||
See my Work
|
||||
</a>
|
||||
</Link>
|
||||
<span className="text-sm font-light text-gray-400">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">
|
||||
Contact Me
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
</header>
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
|
||||
export default IndexPage
|
||||
|
|
|
@ -1,18 +1,6 @@
|
|||
module.exports = {
|
||||
plugins: [
|
||||
'tailwindcss',
|
||||
process.env.NODE_ENV === 'production'
|
||||
? [
|
||||
'@fullhuman/postcss-purgecss',
|
||||
{
|
||||
content: [
|
||||
'./pages/**/*.{js,jsx,ts,tsx}',
|
||||
'./components/**/*.{js,jsx,ts,tsx}',
|
||||
],
|
||||
defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
|
||||
},
|
||||
]
|
||||
: undefined,
|
||||
'postcss-preset-env',
|
||||
],
|
||||
};
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
module.exports = {
|
||||
purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
|
||||
darkMode: 'media', // or 'media' or 'class'
|
||||
theme: {
|
||||
extend: {},
|
||||
|
|
Loading…
Reference in New Issue
Block a user