added new logo
|
@ -1,29 +1,20 @@
|
||||||
const Logo = (props) => (
|
const Logo = (props) => (
|
||||||
<svg
|
<svg width="100%" height="100%" viewBox="0 0 1080 1080" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" xmlSpace="preserve" fillRule="evenodd" clipRule="evenodd" strokeLinejoin="round" strokeMiterlimit="2" {...props}>
|
||||||
width="100%"
|
<g>
|
||||||
height="100%"
|
<g transform="matrix(2.37095,0,0,2.37095,-437.8,-886.233)">
|
||||||
viewBox="0 0 1080 1080"
|
<g transform="matrix(-1,-1.22465e-16,1.22465e-16,-1,563.619,1290.65)">
|
||||||
version="1.1"
|
<path d="M333.908,553.8L378.967,643.918L288.85,643.918L333.908,553.8Z" fill="rgb(235,235,235)"/>
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
xmlnsXlink="http://www.w3.org/1999/xlink"
|
|
||||||
xmlSpace="preserve"
|
|
||||||
fillRule='evenodd'
|
|
||||||
clipRule='evenodd'
|
|
||||||
strokeLinejoin='round'
|
|
||||||
strokeMiterlimit='2'
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
<g transform="matrix(1.87667,0,0,1.87667,-211.69,-370.379)">
|
|
||||||
<path d="M330.006,585.343L506.715,408.388C513.207,401.887 513.2,391.339 506.699,384.847C500.198,378.355 489.65,378.363 483.158,384.863L306.448,561.819C299.956,568.32 299.964,578.868 306.465,585.36C312.965,591.852 323.514,591.844 330.006,585.343Z" fill="white" />
|
|
||||||
</g>
|
</g>
|
||||||
<g transform="matrix(1.87667,0,0,1.87667,-45.877,-370.379)">
|
<path d="M410.08,466.234L475.099,466.234L339.788,736.855L274.769,736.855L410.08,466.234Z" fill="rgb(235,235,235)"/>
|
||||||
<path d="M330.006,585.343L506.715,408.388C513.207,401.887 513.2,391.339 506.699,384.847C500.198,378.355 489.65,378.363 483.158,384.863L306.448,561.819C299.956,568.32 299.964,578.868 306.465,585.36C312.965,591.852 323.514,591.844 330.006,585.343Z" fill="white" />
|
</g>
|
||||||
|
<g transform="matrix(-2.37095,0,0,2.37095,1624.63,-886.233)">
|
||||||
|
<g transform="matrix(1,0,0,1,-59.1395,92.9335)">
|
||||||
|
<path d="M333.908,553.8L378.967,643.918L288.85,643.918L333.908,553.8Z" fill="rgb(235,235,235)"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(-1,0,0,1,749.868,0)">
|
||||||
|
<path d="M410.08,466.234L475.099,466.234L339.788,736.855L274.769,736.855L410.08,466.234Z" fill="rgb(235,235,235)"/>
|
||||||
</g>
|
</g>
|
||||||
<g transform="matrix(1.87667,0,0,1.87667,119.936,-370.379)">
|
|
||||||
<path d="M330.006,585.343L506.715,408.388C513.207,401.887 513.2,391.339 506.699,384.847C500.198,378.355 489.65,378.363 483.158,384.863L306.448,561.819C299.956,568.32 299.964,578.868 306.465,585.36C312.965,591.852 323.514,591.844 330.006,585.343Z" fill="white" />
|
|
||||||
</g>
|
</g>
|
||||||
<g transform="matrix(1.87667,0,0,1.87667,-473.399,-473.402)">
|
|
||||||
<path d="M362.424,611.832L534.257,439.76C540.749,433.259 551.297,433.252 557.798,439.744C564.299,446.235 564.306,456.784 557.815,463.285L381.105,640.24C379.514,641.833 377.679,643.037 375.72,643.85L375.686,643.864C373.726,644.676 371.578,645.124 369.326,645.124L268.899,645.124C259.712,645.124 252.253,637.665 252.253,628.478C252.253,619.29 259.712,611.832 268.899,611.832L362.424,611.832Z" fill="white" />
|
|
||||||
</g>
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
)
|
)
|
||||||
|
|
|
@ -26,13 +26,13 @@ function MyApp({ Component, pageProps }: AppProps) {
|
||||||
|
|
||||||
return <>
|
return <>
|
||||||
<div id='app'>
|
<div id='app'>
|
||||||
<main className="bg-black w-full h-full min-h-screen">
|
<main className="w-full h-full min-h-screen bg-black">
|
||||||
<DefaultSeo {...SEO}/>
|
<DefaultSeo {...SEO}/>
|
||||||
<Component {...pageProps} />
|
<Component {...pageProps} />
|
||||||
<Footer />
|
<Footer />
|
||||||
</main>
|
</main>
|
||||||
<style jsx global>{`
|
<style jsx global>{`
|
||||||
html, body {
|
html {
|
||||||
scroll-behavior: smooth;
|
scroll-behavior: smooth;
|
||||||
}
|
}
|
||||||
`}</style>
|
`}</style>
|
||||||
|
|
123
pages/index.tsx
|
@ -13,6 +13,45 @@ import Skills from '../components/Skills';
|
||||||
import Projects from '../components/Projects';
|
import Projects from '../components/Projects';
|
||||||
import useOnScreen from '../util/hooks/useOnScreen';
|
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 IndexPage = () => {
|
||||||
const [timeString, setTimeString] = useState(
|
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')))
|
(new Date().getHours() < 12 ? 'Morning' : (new Date().getHours() >= 12 && new Date().getHours() <= 17 ? 'Afternoon' : (new Date().getHours() >= 17 && new Date().getHours() <= 24 ? 'Evening' : 'Morning')))
|
||||||
|
@ -62,22 +101,22 @@ const IndexPage = () => {
|
||||||
{ view: 'Graphics', viewing: viewingGraphics },
|
{ view: 'Graphics', viewing: viewingGraphics },
|
||||||
{ view: 'Contact', viewing: viewingContact },
|
{ view: 'Contact', viewing: viewingContact },
|
||||||
]} />
|
]} />
|
||||||
<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-col flex-wrap items-center justify-center w-full h-screen space-y-2 overflow-hidden lg:px-36" ref={homeRef}>
|
||||||
<div className="my-3 px-3 w-full text-center">
|
<div className="w-full px-3 my-3 text-center">
|
||||||
<h1 className="text-white font-extrabold md:text-6xl text-3xl">Good <span>{timeString}</span>! I'm <span>Jack Merrill</span>.</h1>
|
<h1 className="text-3xl font-extrabold text-white md:text-6xl">Good <span>{timeString}</span>! I'm <span>Jack Merrill</span>.</h1>
|
||||||
</div>
|
</div>
|
||||||
<div className="my-3 px-3 w-full text-center">
|
<div className="w-full px-3 my-3 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-2xl font-bold text-white md:text-4xl">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 items-center content-center justify-center w-full px-3 pt-4 my-3 space-y-4 text-center md:space-y-0 md:space-x-4">
|
||||||
<Link href="#projects">
|
<Link href="#projects">
|
||||||
<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">
|
<a className="w-full px-4 py-2 font-bold text-white truncate transition duration-150 border border-white hover:bg-white hover:text-black rounded-xl md:w-1/6">
|
||||||
See my Work
|
See my Work
|
||||||
</a>
|
</a>
|
||||||
</Link>
|
</Link>
|
||||||
<span className="text-sm font-light text-white md:block hidden">or</span>
|
<span className="hidden text-sm font-light text-white md:block">or</span>
|
||||||
<Link href="mailto:me@jackmerrill.com">
|
<Link href="mailto:me@jackmerrill.com">
|
||||||
<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">
|
<a className="w-full px-4 py-2 font-bold text-white transition duration-150 border border-white hover:bg-white hover:text-black rounded-xl md:w-1/6">
|
||||||
Contact Me
|
Contact Me
|
||||||
</a>
|
</a>
|
||||||
</Link>
|
</Link>
|
||||||
|
@ -90,82 +129,52 @@ const IndexPage = () => {
|
||||||
<Projects />
|
<Projects />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id='graphics' className='flex flex-wrap justify-center px-12 lg:px-64 pt-24 space-y-3' ref={graphicsRef}>
|
<div id='graphics' className='flex flex-wrap justify-center px-12 pt-24 space-y-3 lg:px-64' ref={graphicsRef}>
|
||||||
<h1 className='w-full font-bold text-white text-center text-3xl'>My Designs</h1>
|
<h1 className='w-full text-3xl font-bold text-center text-white'>My Designs</h1>
|
||||||
<p className='w-full font-semibold text-white text-center text-xl'>Here are a few designs I've made!</p>
|
<p className='w-full text-xl font-semibold text-center text-white'>Here are a few designs I've made!</p>
|
||||||
<div className="flex flex-wrap w-full -mx-1 overflow-hidden justify-center">
|
<div className="flex flex-wrap justify-center w-full -mx-1 overflow-hidden">
|
||||||
<div className="flex flex-wrap -mx-3 overflow-hidden">
|
<div className="flex flex-wrap -mx-3 overflow-hidden">
|
||||||
<div className="my-3 px-3 w-1/2 md:w-1/3 overflow-hidden">
|
{Graphics.map((gfx) => (
|
||||||
<Image alt='Personal Logo' width='1080px' height='1080px' src='/img/designs/PersonalLogo.png' className='rounded-xl' />
|
<div className="w-1/2 px-3 my-3 overflow-hidden md:w-1/3">
|
||||||
</div>
|
<Image alt={gfx.name} width='1080px' height='1080px' src={gfx.src} className='rounded-xl' />
|
||||||
|
|
||||||
<div className="my-3 px-3 w-1/2 md:w-1/3 overflow-hidden">
|
|
||||||
<Image alt='Demo App Icon' width='1080px' height='1080px' src='/img/designs/AppIcon.png' className='rounded-xl' />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="my-3 px-3 w-1/2 md:w-1/3 overflow-hidden">
|
|
||||||
<Image alt='Stryx Logo' width='1080px' height='1080px' src='/img/designs/Stryx.png' className='rounded-xl' />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="my-3 px-3 w-1/2 md:w-1/3 overflow-hidden">
|
|
||||||
<Image alt='Comet Design' width='1080px' height='1080px' src='/img/designs/Comet.png' className='rounded-xl bg-gray-600' />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="my-3 px-3 w-1/2 md:w-1/3 overflow-hidden">
|
|
||||||
<Image alt='Isometric Building Design' width='1080px' height='1080px' src='/img/designs/IsometricBuilding.png' className='rounded-xl' />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="my-3 px-3 w-1/2 md:w-1/3 overflow-hidden">
|
|
||||||
<Image alt='Grape Logo' width='1080px' height='1080px' src='/img/designs/Grape.png' className='rounded-xl' />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="my-3 px-3 w-1/2 md:w-1/3 overflow-hidden">
|
|
||||||
<Image alt='New Stryx Logo' width='1080px' height='1080px' src='/img/designs/StryxNew.png' className='rounded-xl' />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="my-3 px-3 w-1/2 md:w-1/3 overflow-hidden">
|
|
||||||
<Image alt='Nyxx Logo' width='1080px' height='1080px' src='/img/designs/Nyxx.png' className='rounded-xl' />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="my-3 px-3 w-1/2 md:w-1/3 overflow-hidden">
|
|
||||||
<Image alt='Lunar Design Logo' width='1080px' height='1080px' src='/img/designs/LunarDesign.png' className='rounded-xl' />
|
|
||||||
</div>
|
</div>
|
||||||
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id='contact' className='flex flex-wrap justify-center p-12 space-y-4' ref={contactRef}>
|
<div id='contact' className='flex flex-wrap justify-center p-12 space-y-4' ref={contactRef}>
|
||||||
<h1 className='text-white font-bold text-3xl'>Want to contact me?</h1>
|
<h1 className='text-3xl font-bold text-white'>Want to contact me?</h1>
|
||||||
<div className='flex align-middle justify-center w-full'>
|
<div className='flex justify-center w-full align-middle'>
|
||||||
<a
|
<a
|
||||||
href='https://github.com/jackmerrill'
|
href='https://github.com/jackmerrill'
|
||||||
target='_blank'
|
target='_blank'
|
||||||
className='flex justify-center items-center px-10 py-4 w-11/12 lg:w-1/4 bg-github rounded-xl text-white font-bold text-xl'
|
className='flex items-center justify-center w-11/12 px-10 py-4 text-xl font-bold text-white lg:w-1/4 bg-github rounded-xl'
|
||||||
rel='noreferrer'
|
rel='noreferrer'
|
||||||
>
|
>
|
||||||
<GitHubIcon className='text-white h-6 w-6 mr-3'/>
|
<GitHubIcon className='w-6 h-6 mr-3 text-white'/>
|
||||||
GitHub Profile
|
GitHub Profile
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div className='flex align-middle justify-center w-full'>
|
<div className='flex justify-center w-full align-middle'>
|
||||||
<a
|
<a
|
||||||
href='mailto:me@jackmerrill.com'
|
href='mailto:me@jackmerrill.com'
|
||||||
target='_blank'
|
target='_blank'
|
||||||
className='flex justify-center items-center px-10 py-4 w-11/12 lg:w-1/4 bg-gray-900 rounded-xl text-white font-bold text-xl'
|
className='flex items-center justify-center w-11/12 px-10 py-4 text-xl font-bold text-white bg-gray-900 lg:w-1/4 rounded-xl'
|
||||||
rel='noreferrer'
|
rel='noreferrer'
|
||||||
>
|
>
|
||||||
<MailIcon className='text-white h-6 w-6 mr-3'/>
|
<MailIcon className='w-6 h-6 mr-3 text-white'/>
|
||||||
Email
|
Email
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div className='flex align-middle justify-center w-full'>
|
<div className='flex justify-center w-full align-middle'>
|
||||||
<a
|
<a
|
||||||
href='https://twitter.com/jack__merrill'
|
href='https://twitter.com/jack__merrill'
|
||||||
target='_blank'
|
target='_blank'
|
||||||
className='flex justify-center items-center px-10 py-4 w-11/12 lg:w-1/4 bg-twitter rounded-xl text-white font-bold text-xl'
|
className='flex items-center justify-center w-11/12 px-10 py-4 text-xl font-bold text-white lg:w-1/4 bg-twitter rounded-xl'
|
||||||
rel='noreferrer'
|
rel='noreferrer'
|
||||||
>
|
>
|
||||||
<TwitterIcon className='text-white h-6 w-6 mr-3'/>
|
<TwitterIcon className='w-6 h-6 mr-3 text-white'/>
|
||||||
Twitter
|
Twitter
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
Before Width: | Height: | Size: 60 KiB |
Before Width: | Height: | Size: 26 KiB |
Before Width: | Height: | Size: 54 KiB |
Before Width: | Height: | Size: 53 KiB |
Before Width: | Height: | Size: 27 KiB |
BIN
public/img/designs/NewPersonalLogo.png
Normal file
After Width: | Height: | Size: 8.6 KiB |