tengiao/about.html

## about.html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>About Me</title>

    <!--[if lt IE 9]>
    <script src="dist/html5shiv.js"></script>
    <![endif]-->

    <!-- Normalize.css unused due to use of Bootstrap -->
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/about_styles.css">
  </head>

  <body>
    <div class="nav">
      <li><a href="index.html">Home</a></li>
      <ul>
        <li><a href="#">About</a></li>
        <li><a href="work.html">Work</a></li>
        <li><a href="contact.html">Contact</a></li>
        <li><a href="faq.html">FAQ</a></li>
      </ul>
    </div><!-- end nav -->

    <div class="container">
        <div class="header">
          <h1><strong>About Me</strong></h1>
        </div><!-- end header -->

        <div class="intro column">
          <h3>Introduction</h3>
          <p>Apparently I don't make cat videos</p>
        </div><!-- end intro -->

        <div class="skill column">
          <h3>My Skills</h3>
          <ul id="skill-list">
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
            <li>Ruby on Rails</li>
            <li>Unix/Bash Shell</li>
            <li>Perl</li>
          </ul>
        </div><!-- end skill -->

        <div class="image column">
          <img src="img/ProfilePic.jpeg" alt="Ernest with cat">
        </div><!-- end image -->

        <div class="main-text">
          <h3>My Story</h3>
          <p>When I was a kid, I wondered if a person can be many things in one life time: from a pauper to a prince to a monk. It turns out to be an unintended self-fulfilling prophecy. I have gone through several roles, from being an engineer, to a music teacher, a college lecturer, an audiovisual artist. I finally figured out what I enjoy doing best: to be creative and to create stuffs! So here I am, learning web development and hoping to create beautiful web applications every single day!</p>
          <br>
          <p>More needs to be said about myself here in order to demonstrate that I know how to work CSS positioning. The experiment is to have my personal photo to follow the readers as they scroll down this About Me page. This is really difficult as I try to add to the length of this paragraph just to achieve enough material to make the readers scroll.</p>
          <br>
          <p>Perhaps the alternative is to increase the size of the font used here but then I realise the same could be achieved if readers would zoom in real close but have to contend with reading filler texts which do not really relay much information about myself. Verbose is probably the correct word here.</p>
          <br>
          <p>All that I can be sure of is how I view my own page on my 15 inch MacBook Pro. By the end of this sentence, I would have sufficient text material to make me having to scroll down a bit to have a glance at the whole of this About Me page.</p>
          <br>
          <p>If you have read through this far, you should know that this is, unfortunately, still insufficient text for me to scroll down far enough such that I could see my photo overlap with the text. But right now, I should reiterate what I wanted to show you, the reader, is that I have learned how to deploy "fixed" positioning for an HTML element.</p>
          <br>
          <p>In this case, the fixed position HTML element would be my photo image element. By this time, you would have noticed that regardless of where you are on this page, my photo image stays exactly at the same spot in relation to the browser window. It is spooky, I know, to have my face following you while you stalk me on my own webpage. I guess it is only a matter of tit-for-tat. Or, you could actually compare my portrait here to the eternal gaze of Leonardo Da Vinci's Mona Lisa. Or, if it helps, just look at the cat in the photo. Her name is Violet, by the way. Isn't she lovely?</p>
          <br>
          <p>How do you like the way it looks? Or rather, the way "I" am looking at you as you try to read the part of the text obscured by part of my legs? Those are my favourite pants, by the way. They are corduray, and I got them during that period of my life when I'm obsessed with wearing green!</p>
          <br>
          <p>Don't try this at home folks! Neither the green pants nor having you profile picture as a fixed position element!</p>
        </div><!-- end main-text -->
    </div><!-- end container -->
  </body>
</html>

## about_styles.css
* { box-sizing: border-box;}

.nav li {
  display: inline-block;
  float: left;
  width: 20%;
}

.nav a {
  color: white;
  -webkit-transition: color 600ms; /* Safari */
  transition: color 600ms;
  text-transform: none;
  letter-spacing: 0.05em;
  margin-left: 25px;
}

.nav li a:hover {
  color: #FF0;
  text-transform: uppercase;
  text-decoration: none;
  background-color: #000;
}

/* To overwrite Bootstrap's list element padding */
.nav li a {
  padding: 0;
}

.nav {
  top: 0;
  width: 100%;
  padding: 10px 10px 10px;
  background-color: black;
  position: fixed;
}

.container {
  margin: 0 auto;
  width: 80%;
}

.header h1 {
  margin-top: 80px;
  margin-bottom: 10px;
  text-align: center;
}

.image img {
  /* width: 100%; */

  /* Positioning */
  position: static;
  /* top: 70px;
  right: 180px; */

  /* Box-model */
  width: 380px;
  height: 500px;
  margin-top: 25px;
}

.column {
  display: inline-block;
  float: left;
  width: 33.33333333333333%;
}

.main-text {
  padding-top: 50px;
  clear: both;
}

## contact.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width initial-scale=1">
    <title>Contact Me</title>

    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/contact_styles.css">
    <link rel="stylesheet" type="text/css" href='http://fonts.googleapis.com/css?family=Oleo+Script'>
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Monofett">
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Oswald">
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Zilla+Slab+Highlight">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- [if lt IE 9] -->
    <!-- <script src="dist/html5shiv.js"></script> -->
    <!-- [endif] -->

  </head>

  <body>
    <div class="bg">
    </div><!-- end bg -->

    <div class="nav">
      <div class="home">
        <a href="index.html">#Home</a>
      </div><!-- home -->
      <ul>
        <li><a href="about.html">#About</a></li>
        <li><a href="work.html">#Work</a></li>
        <li><a href="#">#Contact</a></li>
        <li><a href="faq.html">#FAQ</a></li>
      </ul>
    </div><!-- end nav -->

    <div class="container">
      <div class="blurb">
        <h2>Thank you for visiting my page.<br>
          For further information or enquiries, please feel free to drop me a line or phone during business hours.<br>
          I am happy to entertain enquiries from outside New Zealand and Australia.<br>
          Such enquiries are best conducted via email and I shall try my very best to reply within one business day.<br>
        </h2>
      </div><!-- end blurb-->

      <div class="contact_info">
        <h3>
          <p>Email: ernest_webdev@gmail.com<br>
            Phone: +64 204 4848 1628
          </p>
        </h3>
      </div><!-- end contact_info-->

      <div class="main-text">
        <p> Just testing ... </p>
        <p> Just testing ... </p>
        <p> Just testing ... </p>
        <p> Just testing ... </p>
        <p> Just testing ... </p>
        <p> Just testing ... </p>
        <p> Just testing ... </p>
        <p> Just testing ... </p>
        <p> Just testing ... </p>
        <p> Just testing ... </p>
        <p> Just testing ... </p>
        <p> Just testing ... </p>
        <p> Just testing ... </p>
        <p> Just testing ... </p>
        <p> Just testing ... </p>
      </div><!-- main-text -->
    </div><!-- container -->
  </body>
</html>

## contact_styles.css
body,
html {
  height: 100%;
  top: 0;
}

.bg {
  /* The image used */
  background-image: url("../img/OttawaMuseum.jpg");

  /* Full height */
  height: 95%;

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  /* top: 0;
  margin-top: 0; */
}

.nav {
  top: 0;
  width: 100%;
  padding: 0 10px 0 0;
  /* margin-bottom: 10px; */
  /* background-color: #ABC8C0; */
  background-color: rgba(171, 200, 192, 1);
  position: fixed;
  z-index: 1;
}

.nav ul {
  margin-top: 10px;
}

.nav li {
  display: inline-block;
  float: left;
  width: 20%;
  padding-left: 80px;
}

.nav a {
  color: white;
  -webkit-transition: 600ms; /* Safari */
  transition: 600ms;
  text-transform: none;
  letter-spacing: 0.05em;
  margin-left: 25px;
}

.home a {
  font-family: "Oleo Script", Helvetica, sans-serif;
  font-size: 3em;
  color: #000;
  text-shadow: 3px 3px 0px rgba(255,255,255,1.0);
  background-color: #F45B69;
  text-align: center;
  margin: 0;
  padding: 0 10px 0 0;
  width: 150px;
  display: inline-block;
  float: left;
  clear: right;
}

.nav ul li a {
  font-family: "Monofett", cursive;
  font-size: 2em;
  color: #000;
  text-shadow: 3px 3px 0px rgba(255,255,255,1.0);
  /* background-color: #ABC8C0; */
  background-color: rgba(171, 200, 192, 0);
  margin: 10px 0 0 0;
  padding: 10px 0 0 0;
  width: 250px;
}

.nav a:hover {
  /* color: #FF0; */
  /* text-transform: uppercase; */
  font-size: 3.5em;
  text-decoration: none;
  /* background-color: #000; */
}

.blurb {
  position: absolute;
  top: 50px;
  right: 0;
}

.contact_info {
  position: absolute;
  top: 280px;
  left: 10px;
}

h2 {
  font-family: "Oswald", sans-serif;
  font-size: 1.7em;
  font-weight: 200;
  color: #8FBFE0;
  background-color: #000;
  padding: 15px 15px 30px 15px;
  margin-top: 50px;
  margin-left: 600px;
}

h3 {
  font-family: "Zilla Slab Highlight", cursive;
  font-size: 3.5em;
  font-weight: 100;
  /* background-color: #5AD4C2; */
  color: #000;
  margin-top: 15px;
  padding: 0 15px 15px 15px;
  position: relative;
  left: 20px;
}

.contact_info p {
  line-height: 1.3;
  margin: 0;
}

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

    <title>Ernest's Portfolio!</title>

    <!-- Bootstrap core CSS -->


    <!-- Custom styles for this template go here -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/styles.css">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[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]-->
  </head>

  <body>

    <!-- Main jumbotron for a primary marketing message or call to action -->
    <div class="jumbotron">
      <div class="container">
        <h1>Ernest's Portfolio Page</h1>
        <p><strong>This is the professional portfolio page for Ernest.</strong> This is the space to watch as Ernest goes through the process of training to be a full-fledged web developer within 6 months beginning on Feb 26, 2018! </p>
        <!-- <a href="https://google.com" target="_blank">"About Me"</a> -->
        <a href="about.html" target="_blank">"About Me"</a>
      </div><!-- /container -->
    </div><!-- /jumbotron -->

    <div class="container">
      <!-- Example row of columns -->
      <div class="row">
        <div class="col-md-4">
          <h2>Portfolio Concept</h2>
          <p>I envision my portfolio to highlight my skills and abilities as a full stack developer who is able to deliver commercial websites that cater for an ever-expanding customer base and robust business transactions. </p>
          <p>Ideas currently brewing in my mind include a website for New Zealand's used and valuable book trade (which is also a place for book collectors and readers who are interested in buying and selling books), a subscription-based music theory education platform, and an air ticket swapping platform. </p>
          <p>My professional experience is wide and varied. I have worked in the semiconductor design industry, done brief research work on Software Defined Networking, lectured in electronic engineering and maths, and also composed acoustic/electronic experimental music and audiovisual works. </p>
          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
        </div><!-- /col -->
        <div class="col-md-4">
          <h2>Project Goals</h2>
          <p>My goal is to complete all CareerFoundry Web Development course projects within 4 months. That amounts to approximately 7 to 8 Achievements in total, 2 Achievements per month, 22 Exercises per month, which comes to 1 exercise completion per day. </p>
          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
       </div><!-- /col -->
        <div class="col-md-4">
          <h2>Course Goals</h2>
          <p>Even though my previous work experience has equipped me with plenty of transferrable professional skills, taking this course would be my first step to breaking into a new career as a software developer. </p>
          <p>It would be highly valuable to gain experience as an entry level developer and then move on to becoming a freelancer.</p>
          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
        </div><!-- /col -->
      </div><!-- /row -->

      <hr>


    </div> <!-- /container -->


    <!-- ============================= -->
    <!-- All your JavaScript comes now -->
    <!-- ============================= -->

    <!-- Bootstrap core JS -->

    <!-- Can place script tags with JavaScript files here -->

  </body>
</html>

## styles.css
.jumbotron {
  background-image: url("../img/GlassWorkCurvy.jpg");
  background-size: cover;
}

.jumbotron p {
  color: white;
}

.jumbotron h1 {
  color: white;
}
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>About Me</title>

	<!--[if lt IE 9]>
	<script src="dist/html5shiv.js"></script>
	<![endif]-->

	<!-- Normalize.css unused due to use of Bootstrap -->
	<link rel="stylesheet" href="css/normalize.css">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
	<link rel="stylesheet" href="css/about_styles.css">
	</head>

	<body>
	<div class="nav">
	<li><a href="index.html">Home</a></li>
	<ul>
	<li><a href="#">About</a></li>
	<li><a href="work.html">Work</a></li>
	<li><a href="contact.html">Contact</a></li>
	<li><a href="faq.html">FAQ</a></li>
	</ul>
	</div><!-- end nav -->

	<div class="container">
	<div class="header">
	<h1><strong>About Me</strong></h1>
	</div><!-- end header -->

	<div class="intro column">
	<h3>Introduction</h3>
	<p>Apparently I don't make cat videos</p>
	</div><!-- end intro -->

	<div class="skill column">
	<h3>My Skills</h3>
	<ul id="skill-list">
	<li>HTML</li>
	<li>CSS</li>
	<li>JavaScript</li>
	<li>Ruby on Rails</li>
	<li>Unix/Bash Shell</li>
	<li>Perl</li>
	</ul>
	</div><!-- end skill -->

	<div class="image column">
	<img src="img/ProfilePic.jpeg" alt="Ernest with cat">
	</div><!-- end image -->

	<div class="main-text">
	<h3>My Story</h3>
	<p>When I was a kid, I wondered if a person can be many things in one life time: from a pauper to a prince to a monk. It turns out to be an unintended self-fulfilling prophecy. I have gone through several roles, from being an engineer, to a music teacher, a college lecturer, an audiovisual artist. I finally figured out what I enjoy doing best: to be creative and to create stuffs! So here I am, learning web development and hoping to create beautiful web applications every single day!</p>
	<br>
	<p>More needs to be said about myself here in order to demonstrate that I know how to work CSS positioning. The experiment is to have my personal photo to follow the readers as they scroll down this About Me page. This is really difficult as I try to add to the length of this paragraph just to achieve enough material to make the readers scroll.</p>
	<br>
	<p>Perhaps the alternative is to increase the size of the font used here but then I realise the same could be achieved if readers would zoom in real close but have to contend with reading filler texts which do not really relay much information about myself. Verbose is probably the correct word here.</p>
	<br>
	<p>All that I can be sure of is how I view my own page on my 15 inch MacBook Pro. By the end of this sentence, I would have sufficient text material to make me having to scroll down a bit to have a glance at the whole of this About Me page.</p>
	<br>
	<p>If you have read through this far, you should know that this is, unfortunately, still insufficient text for me to scroll down far enough such that I could see my photo overlap with the text. But right now, I should reiterate what I wanted to show you, the reader, is that I have learned how to deploy "fixed" positioning for an HTML element.</p>
	<br>
	<p>In this case, the fixed position HTML element would be my photo image element. By this time, you would have noticed that regardless of where you are on this page, my photo image stays exactly at the same spot in relation to the browser window. It is spooky, I know, to have my face following you while you stalk me on my own webpage. I guess it is only a matter of tit-for-tat. Or, you could actually compare my portrait here to the eternal gaze of Leonardo Da Vinci's Mona Lisa. Or, if it helps, just look at the cat in the photo. Her name is Violet, by the way. Isn't she lovely?</p>
	<br>
	<p>How do you like the way it looks? Or rather, the way "I" am looking at you as you try to read the part of the text obscured by part of my legs? Those are my favourite pants, by the way. They are corduray, and I got them during that period of my life when I'm obsessed with wearing green!</p>
	<br>
	<p>Don't try this at home folks! Neither the green pants nor having you profile picture as a fixed position element!</p>
	</div><!-- end main-text -->
	</div><!-- end container -->
	</body>
	</html>
	* { box-sizing: border-box;}

	.nav li {
	display: inline-block;
	float: left;
	width: 20%;
	}

	.nav a {
	color: white;
	-webkit-transition: color 600ms; /* Safari */
	transition: color 600ms;
	text-transform: none;
	letter-spacing: 0.05em;
	margin-left: 25px;
	}

	.nav li a:hover {
	color: #FF0;
	text-transform: uppercase;
	text-decoration: none;
	background-color: #000;
	}

	/* To overwrite Bootstrap's list element padding */
	.nav li a {
	padding: 0;
	}

	.nav {
	top: 0;
	width: 100%;
	padding: 10px 10px 10px;
	background-color: black;
	position: fixed;
	}

	.container {
	margin: 0 auto;
	width: 80%;
	}

	.header h1 {
	margin-top: 80px;
	margin-bottom: 10px;
	text-align: center;
	}

	.image img {
	/* width: 100%; */

	/* Positioning */
	position: static;
	/* top: 70px;
	right: 180px; */

	/* Box-model */
	width: 380px;
	height: 500px;
	margin-top: 25px;
	}

	.column {
	display: inline-block;
	float: left;
	width: 33.33333333333333%;
	}

	.main-text {
	padding-top: 50px;
	clear: both;
	}
	body,
	html {
	height: 100%;
	top: 0;
	}

	.bg {
	/* The image used */
	background-image: url("../img/OttawaMuseum.jpg");

	/* Full height */
	height: 95%;

	/* Center and scale the image nicely */
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	/* top: 0;
	margin-top: 0; */
	}

	.nav {
	top: 0;
	width: 100%;
	padding: 0 10px 0 0;
	/* margin-bottom: 10px; */
	/* background-color: #ABC8C0; */
	background-color: rgba(171, 200, 192, 1);
	position: fixed;
	z-index: 1;
	}

	.nav ul {
	margin-top: 10px;
	}

	.nav li {
	display: inline-block;
	float: left;
	width: 20%;
	padding-left: 80px;
	}

	.nav a {
	color: white;
	-webkit-transition: 600ms; /* Safari */
	transition: 600ms;
	text-transform: none;
	letter-spacing: 0.05em;
	margin-left: 25px;
	}

	.home a {
	font-family: "Oleo Script", Helvetica, sans-serif;
	font-size: 3em;
	color: #000;
	text-shadow: 3px 3px 0px rgba(255,255,255,1.0);
	background-color: #F45B69;
	text-align: center;
	margin: 0;
	padding: 0 10px 0 0;
	width: 150px;
	display: inline-block;
	float: left;
	clear: right;
	}

	.nav ul li a {
	font-family: "Monofett", cursive;
	font-size: 2em;
	color: #000;
	text-shadow: 3px 3px 0px rgba(255,255,255,1.0);
	/* background-color: #ABC8C0; */
	background-color: rgba(171, 200, 192, 0);
	margin: 10px 0 0 0;
	padding: 10px 0 0 0;
	width: 250px;
	}

	.nav a:hover {
	/* color: #FF0; */
	/* text-transform: uppercase; */
	font-size: 3.5em;
	text-decoration: none;
	/* background-color: #000; */
	}

	.blurb {
	position: absolute;
	top: 50px;
	right: 0;
	}

	.contact_info {
	position: absolute;
	top: 280px;
	left: 10px;
	}

	h2 {
	font-family: "Oswald", sans-serif;
	font-size: 1.7em;
	font-weight: 200;
	color: #8FBFE0;
	background-color: #000;
	padding: 15px 15px 30px 15px;
	margin-top: 50px;
	margin-left: 600px;
	}

	h3 {
	font-family: "Zilla Slab Highlight", cursive;
	font-size: 3.5em;
	font-weight: 100;
	/* background-color: #5AD4C2; */
	color: #000;
	margin-top: 15px;
	padding: 0 15px 15px 15px;
	position: relative;
	left: 20px;
	}

	.contact_info p {
	line-height: 1.3;
	margin: 0;
	}
	.jumbotron {
	background-image: url("../img/GlassWorkCurvy.jpg");
	background-size: cover;
	}

	.jumbotron p {
	color: white;
	}

	.jumbotron h1 {
	color: white;
	}