master

分支 (1)

管理

管理

master

Resume-website-for-personal
/
index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>赵子成-个人简历</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <meta name="description" content="前端工程师，喜欢研究，喜欢学习，欢迎联系"/>
    <meta name="author" content="赵子成 子成君 age:22 "/>
    <meta name="keywords" content="求职 前端"/>
    <meta name="contact" content="tel 17879508656 e-mail:i@zcjun.com"/>

    <link rel="shortcut icon" href="./img/logo.png"/>
    <link rel="stylesheet" href="css/jquery.fullPage.css">
    <link rel="stylesheet" href="./css/page1.css">
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./css/bootstrap.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.fullPage.min.js"></script>
    <script src="js/jquery.easing.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/raphael.js"></script>
    <script src="js/init.js"></script>
    <script src="js/jquery.filterizr.js"></script>
</head>

<body>

<nav>
    <div class="header" id="nav">
        <div class="logo"><img src="./img/logo.png" alt="logo" height="50"><span>赵子成个人简历</span></div>
        <ul id="menu">
            <li data-menuanchor="page1"><a href="#page1">基本资料</a></li>
            <li data-menuanchor="page2"><a href="#page2">专业技能</a></li>
            <li data-menuanchor="page3"><a href="#page3">项目经验</a></li>
            <li data-menuanchor="page4"><a href="#page4">联系方式</a></li>
        </ul>
    </div>
</nav>

<div id="dowebok">
    <!--首页-->
    <div class="section section0">
        <!--背景-->
        <div class="video_pattern"></div>
        <!--背景视频-->
        <video class="video_background" preload="auto" autoplay loop="loop" muted="muted" volume="0">
            <source src="./img/videomsonit.mp4" type="video/mp4">
            <source src="./img/videomsonit.mp4" type="video/webm">
            <source src="./img/videomsonit.mp4" type="video/ogg">
        </video>
        <!--渐变字-->
        <div class="rotator">
            <div style="display: block;">
                <div class="slidecontent">
                    <span class="headersur">专注Web前端开发,IT技术分享,努力每一天！</span>
                    <h1><span><span style="color:#f1c40f;">渴望知识</span> 编码的快乐发自内心</span></h1>
                </div>
            </div>
            <div style="display: none;">
                <div class="slidecontent">
                    <span class="headersur">为了改变我的处境，我准备学习我所需要的一切知识！</span>
                    <h1><span><span style="color:#f1c40f;">渴望变强</span> 努力成为一个成熟的开发者</span></h1>
                </div>
            </div>
            <div style="display: none;">
                <div class="slidecontent">
                    <span class="headersur">既选择远方，便只顾 风雨兼程！</span>
                    <h1><span>ZCJUN.COM <span style="color:#f1c40f;">&amp; </span>子成君</span></h1>
                </div>
            </div>
        </div>
        <!--向下按钮-->
        <a href="#page1" class="nextBtn">

        </a>
    </div>
    <!--第一页-->
    <div class="section section1">
        <!--小尺寸-->
        <div class="rotator1" style="display: none;">
            <div style="display: block;">
                <div class="slidecontent">
                    <span class="headersur">性别：男 年龄：22</span>
                    <span class="headersur"></span>
                    <span class="headersur">专业：电子信息工程</span>
                    <span class="headersur">毕业院校：宜春学院</span>
                    <span class="headersur">www.zcjun.com</span>
                </div>
            </div>
        </div>
        <!--小尺寸-->
        <!--背景-->
        <div class="video_pattern" style="z-index: 0"></div>
        <!--四个角落-->
        <div class="leftTop">
            <img src="./img/zhijiao.png" alt="">
        </div>
        <div class="rightTop">
            <img src="./img/zhijiao.png" alt="">
        </div>
        <div class="rightBottom">
            <img src="./img/zhijiao.png" alt="">
        </div>
        <div class="leftBottom">
            <img src="./img/zhijiao.png" alt="">
        </div>
        <!--四个角落-->
        <!--手风琴-->
        <div class="desktop-wrapper">
            <div class="container">
                <div class="row row_card">
                    <div class="options">
                        <div class="option active">
                            <div>
                                <div class="info-wrapper">
                                    <h2 class="title">基本信息</h2>
                                    <p class="subtitle">Web前端工程师</p>
                                    <div class="description">
                                        <p>性别：男</p>
                                        <p>年龄：22</p>
                                        <p>户籍：云南昆明</p>
                                        <a class="ext-link" href="javascript:;" target="_blank" title="赵子成">赵子成</a>
                                    </div>
                                </div>
                                <div class="icon-wrapper sb">
                                    <div class="icon">
                                        <i class="fas fa-walking"></i>
                                    </div>
                                    <div class="category-text">求知欲强，不怕困难，对网站开发有着浓厚兴趣。</div>
                                </div>
                            </div>
                        </div>
                        <div class="option">
                            <div>
                                <div class="info-wrapper">
                                    <h2 class="title">专业学历</h2>
                                    <p class="subtitle">电信专业</p>
                                    <div class="description">
                                        <p>专业：电子信息工程</p>
                                        <p>专业技能：主要研究信息的获取与处理，电子设备与信息系统的设计、开发、应用和集成</p>
                                        <a class="ext-link" href="javascript:;" target="_blank" title="本科">本科</a>
                                    </div>
                                </div>
                                <div class="icon-wrapper ce">
                                    <div class="category-text">具备软硬件开发经历，Web开发实战经验。</div>
                                </div>
                            </div>
                        </div>
                        <div class="option">
                            <div>
                                <div class="info-wrapper">
                                    <h2 class="title">毕业院校</h2>
                                    <p class="subtitle">江西省宜春市宜春学院</p>
                                    <div class="description">
                                        <p>毕业院校：宜春学院</p>
                                        <p>地理位置：江西省宜春市</p>
                                        <p>所属院系：物理科学与工程技术学院</p>
                                        <a class="ext-link" href="javascript:;" target="_blank" title="宜春学院">宜春学院</a>
                                    </div>
                                </div>
                                <div class="icon-wrapper sb">
                                    <div class="category-text">天才还在努力，你有何理由停歇。</div>
                                </div>
                            </div>
                        </div>
                        <div class="option">
                            <div>
                                <div class="info-wrapper">
                                    <h2 class="title">个人爱好</h2>
                                    <p class="subtitle">编码即快乐</p>
                                    <div class="description">
                                        <p>最快乐：醒着写代码</p>
                                        <p>其次快乐：做梦写代码</p>
                                        <p>户外和放松：乒乓球，羽毛球，桌球，音乐，电影，诗词</p>
                                        <a class="ext-link" href="javascript:;" target="_blank" title="编程">编程</a>
                                    </div>
                                </div>
                                <div class="icon-wrapper ce">
                                    <div class="category-text">渴望成为大佬，撸码路上一去不返...</div>
                                </div>
                            </div>
                        </div>
                        <div class="option">
                            <div>
                                <div class="info-wrapper">
                                    <h2 class="title">联系方式</h2>
                                    <p class="subtitle">主页：www.zcjun.com</p>
                                    <div class="description">
                                        <p>QQ：1479907611</p>
                                        <p>邮箱：i@zcjun.com</p>
                                        <p>新浪微博：子成君Miller</p>
                                        <a class="ext-link" href="javascript:;" target="_blank" title="联系">联系</a>
                                    </div>
                                </div>
                                <div class="icon-wrapper sb">
                                    <div class="category-text">活跃于各大社交平台，爱网络，爱生活。</div>
                                </div>
                            </div>
                        </div>
                        <div class="option">
                            <div>
                                <div class="info-wrapper">
                                    <h2 class="title">其他</h2>
                                    <p class="subtitle">爱猫，爱狗，爱花，爱草</p>
                                    <div class="description">
                                        <p>百度：子成君</p>
                                        <p>个人网站：www.zcjun.com</p>
                                        <p>微信公众号：Yi-Yi-Tu</p>
                                        <a class="ext-link" href="javascript:;" target="_blank"
                                           title="Bolle &amp; Raven Website">其他</a>
                                    </div>
                                </div>
                                <div class="icon-wrapper ce">
                                    <div class="category-text">既选择远方，便只顾风雨兼程！</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--手风琴-->
    </div>
    <!--第二页-->
    <div class="section section2">
        <div class="video_pattern" style="z-index: 0"></div>
        <div class="topPic">
            <h3>学无止境</h3>
            <p>为了改变我的处境，我准备学习我所需要的一切知识！</p>
        </div>
        <!--饼图-->
        <div id="content">

            <div class="legend">

                <h1>Skills:</h1>

                <div class="skills">

                    <ul>

                        <li class="jq">JavaScript</li>

                        <li class="css">CSS3</li>

                        <li class="html">HTML5</li>

                        <li class="node">Nodejs</li>

                        <li class="mongodb">MongoDB</li>

                    </ul>

                </div>

            </div>
            <div id="diagram"></div>

        </div>

        <div class="get">

            <div class="arc">

                <span class="text">JavaScript</span>

                <input type="hidden" class="percent" value="95"/>

                <input type="hidden" class="color" value="#97BE0D"/>

            </div>

            <div class="arc">

                <span class="text">CSS3</span>

                <input type="hidden" class="percent" value="90"/>

                <input type="hidden" class="color" value="#D84F5F"/>

            </div>

            <div class="arc">

                <span class="text">HTML5</span>

                <input type="hidden" class="percent" value="80"/>

                <input type="hidden" class="color" value="#88B8E6"/>

            </div>

            <div class="arc">

                <span class="text">Nodejs</span>

                <input type="hidden" class="percent" value="53"/>

                <input type="hidden" class="color" value="#BEDBE9"/>

            </div>

            <div class="arc">

                <span class="text">MongoDB</span>

                <input type="hidden" class="percent" value="45"/>

                <input type="hidden" class="color" value="#EDEBEE"/>

            </div>

        </div>
        <!--饼图结束-->
        <div class="box-text" style="background-position: 0px 100px;height: 100px;">
            <p>写过响应式，移动端，pc端，WEbAPP，商城，企业网站，政府网站。熟练使用JQuery库,Bootstrap库和Sass/Less语法进行开发，常用前端框架为Vue，Angular。
                熟练使用Webpack/Gulp、Git/Svn、NPM/Yarn等工具，掌握Linux基本操作及服务器环境部署及MVC/MVVM开发模式。
                对React、PHP、MySQL、MongoDB、Nodejs以及基本的SEO优化和微信小程序开发有一定程度的学习。
            </p>
        </div>
    </div>
    <!--第三页-->
    <div class="section section3">
        <div class="slide slide1">
            <div class="slideContent">

                <ul class="nav">
                    <li class="active" data-filter="all">全部</li>
                    <li data-filter="1">PC端</li>
                    <li data-filter="2">移动端</li>
                    <li data-filter="3">响应式</li>
                    <li data-filter="4">二次开发</li>
                    <li data-filter="5">个人</li>
                    <li data-filter="6">团队</li>
                </ul>

                <div class="proPic">
                    <div class="filtr-item" data-category="2, 5">
                        <div class="video_pattern" style="z-index: -1"></div>
                        <div class="hover-img">
                            <img src="img/db.jpg" alt="豆瓣WebApp">
                        </div>
                        <div class="hover-text">
                            <a href='http://www.zcjun.com' target='_blank' title="豆瓣WebApp">豆瓣WebApp</a>
                        </div>
                    </div>
                    <div class="filtr-item" data-category="3, 5">
                        <div class="video_pattern" style="z-index: -1"></div>
                        <div class="hover-img">
                            <img src="img/gr.jpg" alt="响应式个人博客">
                        </div>
                        <div class="hover-text">
                            <a href='http://www.zcjun.com' target='_blank' title="响应式个人博客">响应式个人博客</a>
                        </div>
                    </div>
                    <div class="filtr-item" data-category="1, 4">
                        <div class="video_pattern" style="z-index: -1"></div>
                        <div class="hover-img">
                            <img src="img/dh.jpg" alt="设计师导航网">
                        </div>
                        <div class="hover-text">
                            <a href='http://www.zcjun.com' target='_blank' title="设计师导航网">设计师导航网</a>
                        </div>
                    </div>
                    <div class="filtr-item" data-category="3, 5">
                        <div class="video_pattern" style="z-index: -1"></div>
                        <div class="hover-img">
                            <img src="img/jl.jpg" alt="前端工程师简历网站">
                        </div>
                        <div class="hover-text">
                            <a href='http://www.zcjun.com' target='_blank' title="前端工程师简历网站">前端工程师简历网站</a>
                        </div>
                    </div>
                    <div class="filtr-item" data-category="3, 4">
                        <div class="video_pattern" style="z-index: -1"></div>
                        <div class="hover-img">
                            <img src="img/bk.jpg" alt="子成君博客">
                        </div>
                        <div class="hover-text">
                            <a href='http://www.zcjun.com' target='_blank' title="子成君博客">子成君博客</a>
                        </div>
                    </div>
                    <div class="filtr-item" data-category="1, 6">
                        <div class="video_pattern" style="z-index: -1;"></div>
                        <div class="hover-img">
                            <img src="img/zjzw.jpg" alt="浙江政务网">
                        </div>
                        <div class="hover-text">
                            <a href='http://www.zcjun.com' target='_blank' title="浙江政务网">浙江政务网</a>
                        </div>
                    </div>
                    <div class="filtr-item" data-category="1, 6">
                        <div class="video_pattern" style="z-index: -1"></div>
                        <div class="hover-img">
                            <img src="img/tx.jpg" alt="桐乡市环保平台">
                        </div>
                        <div class="hover-text">
                            <a href='http://www.zcjun.com' target='_blank' title="桐乡市环保平台">桐乡市环保平台</a>
                        </div>
                    </div>
                    <div class="filtr-item" data-category="5, 2">
                        <div class="video_pattern" style="z-index: -1"></div>
                        <div class="hover-img">
                            <img src="img/xcx.jpg" alt="商城小程序">
                        </div>
                        <div class="hover-text">
                            <a href='http://www.zcjun.com' target='_blank' title="商城小程序">商城小程序</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="slide">
            <div class="slideContent">
                <h2>豆瓣WebApp</h2>
                <div class="display">
                    <div class="disLeft">
                        <h4>项目地址</h4>
                        <p>https://github.com/zcjunblog/douban-vue2.0--api-webApp</p>
                        <h4>相关技术</h4>
                        <p>vue，vue-cli，vue-router，axios，sass，superagent</p>
                        <h4>功能概述</h4>
                        <p> 1.豆瓣事件活动推送，及参与报名入口 <br>
                            2.影院热映电影查询，详情评分、年份、热度及简介信息<br>
                            3.相关电影演员图册展示及基本信息介绍页面<br>
                            4.欧美音乐大碟实时更新，评分详情标签信息一目了然<br>
                            5.网站自动统计、计算每部电影、书籍、音乐的分数情况<br>
                            6.网站自动生成电影的排行榜，数据同步豆瓣电影<br>
                            7.网站可以根据演员名字搜索并展示其作品
                        </p>
                    </div>
                    <div class="disRight">
                        <video  preload="auto"controls="controls"  loop="loop" muted="muted" volume="0">
                            <source src="./img/bbApp.mp4" type="video/mp4">
                            <source src="./img/bbApp.mp4" type="video/webm">
                            <source src="./img/bbApp.mp4" type="video/ogg">
                        </video>
                    </div>
                </div>
            </div>
        </div>
        <div class="slide">
            <div class="slideContent"></div>
        </div>
    </div>
    <!--第四页-->
    <div class="section section4">
        <div class="secText">
            <h1>Contact</h1>
            <div class="subline"></div>
        </div>
        <div class="form">
            <form action="https://formspree.io/1479907611@qq.com" method="post">
                <p><label for="name">名字: * </label></p>
                <p><input class="input" type="text" name="name"></p>
                <label for="email">E-Mail: *  </label>
                <p><input class="input" type="email" name="eamil"></p>
                <label for="message">留言:*</label>
                <p><textarea class="input" name="message" id="doc-vld-ta-2-1" minlength="10"></textarea></p>
                <p><input type="submit" value="发送" class="btn"></p>
            </form>
        </div>
    </div>
</div>
<script src="js/main.js?v=201900509"></script>
</body>
</html>