[React] 포트폴리오 웹 사이트 제작 일지-6. 최상단 이동버튼, Tech Skill 기술스택 추가, Portfollio 내용 추가

최상단 이동버튼 구현

이미 포트폴리오 상단 메뉴바의 'Portfolio'를 누르면 최상단으로 이동이 가능하지만, 오른쪽 하단부에 최상단으로 이동이 가능한 버튼 하나를 추가하기로 했다.

 

아이콘은 아래 사이트를 이용했다.

https://icons8.kr/

무료 아이콘, 클립아트, 사진 및 음악

<a target="_blank" href="https://icons8.com/icon/oXht3X40XQJu/%EB%8D%94%EB%B8%94-%EC%97%85">더블 업</a> icon by <a target="_blank" href="https://icons8.com">Icons8</a>

사이트 내부에 위 링크를 추가해서 출처를 밝히면 무료로 아이콘을 사용할 수 있다. 

버튼은 간단하게 구현하고 이전에 만들어 두었던 moveToHomeHandler 함수를 연결해 주었다.

 

App.js

...

function App() {
  ...

  return (
    <div className="App">
      <TopButton moveToHome={moveToHomeHandler} />
      ...
    </div>
  );
}

export default App;

 

TopButton.js

import "./TopButton.css";

const TopButton = (props) => {
  return (
    <div className="top-btn" onClick={props.moveToHome}>
      <img src={process.env.PUBLIC_URL + "assets/images/up.png"} />
    </div>
  );
};

export default TopButton;

 

TopButton.css

.top-btn {
  position: fixed;
  right: 20px;
  bottom: 30px;
  margin: 10px 30px;
  background-color: rgba(245, 245, 220, 0.719);
  padding: 15px 17px;
  border-radius: 50%;
  z-index: 1;
  cursor: pointer;
}

.top-btn > img {
  width: 20px;
  height: auto;
}

 

Tech Skill 내용 추가 및 CSS 스타일링 수정

기존에 예시로 만들어 두었던 스타일링을 조금 수정하고, 기술 스택도 추가하였다.

기술스택 로고는 인터넷에 기술스택 logo (ex. react logo png)로 검색하여 저장했다.

 

Portfollio 내용 추가

아직 내용이 부실하긴 하지만 우선 초안을 작성해 보았다. 이미지는 추후 수정할 예정이고, 슬라이드를 통해 여러 개의 이미지를 노출시킬 생각이다.