From 8a5d49707b8dfd6428fb4708bc7bed7ce5abc4bc Mon Sep 17 00:00:00 2001
From: developomp <developomp@gmail.com>
Date: Sat, 8 Jan 2022 19:30:40 +0900
Subject: [PATCH] redesigned portfolio page layout

---
 source/src/pages/Portfolio/index.tsx | 39 +++++++++++++++++-----------
 1 file changed, 24 insertions(+), 15 deletions(-)

diff --git a/source/src/pages/Portfolio/index.tsx b/source/src/pages/Portfolio/index.tsx
index 2d94c03..517d13a 100644
--- a/source/src/pages/Portfolio/index.tsx
+++ b/source/src/pages/Portfolio/index.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react"
 import { Helmet } from "react-helmet-async"
+import styled from "styled-components"
 
 import MainContent from "../../components/MainContent"
 import ProjectCard from "./ProjectCard"
@@ -9,6 +10,13 @@ import portfolio from "../../data/portfolio.json"
 
 import { PortfolioProject } from "../../../types/types"
 
+const SkillsImage = styled.img`
+	display: block;
+	margin-left: auto;
+	margin-right: auto;
+	max-width: 100%;
+`
+
 const Portfolio = () => {
 	const [projects, setProjects] = useState<JSX.Element[]>([])
 	const [skills, setSkills] = useState<JSX.Element[]>([])
@@ -20,6 +28,7 @@ const Portfolio = () => {
 			_projects.push(
 				<ProjectCard
 					key={projectID}
+					projectID={projectID}
 					project={
 						// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 						// @ts-ignore
@@ -67,24 +76,24 @@ const Portfolio = () => {
 					Skills
 				</h2>
 
-				<img
-					alt="programming skills"
-					src="/img/skills.svg"
-					// center image
-					style={{
-						display: "block",
-						marginLeft: "auto",
-						marginRight: "auto",
-					}}
-				/>
+				<SkillsImage alt="programming skills" src="/img/skills.svg" />
+
+				{/* Projects */}
+
+				<h2 id="projects">
+					<a className="header-anchor" href="#projects">
+						#
+					</a>{" "}
+					Projects
+				</h2>
+
+				{skills}
 
 				<br />
-				{skills}
+				<br />
+
+				{projects}
 			</MainContent>
-
-			<br />
-
-			{projects}
 		</>
 	)
 }