ポートフォリオサイトを作ってみたいー！
公開までの方法が知りたい！
本記事はこういった悩みに対しての記事です！
この記事を書いている僕（＠Shoot58153748）は、
2020年4月現在メガベンチャーの社内スタートアップの部署で
エンジニア（2年目突入）をしており、
プログラミング未経験からメガベンチャーへの転職を成功させた経験・ノウハウ
Webエンジニアになってから学んだこと
をブログにまとめています。
今回は
「作品紹介画面」を作成します！
Nuxtインストール記事はこちら（Nuxtインストールと画面設計）
学びポイントを以下にまとめました。
是非参考にしてください！
今回のポイント
- 画像バナー一覧表示
- v-hoverによるホバーイベント設定
- elevationによる表示高さ設定
本ブログポートフォリオサイト作成チュートリアル
https://kumatetsublog.com/nuxt-vuetify-netlify-portfolio-tutorial
SHOOTのポートフォリオサイト(完成像)
https://shoot-portfolio.netlify.com
Github
https://github.com/Shuto-san/laravel-vue-docker
作品紹介画面実装フロー
実装方針まとめ
- 画面の実装はVuetifyを使用
- v-hoverでホバー設定
- バナーサイズをレスポンシブ化
作品紹介画面（完成像）
編集ファイル
pages/index.vue：コンテンツ部分（各コンポーネント呼び出し）components/Work.vue：作品紹介コンポーネント
Nuxtプロジェクトのディレクトリ構成は以下になります。
※選択されているファイルがポートフォリオ作成にあたり編集または新規作成が必要なファイルです。
ソースコード
※ソースコード内で解説してます！
pages/index.vue
<template>
<div>
// 各コンポーネント呼び出し
<Top />
<v-divider></v-divider>
<Profile />
<v-divider></v-divider>
<History />
<v-divider></v-divider>
<Work />
<v-divider></v-divider>
<Contact />
</div>
</template>
<script>
// コンポーネントインポート
import Top from '~/components/Top.vue'
import Profile from '~/components/Profile.vue'
import History from '~/components/History.vue'
import Work from '~/components/Work.vue'
import Contact from '~/components/Contact.vue'
export default {
// コンポーネント登録
components: {
Top,
Profile,
History,
Work, //今回はこのコンポーネント
Contact
}
}
</script>components/Work.vue
<template>
<div id="work">
<v-container
fluid>
<v-card
width="100vw"
>
<v-card-title
class="justify-center display-1 font-italic"
>
Work
</v-card-title>
<v-row
>
<!-- レスポンシブでバナーサイズ調整(cols:スマホサイズ,sm:タブレットサイズ,md:ラップトップサイズ、maxは12) -->
<v-col
v-for="(card, index) in cards"
:key="card.index"
:cols="card.flex.cols"
:sm="card.flex.sm"
:md="card.flex.md"
class="pa-10"
>
<!-- リンク設定 -->
<a :href="card.redirect_url">
<!-- ホバー設定 -->
<v-hover
v-slot:default="{ hover }"
>
<!-- マウスを上に持ってくるとz-indexが2->16に浮き出てくる設定 -->
<v-card
:elevation="hover ? 16 : 2"
>
<!-- 画面リンク(src)と画像色に傾斜をつける(gradient)、v-textで画像上にテキスト（card.title, card.skill） -->
<v-img
:src="card.src"
class="white--text align-end"
gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)"
height="200px"
>
<v-card-title v-text="card.title"></v-card-title>
<v-card-text v-text="card.skill"></v-card-text>
</v-img>
</v-card>
</v-hover>
</a>
</v-col>
</v-row>
</v-card>
</v-container>
</div>
</template>
<script>
export default {
data: () => ({
cards: [
{ title: 'Portfolio Page', skill: 'Nuxt×Vuetify', src: 'https://cdn.vuetifyjs.com/images/cards/house.jpg', redirect_url: 'https://shoot-portfolio.netlify.com/' ,flex: {cols: 12, sm: 6, md: 6}},
{ title: 'Twitter-like SNS', skill: 'Laravel×Vue×MySql×MySql×Redis', src: 'https://cdn.vuetifyjs.com/images/cards/road.jpg', redirect_url: 'https://kumatetsublog.com/laravel-tutorial-web-application' ,flex: {cols: 12, sm: 6, md: 6} },
{ title: 'SHOOT Blog', skill: 'Wordpress', src: 'https://cdn.vuetifyjs.com/images/cards/plane.jpg', redirect_url: 'https://kumatetsublog.com/' ,flex: {cols: 12, sm: 6, md: 6} },
],
}),
}
</script>
<style>
</style>
以下が、作品紹介画面の重要項目です！v-hover：画像上にマウスを乗せるとイベント発生（hoverの値がfalse->true）
変数hoverを用いてcardのelevationを制御し、画面上に浮き出てくるように設定(高さ2->16):v-cols, :v-sm, :s-md：サイズをバインディングしてレスポンシブ化に対応
今回はそれぞれ12,6,6に設定
全て同じ設定なので、変数化する必要はありませんが、今後バナーによってサイズを出し分けする可能性を考慮しました。
画像リンク、クリックした時の遷移先なども変数で管理しています。
まとめ
以上、ポートフォリオサイトの作品紹介画面を作成しました！
最後に本記事でのポイントをまとめますと、、
ポイント
- 画像バナー一覧表示
- v-hoverによるホバーイベント設定
- elevationによる表示高さ設定
次回は、最後のコンポーネント（ページ最下部）となる、
お問い合わせフォームを作成します！
ポートフォリオサイトの作成〜公開までのプロセス（全8回）
を全て記事にしているので是非参考にして独自のポートフォリオを作ってみてくださいね！
コメント