index.html

<!DOCTYPE html>
<html>
<head>
    <title>Her Laang's Portfolio</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/index.css" rel="stylesheet">

</head>
<body>

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="/">Her Laang's Portfolio</a>
        </div>
    </div>
</nav><!-- .navbar -->

<div class="splash-image container-fluid">
    <div class="splash-content">
        <div>WONG HER LAANG</div>
        <button id="splash-btn" class="btn btn-default">Learn more about me <br> <span class="glyphicon glyphicon-chevron-down"></span> </button>
    </div>
</div>

<div id="content-1" class="container-fluid">
    <div class="row">
        <div class="col-md-4 col-xs-12">
            <img id="profile-pic" src="img/profile.jpg">
        </div>
        <div id="profile-description-container" class="col-md-8 col-xs-12">
            <div id="profile-description">
                <span class="title">About me</span>
                <p>
                    I am currently a undergraduate student in National University of Singapore pursuing a
                    degree in Computer Science with a specialisation in Information Security.
                </p>
                <p>
                    I do a lot of web development and currently I am a full-stack web developer.
                </p>
                <div id="content-1-btn" class="down-btn"><span class="glyphicon glyphicon-chevron-down"></span> </div>
            </div>
        </div>
    </div>
</div>

<div id="content-2" class="container-fluid">
    <h1>What I know</h1>
    <br/>
    <div class="row">
        <div class="col-md-4 col-xs-6">
            <img class="languages-image" src="img/HTML5.png" style="position: relative; height: 115px; top: 12px;">
        </div>
        <div class="col-md-4 col-xs-6">
            <img class="languages-image" src="img/CSS3.png">
        </div>
        <div class="col-md-4 col-xs-6">
            <img class="languages-image" src="img/javascript.png" style="position: relative; height: 122px; top: 10px;">
        </div>
        <div class="col-md-4 col-xs-6">
            <img class="languages-image" src="img/C++.png" style="position: relative; top: 9px;">
        </div>
        <div class="col-md-4 col-xs-6">
            <img class="languages-image" src="img/MySQL.png" style="position: relative; top: 38px;">
        </div>
        <div class="col-md-4 col-xs-6">
            <img class="languages-image" src="img/nodejs.png" style="position: relative; top: 40px;">
        </div>
        <div class="col-md-4 col-xs-6">
            <img class="languages-image" src="img/java.png" style="position: relative; top: -5px;">
        </div>
        <div class="col-md-4 col-xs-6">
            <img class="languages-image" src="img/react.png">
        </div>
        <div class="col-md-4 col-xs-6">
            <img class="languages-image" src="img/swift.png" style="position: relative; top: 10px; height: 112px;">
        </div>
        <div class="col-md-12 col-xs-6">
            <img class="languages-image" src="img/Ruby_on_Rails.png" style="position: relative; top: 9px; height: 112px;">
        </div>
    </div>
    <div id="content-2-btn" class="down-btn"><span class="glyphicon glyphicon-chevron-down"></span> </div>
</div>

<div id="content-3" class="container-fluid">
    <h1>Where I've worked</h1>
    <br/>
    <div class="row">
        <div id="viddsee-btn" class="col-md-4 col-xs-12 mt20">
            <img data-target="#carousel-example-generic" data-slide-to="0" class="work-img" src="img/Viddsee.png">
        </div>
        <div id="xfers-btn" class="col-md-4 col-xs-12 mt20">
            <img data-target="#carousel-example-generic" style="position: relative; height: 100px; top: 20px;" data-slide-to="1" class="work-img" src="img/xfers.png">
        </div>
        <div id="cvwo-btn"class="col-md-4 col-xs-12 mt40">
            <div class="work-img" style="position: relative; top: 10px;" data-target="#carousel-example-generic" data-slide-to="2"><h1>NUS CVWO</h1></div>
        </div>
    </div>
</div>

<div id="content-4" class="container-fluid">
    <div class="row">
        <div id="carousel-example-generic" class="carousel slide" data-interval="false" data-ride="carousel">
            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <div id="viddsee-container" class="row">
                        <img src="img/viddsee-group.jpg" class="img-thumbnail">
                        <div class="col-md-12 col-xs-12 work-description mt20">
                            <h2>Viddsee</h2>
                            <small>MAY 2015 - APR 2016</small>
                            <br><br>
                            <p class="justify">
                                Singapore start-up that provides an online platform for a global audience
                                to discover and share short films.
                            </p>
                            <p class="justify">
                                Revamped their submission portal for film-makers to upload
                                their films.
                            </p>
                            <p class="justify">
                                Added features to their administrative interface to improve their
                                operational workflow and processes.
                            </p>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div id="xfers-container" class="row">
                        <img src="img/xfers_group.jpg" class="img-thumbnail">
                        <div class="col-md-12 col-xs-12 work-description mt20">
                            <h2>Xfers</h2>
                            <small>OCT 2014 - FEB 2015</small>
                            <br><br>
                            <p class="justify">
                                Singapore tech start-up that that offers an escrow service for online
                                transcations.
                            </p>
                            <p class="justify">
                                Worked with Xfers to create an online platform for e-commerce using their
                                existing API endpoints as part of a school module.
                            </p>
                            <p class="justify">
                                Continued working with with Xfers from December to February to implement
                                a live chat feature for merchants and buyers.
                            </p>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div id="cvwo-container" class="row">
                        <img src="img/ymca_group.png" class="img-thumbnail">
                        <div class="col-md-12 col-xs-12 work-description mt20">
                            <h2>CVWO</h2>
                            <small>MAY 2014 - AUG 2014</small>
                            <br><br>
                            <p class="justify">
                                Volunteered in Computing for Voluntary Welfare Organizations (CVWO) where
                                undergraduates build IT systems for voluntary welfare organizations to
                                serve the community for effectively.
                            </p>
                            <p class="justify">
                                Worked with a team of 7 to develop a new Volunteer Managment System for
                                Young's Men Christian Association (YMCA) Singapore.
                            </p>
                            <p class="justify">
                                YMCA is currently using our system to better manage their volunteers,
                                events, memberships and reports.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="content-4-btn" class="down-btn mt40"><span class="glyphicon glyphicon-chevron-up"></span> </div>
</div>

<div id="content-5" class="container-fluid">
    <div class="row">
        <div class="col-md-12 col-xs-12 mt40">
            <h2>Contact me</h2>
            <br><br>
            <div class="email-form-group form-group">
                <label for="email">Email</label>
                <input type="text" class="form-control" id="email">
                <span id="email-help-block" class="help-block"></span>
            </div>
            <div class="message-form-group form-group">
                <label for="message">Message</label>
                <textarea class="form-control" rows="5" id="message"></textarea>
                <span id="message-help-block" class="help-block"></span>
            </div>
            <button id="submit-message" class="btn btn-success">Submit</button>
        </div>
    </div>
</div>

<!-- JavaScript placed at the end of the document so the pages load faster -->
<script src="js/jquery-1.12.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/index.js"></script>
</body>
</html>