Mobile Responsiveness

choubari · Sep 7, 2023 · df91477 · df91477
1 parent f7216d5
commit df91477
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 15 deletions.
diff --git a/app/blog/page.tsx b/app/blog/page.tsx
@@ -60,7 +60,7 @@ export default function Blog() {
           ))}
         </div>
       ) : (
-        <p>No posts published.</p>
+        <p className="flex justify-center">No posts published!</p>
       )}
     </div>
   );

diff --git a/app/contact/page.tsx b/app/contact/page.tsx
@@ -41,7 +41,7 @@ export default function Contact() {
 
   return (
     <div>
-      <div className="flex flex-col lg:px-64 py-20">
+      <div className="flex flex-col px-8 py-10 md:px-20 md:py-20 lg:px-64">
         <h1 className="font-serif text-4xl font-bold mb-2">
           Let<span className="text-accent">'</span>s make some cool stuff
           together

diff --git a/components/home/featured-projects.tsx b/components/home/featured-projects.tsx
@@ -4,7 +4,7 @@ import Button from "../ui/button";
 
 export default function FeaturedProjects() {
   return (
-    <div className="mx-8 my-6 md:px-20">
+    <div className="mx-8 my-6 mb-20 md:px-20">
       <div className="flex flex-col mb-5">
         <h1 className="font-serif text-4xl font-bold mb-2">
           Featured Work
@@ -20,7 +20,9 @@ export default function FeaturedProjects() {
           <ProjectCard key={index} project={project} />
         ))}
       </div>
-      <Button route={"/work"} label={"View All Projects"} />
+      <div className="my-10">
+        <Button route={"/work"} label={"View All Projects"} />
+      </div>
     </div>
   );
 }
diff --git a/components/home/featured-repos.tsx b/components/home/featured-repos.tsx
@@ -32,7 +32,7 @@ export default async function FeaturedRepos() {
         */
   }
   return (
-    <div className="mx-8 my-6 md:px-20">
+    <div className="mx-8 my-6 mb-20 md:px-20">
       <div className="flex flex-col mb-5">
         <h1 className="font-serif text-4xl font-bold mb-2">
           Open Source
@@ -47,7 +47,9 @@ export default async function FeaturedRepos() {
           <RepoCard key={repo.id} repo={repo} />
         ))}
       </div>
-      <Button route={"/oss"} label={"View All Repos"} />
+      <div className="my-10">
+        <Button route={"/oss"} label={"View All Repos"} />
+      </div>
     </div>
   );
 }
diff --git a/components/home/featured-talks.tsx b/components/home/featured-talks.tsx
@@ -4,7 +4,7 @@ import Button from "../ui/button";
 
 export default function FeaturedTalks() {
   return (
-    <div className="mx-8 my-6 md:px-20">
+    <div className="mx-8 my-6 mb-20 md:px-20">
       <div className="flex flex-col mb-5">
         <h1 className="font-serif text-4xl font-bold mb-2">
           Featured Talks
@@ -17,7 +17,9 @@ export default function FeaturedTalks() {
           <TalkCard key={index} talk={talk} />
         ))}
       </div>
-      <Button route={"/talks"} label={"View All Talks"} />
+      <div className="my-10">
+        <Button route={"/talks"} label={"View All Talks"} />
+      </div>
     </div>
   );
 }
diff --git a/components/home/hero.tsx b/components/home/hero.tsx
@@ -3,22 +3,23 @@ import Button from "../ui/button";
 
 export default function Hero() {
   return (
-    <div className="flex flex-col md:flex-row justify-between py-32 mx-8 md:px-20">
+    <div className="flex flex-col md:flex-row justify-between gap-10 pt-12 pb-44 md:pt-32 mx-8 md:px-20">
       <div className="md:basis-7/12 pr-16">
         <h1 className="text-5xl pb-10 font-serif font-bold leading-tight">
           <span className="text-accent">Coding</span> &
           <span className="text-accent"> Storytelling</span>:
           <br />
           That's what I do!
         </h1>
-        <div className="mb-8">
-          <code className="bg-blue-300 p-1.5 mr-2 rounded-sm font-medium text-dark">
+        <div className="flex flex-wrap mb-8">
+          <code className="bg-blue-300 p-1.5 mr-2 my-1 rounded-sm font-medium text-dark">
             Engineering
           </code>
-          <code className="bg-blue-300 p-1.5 mr-2 rounded-sm font-medium text-dark">
+          <code className="bg-blue-300 p-1.5 mr-2 my-1 rounded-sm font-medium text-dark">
             Educating
           </code>
-          <code className="bg-blue-300 p-1.5 mr-2 rounded-sm font-medium text-dark">
+          {/* <br className="leading-10 block" /> */}
+          <code className="bg-blue-300 p-1.5 mr-2 my-1 rounded-sm font-medium text-dark">
             Entertaining
           </code>
         </div>
@@ -35,14 +36,14 @@ export default function Hero() {
           />
         </div>
       </div>
-      <div className="mt-40 mb-20 md:mt-0 md:mb-0 md:basis-5/12 items-center flex relative w-full justify-center">
+      <div className="mt-40 mb-20 bg-red-300 md:mt-0 md:mb-0 md:basis-5/12 items-center flex relative w-full justify-center">
         {/* <Image
             src={avatar}
             alt={"avatar"}
             fill
             style={{ objectFit: "contain" }}
           /> */}
-        <p>🎉🎉</p>
+        <p className="text-4xl">🎉🎉</p>
         <Deck />
       </div>
     </div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -60,7 +60,7 @@ export default function Blog() { @@
               ))}
             </div>
           ) : (
-            <p>No posts published.</p>
+            <p className="flex justify-center">No posts published!</p>
           )}
         </div>
       );
@@ Expand Down @@