[React] My Portfolio React 프로젝트

 

 

 

 

My Portfolio React 프로젝트

 

소요 기간 : 3일

Figma 기획 : https://make-somthing.tistory.com/77
Github: https://github.com/chalinuna/myweb
Demo: https://main--bright-mochi-309946.netlify.app/

 

 

 

---

 

 

 

 

사용 언어와 기술, 라이브러리 및 DB

Frontend - React (useNavigator, useState, React-Router-Dom@6, styled-components, SCSS(node-sass 라이브러리)) Unsplash Open api 배포 - Netlify

 

 

 

 

 

프로젝트 제작 계기

 

내 프로젝트와 간단한 이력서, 자기소개를 한꺼번에 보여줄 수 있는 포트폴리오 정리 페이지가 있으면 좋을 것 같아 리액트로 제작해 보았다. 

 

 

 

 

 

설명

 

 

Navmenu.js

 

▶ 반응형 Navmenu를 컴포넌트로 별도 작성한다. styled.component, SCSS를 이용하 작성하였으며 화면이 일정 크기 이하로 작아지거나, 모바일 화면이 될 경우 햄버거 메뉴로 바뀌도록 만들었다.

화면의 크기가 줄어들면 햄버거 메뉴로 바뀐다.

 

 

▶ 주요 코드

 

MinuMenu()라는 이름으로 컴포넌트를 작성해, 만일 Toggle 버튼이 클릭되면 오른쪽에서 슬라이드 형식으로 keyframe 애니메이션을 적용한 토글 메뉴를 보여주고, 그렇지 않을때는 메뉴를 감추어둔다.

function MiniMenu() {
  const [clicked, setClick] = useState(false);
  let navigate = useNavigate();

  return (
    <>
      {clicked ? <ToggleMenu /> : ""}
      <MiniHeader>
        <Row className="Row g-0">
          <Col className="logo">CHALI NUNA</Col>
          <Col onClick={() => setClick(!clicked)}>
            <img src={MenuSvg} alt="menu button" />
          </Col>
        </Row>
      </MiniHeader>
    </>
  );

 

 

 

 

 

 

Landing.js

 

▶ 메인 페이지. Figma 디자인 단계에 따라 pc 화면에서는 가로 2열의 디자인을 하고, 모바일 화면에서는 세로로 분할하여 볼 수 있도록 새로 디자인했다. Github 버튼을 누르면 깃허브 링크로 이동하고, 아래 동그라미에 마우스를 올리면 Blog 버튼이 나타난다. 

 

hover 셀렉터를 적용하였으며, 모바일 화면은 재디자인했다.

 

 

▶ 주요 코드

 

Row, Col을 통해 화면을 분할하였고, xl 이상에서만 10을 차지하도록 하여 그 이하에서는 세로정렬이 되도록 조절해 주었다.

function Landing() {
  return (
    <div className="animate__animated animate__flipInX page-top">
      <Container>
        <Row className="Row g-0">
          <Col xl={10}>
            ...
          </Col>
          <Col sm={2}>
           ...
          </Col>
        </Row>
      </Container>
    </div>
  );
}

 

 

 

 

Skills.js

 

▶ 내가 쓸 수 있는 코딩 기술을 기재한 페이지. 마찬가지로 Web 화면은 Figma 기획 단계의 디자인을 따랐으며, 모바일 화면에서는 세로로 정렬하되 구분선이 표시되도록 하였다. 보라색과 주황색의 마름모는 styled.components로 직접 그려 나타냈다.

 

 

 

 

▶ 주요 코드

 

styled.components를 사용해 재사용성이 뛰어난 컴포넌트를 만든다. props를 이용해 위치와 크기, 컬러값을 설정하였다.

const Diamond = styled.div`
  position: absolute;
  top: ${(props) => props.top};
  left: ${(props) => props.left};
  width: ${(props) => props.width};
  height: ${(props) => props.height};
  background-color: transparent;
  border: 1px solid ${(props) => props.color};
  margin: 3px 0 0 30px;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);

  -webkit-transform-origin: 0 100%;
  -moz-transform-origin: 0 100%;
  -ms-transform-origin: 0 100%;
  -o-transform-origin: 0 100%;
  transform-origin: 0 100%;
  @media (max-width: 994px) {
    display: none;
  }
`;

 

 

Projects.js

 

▶ 지금까지 진행한 토이 프로젝트들을 정리해놓은 페이지. 코드를 길게 늘리지 않고 재사용하이 위하여 map문을 이용해 반복 형식으로 구성하였고, 변수에 할당해놓은 object 를 이용하여 모달창과 이미지에 들어갈 내용을 설정했다. 각 이미지에 마우스를 올리면 어두웠던 이미지가 밝아지며, 클릭할 경우 해당 프로젝트를 자세히 설명하는 링크와 짧은 소개가 있는 모달창을 띄운다. 모달창은 아무곳을 클릭해도 다시 꺼질 수 있도록 설정하였다.

 

 

▶ 주요 코드

 

map문을 이용해 반복하고, 하위 컴포넌트에 props로 방금 그려진 map의 순번을 전달하였다. props로 순번을 전달받은 하위 컴포넌트 AboutProject는 모달창으로, props.num을 이용하여 사용자가 클릭한 이미지가 몇 번째 배열에 있는 값이었는지를 받아 모달창에 띄운다.

const Img = [ShortGif, TemplateImg, FullstackGif, MovieImg, PortImg];

...

function Projects() {
  const [show, setShow] = useState(false);
  const [num, setNum] = useState("");
  function showModal() {
    setShow(!show);
  }

  return (
    <div className="page-top">
      <div className="slide">
        <Row>
          {Img.map(function (contentArray, i) {
            return (
              <Col
                onClick={() => {
                  showModal();
                  setNum(i);
                }}
                key={i}
                md={6}
              >
                {show ? <AboutProject num={num} /> : ""}
                <PrjBox Img={Img[i]}>
                  <span>{about[i].subject}</span>
                </PrjBox>
              </Col>
            );
          })}
        </Row>
      </div>
    </div>
  );
}



function AboutProject(props) {
  return (
    <Modal>
      <Row>
        <Col xl={6}>
          <div className="about-area">
            <img className="img-area" src={Img[props.num]} alt="preview" />
          </div>
        </Col>
        
        ....

 

 

 

Contact.js

 

▶ 학력, 경력, 자격증 등 간단한 이력과 Unsplash Open api를 사용한 랜덤 프로필 이미지, 이름, 이메일을 기재한 Contact-me 페이지. 프로필 사진은 api를 통해, 다른 페이지에 들어갔다가 재접속할 경우 새로운 랜덤한 이미지로 바뀐다. 키워드를 'cat'으로 주었기 때문에 바뀌는 이미지는 모두 고양이 랜덤 이미지이다. 모바일 반응형으로, 모바일 뷰로 바꿀 경우 세로 배열로 바뀌도록 배치하였다.

 

Contact 페이지. Unsplash Open api를 사용하였다.

 

 

▶ 주요 코드

 

img 태그에 unsplash 의 링크를 등록해주면, api키 없이도 무료로 이미지를 가져와 사용할 수 있다.

 <img
            src="https://source.unsplash.com/featured/?cat"
            className="mini-img"
            alt="mini profile"
          />