生成式A.I.(AIGC)從0開始 - 第一個LLMs小應用 - 履歷產生器 (4) 串接前端頁面 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2023 iThome 鐵人賽

DAY 8

AI & Data

2023 AI大型語言模型之旅 - 從0開始學習建構AI專案系列第 8 篇

生成式A.I.(AIGC)從0開始 - 第一個LLMs小應用 - 履歷產生器 (4) 串接前端頁面

15th鐵人賽 openai chatgpt react html

shrine90459

2023-09-23 22:39:27

541 瀏覽

分享至

前一天我們已經有資料了

{
  "name": "王小明",
  "jobTitle": "軟體工程師",
  "contact": {
    "email": "xiaoming@email.com",
    "phone": "123-456-7890",
    "address": "台北市中山區"
  },
  "skills": [
    "程式語言：Java, Python, C++",
    "Web 開發：HTML, CSS, JavaScript",
    "資料庫：MySQL, MongoDB",
    "框架和庫：React, Spring Boot, TensorFlow",
    "軟體工程：軟體設計, 測試自動化, 故障排除",
    "團隊合作和溝通能力"
  ],
  "summary": "具備多年軟體開發經驗，熟悉Java、Python、C++等多種程式語言，擅長Web開發和數據庫管理。尋求挑戰性的軟體工程師職位。",
  "experience": [
    {
      "company": "ABC軟體開發公司",
      "jobTitle": "軟體工程師",
      "date": "2020年至今",
      "responsibilities": [
        "負責設計和開發Web應用程式。",
        "解決複雜的技術問題。",
        "協助培訓新進工程師。"
      ]
    },
    {
      "company": "XYZ科技有限公司",
      "jobTitle": "實習軟體工程師",
      "date": "2019年",
      "responsibilities": [
        "參與軟體測試和維護工作。",
        "協助測試團隊進行測試用例的撰寫和執行。"
      ]
    }
  ],
  "languages": [
    "中文：母語",
    "英文：流利"
  ]
}

現在要再搭配個前端頁面
這裡想要怎麼設計都可以，
當然也可以要求ChatGPT幫助我們

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>履歷</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="name-container">
        <h1 class="name">王小明</h1>
    </div>
    <div class="container">
        <div class="left-section">
            <header>
                <p class="job-title">軟體工程師</p>
            </header>
            <section class="contact">
                <h2 class="section-title">聯絡資訊</h2>
                <ul>
                    <li>Email: xiaoming@email.com</li>
                    <li>電話: 123-456-7890</li>
                    <li>地址: 台北市中山區</li>
                </ul>
            </section>
            <section class="skills">
                <h2 class="section-title">技能</h2>
                <ul>
                    <li>程式語言：Java, Python, C++</li>
                    <li>Web 開發：HTML, CSS, JavaScript</li>
                    <li>資料庫：MySQL, MongoDB</li>
                    <li>框架和庫：React, Spring Boot, TensorFlow</li>
                    <li>軟體工程：軟體設計, 測試自動化, 故障排除</li>
                    <li>團隊合作和溝通能力</li>
                </ul>
            </section>
        </div>
        <div class="right-section">
            <section class="summary">
                <h2 class="section-title">專業摘要</h2>
                <p>具備多年軟體開發經驗，熟悉Java、Python、C++等多種程式語言，擅長Web開發和數據庫管理。尋求挑戰性的軟體工程師職位。</p>
            </section>
            <section class="experience">
                <h2 class="section-title">工作經驗</h2>
                <div class="job">
                    <h3>ABC軟體開發公司</h3>
                    <p class="job-title">軟體工程師</p>
                    <p class="job-date">2020年至今</p>
                    <ul>
                        <li>負責設計和開發Web應用程式。</li>
                        <li>解決複雜的技術問題。</li>
                        <li>協助培訓新進工程師。</li>
                    </ul>
                </div>
                <div class="job">
                    <h3>XYZ科技有限公司</h3>
                    <p class="job-title">實習軟體工程師</p>
                    <p class="job-date">2019年</p>
                    <ul>
                        <li>參與軟體測試和維護工作。</li>
                        <li>協助測試團隊進行測試用例的撰寫和執行。</li>
                    </ul>
                </div>
            </section>
            <section class="languages">
                <h2 class="section-title">語言能力</h2>
                <ul>
                    <li>中文：母語</li>
                    <li>英文：流利</li>
                </ul>
            </section>
        </div>
    </div>
</body>
</html>

CSS部分

/* Reset some default styles */
body, h1, h2, h3, p, ul, li {
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f5f5f5;
    color: #333;
    line-height: 1.6;
}

.name-container {
    background-color: #3498db;
    text-align: center;
    padding: 20px 0;
        max-width: 800px;
    margin: 0 auto;

}

.name {
    font-size: 2em;
    margin-bottom: 5px;
    color: #fff; 

}

.container {
    display: flex;
    max-width: 800px;
    margin: 0 auto;
    background-color: #e0e0e0;
}

.left-section {
    flex: 1;
    padding: 20px;
}

header {
    background-color: #3498db;
    color: #fff;
    text-align: center;
    padding: 20px 0;
}

.job-title {
    font-size: 1.2em;
}

.right-section {
    flex: 1;
    padding: 20px;
}

section {
    background-color: #fff;
    margin-bottom: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
}

.section-title {
    font-size: 1.5em;
    margin-bottom: 10px;
    color: #3498db; 
}

ul {
    list-style-type: none;
    padding-left: 0;
}

li {
    margin-bottom: 5px;
}

.job-title {
    font-weight: bold;
}

.job-date {
    font-style: italic;
}

如果是react，我們則可以
const data = {} //api得到的 json
然後在data.name data.jobTitle 依此類推

現在來看看我們的成果