pomp/pompy.dev
1
0
Fork 0
Code Issues 8 Pull requests Activity Actions

refactor: improve code structure

Browse source
This commit is contained in:
Kim, Jimin 2023-08-08 00:39:28 +09:00
parent d4eef3d0dd
commit db05a792df
Signed by: pomp
GPG key ID: CE1DDB8A4A765403
4 changed files with 28 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

19
apps/portfolio/src/app/page.tsx
View file

@ -5,12 +5,16 @@ import type { Metadata } from "next"
import Badge from "@/components/Badge"
import ProjectCard from "@/components/ProjectCard"
const projects: JSX.Element[] = []
const skills: JSX.Element[] = portfolio.skills.map((slug) => {
function getSkills(): JSX.Element[] {
return portfolio.skills.map((slug) => {
return <Badge key={slug} slug={slug} />
})
})
}
for (const projectID in portfolio.projects) {
function getProjects(): JSX.Element[] {
const projects = []
for (const projectID in portfolio.projects) {
projects.push(
<ProjectCard
key={projectID}
@ -22,6 +26,9 @@ for (const projectID in portfolio.projects) {
}
/>
)
}
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="projects">{projects}</div>
<div className="my-4 flex flex-wrap gap-2">{getSkills()}</div>
<div className="projects">{getProjects()}</div>
</>
)
}

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

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

2
apps/portfolio/src/components/Badge/Badge.tsx
View file

@ -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) {

2
apps/portfolio/src/components/ProjectCard/ProjectCard.tsx
View file

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