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="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;}

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

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

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

  /* Positioning */
  position: fixed;
  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: 500px;
  clear: both;
}
	<!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="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;}

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

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

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

	/* Positioning */
	position: fixed;
	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: 500px;
	clear: both;
	}