3
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

MIWALABAdvent Calendar 2019

Day 9

技術ポートフォリオを作った話

Posted at

つい先月,自分のgithubアカウントで技術ポートフォリオを作成した.→ tackkyのポートフォリオ
どうしてgitもhtmlも慣れていないのに作ろうと思ったのか,その辺の話も含めて記事にする.

技術ポートフォリオは何に役立つ?

1. 就活で使える

1. 逆求人

これが一番大きい. 特に最近IT系の就活では逆求人(企業様の方から連絡が来る就活)で,まず自分の情報を見ていただく.
例えば,

  • 研究室での研究内容
  • 資格,その他技術的にやってきたこと

など.この場合,研究内容だけ突き詰めて研究している方ならそこを詳しく書けばいいけれど,私などのようにいろんな技術をつまみ食いしているような人には不利になる.githubで公開リポジトリーとしてアップするという手もあるけれど,やはり就活では技術に詳しくない人事の方も見ているので,見た目にも綺麗なwebページが一番企業様へのインパクトは大きい.

2. エントリーシート

このような目的で作成されたポートフォリオは,エントリーシートの作成にも役立つ.
研究内容にも言及していれば,そのポートフォリオ記事を参考に書くことができるし,アピールポイントにこのページのURLを貼ることができる.(後たまに,技術ポートフォリオがあれば教えてくださいみたいな欄があることがある)

2. 勉強になる

最後に,HTMLとCSSを使うので何より勉強になる.私は研究室や講義でHTMLは兎も角CSSは使用したことはないけれど,技術ポートフォリオを作ることはHTMLとCSSの使用経験につながる.

技術的観点から

GitHub

技術者になる者,Github含め,Gitは使えるようになった方がいい.私は研究を他の人と共同でやっていないので研究室としてgitを使用することはないけれど,バージョン管理システムとして少し前から使い始めた.特に共有する相手がいなくてもgitはおすすめ.よく考えなくてもgitは バージョン管理システムである.私が最近使用しているgitの使い道が参考になるかもしれない.

ナウいヤングは論文執筆にGitHubを使う
まず、学会や学校などのテンプレートを導入して正しくコンパイルされる状態にしたものをfirst commitとしてmasterブランチにコミットします。
次にmasterから1stブランチを切って、GitHub上でmasterブランチにPull Requestを送ります。
PRを送ったら、1stブランチでガリガリ初稿を書いていきます。コミットの粒度は小節毎だったり段落ごとだったりしますが、これは執筆が進んでいくと変わっていくと思います。後半になると修正箇所も少なくなるので「○○先生添削分修正」などとふわっとしてきます。
添削の依頼をして返ってきたら、1stブランチをmasterにマージします。そして2ndブランチを切ってPRを送って……の繰り返しです。

HTMLとCSS

…ざっくり仕組み使えるようになりたいなって思ってた,それだけです.講義で扱うのはHTMLだけなのでやっぱり心寂しい.

技術ポートフォリオの作り方

作ってみた流れ.

1.githubでページを作る

GitHub Pagesというサービスがある.これは,Githubに登録したリポジトリーをwebページとして公開することができるGitHubのサービスである.settinggithub pagesの項目があるのでそこでソースをマスターブランチに登録するだけである.とりあえずhello worldとでも書いたindex.htmlを用意して公開すればいい.

一応:github pagesによる静的サービス公開方法

2.サンプルページを探してくる

結構フリーでHTMLとCSSのソースは落ちている.特にtemplate free engineer portfolioとでも検索すれば,ごまんとフリーテンプレートが見つかる.私は以下のサイトから見つけてきた.(確か.)
50 free portfolio website templates 2019

3.自分仕様に変更する

後はダウンロードしたデータを自分仕様にカスタマイズするだけだ.先のテンプレートサイト等には結構な量のデータがあるので,私のような初心者エンジニアにはいらない部分が多すぎる.なので「いらない部分を削る」作業が必要になる.これには,どこからどこまで削っても問題なく動作するのか判断するために,HTMLの構造を理解している必要がある.CSSは色のテイストや配置などを変えたくなってから触る方が楽なのでとりあえず置いておいて,HTMLCSSの順でカスタマイズするのがおすすめ.

おめでとう!

ここまでのプロセスでやっと技術ポートフォリオをつくることができる.新しいことに取り組むことがあれば,どんどん追加して素晴らしいポートフォリオにしよう.

参考サイト

エンジニア向けのポートフォリオサイトまとめ
ポートフォリオをGitHub で公開する

3
3
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?