first commit

README.md

@@ -0,0 +1,181 @@
+# README
+
+macOS上での開発環境の構築手順を示す。
+
+### Homebrewのインストール
+
+```
+# インストールする
+/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
+
+# 確認する
+$ brew -v
+#> Homebrew 1.2.3
+#> Homebrew/homebrew-core (git revision 7212; last commit 2017-07-02)
+```
+
+### nodebrewのインストール
+
+```
+# インストールする
+$ curl -L git.io/nodebrew | perl - setup
+
+# パスを通す
+# ~/.bash_profileに追加
+export PATH=$HOME/.nodebrew/current/bin:$PATH
+
+# node.jsのインストール可能なバージョンを確認する
+$ nodebrew ls-remote
+
+# node.js v9.6.1のインストール
+$ nodebrew install-binary v9.6.1
+
+# 確認する
+$ nodebrew ls
+v9.6.1
+
+current: none
+
+# node.jsをセットアップする
+$ nodebrew use v9.6.1
+
+# 確認する
+$ node -v
+v9.6.1
+```
+
+### yarnのインストール
+```
+$ brew install yarn
+```
+
+### hugoのインストール
+```
+$ brew install hugo
+```
+
+### yarn installの実行
+```
+$ yarn install
+```
+
+### ローカルサーバーを立ち上げる
+```
+$ yarn start
+```
+
+### buildする
+```
+$ yarn build
+```
+
+---
+
+# PostCSSのプラグイン
+
+- [postcss-cli](https://www.npmjs.com/package/postcss-cli)
+
+CLIでPostCSSを使うプラグイン。これがないと何も始まらない
+
+- [cssnano](https://www.npmjs.com/package/cssnano)
+
+buildしたPostCSSをminifyする。不必要はベンダープレフィックスは自動的に削除する
+
+- [stylelint](https://github.com/stylelint/stylelint/blob/master/docs/user-guide/postcss-plugin.md)
+
+PostCSSのリンター。プラグインにも対応
+
+stylelint.config.jsで[ルールの設定が必要](https://stylelint.io/)
+
+- [autoprefixer](https://github.com/postcss/autoprefixer)
+
+ベンダープレフィックスを自動的につけてくれる。設定で対象ブラウザ・バージョン範囲の設定が可能
+
+- [postcss-reporter](https://github.com/postcss/postcss-reporter)
+
+stylelintのログを見やすくしてくれる
+
+- [postcss-import](https://www.npmjs.com/package/postcss-import)
+
+PostCSSでimportが使えるようになる
+
+```
+@import 'mixins.css';
+```
+
+- [postcss-mixins](https://www.npmjs.com/package/postcss-mixins)
+
+PostCSSでmixinsが使えるようになる
+
+```
+/* postcss.css */
+@define-mixin titleBackground $titleBackground { padding: 8px; background: $titleBackground; border-radius: 4px; }
+.mixins { @mixin titleBackground #f8f8f9;}
+
+/* build.css */
+.mixins { padding: 8px; background: #f8f8f9; border-radius: 4px;}
+```
+
+- [postcss-simple-vars](https://www.npmjs.com/package/postcss-simple-vars)
+
+PostCSSで変数が使えるようになる
+
+```
+/* postcss.css */
+$textColor: #212121;
+$baseFontSize: 16px;
+
+body { color: $textColor; font-size: $baseFontSize;}
+
+/* build.css */
+body { color: #212121; font-size: 16px;}
+```
+
+- [postcss-nested](https://www.npmjs.com/package/postcss-nested)
+
+PostCSSでNest（入れ子）が使えるようになる
+
+- [postcss-custom-media](https://www.npmjs.com/package/postcss-custom-media)
+
+@mediaの指定を簡単にする
+
+```
+/* postcss.css */
+@custom-media --smartphone (max-width: 600px);
+.media { width: 100%;
+  @media(--smartphone) { width: 95%;}
+}
+
+/* build.css */
+.media { width: 100%;
+  @media (max-width: 600px) { width: 95%;}
+}
+```
+
+- [postcss-pixels-to-rem](https://www.npmjs.com/package/postcss-pixels-to-rem)
+
+pixel単位をrem,em単位に変換する
+
+```
+/* postcss.css */
+h1 { font-size: rem(32); margin-bottom: 32px;}
+h2 { font-size: em(24); margin-bottom: 24px;}
+h3 { font-size: 16px; margin-bottom: 16px;}
+
+/* build.css */
+h1 { font-size: 2rem; margin-bottom: 2rem;}
+h2 { font-size: 1.5em; margin-bottom: 1.5rem;}
+h3 { font-size: 1rem; margin-bottom: 1rem;}
+```
+
+- [postcss-utilities](https://www.npmjs.com/package/postcss-utilities)
+
+[あらかじめ用意されたパッケージ](https://ismamz.github.io/postcss-utilities/)が使えるようになる
+
+```
+/* postcss.css */
+.margins { @util margin(12px 24px null 36px);}
+
+/* build.css */
+.margins { margin-top: 12px; margin-right: 24px; margin-left: 36px;}
+```

archetypes/default.md

@@ -0,0 +1,6 @@
+---
+title: "{{ replace .Name "-" " " | title }}"
+date: {{ .Date }}
+draft: true
+---
+

config.toml

@@ -0,0 +1,50 @@
+BaseURL = "https://shinya-sato.com/"
+defaultContentLanguage = "ja"
+title = "Shinya Sato Portfolio"
+Publishdir = 'docs'
+Paginate = 12
+googleAnalytics = "UA-120088829-1"
+
+[params]
+  github = "https://github.com/cookboys"
+
+[Languages]
+[Languages.ja]
+  weight = 1
+  title = "Shinya Sato Portfolio"
+  languageName = "日本語"
+  languageCode = "ja-JP"
+  description = "初めまして、1987年生まれのデザイナーのサトウシンヤです。デザイン、コーディング、静的サイトジェネレーターを使ったサイト制作が得意です。"
+
+[Languages.en]
+  weight = 2
+  title = "Shinya Sato Portfolio"
+  languageName = "English"
+  languageCode = "en-US"
+  description = "Nice to meet you, my name is Satukinya, a designer born in 1987. I am good at designing, coding, and creating sites using static site generators."
+
+[Languages.cn]
+  weight = 3
+  title = "Shinya Sato Portfolio"
+  languageName = "中文(简体)"
+  languageCode = "zh-CN"
+  description = "很高兴见到你，我的名字是Satukinya，1987年出生的设计师。 我擅长使用静态站点生成器进行设计，编码和创建站点。"
+
+[[menu.languages]]
+  name = "日本語"
+  weight = 1
+  url = "/"
+
+[[menu.languages]]
+  name = "English"
+  weight = 2
+  url = "/en/"
+
+[[menu.languages]]
+  name = "中文(简体)"
+  weight = 3
+  url = "/cn/"
+
+[taxonomies]
+tag = "tags"
+category = "categories"

content/banner/cn/banner01_facebook01.cn.html

@@ -0,0 +1,22 @@
+---
+title: "Facebook Banner 01"
+date: 2018-04-30
+categories: ['banner']
+caption: "Facebook / Photoshop / 1.5小時"
+eyecatch: '/images/banner/facebook_01.png'
+url: '/cn/banner/facebook01/'
+draft: false
+---
+
+<article class="post__page">
+  <div class="post__banner__wrapper">
+    <h3>Facebook Banner 01</h3>
+    <small>Facebook / Photoshop / 1.5小時</small>
+    {{< figure src="/images/banner/facebook_01.png" alt="Facebook Banner 01">}}
+  </div>
+  <div class="text__wrapper">
+    <h2 class="text__wrapper__title">概念</h2>
+    <p>它成為在Facebook上發布的橫幅。</p>
+    <p>我們採用了淺藍色，使整個彩色圖像成為Coincheck，並採用了類似於淺藍色補色的橙色，以使文字脫穎而出。</p>
+  </div>
+</article>

content/banner/cn/banner02_facebook02.cn.html

@@ -0,0 +1,22 @@
+---
+title: "Facebook Banner 02"
+date: 2018-04-25
+categories: ['banner']
+caption: "Facebook / Photoshop / 2小時"
+eyecatch: '/images/banner/facebook_02.png'
+url: '/cn/banner/facebook02/'
+draft: false
+---
+
+<article class="post__page">
+  <div class="post__banner__wrapper">
+    <h3>Facebook Banner 02</h3>
+    <small>Facebook / Photoshop / 2小時</small>
+    {{< figure src="/images/banner/facebook_02.png" alt="Facebook Banner 02">}}
+  </div>
+  <div class="text__wrapper">
+    <h2 class="text__wrapper__title">概念</h2>
+    <p>它成為在Facebook上發布的橫幅。</p>
+    <p>Coincheck的目標是為女性提供創意，因此我們試圖通過將女性圖片作為一個整體並在右下角放置一個按鈕來提高點擊率來提高點擊率。</p>
+  </div>
+</article>

content/banner/cn/banner03_facebook03.cn.html

@@ -0,0 +1,22 @@
+---
+title: "Facebook Banner 03"
+date: 2018-04-20
+categories: ['banner']
+caption: "Facebook / Photoshop / 2.5小時"
+eyecatch: '/images/banner/facebook_03.png'
+url: '/cn/banner/facebook03/'
+draft: false
+---
+
+<article class="post__page">
+  <div class="post__banner__wrapper">
+    <h3>Facebook Banner 03</h3>
+    <small>Facebook / Photoshop / 2.5小時</small>
+    {{< figure src="/images/banner/facebook_03.png" alt="Facebook Banner 03">}}
+  </div>
+  <div class="text__wrapper">
+    <h2 class="text__wrapper__title">概念</h2>
+    <p>它成為在Facebook上發布的橫幅。</p>
+    <p>根據上訴軸“日本處理的貨幣數量”，我們為每種貨幣添加了一個標誌，並使其具有一定的流行性。</p>
+  </div>
+</article>

content/banner/cn/banner04_facebook04.cn.html

@@ -0,0 +1,22 @@
+---
+title: "Facebook Banner 04"
+date: 2018-04-15
+categories: ['banner']
+caption: "Facebook / Photoshop / 2小時"
+eyecatch: '/images/banner/facebook_04.png'
+url: '/cn/banner/facebook04/'
+draft: false
+---
+
+<article class="post__page">
+  <div class="post__banner__wrapper">
+    <h3>Facebook Banner 04</h3>
+    <small>Facebook / Photoshop / 2小時</small>
+    {{< figure src="/images/banner/facebook_04.png" alt="Facebook Banner 04">}}
+  </div>
+  <div class="text__wrapper">
+    <h2 class="text__wrapper__title">概念</h2>
+    <p>它成為在Facebook上發布的橫幅。</p>
+    <p>為了消除虛擬貨幣的“可疑性”，我試圖在不使用圖片的情況下使用插圖進行不切實際的世界觀。</p>
+  </div>
+</article>

content/banner/cn/banner05_facebook05.cn.html

@@ -0,0 +1,23 @@
+---
+title: "Facebook Banner 05"
+date: 2018-04-10
+categories: ['banner']
+caption: "Facebook / Photoshop / 1.5小時"
+eyecatch: '/images/banner/facebook_05.png'
+url: '/cn/banner/facebook05/'
+draft: false
+---
+
+<article class="post__page">
+  <div class="post__banner__wrapper">
+    <h3>Facebook Banner 05</h3>
+    <small>Facebook / Photoshop / 1.5小時</small>
+    {{< figure src="/images/banner/facebook_05.png" alt="Facebook Banner 05">}}
+  </div>
+  <div class="text__wrapper">
+    <h2 class="text__wrapper__title">概念</h2>
+    <p>它成為在Facebook上發布的橫幅。</p>
+    <p>因為我上次創作的插圖的橫幅很受歡迎，所以我問插畫家誰做了插圖，我做了一個原始的插圖，並創造了一個旗幟。</p>
+    <p>我也為illustrator創建了說明。</p>
+  </div>
+</article>

content/banner/cn/banner06_facebook06.cn.html

@@ -0,0 +1,22 @@
+---
+title: "Facebook Banner 06"
+date: 2018-04-05
+categories: ['banner']
+caption: "Facebook / Photoshop / 2小時"
+eyecatch: '/images/banner/facebook_06.png'
+url: '/cn/banner/facebook06/'
+draft: false
+---
+
+<article class="post__page">
+  <div class="post__banner__wrapper">
+    <h3>Facebook Banner 06</h3>
+    <small>Facebook / Photoshop / 2小時</small>
+    {{< figure src="/images/banner/facebook_06.png" alt="Facebook Banner 06">}}
+  </div>
+  <div class="text__wrapper">
+    <h2 class="text__wrapper__title">概念</h2>
+    <p>它成為在Facebook上發布的橫幅。</p>
+    <p>我認為會產生一點疑慮，但是我設想了一個靈感來源於女性頭部的圖像，該圖像受應用程序圖像的啟發。</p>
+  </div>
+</article>