From 23f4a8282f35b400daa70bea14341e1cc13b54ce Mon Sep 17 00:00:00 2001
From: Maruf Bepary <bepary71@gmail.com>
Date: Tue, 6 Feb 2024 10:51:10 +0000
Subject: [PATCH 1/7] REFACTOR: Separated language modal into separate
 component

---
 .../AboutSection/LanguageSection.tsx          | 207 +----------------
 components/Modal/LanguageModal.tsx            | 210 ++++++++++++++++++
 2 files changed, 212 insertions(+), 205 deletions(-)
 create mode 100644 components/Modal/LanguageModal.tsx

diff --git a/app/(site)/components/AboutSection/LanguageSection.tsx b/app/(site)/components/AboutSection/LanguageSection.tsx
index c4329b00..8a42a635 100644
--- a/app/(site)/components/AboutSection/LanguageSection.tsx
+++ b/app/(site)/components/AboutSection/LanguageSection.tsx
@@ -1,46 +1,10 @@
 "use client";
 
-import isSkillAssociatedWithMaterial from "@/actions/material/isSkillAssociatedWithMaterial";
-import filterSkillsByType from "@/actions/skills/filterSkillsByType";
-import getAssociatedSkills from "@/actions/skills/getAssociatedSkills";
-import groupSkills from "@/actions/skills/groupSkills";
-import SkillTag from "@/components/Tags/SkillTag";
-import Tag from "@/components/Tags/Tag";
+import LanguageModal from "@/components/Modal/LanguageModal";
 import HeadingThree from "@/components/Text/HeadingThree";
-import HeadingTwo from "@/components/Text/HeadingTwo";
-import { Button } from "@/components/shadcn/ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogTrigger,
-} from "@/components/shadcn/ui/dialog";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/shadcn/ui/dropdown-menu";
-import { ScrollArea } from "@/components/shadcn/ui/scroll-area";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/shadcn/ui/tooltip";
-import blogs from "@/database/blogs";
-import allCertificates from "@/database/certificates";
-import allProjects from "@/database/projects";
 import { languages } from "@/database/skills/languages";
-import allSkills from "@/database/skills/skills";
 import useIsMounted from "@/hooks/useIsMounted";
-import FilterOption from "@/interfaces/filters/FilterOption";
-import BlogInterface from "@/interfaces/material/BlogInterface";
-import CertificateInterface from "@/interfaces/material/CertificateInterface";
-import MaterialInterface from "@/interfaces/material/MaterialInterface";
-import ProjectInterface from "@/interfaces/material/ProjectInterface";
-import SkillInterface from "@/interfaces/skills/SkillInterface";
-import Link from "next/link";
 import React, { useState } from "react";
-import { BsChevronDown } from "react-icons/bs";
 
 /**
  * Displays a list of languages that I know.
@@ -70,7 +34,7 @@ const LanguageSection: React.FC = () => {
       <HeadingThree title="Languages" />
       <div className="flex flex-wrap flex-row justify-center z-10 md:justify-start -mt-2">
         {mainLanguages.map((languageData, idx) => (
-          <LanguageTagWithModal
+          <LanguageModal
             key={idx}
             language={languageData}
             handleOpenModal={handleOpenModal}
@@ -84,170 +48,3 @@ const LanguageSection: React.FC = () => {
 };
 
 export default LanguageSection;
-
-interface LanguageTagWithModalProps {
-  language: SkillInterface;
-  repository?: string;
-  handleOpenModal: () => void;
-  handleCloseModal: () => void;
-  isModalOpen: boolean;
-}
-
-/**
- * Displays a tag for each language.
- * If the language has skills or repositories, a modal is displayed when the tag is clicked.
- * The modal displays the skills and repositories for the language.
- * If the language does not have any skills or repositories, the modal cannot be opened.
- *
- * @param language (string): name of the language
- * @param skills (Skill[]): list of skills for the language
- * @param repositories (Repository[]): list of repositories for the language
- * @returns (JSX.Element): language tag with modal (stack of the language
- */
-const LanguageTagWithModal: React.FC<LanguageTagWithModalProps> = ({
-  language,
-  repository,
-}) => {
-  const [isModalOpen, setIsModalOpen] = useState(false);
-
-  const languageSkills =
-    getAssociatedSkills(
-      filterSkillsByType(allSkills, "hard"),
-      language,
-      "hard",
-    ) || [];
-
-  const handleOpenModal = () => {
-    setIsModalOpen(true);
-  };
-
-  const handleCloseModal = () => {
-    setIsModalOpen(false);
-  };
-
-  const shouldOpenModal = languageSkills && languageSkills.length > 0;
-
-  const [groupedBy, setGroupedBy] = useState("category");
-  // Adjusted filtering based on the merged skills field
-  const filteredSkills = (languageSkills || []).filter(
-    (skill) => skill.isMainSkill,
-  );
-  const groupedSkills = groupSkills(groupedBy, languageSkills || []);
-
-  const projects: ProjectInterface[] = allProjects;
-  const certificates: CertificateInterface[] = allCertificates;
-  const allBlogs: BlogInterface[] = blogs;
-  const allMaterial: MaterialInterface[] = [
-    ...projects,
-    ...certificates,
-    ...allBlogs,
-  ];
-
-  const hasMaterial = isSkillAssociatedWithMaterial(language, allMaterial);
-
-  const options: FilterOption[] = [
-    { slug: "category", entryName: "Category" },
-    { slug: "none", entryName: "None" },
-  ];
-
-  const currentGroupedName =
-    options.find((option) => option.slug === groupedBy)?.entryName ||
-    "Category";
-
-  return (
-    <>
-      <Dialog>
-        <DialogTrigger>
-          <Tooltip>
-            <TooltipTrigger>
-              <Tag onClick={shouldOpenModal ? handleOpenModal : undefined}>
-                {language.name}
-              </Tag>
-            </TooltipTrigger>
-            <TooltipContent>
-              <p>{`View technologies related to ${language.name}`}</p>
-            </TooltipContent>
-          </Tooltip>
-        </DialogTrigger>
-        <DialogContent>
-          <div className="h-full w-full pt-6">
-            <HeadingTwo title={language.name} />
-          </div>
-          <ScrollArea className="h-full w-full">
-            <div className="px-6 pb-4">
-              {/* Grouping Dropdown */}
-              <div className="flex mt-4">
-                <div className="flex-grow mr-2 mt-2.5 text-right text-neutral-700 dark:text-neutral-300">
-                  Group by:
-                </div>
-                <DropdownMenu>
-                  <DropdownMenuTrigger className="w-48">
-                    <Button variant="default" className="w-full">
-                      <div className="flex items-start justify-between space-x-2 w-full">
-                        <span>{currentGroupedName}</span>
-                        <BsChevronDown
-                          fontSize={16}
-                          className="text-neutral-700 dark:text-neutral-200 mt-1"
-                        />
-                      </div>
-                    </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent className="w-48">
-                    {options.map((option, index) => (
-                      <DropdownMenuItem
-                        key={index}
-                        className={`${
-                          option.slug === groupedBy ? "font-bold" : ""
-                        }`}
-                        onSelect={() => setGroupedBy(option.slug)}
-                      >
-                        {option.entryName}
-                      </DropdownMenuItem>
-                    ))}
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              </div>
-
-              {/* List of skills */}
-              <div className="space-y-1">
-                {groupedSkills.map((categoryData, index) => (
-                  <div key={index} className="text-center md:text-left">
-                    <HeadingThree title={categoryData.skillCategoryName} />
-                    <div className="flex flex-wrap flex-row justify-center z-10 md:justify-start">
-                      {categoryData.skills.map((skill, skillIndex) => (
-                        <SkillTag key={skillIndex} skill={skill} />
-                      ))}
-                    </div>
-                  </div>
-                ))}
-              </div>
-
-              {/* Links */}
-              {hasMaterial && (
-                <>
-                  <div className="text-center md:text-left">
-                    <HeadingThree title="Material" />
-                  </div>
-                  <div
-                    className="
-                      flex flex-wrap flex-col
-                      text-center md:text-left
-                      justify-start z-10 space-y-2"
-                  >
-                    <Link href={`/skills/${language.slug}`}>
-                      <div className="w-full">
-                        <Button variant="gradient" className="w-full">
-                          {`All ${language.name} Material`}
-                        </Button>
-                      </div>
-                    </Link>
-                  </div>
-                </>
-              )}
-            </div>
-          </ScrollArea>
-        </DialogContent>
-      </Dialog>
-    </>
-  );
-};
diff --git a/components/Modal/LanguageModal.tsx b/components/Modal/LanguageModal.tsx
new file mode 100644
index 00000000..3a67fe51
--- /dev/null
+++ b/components/Modal/LanguageModal.tsx
@@ -0,0 +1,210 @@
+"use client";
+
+import isSkillAssociatedWithMaterial from "@/actions/material/isSkillAssociatedWithMaterial";
+import filterSkillsByType from "@/actions/skills/filterSkillsByType";
+import getAssociatedSkills from "@/actions/skills/getAssociatedSkills";
+import groupSkills from "@/actions/skills/groupSkills";
+import SkillTag from "@/components/Tags/SkillTag";
+import Tag from "@/components/Tags/Tag";
+import HeadingThree from "@/components/Text/HeadingThree";
+import HeadingTwo from "@/components/Text/HeadingTwo";
+import { Button } from "@/components/shadcn/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogTrigger,
+} from "@/components/shadcn/ui/dialog";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/shadcn/ui/dropdown-menu";
+import { ScrollArea } from "@/components/shadcn/ui/scroll-area";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/shadcn/ui/tooltip";
+import blogs from "@/database/blogs";
+import allCertificates from "@/database/certificates";
+import allProjects from "@/database/projects";
+import allSkills from "@/database/skills/skills";
+import FilterOption from "@/interfaces/filters/FilterOption";
+import BlogInterface from "@/interfaces/material/BlogInterface";
+import CertificateInterface from "@/interfaces/material/CertificateInterface";
+import MaterialInterface from "@/interfaces/material/MaterialInterface";
+import ProjectInterface from "@/interfaces/material/ProjectInterface";
+import SkillInterface from "@/interfaces/skills/SkillInterface";
+import Link from "next/link";
+import React, { useState } from "react";
+import { BsChevronDown } from "react-icons/bs";
+
+interface LanguageTagWithModalProps {
+  language: SkillInterface;
+  repository?: string;
+  handleOpenModal: () => void;
+  handleCloseModal: () => void;
+  isModalOpen: boolean;
+}
+
+/**
+ * Displays a tag for each language.
+ * If the language has skills or repositories, a modal is displayed when the tag is clicked.
+ * The modal displays the skills and repositories for the language.
+ * If the language does not have any skills or repositories, the modal cannot be opened.
+ *
+ * @param language (string): name of the language
+ * @param skills (Skill[]): list of skills for the language
+ * @param repositories (Repository[]): list of repositories for the language
+ * @returns (JSX.Element): language tag with modal (stack of the language
+ */
+const LanguageModal: React.FC<LanguageTagWithModalProps> = ({
+  language,
+  repository,
+}) => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const languageSkills =
+    getAssociatedSkills(
+      filterSkillsByType(allSkills, "hard"),
+      language,
+      "hard",
+    ) || [];
+
+  const handleOpenModal = () => {
+    setIsModalOpen(true);
+  };
+
+  const handleCloseModal = () => {
+    setIsModalOpen(false);
+  };
+
+  const shouldOpenModal = languageSkills && languageSkills.length > 0;
+
+  const [groupedBy, setGroupedBy] = useState("category");
+  // Adjusted filtering based on the merged skills field
+  const filteredSkills = (languageSkills || []).filter(
+    (skill) => skill.isMainSkill,
+  );
+  const groupedSkills = groupSkills(groupedBy, languageSkills || []);
+
+  const projects: ProjectInterface[] = allProjects;
+  const certificates: CertificateInterface[] = allCertificates;
+  const allBlogs: BlogInterface[] = blogs;
+  const allMaterial: MaterialInterface[] = [
+    ...projects,
+    ...certificates,
+    ...allBlogs,
+  ];
+
+  const hasMaterial = isSkillAssociatedWithMaterial(language, allMaterial);
+
+  const options: FilterOption[] = [
+    { slug: "category", entryName: "Category" },
+    { slug: "none", entryName: "None" },
+  ];
+
+  const currentGroupedName =
+    options.find((option) => option.slug === groupedBy)?.entryName ||
+    "Category";
+
+  return (
+    <>
+      <Dialog>
+        <DialogTrigger>
+          <Tooltip>
+            <TooltipTrigger>
+              <Tag onClick={shouldOpenModal ? handleOpenModal : undefined}>
+                {language.name}
+              </Tag>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>{`View technologies related to ${language.name}`}</p>
+            </TooltipContent>
+          </Tooltip>
+        </DialogTrigger>
+        <DialogContent>
+          <div className="h-full w-full pt-6">
+            <HeadingTwo title={language.name} />
+          </div>
+          <ScrollArea className="h-full w-full">
+            <div className="px-6 pb-4">
+              {/* Grouping Dropdown */}
+              <div className="flex mt-4">
+                <div className="flex-grow mr-2 mt-2.5 text-right text-neutral-700 dark:text-neutral-300">
+                  Group by:
+                </div>
+                <DropdownMenu>
+                  <DropdownMenuTrigger className="w-48">
+                    <Button variant="default" className="w-full">
+                      <div className="flex items-start justify-between space-x-2 w-full">
+                        <span>{currentGroupedName}</span>
+                        <BsChevronDown
+                          fontSize={16}
+                          className="text-neutral-700 dark:text-neutral-200 mt-1"
+                        />
+                      </div>
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent className="w-48">
+                    {options.map((option, index) => (
+                      <DropdownMenuItem
+                        key={index}
+                        className={`${
+                          option.slug === groupedBy ? "font-bold" : ""
+                        }`}
+                        onSelect={() => setGroupedBy(option.slug)}
+                      >
+                        {option.entryName}
+                      </DropdownMenuItem>
+                    ))}
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </div>
+
+              {/* List of skills */}
+              <div className="space-y-1">
+                {groupedSkills.map((categoryData, index) => (
+                  <div key={index} className="text-center md:text-left">
+                    <HeadingThree title={categoryData.skillCategoryName} />
+                    <div className="flex flex-wrap flex-row justify-center z-10 md:justify-start">
+                      {categoryData.skills.map((skill, skillIndex) => (
+                        <SkillTag key={skillIndex} skill={skill} />
+                      ))}
+                    </div>
+                  </div>
+                ))}
+              </div>
+
+              {/* Links */}
+              {hasMaterial && (
+                <>
+                  <div className="text-center md:text-left">
+                    <HeadingThree title="Material" />
+                  </div>
+                  <div
+                    className="
+                      flex flex-wrap flex-col
+                      text-center md:text-left
+                      justify-start z-10 space-y-2"
+                  >
+                    <Link href={`/skills/${language.slug}`}>
+                      <div className="w-full">
+                        <Button variant="gradient" className="w-full">
+                          {`All ${language.name} Material`}
+                        </Button>
+                      </div>
+                    </Link>
+                  </div>
+                </>
+              )}
+            </div>
+          </ScrollArea>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+};
+
+export default LanguageModal;

From d020ec0f8322c06caa5240e67d4f4accdea1f6dc Mon Sep 17 00:00:00 2001
From: Maruf Bepary <bepary71@gmail.com>
Date: Tue, 6 Feb 2024 11:04:57 +0000
Subject: [PATCH 2/7] BUG FIX: When selecting no category, the component would
 be in the middle of the modal instead of the top

---
 components/Modal/LanguageModal.tsx | 145 +++++++++++++++--------------
 1 file changed, 74 insertions(+), 71 deletions(-)

diff --git a/components/Modal/LanguageModal.tsx b/components/Modal/LanguageModal.tsx
index 3a67fe51..7895bc74 100644
--- a/components/Modal/LanguageModal.tsx
+++ b/components/Modal/LanguageModal.tsx
@@ -125,82 +125,85 @@ const LanguageModal: React.FC<LanguageTagWithModalProps> = ({
           </Tooltip>
         </DialogTrigger>
         <DialogContent>
-          <div className="h-full w-full pt-6">
-            <HeadingTwo title={language.name} />
-          </div>
-          <ScrollArea className="h-full w-full">
-            <div className="px-6 pb-4">
-              {/* Grouping Dropdown */}
-              <div className="flex mt-4">
-                <div className="flex-grow mr-2 mt-2.5 text-right text-neutral-700 dark:text-neutral-300">
-                  Group by:
+          <div className="w-full h-full overflow-hidden">
+            <div className="w-full pt-6">
+              <HeadingTwo title={language.name} />
+            </div>
+
+            <ScrollArea className="h-full w-full">
+              <div className="px-6 pb-4">
+                {/* Grouping Dropdown */}
+                <div className="flex mt-4">
+                  <div className="flex-grow mr-2 mt-2.5 text-right text-neutral-700 dark:text-neutral-300">
+                    Group by:
+                  </div>
+                  <DropdownMenu>
+                    <DropdownMenuTrigger className="w-48">
+                      <Button variant="default" className="w-full">
+                        <div className="flex items-start justify-between space-x-2 w-full">
+                          <span>{currentGroupedName}</span>
+                          <BsChevronDown
+                            fontSize={16}
+                            className="text-neutral-700 dark:text-neutral-200 mt-1"
+                          />
+                        </div>
+                      </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent className="w-48">
+                      {options.map((option, index) => (
+                        <DropdownMenuItem
+                          key={index}
+                          className={`${
+                            option.slug === groupedBy ? "font-bold" : ""
+                          }`}
+                          onSelect={() => setGroupedBy(option.slug)}
+                        >
+                          {option.entryName}
+                        </DropdownMenuItem>
+                      ))}
+                    </DropdownMenuContent>
+                  </DropdownMenu>
                 </div>
-                <DropdownMenu>
-                  <DropdownMenuTrigger className="w-48">
-                    <Button variant="default" className="w-full">
-                      <div className="flex items-start justify-between space-x-2 w-full">
-                        <span>{currentGroupedName}</span>
-                        <BsChevronDown
-                          fontSize={16}
-                          className="text-neutral-700 dark:text-neutral-200 mt-1"
-                        />
+
+                {/* List of skills */}
+                <div className="space-y-1">
+                  {groupedSkills.map((categoryData, index) => (
+                    <div key={index} className="text-center md:text-left">
+                      <HeadingThree title={categoryData.skillCategoryName} />
+                      <div className="flex flex-wrap flex-row justify-center z-10 md:justify-start">
+                        {categoryData.skills.map((skill, skillIndex) => (
+                          <SkillTag key={skillIndex} skill={skill} />
+                        ))}
                       </div>
-                    </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent className="w-48">
-                    {options.map((option, index) => (
-                      <DropdownMenuItem
-                        key={index}
-                        className={`${
-                          option.slug === groupedBy ? "font-bold" : ""
-                        }`}
-                        onSelect={() => setGroupedBy(option.slug)}
-                      >
-                        {option.entryName}
-                      </DropdownMenuItem>
-                    ))}
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              </div>
+                    </div>
+                  ))}
+                </div>
 
-              {/* List of skills */}
-              <div className="space-y-1">
-                {groupedSkills.map((categoryData, index) => (
-                  <div key={index} className="text-center md:text-left">
-                    <HeadingThree title={categoryData.skillCategoryName} />
-                    <div className="flex flex-wrap flex-row justify-center z-10 md:justify-start">
-                      {categoryData.skills.map((skill, skillIndex) => (
-                        <SkillTag key={skillIndex} skill={skill} />
-                      ))}
+                {/* Links */}
+                {hasMaterial && (
+                  <>
+                    <div className="text-center md:text-left">
+                      <HeadingThree title="Material" />
                     </div>
-                  </div>
-                ))}
+                    <div
+                      className="
+												flex flex-wrap flex-col
+												text-center md:text-left
+												justify-start z-10 space-y-2"
+                    >
+                      <Link href={`/skills/${language.slug}`}>
+                        <div className="w-full">
+                          <Button variant="gradient" className="w-full">
+                            {`All ${language.name} Material`}
+                          </Button>
+                        </div>
+                      </Link>
+                    </div>
+                  </>
+                )}
               </div>
-
-              {/* Links */}
-              {hasMaterial && (
-                <>
-                  <div className="text-center md:text-left">
-                    <HeadingThree title="Material" />
-                  </div>
-                  <div
-                    className="
-                      flex flex-wrap flex-col
-                      text-center md:text-left
-                      justify-start z-10 space-y-2"
-                  >
-                    <Link href={`/skills/${language.slug}`}>
-                      <div className="w-full">
-                        <Button variant="gradient" className="w-full">
-                          {`All ${language.name} Material`}
-                        </Button>
-                      </div>
-                    </Link>
-                  </div>
-                </>
-              )}
-            </div>
-          </ScrollArea>
+            </ScrollArea>
+          </div>
         </DialogContent>
       </Dialog>
     </>

From 1e5c0b8e23bc81c4fe46a58270b9774b89ff2725 Mon Sep 17 00:00:00 2001
From: Maruf Bepary <bepary71@gmail.com>
Date: Tue, 6 Feb 2024 11:16:17 +0000
Subject: [PATCH 3/7] BUG FIX: Increased size of markdown on blog and project
 page - Size can be passed - Prose also to be passed along with the size

---
 app/blogs/[slug]/page.tsx                       |  2 +-
 app/projects/[slug]/components/TabbedReader.tsx | 10 ++++++----
 components/Reader/Reader.tsx                    |  5 +++--
 3 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/app/blogs/[slug]/page.tsx b/app/blogs/[slug]/page.tsx
index 2affce2d..dc3fe4bd 100644
--- a/app/blogs/[slug]/page.tsx
+++ b/app/blogs/[slug]/page.tsx
@@ -93,7 +93,7 @@ const BlogPage: React.FC<BlogPageProps> = ({ params }) => {
         </p>
       </div>
 
-      <Reader content={blogContent} />
+      <Reader content={blogContent} size="lg:prose-lg" />
 
       <div className="border-b border-gray-200 dark:border-neutral-600 pb-2" />
 
diff --git a/app/projects/[slug]/components/TabbedReader.tsx b/app/projects/[slug]/components/TabbedReader.tsx
index 7cdc98ea..aa248f72 100644
--- a/app/projects/[slug]/components/TabbedReader.tsx
+++ b/app/projects/[slug]/components/TabbedReader.tsx
@@ -69,13 +69,15 @@ const TabbedReader: React.FC<TabbedReaderProps> = ({ content }) => {
         {/* Options */}
         {hasFeatures && hasBlog && (
           <div className="flex justify-center items-center">
-            <TabsList className="
+            <TabsList
+              className="
               rounded-full
               w-full md:w-2/5
               flex flex-row space-x-1
               transition-colors duration-700
               md:text-lg
-              ">
+              "
+            >
               <TabsTrigger
                 value="features"
                 className="
@@ -106,11 +108,11 @@ const TabbedReader: React.FC<TabbedReaderProps> = ({ content }) => {
         {/* Content */}
         <TabsContent value="features">
           <HeadingTwo title="Features" />
-          <Reader content={content.features} />
+          <Reader content={content.features} size="lg:prose-lg" />
         </TabsContent>
         <TabsContent value="reflection">
           <HeadingTwo title="Reflection" />
-          <Reader content={content.blog} />
+          <Reader content={content.blog} size="lg:prose-lg" />
         </TabsContent>
       </Tabs>
     </div>
diff --git a/components/Reader/Reader.tsx b/components/Reader/Reader.tsx
index 0b1deca4..7d12804b 100644
--- a/components/Reader/Reader.tsx
+++ b/components/Reader/Reader.tsx
@@ -3,7 +3,8 @@ import React from "react";
 
 type ReaderProps = {
   content: string | undefined;
-  size?: "sm" | "base" | "md" | "lg";
+  //! just giving the size without prose does not work
+  size?: "lg:prose-sm" | "lg:prose-base" | "lg:prose-md" | "lg:prose-lg";
 };
 
 /**
@@ -16,7 +17,7 @@ const Reader: React.FC<ReaderProps> = ({ content, size = "lg" }) => {
     <article
       className={`
         prose
-        ${size && `lg:prose-${size}`}
+        ${size}
         dark:prose-invert
         prose-img:rounded-lg
         max-w-none

From c17437e9a62cf487fd953e84807d687c2a181cb3 Mon Sep 17 00:00:00 2001
From: Maruf Bepary <bepary71@gmail.com>
Date: Tue, 6 Feb 2024 11:17:28 +0000
Subject: [PATCH 4/7] Increased padding of the gallery tab

---
 components/Gallery/Gallery.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/components/Gallery/Gallery.tsx b/components/Gallery/Gallery.tsx
index 8a5042fe..60dd7e40 100644
--- a/components/Gallery/Gallery.tsx
+++ b/components/Gallery/Gallery.tsx
@@ -144,6 +144,7 @@ const Gallery: React.FC<GalleryProps> = ({ images, videos }) => {
                       text-neutral-700 dark:text-neutral-200 text-md
                       rounded-full
                       transition-colors duration-700
+                      px-6
                       "
                   >
                     <LiaImageSolid fontSize={20} />
@@ -160,6 +161,7 @@ const Gallery: React.FC<GalleryProps> = ({ images, videos }) => {
                       text-neutral-700 dark:text-neutral-200 text-md
                       rounded-full
                       transition-colors duration-700
+                      px-6
                   "
                   >
                     <LiaVideoSolid fontSize={20} />

From a551f4f1cf8ca3ad62101a32452bb931126b16ec Mon Sep 17 00:00:00 2001
From: Maruf Bepary <bepary71@gmail.com>
Date: Tue, 6 Feb 2024 11:22:28 +0000
Subject: [PATCH 5/7] Added shadow to to tags - Subtle sm shadow normally -
 Hover md shadow on hover tags

---
 components/Tags/Tag.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/components/Tags/Tag.tsx b/components/Tags/Tag.tsx
index c12fbac4..76e21368 100644
--- a/components/Tags/Tag.tsx
+++ b/components/Tags/Tag.tsx
@@ -22,11 +22,13 @@ const Tag: React.FC<TagProps> = ({ children, onClick, hasHover }) => {
     bg-gray-200 dark:bg-red-950
     px-4 py-2 mr-2 mt-2 rounded-lg
     text-gray-500 dark:text-gray-300 font-semibold
-    transition-colors duration-700 ease-in-out
+    transition-all duration-700 ease-in-out
     border-2 border-gray-200 dark:border-red-950
+    shadow-sm
   `;
   const hoverClassName = `
     md:hover:border-gray-400 md:hover:dark:border-red-900
+    hover:shadow-md
     cursor-pointer
   `;
 

From 5b8872ab09011676fea4b3e081370be49a118b8f Mon Sep 17 00:00:00 2001
From: Maruf Bepary <bepary71@gmail.com>
Date: Tue, 6 Feb 2024 11:27:24 +0000
Subject: [PATCH 6/7] Added smooth transition when switching themes

---
 components/Filters/FilterPanel.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/Filters/FilterPanel.tsx b/components/Filters/FilterPanel.tsx
index 3a22fcf9..192b1365 100644
--- a/components/Filters/FilterPanel.tsx
+++ b/components/Filters/FilterPanel.tsx
@@ -118,6 +118,7 @@ const FilterOverlay: React.FC<FilterOverlayProps> = ({
             bg-neutral-100 dark:bg-black
             px-4 py-0
             flex justify-between items-center
+            transition-all duration-700 ease-in-out
             rounded-t-2xl
           "
         >

From 47b617bc9fc7244893ed96d544354a76bd42184b Mon Sep 17 00:00:00 2001
From: Maruf Bepary <bepary71@gmail.com>
Date: Tue, 6 Feb 2024 11:31:51 +0000
Subject: [PATCH 7/7] BUILD FIX: Left reader prop unchanged on the home page
 about section

---
 app/(site)/components/AboutSection/AboutSection.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/(site)/components/AboutSection/AboutSection.tsx b/app/(site)/components/AboutSection/AboutSection.tsx
index 2f484183..09ab970d 100644
--- a/app/(site)/components/AboutSection/AboutSection.tsx
+++ b/app/(site)/components/AboutSection/AboutSection.tsx
@@ -40,7 +40,7 @@ const AboutSection = () => {
             Get to know me!
           </h1>
 
-          <Reader content={blogContent} size="base" />
+          <Reader content={blogContent} />
         </div>
 
         {/* Right section */}