【HTML | CSS | JAVASCRIPT】一款响应式精美简历模板分享（万字长文

💂作者简介： THUNDER王，一名热爱财税和SAP ABAP编程以及热爱分享的博主。目前于江西师范大学会计学专业大二本科在读，同时任汉硕云（广东）科技有限公司ABAP开发顾问。在学习工作中，我通常使用偏后端的开发语言ABAP，SQL进行任务的完成，对SAP企业管理系统，SAP ABAP开发和数据库具有较深入的研究。

💅文章概要： 各位C站的小伙伴们，今天闲来无事逛Github，无意中发现了这款精美的个人简历模板，刚好可以用作我的个人博客的简历介绍，兴奋之余便写下这篇文章将这款模板分享给大家！让我们一起来看看吧！收藏我并且关注博主，让我们拿起电脑一起练，一路火光带闪电！

🤟每日一言： 你可以遗憾，但是你绝对不能后悔。遗憾证明你努力过了，只是力有不逮。而后悔，只能说明你当时没努力过。

前言
响应式布局介绍
简历模板效果演示
- PC端效果演示
- 手机端效果演示
- IPAD竖屏效果演示
- IPAD横屏效果演示
完整源码
个性化修改
- 姓名标签修改
- font图标文字修改
  - 修改Home标签下的【font图标文字】
  - 修改Skills标签下的【font图标文字】
  - 修改网页底部下的【font图标文字】
- 图片修改
- 文字说明修改
写在最后的话

前言

各位C站的小伙伴们，今天闲来无事逛Github，无意中发现了这款精美的个人简历模板，刚好可以用作我的个人博客的简历介绍，兴奋之余便写下这篇文章将这款模板分享给大家！由于个人能力有限，本篇文章只做分享和个性化修改讲解，会在文末将代码粘出来供大家一起学习探讨！

响应式布局介绍

响应式布局 是 Ethan Marcotte 在 2010年5月份 提出的一个概念，简而言之，就是 一个网站能够兼容多个终端 ——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。 响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验 ，而且随着大屏幕移动设备的普及，用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。

简历模板效果演示

PC端效果演示

手机端效果演示

IPAD竖屏效果演示

IPAD横屏效果演示

完整源码

代码语言：javascript

复制

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    &lt;link rel=&#34;stylesheet&#34; href=&#34;http://wyz-math.cn/admin/wyz%E8%87%AA%E5%BB%BA/re/re/assets/css/styles.css&#34;&gt;
    &lt;!-- =====BOX ICONS===== --&gt;
    &lt;link href=&#39;https://cdn.jsdelivr.net/npm/boxicons@2.0.5/css/boxicons.min.css&#39; rel=&#39;stylesheet&#39;&gt;
    &lt;title&gt;Portfolio website complete&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;!--===== HEADER =====--&gt;
    &lt;header class=&#34;l-header&#34;&gt;
        &lt;nav class=&#34;nav bd-grid&#34;&gt;
            &lt;div&gt;
                &lt;a href=&#34;#&#34; class=&#34;nav__logo&#34;&gt;Marlon&lt;/a&gt;
            &lt;/div&gt;

            &lt;div class=&#34;nav__menu&#34; id=&#34;nav-menu&#34;&gt;
                &lt;ul class=&#34;nav__list&#34;&gt;
                    &lt;li class=&#34;nav__item&#34;&gt;&lt;a href=&#34;#home&#34; class=&#34;nav__link active&#34;&gt;Home&lt;/a&gt;&lt;/li&gt;
                    &lt;li class=&#34;nav__item&#34;&gt;&lt;a href=&#34;#about&#34; class=&#34;nav__link&#34;&gt;About&lt;/a&gt;&lt;/li&gt;
                    &lt;li class=&#34;nav__item&#34;&gt;&lt;a href=&#34;#skills&#34; class=&#34;nav__link&#34;&gt;Skills&lt;/a&gt;&lt;/li&gt;
                    &lt;li class=&#34;nav__item&#34;&gt;&lt;a href=&#34;#work&#34; class=&#34;nav__link&#34;&gt;Work&lt;/a&gt;&lt;/li&gt;
                    &lt;li class=&#34;nav__item&#34;&gt;&lt;a href=&#34;#contact&#34; class=&#34;nav__link&#34;&gt;Contact&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/div&gt;

            &lt;div class=&#34;nav__toggle&#34; id=&#34;nav-toggle&#34;&gt;
                &lt;i class=&#39;bx bx-menu&#39;&gt;&lt;/i&gt;
            &lt;/div&gt;
        &lt;/nav&gt;
    &lt;/header&gt;

    &lt;main class=&#34;l-main&#34;&gt;
        &lt;!--===== HOME =====--&gt;
        &lt;section class=&#34;home bd-grid&#34; id=&#34;home&#34;&gt;
            &lt;div class=&#34;home__data&#34;&gt;
                &lt;h1 class=&#34;home__title&#34;&gt;Hi,&lt;br&gt;I&#39;am &lt;span class=&#34;home__title-color&#34;&gt;Marlon&lt;/span&gt;&lt;br&gt; Web Designer&lt;/h1&gt;

                &lt;a href=&#34;#&#34; class=&#34;button&#34;&gt;Contact&lt;/a&gt;
            &lt;/div&gt;

            &lt;div class=&#34;home__social&#34;&gt;
                &lt;a href=&#34;&#34; class=&#34;home__social-icon&#34;&gt;&lt;i class=&#39;bx bxl-linkedin&#39;&gt;&lt;/i&gt;&lt;/a&gt;
                &lt;a href=&#34;&#34; class=&#34;home__social-icon&#34;&gt;&lt;i class=&#39;bx bxl-behance&#39; &gt;&lt;/i&gt;&lt;/a&gt;
                &lt;a href=&#34;&#34; class=&#34;home__social-icon&#34;&gt;&lt;i class=&#39;bx bxl-github&#39; &gt;&lt;/i&gt;&lt;/a&gt;
            &lt;/div&gt;

            &lt;div class=&#34;home__img&#34;&gt;
                &lt;svg class=&#34;home__blob&#34; viewBox=&#34;0 0 479 467&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; xmlns:xlink=&#34;http://www.w3.org/1999/xlink&#34;&gt;
                    &lt;mask id=&#34;mask0&#34; mask-type=&#34;alpha&#34;&gt;
                        &lt;path d=&#34;M9.19024 145.964C34.0253 76.5814 114.865 54.7299 184.111 29.4823C245.804 6.98884 311.86 -14.9503 370.735 14.143C431.207 44.026 467.948 107.508 477.191 174.311C485.897 237.229 454.931 294.377 416.506 344.954C373.74 401.245 326.068 462.801 255.442 466.189C179.416 469.835 111.552 422.137 65.1576 361.805C17.4835 299.81 -17.1617 219.583 9.19024 145.964Z&#34;/&gt;
                    &lt;/mask&gt;
                    &lt;g mask=&#34;url(#mask0)&#34;&gt;
                        &lt;path d=&#34;M9.19024 145.964C34.0253 76.5814 114.865 54.7299 184.111 29.4823C245.804 6.98884 311.86 -14.9503 370.735 14.143C431.207 44.026 467.948 107.508 477.191 174.311C485.897 237.229 454.931 294.377 416.506 344.954C373.74 401.245 326.068 462.801 255.442 466.189C179.416 469.835 111.552 422.137 65.1576 361.805C17.4835 299.81 -17.1617 219.583 9.19024 145.964Z&#34;/&gt;
                        &lt;image class=&#34;home__blob-img&#34; x=&#34;50&#34; y=&#34;60&#34; href=&#34;http://wyz-math.cn/admin/wyz%E8%87%AA%E5%BB%BA/resume/assets/img/perfil.png&#34;/&gt;
                    &lt;/g&gt;
                &lt;/svg&gt;
            &lt;/div&gt;
        &lt;/section&gt;

        &lt;!--===== ABOUT =====--&gt;
        &lt;section class=&#34;about section &#34; id=&#34;about&#34;&gt;
            &lt;h2 class=&#34;section-title&#34;&gt;About&lt;/h2&gt;

            &lt;div class=&#34;about__container bd-grid&#34;&gt;
                &lt;div class=&#34;about__img&#34;&gt;
                    &lt;img src=&#34;http://wyz-math.cn/admin/wyz%E8%87%AA%E5%BB%BA/resume/assets/img/

about.jpg" alt="">

</div>
                &lt;div&gt;
                    &lt;h2 class=&#34;about__subtitle&#34;&gt;I&#39;am Marlon&lt;/h2&gt;
                    &lt;p class=&#34;about__text&#34;&gt;Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptate cum expedita quo culpa tempora, assumenda, quis fugiat ut voluptates soluta, aut earum nemo recusandae cumque perferendis! Recusandae alias accusamus atque.&lt;/p&gt;           
                &lt;/div&gt;                                   
            &lt;/div&gt;
        &lt;/section&gt;

        &lt;!--===== SKILLS =====--&gt;
        &lt;section class=&#34;skills section&#34; id=&#34;skills&#34;&gt;
            &lt;h2 class=&#34;section-title&#34;&gt;Skills&lt;/h2&gt;

            &lt;div class=&#34;skills__container bd-grid&#34;&gt;          
                &lt;div&gt;
                    &lt;h2 class=&#34;skills__subtitle&#34;&gt;Profesional Skills&lt;/h2&gt;
                    &lt;p class=&#34;skills__text&#34;&gt;Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit optio id vero amet, alias architecto consectetur error eum eaque sit.&lt;/p&gt;
                    &lt;div class=&#34;skills__data&#34;&gt;
                        &lt;div class=&#34;skills__names&#34;&gt;
                            &lt;i class=&#39;bx bxl-html5 skills__icon&#39;&gt;&lt;/i&gt;
                            &lt;span class=&#34;skills__name&#34;&gt;HTML5&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;div class=&#34;skills__bar skills__html&#34;&gt;

                        &lt;/div&gt;
                        &lt;div&gt;
                            &lt;span class=&#34;skills__percentage&#34;&gt;95%&lt;/span&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class=&#34;skills__data&#34;&gt;
                        &lt;div class=&#34;skills__names&#34;&gt;
                            &lt;i class=&#39;bx bxl-css3 skills__icon&#39;&gt;&lt;/i&gt;
                            &lt;span class=&#34;skills__name&#34;&gt;CSS3&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;div class=&#34;skills__bar skills__css&#34;&gt;
                            
                        &lt;/div&gt;
                        &lt;div&gt;
                            &lt;span class=&#34;skills__percentage&#34;&gt;85%&lt;/span&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class=&#34;skills__data&#34;&gt;
                        &lt;div class=&#34;skills__names&#34;&gt;
                            &lt;i class=&#39;bx bxl-javascript skills__icon&#39; &gt;&lt;/i&gt;
                            &lt;span class=&#34;skills__name&#34;&gt;JAVASCRIPT&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;div class=&#34;skills__bar skills__js&#34;&gt;
                            
                        &lt;/div&gt;
                        &lt;div&gt;
                            &lt;span class=&#34;skills__percentage&#34;&gt;65%&lt;/span&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class=&#34;skills__data&#34;&gt;
                        &lt;div class=&#34;skills__names&#34;&gt;
                            &lt;i class=&#39;bx bxs-paint skills__icon&#39;&gt;&lt;/i&gt;
                            &lt;span class=&#34;skills__name&#34;&gt;UX/UI&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;div class=&#34;skills__bar skills__ux&#34;&gt;
                            
                        &lt;/div&gt;
                        &lt;div&gt;
                            &lt;span class=&#34;skills__percentage&#34;&gt;85%&lt;/span&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                
                &lt;div&gt;              
                    &lt;img src=&#34;http://wyz-math.cn/admin/wyz%E8%87%AA%E5%BB%BA/resume/assets/img/work3.jpg&#34; alt=&#34;&#34; class=&#34;skills__img&#34;&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/section&gt;

        &lt;!--===== WORK =====--&gt;
        &lt;section class=&#34;work section&#34; id=&#34;work&#34;&gt;
            &lt;h2 class=&#34;section-title&#34;&gt;Work&lt;/h2&gt;

            &lt;div class=&#34;work__container bd-grid&#34;&gt;
                &lt;a href=&#34;&#34; class=&#34;work__img&#34;&gt;
                    &lt;img src=&#34;http://wyz-math.cn/admin/wyz%E8%87%AA%E5%BB%BA/resume/assets/img/work1.jpg&#34; alt=&#34;&#34;&gt;
                &lt;/a&gt;
                &lt;a href=&#34;&#34; class=&#34;work__img&#34;&gt;
                    &lt;img src=&#34;http://wyz-math.cn/admin/wyz%E8%87%AA%E5%BB%BA/resume/assets/img/work2.jpg&#34; alt=&#34;&#34;&gt;
                &lt;/a&gt;
                &lt;a href=&#34;&#34; class=&#34;work__img&#34;&gt;
                    &lt;img src=&#34;http://wyz-math.cn/admin/wyz%E8%87%AA%E5%BB%BA/resume/assets/img/work3.jpg&#34; alt=&#34;&#34;&gt;
                &lt;/a&gt;
                &lt;a href=&#34;&#34; class=&#34;work__img&#34;&gt;
                    &lt;img src=&#34;http://wyz-math.cn/admin/wyz%E8%87%AA%E5%BB%BA/resume/assets/img/work4.jpg&#34; alt=&#34;&#34;&gt;
                &lt;/a&gt;
                &lt;a href=&#34;&#34; class=&#34;work__img&#34;&gt;
                    &lt;img src=&#34;http://wyz-math.cn/admin/wyz%E8%87%AA%E5%BB%BA/resume/assets/img/work5.jpg&#34; alt=&#34;&#34;&gt;
                &lt;/a&gt;
                &lt;a href=&#34;&#34; class=&#34;work__img&#34;&gt;
                    &lt;img src=&#34;http://wyz-math.cn/admin/wyz%E8%87%AA%E5%BB%BA/resume/assets/img/work6.jpg&#34; alt=&#34;&#34;&gt;
                &lt;/a&gt;
            &lt;/div&gt;
        &lt;/section&gt;

        &lt;!--===== CONTACT =====--&gt;
        &lt;section class=&#34;contact section&#34; id=&#34;contact&#34;&gt;
            &lt;h2 class=&#34;section-title&#34;&gt;Contact&lt;/h2&gt;

            &lt;div class=&#34;contact__container bd-grid&#34;&gt;
                &lt;form action=&#34;&#34; class=&#34;contact__form&#34;&gt;
                    &lt;input type=&#34;text&#34; placeholder=&#34;Name&#34; class=&#34;contact__input&#34;&gt;
                    &lt;input type=&#34;mail&#34; placeholder=&#34;Email&#34; class=&#34;contact__input&#34;&gt;
                    &lt;textarea name=&#34;&#34; id=&#34;&#34; cols=&#34;0&#34; rows=&#34;10&#34; class=&#34;contact__input&#34;&gt;&lt;/textarea&gt;
                    &lt;input type=&#34;button&#34; value=&#34;Enviar&#34; class=&#34;contact__button button&#34;&gt;
                &lt;/form&gt;
            &lt;/div&gt;
        &lt;/section&gt;
    &lt;/main&gt;

    &lt;!--===== FOOTER =====--&gt;
    &lt;footer class=&#34;footer&#34;&gt;
        &lt;p class=&#34;footer__title&#34;&gt;Marlon&lt;/p&gt;
        &lt;div class=&#34;footer__social&#34;&gt;
            &lt;a href=&#34;#&#34; class=&#34;footer__icon&#34;&gt;&lt;i class=&#39;bx bxl-facebook&#39; &gt;&lt;/i&gt;&lt;/a&gt;
            &lt;a href=&#34;#&#34; class=&#34;footer__icon&#34;&gt;&lt;i class=&#39;bx bxl-instagram&#39; &gt;&lt;/i&gt;&lt;/a&gt;
            &lt;a href=&#34;#&#34; class=&#34;footer__icon&#34;&gt;&lt;i class=&#39;bx bxl-twitter&#39; &gt;&lt;/i&gt;&lt;/a&gt;
        &lt;/div&gt;
        &lt;p class=&#34;footer__copy&#34;&gt;&amp;#169; Bedimcode. All rigths reserved&lt;/p&gt;
    &lt;/footer&gt;


    &lt;!--===== SCROLL REVEAL =====--&gt;
    &lt;script src=&#34;https://unpkg.com/scrollreveal&#34;&gt;&lt;/script&gt;

    &lt;!--===== MAIN JS =====--&gt;
    &lt;script&gt;
    
    /*===== MENU SHOW =====*/ 

const showMenu = (toggleId, navId) =>{

const toggle = document.getElementById(toggleId),

nav = document.getElementById(navId)
if(toggle &amp;&amp; nav){
    toggle.addEventListener(&#39;click&#39;, ()=&gt;{
        nav.classList.toggle(&#39;show&#39;)
    })
}

}

showMenu('nav-toggle','nav-menu')
/==================== REMOVE MENU MOBILE ====================/

const navLink = document.querySelectorAll('.nav__link')
function linkAction(){

const navMenu = document.getElementById('nav-menu')

// When we click on each nav__link, we remove the show-menu class

navMenu.classList.remove('show')

}

navLink.forEach(n => n.addEventListener('click', linkAction))
/==================== SCROLL SECTIONS ACTIVE LINK ====================/

const sections = document.querySelectorAll('section[id]')
function scrollActive(){

const scrollY = window.pageYOffset
sections.forEach(current =&gt;{
    const sectionHeight = current.offsetHeight
    const sectionTop = current.offsetTop - 50;
    sectionId = current.getAttribute(&#39;id&#39;)

    if(scrollY &gt; sectionTop &amp;&amp; scrollY &lt;= sectionTop + sectionHeight){
        document.querySelector(&#39;.nav__menu a[href*=&#39; + sectionId + &#39;]&#39;).classList.add(&#39;active&#39;)
    }else{
        document.querySelector(&#39;.nav__menu a[href*=&#39; + sectionId + &#39;]&#39;).classList.remove(&#39;active&#39;)
    }
})

}

window.addEventListener('scroll', scrollActive)
/===== SCROLL REVEAL ANIMATION =====/

const sr = ScrollReveal({

origin: 'top',

distance: '60px',

duration: 2000,

delay: 200,

//     reset: true

});
sr.reveal('.home__data, .about__img, .skills__subtitle, .skills__text',{});

sr.reveal('.home__img, .about__subtitle, .about__text, .skills__img',{delay: 400});

sr.reveal('.home__social-icon',{ interval: 200});

sr.reveal('.skills__data, .work__img, .contact__input',{interval: 200});
    &lt;/script&gt;
&lt;/body&gt;

</html>

个性化修改

在上方提供了完整的网页源码，各位小伙伴们只需要点击右上角的一键复制然后将源码粘贴到一个HTML文件中便可以实现gif图中的效果，同时该简历模板是响应式的，无论是PC端还是移动端都可以进行完美的适配。

PS：模板中所有图片以上载到我的个人网站中，并且已经将链接替换到代码中，直接复制源码即可运行，无需担心图片丢失问题！

不过由于本网页的CSS代码实在过于冗长，我已经将它上载到我的个人网站中并且引入了，想查看CSS源码的小伙伴可以复制链接粘贴到网址查看。 代码全部积压在一个文件中不利于代码的查看，因为是出于让C站的小伙伴方便复制代码才全部放入一个文件中，所以各位小伙伴们复制完后可以将CSS和Javascript部分的代码分离出来然后在HTML文件中使用<link>标签引入！但是总的来说上方的模板毕竟默认资料都是别人的，那么应该如何进行个性化修改将其变为属于我们自己的模板呢？下面就是具体的分步步骤啦，我将其分为了四大部分，各位小伙伴一起跟着我的脚步来吧！

姓名标签修改
font图标文字修改
图片修改
文字说明修改

姓名标签修改

姓名标签修改主要是将原模版中的人物名字和有关的个人介绍相关信息进行修改，位置如下几张图所示：

（一）修改抬头栏的【姓名标签】

（二）修改Home标签下的【个人简介】

（三）修改About标签下的【个人介绍】

（四）修改网页底部的【个人标签】

font图标文字修改

font图标文字修改主要是将原网页中的推特，脸书等文字图标还有个人技能前Html，Css等文字图标进行替换。

修改Home标签下的【font图标文字】

（一）登录boxicon官网：boxicon网页地址

（二）选择自己心仪的图标文字，弹出相应的窗口，复制下图框中所示图标文字代码

（三）将代码替换原文件中的图标文字代码，如下图所示：

PS：博主亲测——boxicon上很多文字图标都无法显示，并且图标种类少，博主建议各位小伙伴们使用Font-Awesome进行文字图标的引入! 关于Font-Awesome文字图标的引入方法参考博主这篇文章：Font-Awesome如何引入矢量字体图标 由于此文章是很久之前写的，那时的博主文章排版很乱，还请各位小伙伴将就一下啦！