MANAPURAZA.COM 🍌

• ver1.0: https://manapuraza-s0y8f8i94-manatoyamashita.vercel.app
• ver2.0: https://manapuraza.com/

概要

Manato Yamashita's portfolio site 2023. This template should help get you started developing with Vue 3 by Vite. Blushed up in Puzzle inc Engineering intern 2023 このサイトはvue.jsのver3で書かれViteでビルドされたポートフォリオサイトをさらに広告制作会社株式会社パズルでの2週間のインターン（2023年11月）でさらにブラッシュアップしたものです。

設計

Home

• 山下マナトのポートフォリオサイトです。
• Vue3 build with Vite, vue-router, Fontawesome, Three.js, vue-i18n などの技術を使っています。
• 初回読み込み時はアニメーションを再生します。
• Homeはエントリとしてロゴを中央に配置しました。
• 背景はThree.jsで作成したマーチングキューブを配置しました。マウスアクションでカメラの角度を変えたりキューブの色を変えたりできます。
• 初期状態は英語表記ですが、日本語と英語のトグルスイッチで切り替え可能です。
• CI/CD(Github Actions)に対応しています。
• GSAP animation

About

• 私についての概要と経歴を一通り書きました。
• できるだけ直感的にわかるようにデザインしています。

Works

• グラフィックス、イラスト、プログラミング、映像などの趣味で制作したデジタルコンテンツを一部紹介します。
• 一覧性を意識して、サムネイルを表示させています。
• ホバーすると文字が水色に光り、サムネイルが拡大します。
• 手描きのアニメーションという珍しい特技があるのでそれをアピールするために下にキャラクタ（でじこんちゃん）のアニメが動いています。

デザインについて

• ブランディングのためにロゴとアイコンを制作しました。
• MacやiPhoneなどのApple製品などで多く取り入れられているグラスモーフィズムというデザインパターンを取り入れました。
• バナナが好きなのと、統一感を持たせるために黄色やオレンジを基本としてアクセントカラーに補色の水色を使っています。
• 一覧性と何がどこにあるか探しやすいような設計を意識しました。
• レスポンシブデザインにも対応していて、メニューは親指が届きやすい下側に配置し、UXの担保のために画面全体を占領するメニューを避けました。
• トランジションのアニメーションは発火頻度が高いので、うるさくならないように控えめに設定しています。

今後

• ダークモード
• でじこんちゃんの扱い
• ブログ機能(jamstack)？

最終更新: 2024/01/24