xxrjun Portfolio

• xxrjun Portfolio
  • Todo List
  • 使用工具 Built With
  • 參考資料 References
    • 參考專案 Reference Projects
    • 其他參考資料 Other References
  • Getting Started
    • Learn More
    • Deploy on Vercel

Todo List

• Introduction 首頁部分
  • 3D 動畫
  • 自我概述
• About page 關於我的部分，包含經歷(Work Experience, Education...)
• Skills 技術能力部分
  • Front-end: HTML, CSS, JavaScript, React, Redux, TailwindCSS
  • Back-end: Nodejs, Expressjs, MySQL, PostgreSQL, MongoDB
  • Programming Languages: C, C++, Java, Python
  • Other tools: Git, GitHub, Postman, Figma, VSCode, Intellij
• Projects 做過的專案 (串接 GitHub API 提供 Repositories 資料)
  • 三個主要顯示的專案: carryu、cs-resources、total-repos-size
  • More Projects Button: Link to GitHub Repositories
• RWD

Bus & Improvments

• 首頁部分添加下滑按鈕，增加手機板的使用者體驗

使用工具 Built With

類別	名稱
文字編輯器	VSCode
前端框架	Next.js 13、Tailwind CSS、Chakra UI
輔助工具	GitHub Copilot、ChatGPT(4.0)
套件管理工具	NPM
API	GitHub API
API 套件	Axios
其他套件	package.json

參考資料 References

參考專案 Reference Projects

• adrianhajdin/project_3D_developer_portfolio
  • Youtube 上有教學 Build and Deploy an Amazing 3D Web Developer Portfolio in React JS | Beginner Three.js Tutorial
  • 原作者是使用 React，但想嘗試新技術的我選擇使用 Next.js
• Infvyr/nextjs-portfolio
  • 有取得原作者授權許可，非常感謝!
  • 原作者是使用 Sanity.io 作為 CMS，為求簡便我是使用 GitHub API 導入專案資料，缺點是無法取得專案圖片。

與原作差別:

• 結合兩者，以後者專案為基底新增 3D 動畫，使用 NextJS 作為前端開發框架
• 對於 3D 動畫新增 RWD
• 修正 Canvas 會被右鍵拖走的問題
• 優化 Canvas 效能，針對 3D 模型紋理進行低失真壓縮
• 針對 Accessibility 做些微優化
• 新增 metadata 優化網站 SEO
• 使用 Axios 套件呼叫 GitHub API 取得專案資料

其他參考資料 Other References

• Next.js Docs
• TailwindCSS 官網
• chakra-ui/chakra-ui
• react-three-fiber docs
• framer-motion Docs
• Three.js Docs - 3D 動畫框架
• Sketchfab - 3D 模型下載網站
• Favicon 使用 Cross icons created by Pixelmeetup - Flaticon

Getting Started

Clone this repository:

git clone

Install dependencies:

npm install
# or
yarn install
# or
pnpm install

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.js. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.