My portfolio webpage
Created
July 31, 2017 18:53
-
-
Save manbearwolf/dd80759c3d2e2094ea802b8947df849d to your computer and use it in GitHub Desktop.
Personal Portfolio Webpage
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- Navigation bar --> | |
| <nav class="navbar navbar-inverse navbar-fixed-top"> | |
| <div class="container-fluid"> | |
| <!-- Brand and toggle get grouped for better mobile display--> | |
| <div class="nav-header"> | |
| <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar"> | |
| <span class="sr-only">Toggle navigation</span> | |
| <span class="icon-bar"></span> | |
| <span class="icon-bar"></span> | |
| <span class="icon-bar"></span> | |
| </button> | |
| </div> | |
| <!-- Collect the nav links, forms, and other content for toggling --> | |
| <div class="container"> | |
| <a class="navbar-brand" href="#">Hoang Nguyen</a> | |
| <div class="collapse navbar-collapse" id="myNavbar"> | |
| <ul class="nav navbar-nav navbar-right"> | |
| <li><a href="#aboutMe">About me</a></li> | |
| <li><a href="#portfolio">Portfolio</a></li> | |
| <li><a href="#connect">Connect</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Section about me --> | |
| <div class="container" id="aboutMe"> | |
| <div class="row"> | |
| <div class="col-sm-12"> | |
| <div class="col-sm-9"> | |
| <h3 class="text-center" id="intro">Hello, I'm Hoang Nguyen, a graduated student in Information Science. I'm also a self taught programmer who is passionate in Front-End development, especially web development, web application and UX/UI design.<br><br/> | |
| Development technologies:<br/> | |
| <br/> | |
| - <b>HTML5, CSS3, SASS/SCSS, Bootstrap<br/> | |
| - Javascript, Jquery, ReactJS, AngularJS, D3<br/> | |
| - NodeJS, ExpressJS, MongoDB</b></h3> | |
| </div> | |
| <div class="col-sm-3"> | |
| <img src="https://c2.staticflickr.com/4/3762/33518170911_a280d85371_n.jpg" alt="Hoang Nguyen" class="img-responsive" id="profile-pic"/> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Section portfolio --> | |
| <div class="container" id="portfolio"> | |
| <div class="row"> | |
| <div class="col-sm-12"> | |
| <h1 class="text-center"><b>PORTFOLIO</b></h1> | |
| <hr/> | |
| </div> | |
| </div> | |
| <!-- First row in Portfolio --> | |
| <div class="row"> | |
| <div class="col-sm-4"> | |
| <div class="panel panel-primary"> | |
| <div class="panel-heading"><h4 class="text-center"><b>Tribute page to Joe Hisaishi</b></h4></div> | |
| <div class="panel-body portfolio-item"> | |
| <a href="https://codepen.io/hoangnguyen/full/MpVOxQ" target="_blank" class="portfolio-link" data-toggle="modal"> | |
| <img src="https://c2.staticflickr.com/4/3857/33264050100_4967a3de07_n.jpg" class="img-responsive" alt="Joe Hisaishi"> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-sm-4"> | |
| <div class="panel panel-primary"> | |
| <div class="panel-heading"><h4 class="text-center"><b>Random Quote Machine</b></h4></div> | |
| <div class="panel-body portfolio-item"> | |
| <a href = "https://codepen.io/hoangnguyen/full/QvbaLQ/" target="_blank" class="portfolio-link" data-toggle="modal"> | |
| <img src="https://c2.staticflickr.com/4/3928/34095482196_0f485af2d4_n.jpg" class="img-responsive" alt = "Random Quote Machine"/> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-sm-4"> | |
| <div class="panel panel-primary"> | |
| <div class="panel-heading"><h4 class="text-center"><b>Wikipedia Viewer</b></h4></div> | |
| <div class="panel-body portfolio-item"> | |
| <a href = "https://codepen.io/hoangnguyen/full/VbmWZe/" target="_blank" class="portfolio-link" data-toggle="modal"> | |
| <img src="https://c1.staticflickr.com/5/4183/34240632056_1fc7b263f0_n.jpg" class="img-responsive" alt = "Wikipedia Viewer"/> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Second row in Portfolio --> | |
| <div class="row"> | |
| <div class="col-sm-4"> | |
| <div class="panel panel-primary"> | |
| <div class="panel-heading"><h4 class="text-center"><b>Customised Media Player</b></h4></div> | |
| <div class="panel-body portfolio-item"> | |
| <a href = "https://codepen.io/hoangnguyen/full/aWpVvx" target="_blank" class="portfolio-link" data-toggle="modal"> | |
| <img src="https://c1.staticflickr.com/5/4182/34166057701_4f1568c254_n.jpg" class="img-responsive" alt = "Customised Media Player"/> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-sm-4"> | |
| <div class="panel panel-primary"> | |
| <div class="panel-heading"><h4 class="text-center"><b>ReactJS Markdown Previewer</b></h4></div> | |
| <div class="panel-body portfolio-item"> | |
| <a href = "https://codepen.io/hoangnguyen/full/WONrZR/" target="_blank" class="portfolio-link" data-toggle="modal"> | |
| <img src="https://c1.staticflickr.com/5/4216/34247499053_ddc35725af_n.jpg" class="img-responsive" alt = "Markdown Previewer"/> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-sm-4"> | |
| <div class="panel panel-primary"> | |
| <div class="panel-heading"><h4 class="text-center"><b>Javascript Calculator</b></h4></div> | |
| <div class="panel-body portfolio-item"> | |
| <a href = "https://codepen.io/hoangnguyen/full/vmmzpm/" target="_blank" class="portfolio-link" data-toggle="modal"> | |
| <img src="https://c1.staticflickr.com/3/2805/34230283842_e9468e98ce_n.jpg" class="img-responsive" alt = "Javascript Calculator"/> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Third row in Portfolio --> | |
| <div class="row"> | |
| <div class="col-sm-4"> | |
| <div class="panel panel-primary"> | |
| <div class="panel-heading"><h4 class="text-center"><b>Pomodoro Clock</b></h4></div> | |
| <div class="panel-body portfolio-item"> | |
| <a href = "https://codepen.io/hoangnguyen/full/JNJNWW/" target="_blank" class="portfolio-link" data-toggle="modal"> | |
| <img src="https://c1.staticflickr.com/5/4178/34427957855_73a2075d26_n.jpg" class="img-responsive" alt = "Pomodoro Clock"/> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-sm-4"> | |
| <div class="panel panel-primary"> | |
| <div class="panel-heading"><h4 class="text-center"><b>Tic-Tac-Toe</b></h4></div> | |
| <div class="panel-body portfolio-item"> | |
| <a href = "https://codepen.io/hoangnguyen/full/LyKprv/" target="_blank" class="portfolio-link" data-toggle="modal"> | |
| <img src="https://c1.staticflickr.com/5/4228/34906526771_0816a51b4c_n.jpg" class="img-responsive" alt = "Tic-Tac-Toe"/> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-sm-4"> | |
| <div class="panel panel-primary"> | |
| <div class="panel-heading"><h4 class="text-center"><b>ReactJS Camper Leaderboard</b></h4></div> | |
| <div class="panel-body portfolio-item"> | |
| <a href = "https://codepen.io/hoangnguyen/full/gROezQ/" target="_blank" class="portfolio-link" data-toggle="modal"> | |
| <img src="https://c1.staticflickr.com/5/4229/34712861930_abd0400e3e_n.jpg" class="img-responsive" alt = "Camper Leaderboard"/> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Fourth row in Portfolio --> | |
| <div class="row"> | |
| <div class="col-sm-4"> | |
| <div class="panel panel-primary"> | |
| <div class="panel-heading"><h4 class="text-center"><b>ReactJS Recipe Box</b></h4></div> | |
| <div class="panel-body portfolio-item"> | |
| <a href = "https://codepen.io/hoangnguyen/full/KqwWEq/" target="_blank" class="portfolio-link" data-toggle="modal"> | |
| <img src="https://c1.staticflickr.com/5/4261/35095279382_179edbea6d_n.jpg" class="img-responsive" alt = "Recipe Box"/> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-sm-4"> | |
| <div class="panel panel-primary"> | |
| <div class="panel-heading"><h4 class="text-center"><b>D3js Visualize data with a bar chart</b></h4></div> | |
| <div class="panel-body portfolio-item"> | |
| <a href = "https://codepen.io/hoangnguyen/full/eRdeje/" target="_blank" class="portfolio-link" data-toggle="modal"> | |
| <img src="https://c1.staticflickr.com/5/4278/34520649363_7b6562cfab_n.jpg" class="img-responsive" alt = "D3js Visualize data with a bar chart"/> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-sm-4"> | |
| <div class="panel panel-primary"> | |
| <div class="panel-heading"><h4 class="text-center"><b>VueJS Punchbag game</b></h4></div> | |
| <div class="panel-body portfolio-item"> | |
| <a href = "https://codepen.io/hoangnguyen/full/owamJP/" target="_blank" class="portfolio-link" data-toggle="modal"> | |
| <img src="https://c1.staticflickr.com/5/4206/35690714241_fea0fb381f_n.jpg" class="img-responsive" alt = "Punchbag game"/> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> <!-- Closing tag of Portfolio section --> | |
| <!-- Section connect --> | |
| <div class="container" id="connect"> | |
| <div class="row"> | |
| <div class="col-sm-12"> | |
| <h1 class="text-center"><b>CONNECT</b></h1> | |
| <hr/> | |
| </div> | |
| </div> | |
| <div class="row" id="social-media"> | |
| <div class="col-sm-12"> | |
| <ul class="list-inline text-center"> | |
| <li> | |
| <a href="mailto:hoangnguyen.vn208@gmail.com" target="_blank"> | |
| <img src="https://c1.staticflickr.com/3/2872/33500488152_068979cdb0_t.jpg" alt="Gmail" class="img-responsive"/> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="https://www.facebook.com/hoang8nguyen" target="_blank"> | |
| <img src="https://c2.staticflickr.com/4/3764/33500304462_3cbe64321b_t.jpg" alt="Facebook" class="img-responsive"> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="https://www.freecodecamp.com/hoangnguyen208" target="_blank"> | |
| <img src="https://c1.staticflickr.com/3/2908/32843886493_67d485b88e_t.jpg" alt="Freecodecamp" class="img-responsive"> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="http://steamcommunity.com/id/hoang888/" target="_blank"> | |
| <img src="https://c1.staticflickr.com/5/4177/33663974233_5e56af70ff_t.jpg" alt="Steam" class="img-responsive"> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="https://github.com/hoangnguyen208" target="_blank"> | |
| <img src="https://c1.staticflickr.com/5/4238/35630502955_7178c91e47_t.jpg" alt="Github" class="img-responsive"> | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <div id="footer" class="container-fluid"> | |
| <div class="row"> | |
| <footer class="col-sm-12"> | |
| <h3 align="center"> by <a href = "https://codepen.io/hoangnguyen/" target = "_blank">Hoang Nguyen<a/></h3> | |
| <footer> | |
| </div> | |
| </div> | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(document).ready(function(){ | |
| $('body').scrollspy({target: ".navbar", offset: 50}); | |
| // Add smooth scrolling on all links inside the navbar | |
| $("#myNavbar a").on('click', function(event) { | |
| // Make sure this.hash has a value before overriding default behavior | |
| if (this.hash !== "") { | |
| // Prevent default anchor click behavior | |
| event.preventDefault(); | |
| // Store hash | |
| var hash = this.hash; | |
| // Using jQuery's animate() method to add smooth page scroll | |
| // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area | |
| $('html, body').animate({ | |
| scrollTop: $(hash).offset().top | |
| }, 800, function(){ | |
| // Add hash (#) to URL when done scrolling (default click behavior) | |
| window.location.hash = hash; | |
| }); | |
| } // End if | |
| }); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> | |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body{ | |
| background: #032f3e; | |
| } | |
| img{ | |
| border-radius:25px; | |
| margin: 20px 0 10px 10px; | |
| } | |
| #aboutMe{ | |
| padding-top:50px; | |
| color: #fff; | |
| background: url('https://wallpaperscraft.com/image/wood_texture_background_shadow_50458_1920x1080.jpg'); | |
| background-size:cover; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| #intro{ | |
| position:relative; | |
| } | |
| #profile-pic{ | |
| display: block; | |
| margin: auto; | |
| margin-top: 10px; | |
| margin-bottom: 10px; | |
| } | |
| #portfolio{ | |
| padding-top:50px; | |
| color: #fff; | |
| background: brown; | |
| background-size:cover; | |
| } | |
| #portfolio .portfolio-item:hover { | |
| transition: 0.5s; | |
| box-shadow: 5px 10px 5px 10px rgba(0,0,0,0.9) ; | |
| } | |
| #connect{ | |
| padding-top:50px; | |
| color: #fff; | |
| background: url('https://wallpaperscraft.com/image/wood_texture_background_shadow_50458_1920x1080.jpg'); | |
| background-size:cover; | |
| } | |
| .social-media{ | |
| position:relative; | |
| top:25%; | |
| left:33%; | |
| } | |
| .social-media li{ | |
| display:inline-block; | |
| } | |
| #connect img:hover{ | |
| transition: 0.5s; | |
| box-shadow: 5px 10px 5px 10px rgba(0,0,0,0.9) ; | |
| } | |
| #footer a:hover{ | |
| text-decoration:none; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment