Skip to content

Instantly share code, notes, and snippets.

@William93

William93/index.html

Created January 9, 2017 01:54
Show Gist options
  • Save William93/5df10ec89aa6da228d9475e6270f6c3e to your computer and use it in GitHub Desktop.
Save William93/5df10ec89aa6da228d9475e6270f6c3e to your computer and use it in GitHub Desktop.
Download ZIP
Portfolio
Raw
index.html
<html>
<head>
<title>Portfolio</title>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lobster">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Bitter:400">
</head>
<body>
<!-- This part is nav -->
<!-- <div class="start container-fluid"> -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<ul class="nav navbar-nav navbar-left">
<li><a class="home" href="#">BITS & BYTES</a></li>
</ul>
<ul class="right nav navbar-nav navbar-right">
<li><button id="A" class="btn btn-default btn-lg">About</button></li>
<li><button id="P"class="btn btn-default btn-lg">Work Experience</button></li>
<li><button id="C" class="btn btn-default btn-lg">Contact</button></li>
</ul>
</div>
</nav>
<!-- End of nav -->
<!-- About -->
<div id="about" class="container">
<div class="row">
<div class="col-md-8">
<blockquote class="blockquote text-left">
A creative and desired undergradute with technical experience<br>in software engineering, computer hardware architecture and networking;<br>devoted to cyber security, cyber physical system and reverse engineering malware.
</blockquote>
<h3>Software Engineer - Cyber Security Practitioner</h3>
</div>
<div class="col-md-4">
<img class="image img-circle" src="http://myrailgun.site/profile.jpg" width=270px height=270px>
</div>
</div>
</div>
<!-- End about -->
<!-- portfolio -->
<div id="portfolio" class="container">
<h3 class=text-center>Work Experience
</h3>
<hr>
<div class="row">
<div class="col-md-6 text-left">
<h3>Ernst & Young</h3>
<h4>Cyber Security Advisory Intern</h4>
<hr class="EY">
<ol>
<li>IT infrastructure improvement and maintenance:
<ul>
<li>Set up VPN, FTP and Syslog servers for internal usage.</li>
<li>Done Active Directory (AD) server migration.</li>
<li>Configure UNIX/Linux servers.</li>
<li>Simple scripting for autonomous process eg. constantly send email to lab admin to
check if UPS is still alive, collect and clear log data on Syslog server.</li>
</ul>
</li>
<li>Phishing Email Campaign
<ul>
<li>Set up a Debian-based phishing email server for client to host phishing tool.</li>
<li>Talk to clients to get to know what they want to achieve at the end of the campaign.</li>
<li>Modified a Ruby on Rails open-source phishing tool to match client's requirement eg.
user-friendly, data output format.</li>
<li>Collected phishing data and did a statistical report for client.</li>
</ul>
</li>
</ol>
</div>
<div class="col-md-6">
<h3>iTrust Lab, Centre for Research in Cyber Security, SUTD</h3>
<h4>Student Researcher</h4>
<hr class="itrust">
<ul>
<li>Developed methods to detect attacks on CPS and experimentally validate algorithms
for detecting cyber physical attack.</li>
<li>Worked on Secure Water Treatment (SWaT) which is a testbed that faithfully
replicates the physical and control components of a modern large scale water
treatment system.</li>
<li>Worked on Set Point Constant Checker (SPCC) and Abnormally Behaviour
Checker (ABC) for water treatment testbed.</li>
<li>Studied on attack detection algorithms, network and data collection which will be
which are needed for the research.</li>
</ul>
</div>
</div>
</div>
<!-- End portfolio -->
<div id="contact" class="container">
<h3 class="text-center">Contact Me</h3>
<hr>
<div class="row">
<div class="col-md-7">
<p>Feel free to reach out to me for you have any question about me or want to discuss anything on computer science or maybe about life!<br><br>I am more than happy to have a chat with you!<br><br>You can contact me at <a href="mailto:[email protected]">Gmail</a>. Hope to hear from you soon :&#41;</p>
</div>
<div class="col-md-5">
<article>"I see life as a binary number, 0 or 1.<br><br> It's either you give up, or you take up the challenges."</article>
</div>
</div>
</div>
<div class="foot container-fluid">
<div class="row">
<div class="col-lg-6">
<h2>About this page</h2>
<h3>Made by <a href="http://codepen.io/Minato16">William</a></h3>
</div>
<div class="col-lg-6">
<h2>Follow Me</h2>
<a target="_blank" href="https://sg.linkedin.com/in/koh-william-027b15b0"><i class="fa fa-linkedin"></i></a>
<a href="https://github.com/William93"><i class="fa fa-github"></i></a>
<a href="https://www.facebook.com/nanjolno16"><i class="fa fa-facebook"></i></a>
</div>
</div>
</div>
<!-- </div> -->
</body>
</html>
Raw
portfolio.markdown
Raw
script.js
$("#P").click(function() {
$('html, body').animate({
scrollTop: $("#portfolio").offset().top
}, 1500);
});
$("#A").click(function() {
$('html, body').animate({
scrollTop: $("#about").offset().top
}, 1500);
});
$("#C").click(function() {
$('html, body').animate({
scrollTop: $("#contact").offset().top
}, 1500);
});
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
Raw
style.css
body {
background-color: lightslategray;
}
.navbar-default {
background-color: #FD3C3C;
}
nav {
height: 90px;
padding-top:10px;
box-shadow:7px 7px 3px #ffffff;
font-size: 20px;
margin-left: 10px;
margin-right: 10px;
}
.btn {
margin:10px;
/* opacity: 0.5; */
background-color: #FD3C3C;
border-style: hidden;
}
#contact {
background-color: #B6A7A7;
/* background-color: white; */
width:1000px;
padding-top: 20px;
padding-bottom:50px;
}
#contact h3 {
color: #ffffff;
}
hr {
width: 500px;
border-width: 2px;
font-family: Bitter;
}
#contact .col-md-7 {
padding-top: 20px;
padding-left:40px;
padding-right: 40px;
}
#contact p {
font-size: 20px;
}
article {
font-family: Lobster;
font-size: 25px;
color: #fff;
}
.home {
margin-left: 30px;
font-size: 40px;
color: black;
}
.right {
color: black;
}
#about {
color:silver;
background-color: #282F2E;
width: 1000px;
padding-top: 100px;
padding-bottom:30px;
height: 600px;
}
#portfolio {
width: 1000px;
background-color: #444;
}
.image {
margin-top: 50px;
margin-left: 30px;
}
.col-md-8 {
margin-top: 90px;
}
blockquote {
font-family: Lobster;
}
.foot {
background-color: black;
height: 200px;
}
.col-lg-6 {
padding-top: 30px;
padding-left: 140px;
padding-right:100px;
color: white;
}
i {
width: 20px;
height: 20px;
margin-left: 20px; */
color: silver
}
#portfolio {
color: silver;
padding-left:30px;
padding-right:30px;
}
.EY{
/* width: 300px; */
margin-left:0;
/* margin-right: 200px; */
width:280px;
}
.itrust {
width: 450px;
margin-left:auto;
}
Raw
styles
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-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