9.8 KiB
使用 vscode.dev 建立履歷網站
有沒有想過，當招聘人員要求你的履歷時，你可以直接給他們一個網址？ 😎
目標
完成這項任務後，你將學會：
- 建立一個網站來展示你的履歷
先決條件
- 一個 GitHub 帳戶。如果你還沒有帳戶，請前往 GitHub 註冊。
步驟
步驟 1： 建立一個新的 GitHub 儲存庫，並命名為 my-resume
步驟 2： 在你的儲存庫中建立一個 index.html 文件。我們需要在 github.com 上至少新增一個文件，因為空的儲存庫無法在 vscode.dev 中打開。
點擊 creating a new file 連結，輸入文件名稱 index.html，然後選擇 Commit new file 按鈕。
步驟 3： 打開 VSCode.dev，選擇 Open Remote Repository 按鈕。
複製你剛剛為履歷網站建立的儲存庫網址，並將其貼到輸入框中：
將 your-username 替換為你的 GitHub 使用者名稱
https://github.com/your-username/my-resume
✅ 如果成功，你將在瀏覽器中的文字編輯器看到你的專案和 index.html 文件。
步驟 4： 打開 index.html 文件，將以下代碼貼到你的代碼區域並保存。
HTML 代碼負責履歷網站的內容。
<html>
<head>
<link href="style.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<title>你的名字在這裡！</title>
</head>
<body>
<header id="header">
<!-- 履歷標題，包含你的名字和職稱 -->
<h1>你的名字在這裡！</h1>
<hr>
你的角色！
<hr>
</header>
<main>
<article id="mainLeft">
<section>
<h2>聯絡方式</h2>
<!-- 聯絡資訊，包括社交媒體 -->
<p>
<i class="fa fa-envelope" aria-hidden="true"></i>
<a href="mailto:username@domain.top-level domain">在這裡填寫你的電子郵件</a>
</p>
<p>
<i class="fab fa-github" aria-hidden="true"></i>
<a href="github.com/yourGitHubUsername">在這裡填寫你的 GitHub 使用者名稱！</a>
</p>
<p>
<i class="fab fa-linkedin" aria-hidden="true"></i>
<a href="linkedin.com/yourLinkedInUsername">在這裡填寫你的 LinkedIn 使用者名稱！</a>
</p>
</section>
<section>
<h2>技能</h2>
<!-- 你的技能 -->
<ul>
<li>技能 1！</li>
<li>技能 2！</li>
<li>技能 3！</li>
<li>技能 4！</li>
</ul>
</section>
<section>
<h2>教育背景</h2>
<!-- 你的教育背景 -->
<h3>在這裡填寫你的課程！</h3>
<p>
在這裡填寫你的學校名稱！
</p>
<p>
開始日期 - 結束日期
</p>
</section>
</article>
<article id="mainRight">
<section>
<h2>關於我</h2>
<!-- 關於你的簡介 -->
<p>在這裡寫一些關於自己的簡介！</p>
</section>
<section>
<h2>工作經驗</h2>
<!-- 你的工作經驗 -->
<h3>職位名稱</h3>
<p>
在這裡填寫公司名稱 | 開始月份 – 結束月份
</p>
<ul>
<li>任務 1 - 在這裡填寫你做了什麼！</li>
<li>任務 2 - 在這裡填寫你做了什麼！</li>
<li>在這裡填寫你的貢獻成果/影響</li>
</ul>
<h3>職位名稱 2</h3>
<p>
在這裡填寫公司名稱 | 開始月份 – 結束月份
</p>
<ul>
<li>任務 1 - 在這裡填寫你做了什麼！</li>
<li>任務 2 - 在這裡填寫你做了什麼！</li>
<li>在這裡填寫你的貢獻成果/影響</li>
</ul>
</section>
</article>
</main>
</body>
</html>
將你的履歷細節替換掉 HTML 代碼中的 佔位文字。
步驟 5： 將滑鼠移到 My-Resume 資料夾上，點擊 New File ... 圖標，並在你的專案中建立兩個新文件：style.css 和 codeswing.json。
步驟 6： 打開 style.css 文件，將以下代碼貼上並保存。
CSS 代碼負責網站的佈局格式。
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 16px;
max-width: 960px;
margin: auto;
}
h1 {
font-size: 3em;
letter-spacing: .6em;
padding-top: 1em;
padding-bottom: 1em;
}
h2 {
font-size: 1.5em;
padding-bottom: 1em;
}
h3 {
font-size: 1em;
padding-bottom: 1em;
}
main {
display: grid;
grid-template-columns: 40% 60%;
margin-top: 3em;
}
header {
text-align: center;
margin: auto 2em;
}
section {
margin: auto 1em 4em 2em;
}
i {
margin-right: .5em;
}
p {
margin: .2em auto
}
hr {
border: none;
background-color: lightgray;
height: 1px;
}
h1, h2, h3 {
font-weight: 100;
margin-bottom: 0;
}
#mainLeft {
border-right: 1px solid lightgray;
}
步驟 6： 打開 codeswing.json 文件，將以下代碼貼上並保存。
{
"scripts": [],
"styles": []
}
步驟 7： 安裝 Codeswing 擴展 以在代碼區域中預覽履歷網站。
點擊活動欄上的 Extensions 圖標，輸入 Codeswing。點擊擴展活動欄上的 藍色安裝按鈕 或在選擇擴展後出現的代碼區域安裝按鈕來安裝。安裝擴展後，觀察你的代碼區域，看看專案的變化 😃
安裝擴展後，你的螢幕上將看到以下內容。
如果你對所做的更改感到滿意，將滑鼠移到 Changes 資料夾上，點擊 + 按鈕以暫存更改。
輸入提交訊息 (描述你對專案所做的更改)，並點擊 check 提交更改。完成專案後，選擇左上角的漢堡菜單圖標返回 GitHub 上的儲存庫。
恭喜 🎉 你已經使用 vscode.dev 在幾個步驟內建立了你的履歷網站。
🚀 挑戰
打開一個你有權限進行更改的遠端儲存庫，更新一些文件。接下來，嘗試建立一個包含更改的新分支並提交 Pull Request。
回顧與自學
閱讀更多關於 VSCode.dev 及其其他功能的資訊。
免責聲明：
本文件使用 AI 翻譯服務 Co-op Translator 進行翻譯。我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。應以原始語言的文件作為權威來源。對於關鍵資訊，建議尋求專業人工翻譯。我們對因使用此翻譯而產生的任何誤解或錯誤解讀概不負責。