2fish 的部落格

歡迎來到我的部落格!這裡是我記錄開發點滴的地方,希望你會喜歡😌

0%

github 自定義個人頁面 ✨

快跟我一起來自訂義獨一無二的個人 github 頁面吧!

1. 先打開 github 首頁

2. 建立一個新專案

專案名稱要跟使用者名稱相同,正確的話會發現跳出特殊提示框!
這邊記得 ✅ Add a README file,等等要用來輸入自訂義內容。
建立專案配置

3. 專案建立成功畫面

專案建立成功畫面,會包含一個 README.md 檔案

4. 點擊右上角的 🖊️ 編輯 README.md 檔案,自訂義專屬的個人介紹吧!

以下提供我的範例,跟我使用的 Markdown 語法說明

  • ## h2

    👋 Hi there, I’m 2fish

    1
    ## 👋 Hi there, I'm 2fish

  • #### h4

    🌱 Junior Full-Stack Web Developer

    1
    #### 🌱 Junior Full-Stack Web Developer

  • [Email](mailto:yourEmail@gmail.com) [放置顯示文字](幫前面的文字加上連結)

    點擊這個連結將會打開電子郵件客戶端,並將收件人的地址設置為 yourEmail@gmail.com

    加上 mailto: 是用來打開電子郵件客戶端的,若是一般的超連結則不需要添加哦

    📮 Email

    1
    📮 [Email](mailto:yourEmail@gmail.com)

  • - ul 無序清單

    可以在每個項目前添加兩個空格來創建嵌套的無序清單

    • skill
      • CSS, SCSS
      • JavaScript
    1
    2
    3
    - skill
    - CSS, SCSS
    - JavaScript

  • table 表格

    使用表格來整齊呈現資料,詳細範例可以參考下方完整程式碼

    Project Description Links
    #1 描述內容 連結
    1
    2
    3
    | Project | Description | Links |
    |---------|-------------|-------|
    | #1 | 描述內容 | 連結 |

  • ![]() 連結嵌入圖片

    使用方法跟上面超連結相似,[] 放置圖片說明文字,() 放置圖片連結,最前面記得加一個 ! 哦

    軌道漫遊列車之旅

    1
    ![軌道漫遊列車之旅](https://firebasestorage.googleapis.com/v0/b/simpleportfolio-64b60.appspot.com/o/img%2Fproject-pic-1.png?alt=media&token=388b6fc4-a863-4d12-9e55-f81de4e8c489)

5. 編輯完成後記得點擊右上角的 Commit changes (按兩次就可以成功更新囉)

更新後回首頁就可以直接看到上方多了剛剛新增的內容

首頁示意圖




點擊這裡查看完整範例程式碼
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
## 👋 Hi there, I'm 2fish

#### 🌱 Junior Full-Stack Web Developer
#### 📮 You can reach me at [Email](mailto:yourEmail@gmail.com)

### 💻 Skills

#### Front-End Development
- HTML
- CSS, SCSS
- JavaScript

#### Back-End Development
- Node.js
- MySQL

### 🗂 Portfolio

| Project | Description | Links |
|---------|-------------|-------|
| ![軌道漫遊列車之旅](https://firebasestorage.googleapis.com/v0/b/simpleportfolio-64b60.appspot.com/o/img%2Fproject-pic-1.png?alt=media&token=388b6fc4-a863-4d12-9e55-f81de4e8c489) | **軌道漫遊列車之旅 (Railway Roaming Train Tour)**<br>這是一個團隊合作開發的網站項目,旨在提供使用者一個互動式的平台,探索和計劃他們的小火車旅行。在這個項目中,我參與了從概念發想到最終產品的全過程。我負責網站的介面設計和前後端開發,使用 Vue.js 和 SCSS 來創建響應式的用戶界面,並透過 JavaScript 增強互動性。後端方面,我使用 PHP 和 MySQL 進行資料庫的規劃和建置,並利用 Ajax 和 Axios 技術實現前後端的資料串接。這個項目不僅鍛鍊了我的全端開發能力,也讓我學習到團隊合作如何溝通及解決問題。 | [GitHub](https://github.com/vicky5645/chd102-g1/tree/dev) \| [Demo](https://tibamef2e.com/chd102/g1/) |
| ![Simple Portfolio](https://firebasestorage.googleapis.com/v0/b/simpleportfolio-64b60.appspot.com/o/img%2F%E4%BD%99%E8%AA%BC%E5%A7%8D%20Sunny%20-%20%E4%BD%9C%E5%93%81%E9%9B%86%20Portfolio.png?alt=media&token=cf0a0add-8f85-4d1d-8c78-cca31301972a) | **個人作品集網站 (Portfolio)**<br>我的個人作品集網站,使用 vue3 + composition API + vite 進行開發,網頁展示了我的經歷、專案和技能。 | [GitHub](https://github.com/sunny96087/simple_portfolio) \| [Demo](https://simpleportfolio-64b60.web.app/portfolio) |



範例 demo

👋 Hi there, I’m 2fish

🌱 Junior Full-Stack Web Developer

📮 You can reach me at Email

💻 Skills

Front-End Development

  • HTML
  • CSS, SCSS
  • JavaScript

Back-End Development

  • Node.js
  • MySQL

🗂 Portfolio

Project Description Links
軌道漫遊列車之旅 軌道漫遊列車之旅 (Railway Roaming Train Tour)
這是一個團隊合作開發的網站項目,旨在提供使用者一個互動式的平台,探索和計劃他們的小火車旅行。在這個項目中,我參與了從概念發想到最終產品的全過程。我負責網站的介面設計和前後端開發,使用 Vue.js 和 SCSS 來創建響應式的用戶界面,並透過 JavaScript 增強互動性。後端方面,我使用 PHP 和 MySQL 進行資料庫的規劃和建置,並利用 Ajax 和 Axios 技術實現前後端的資料串接。這個項目不僅鍛鍊了我的全端開發能力,也讓我學習到團隊合作如何溝通及解決問題。
GitHub | Demo
Simple Portfolio 個人作品集網站 (Portfolio)
我的個人作品集網站,使用 vue3 + composition API + vite 進行開發,網頁展示了我的經歷、專案和技能。
GitHub | Demo

也可以直接到我 github 看效果哦




參考文章 > 如何建立獨一無二的 GitHub Profile!




希望這篇文章有幫助到你,謝謝你的觀看,若有想看的系列也歡迎告訴我 😉