フォローしました目次はじめにデザインについて使用した技術はじめに1年以上前から考えていた、ポートフォリオサイトのリニューアルがやっとできました。2019といっても今回はまだシンプル版のリリースでそのうちWebGLを組み込んだリッチ版をリリース予定です。以下のサイトが以前のポートフォリオで、機能的にはまだ生きているんですが3年前に作ったもので技術も古く、あまり見せたくなくなってしまったのでこのサイトは更新せずに、お仕事のリリース報告などはSNS上でしていました。director.tkmh.meが、やはりポートフォリオサイト上でしっかり残していきたいと思い、サイトのリニューアルを考えていたんですが、それから1年近くかかってやっとリリースできました。(まだフルバージョンではないですが、、)デザインについてデザインとしては、案件ごとに設定した色を活かしたいため、ベースカラーは白と黒のみにし、シンプルに仕上げました。以前のポートフォリオのトンマナを引き継いだ感じになっています。スマホ版を先にデザインしたので、割とモバイルに最適化されていますが、デスクトップでも見やすいレイアウトを考えました。背景のパターンはページ遷移ごとにリアルタイムで生成しています。案件の詳細ページはそれぞれ色を設定して、案件ごとの柄が出るようになっているところと、ロゴのアニメーションがお気に入りポイントです。いうかシンプル版を考えたときに、一番始めにこのロゴのアニメーションを思いついたので、そこからシームレスな動きができるようデザインを開始しました。Uのコンペイベントのデザインを作るために実装したパターン生成の仕組みを使っています。Webの記述を使ったので、どこかで使いたいと思っていました。WebGLを用いたフルバージョンの構想も一応できています。Storage)へコンテンツの入力ができるサービスを使用しています。inteflamelink.io入力項目を自由にカスタマイズできるようになっています。仮にこのサービスが死んでも、Firebaseにデータ自体は残っているので安心です。(JAMstackというらしい)。Qiita長々としたタイトル通りのブツを作りました。その技術内容を紹介をします。Blogqiita.comもともと別の個人的にお受けしているお仕事で、この構成を使っており、今回自分のポートフォリオ用にカスタマイズしました。(と自分)が死んでもすべて静的なリソースなので、レンタルサーバに載せ替えれば、とりあえずコンテンツの存続ができるからです。してデプロイという流れです。最初は更新があったらdeployまで一気にやるつもりでしたが、管理画面からちょこちょこ更新したいシチュエーションがあり、そのたびにgenerateとdeployが走るのは良くないなと思い、deployのトリガーは別にしました。CircleCIにはタグによって実行するWorkflowを変えることができるので、その機能を使用しています。QiitaGitでタグを打ったときに自動的にCircleCIのビルドを実行しようとして盛大にハマったので、情報を残しておきます。deployが走ります。前述の案件では、簡易的な管理画面を用意し、ボタンをクリックするとタグ付きの空コミットがpushされるようなFunctionを用意しました。バックエンドの仕組みはこんな感じです。フロントエンドはあまり複雑なことはしてないです。Nuxtがいろいろうまくやってくれています。(settings)を設けています。(超簡易ver.)に切り替えが可能。単純に情報が見たい場合用に用意してみました。fullは今後リリース予定のWebGLあり版です。(右上)から選べます。個人的には右下が好きなので、右下がデフォルトです。設定をサイト上に自動に反映するかどうかを選べます。サポートしている場合のみ使用できます。(2019年7月8日現在)。Safariは次のバージョンから対応予定です。darkモードが選べます。mode」がonのときはこの項目は自動で設定されます。最近、OSやアプリのダークモードがぽつぽつと出始めていますが、今後Webアプリなどでもダークモードが出てきたりするんでしょうかね。今回はなんとなくつけてみました。(メモ程度ですが、、)でした。ダウンロード#Design#Webデザイン#ポートフォリオ#GenerativeArt#Firebase#Nodejs#Github#nuxt#webdesign#ポートフォリオサイト#Portfolio#Node#website#NuxtJS#CircleCIこの記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。サポートいただければ、レッドブルを飲んでより頑張れると思います。サポートをする「スキ」を押してクリエイターを応援しよう!ありがたい。(unshift)東京でフリーランスのdeveloperをやっています。【デザイナー向け】Lottieの使い方。yamada実はHerokuで充分なのでは問題99こんぴゅありがたい。