cs4241-18a · dannysongyd · Aug 25, 2018 · Aug 27, 2018 · Aug 30, 2018 · Aug 30, 2018
diff --git a/Node.js b/Node.js
diff --git a/README.md b/README.md
@@ -1,77 +1,14 @@
 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/). 
+Yuanda Song - https://a1-dannysongyd.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 basic information about myself by using the html webpage.
 
 ## Technical Achievements
-- **Proved P=NP**: Using a combination of...
-- **Solved AI**: ...
-
-### Design Achievements
-- **Re-vamped Apple's Design Philosophy**: Shown in `style.css`, the code...
-
+Edited server.js to load css file and image
+Imported css and javascript files from Bootstrap
 
+## Design Achievements
+Added css file to customize the page(text color and padding)
+Used grid system provided by Bootstrap to achieve a better look
diff --git a/Res b/Res
diff --git a/RestorinSaremot2 b/RestorinSaremot2
diff --git a/Restoringhedremote: b/Restoringhedremote:
diff --git a/Restoringremote b/Restoringremote
diff --git a/Restoringremote: b/Restoringremote:
diff --git a/Rodremote: b/Rodremote:
diff --git a/css/styles.css b/css/styles.css
@@ -0,0 +1,43 @@
+
+.content{
+
+    padding: 30px
+
+
+}
+
+.my-heading{
+    color: black;
+    text-align: center;
+    padding: 100px 0px 0px 0px
+
+
+}
+
+.text-content{
+    color: black;
+    text-align: center;
+}
+
+.icons-group{
+    text-align: center;
+    padding: 0px 0px 100px 0px
+}
+
+/* .text-focused{
+
+}
+
+.courses-list{
+
+
+}
+
+.course-focused{
+
+}
+
+.technologies-list{
+
+} */
+
diff --git a/ildremote: b/ildremote:
diff --git a/index.html b/index.html
@@ -1,27 +1,131 @@
 <html lang="en">
-  <head>
-    <title>CS4241 Assignment 1</title>
-    <meta charset="utf-8">
-  </head>
-  <body>
-    <h1>Information about [Your name here]</h1>
-    <p>
-      [Self introduction]
-    </p>
-    <p>
-      [Major and other information]
-    </p>
-    <p>
-      [Other things]
-    </p>
-
-    <h2>Experience</h2>
-    <p>
-      Working experience
-    </p>
-    <ul>
-      <li>IBM/Rational</li>
-      <li>WPI</li>
-    </ul>
-  </body>
-</html>
+
+<head>
+  <title>CS4241 Assignment 1</title>
+  <meta charset="utf-8">
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
+    crossorigin="anonymous">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+
+
+  <link rel="stylesheet" type="text/css" href="styles.css">
+
+</head>
+
+<body>
+  <nav class="navbar navbar-dark bg-dark navbar-expand-lg">
+    <a class="navbar-brand" href="#">About Yuanda Song</a>
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
+      aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+
+    <div class="collapse navbar-collapse" id="navbarSupportedContent">
+
+      <ul class="navbar-nav mr-auto">
+        <li class="nav-item">
+          <a class="nav-link" href="#block1">Basic Information</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="#block2">Previous Courses</a>
+        </li>
+
+        <li class="nav-item">
+          <a class="nav-link" href="#block3">Experience</a>
+        </li>
+      </ul>
+    </div>
+  </nav>
+
+  <main role="main">
+
+
+    <div>
+      <h1 class="my-heading">Yuanda Song (Danny)</h1>
+      <p class="text-content">Computer Science Major Class of 2020</p>
+      <p class="text-content">Software Engineer, Photographer, Gamer</p>
+    </div>
+
+    <div class="icons-group">
+      <a class="fa fa-github" href="https://github.com/dannysongyd " style="font-size:48px;" role="button"></a>
+      <a class="fa fa-instagram" href="https://www.instagram.com/dannys0ng/" style="font-size:48px;" role="button"></a>
+      <a class="fa fa-steam-square" href="https://steamcommunity.com/id/dannysongyd/" style="font-size:48px;" role="button"></a>
+    </div>
+
+    <div class="content">
+      <hr class="featurette-divider">
+
+      <div id="block1" class="row featurette">
+        <div class="col-md-7">
+          <h2 class="featurette-heading">Basic information about <span class="text-focused">Yuanda Song(Danny)</span></h2>
+          <p class="lead"> Yuanda Song (Danny), class of 2020 majoring in Computer Science, is in his junior year at Worcester
+            Polytechnic Institute. He is a Software Engineer, a Photographer and a Gamer</p>
+        </div>
+        <div class="col-md-5">
+          <img class="featurette-image img-fluid mx-auto" src="pic1.jpeg" >
+        </div>
+      </div>
+
+      <hr class="featurette-divider">
+
+      <div id="block2" class="row featurette">
+        <div class="col-md-7 order-md-2">
+          <h2 class="featurette-heading">Previous computer science courses</h2>
+          <ul class="courses-list">
+            <li>CS1101 - Introduction to Program Design</li>
+            <li>CS2102 - Object-Oriented Design Concepts</li>
+            <li>CS2303 - System Programming Concepts</li>
+            <li>CS2011 - Machine Organization and Assembly Language</li>
+            <li>CS3013 - Operating Systems</li>
+            <li>CS3041 - Human Computer Interaction</li>
+            <li>CS3431 - Database Systems I</li>
+            <li>CS2223 - Algorithms</li>
+            <li>CS3733 - Software Engineering</li>
+            <li>CS3133 - Foundations of Computer Science</li>
+            <li>CS4120 - ANALYSIS OF ALGORITHMS</li>
+            <li class="course-focused">CS4241 - WEBWARE</li>
+          </ul>
+        </div>
+        <div class="col-md-5 order-md-1">
+            <img class="featurette-image img-fluid mx-auto" src="pic2.png" >
+
+        </div>
+      </div>
+
+      <hr class="featurette-divider">
+
+      <div id="block3" class="row featurette">
+        <div class="col-md-7">
+          <h2 class="featurette-heading">Experience with the following technologies and methods</h2>
+          <ul class="technologies-list">
+            <li>HTML - A lot</li>
+            <li>CSS - A lot</li>
+            <li>Javascript - A lot</li>
+            <li>VueJS - Some</li>
+            <li>Java - Some</li>
+            <li>Ruby - None</li>
+            <li>Python - Some</li>
+            <li>Unit Testing - Some</li>
+          </ul>
+        </div>
+        <div class="col-md-5">
+            <img class="featurette-image img-fluid mx-auto" src="pic3.png">
+        </div>
+      </div>
+
+      <hr class="featurette-divider">
+
+    </div>
+</body>
+</div>
+</main>
+
+
+<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
+  crossorigin="anonymous"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
+  crossorigin="anonymous"></script>
+<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
+  crossorigin="anonymous"></script>
+
+</html>
diff --git a/lh-4241-simple-node@0.1.0 b/lh-4241-simple-node@0.1.0
diff --git a/node b/node
diff --git a/pic1.jpeg b/pic1.jpeg
diff --git a/pic2.png b/pic2.png
diff --git a/pic3.png b/pic3.png
diff --git a/server.js b/server.js
@@ -13,6 +13,18 @@ var server = http.createServer (function (req, res) {
     case '/index.html':
       sendFile(res, 'index.html')
       break
+      case '/styles.css':
+      sendFile(res, 'styles.css')
+      break
+      case '/pic1.jpeg':
+      sendFile(res, 'pic1.jpeg')
+      break
+      case '/pic2.png':
+      sendFile(res, 'pic2.png')
+      break
+      case '/pic3.png':
+      sendFile(res, 'pic3.png')
+      break
     default:
       res.end('404 not found')
   }

diff --git a/styles.css b/styles.css
@@ -0,0 +1,43 @@
+
+.content{
+
+    padding: 30px
+
+
+}
+
+.my-heading{
+    color: black;
+    text-align: center;
+    padding: 100px 0px 0px 0px
+
+
+}
+
+.text-content{
+    color: black;
+    text-align: center;
+}
+
+.icons-group{
+    text-align: center;
+    padding: 0px 0px 100px 0px
+}
+
+/* .text-focused{
+
+}
+
+.courses-list{
+
+
+}
+
+.course-focused{
+
+}
+
+.technologies-list{
+
+} */
+