improved project card efficiency

- improved badges rendering logic

source/src/pages/Portfolio/ProjectCard.tsx

@@ -6,6 +6,7 @@ import Card from "../../components/Card"
 
 import { PortfolioProject } from "../../../types/types"
 import theming from "../../styles/theming"
+import { useEffect, useState } from "react"
 
 const StyledProjectCard = styled(Card)`
 	margin-bottom: 2rem;
@@ -28,8 +29,15 @@ interface ProjectCardProps {
 const ProjectCard = (props: ProjectCardProps) => {
 	const { projectID, project } = props
 
+	const [badges, setBadges] = useState<JSX.Element[]>([])
 	const navigate = useNavigate()
 
+	useEffect(() => {
+		setBadges(
+			project.badges.map((badge) => <Badge key={badge} slug={badge} />)
+		)
+	}, [])
+
 	return (
 		<StyledProjectCard
 			onClick={() => navigate(process.env.PUBLIC_URL + projectID)}
@@ -37,9 +45,7 @@ const ProjectCard = (props: ProjectCardProps) => {
 			<h1>{project.name}</h1>
 			<StyledImg src={project.image} />
 
-			{project.badges.map((badge) => {
+			{badges}
-				return <Badge key={badge} slug={badge} />
-			})}
 			<hr />
 			<div dangerouslySetInnerHTML={{ __html: project.overview }} />
 		</StyledProjectCard>