LoginSignup
160

More than 5 years have passed since last update.

エンジニアだけどポートフォリオサイト作ってみた

Last updated at Posted at 2015-06-18

先日、ある会社の面接に行くときに「ポートフォリオを持ってきて欲しい」ということだったので、
ポートフォリオサイトを作りました。
こんな感じです.
http://musou1500.github.io/
Screen Shot 2016-08-23 at 23.40.18.png

これを作るときにこだわった点を数点上げていきたいと思います。

デザインについて

今回,面接まであまり時間がなく,デザインに時間がかけられない状況でした.
こういうケースだと,写真や,各パーツで使う画像に凝ることは難しいと思います.
そこで,Webフォントを使用し,ゆったりとしたレイアウトにすることで,ある程度綺麗に見せることを試みました.
日本語はM+Font、英語はGoogle fontsから「Raleway」を使用しました。
自己紹介用の画像やメニュー背景も,SNSのプロフィール等にあったものをほぼ無加工で使用しています.

どんな技術が使えるのか

こちらが一番重要だと思います.
私がポートフォリオサイトに自分の技術を伝えるために用意したコンテンツは以下の2つです.
* 自己紹介に「よく使用する技術」という項目を用意した
* 「Works」というセクションに,今までの自分の制作物等を掲載した.

(余談)altJS

JavaScriptは動きのあるWebページを制作する上で不可欠だと思いますが,
独特なオブジェクト指向の仕組み等が苦手な方もいるのではないでしょうか.
今回はaltJSとして,Haxeという言語を使用しています.

独自の文法を持っており,コンパイラを通すと他の言語に変換できる,というちょっと変わった言語です.
JavaScriptやpython,C++等に変換できます.
文法はこんな感じです.

package ;
import js.JQuery;
class Main {
  private var elem:JQuery;
  public function new() {
    this.elem = new JQuery("#id");
    this.elem.attr("id");
    this.elem.css("display", "none");
  }
  public static function main() {
    new JQuery(js.Browser.window).ready(function() { new Main(); });
  }
}

かなり主観的なイメージですが,普段JavaやC#等の言語を使用する方にとっても親しみやすい文法のように感じます.

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
160