[HTML/CSS] 자기소개 웹 페이지 제작 #4 - 현재까지 진행 사항

오랜만에 글을 작성해본다...
그동안 웹 페이지를 만들면서 생각지도 못한 곳에서 레이아웃이 계속 무너지고..수정해야 할 부분이 자꾸 눈에 띄어서 코드를 매시간 고치는 일상이었다...😭😭

현재까지 계획한 기능은 대부분 구현했지만 레이아웃 배치와 디자인적인 부분이 마음에 들지 않아서 보완해야할 것 같다...;;;

다시 마음을 차분히 가라앉히고 해야 할 것들과 보완해야 할 부분, 수정해야 할 부분을 다시 정리하는 시간을 가져보자~!

1. 새로 구현한 사항

사진이 360도로 계속해서 돌아가는 애니메이션

그라데이션 이미지를 넣어 이 요소를 animation을 활용하여 360도로 계속 회전시켰다.

<div class="profile-box spin-circle"></div>

.profile-box {
  position: absolute;
  width: 415px;
  height: 415px;
  border-radius: 100%;
  background: url('img/coolHue-5EFCE8-736EFE.png') no-repeat;
  top: 50%;
  margin-top: -157.5px;
}

.spin-circle {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  100% {transform: rotate(360deg);}
}

아이콘에 마우스 오버 시 색이 변하면서 살짝 올라가는 기능

<a class="icon-hover" href="https://velog.io/@silviaoh"><i class="fab fa-blogger fa-2x"></i></a>
<a class="icon-hover" href="https://github.com/silviaoh"><i class="fab fa-github-square fa-2x"></i></a>

.icon-hover {
  display: inline-block;
  color: rgb(51, 51, 51);
  transition: all ease 0.5s
}

.icon-hover:hover {
  color: #85FFF5;
  transform: translate(0, -1vmin);
}

아이콘에 마우스 오버 시 툴팁이 출현

<div class="tooltip">
   <i class="far fa-envelope fa-2x icon-hover"></i>
   <div class="tooltip-content">
     <span>silvia.jisu.oh@gmail.com</span>
   </div>
</div>

.tooltip-content{
  visibility: hidden;
}

.tooltip:hover .tooltip-content {
  visibility: visible;
}

2. 수정해야 할 점

main.html

• main페이지 삭제 고민 중
  만들어놓고보니 main 페이지가 생각보다 중요한 내용과 기능이 별로 없어서 차라리 about me 페이지를 첫 페이지로 하여 나에 대한 정보를 추가하는 데 더 집중하는 것이 좋지 않을까라는 의문이 듦.

about.html

• 프로필 사진 형태 변경
  레이아웃이 자꾸 무너져서 프로필 사진만 배치해놓았는데 너무 휑해보여서 다시 명함 형식으로 디자인을 수정할 계획이다.
• skill 항목 추가

projects.html

• content 안에 제목과 설명을 추가
• project 내용 박스 크기를 좀 더 작게 수정함

contact.html

• contact box 디자인 변경

공통적으로 수정할 부분

• header : 메인 로고 추가, 그림자 효과 없애기, 폰트 변경
• footer : 저작권 문구 위치 변경, 오른쪽에 아이콘 추가

3. 보완해야 할 점

• 모바일 반응형 웹 구현
  지금 내 사이트는 pc 화면 크기를 기준으로 고정되어있기 때문에 추가적으로 모바일에서 어떻게 화면을 보여줄 것인지 계획이 필요하다.