me.liugl.cn
/
index.html

<!DOCTYPE html>
<html lang="cn">

<head>
    <title>SILENCE的个人主页</title>
    <meta name="viewport"
        content="width=device-width,initial-scale=1.0, minimum-scale=1, maximum-scale=1, user-scalable=no,minimal-ui">
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <link href="css/style.css" type="text/css" rel="stylesheet" media="all">
    <link href="css/animate.css" type="text/css" rel="stylesheet" media="all">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body>
    <section id="menu">
        <div class="menu-title">导航菜单</div>
        <ul class="menu-item">
            <li onclick="goTo('s1')">回到顶部</li>
            <li onclick="goTo('s2')">教育背景</li>
            <li onclick="goTo('s3')">专业技能</li>
            <li onclick="goTo('s4')">实践荣誉</li>
            <li onclick="goTo('s5')">自我评价</li>
            <li onclick="goTo('s6')">部分作品</li>
        </ul>
        <p style="color:rgba(255,255,255,0.70);font-size: 90%;margin-top: 40px;padding: 0 30px 0 30px">
            正因为一朵看不见的花，星星是美丽的。 </p>
        <p style="width:100%;text-align:end;color:rgba(255,255,255,0.60);font-size: 90%;padding:0 30px 20px 0;"> ——
            埃克苏佩里 《小王子》 </p>
        <p class="season-btn" onclick="changeSeason(1)">春</p>
        <p class="season-btn" onclick="changeSeason(2)">夏</p>
        <p class="season-btn" onclick="changeSeason(3)">秋</p>
        <p class="season-btn" onclick="changeSeason(4)">冬</p>
        <p style="position: absolute;bottom:10px;font-size:80%;left:30px;right: 30px;color: rgba(255,255,255,1.00);">
            版权归SILENCE个人所有，盗用必究。项目地址<a target="_blank" class="link"
                href="https://github.com/xSILENCEx/me.liugl.cn">https://github.com/xSILENCEx/me.liugl.cn</a></p>
    </section>
    <nav id="nav">
        <div id="logo">SILENCE</div>
        <div id="menuBtn">◈</div>
    </nav>
    <section id="centerBody">
        <div id="s1"></div>
        <section class="section1">
            <img id="spring" alt="春" src="/img/Spring.jpg" class="bg">
            <img id="summer" alt="夏" src="/img/Summer.jpg" class="bg">
            <img id="autumn" alt="秋" src="/img/Autumn.jpg" class="bg">
            <img id="winter" alt="冬" src="/img/Winter.jpg" class="bg">
            <div class="user-box">
                <img class="my-head def-radius" alt="头像" src="img/SILENCE.png">
                <div class="title">SILENCE HOME PAGE</div>
                <div class="line"></div>
                <div class="intro">这是一个简单的个人网站，2019年7月5日开始搭建。 为了回顾前端知识并进一步了解Bootstrap栅格系统的用法，
                    我尝试使用Bootstrap栅格系统制作了这个个人简历网站。 我将在这里进行简单的自我介绍并通过这种方式不断进步。</div>
            </div>
        </section>
        <section id="s2" class="section2">
            <div class="row" style="max-width: 1400px;margin:0 auto;">
                <div class="col-sm-3 sp-box">
                    <div class="sp-in def-radius">
                        <img id="firstSp" class="sp-ico" alt="品质1" src="/img/ico/calendar.svg">
                        <div class="sp-title">自驱动力</div>
                        <div class="sp-dis">有较强的自律能力，会主动学习新知识、新技术和新工具。</div>
                    </div>
                </div>
                <div class="col-sm-3 sp-box">
                    <div class="sp-in def-radius">
                        <img id="sedSp" class="sp-ico" alt="品质2" src="/img/ico/talk.svg">
                        <div class="sp-title">团队精神</div>
                        <div class="sp-dis">能听取团队中其他成员的意见或建议，并配合其他人进行高效率的设计与开发。</div>
                    </div>
                </div>
                <div class="col-sm-3 sp-box">
                    <div class="sp-in def-radius">
                        <img id="thrSp" class="sp-ico" alt="品质3" src="/img/ico/bookmark.svg">
                        <div class="sp-title">适应能力</div>
                        <div class="sp-dis">性格开朗，有学生干部经历，能迅速融入新的工作学习环境。</div>
                    </div>
                </div>
                <div class="col-sm-3 sp-box">
                    <div class="sp-in def-radius">
                        <img id="fourSp" class="sp-ico" alt="品质4" src="/img/ico/draw.svg">
                        <div class="sp-title">执行能力</div>
                        <div class="sp-dis">能迅速完成被交付任务，在感兴趣和擅长的领域能更好地完成任务。</div>
                    </div>
                </div>
            </div>
        </section>
        <section class="section3">
            <div class="edu-box">
                <div class="row edu-row" style="max-width: 1400px;margin:0 auto">
                    <div id="eduPic" class="col-sm-6">
                        <img id="springEdu" alt="春" src="/img/edu-bg-spring.jpg" class="bg">
                        <img id="autumnEdu" alt="秋" src="/img/edu-bg-autumn.jpg" class="bg">
                        <img id="winterEdu" alt="冬" src="/img/edu-bg-winter.jpg" class="bg">
                        <img id="summerEdu" alt="夏" src="/img/edu-bg-summer.jpg" class="bg">
                    </div>
                    <div class="edu-dis col-sm-6">
                        <div class="edu-title"><b>教育背景</b></div>
                        <div class="row" style="padding-bottom:20px">
                            <div class="col-sm-3"><b>2016-2020</b></div>
                            <div class="col-sm-9">四川民族学院 计算机科学与技术 本科</div>
                        </div>
                        <div class="row" style="padding-bottom:20px">
                            <div class="col-sm-3"><b>2016-2017</b></div>
                            <div class="col-sm-9">专业三等奖学金</div>
                        </div>
                        <div class="row" style="padding-bottom:20px">
                            <div class="col-sm-3"><b>2016.12</b></div>
                            <div class="col-sm-9">普通话二级甲等</div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section id="s3" class="section4">
            <div class="skill-title">专业技能</div>
            <div class="skill-con">
                <div class="skill sk3" title="熟练" style="width: 38%;height: 300px;">
                    <img class="ico" alt="js" src="/img/ico/java-script.svg">
                    <div class="skill-text">JS</div>
                </div>
                <div class="skill sk1" title="熟练" style="width: 28%;height: 190px;">
                    <img class="ico" alt="css" src="/img/ico/css.svg">
                    <div class="skill-text">CSS</div>
                </div>
                <div class="skill sk1" title="熟练" style="width: 28%;height: 190px;">
                    <img class="ico" alt="html5" src="/img/ico/icon--.svg">
                    <div class="skill-text">HTML5</div>
                </div>
                <div class="skill sk1" title="一般" style="width: 38%;height: 100px;">
                    <img class="ico" alt="java" src="/img/ico/java.svg">
                    <div class="skill-text">JAVA</div>
                </div>
                <div class="skill sk1" title="一般" style="width: 18%;height: 100px;">
                    <img class="ico" alt="c\c++" src="/img/ico/language-cpp.svg">
                    <div class="skill-text">C/C++</div>
                </div>
                <div class="skill sk1" title="一般" style="width: 18%;height: 200px;">
                    <img class="ico" alt="mysql" src="/img/ico/MySQL.svg">
                    <div class="skill-text">MYSQL</div>
                </div>
                <div class="skill sk2" title="熟练" style="width: 38%;height: 200px;">
                    <img class="ico" alt="ps" src="/img/ico/iconset0385.svg">
                    <div class="skill-text">PS</div>
                </div>
                <div class="skill sk4" title="一般" style="width: 38%;height: 90px;">
                    <img class="ico" alt="draw" src="/img/ico/draw-ico.svg">
                    <div class="skill-text">手绘</div>
                </div>
                <div class="skill sk1" title="熟练" style="width: 38%;height: 100px;">
                    <img class="ico" alt="ppt" src="/img/ico/PPT.svg">
                    <div class="skill-text">PPT</div>
                </div>
                <div class="skill sk1" title="一般" style="width: 48%;height: 100px;">
                    <img class="ico" alt="AI" src="/img/ico/AI.svg">
                    <div class="skill-text">AI</div>
                </div>
                <div class="skill sk1" title="熟练" style="width: 48%;height: 100px;">
                    <img class="ico" alt="ppt" src="/img/ico/flash.svg">
                    <div class="skill-text">FLASH</div>
                </div>
            </div>
        </section>
        <section id="s4" class="section5">
            <div class="container" style="max-width: 1400px;margin: 0 auto;">
                <div class="row">
                    <div class="col-sm-6" style="margin-bottom:30px;">
                        <div class="exp">
                            <img style="width: 100%;" src="img/school-pra.jpg" />
                            <div class="exp-con">
                                <div class="exp-icon">
                                    <p style="line-height: 80px;font-size: 40px;color: rgba(103, 54, 50,1.00);">♜</p>
                                </div>
                                <div style="color: rgba(255,255,255,1.00);line-height: 40px;font-size: 140%">
                                    <b>校内实践</b>
                                </div>
                                <div style="color: rgba(100,100,100,1.00);line-height: 30px;font-size: 100%">学生干部经历和项目经历
                                </div>
                            </div>
                            <div style="padding: 20px;padding-top: 0px;">
                                <div class="row">
                                    <div class="col-sm-3 font-weight-bold">2017-2018</div>
                                    <div class="col-sm-9">理工学院科技创新部副部长，负责学院大型活动的PPT制作，节目视频制作，海报设计等。</div>
                                </div>
                                <div class="row" style="padding-top: 20px;">
                                    <div class="col-sm-3 font-weight-bold">2018-2019</div>
                                    <div class="col-sm-9">宣传委员，负责班会等活动的素材采集，简报编辑。</div>
                                </div>
                                <div id="section6" class="row" style="padding-top: 20px;">
                                    <div id="exp-honor" class="col-sm-3 font-weight-bold">2018至今</div>
                                    <div class="col-sm-9">大学生创新创业项目APP客户端负责人，负责APP的UI设计，人机交互，代码编写。</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6" style="margin-bottom:30px;">
                        <div class="exp">
                            <img style="width: 100%;" src="img/honor.jpg" />
                            <div class="exp-con">
                                <div class="exp-icon">
                                    <p style="line-height: 80px;font-size: 40px;color: rgba(103, 54, 50,1.00);">♛</p>
                                </div>
                                <div style="color: rgba(255,255,255,1.00);line-height: 40px;font-size: 140%">
                                    <b>奖项荣誉</b>
                                </div>
                                <div style="color: rgba(100,100,100,1.00);line-height: 30px;font-size: 100%">参加各类比赛获得的奖项
                                </div>
                            </div>
                            <div style="padding: 20px;padding-top: 0px;">
                                <div class="row">
                                    <div class="col-sm-3 font-weight-bold">2017.12</div>
                                    <div class="col-sm-9">校第三届记者节视频制作一等奖。</div>
                                </div>
                                <div class="row" style="padding-top: 20px;">
                                    <div class="col-sm-3 font-weight-bold">2018.3</div>
                                    <div class="col-sm-9">蓝桥杯软件设计省赛C/C++B组二等奖。</div>
                                </div>
                                <div class="row" style="padding-top: 20px;">
                                    <div class="col-sm-3 font-weight-bold">2018.4</div>
                                    <div class="col-sm-9">学院公寓文化节PPT大赛一等奖。</div>
                                </div>
                                <div class="row" style="padding-top: 20px;">
                                    <div class="col-sm-3 font-weight-bold">2018.4</div>
                                    <div class="col-sm-9">学院公寓文化节绘画大赛一等奖。</div>
                                </div>
                                <div class="row" style="padding-top: 20px;">
                                    <div class="col-sm-3 font-weight-bold">2018.12</div>
                                    <div class="col-sm-9">学院第二届多媒体设计Flash动画设计一等奖。</div>
                                </div>
                                <div class="row" style="padding-top: 20px;">
                                    <div class="col-sm-3 font-weight-bold">2018.12</div>
                                    <div class="col-sm-9">学院第二届多媒体设计海报设计二等奖。</div>
                                </div>
                                <div class="row" style="padding-top: 20px;">
                                    <div class="col-sm-3 font-weight-bold">2018.12</div>
                                    <div class="col-sm-9">校“预防艾滋”主题活动绘画类作品二等奖。</div>
                                </div>
                                <div class="row" style="padding-top: 20px;">
                                    <div class="col-sm-3 font-weight-bold">2018.12</div>
                                    <div class="col-sm-9">校“预防艾滋”主题活动PPT制作一等奖。</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section id="s5" class="section6">
            <div class="h-s-title">自我评价</div>
            <div style="max-width: 1400px;margin: 0 auto;padding-left: 15px;padding-right: 15px;">
                <div id="section7" class="talk-myself">
                    <div style="line-height: 26px;font-weight: 500;font-size: 90%;"> &nbsp;&nbsp;&nbsp;&nbsp;
                        对自己感兴趣的事有十二分的专注。 工作认真负责，极少拖延；对自己比较苛刻，有完美主义倾向； 能长期坚持做一件事，不会三分钟热度；具有良好的自适应力，
                        在各种环境中都能很快融入。热爱绘画，热爱技术。 </div>
                </div>
            </div>
        </section>
        <section id="s6" class="section7">
            <div style="max-width: 1400px;margin: 0 auto;padding: 15px;">
                <div class="more">
                    <div class="h-s-title">部分美术作品</div>
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-sm-3">
                                <div id="section8" class="paint-view-bg"
                                    style="background: url('img/01.png') no-repeat center center;">
                                    <div class="paint-view">
                                        <a target="_blank" class="paint-a" style="text-decoration: none;"
                                            href="http://r.photo.store.qq.com/psb?/V14GUp6L3aatnX/NlLUoEAXknqMdGKNKpoVVamuv7nFqIKKyWNRu4ZzQpo!/r/dD4BAAAAAAAA">
                                            查看原图 </a>
                                    </div>
                                </div>
                            </div>
                            <div id="more" class="col-sm-3">
                                <div class="paint-view-bg"
                                    style="background: url('img/02.png') no-repeat center center;">
                                    <div class="paint-view">
                                        <a target="_blank" class="paint-a" style="text-decoration: none;"
                                            href="http://r.photo.store.qq.com/psb?/V14GUp6L0PukGF/SiMGHVVgScEDfs1anQvWCAPOxYOipl7srip*N8X*MOE!/r/dPQAAAAAAAAA">
                                            查看原图 </a>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <div class="paint-view-bg"
                                    style="background: url('img/03.png') no-repeat center center;">
                                    <div class="paint-view">
                                        <a target="_blank" class="paint-a" style="text-decoration: none;"
                                            href="http://r.photo.store.qq.com/psb?/V14GUp6L0PukGF/QeG*qT*VaA4bSIO47IKvzSFjOVKHdCvM2FFV7TOSU8M!/r/dPQAAAAAAAAA">
                                            查看原图 </a>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <div class="paint-view-bg"
                                    style="background: url('img/04.png') no-repeat center center;">
                                    <div class="paint-view">
                                        <a target="_blank" class="paint-a" style="text-decoration: none;"
                                            href="http://r.photo.store.qq.com/psb?/V14GUp6L0PukGF/3osnjFcltETmvBVF.ncgaLumk5zNxJdmuMPzQjytq50!/r/dG4AAAAAAAAA">
                                            查看原图 </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-3">
                                <div class="paint-view-bg"
                                    style="background: url('img/05.png') no-repeat center center;">
                                    <div class="paint-view">
                                        <a target="_blank" class="paint-a" style="text-decoration: none;"
                                            href="http://r.photo.store.qq.com/psb?/V14GUp6L0PukGF/r4VMc5HEt0BXibU8pR7S7chNB9oDoe2tkbtUncifqKY!/r/dNoAAAAAAAAA">
                                            查看原图 </a>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <div class="paint-view-bg"
                                    style="background: url('img/06.png') no-repeat center center;">
                                    <div class="paint-view">
                                        <a target="_blank" class="paint-a" style="text-decoration: none;"
                                            href="http://r.photo.store.qq.com/psb?/V14GUp6L3zVoBe/omMq8aLHp0pxdbvPLYYxCAL*h.SMLxTtOQOmRKYoGs8!/r/dFMBAAAAAAAA">
                                            查看原图 </a>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <div class="paint-view-bg"
                                    style="background: url('img/07.png') no-repeat center center;">
                                    <div class="paint-view">
                                        <a target="_blank" class="paint-a" style="text-decoration: none;"
                                            href="http://r.photo.store.qq.com/psb?/V14GUp6L3aatnX/dKb9RsnaRtT0.AKksFtefM1FoqtwJfaRhj4dzvb0s8k!/r/dPIAAAAAAAAA">
                                            查看原图 </a>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <div class="paint-view-bg"
                                    style="background: url('img/08.png') no-repeat center center;">
                                    <div class="paint-view">
                                        <a target="_blank" class="paint-a" style="text-decoration: none;"
                                            href="http://r.photo.store.qq.com/psb?/V14GUp6L3aatnX/PUDfjzNkthEj7kvoBF2eHXJ1C0*x.wNWhX7DntvAVDM!/r/dGYBAAAAAAAA">
                                            查看原图 </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="h-s-title">部分软件作品</div>
                    <div class="container-fluid" style="max-width: 1400px;margin: 0 auto;">
                        <div class="row">
                            <div class="col-sm-4" style="padding: 20px;">
                                <div class="app-bg">
                                    <img class="app-img" alt="#" src="img/app1_img.png">
                                    <div style="margin: 20px;font-size: 120%">MagicChat魔聊</div>
                                    <p style="padding-left: 10%;padding-right: 10%;font-size: 90%;">
                                        从图标到界面都独立设计独立编写的简单的聊天软件。只有群聊功能，服务器数据库已过期，暂时无法登录。后续会修复。</p>
                                    <a target="_blank" href="https://github.com/xSILENCEx/flutter_chat"
                                        style="text-decoration: none">
                                        <div class="bt-style">项目地址</div>
                                    </a>
                                </div>
                            </div>
                            <div class="col-sm-4" style="padding: 20px;">
                                <div class="app-bg">
                                    <img class="app-img" alt="#" src="img/app2_img.png">
                                    <div style="margin: 20px;font-size: 120%">FlashHelp闪帮</div>
                                    <p style="padding-left: 10%;padding-right: 10%;font-size: 90%;">
                                        简单的大学生APP创新创业项目。客户端的UI设计，程序编写都是本人独立完成。目前为基础测试版本，欢迎下载体验。服务器带宽限制，下载可能较慢。</p>
                                    <a target="_blank" href="http://www.flashhelp.cn" style="text-decoration: none">
                                        <div class="bt-style">官方网站</div>
                                    </a> <a target="_blank"
                                        href="https://github.com/xSILENCEx/flash_help/raw/master/preview/fh.apk"
                                        style="text-decoration: none">
                                        <div class="bt-style">下载体验</div>
                                    </a> <a target="_blank" href="https://github.com/xSILENCEx/flash_help"
                                        style="text-decoration: none">
                                        <div class="bt-style">项目地址</div>
                                    </a>
                                </div>
                            </div>
                            <div class="col-sm-4" style="padding: 20px;">
                                <div class="app-bg">
                                    <img class="app-img" alt="#" src="img/app3_img.png">
                                    <div style="margin: 20px;font-size: 120%">SimplePainter画板</div>
                                    <p style="padding-left: 10%;padding-right: 10%;font-size: 90%;">
                                        大二课堂作业成品，一个简单的绘画软件，支持各种基础绘制，欢迎下载体验。服务器带宽限制，下载可能较慢。</p>
                                    <a target="_blank"
                                        href="https://github.com/xSILENCEx/Simple_Painter/raw/master/app/release/sp2.0.1.apk"
                                        style="text-decoration: none">
                                        <div class="bt-style">下载体验</div>
                                    </a> <a target="_blank" href="https://github.com/xSILENCEx/Simple_Painter"
                                        style="text-decoration: none">
                                        <div class="bt-style">项目地址</div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="h-s-title">部分海报作品</div>
                    <div class="container-fluid" style="max-width: 1400px;margin: 0 auto;">
                        <div class="row">
                            <div class="col-sm-3">
                                <a target="_blank"
                                    href="http://r.photo.store.qq.com/psb?/V14GUp6L3HWqZK/diCbK4oYJjgSMysEjOAbHcLOGtycUu9I0PyT4FnWt3I!/r/dFIBAAAAAAAA">
                                    <img alt="#" class="poster" src="img/h1mini.png">
                                </a>
                            </div>
                            <div class="col-sm-3">
                                <a target="_blank"
                                    href="http://r.photo.store.qq.com/psb?/V14GUp6L3HWqZK/506qqQGWOirX3XHqB6ZqQCwpv1zEhW6.RlhxVpnGkQA!/r/dFIBAAAAAAAA"><img
                                        class="poster" src="img/h2mini.jpg"></a>
                            </div>
                            <div class="col-sm-3">
                                <a target="_blank"
                                    href="http://r.photo.store.qq.com/psb?/V14GUp6L3HWqZK/*CeJEzK2uMaHVhURtUVUUakpJc..gL*30kkErOzSGGI!/r/dFMBAAAAAAAA"><img
                                        class="poster" src="img/h3mini.jpg"></a>
                            </div>
                            <div class="col-sm-3">
                                <a target="_blank"
                                    href="http://r.photo.store.qq.com/psb?/V14GUp6L3HWqZK/PcMF3WsJU5NrrpWobusX5po0Jv78k0OULGaT3j3U9TA!/r/dFIBAAAAAAAA"><img
                                        class="poster" src="img/h4mini.jpg"></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section class="section8">
            <div class="foot-title">我很幸运，我还能仰望星空</div>
            <div class="foot-info">© 2019 liugl.cn 版权所有 <a
                    href="http://beian.miit.gov.cn"
                    class="link">蜀ICP备19010209号-1</a></div>
        </section>
    </section>
</body>
<script src="js/main.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
    </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
    integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
    </script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
    </script>

</html>