refactor: improve code structure

apps/portfolio/src/app/page.tsx

@@ -5,23 +5,30 @@ import type { Metadata } from "next"
 import Badge from "@/components/Badge"
 import ProjectCard from "@/components/ProjectCard"
 
-const projects: JSX.Element[] = []
+function getSkills(): JSX.Element[] {
-const skills: JSX.Element[] = portfolio.skills.map((slug) => {
+    return portfolio.skills.map((slug) => {
-    return <Badge key={slug} slug={slug} />
+        return <Badge key={slug} slug={slug} />
-})
+    })
+}
 
-for (const projectID in portfolio.projects) {
+function getProjects(): JSX.Element[] {
-    projects.push(
+    const projects = []
-        <ProjectCard
+
-            key={projectID}
+    for (const projectID in portfolio.projects) {
-            projectID={projectID}
+        projects.push(
-            project={
+            <ProjectCard
-                portfolio.projects[
+                key={projectID}
-                    projectID as keyof typeof portfolio.projects
+                projectID={projectID}
-                ] as PortfolioProject
+                project={
-            }
+                    portfolio.projects[
-        />
+                        projectID as keyof typeof portfolio.projects
-    )
+                    ] as PortfolioProject
+                }
+            />
+        )
+    }
+
+    return projects
 }
 
 export const metadata: Metadata = {
@@ -34,8 +41,8 @@ export default function Page() {
         <>
             <h1 className="mb-8">developomp's Portfolio</h1>
             <hr />
-            <div className="my-4 flex flex-wrap">{skills}</div>
+            <div className="my-4 flex flex-wrap gap-2">{getSkills()}</div>
-            <div className="projects">{projects}</div>
+            <div className="projects">{getProjects()}</div>
         </>
     )
 }

apps/portfolio/src/app/project/[id]/page.tsx

@@ -76,7 +76,7 @@ export default async function Project({ params }: Props) {
                     <FontAwesomeIcon className="h-12" icon={faGithub} />
                 </Link>
             </div>
-            <div className="flex flex-wrap">
+            <div className="flex flex-wrap gap-2">
                 {data.badges.map((slug) => {
                     return <Badge key={slug} slug={slug} />
                 })}

apps/portfolio/src/components/Badge/Badge.tsx

@@ -6,7 +6,7 @@ interface BadgeProps {
     slug: string
 }
 
-const sharedBadgeStyles = "mb-2 mr-2 flex w-fit items-center px-2 py-1 text-xs"
+const sharedBadgeStyles = "flex w-fit items-center px-2 py-1 text-xs"
 const sharedInnerBadgeStyles = "badge mr-1 inline-block w-6 align-middle"
 
 export default async function Badge({ slug }: BadgeProps) {

apps/portfolio/src/components/ProjectCard/ProjectCard.tsx

@@ -22,7 +22,7 @@ export default function ProjectCard({ projectID, project }: ProjectCardProps) {
                     alt="project thumbnail"
                 />
 
-                <div className="flex flex-wrap">
+                <div className="flex flex-wrap gap-2">
                     {project.badges.map((badge) => (
                         <Badge key={badge} slug={badge} />
                     ))}