[✨포트폴리오] 꾸준히 개선하자!

JiEun·2024년 2월 8일

개선 고도화 포트폴리오 포트폴리오 고도화

포트폴리오

목록 보기

5/5

시작

포트폴리오를 좀 더 개선하고자 컨설팅 신청해 참여도 하고
다양한 특강을 통해 나의 포트폴리오의 개선 점을 찾게 되었다.

또한 개인적으로 고민이였던 점을 커뮤니티를 통해 나와 공통적인 부분에 대해 피드백을 주셔서
이 점도 같이 수정하려고 한다.

가장 큰 차이점은 About Me을 interview 형식으로, 프로젝트 영역 tab기능 추가하기 등이지 않을까 싶다.

🔗 변경된 포트폴리오 보기

🔗 이전 포트폴리오 회고

🔗 포트폴리오 1차 개선 회고

Main

좌측 하단, 우측 퀵메뉴가 변경 되었다.
수정 전에는 좌측 하단에 업데이트, 이메일 주소가 있었다.

컨설팅을 통해 좀 더 직관적으로 표시해도 좋다고 말씀하셨고
우측 퀵 메뉴에 배치해 스크롤를 내려도 나의 정보를 빠르게 습득할 수 있도록 개선했다.

사용자가 굳이 이메일을 드래그 해 복사하는 행위를 하지 않고 단순 클릭으로도 나의 이메일 주소를 알 수 있게 되었다.

navigator.clipboard.writeText(mailUrl).then(() => {
  alert("이메일 주소가 복사되었습니다!");
}

navigator.clipboard.writeText(mailUrl) 를 통해 메일 주소를 복사하고
then 메서드를 사용해 복사가 성공했을 때 alert메서드를 통해 안내 멘트를 추가했다.

참고 : https://kenna-hwa.tistory.com/43

About Me

변경 전

About Me는 팀원 리뷰, 나의 마인드, 사용 스택 등
다양한 내용이 포함되어 있어 예전 부터 가독성이 떨어진다고 생각하고 있었다.

어떻게 개선하면 좋을지 고민하면서 구글링하고 있을 때
다른 분의 포트폴리오를 보게되었고 interview 형식으로 진행하시는게
눈에 띄고 내가 원하는 내용을 전달하기 좋다 생각했다.

변경 후

우선 배치 부터 변경했다.

About Me는 한 화면에 많은 내용을 보여주기 때문에 세로로 길게 작업해
가독성을 높히기 위해 변경하게 되었다.

먼저, 팀원 리뷰 버튼이 바로 보일 수 있도록 배치하고 하단에 interview 형식으로 내용을 배치했다.

사람은 왼쪽에서 오른쪽으로, 위에서 아래로 시선이 간다.
interview 역시 중요 순으로 배치하고 내가 강조하고 싶은 키워드를 굵게, 배경을 추가해 강조했다.

이전과 비교 했을 때 내용은 많아 졌지만 가독성이 좋아진 점을 알 수 있다.

내용은 뭔가 매끄럽게 읽히지 않아 좀 더 개선이 필요할 것 같다.

Career

Career 섹션은 사실 존재하지 않았다.

원래 학력, 경력이 같이 합쳐있었지만,
이번 커리어 코칭에서 비록 프론트엔드 경력은 아니지만
경력을 조금은 살려도 좋을 것 같다고 하셔서 배치를 하단에서 상단으로 옮기게 되었다.

결과적으로 카테고리 별로 분리가 되었고
내용이 적어지니 읽기도 편해졌다 생각한다.

변경 후

Project

나의 포트폴리오는 취업 목적도 있지만
내가 그동안 진행한 프로젝트를 보여주는 목표도 있었다.

점점 늘어나는 프로젝트에 대해 카테고리 분류가 필요하다 생각하게 되었고,
혼자 작업했는지, 팀으로 작업 했는지로 나눠 탭 메뉴를 배치해
보다 원하는 프로젝트를 쉽게 찾을 수 있게 개선했다.

변경 후

project 내용을 객체 형식으로 프로젝트 마다 분리해 작업했다.

// project7.ts
export const project7 = {
  name: 'poke',
  pointcolor: 'before:bg-[#ED1B24]',
  title: '포켓몬 도감',
  subtext:
    '포켓몬 API를 알게되어 작업을 진행하게 되었습니다.\nReact Query는 물론 무한 스크롤링, 다크모드, axios를 공부하기 위해 제작하게 되었습니다.\n\n현재는 완성도 높은 프로젝트를 구현하기 위해 꾸준히 개선하고 있습니다.',
  data: '2023.09 - 진행 중',
  team: '1인 (솔로)',
  tag: ['솔로', '토이'],
  .
  .
  .

해당 객체 데이터라서tag 라는 키 값을 보면
tag: ['솔로', '토이'] 라고 표시 되어있다.
각각의 프로젝트는 솔로, 팀에 따라 tag 키 값의 배열에 추가된다.

이부분을 이용해 해당 탭메뉴 클릭 시 tag에 '솔로'또는 '팀'이 있는지 확인하고
조건이 맞는 프로젝트만 화면에 표시하게 작업했다.

function Project({ id, navTabs }: TabsPropsT) {
  return (
    <>
    .
    .
    .
      <ScrollAni className={`${scrollEl ? 'fadeAn fadeIn' : 'fadeOut'}`} ref={scrollRef}>
        <Container id={id} ref={navTabs[1].targetRef} >
          <TabMenuList>
            {
              tabMenuList.map((item) => (
                <TabBtn key={item.type} type={item.type}>{item.name}</TabBtn>
              ))
            }
          </TabMenuList>
          <ProjectComponent>
            {filterDataList.length <= 0 && projectData.map((item, idx) => (
              <ProjectCard
                key={idx}
                name={item.name}
                title={item.title}
                subject={item.subject}
                tag={item.tag}
                imgurl={item.imgurl}
                giturl={item.giturl}
                depoloyurl={item.depoloyurl}
              />
            ))}
            {filterDataList.map((item, idx) => (
              <ProjectCard
                key={idx}
                name={item.name}
                title={item.title}
                subject={item.subject}
                tag={item.tag}
                imgurl={item.imgurl}
                giturl={item.giturl}
                depoloyurl={item.depoloyurl}
              />
            ))}
          </ProjectComponent>
        </Container>

      </ScrollAni>
    </>
  );
}

export default Project;

이후 filterDataList라는 데이터를 만들어
filterDataList가 있을 경우 filtering된 프로젝트를, 아닌 경우 전부 보여지게 작업했다.

이 점에 대해서는 Redux Toolkit을 이용해 전역으로 관리하게 작업했는데
전역으로 관리할 필요가 없는 것 같아 추후 시간 여유가 생기면 리팩토링을 진행해야겠다.

디테일 수정

디테일 영역에서 고민이 되었던 점은

첫째, 프로젝트에 문제 해결에 대한 내용이 나와있지 않았다.
이점에 대해선 충분히 인지하고 있었고 피드백을 받아 개선이 필요했었다.

둘째, 각각의 내용이 토글 버튼으로 구성되어 구체적인 내용을 볼려면
토글 버튼을 클릭해 확인해야한다.

1. 사용 기술 및 언어를 제외한 나머지는 보이게 하기

먼저, tools를 제외한 모든 내용을 토글 버튼이 아니여도 보여지도록 수정했다.

사용 기술 및 언어는 각각의 프로젝트에서 동일한 내용이 포함되어있고
이 때문에 하단 내용들이 묻힐 것 같았다.

// project7.ts
export const project7 = {
  name: 'poke',
  pointcolor: 'before:bg-[#ED1B24]',
  title: '포켓몬 도감',
  subtext:
    '포켓몬 API를 알게되어 작업을 진행하게 되었습니다.\nReact Query는 물론 무한 스크롤링, 다크모드, axios를 공부하기 위해 제작하게 되었습니다.\n\n현재는 완성도 높은 프로젝트를 구현하기 위해 꾸준히 개선하고 있습니다.',
  data: '2023.09 - 진행 중',
  team: '1인 (솔로)',
  tag: ['솔로', '토이'],
  .
  .
  .
  tools: [
      {
        title: 'Vite',
        detail:
          'Vite는 최신 브라우저의 기본 ES 모듈 기능을 사용하여 더 빠른 개발 서버 시작 및 주문형 컴파일을 가능하게 합니다. 이로 인해 CRA의 Webpack 기반 서버에 비해 응답성이 뛰어난 개발 경험을 얻을 수 있었습니다.',
      },
  .
  .
  .
  ]