Welcome To My Portfolio

アイコン

Poem.

小学生の頃、掲示板にどハマりして自分でホムペを作ってみたり、中学生の頃にはインテリアに凝ってブログを運営してみたり……。幼い頃からモノヅクリドリブンなゆるーいWebとの繋がりを持っていました。

大学に上がってからは塾講師をやってみたり輸入転売をしてみたり……。ちょうど将来に繋がる何かを探している頃にWeb制作と再会。

普通、良質な情報ほどクローズドにされるのが常ですが、それを敢えてオープンにし、業界の発展を全員で目指していくエンジニアの文化に惚れ込みました。(有用性はともかく、僕自身も得た知見を積極的に共有するようにしているのはここに起因しています。)

しばらくはその楽しさからWeb制作業界に身を置いていたものの、徐々にWordPressでの表示速度に不満を持ち始め、そんな折にReact(Gatsby)と出会い、今(2022/02/06)ではJSに没頭する日々を過ごしています。

キャリアの主軸は「働きたくない人が無理に働かなくても良い世界の実現に貢献できるか」。

プログラムによる自動化をもって、人がやらなくても良いような仕事を少しでも減らしたいと考えています。それによって浮いた時間やお金を、人生を豊かにするために費やせるような未来の実現に貢献していくことが働くモチベーションです。

All Works.

Blog

初のWeb制作が個人ブログでした。何度かのプチバズなどを経て、年末に月1万PVほどになりました。翌年2月末に売却。

  • WordPress
  • PHP

Cocoon Skin

WordPressテーマ『Cocoon』のスキンを作成。Cocoon公式サイトでも配布されています。たまに検索で見つけたサイトがこのスキンを使ってると嬉しくなります。(もっと読む)

  • CSS3

Rails WebApp

盛大にこけ、PVは雀の涙ほどでしたが、初めてSNS風掲示板を一から作ったのはすごい刺激的で楽しかったです。閉鎖済み

  • Ruby
  • Rails
  • Heroku

Blog

暇になったので再度ブログをはじめました。Cocoonからのリンクもあり、開設1ヶ月で5000PV/月に成長。今はもう閉鎖しましたがここで書いた記事とアクセスは次のブログへと引き継がれています。

  • WordPress
  • PHP

Portfolio & LP

就職することに決め、その準備としてWordPressテーマの制作とそのLPとポートフォリオを作りました

  • HTML5
  • CSS3
  • materialize

WordPress Theme

Cocoonのようなテーマを目指して制作。開発期間1ヶ月とそれなりに時間をかけたのですが、アナリティクスのトラッキングによると結局500ダウンロード程度……。勉強になったのでよしとするのです。

  • PHP
  • materialize

Tools

就職したのですが、仕事の体系だったマニュアルが存在せず、僕は記憶力が悪かったので業務中の空き時間を利用してマニュアルとツールを作成。ツールは30分〜1時間ほどかかる業務を1分近くまで省けるものなので、先輩方にも喜んでもらえて幸せ。他にも業務効率向上のChromeの拡張とかも作って先輩らに配布しました

  • Vue
  • PHP
  • HTML5
  • materialize

Blog

現在のサイトです。以前からWordPressの表示速度に不満を感じており、仕事も落ち着いたので腰を据え、Reactの勉強がてらGatsbyでの開発に着手。lighthouseでオール満点とれ、爆速なサイトに仕上がったので大満足

  • React
  • Gatsby
  • netlify
  • GitHub

React WebApp

友人がバッグエンドからフロントエンドに転向したいとのことで、こんなのどうかなぁと思い、勉強がてらReactでSPA風のWebApp開発。

  • React
  • Gatsby
  • netlify

React Portfolio

こちらのポートフォリオです。

  • React
  • Gatsby
  • netlify

ターミナル画像ジェネレーター

海外のブログやTwitterアカウントでよく見かける実行コマンドのイメージ画像。Canvaなどで作るんでもよかったのですがパッと作れそうだなぁと思い作りました。Cnavasのスマホ対応が面倒くさそうだったのでスマホには対応していません

  • React
  • Gatsby
  • netlify

ヒマツ武士

暇つぶしを一覧にしたページ。使ってみたいデザインがあり、練習がてら作成。本当は300個くらい暇つぶし案があれば良かったのですがそんなに思いつかなかった……。

  • React
  • Gatsby
  • netlify

構造化データ作成ツール①

仕事上使うことがままあるため、効率化のために構造化データを簡単に作成できるツールを作成中……。現在できているのは動画の構造化データとFAQの構造化データを作成できるやつ。動画の方はYouTubeAPI叩いて得たデータの取り扱いにやや戸惑い、FAQの方はUI面で悩みましたが、なんとか完成。最終的に6つくらい作りたい……。

  • React
  • Gatsby
  • netlify

3D CG

プログラミングはあくまでモノヅクリの道具であって、他の道具も何か使ってみたいという欲に駆られてた時に3D CGに興味を持ち、Blenderを練習。とりあえず色々作ってみる。

  • Blender

人口推移 WebApp

転職用にRESAS APIから人口推移データを取得し表を描画するアプリを作った。テストにはJest,状態管理にはRecoilを使用し、ロゴとファビコンはイラレでSVG出力

  • TypeScript
  • Illustrator

Blog

初のWeb制作が個人ブログでした。何度かのプチバズなどを経て、年末に月1万PVほどになりました。翌年2月末に売却。

  • WordPress
  • PHP

Cocoon Skin

WordPressテーマ『Cocoon』のスキンを作成。Cocoon公式サイトでも配布されています。たまに検索で見つけたサイトがこのスキンを使ってると嬉しくなります。(もっと読む)

  • CSS3
Go To!

Rails WebApp

盛大にこけ、PVは雀の涙ほどでしたが、初めてSNS風掲示板を一から作ったのはすごい刺激的で楽しかったです。閉鎖済み

  • Ruby
  • Rails
  • Heroku

Blog

暇になったので再度ブログをはじめました。Cocoonからのリンクもあり、開設1ヶ月で5000PV/月に成長。今はもう閉鎖しましたがここで書いた記事とアクセスは次のブログへと引き継がれています。

  • WordPress
  • PHP

Portfolio & LP

就職することに決め、その準備としてWordPressテーマの制作とそのLPとポートフォリオを作りました

  • HTML5
  • CSS3
  • materialize

WordPress Theme

Cocoonのようなテーマを目指して制作。開発期間1ヶ月とそれなりに時間をかけたのですが、アナリティクスのトラッキングによると結局500ダウンロード程度……。勉強になったのでよしとするのです。

  • PHP
  • materialize
Go To!

Tools

就職したのですが、仕事の体系だったマニュアルが存在せず、僕は記憶力が悪かったので業務中の空き時間を利用してマニュアルとツールを作成。ツールは30分〜1時間ほどかかる業務を1分近くまで省けるものなので、先輩方にも喜んでもらえて幸せ。他にも業務効率向上のChromeの拡張とかも作って先輩らに配布しました

  • Vue
  • PHP
  • HTML5
  • materialize

Blog

現在のサイトです。以前からWordPressの表示速度に不満を感じており、仕事も落ち着いたので腰を据え、Reactの勉強がてらGatsbyでの開発に着手。lighthouseでオール満点とれ、爆速なサイトに仕上がったので大満足

  • React
  • Gatsby
  • netlify
  • GitHub
Go To!

React WebApp

友人がバッグエンドからフロントエンドに転向したいとのことで、こんなのどうかなぁと思い、勉強がてらReactでSPA風のWebApp開発。

  • React
  • Gatsby
  • netlify
Go To!

React Portfolio

こちらのポートフォリオです。

  • React
  • Gatsby
  • netlify

ターミナル画像ジェネレーター

海外のブログやTwitterアカウントでよく見かける実行コマンドのイメージ画像。Canvaなどで作るんでもよかったのですがパッと作れそうだなぁと思い作りました。Cnavasのスマホ対応が面倒くさそうだったのでスマホには対応していません

  • React
  • Gatsby
  • netlify
Go To!

ヒマツ武士

暇つぶしを一覧にしたページ。使ってみたいデザインがあり、練習がてら作成。本当は300個くらい暇つぶし案があれば良かったのですがそんなに思いつかなかった……。

  • React
  • Gatsby
  • netlify
Go To!

構造化データ作成ツール①

仕事上使うことがままあるため、効率化のために構造化データを簡単に作成できるツールを作成中……。現在できているのは動画の構造化データとFAQの構造化データを作成できるやつ。動画の方はYouTubeAPI叩いて得たデータの取り扱いにやや戸惑い、FAQの方はUI面で悩みましたが、なんとか完成。最終的に6つくらい作りたい……。

  • React
  • Gatsby
  • netlify
Go To!

3D CG

プログラミングはあくまでモノヅクリの道具であって、他の道具も何か使ってみたいという欲に駆られてた時に3D CGに興味を持ち、Blenderを練習。とりあえず色々作ってみる。

  • Blender
Go To!

人口推移 WebApp

転職用にRESAS APIから人口推移データを取得し表を描画するアプリを作った。テストにはJest,状態管理にはRecoilを使用し、ロゴとファビコンはイラレでSVG出力

  • TypeScript
  • Illustrator
Go To!

Skills

TypeScript

React

Next

Gatsby

Express

HTML

Sass

php

WordPress

Photoshop

Vue

Rails

GCP

AWS

RDB

ReactNative

Blender

Figma

Get in touch

\ HOME /

トップへ戻る