Zenn
Closed32

ポートフォリオ作りたい

eetann / えーたんeetann / えーたん

ポートフォリオを作りたい

まとめたいもの

  • GitHub
  • Zennの本
  • 自作Chrome拡張機能
  • noteの記事

背景

アピール的な意味

Twitterのプロフィール欄に上記のURLのどれか一つだけしか貼らないのはもったいない気がした。
記事などは厳密にはWORKSというよりかはそれに付随する物が多いが、｢この人はこんな雰囲気で文章を書くのだなぁ｣と知ってもらえればと思う。

自己満足

本来であれば他人に対してアピールするためのものであるが、僕の場合は定期的に振り返ってこれからも頑張るための原動力にしたい。
HTML、CSSを最近全然書いていないから復習がてら作成する。

ポトフォーリオかと思ってました。ポトフの親戚的な語呂だなぁ考えていたら違った。

eetann / えーたんeetann / えーたん

参考にしたいもの

あくまでの参考にするのは一部のみ

VSCode風の表示。ソースコードをよく見ておきたい。

Vim風の表示。デザインの参考に。

Slack風

Tailwindを使ったプロフィールカード

eetann / えーたんeetann / えーたん

表示したいもの

  • Zennの本
  • 自作Chrome拡張機能
    • Storeのリンクと記事をセット
  • noteの記事
    • おすすめだけ
  • GitHub
    • 主なレポジトリのみ
  • ポートフォリオのソースコード最終更新日時
  • (もし自動で取得する何かがあれば)活動の最終日時
  • 簡単なプロフィール
    • 名前
    • アイコン
    • なんかひとこと
  • 今使っている主な環境
    • 表示できそうなアイコンがあればそれを使いたい
  • 一応シェアボタン的なものをつけてみたい
eetann / えーたんeetann / えーたん

ファビコン

eetann / えーたんeetann / えーたん

仕様がいつ変わるかわからない&公式のAPIじゃないから配布されているリソースを使うことにした。

eetann / えーたんeetann / えーたん

Vueでyamlの読み込み(Webpackの設定)

fsで怒られる関係で、js-yamlではなく、yaml-loaderを使う。
vue.config.jsのconfigureWebpackでwebpackの設定を書ける。

module.exports = {
  runtimeCompiler: true,
  pages: {
    index: {
      entry: "src/main.js",
      title: "eetann's portfolio"
    }
  },
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.(yml|yaml)$/,
          use: [
            {
              loader: require.resolve('json-loader')
            },
            {
              loader: require.resolve('yaml-loader')
            }
          ]
        }
      ]
    }
  }
}
eetann / えーたんeetann / えーたん

公式ドキュメントWorking with Webpack | Vue CLIに設定書いて新しいloaderの追加方法書いてあったので変更。

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('yaml')
      .test(/\.ya?ml?$/)
      .use('json-loader')
      .loader('json-loader')
      .end()
      .use('yaml-loader')
      .loader('yaml-loader')
      .end()
  },
}
eetann / えーたんeetann / えーたん

VueとTailwindでモーダル

参考になりそう
VueJS Modal | Tailwind Starter Kit by Creative Tim
VueJS Modal

💡今の所のアイデア
ヘッダーに閉じるボタンがあるので、フッダーにはボタンはいらない。

  • ヘッダー：名前
  • フッダー：インストールリンク
  • ボディー
    • 画像
    • タグ
    • 説明
    • 記事のリンク集
eetann / えーたんeetann / えーたん

Vueの子コンポーネントすべて同じ表示問題

v-forの中の子コンポーネントの表示フラグが同じだと、表示フラグが立った度にすべての子コンポーネントが同時に表示されてしまう。
以下のように、表示フラグを立てる際にデータも渡すこと。

かなり端折って書いている。

親コンポーネント

MyModalが子で、workが子に渡すデータ、showModalが表示フラグ

<div
  v-for="work in works"
  :key="work.added_date"
  class="xl:w-1/4 md:w-1/2 p-4"
>
  <div class="p-6 bg-gray-100 rounded-lg" v-on:click="openModal(work)">
  ここをクリックすると子コンポーネント=モーダルが表示
  </div>
  <MyModal
    v-if="showModal == work.release_date"
    v-bind:work="work"
    v-on:close="closeModal"
  ></MyModal>
</div>

import MyModal from "./MyModal.vue";
export default {
  name: "MyWorks",
  components: { MyModal },
  data() {
    return { works: [], showModal: "" };
  },
  methods: {
    openModal(work) {
      this.showModal = work.release_date;
    },
    closeModal() {
      this.showModal = "";
    },
  },
};
eetann / えーたんeetann / えーたん

Tailwind CSS で max-h-5/6 を使いたい

max-h-5 (= max-height: 1.25rem;) とか、max-h-full (= max-height: 100%;) はあるが、max-h-5/6 (= max-height: max-height: 83.333333%;) は無い。

Max-Height - Tailwind CSS に載っている通り、tailwind.config.jsに設定を加えれば良い。

定義されていない指定をすると狂うのでちゃんと確認し、無ければ自分で設定すること。
h-hogeにはあってもmax-h-hogeには無いのがたくさんあるので要注意。

eetann / えーたんeetann / えーたん

Tailwind CSS で デフォルトのspacingを維持して新しい設定を加えたい。

h-1/10のような新しいspacingを加えたいときは、themeのspacingではなく、themeのextendのspacingに設定を加える。

tailwind.config.jsの例

module.exports = {
  theme: {
    extend: {
      spacing: {
        '1/10': '10%',
      },
    },
  },
}

参考：Customizing Spacing - Tailwind CSS

eetann / えーたんeetann / えーたん

進捗2021/01/04

モーダルを実装。
モーダルのメインの部分には、

  • 使用画像
  • タグ
  • 一言説明

を表示。
進捗

加えて、それに関わるGitHubレポジトリや記事を今空けているところ表示したい。
ブログカードとして表示しようかと思ったけど、表示箇所が大きい&タイトル情報は上記の｢一言説明｣と重複して煩わしいので普通にリンクすることにする。

eetann / えーたんeetann / えーたん

ヘッダー部分に名前表示すると

  • 名前長くなったときの対処がしづらい
  • モーダルを開く前の表示とレイアウトが異なる

ので、ボディーへ。

eetann / えーたんeetann / えーたん

"Here!"の部分は、モーダルに表示する内容によって

  • INSTALL
  • READ MORE

とかいろいろ考えたけど、そこで条件分岐するのは面倒なのでHereにした。
英語的に妥当なのかは不明。

eetann / えーたんeetann / えーたん

TailwindCSSでのclassの入れ替えをvim-swapでやるのがすごく便利。
これは後で記事に入れたい。

let g:swap#rules = deepcopy(g:swap#default_rules)
let g:swap#rules += [{
      \   "filetype": ['html', 'vue'],
      \   "delimiter": ['\s'],
      \   "surrounds": ['class="', '"', 0],
      \ },{
      \   "filetype": ['html', 'vue'],
      \   "delimiter": ['\s'],
      \   "surrounds": ["class='", "'", 0],
      \ }]
このスクラップは2021/01/08にクローズされました