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

redesigned portfolio page layout

Browse source
This commit is contained in:
Kim, Jimin 2022-01-08 19:30:40 +09:00
parent d31dff53ae
commit 8a5d49707b
1 changed files with 24 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

35
source/src/pages/Portfolio/index.tsx
View file

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