Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/b13o/react-portfolio
💻 React tutorial with a simple portfolio site.
https://github.com/b13o/react-portfolio
beginner-friendly javascript react tutorial
Last synced: about 1 month ago
JSON representation
💻 React tutorial with a simple portfolio site.
- Host: GitHub
- URL: https://github.com/b13o/react-portfolio
- Owner: b13o
- Created: 2024-11-10T09:44:46.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2024-12-13T16:36:41.000Z (about 2 months ago)
- Last Synced: 2024-12-13T17:45:04.876Z (about 2 months ago)
- Topics: beginner-friendly, javascript, react, tutorial
- Language: JavaScript
- Homepage: https://b13o.github.io/react-portfolio/
- Size: 2.47 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ポートフォリオサイト
## 概要
このプロジェクトでは、シンプルなポートフォリオサイトを構築します。
React 完全初心者でも問題なく作成できる内容になっているので、
学び始めの第一歩に、おすすめです。
## 学習目標
Web サイトのマークアップを中心に、React の基本的な概念を確認してください。
- コンポーネント
- JSX 記法
- props と State
- 条件付きレンダリング
- リストとキー
- children としてコンポーネントを埋め込む
### 推奨技術
このプロジェクトの難易度と趣旨を踏まえて、以下の使用をお勧めします。
- vite を用いた React 環境構築
- Tailwind CSS を用いたスタイリング
- GitHub Pages へのデプロイ
---
## 🎯 お題
- 「ユーザーストーリー」を全て満たす、アプリを構築してください。
- 必要に応じて、スクリーンショットやデモサイトの URL を、参照してください。
- なお、スタイルは、あなた自身で独自にカスタマイズすることが可能です。
- サイト内の画像、テキストは、あなた自身で独自にカスタマイズすることが可能です。
### 構成
このサイトは、以下の 6 つの要素・セクションで、構成されています：
1. ヘッダー
2. Hero セクション
3. About セクション
4. Portfolio セクション
5. Social セクション
6. フッター
## ユーザーストーリー
- [ ] ヘッダーにサイトのタイトルと、各セクションへのナビゲーションリンクが表示されている
- [ ] Hero セクションに、「見出し・サイトに関する簡潔な紹介文・GitHub へのリンク」が表示されている
- [ ] About セクションに、画像・自己紹介文が表示されている
- [ ] Portfolio セクションに、選択可能な、プロジェクトの一覧が表示されている
- [ ] Portfolio セクションでは、選択したプロジェクトのスクリーンショットと、簡潔な説明、GitHub へのリンクが表示されている
- [ ] Social セクションに、各媒体へ遷移できる、アイコン付きのボタンが表示されている
- [ ] フッターに、コピーライトが表示されている
- [ ] アプリケーションがデプロイされており、誰でもアクセス可能である。