当前位置: 首页 > Web前端 > CSS

响应式在线简历页面源码分享

时间:2023-03-31 11:44:24 CSS

关于我觉得每个人都需要一个简历页面来介绍自己,可以作为面试时的加分项,也可以放在个人网站上。这是一个响应式、炫酷优雅的个人简历网页,电脑端和手机端都适用,无需联网,纯前端HTML+CSS+JavaScript实现,可用于个人简历、个人网站、个人简介或学习,可以通过配置文件自动生成自己的网页。演示网页演示URL在您的手机或平板电脑或计算机上查看此网页。下载和项目结构前往happysnaker/Resume项目仓库下载项目,或输入gitclonehttps://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文件是引用库。图像文件包含可以使用的图像。svg文件包含一些图标。index.html是网页的入口。配置在./config/config.js文件中配置你的信息自动生成你自己的网页,遵循JavaScript对象声明规范,注意格式,对象变量中间不要漏掉逗号,不要在对象变量的末尾写更多的逗号。varconfig={/*在这里配置你的基本信息,所有数据以字符串形式给出*/name:"LuShirong",sex:"male",age:"19",phone:"19870887127",email:"happysnaker@foxmail.com",address:"现住浙江省义乌市",qq:"1637318597",log:"Happysnaker",except_work:"Java/Go后端开发",/*此处配置首页格言Collection*/格言:【“明天不一定会更好,但你要坚信,更好的明天一定会到来。”,“你总能找到时间和机会做你想做的事情,你总能找到事情你不想做找借口。”、“GorForIt!”、“有智者志长,无志者志长。","那些曾经的眼泪,终究会在记忆中干涸。”、“真相就是要破除幻想。”、“欲转心明月,明月照沟。”、“春风傲马蹄病,一日看尽长安花。”、“秋天真凉爽!”、“老夫,志在千里。晚年,烈士志存高远。”、“老壮,宁动白首之心。贫而强,志不坠青天。”、“要以有为换无”,“芦苇青,白露为霜;所谓伊拉克人在水这边。","数风流人物,看今朝!"],/*在这里配置首页的会议信息,可以嵌入HTML标签调整格式*/welcome:"青青紫金,我心悠然
"+"但为了你,我有一直在琢磨
"+"你好,我是南昌大学软件工程大二学生卢世荣
"+"很高兴认识你!",/*在这里配置关于我的信息,你可以嵌入调整格式的HTML标签*/about:"

你好!我叫卢世荣,男,南昌软件学院大二学生。我想要的职位是Go/Java后端开发。

"+"

本人有丰富的Java编程经验,计算机基础知识扎实,在工作中能够很好地完成任务。此外,我有热情的工作态度和较强的团队合作能力。同时,我也具备独立开发的能力,善于发现和解决问题。本人执行力强,责任心强,集体荣誉感强,勇于承担责任,能接受加班或出差等安排

"+"

期待与您联系!

",/***在这里配置你的技能点*["技能点",熟练程度,"技能栏颜色"]*/skills:[["Java",80,"red"],["GoLang",77,"蓝色"],["SQL",75,"#1abc9c"],["HTML5",67,"rgba(0,0,0)"],["CSS3",60,"yellow"],["JavaScript",70,"pink"]],/*在这里填写你的技能描述,可以嵌入HTML标签调整格式*/skills_description:"
    "+"
  • Programming操作系统和计算机网络等基础知识良好。
  • "+"
  • 精通Java基础。
  • "+"
  • 熟悉JavaIO、多线程、集合等基础框架。
  • "+"
  • 了解JVM原理。
  • "+"
  • 熟悉Go语言开发的基础知识。
  • "+"
  • 熟悉SQL语句的编写和调优。
  • "+"
  • 熟悉基本的Linux命令操作。
  • "+"
  • 熟悉Spring、ibatis、struts等框架的使用,了解它们的原理和机制。
  • "+"
  • 熟悉缓存、消息等机制。
  • "+"
  • 了解分布式系统的设计和应用。
  • "+"
  • 熟悉HTML、CSS、JavaScript及相应的前端知识。
  • "+"
",/***这里填写你的个人作品展示*["img","url","ProjectName","brief"]*img表示你的作品图片链接,url表示你的项目地址,ProjectName表示你的仓库或作品名称,brief是简短介绍*标题长度根据实际效果调整*/portfolio:[["./images/pro-1.png","http://1.15.234.109:8000/","个人博客","这里是我的Java后端学习笔记
持续更新中"],["./images/pro-2.png","https://github.com/happysnaker/Gobang,"智能人机对战五子棋","C++编写的智能五子棋人机对战
2021/7/23"],["https://pic3.zhimg.com/80/v2-d9766956d5c85c2780e4c5008fd946ca_1440w.jpg","https://github.com/happysnaker/StudentsManageSystem","学生管理系统","C语言+AVL树+多个双向表实现"]],/***这里填写你的工作经历*["Date","Work","Introduction"]*可以嵌入HTML标签进行格式化*/work:[//如果你有工作经验,可以采取下面的写法//["————————","","

暂无工作经验,期待您的联系。

"]["2020/7/1—2021/8/10","
燕王店实习生","

燕王店研发部

"+"

随着农历七月十五中元节的到来,阎罗王庙的任务也越来越复杂。努力使产品运行稳定高效。

"+"

随着农历七月十五中元节的到来,阎王殿的任务也变得越来越复杂。我和我的团队主要负责燕王铺的后台部分,我们计划解决百万访问量的并发问题,通过不懈的努力让产品稳定高效的运行。

"],["2020/7/1—2021/8/10","
燕王店实习生","

燕王店研发部

"+"

随着农历七月十五中元节的到来,阎罗王庙的任务也越来越复杂。我和我的团队主要负责阎王殿的背景部分。机械的努力使产品运行稳定高效。

"+"

随着农历七月十五中元节的到来,阎王殿的任务也变得越来越复杂。我和我的团队主要负责燕王铺的后台部分,我们计划解决百万访问量的并发问题,通过不懈的努力让产品稳定高效的运行。

"]],/***在此填写您的其他经历*["日期","经历","简介"]*建议填写校级及以上获奖经历或othercertificates*/others:[["2021-04-28","第十二届蓝桥杯大学生A组省级三等奖","大一上学期我参加第十二届蓝桥杯高校学生组A,比赛持续一改以往的暴力提问,过半的DP仅获得省级三等奖。",["2021-04-24","第六届团队编程阶梯赛个人全国三等奖","大一上学期通过各年级选拔获得入队名额.在个人赛中获得全国三等奖。",["2021-04-24","第六届团队编程阶梯大赛全国二等奖","大一上学期通过全年级选拔获得入队名额,并跟随团队获得了团队全国二等奖的成绩。",["2020-11-14","2020年南昌大学程序设计竞赛三等奖","大一第一学期,我参加了学校举办的全校程序设计竞赛,荣获三等奖,"]],/***在这里填写你的社交网络平台*["img","url","desc"]*img是社交平台的图标,我们准备了微博的图标简书、掘金、小红书、知乎、csdn、facebook、github、力拓、CF和qq*url是你的链接*desc是描述,移动鼠标显示描述*建议你放置Quantity<=5*/icon:[["./svg/LeetCode.svg","https://leetcode-cn.com/u/happysnaker/","我的LeetCode主页"],["./svg/github.svg","https://github.com/happysnaker","我的GitHub主页"],["./svg/blog.svg","http://1.15.234.109:8000","我的个人博客"],["./svg/Nuggets.svg","https://juejin.cn/user/3853167638625000","我的掘金主页"],["./svg/almost.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行代码。functionaddScriptt(url){document.write("");}addScript();参考库Bootstrap·世界上最流行的HTML、CSS和JS库。(getbootstrap.com)AOS-Animateonscroll库(michalsnik.github.io)anime.js官网_免费、灵活的轻量级JavaScript动画库|animejsjQuery其他burc-li/timeLine:纯CSS时间轴(github.com)VincentGarreau/particles.js:用于创建粒子的轻量级JavaScript库(github.com)