ヘルニアクソ野郎エンジニアblog

~ヘルニアでHell near~

「WEBポートフォリオの自作」作品重視の簡単なポートフォリオの作成からWEB公開まで

calendar

おはようございます。ITマラソン先頭集団のヘルニアクソ野郎と申します。

さて、今回はお題目の通り「ポートフォリオ」を自作してWEBにアップロード、公開までをまとめようかと思います。

ちなみに私、齢30後半にさしかかり、もはやこんなものは必要ないのですが、興味本位で作成に至った次第でございます。

ポートフォリオは、大きく分けて、紙ベースのものとWEBで公開の2パターンに分かれるそうですが、どうやらWEBの方がマストであると、いかにも知っている風な方のblogで拝見しました。

ですので、もし今からWEBポートフォリオを自作しようとしている方がいれば、参考にでもしてもらえば嬉しい限りです。

なお、「プロフ、作品紹介重視」のごっつシンプルポートフォリオになっているので(html/cssのみ)、javascriptで効果付けまくってるオシャレキラキラスタバでマック髪型2ブロックマンのようなキザなポートフォリオをお求めの方は、以後お見せする内容で目が腐ると思いますので、直ちに引き返してください。

個人的には、ポートフォリオとは自己紹介と作品紹介、こんなことが私はできますよとアピールする履歴書みたいなもんだと思っているので、その履歴書自体をデコる必要は無いと思っています。

逆に、シンプルなポートフォリオの方が、作品とのギャップが生まれ、より作品が際立つんじゃないかと考えています。

でははじめに、完成したものをのっけておきます。↓

 

私のポートフォリオはで公開しています。↓

ポートフォリオ公開サイト

 

それでは、簡単な構成から説明しておきます。

 

 

スポンサーリンク

作成するポートフォリオの構成

表紙、プロフ、作品紹介の3ページ

ファイル構成

表紙のindex.htmlにプロフと作品紹介のリンクをはっています。

pro.htmlがプロフのページになります。

seisaku.htmlが、作品紹介のページになります。

一応レスポンシブ対応にしています。

画像はimgディレクトリ配下に格納しておきます。

 

作品紹介について

製作物は、別媒体に投稿していると前提しているので、今回は製作物一覧のページに、それぞれのリンクを貼るようにしています。

それでは、htmlを作成していきます。

 

html

index.html

説明は不要ですね。

ただ画像のリンクを貼ってるだけです。

pro.html

知ってる風のblogによると、ポートフォリオの自己紹介部分は、下記のようなポイントをまとめたほうが良いようです。

  • 名前
  • 生年月日
  • 顔写真
  • 過去経歴
  • スキルセット
  • 資格・使用可能ツール
  • 自身の強みと具体的なエピソード(自己PR)

これに合わせて、適当に作成してみました。

 

seisaku.html

前途した通り、製作物の詳細が保存されているWEBサイトへのリンクを、画像付きで並べているだけです。

これによって、かなりすっきりとしたポートフォリオになります。

 

CSS

style.css

スタイリングしているだけすので、詳細は割愛します。

バックグラウンドの色はWEBからイイ感じのソースを拝借してきました。

これで完成です。

 

WEB公開方法

無料サーバー

WEBで公開するにはもはやhttpsの「SSL」の暗号化が必須ですが、困ったことになかなか無料のレンタルサーバーではSSL化ができません。

ところが、「広告あり」でもよければ、「XREA」というサーバーで無料でSSL化が可能です。

契約およびアップロード、公開の流れは過去記事でまとめているので、そちらを参考にして下さい。↓

 

有料サーバー

月額¥1000程度かかりますが(ドメインは別)、有名どころで言えばXserverと契約すれば簡単にSSL化が可能です。

こちらも過去記事でまとめていますので、解約から公開までの流れはそちらを参考にしてください。↓