Fixes

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 */}

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>
-    </>
-  );
-};

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" />
 

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>

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
           "
         >

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} />