HTML/CSS - 미니 포트폴리오 페이지

 

Mini-Portfolio

일주일간 만든 프로젝트들을 한 눈에 모아서 볼 수 있는 간단한 포트폴리오 페이지를 만들었다.

 

사용언어

HTML, CSS

 

화면 구성

 

1. 타이틀

텍스트 애니메이션 라이브러리(ztext.js)를 타이틀에 사용해봤다. 마우스를 올리면 약간 움직이는 효과를 볼 수 있다.

 

2. 프로필

프로필 사진과 간단한 소개글을 넣었다.

 

3. 기술 숙련도와 취미

공부하고 있는 언어와 프레임워크를 나열하고, 프로그레스 바로 숙련도를 나타냈다. 

 

 

4. 프로젝트

프로젝트 완성 후 박스에 캡쳐 이미지를 넣어서 링크할 예정이다.

 

 

리뷰

1. 프로필 이미지 테두리 색상에도 그라디언트를 주고싶었으나 border-image-source 속성을 사용해서 둥글게 border-radius를 적용할 수 없어서 그냥 단일컬러를 사용했다. 테두리 그라디언트 방법을 더 알아봐야겠다.

2. HTML에 <progress> 태그가 있다는 것을 처음 알았다. 프로그레스바 디자인을 찾아보고 오른쪽 정렬도 해보자. 열심히 공부해서 프로그레스 바를 파란색으로 꽉 채울 것이다.

3. 박스를 어떻게 나눠주고 어떻게 정렬할 수 있는지 더 공부해야겠다.

4. 미니 프로젝트까지 다 완성하면 부트스트랩 그리드를 사용해볼 계획이다. 미니 프로젝트도 작은 기능부터 하나씩 업데이트할 것이다.