响应式个人简历网页源代码

关于

我认为每一个人都需要一个简历网页以介绍自己，可以作为面试时的加分项，也可以放置在您的个人网站之中。

这是一款响应式炫酷而优雅的个人简历网页，电脑与手机均适用，无需联网，纯前端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)

响应式个人简历网页源代码相关推荐

网页规划与设计HTML5+CSS大作业——响应式个人简历介绍(5页)-模板下载
HTML5+CSS大作业--响应式个人简历介绍(5页)-模板下载常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. ...
HTML实训大作业网页设计：我的简历——响应式个人简历网站模板(1页) HTML+CSS+JavaScript web网页设计制作成品
HTML实训大作业网页设计:我的简历--响应式个人简历网站模板(1页) HTML+CSS+JavaScript 期末作业HTML代码学生网页课程设计期末作业下载 web网页设计制作成品 >&g ...
HTML5+CSS大作业——响应式个人简历介绍(5页)-模板下载
HTML5+CSS大作业--响应式个人简历介绍(5页)-模板下载常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. ...
20款响应式的 HTML5 网页模板【免费下载】
下面的列表集合了20款响应式的 HTML5 网页模板,这些专业的模板能够让你的网站吸引很多的访客.除了好看的外观,HTML5 模板吸引大家的另一个原因是由于其响应性和流动性.赶紧来看看. 您可能感兴趣 ...
Web前端--HTML+CSS+JavaScript响应式网络科技网页设计
临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?网页要求的总数量太多?HTML网页作业无从下手?没有合适的模板?等等一系列问题.你想要解决的问题,在这里常见网页设计作业题材有个 ...
原生前端实现响应式个人简历网站设计(附源码)
目录网站站点所用技术实现功能视频展示源码网站站点胜烨的个人网站所用技术 HTML css JavaScript 实现功能响应式界面设计捕捉用户操作明暗模式服务器部署视频展示 ...
html5模板欧美风格,红色欧美风格响应式后台系统网页模板
模板描述:红色欧美响应式后台系统.红色欧美风格响应式后台系统网页模板html模板下载代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 Close Search DarkAdmin ...
pc网页响应式在手机网页宽度980px问题方案
pc网页响应式在手机网页宽度980px问题方案 html中加上如下代码: <meta name="viewport" content="width=device-w ...
响应式web开发网页案例 ——29款表单模板
如果你正在寻找有趣的响应式web开发网页案例,那你找对地方了.本文与大家分享一下,点击图片即可下载. 1. [网页响应式开发]粉红简洁登录框表单模板大小:124 KB 下载地址:http://www ...
Web前端---响应式室内家具网页设计（HTML+CSS+JS）
临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?网页要求的总数量太多?HTML网页作业无从下手?没有合适的模板?等等一系列问题.你想要解决的问题,在这里常见网页设计作业题材有个 ...

响应式个人简历网页源代码

关于

演示

下载&项目结构

配置

参阅

引用库

其他

响应式个人简历网页源代码相关推荐

最新文章

热门文章