소개

평소에는 서버 측을 중심으로 업무를 수행하고 있으며, Python과 Go를 중심으로 사용하고 있습니다.
클라우드를 사랑하고 디자인이 서투른 Bootstrap에 의존하는 타입입니다.

당돌에 포트폴리오를 만들고 싶어졌기 때문에 어떻게 만들까 생각했습니다.
CSS는 가능한 한 쓰지 않는 방향으로 가고 싶습니다 ...

(덧붙여서 Qiita 투고는 2년만 정도)

좋은 느낌의 CSS 프레임워크 찾기

있었습니다.
Vuetify라는 Material Design의 구성 요소 프레임 워크입니다.
React.js의 MaterialUI 같은 느낌.
공식 사이트

그런 이유로 한가로이 포트폴리오를 만들었습니다.
레이아웃의 고안도 포함해 소요 시간 7시간 정도입니다.

완제품

이런 느낌입니다

아이 캐치

페이지로 이동하면 먼저 타이핑 아이 캐치가 나타납니다.
타이핑 애니메이션은 iTyped.js를 사용했습니다.
엄청 쉽게 타이핑 애니메이션을 구현할 수 있습니다.
공식 사이트

프로필 이후

기본적으로 Vuetify 구성 요소에서만 구현됩니다.

Profile.vue

<v-card class="px-2 py-2">
  <div class="display-1 font-weight-regular text-xs-center font-italic">Skills</div>
  <div class="text-xs-center">
    <div v-for="(skill, index) in skills" :key="index">
      <div class="title font-weight-light font-italic mt-3 mb-1">{{ skill.title }}</div>
      <v-chip
       outline
       color="primary"
       v-for="(content, index) in skill.contents"
       :key="index"
      >{{ content }}</v-chip>
    </div>
  </div>
</v-card>

이런 식으로 오로지 Vuetify에 준비된 컴포넌트와 클래스를 사용합니다.v-chip 라든지는 사용 장소에 따라서는 좋은 느낌의 외관이 될 것 같습니다.
위의 코드로 다음과 같은 구성 요소를 만들 수 있습니다.

사이고에게

Material Design을 포트폴리오에 사용하는 예는별로 들은 적이 없지만, 조합 방법에 따라서는 포트폴리오에서도 충분히 사용할 수 있는 인상이었습니다.
그리고 디자인에 약한 자신에게 있어서는, 파트를 조합하는 것만으로 좋은 느낌의 사이트를 만들 수 버리는 것은 역시 강하다고...

소스 코드는 여기을 참조하십시오.