jack/jackmerrill.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat/fix: better mobile support

Browse Source
This commit is contained in:
Jack Merrill 2021-04-14 10:49:43 -05:00
parent 1222296901
commit ad4e6e39c9
3 changed files with 12 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/Navbar.tsx
View File

@ -44,8 +44,8 @@ const Navbar = ({ links }: {
</div> </div>
</button> </button>
</div> </div>
<div className={collapsed ? 'md:flex flex-grow items-center hidden' : 'md:flex flex-grow items-center'} id="navbar"> <div className={`md:flex flex-grow items-center md:opacity-1 transition-fadeDown transform ease-in-out ${collapsed ? '-translate-y-1 h-0 opacity-0' : 'translate-y-1 opacity-1 h-10'}`} id="navbar">
<ul className="flex flex-col md:flex-row list-none ml-auto items-center"> <ul className="flex list-none ml-auto items-center">
{links.map(({ label, href }) => ( {links.map(({ label, href }) => (
<li className="nav-item"> <li className="nav-item">
<div className="px-3 py-2 flex items-center leading-snug text-white"> <div className="px-3 py-2 flex items-center leading-snug text-white">

14
pages/index.tsx
View File

@ -47,11 +47,11 @@ const IndexPage = () => {
</div> </div>
</header> </header>
<div className='bg-gradient-to-b from-purple-600 to-purple-700 h-full lg:max-h-96'> <div className='bg-gradient-to-b from-purple-600 to-purple-700 h-full lg:max-h-96'>
<div className='flex flex-wrap p-16 space-y-6'> <div className='flex flex-wrap py-16 px-4 p lg:p-16 space-y-6'>
<div className='w-full overflow-hidden'> <div className='w-full overflow-hidden'>
<h1 className='text-white text-4xl font-bold text-center'>Nice to meet you!</h1> <h1 className='text-white text-4xl font-bold text-center'>Nice to meet you!</h1>
</div> </div>
<div className='w-full px-48'> <div className='w-full px-12 lg:px-48'>
<p className='text-white text-2xl text-center'> <p className='text-white text-2xl text-center'>
I&apos;m Jack, a Graphic/UI Designer and Fullstack Developer from Chicago. Since I started I&apos;m Jack, a Graphic/UI Designer and Fullstack Developer from Chicago. Since I started
programming in 2014, I&apos;ve used Python, NodeJS, HTML and CSS. Nowadays, I prefer to programming in 2014, I&apos;ve used Python, NodeJS, HTML and CSS. Nowadays, I prefer to
@ -101,7 +101,7 @@ const IndexPage = () => {
</div> </div>
</div> </div>
</div> </div>
<div id='projects' className='flex flex-wrap justify-center px-64 pt-24 space-y-3'> <div id='projects' className='flex flex-wrap justify-center px-12 lg:px-64 pt-24 space-y-3'>
<h1 className='w-full font-bold text-white text-center text-3xl'>My recent work</h1> <h1 className='w-full font-bold text-white text-center text-3xl'>My recent work</h1>
<p className='w-full font-semibold text-white text-center text-xl'>Here are a few projects I&apos;ve been working on!</p> <p className='w-full font-semibold text-white text-center text-xl'>Here are a few projects I&apos;ve been working on!</p>
<div className="flex flex-wrap w-full -mx-1 overflow-hidden justify-center"> <div className="flex flex-wrap w-full -mx-1 overflow-hidden justify-center">
@ -144,7 +144,7 @@ const IndexPage = () => {
</div> </div>
</div> </div>
<div id='designs' className='flex flex-wrap justify-center px-64 pt-24 space-y-3'> <div id='designs' className='flex flex-wrap justify-center px-12 lg:px-64 pt-24 space-y-3'>
<h1 className='w-full font-bold text-white text-center text-3xl'>My Designs</h1> <h1 className='w-full font-bold text-white text-center text-3xl'>My Designs</h1>
<p className='w-full font-semibold text-white text-center text-xl'>Here are a few designs I&apos;ve made!</p> <p className='w-full font-semibold text-white text-center text-xl'>Here are a few designs I&apos;ve made!</p>
<div className="flex flex-wrap w-full -mx-1 overflow-hidden justify-center"> <div className="flex flex-wrap w-full -mx-1 overflow-hidden justify-center">
@ -182,7 +182,7 @@ const IndexPage = () => {
<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-1/4 bg-github rounded-xl text-white font-bold text-xl' className='flex justify-center items-center px-10 py-4 w-5/6 lg:w-1/4 bg-github rounded-xl text-white font-bold text-xl'
> >
<GitHubIcon className='text-white h-6 w-6 mr-3'/> <GitHubIcon className='text-white h-6 w-6 mr-3'/>
GitHub Profile GitHub Profile
@ -192,7 +192,7 @@ const IndexPage = () => {
<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-1/4 bg-gray-900 rounded-xl text-white font-bold text-xl' className='flex justify-center items-center px-10 py-4 w-5/6 lg:w-1/4 bg-gray-900 rounded-xl text-white font-bold text-xl'
> >
<MailIcon className='text-white h-6 w-6 mr-3'/> <MailIcon className='text-white h-6 w-6 mr-3'/>
Email Email
@ -202,7 +202,7 @@ const IndexPage = () => {
<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-1/4 bg-twitter rounded-xl text-white font-bold text-xl' className='flex justify-center items-center px-10 py-4 w-5/6 lg:w-1/4 bg-twitter rounded-xl text-white font-bold text-xl'
> >
<TwitterIcon className='text-white h-6 w-6 mr-3'/> <TwitterIcon className='text-white h-6 w-6 mr-3'/>
Twitter Twitter

3
tailwind.config.js
View File

@ -14,6 +14,9 @@ module.exports = {
'tailwind': '#38B2AC', 'tailwind': '#38B2AC',
'github': '#181717', 'github': '#181717',
'twitter': '#1DA1F2', 'twitter': '#1DA1F2',
},
transitionProperty: {
'fadeDown': 'height opacity'
} }
}, },
}, },