Yuta Asakura

個人ポートフォリオサイト

Vuello: Vue Typescript Trello Clone

レスポンシブなマルチページウェブアプリ

Personal Relations Manager (PRM)

Accomplishments / Portfolio

📚 コードとクリエイト

このプロジェクトは、HTML、CSS、そしてバニラJavaScriptを使用して作成された、完全レスポンシブのマルチページウェブアプリです。モダンなデザインと動的なコンテンツ、さらに高度なCSSテクニックを駆使して、サイトの見た目と機能性を向上させています。

🚀 機能

ナビゲーションバー
- 固定ナビバー: ページのトップに固定されたナビゲーションバーで、主要セクションへのアクセスを容易にします。
- レスポンシブドロップダウンメニュー: 各メインメニュー項目にはドロップダウンメニューが含まれています。

🍔 レスポンシブハンバーガーメニュー
- モバイルナビゲーション用にカスタムデザインされたハンバーガーメニューは、画面サイズに応じて動的に調整されます。

🌍 スムーズスクロール
- セクション間のナビゲーションを向上させるため、スムーズスクロールを追加し、シームレスなユーザー体験を提供します。

🌐 クロスブラウザ互換性
- 複数のブラウザでテストし、一貫したパフォーマンスとスタイリングを確認。特に`select`入力要素に注力しています。

📱 完全レスポンシブ対応
- メディアクエリを使用し、すべての画面サイズで最適な表示を確保。対応サイズは以下の通りです：
  - **1920x1080** (デスクトップ)
  - **1600x900** (デスクトップ)
  - **1440x900** (デスクトップ)
  - **1366x768** (ラップトップ)
  - **1280x780** (ラップトップ)
  - **1024x768** (タブレット)
  - **820x1180** (タブレット)
  - **768x1024** (タブレット)
  - **430x932** (モバイル)
  - **393x932** (モバイル)
  - **375x667** (モバイル)

🎨 高度なCSSテクニック
- **Flexbox**と**絶対配置**を使用して、構造的なレイアウトを作成し、効果的に要素をスタイリングしました。
- 独自のカラースキームを持つ**カスタムスクロールバー**を実装し、デザインに個性を加えました。

📂 動的プロジェクトセクション
- JavaScriptを使って、カテゴリごとにプロジェクトをフィルタリングできるギャラリーを提供しています。

🎥 ビデオプレーヤー統合
- 再生、停止、音量調整、再生速度のオプションを含む、完全なコントロール機能を備えたカスタムビデオプレーヤーを作成しました。

🛠️ 使用技術

- HTML
- CSS
- JavaScript
- Netlify

📖 コード構造

HTML:
- アクセシビリティとSEO最適化のために、よく構造化されたセマンティックなHTMLタグを使用。

CSS:
- Flexbox、Grid、メディアクエリなどの高度なCSS技術を用いて、レスポンシブデザインを実現。
- スクロールバーやフォーム入力要素に対するカスタムスタイリング。

JavaScript:
- ナビゲーションバー、プロジェクトフィルター、ビデオコントロールのDOM操作を担当。
- スクロール、クリック、メディアプレーヤーのコントロールに対するイベントリスナーを実装。

GITHUB REPOSITORY: https://github.com/yutaasakura96/vanilla-js-project-1

Yuta Asakura

Yuta Asakura

フルスタックデベロッパー | JavaScript、Vue、React、RubyonRailsでシームレスなWebソリューションを開発

Ambition

キャリアブレイク2 months

フルスタック・ウェブ開発者

Accomplishments / Portfolio

言語