added localization to portfolio page

generate/index.ts

@@ -28,7 +28,8 @@ export const map: Map = {
 }
 export const seriesMap: SeriesMap = {}
 export const portfolioData: PortfolioData = {
-	overview: "",
+	overview_en: "",
+	overview_kr: "",
 	skills: new Set(),
 	projects: {},
 }

generate/recursiveParse/parsePortfolio.ts

@@ -9,12 +9,14 @@ import { portfolioData } from ".."
 import { DataToPass } from "."
 
 export default function parsePortfolio(data: DataToPass): void {
-	const { urlPath, markdownRaw, markdownData } = data
+	const { urlPath, markdownRaw, markdownData, path } = data
 
 	// check if the file is a portfolio overview or a project
 	// explanation: file `0.md` is a special file (i.e. not a regular project file)
-	if (urlPath.slice(urlPath.lastIndexOf("/") + 1) == "0") {
-		portfolioData.overview = markdownData.content
+	if (path.endsWith("/0.md")) {
+		portfolioData.overview_en = markdownData.content
+	} else if (path.endsWith("/0.kr.md")) {
+		portfolioData.overview_kr = markdownData.content
 	} else {
 		if (!urlPath.endsWith(".kr")) {
 			if (markdownData.badges) {

markdown/portfolio/0.kr.md

@@ -0,0 +1,7 @@
+## 교육
+
+현재 [홍익대학교](https://wwwce.hongik.ac.kr) 컴퓨터공학과에 진학중.
+
+## 기술
+
+<img alt="programming skills" src="/img/skills.svg" style="display: block; margin-left: auto; margin-right: auto; max-width: 100%;" />

src/pages/Portfolio/index.tsx

@@ -1,15 +1,20 @@
-import { useEffect, useState } from "react"
+import { useContext, useEffect, useState } from "react"
 import { Helmet } from "react-helmet-async"
 
 import MainContent from "../../components/MainContent"
-import ProjectCard from "./ProjectCard"
 import Badge from "../../components/Badge"
+import ProjectCard from "./ProjectCard"
 
 import portfolio from "../../data/portfolio.json"
 
-import { PortfolioProject } from "../../../types/types"
+import { globalContext } from "../../globalContext"
+
+import type { PortfolioProject } from "../../../types/types"
 
 const Portfolio = () => {
+	const { globalState } = useContext(globalContext)
+	const locale = globalState.locale
+
 	const [projects, setProjects] = useState<JSX.Element[]>([])
 	// eslint-disable-next-line @typescript-eslint/no-unused-vars
 	const [skills, setSkills] = useState<JSX.Element[]>([])
@@ -43,7 +48,7 @@ const Portfolio = () => {
 	return (
 		<>
 			<Helmet>
-				<title>pomp | Portfolio</title>
+				<title>pomp | {locale == "en" ? "Portfolio" : "포트폴리오"}</title>
 
 				<meta property="og:title" content="Portfolio" />
 				<meta property="og:type" content="website" />
@@ -56,13 +61,18 @@ const Portfolio = () => {
 			</Helmet>
 
 			<MainContent>
-				<h1>Portfolio</h1>
+				<h1>{locale == "en" ? "Portfolio" : "포트폴리오"}</h1>
 
 				<hr />
 
 				{/* rendered markdown */}
 
-				<div dangerouslySetInnerHTML={{ __html: portfolio.overview }} />
+				<div
+					dangerouslySetInnerHTML={{
+						__html:
+							locale == "en" ? portfolio.overview_en : portfolio.overview_kr,
+					}}
+				/>
 
 				{/* Projects */}
 
@@ -70,7 +80,7 @@ const Portfolio = () => {
 					<a className="header-anchor" href="#projects">
 						#
 					</a>{" "}
-					Projects
+					{locale == "en" ? "Projects" : "프로젝트"}
 				</h2>
 
 				{/* todo: filter projects by skill */}

types/types.ts

@@ -111,7 +111,8 @@ export interface SeriesEntry {
 
 export interface PortfolioData {
 	// rendered markdown html
-	overview: string
+	overview_en: string
+	overview_kr: string
 
 	// a set of valid simple icons slug
 	skills: Set<string>