소개

평상시는, 독학으로 개발을 하고 있는 초학자입니다.
지금까지 주로 Rails를 사용하여 개발을 하고 있었지만, 작성한 Web페이지의 센스가 괴멸적이었으므로, 자신에 대해 정리한 포트폴리오 사이트를 작성해 보았습니다.

URL : htps // 마사노리 키무라. 네 tぃfy. 아 p/

사용 언어: Vue.js
FW: Vuetify

톱 페이지는 이런 느낌

의식한 것

우선은 「포트폴리오 사이트」에서 검색해, 여러가지 사이트를 보고 공부했습니다.

그리고 자신의 포트폴리오 사이트에 도입하려고 의식한 점은, 이하의 3개입니다.

Google Fonts를 사용하여 얇은 글꼴로 만듭니다

별로 색을 사용하지 않는다 (화려하다고 센스가 있다)

톱 페이지 배경을 인상적인 이미지로 만듭니다

결국 폰트는 'Recursive' 'M PLUS 1p'를 사용했습니다.

헤더

헤더는 앵커 링크를 사용하여 지정된 구성 요소로 스크롤 할 수 있도록 만들었습니다.
스크롤을 어떻게 구현하는지는 고민했지만, Vuetify라면 간단하게 구현할 수 있었습니다.

# Aboutページの場合
@click="$vuetify.goTo(href='#about')"          

TOP 페이지

TOP 페이지에 사용한 이미지는 Canva에서 당겨 온 것입니다.

이미지 위에 문자를 겹쳐서 애니메이션도 사용했습니다.
애니메이션은 Vue의 공식 사이트에 이름이 올랐던 Animate.css를 사용했습니다.

단 한 줄의 코드로 애니메이션을 구현할 수 있습니다.

ABOUT 페이지

ABOUT 페이지에서는 Vuetify의 'Timelines'를 사용했습니다.

htps : // ゔ에치 fyjs. 코 m / 엔 / 코 m 포넨 ts / 치메 페네 s / # 치메 페네 s


얇은 경력입니다만, 알기 쉽네요.

SKILL 페이지

SKILL 페이지에서는 자신 취급할 수 있는 언어·FW·인프라 주위에 대해 정리했습니다.
페이지의 레이아웃은 제일 헤매었습니다만, 이런 느낌이 되었습니다.


아이콘은 프로그래밍계의 아이콘이 갖추어져 있는 「DEVICON」을 사용했습니다.
h tps : // / ゔぃこん s. 기주 b. 이오/데ゔぃこん/

또한 스킬 레벨을 나타내는 별도 Vuetify에서 구현했습니다.
htps : // ゔ에치 fyjs. 코 m / 엔 / 코 m 포넨 ts / 라친 gs /

WORKES 페이지

WORKES 페이지는 간단하며 포트폴리오 이미지를 나란히 놓고 클릭하면 모달 창이 열립니다.


고맙게도 이 모달 창도 Vuetify에서 구현했습니다.
htps : // ゔ에치 fyjs. 코 m / 엔 / 코 m 포넨 ts / ぢ 아 gs /

요약

이런 식으로 포트폴리오 사이트를 만들었습니다.
이전에 만들었던 웹 서비스의 페이지와 비교해, 아직입니다만 다소 볼 수 있게 되었다고 생각합니다.