Merge pull request #1 from colbychaskell/hotfix-mobile

Hotfix mobile

package.json

@@ -7,6 +7,7 @@
     "dev": "vite",
     "build": "tsc -b && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "format": "prettier --write .",
     "preview": "vite preview",
     "deploy": "gh-pages -d dist"
   },

src/App.tsx

@@ -8,14 +8,12 @@ function App() {
   return (
     <>
       <Navbar isVisible={showNav} />
-      <div className="px-8">
-        <main className="pt-20 grid grid-cols-3 md:grid-cols-12 grid-gap relative">
-          <Hero />
-          <Portfolio />
-          {/* <Experience /> */}
-        </main>
-        <Footer />
-      </div>
+      <main className="px-8 pt-24">
+        <Hero />
+        <Portfolio />
+        {/* <Experience /> */}
+      </main>
+      <Footer />
     </>
   )
 }

src/components/Contact.tsx

@@ -2,7 +2,7 @@ import Link from './Link'
 
 const Contact = () => {
   return (
-    <div id="contact" className="section w-full">
+    <div id="contact" className="section">
       <p className="opacity-40 mb-3">CONTACT.md</p>
       <p className="max-w-prose">
         If you would like to see more of my work, I actively contribute to

src/components/Footer.tsx

@@ -1,7 +1,7 @@
 const Footer = () => {
   return (
     <div className="w-full flex text-lg font-light mt-6 py-6 justify-between border-t border-t-[#7b8496]">
-      <p className="text-white opacity-40">
+      <p className="px-8 text-white opacity-40">
         Copyright &copy; 2024 Colby Haskell.
       </p>
     </div>

src/components/Hero.tsx

@@ -47,12 +47,10 @@ const Hero = () => {
   return (
     <section
       id="hero"
-      className="my-8 col-start-1 md:col-end-13 grid grid-cols-12 gap-6 grid-layout text-left overflow-x-clip"
+      className="w-full flex flex-col md:flex-row md:justify-between text-left overflow-x-clip"
     >
       <Readme />
-      <div className="col-start-7 col-end-13">
-        <Contact />
-      </div>
+      <Contact />
     </section>
   )
 }

src/components/Portfolio.tsx

@@ -144,11 +144,11 @@ const BetterBrewsCard = () => {
 
 const Portfolio = () => {
   return (
-    <section className="col-start-1 col-end-13">
+    <section className="">
       <motion.div className="md:text-left" variants={textVariant(0)}>
         <p className="opacity-40 my-4">PORTFOLIO.md</p>
       </motion.div>
-      <div className="grid gap-3 grid-cols-3 grid-gap">
+      <div className="grid grid-gap gap-3 grid-cols-1 md:grid-cols-3 grid-gap">
         <div className="flex flex-col gap-4">
           <NewTrainTrackerCard />
         </div>