Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
5
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

@koumotoj

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

なぜ作ったのか

少し業務的にも暇になってきたので新しいことを始めようと思ってポートフォリオを作ってみた。
これまで、データーベースや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時間くらい

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
5
Help us understand the problem. What are the problem?