From ad4e6e39c94a7312dd167cbe9b733082ada7914d Mon Sep 17 00:00:00 2001
From: Jack Merrill <yoshifan509@gmail.com>
Date: Wed, 14 Apr 2021 10:49:43 -0500
Subject: [PATCH] feat/fix: better mobile support

---
 components/Navbar.tsx |  4 ++--
 pages/index.tsx       | 14 +++++++-------
 tailwind.config.js    |  3 +++
 3 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index 96befb3..6febf97 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -44,8 +44,8 @@ const Navbar = ({ links }: {
                 </div>
             </button>
           </div>
-          <div className={collapsed ? 'md:flex flex-grow items-center hidden' : 'md:flex flex-grow items-center'} id="navbar">
-            <ul className="flex flex-col md:flex-row list-none ml-auto items-center">
+          <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 list-none ml-auto items-center">
               {links.map(({ label, href }) => (
                 <li className="nav-item">
                   <div className="px-3 py-2 flex items-center leading-snug text-white">
diff --git a/pages/index.tsx b/pages/index.tsx
index 20a7a6e..a53ef09 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -47,11 +47,11 @@ const IndexPage = () => {
         </div>
       </header>
       <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'>
             <h1 className='text-white text-4xl font-bold text-center'>Nice to meet you!</h1>
           </div>
-          <div className='w-full px-48'>
+          <div className='w-full px-12 lg:px-48'>
             <p className='text-white text-2xl text-center'>
               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
@@ -101,7 +101,7 @@ const IndexPage = () => {
           </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>
         <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">
@@ -144,7 +144,7 @@ const IndexPage = () => {
         </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>
         <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">
@@ -182,7 +182,7 @@ const IndexPage = () => {
           <a
             href='https://github.com/jackmerrill'
             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'/>
             GitHub Profile
@@ -192,7 +192,7 @@ const IndexPage = () => {
           <a
             href='mailto:me@jackmerrill.com'
             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'/>
             Email
@@ -202,7 +202,7 @@ const IndexPage = () => {
           <a
             href='https://twitter.com/jack__merrill'
             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'/>
             Twitter
diff --git a/tailwind.config.js b/tailwind.config.js
index 9b1c73f..12d6006 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -14,6 +14,9 @@ module.exports = {
         'tailwind': '#38B2AC',
         'github': '#181717',
         'twitter': '#1DA1F2',
+      },
+      transitionProperty: {
+        'fadeDown': 'height opacity'
       }
     },
   },