回應式個人簡歷網頁源代碼-有解無憂

關于

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

這是一款回應式炫酷而優雅的個人簡歷網頁，電腦與手機均適用，無需聯網，純前端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: "happysnaker@foxmail.com",
    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", "https://leetcode-cn.com/u/happysnaker/", "我的力扣主頁"],
        ["./svg/github.svg", "https://github.com/happysnaker", "我的GitHub主頁"],
        ["./svg/博客.svg", "http://1.15.234.109:8000", "我的個人博客"],
        ["./svg/掘金.svg", "https://juejin.cn/user/3853167638625000", "我的掘金主頁"],
        ["./svg/知乎.svg", "https://www.zhihu.com/people/tian-xia-you-dao-81", "我的知乎主頁"]
    ],


    //這是一些圖片鏈接，建議您僅更改第二個頭像圖片
    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();

參閱

參考庫

Bootstrap · The most popular HTML, CSS, and JS library in the world. (getbootstrap.com)

AOS - Animate on scroll library (michalsnik.github.io)

anime.js官網_免費、靈活的輕型JavaScript影片庫 | animejs

jQuery

其他

burc-li/timeLine: 純CSS時間軸 (github.com)

VincentGarreau/particles.js: A lightweight JavaScript library for creating particles (github.com)

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/294231.html

標籤：其他

上一篇：JavaScript核心-兼容性問題等（二）

下一篇：javascript實作五大排序演算法（冒泡排序、選擇排序、插入排序、希爾排序、快速排序）j