Nuxt.jsでポートフォリオサイトを作ろう #5: 作品紹介画面の作成

前回の続きです。

####作品紹介画面の表示

index.vueにコードを追加します。

pages/index.vue

<template>
    <div>
        <Top />
        <v-divider></v-divider>
        <Profile />
        <v-divider></v-divider> // 追記
        <Work /> // 追記
    </div>
</template>

<script>
import Top from '~/components/Top.vue'
import Profile from '~/components/Profile.vue'
import Work from '~/components/Work.vue' // 追記

export default {
  components: {
    Top,
    Profile,
    Work, // 追記
  }
}
</script>

次にcomponentsディレクトリにWork.vueを作成します。

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
                >
                    <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 }"
                      >
                        <v-card
                        :elevation="hover ? 16 : 2"
                        >
                          <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: 'Portfolio1', skill: 'skill1', src: 'https://placeimg.com/640/480/any', redirect_url: '#' ,flex: {cols: 12, sm: 6, md: 6}},
        { title: 'Portfolio2', skill: 'skill2', src: 'https://placeimg.com/640/480/any', redirect_url: '#' ,flex: {cols: 12, sm: 6, md: 6} },
        { title: 'Portfolio3', skill: 'skill3', src: 'https://placeimg.com/640/480/any', redirect_url: '#' ,flex: {cols: 12, sm: 6, md: 6} },
        { title: 'Portfolio4', skill: 'skill4', src: 'https://placeimg.com/640/480/any', redirect_url: '#' ,flex: {cols: 12, sm: 6, md: 6} },
      ],
    }),
  }
</script>

今回、static/imageディレクトリに画像は用意していません。代わりにPlaceIMGのダミー画像を利用しています。

ブラウザで画面を確認してみましょう。

上のような画面になっていたら、無事作成完了です。

カーソルを画像の上に乗せると画像が浮き出てくるようなエフェクトが動作することがわかります。

次回はお問い合わせフォームを作成します。

Nuxt.jsでポートフォリオサイトを作ろう #6: お問い合わせフォームの作成