響應式個人履歷網頁源代碼

關于

我認為每一個人都需要一個履歷網頁以介紹自己，可以作為面試時的加分項，也可以放置在您的個人網站之中。

這是一款響應式炫酷而優雅的個人履歷網頁，電腦與手機均适用，無需聯網，純前端HTML+CSS+JavaScript實作，可用于個人履歷、個人網站、個人簡介或學習使用，可以通過配置檔案自動生成屬于你自己的網頁。

示範

​

在手機或平闆或電腦上檢視該網頁。

下載下傳&項目結構

前往happysnaker/Resume項目倉庫下載下傳項目，或者鍵入​

​git clone https://github.com/happysnaker/Resume.git​

​以下載下傳。

Resume檔案下：

• config檔案包含了項目的配置檔案。
• CSS檔案下personal-info-main.css為主要的CSS代碼，personal-info-animate.css為項目的動畫CSS代碼，其餘CSS檔案為引用庫。
• JS檔案下personal-info-main.js為主要的JS代碼，其餘js檔案為引用庫。
• images檔案包含了可能用上的圖檔。
• svg檔案下包含了一些圖示。
• index.html為網頁的入口。

配置

在./config/config.js檔案中配置您的資訊以自動生成屬于你自己的網頁，遵循JavaScript對象聲明規範，注意格式，對象變量中間不要漏寫逗号，對象變量結尾不要多寫逗号。

var config = {
/*在這裡配置你的基本資訊，所有資料以字元串形式給出*/
name: "盧世榮",
sex: "男",
age: "19",
phone: "19870887127",
email: "[email protected]",
address: "現居浙江省義烏市",
qq: "1637318597",
log: "Happysnaker",
excpect_work: "Java/Go後端開發",


/*在這裡配置首頁的座右銘集合*/
motto: [
"明天不一定會更好，但要堅信更好的明天一定會來。",
"要做的事情總找得出時間和機會，不願意做的事情也總能找得出借口。",
"Gor For It!",
"有智者立長志，無志者長立志。",
"那些過去的眼淚終将風幹在記憶裡。",
"真相，是為了剿滅幻想。",
"我欲将心向明月，奈何明月照溝渠。",
"春風得意馬蹄疾，一日看盡長安花。",
"天涼好個秋！",
"老骥伏枥，志在千裡。烈士暮年，壯心不已。",
"老當益壯，甯移白首之心。窮且益堅，不墜青雲之志。",
"我們必須拿我們所有的， 去換我們所沒有的",
"蒹葭蒼蒼，白露為霜；所謂伊人，在水一方。",
"數風流人物，還看今朝！"
    ],


/*在這裡配置首頁的見面資訊，你可以内嵌HTML标簽以調整格式*/
welcome: "青青子衿，悠悠我心<br>" +
"但為君故，沉吟至今<br>" +
"你好，我是盧世榮，南昌大學軟體工程大二在讀生<br>" +
"很高興見到你!",


/*在這裡配置關于我的資訊，你可以内嵌HTML标簽以調整格式*/
about: "<p>你好！我叫盧世榮，性别男，南昌軟體學院大二在讀。我期望的工作崗位是Go/Java後端開發。</p>" +
"<p>我有着較多的Java程式設計經驗，計算機基礎知識掌握紮實，能夠在工作中很好的完成自己的任務。此外，我有着充滿激情的工作态度，團隊協同作戰能力強，同時我也具備獨立開發的能力，擅于發現并解決問題。我的執行力強、責任感高、集體榮譽感強、敢于擔當，能夠接受加班或出差等安排</p>" +
"<p>十分期待與您的聯系!</p>",



/** 
    * 在這裡配置你的技能點
    * ["技能點", 掌握程度, "技能條顔色"]
    */  
skills: [
        ["Java", 80, "red"],
        ["GoLang", 77, "blue"],
        ["SQL", 75, "#1abc9c"],
        ["HTML5", 67, "rgba(0,0,0)"],
        ["CSS3", 60, "yellow"],
        ["JavaScript", 70, "pink"]
    ],


/*這裡填寫你的技能描述，你可以内嵌HTML标簽以調整格式*/
skills_description: "<ul>" +
"     <li>作業系統、計算機網絡等程式設計基礎知識良好。</li>" +
"     <li>熟練掌握Java基礎。</li>" +
"     <li>熟悉JavaIO、多線程、集合等基礎架構。</li>" +
"     <li>了解JVM原理。</li>" +
"     <li>熟悉Go語言開發基本知識。</li>" +
"     <li>熟悉SQL語句編寫以及調優。</li>" +
"     <li>熟悉基本Linux指令操作。</li>" +
"     <li>熟悉Spring、ibatis、struts等架構的使用，了解其原理與機制。</li>" +
"     <li>熟悉緩存、消息等機制。</li>" +
"     <li>了解分布式系統的設計與應用。</li>" +
"     <li>熟悉HTML、CSS、JavaScript以及相應前端知識。</li>" +
" </ul>",


/**
     * 這裡填寫你的個人作品展示
     * ["img"，"url", "ProjectName", "brief"]
     * img表示您的作品圖檔連結，url表示您的項目位址，ProjectName表示您的倉庫或作品名稱，brief是一句簡短的介紹
     * 通過檢視實際效果以調整字題長度
     */
portfolio: [
        ["./images/pro-1.png", "http://1.15.234.109:8000/", "個人部落格", "這裡記錄了我的Java後端學習筆記<br>持續更新"],
        ["./images/pro-2.png", "https://github.com/happysnaker/Gobang", "智能人機對戰五子棋", "采用C++編寫的智能五子棋人機對戰<br>2021/7/23"],
        ["https://pic3.zhimg.com/80/v2-d9766956d5c85c2780e4c5008fd946ca_1440w.jpg", "https://github.com/happysnaker/StudentsManageSystem", "學生管理系統", "C語言+AVL樹+多重雙向表實作"]
    ],


/**
     * 這裡填寫您的工作經曆
     * ["日期"， "工作"， "介紹"]
     * 你可以内嵌HTML标簽以排版格式
     */
work: [
//如果您内有工作經曆，您可以采取下列寫法
// ["————————", "", "<p>暫無工作經曆，期待您的聯系。</p>"]

        ["2020/7/1 — 2021/8/10", "<br>閻王殿實習生",
"<p><strong>閻王殿研發部</strong></p>" +
"<p>随着陰曆7月15中元節的到來，閻王殿的任務愈發龐大，我以及我所在小組主要負責閻王譜背景部分，拟在解決千萬通路并發問題，經過不械努力，使得産品穩定、高效的運作。</p>" +
"<p>随着陰曆7月15中元節的到來，閻王殿的任務愈發龐大，我以及我所在小組主要負責閻王譜背景部分，拟在解決千萬通路并發問題，經過不械努力，使得産品穩定、高效的運作。</p>"
        ],

        ["2020/7/1 — 2021/8/10", "<br>閻王殿實習生",
"<p><strong>閻王殿研發部</strong></p>" +
"<p>随着陰曆7月15中元節的到來，閻王殿的任務愈發龐大，我以及我所在小組主要負責閻王譜背景部分，拟在解決千萬通路并發問題，經過不械努力，使得産品穩定、高效的運作。</p>" +
"<p>随着陰曆7月15中元節的到來，閻王殿的任務愈發龐大，我以及我所在小組主要負責閻王譜背景部分，拟在解決千萬通路并發問題，經過不械努力，使得産品穩定、高效的運作。</p>"
        ]
    ],


/**
     * 這裡填寫你的其他經曆
     * ["日期"， "經曆"， "介紹"]
     * 建議填寫您的校級及以上得獎經曆或或其他證書
     */
others: [
        ["2021-04-28", "第十二屆藍橋杯大學生A組省三等獎", "大一下學期，我參與第十二屆藍橋杯大學生A組，然比賽一改以往暴力題，半數以上DP，僅取得省級三等獎。"],
        ["2021-04-24", "第六屆團隊程式設計天梯賽個人國家三等獎", "大一下學期，我通過面向全年級的選拔，獲得入隊名額，在個人賽中獲得全國三等獎。"],
        ["2021-04-24", "第六屆團隊程式設計天梯賽團體國家二等獎", "大一下學期，我通過面向全年級的選拔，獲得入隊名額，跟随團隊取得團體國家二等獎的成績。"],
        ["2020-11-14", "2020級南昌大學程式設計正式賽三等獎", "大一上學期，我參與校舉辦的面向全校程式設計大賽并獲得三等獎，"]
    ],


/**
     * 在這裡填寫您的社交網絡平台
     * ["img", "url", "desc"]
     * img是社交平台的圖示，在./svg目錄下我們已經準備好了 微網誌、簡書、掘金、小紅書、知乎、csdn、facebook、github、力扣、CF和qq的圖示
     * url是您連結
     * desc是一段描述，将滑鼠移入将會顯示該描述
     * 建議您放置數量 <= 5
     */
icon: [
        ["./svg/LeetCode.svg", ],
        ["./svg/github.svg", ],
        ["./svg/部落格.svg", ""],
        ["./svg/掘金.svg", "", "],
        ["./svg/知乎.svg", "
    ],


//這是一些圖檔連結，建議您僅更改第二個頭像圖檔
url: [
//背景圖、頭像、作品展示背景、其他經曆背景
"./images/intro-bg.jpg",
"./images/2.jpg",
"./images/work-bk.png",
"./images/4.jpg"
    ]

}
      

如果您不需要配置該檔案，請注釋掉./JS/personal-info-main.js檔案中頂層4行代碼.

function addScript(url) {
    document.write("<script language=javascript src=./config/config.js></script>");
}
addScript();