master

分支 (1)

管理

管理

master

lcy-h5resume
/
index.html

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

<head>
    <meta charset="UTF-8">
    <!-- 标准viewport设置：【视口宽度=设备宽度；不允许用户缩放；视口默认缩放比例1.0；最大最小允许缩放比例1.0】 -->
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
    <title>fwh H5 resume</title>
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <!--引用样式表-->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/responsive.css">
    <link rel="stylesheet" href="css/swiper-bundle.min.css">

</head>

<body data-spy="scroll" data-target=".navbar" data-offset="70">

    <!----------------------------------------------------【1】自我介绍------------------------------------------>

    <section class="intro" id="intro">
        <div class="container">
            <div class="row">
                <div class="col-md-12 text-center ">
                    <img class="img-circle img-w" src="images/fwh_icon.jpg" alt="">
                </div>
            </div>
            <div class="row">
                <div class="intro-text">
                    <h1>Hey, 我是范文虎</h1>
                    <p>求职：后期剪辑</p>
                    <div class="split"></div>
                </div>
                <div class="intro-text-details col-sm-8 col-sm-offset-2">
                    <b>华南理工大学 · 软件工程</b>
                    <p>安卓开发方向，熟悉Java、C++语言、Unity动画与建模，自学能力强，有较强的空间想象力与方位感。有多年视频剪辑与音频处理经验，熟练掌握多种音视频处理软件，非常了解自媒体的运营与二次元文化。
                    </p>
                </div>
            </div>
            <div class="row">
                <p class="next text-center">
                    <a href="#works" id="go-to-next">
                        <i class="fa fa-arrow-circle-down"></i>
                    </a>
                </p>
            </div>
        </div>
    </section>
    <!-- -------------------------播放器--------------------------- -->
    <section id="music_b">
        <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=150 height=52
            src="http://music.163.com/outchain/player?type=2&id=2119755&auto=0&height=32" class="pull-left"></iframe>

        <div class="pull-left btn_x">
            <span class="glyphicon glyphicon-music on"></span>
            <span style="transform: scaleX(-1);" class="glyphicon glyphicon-music off"></span>
        </div>
    </section>
    <!------------------------------------------------------------头部固定导航条----------------------------------------->

    <nav class="navbar navbar-inverse" role="navigation" id="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <i class="fa fa-bars"></i>
                </button>
                <a class="navbar-brand" href="#intro">resume</a>
            </div>
            <div class="collapse navbar-collapse" id="navbar">
                <ul class="nav navbar-nav navbar-right navbar-custom">
                    <li><a href="#intro">home</a></li>
                    <li><a href="#works">works</a></li>
                    <li><a href="#skills">skills</a></li>
                    <li><a href="#experience">experience</a></li>
                    <li class="noBorder"><a href="#contact">contact</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <!--------------------------------------------------------【2】我的作品集---------------------------------------->

    <section class="works" id="works">
        <div class="container">
            <div class="row">
                <div class="col-md-12 text-center section-title">
                    <h2>my portfolio</h2>
                    <hr>
                    <p>点击查看 · 我在校期间完成的一些作品集</p>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-6 col-md-4 col-lg-3 works-link">
                    <a href="https://www.bilibili.com/video/BV1hx411Z7Dc" target="_blank"><img src="images/w1.jpg"
                            alt="myWork"></a>
                </div>
                <div class="col-xs-6 col-md-4 col-lg-3 works-link">
                    <a href="https://www.bilibili.com/video/BV1Px41147YW" target="_blank"><img src="images/w2.jpg"
                            alt="myWork"></a>
                </div>
                <div class="col-xs-6 col-md-4 col-lg-3 works-link">
                    <a href="https://www.bilibili.com/video/BV1sJ411u7dZ" target="_blank"><img src="images/w3.jpg"
                            alt="myWork"></a>
                </div>
                <div class="col-xs-6 col-md-4 col-lg-3 works-link">
                    <a href="https://www.bilibili.com/video/BV1d4411z7po" target="_blank"><img src="images/w4.jpg"
                            alt="myWork"></a>
                </div>
                <div class="col-xs-6 col-md-4 col-lg-3 works-link">
                    <a href="https://www.bilibili.com/video/BV1Js411a75p" target="_blank"><img src="images/w5.jpg"
                            alt="myWork"></a>
                </div>
                <div class="col-xs-6 col-md-4 col-lg-3 works-link">
                    <a href="https://www.bilibili.com/video/BV1oW411e7q3" target="_blank"><img src="images/w6.jpg"
                            alt="myWork"></a>
                </div>
                <div class="col-xs-6 col-md-4 col-lg-3 works-link">
                    <a href="https://www.bilibili.com/video/BV1Ax411S7sS" target="_blank"><img src="images/w7.jpg"
                            alt="myWork"></a>
                </div>
                <div class="col-xs-6 col-md-4 col-lg-3 works-link">
                    <a href="https://www.bilibili.com/video/BV1xE41117Y7" target="_blank"><img src="images/w8.jpg"
                            alt="myWork "></a>
                </div>
            </div>
        </div>
    </section>

    <!-------------------------------------------------------【3】我的技能------------------------------------------->

    <section class="skills" id="skills">
        <div class="container">
            <div class="row">
                <div class="col-md-12 text-center section-title">
                    <h2>my skills</h2>
                    <hr>
                    <p>我的技能</p>
                </div>

                <div class="progress-container">
                    <div class="col-md-6">

                        <div class="progress thin progress-striped active">
                            <div class="progress-bar default-bar " role="progressbar" aria-valuenow="100%"
                                aria-valuemax="100" aria-valuemin="0" style="width: 100%;">
                                <span class="progress-text">剪辑</span>
                                <span class="progress-percent">100%</span>
                            </div>
                        </div>


                        <div class="progress thin progress-striped active">
                            <div class="progress-bar light-green-bar" role="progressbar" aria-valuenow="60%"
                                aria-valuemax="100" aria-valuemin="0" style="width: 60%;">
                                <span class="progress-text">调音</span>
                                <span class="progress-percent">60%</span>
                            </div>
                        </div>

                        <div class="progress thin progress-striped active">
                            <div class="progress-bar light-red-bar" role="progressbar" aria-valuenow="80%"
                                aria-valuemax="100" aria-valuemin="0" style="width: 80%;">
                                <span class="progress-text">图像</span>
                                <span class="progress-percent">80%</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="progress thin progress-striped active">
                            <div class="progress-bar light-yellow-bar " role="progressbar" aria-valuenow="100%"
                                aria-valuemax="100" aria-valuemin="0" style="width: 100%;">
                                <span class="progress-text">文案</span>
                                <span class="progress-percent">100%</span>
                            </div>
                        </div>
                        <div class="progress thin progress-striped active">
                            <div class="progress-bar light-grape-bar" role="progressbar" aria-valuenow="60%"
                                aria-valuemax="100" aria-valuemin="0" style="width: 60%;">
                                <span class="progress-text">代码</span>
                                <span class="progress-percent">60%</span>
                            </div>
                        </div>
                        <div class="progress thin progress-striped active">
                            <div class="progress-bar light-blue-bar" role="progressbar" aria-valuenow="40%"
                                aria-valuemax="100" aria-valuemin="0" style="width: 40%;">
                                <span class="progress-text">架构</span>
                                <span class="progress-percent">40%</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-------------------------------------------------------【4】项目经历------------------------------------->

    <!-- Swiper -->
    <section class="experience" id="experience">
        <div class="col-md-12 text-center section-title">
            <h2>my experience</h2>
            <hr>
            <p>这是我的一些项目经历</p>
        </div>
        <div class="swiper-container ">
            <div class="swiper-wrapper">
                <!-- 项目一 -->
                <div class="swiper-slide">
                    <div class="row">
                        <div class="project col-xs-8 col-xs-offset-2">
                            <div class="project-title">
                                <h3>Project 1</h3>
                                <div class="project-name"><b>三七互娱安卓游戏开发实训</b> <br> 担任游戏策划 & 模型动画</div>
                                <p>2020.05 ~ 2020.07</p>
                            </div>

                            <span class="glyphicon glyphicon-leaf"></span>&nbsp;&nbsp;
                            参与并负责平面设计素材、人物模型素材、动画及状态机的实现、数值策划、系统文档策划。<br>
                            <span class="glyphicon glyphicon-leaf"></span>&nbsp;&nbsp;
                            熟悉Unity软件的使用与Unity游戏开发过程，了解3D模型的结构，对帧动画和状态机有了较深的理解 <span class="hidden-xs">
                                ，对游戏策划的工作有了一定的认识。</span><br>
                            <span class="glyphicon glyphicon-leaf"></span>&nbsp;&nbsp;
                            <span
                                class="hidden-xs">在团队合作项目上，这次实训虽然有分策划组和程序组，但两组间紧密联系、相互帮助，</span>经常跨组参与工作，这让我对团队项目的分工有了新的感受与认知。<br>
                            <a href="https://gitee.com/HuzhBC/team2/tree/Virus-Terminator-1/"><button type="button"
                                    class="project-link btn btn-primary">项目链接&nbsp;&nbsp;<span
                                        class="glyphicon glyphicon-share"></span></button></a>
                        </div>
                    </div>
                </div>
                <!-- 项目二 -->
                <div class="swiper-slide">
                    <div class="row">
                        <div class="project col-xs-8 col-xs-offset-2">
                            <div class="project-title">
                                <h3>Project 2</h3>
                                <div class="project-name"><b>运营自己的B站帐号——绿色的礼帽</b> <br> 担任B站UP主</div>
                                <p>2016.11 ~ 至今</p>
                            </div>

                            <span class="glyphicon glyphicon-leaf"></span>&nbsp;&nbsp;
                            主要在鬼畜区投稿，代表作为鬼畜剧《果畜特攻》，收获了一万粉丝和几十万播放量。
                            <br>
                            <span class="glyphicon glyphicon-leaf"></span>&nbsp;&nbsp;
                            熟练掌握了多种音视频剪辑与素材处理的软件，收获了许多视频剪辑和音频处理的经验，能独当一面完成一般的视频项目<br>

                            <a href="http://space.bilibili.com/70435806#!/index"><button type="button"
                                    class="project-link btn btn-primary">项目链接&nbsp;&nbsp;<span
                                        class="glyphicon glyphicon-share"></span></button></a>
                        </div>
                    </div>
                </div>
                <!-- 项目三 -->
                <div class="swiper-slide">
                    <div class="row">
                        <div class="project col-xs-8 col-xs-offset-2">
                            <div class="project-title">
                                <h3>Project 3</h3>
                                <div class="project-name"><b>参与运营理论物理学家赵峥的B站帐号——赵峥讲物理</b> <br> 担任后期剪辑实习</div>
                                <p>2020.08/至今</p>
                            </div>

                            <span class="glyphicon glyphicon-leaf"></span>&nbsp;&nbsp;
                            完成了多个视频项目的后期剪辑，采用了将物理知识与网络文化结合的剪辑风格，得到大部分观众的认可。<span
                                class="hidden-xs">在运营小组中给人的工作印象是：肝视频能不分昼夜，对待视频项目有完美主义精神，剪视频能融入自己的思想，及时同小组交流项目的进度。</span>
                            <br>
                            <span class="glyphicon glyphicon-leaf"></span>&nbsp;&nbsp;
                            参与内容策划与帐号运营的讨论会议，提出了很多实用的点子，学到了很多自媒体运营的策略与手段。目前帐号已有16万粉丝与上百万播放量。<br>
                            <a href="https://space.bilibili.com/670860565#!/index"><button type="button"
                                    class="project-link btn btn-primary">项目链接&nbsp;&nbsp;<span
                                        class="glyphicon glyphicon-share"></span></button></a>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
            <!-- Add Arrows -->
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>
    </section>
    </div>
    </div>

    </section>

    <!-- Swiper JS -->
    <script src="script/swiper-bundle.min.js"></script>

    <!-- Initialize Swiper -->
    <script>
        var swiper = new Swiper('.swiper-container', {
            spaceBetween: 30,
            centeredSlides: true,
            autoplay: {
                delay: 2500,
                disableOnInteraction: false,
            },
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        });
    </script>


    <!------------------------------------------------------------【5】联系我----------------------------------------------->

    <section class="contact" id="contact">
        <div class="container">
            <div class="row">
                <div class="section-title text-center col-md-12">
                    <h2>contact me</h2>
                    <hr>
                    <p>如果您对我感兴趣，请联系我噢！</p>
                </div>
                <div class="col-md-8 col-md-offset-2 info">
                    <div class="col-md-4 col-sm-4 text-center">
                        <i class="fa fa-map-marker fa-2x text-center"></i>
                        <p>华南理工大学
                        </p>
                    </div>
                    <div class="col-md-4 col-sm-4 text-center">
                        <i class="fa fa-envelope-o fa-2x text-center"></i>
                        <p>287467907@qq.com</p>
                    </div>
                    <div class="col-md-4 col-sm-4 text-center">
                        <i class="fa fa-phone fa-2x text-center"></i>
                        <p>159-755-81267</p>
                    </div>
                </div>

                <div class="col-md-8 col-sm-12 col-md-offset-2">
                    <h3>Leave me a message</h3>
                    <small>- 给我留言</small>
                    <form class="messages" name="messages">
                        <div class="row">
                            <div class="col-md-6 form-group">
                                <input class="form-control" required type="text" placeholder="Name">
                            </div>
                            <div class="col-md-6 form-group">
                                <input class="form-control" required type="email" placeholder="Email">
                            </div>
                        </div>

                        <div class="form-group">
                            <textarea class="form-control" rows="4" aria-invalid="false"
                                placeholder="Messages"></textarea>
                        </div>

                        <button class="btn btn-default" type="submit">send messages</button>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <!---------------------------------------------------------版权区----------------------------------------->

    <footer>
        <div class="copyright">
            <p>copyRight &copy;2020 lcy fwh lmt lqq wzl.</p>
        </div>
    </footer>


    <!--链接外部脚本-->
    <script src="script/jquery-1.11.1.min.js"></script>
    <script src="script/bootstrap.min.js"></script>

    <!--过滤信息所用的插件-->
    <script src="script/jquery.isotope.js"></script>

    <script src="script/music.js"></script>
    <script src="script/js.js"></script>
</body>

</html>