Responsive resume page source code

about

I think everyone needs a resume page to introduce themselves, either as a plus in an interview or on your personal website.

This is a response style cool and elegant resume web page, computer and mobile phones are applicable, without networking, pure front-end HTML+CSS+JavaScript, can be used for personal resume, personal website, personal profile or learning to use, you can automatically generate your own web page through configuration files.

demo

Web demo address

View the page on your phone or tablet or computer.

Download & Project structure

To happysnaker/Resume download warehouse projects, or type git clone https://github.com/happysnaker/Resume.git to download.

Under Resume:

The config file contains the configuration files for the project.
The personal-info-main. CSS is the main CSS code, the personal-info-animate. CSS is the animation CSS code of the project, and the other CSS files are reference libraries.
The personal-info-main. JS file is the main JS code, and the other JS files are reference libraries.
The images file contains images that might be used.
The SVG file contains some ICONS.
Index.html is the entry point for a web page.

configuration

Configure your information in the./config/config.js file to automatically generate your own web page, following the JavaScript object declaration specification, paying attention to formatting, leaving no commas in the middle of object variables, and leaving no commas at the end of object variables.

var config = {
    /* Configure your basic information here, all data is given as a string */
    name: "Lu Shirong".sex: "Male".age: "19".phone: "19870887127".email: "[email protected]".address: "Now lives in Yiwu, Zhejiang Province".qq: "1637318597".log: "Happysnaker".excpect_work: "Java/Go Backend Development"./* Configure the home page motto collection here */
    motto: [
        "Tomorrow may not be better, but believe that a better tomorrow will come."."There is always time and opportunity for what you want to do, and an excuse for what you don't want to do."."Gor For It!"."A wise man makes long ambition, while a man without ambition makes long ambition."."Those past tears will eventually dry in the memory."."Truth is to destroy illusion.".I would turn my heart toward the moon, but the moon shines on the ditch.."I saw all the flowers in Changan in one day."."It's been a cool autumn!"."Li-an old hero, costraint. Martyrs old age, ambition."."It is better to remove the old man's heart. Poor and stronger, not falling ambition."."We have to trade what we have for what we don't have."."Thick reeds, white dew for frost; The so-called girl is in the water side."."Count the merry men and look at the present!"]./* This is where you can configure the meeting information on the home page. You can embed HTML tags to adjust the format */
    welcome: "Qingqingzijin, leisurely my heart < BR >" +
             "But for your sake, I've been brooding till now." +
             "Hello, I am Lu Shirong, a sophomore majoring in software engineering at Nanchang University." +
             "Nice to meet you!"./* Configure information about me here, you can embed HTML tags to adjust the format */
    about: "< p > hello! My name is Lu Shirong, male, a sophomore in Nanchang Software College. My desired job position is Go/Java back-end development. 
" +
        "< P > I have more Java programming experience, a solid grasp of basic computer knowledge, can well complete their tasks in the work. In addition, I have a passionate working attitude and strong teamwork ability. Meanwhile, I also have the ability of independent development and am good at finding and solving problems. I have strong executive ability, high sense of responsibility, strong sense of collective honor, dare to take responsibility, and can accept overtime or business trip arrangements. +
        "< P > Look forward to contacting you! 
"./** * Configure your skill points here * [" skill points ", mastery level, "skill bar color "] */  
    skills: [["Java".80."red"],
        ["GoLang".77."blue"],
        ["SQL".75."#1abc9c"],
        ["HTML5".67."rgba(0,0,0)"],
        ["CSS3".60."yellow"],
        ["JavaScript".70."pink"]],/* Fill in your skill description here, you can embed HTML tags to adjust the format */
    skills_description: "<ul>" +
        " Good programming knowledge of operating system, computer network, etc. 
" +
        " Familiar with Java basics. 
" +
        " Familiar with JavaIO, multithreading, collections and other basic frameworks. 
" +
        " Understand how the JVM works. 
" +
        " Familiar with basic knowledge of Go language development 
" +
        " Familiar with SQL statement writing and tuning. 
" +
        " Familiar with basic Linux command operations. 
" +
        " Familiar with the use of Spring, IBatis, Struts and other frameworks, understand their principles and mechanisms. 
" +
        " Familiar with caching, messaging, etc. 
" +
        " Knowledge of distributed system design and application. 
" +
        " Familiar with HTML, CSS, JavaScript and the corresponding front-end knowledge. 
" +
        " </ul>"./** * Fill in your personal presentation here * ["img", "URL ", "ProjectName", "brief"] * img indicates your work picture link, URL indicates your project address, ProjectName indicates your warehouse or work name, A brief is a short introduction * Adjust the length of the question */
    portfolio: [["./images/pro-1.png"."http://1.15.234.109:8000/"."Personal Blog"."Here are my Java backend study notes < BR > continuously updated"],
        ["./images/pro-2.png"."https://github.com/happysnaker/Gobang"."Smart man versus gobang."."Intelligent backgammon man-machine game written in C++ 

2021/7/23"],
        ["https://pic3.zhimg.com/80/v2-d9766956d5c85c2780e4c5008fd946ca_1440w.jpg"."https://github.com/happysnaker/StudentsManageSystem".Student Management System."C language +AVL tree + Multiple Bidirectional table implementation"]],/** * Fill in your work history here * [" date ", "job", "Introduction "] * you can embed HTML tags in typeset format */
    work: [
        // If you have work experience, you can write as follows
        // ["————————", "", " No working experience, looking forward to your contact. 
"]

        ["2020/7/1-2021/8/10"."

 Intern of Yan Wang Dian"." Yan Wangdian R&d Department 
" +
            "< P > With the arrival of the Hungry Ghost Festival on July 15 of the lunar calendar, the task of Yan Dian is increasingly huge. I and my group are mainly responsible for the background part of Yan's spectral, planning to solve the problem of tens of millions of visits and concurrent problems, and through clumsy efforts, making the product stable and efficient operation. 
" +
            "< P > With the arrival of the Hungry Ghost Festival on July 15 of the lunar calendar, the task of Yan Dian is increasingly huge. I and my group are mainly responsible for the background part of Yan's spectral, planning to solve the problem of tens of millions of visits and concurrent problems, and through clumsy efforts, making the product stable and efficient operation. 
"
        ],

        ["2020/7/1-2021/8/10"."

 Intern of Yan Wang Dian"." Yan Wangdian R&d Department 
" +
            "< P > With the arrival of the Hungry Ghost Festival on July 15 of the lunar calendar, the task of Yan Dian is increasingly huge. I and my group are mainly responsible for the background part of Yan's spectral, planning to solve the problem of tens of millions of visits and concurrent problems, and through clumsy efforts, making the product stable and efficient operation. 
" +
            "< P > With the arrival of the Hungry Ghost Festival on July 15 of the lunar calendar, the task of Yan Dian is increasingly huge. I and my group are mainly responsible for the background part of Yan's spectral, planning to solve the problem of tens of millions of visits and concurrent problems, and through clumsy efforts, making the product stable and efficient operation. 
"]],/** * Your other experience * [" date ", "Experience", "Introduction "] * It is recommended to fill in your school-level and above awards or other certificates */
    others: [["2021-04-28"."Provincial Third Prize of the 12th Lanqiao Cup College Students GROUP A"."In the second semester of my freshman year, I participated in the 12th Lanqiao Cup College Student Group A, but the competition changed from the previous violence question, more than half of the DP, and only won the provincial third prize.],
        ["2021-04-24"."National Third Prize of the Sixth Team Programming Ladder Competition"."In the second semester of my freshman year, I was selected for the team by the whole grade and won the national third prize in the individual competition."],
        ["2021-04-24"."The 6th Team Programming Ladder Competition National Second Prize"."In the second semester of freshman year, I was selected for the whole grade and won the second prize in the national team."],
        ["2020-11-14"."The third prize of 2020 Nanchang University Program Design Competition"."In the first semester of my freshman year, I participated in the program design contest held by my school and won the third prize."]],/** * Fill in your social network platform * ["img", "url", "desc"] * img is the icon of the social network platform, In the./ SVG directory we have prepared the ICONS of Weibo, Jianshu, Gold digger, Xiaohongshu, Zhihu, CSDN, Facebook, Github, Likou, CF and QQ * URL is your link * desc is a description, move the mouse over it will display the description * Recommend you place the number <= 5 */
    icon: [["./svg/LeetCode.svg"."https://leetcode-cn.com/u/happysnaker/"."My Button home page"],
        ["./svg/github.svg"."https://github.com/happysnaker"."My GitHub home page"],
        [". / SVG/blog. SVG"."http://1.15.234.109:8000"."My Personal blog"],
        [". / SVG/nuggets. SVG. ""."https://juejin.cn/user/3853167638625000"."My Nuggets home page."],
        [". / SVG/zhihu. SVG. ""."https://www.zhihu.com/people/tian-xia-you-dao-81"."My Zhihu Home Page"]],// Here are some image links. It is recommended that you change only the second profile picture
    url: [
        // Background picture, head picture, exhibition background, other experience background
        "./images/intro-bg.jpg"."./images/2.jpg"."./images/work-bk.png"."./images/4.jpg"]}Copy the code

If you do not need to configure this file, comment out the top 4 lines of code in the./JS/personal-info-main. JS file.

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

Refer to the

Reference library

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

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

Anime. Js library website _ free, flexible, lightweight JavaScript animation | animejs

jQuery

other

Burc-li /timeLine: Pure CSS timeLine (github.com)

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

about

demo

Download & Project structure

configuration

Refer to the

Reference library

other

Related Posts

The React project taps into TypeScript practices

The front end performance optimization series | image optimization

A device to break the method, VScode often (touch) with (fish) plug-in collation, update at any time, dead