Bootstrapベースのランディングページ（Landing page, LP）用テンプレートというのがいくつかあるのを知りました。いろいろあるのですね。

その中から、「Creative – One Page Bootstrap Theme – Start Bootstrap」を選んでさわってみました。

ところで、テンプレートには関係ないですが、エディタはVisual Studio Codeを使ってみました。いやぁー、便利ですね。Ctrl+Shift+V で Markdownテキストのプレビューができるとか、初めて知りました。

それで、CSSを開くと、色がきちんと出てくれて、カラーカスタマイズをするときに便利です。いまどきのエディタはすごいですね。

カスタマイズをするといっても、基本は文章を変更するぐらい。あとは、css/custom.css を追加して、index.htmlでcss/creative.min.cssの後に読み込むようにしておけば、custom.cssでCSSのカスタマイズができます。

ということで、必要なファイルだけのディレクトリーを作成するためにスクリプトを用意してみました。ここでは、mylpというディレクトリーへ必要なファイルをコピーしています。

#!/bin/sh

src="../startbootstrap-creative-gh-pages"
dst="mylp"

wget https://github.com/BlackrockDigital/startbootstrap-creative/archive/gh-pages.zip
unzip gh-pages.zip

mkdir ${dst}
cd ${dst}

cat << EOS > list.txt 
css/creative.min.css
js/creative.min.js
vendor/bootstrap/css/bootstrap.min.css
vendor/bootstrap/js/bootstrap.bundle.min.js
vendor/fontawesome-free/css/all.min.css
vendor/jquery-easing/jquery.easing.min.js
vendor/jquery/jquery.min.js
vendor/magnific-popup/jquery.magnific-popup.min.js
vendor/magnific-popup/magnific-popup.css
vendor/scrollreveal/scrollreveal.min.js
EOS

for f in `cat list.txt`
do
 echo $f;
 fname=`basename $f`;
 dname=`dirname $f`;
 if [ ! -e $dname ]; then
   mkdir -p $dname
 fi
 cp "${src}/$f" $f;
done

cp -r "${src}/vendor/fontawesome-free/webfonts/" vendor/fontawesome-free/
cp ${src}/index.html .

ちなみに、index.html 側で css/custom.css を追加するところは次のようになります。

    <link href="css/creative.min.css" rel="stylesheet">
    <link href="css/custom.css" rel="stylesheet">

あとは、GIMPを使って必要な写真を用意。セピア色のコンピュータの写真がほしかったので、「Pixabay: https://pixabay.com/」で探した素材を加工しました。モノクロにしてから、RGBのカラーモードに戻して、色のカラーバランスを開いて、Rを+30, Gを0, Bを-30と変更、なんてこともしてみたり。

ほかにもいくつか手持ちの写真をサイズ変更をしたり、切り抜きしたりで編集をしてみました。

ポートフォリオも紹介する内容がないと結局意味がないのですが、エンジニアのポートフォリオは転職時にあると便利、みたいな記事があったりして、「そういうものなのかなぁ」と読んだりしてみたり。

手元で試しに作ってみたものはいまのところ公開する予定はないのですが、何かプログラムを作って、それ用の紹介ページを作れればいいと考えています。ということで、プログラムを早く完成させないとなぁ…