Merge pull request #355 from mbeps/development

Tablet Opmisations
mbeps · Feb 5, 2024 · be2aa6c · be2aa6c
2 parents 3884b49 + 463358d
commit be2aa6c
Show file tree

Hide file tree

Showing 6 changed files with 105 additions and 60 deletions.
diff --git a/app/(site)/components/AboutSection/AboutSection.tsx b/app/(site)/components/AboutSection/AboutSection.tsx
@@ -27,15 +27,15 @@ const AboutSection = () => {
 
       <div
         className="
-            flex flex-col md:flex-row 
-            space-y-10 md:space-y-0
-            items-stretch justify-center align-top 
-            md:space-x-10  md:p-4 
-            md:text-left 
-          "
+          flex flex-col lg:flex-row
+          space-y-10 md:space-y-5 lg:space-y-0
+          items-stretch justify-center align-top
+          lg:space-x-10 lg:p-4
+          lg:text-left
+        "
       >
         {/* Left section */}
-        <div className="md:w-1/2">
+        <div className="lg:w-1/2">
           <h1 className="text-center text-2xl font-bold mb-6 mt-6 md:text-left">
             Get to know me!
           </h1>
@@ -44,7 +44,7 @@ const AboutSection = () => {
         </div>
 
         {/* Right section */}
-        <div className="text-center md:w-1/2 md:text-left ">
+        <div className="text-center lg:w-1/2 md:text-left ">
           <LanguageSection />
           <div className="h-1 mt-2 md:mt-4" />
           <TechnologiesSection />

diff --git a/app/(site)/components/AboutSection/LanguageSection.tsx b/app/(site)/components/AboutSection/LanguageSection.tsx
@@ -137,7 +137,11 @@ const LanguageTagWithModal: React.FC<LanguageTagWithModalProps> = ({
   const projects: ProjectInterface[] = allProjects;
   const certificates: CertificateInterface[] = allCertificates;
   const allBlogs: BlogInterface[] = blogs;
-  const allMaterial: MaterialInterface[] = [...projects, ...certificates, ...allBlogs];
+  const allMaterial: MaterialInterface[] = [
+    ...projects,
+    ...certificates,
+    ...allBlogs,
+  ];
 
   const hasMaterial = isSkillAssociatedWithMaterial(language, allMaterial);
 
@@ -192,8 +196,9 @@ const LanguageTagWithModal: React.FC<LanguageTagWithModalProps> = ({
                     {options.map((option, index) => (
                       <DropdownMenuItem
                         key={index}
-                        className={`${option.slug === groupedBy ? "font-bold" : ""
-                          }`}
+                        className={`${
+                          option.slug === groupedBy ? "font-bold" : ""
+                        }`}
                         onSelect={() => setGroupedBy(option.slug)}
                       >
                         {option.entryName}

diff --git a/app/(site)/components/AboutSection/TechnologiesSection.tsx b/app/(site)/components/AboutSection/TechnologiesSection.tsx
@@ -62,7 +62,10 @@ const TechnologiesSection: React.FC = () => {
    * @param totalLimit (number): the number of skills to take
    * @returns (string[]): list of skill names
    */
-  function firstNSkills(skillsToLimit: SkillInterface[], totalLimit: number): SkillInterface[] {
+  function firstNSkills(
+    skillsToLimit: SkillInterface[],
+    totalLimit: number,
+  ): SkillInterface[] {
     const uniqueSkills = new Map<string, SkillInterface>();
 
     skillsToLimit.forEach((skill) => {
@@ -80,7 +83,10 @@ const TechnologiesSection: React.FC = () => {
    * @param limitPerCategory (number): the number of skills to take from each category
    * @returns (string[]): list of skill names
    */
-  function firstNSkillsPerCategory(skillsToLimit: SkillInterface[], limitPerCategory: number): SkillInterface[] {
+  function firstNSkillsPerCategory(
+    skillsToLimit: SkillInterface[],
+    limitPerCategory: number,
+  ): SkillInterface[] {
     // Categorize the skills into an array of SkillsCategoryInterface
     const skillCategories: SkillsCategoryInterface[] = skillsToLimit.reduce(
       (acc, skill) => {

diff --git a/app/(site)/components/HeroSection.tsx b/app/(site)/components/HeroSection.tsx
@@ -20,7 +20,7 @@ const HeroSection = () => {
    */
   const loopItems = [
     "Software Engineering",
-    "Full Stack Development",
+    "Full-Stack Development",
     "Machine Learning",
     "Mathematics",
   ];
@@ -29,15 +29,25 @@ const HeroSection = () => {
     <section id="home" className="home-section-wrapper">
       <div
         className="
-          flex flex-col 
-          text-center items-center justify-center 
+          flex flex-col lg:flex-row
+          text-center lg:text-left
+          items-center
+          justify-center lg:justify-start
           animate-fadeIn animation-delay-2
-          md:flex-row md:space-x-12 md:text-left  
+          lg:space-x-12
           my-auto w-full
-        "
+      "
       >
-        {/* Profile Image */}
-        <div className="flex md:w-1/2 justify-center p-8 md:p-0">
+        {/* Right / Top Section */}
+        <div
+          className="
+          flex
+          lg:w-1/2
+          justify-center
+          p-8 lg:p-0
+        "
+        >
+          {/* Profile Image */}
           <Image
             src="/profile.png"
             alt="Profile image of Maruf Bepary"
@@ -50,7 +60,15 @@ const HeroSection = () => {
           />
         </div>
 
-        <div className="md:mt-2 md:w-3/5 space-y-7 md:space-y-5 w-full">
+        {/* Left / Bottom Section */}
+        <div
+          className="
+            md:mt-2
+            lg:w-3/5 w-full
+            space-y-7 md:space-y-5
+            items-center justify-center lg:justify-start
+        "
+        >
           <h1 className="text-5xl md:text-7xl font-bold mt-6 md:mt-0 mb-6">
             {`Hi, I'm Maruf!`}
           </h1>
@@ -61,48 +79,62 @@ const HeroSection = () => {
               loopItems={loopItems}
               implementation="typewriter"
               className="
-                text-2xl md:text-4xl font-semibold 
-                p-1 bg-clip-text text-transparent 
+                text-2xl md:text-4xl font-semibold
+                p-1 bg-clip-text text-transparent
                 bg-gradient-to-r from-red-600 via-orange-500 to-rose-500 dark:from-red-700 dark:via-orange-600 dark:to-rose-800 tracking-wide"
             />
           )}
 
           <Socials
             iconSize={40}
             className="
+              justify-center md:justify-center lg:justify-start
               md:space-x-5
-            "
+          "
           />
 
           {/* Buttons */}
-          <div className="flex flex-col space-y-4 md:flex-row md:space-x-4 md:space-y-0 w-full md:w-3/5">
-            <Button
-              variant="gradient"
-              onClick={() => {
-                scrollToSection("projects");
-              }}
-              className="w-full"
-            >
-              Projects
-            </Button>
-            <Button
-              variant="ghost"
-              onClick={() => {
-                scrollToSection("about");
-              }}
-              className="w-full"
+          <div
+            className="
+            w-full
+            flex justify-center lg:justify-start
+          "
+          >
+            <div
+              className="
+                flex flex-col md:flex-row
+                space-y-4 md:space-x-4 md:space-y-0
+                w-full md:w-3/5
+          "
             >
-              About
-            </Button>
+              <Button
+                variant="gradient"
+                onClick={() => {
+                  scrollToSection("projects");
+                }}
+                className="w-full"
+              >
+                Projects
+              </Button>
+              <Button
+                variant="ghost"
+                onClick={() => {
+                  scrollToSection("about");
+                }}
+                className="w-full"
+              >
+                About
+              </Button>
+            </div>
           </div>
         </div>
       </div>
       <div
         className="
-          flex flex-row 
-          items-center text-center justify-center 
-          my-10 md:my-4
-        "
+        flex flex-row 
+        items-center text-center justify-center 
+        my-10 md:my-4
+      "
       >
         <div
           onClick={() => {

diff --git a/components/Blogs/BlogItem.tsx b/components/Blogs/BlogItem.tsx
@@ -15,17 +15,17 @@ const BlogItem: React.FC<BlogInterface> = (props) => {
     <Link href={`${basePath}/${props.slug}`}>
       <div
         className="
-        flex flex-col 
-        min-h-[180px]
-        cursor-pointer
-        bg-neutral-100 dark:bg-neutral-800
-        md:hover:bg-neutral-200 md:dark:hover:bg-red-950
-        p-4 
-        rounded-xl 
-        shadow-md md:hover:shadow-lg
-        transform md:hover:scale-105
-        animate-slideUpCubiBezier animation-delay-2
-        transition-all duration-500 ease-in-out"
+          flex flex-col
+          min-h-[180px] h-full max-h-[280px]
+          cursor-pointer
+          bg-neutral-100 dark:bg-neutral-800
+          md:hover:bg-neutral-200 md:dark:hover:bg-red-950
+          p-4
+          rounded-xl
+          shadow-md md:hover:shadow-lg
+          transform md:hover:scale-105
+          animate-slideUpCubiBezier animation-delay-2
+          transition-all duration-500 ease-in-out"
       >
         <h2 className=" text-xl font-bold  mb-4 text-neutral-900 dark:text-neutral-100">
           {props.name}

diff --git a/components/Skills/CategorySkillDisplay.tsx b/components/Skills/CategorySkillDisplay.tsx
@@ -3,6 +3,7 @@ import { useState } from "react";
 import ExpandCollapseButton from "../Button/ExpandCollapseButton";
 import SkillTag from "../Tags/SkillTag";
 import HeadingFour from "../Text/HeadingFour";
+import { useMediaQuery } from "@/hooks/useMediaQuery";
 
 interface CategorySkillDisplayProps {
   skillCategories: SkillsCategoryInterface[];
@@ -13,9 +14,10 @@ const CategorySkillDisplay: React.FC<CategorySkillDisplayProps> = ({
 }) => {
   const [showAll, setShowAll] = useState(false);
   const shouldDisplayTitle = skillCategories.length > 1;
+  const isTablet = useMediaQuery("(max-width: 976px)");
 
   const maxSkillCount = 12;
-  const maxGroupCount = 3;
+  const maxGroupCount = isTablet ? 2 : 3; // Number of columns to display
 
   let skillCount = 0;
   let groupCount = 0;
@@ -49,8 +51,8 @@ const CategorySkillDisplay: React.FC<CategorySkillDisplayProps> = ({
   };
 
   // Determine grid style based on the number of categories
-  const gridStyle = shouldDisplayTitle
-    ? "gap-4 grid md:grid-cols-2 lg:grid-cols-3" // for multiple categories
+  const gridStyle: string = shouldDisplayTitle
+    ? `gap-4 grid md:grid-cols-2 lg:grid-cols-3` // for multiple categories
     : "gap-4 grid grid-cols-1"; // for single category
 
   return (