search
LoginSignup
5
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

業務系システムのエンジニアが今風のポートフォリオサイトを作ってみた

なぜ作ったのか

少し業務的にも暇になってきたので新しいことを始めようと思ってポートフォリオを作ってみた。
これまで、データーベースやJavaのフレームワーク(SpringやPlay)とかは参考書とかを買って、勉強してきたが、HTML5やCSS3はあんまり、がっつり本を買って勉強したことがなかったので、この際にしっかりと学ぼうと...

作ったポートフォリオ

porto.PNG

作ったサイトはこちらです。

どうやって作ったのか

まず、jQueryありきで作りました。
「jQueryプラグイン」とかで調べて、ポートフォリオに使えそうなjQueryのプラグインを調べました。
その中から、pagePiling.jsというプラグインがいい感じだったので使ってみました。
pagePiling.jsのサンプルからよさげなものを選んで、中身のcssとhtmを適当に書き換えました。
それに加えて、レスポンシブにしたかったのでBootstrap4を用いてレスポンシブ対応を行いまいした。
投稿フォームはサーバーサイドを作るのがめんどくさかったので、Google Formを利用して、フォームに投稿されると、Google スプレッドシートに内容が書き込まれて、メールが送信されるようにした。
最後に、さくらインターネットのVPSとドメインを用意して(これはあらかじめ用意していた)、サーバにNignxを入れLets Encryptで証明書を取得して終わり。

かかった時間

だいたい4時間くらい

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
What you can do with signing up
5
Help us understand the problem. What are the problem?