cs4241-18a · macelott · Aug 29, 2018 · Aug 29, 2018 · Aug 30, 2018 · Aug 30, 2018
diff --git a/README.md b/README.md
@@ -1,77 +1,13 @@
 Assignment 1 - Hello World: Basic Deployment w/ Git, GitHub, Heroku  
 ===
 
-This assignment is a "warm-up" exercise. 
-You will simply deploy the starting Web site that you will use this term to the [Heroku Web platform](http://www.heroku.com/). 
+Zhung Keung Moo Feng
+http://a1-macelott.herokuapp.com/
 
-Refer to [Getting started with node.js on Heroku](https://devcenter.heroku.com/articles/getting-started-with-nodejs#introduction).
-
-(Thanks to past instructors of the course, here is a short [getting started with Heroku movie](http://web.cs.wpi.edu/~gpollice/Movies/HerokuGettingStarted/) that may also help.)
-
-Treat this assignment as a chance to get up to speed on Git, GitHub, and Heroku. 
-If you already know these, great. 
-However, if you're new to them, spend several hours practicing, experimenting, and reading documentation. 
-In other words, don't just get your website up and done. You will need skill with these tools throughout the rest of the course.
-
-Assignment details
----
-
-Do the following to complete this assignment:
-
-1. Fork the starting project code. This repo contains:
-    * the server code, `server.js`
-    * the `Procfile` that you need for Heroku deployment
-    * A starting `index.html` file that you will edit as described below
-2. Edit `index.html` to show the following information about you:
-    * your name and class at WPI (e.g. class of 2020) Note: Do not put any contact or personal information that you do not potentially want other people outside of this class to see.
-    * your major(s) and minor(s)
-    * previous computer science courses that you have taken at WPI
-    * your experience with the following technologies and methods (none, some, a lot)
-        * HTML
-        * CSS
-        * Java
-        * JavaScript
-        * Ruby
-        * Python
-        * unit testing
-3. Test your project to make sure that when someone goes to your main page, it displays correctly.
-4. Deploy your project to Heroku.
-5. Ensure that your project has the proper naming scheme (guide follows) so we can find it.
-6. Modify the Readme to the specification below.
-7. Create and submit a Pull Request to the original repo.
-
-Naming and URL Scheme
----
-
-You must use a consistent naming scheme for all projects in this course.
-If we can't find it, we can't grade it.
-
-By default Heroku assigns your application a random name.
-To change it, follow [this guide](https://devcenter.heroku.com/articles/renaming-apps).
-
-The name scheme should be `a1-yourGitHubUsername`.
-The `a1` will need to be updated to `a2`, `a3`, and so on in future projects.
-
-Resources
----
-
-If you need a JavaScript/HTML/CSS refresher, see [Technology Fundamentals by Scott Murray](http://chimera.labs.oreilly.com/books/1230000000345/ch03.html#_html) and/or [JavaScript Codeacademy](https://www.codecademy.com/en/tracks/javascript).
-
-If you need a Git/GitHub refreseher, see [GitHub Bootcamp](https://help.github.com/categories/bootcamp/), the [GitHub Guides](https://guides.github.com/) (especially the ones on Hello World, and Understanding the GitHub Flow, and Forking Projects), and [CodeSchool's Try Git Course](https://www.codeschool.com/courses/try-git).
-
-Sample Readme (delete the above when you're ready to submit, and modify the below so with your links and descriptions)
----
-
-Lane Harrison  
-http://codementum-a1.herokuapp.com
-
-This project shows ...
+This project shows my fundamental grasp on HTML, CSS, Git, and Heroku. It contains some basic information about myself such as experience with some tools and courses taken.
 
 ## Technical Achievements
-- **Proved P=NP**: Using a combination of...
-- **Solved AI**: ...
+- **Applied a stylesheet**: By modifying the `server.js` and `index.html` files I was able to apply a stylesheet that facilitated the design of the website.
 
 ### Design Achievements
-- **Re-vamped Apple's Design Philosophy**: Shown in `style.css`, the code...
-
-
+- **Minimalist Design**: Using CSS (in `main.css`), I am able to design an uncluttered webpage that allows the user to read easily and differentiate between content and headers. Additionally, content is displayed in a mostly vertical format throughout.
diff --git a/index.html b/index.html
@@ -2,26 +2,33 @@
   <head>
     <title>CS4241 Assignment 1</title>
     <meta charset="utf-8">
+    <link rel="stylesheet" type="text/css" href="main.css">
   </head>
   <body>
-    <h1>Information about [Your name here]</h1>
-    <p>
-      [Self introduction]
-    </p>
-    <p>
-      [Major and other information]
-    </p>
-    <p>
-      [Other things]
-    </p>
-
+    <h1>Zhung Keung Moo Feng (Erick)</h1>
+    <h3>
+        Class of 2019 | Major: Computer Science | Minor: Data Science
+    </h3>
+    <h2>CS courses</h2>
+    <div class="flex-row"><p>CS 1101</p></div>
+    <div class="flex-row"><p>CS 2102</p></div>
+    <div class="flex-row"><p>CS 2303</p></div>
+    <div class="flex-row"><p>CS 2011</p></div>
+    <div class="flex-row"><p>CS 2223</p></div>
+    <div class="flex-row"><p>CS 3013</p></div>
+    <div class="flex-row"><p>CS 3733</p></div>
+    <div class="flex-row"><p>CS 3516</p></div>
+    <div class="flex-row"><p>CS 3133</p></div>
+    <div class="flex-row"><p>CS 3431</p></div>
+    <div class="flex-row"><p>CS 3041</p></div>
+    <div class="flex-row"><p>CS 3043</p></div>
     <h2>Experience</h2>
-    <p>
-      Working experience
-    </p>
-    <ul>
-      <li>IBM/Rational</li>
-      <li>WPI</li>
-    </ul>
+    <div class="flex-row"><p>HTML: some</p></div>
+    <div class="flex-row"><p>CSS: some</p></div>
+    <div class="flex-row"><p>Java: a lot</p></div>
+    <div class="flex-row"><p>Javascript: a lot</p></div>
+    <div class="flex-row"><p>Ruby: none</p></div>
+    <div class="flex-row"><p>Python: some</p></div>
+    <div class="flex-row"><p>Unit Testing: some</p></div>
   </body>
 </html>
diff --git a/main.css b/main.css
@@ -0,0 +1,112 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+    display: block;
+}
+body {
+    line-height: 1;
+}
+ol, ul {
+    list-style: none;
+}
+blockquote, q {
+    quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+    content: '';
+    content: none;
+}
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+/* CSS reset ends here */
+
+body {
+    margin-bottom: 20px;
+}
+
+.flex-row {
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: space-around;
+    align-items: center;
+}
+
+.body-gray {
+    background-color: #969696;
+}
+
+h1 {
+    background-color: white;
+    font-family: 'Helvetica', 'Arial', sans-serif;
+    color: #444444;
+    font-size: 36pt;
+    text-align: center;
+    padding: 15px 0 10px 0;
+}
+
+h2 {
+    font-family: 'Helvetica', 'Arial', sans-serif;
+    color: #666666;
+    text-align: center;
+    font-size: 30pt;
+    padding: 15px 0 15px 0;
+}
+
+h3 {
+    font-family: 'Helvetica', 'Arial', sans-serif;
+    color: #444444;
+    font-weight: 100;
+    font-style: normal;
+    font-size: 22px;
+    line-height: 1.58;
+    letter-spacing: -.003em;
+    margin-bottom: 15px;
+    text-align: center;
+}
+
+header {
+    background-color: white;
+    width: 100%;
+}
+
+.main {
+    background-color: white;
+    max-width: 740px;
+    margin: auto;
+    padding: 20px;
+}
+
+p {
+    font-family: 'Helvetica', 'Arial', sans-serif;
+    font-size: 1.4em;
+    color: #444444;
+    margin-bottom: 15px;
+}
diff --git a/server.js b/server.js
@@ -13,6 +13,9 @@ var server = http.createServer (function (req, res) {
     case '/index.html':
       sendFile(res, 'index.html')
       break
+    case '/main.css':
+      sendFile(res, 'main.css')
+      break
     default:
       res.end('404 not found')
   }