プロフィールページを作りました。
yutaro-ihara.github.com
とりあえずChromeでしか確認してないし、恐らく崩れますw
このページで使用している技術としては、
Web FontとFlexible-boxとmicrodataです。あとアイコンはGravatorから取ってきてます。
ソーシャルへのリンクに使っているアイコンのようなものは，
全てFontです。
Font-Awesomeっていうのを使っています。
Font Awesome: http://fortawesome.github.com/Font-Awesome/
Flexible-boxはソーシャルボタン並べるところで利用しています。
昔はテーブルレイアウトとかやっていたとものだと思うのですが、
テーブルレイアウトをやらない場合、floatを使っていたと思います。
floatの場合は、最後にresetするとか色々めんどくさいです。
そこでdisplay:boxとbox-flexとbox-orientです。
これらを利用することで，行の中にある要素らはいい感じに間隔をとってくれるし、
最後にresetする必要もなくてかなり楽です。
ただまだベンダーprefixが必要です。
詳細は以下のリンクを参照してください。
フレキシブル ボックス モデルを使ってみる - HTML5 Rocks
micro-dataについてはあんまり詳しくないのですが，
Schema.orgで定義されているpersonを利用しました。自己紹介ページですし。
以下を参照してください。
Googleのmicrodataについての説明
http://support.google.com/webmasters/bin/answer.py?hl=ja&answer=176035
Schema.org
http://schema.org/
よういちろうさんのmicrodataとかOpenGraphとかの話
https://docs.google.com/presentation/d/18U-JJVf8fFWJpDxUUOoIVufqRRdlqQZvl5qEU8wKfBY/edit
ページ自体の内容は今後追加していくかもしれません。
