cs4241-18a · J3r3my97 · Aug 27, 2018 · Aug 30, 2018 · Aug 30, 2018 · Aug 30, 2018
diff --git a/.idea/a1-gettingstarted.iml b/.idea/a1-gettingstarted.iml
diff --git a/.idea/misc.xml b/.idea/misc.xml
diff --git a/.idea/modules.xml b/.idea/modules.xml
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
diff --git a/4.jpg b/4.jpg
diff --git a/IMG_5771.jpg b/IMG_5771.jpg
diff --git a/IMG_5976.jpg b/IMG_5976.jpg
diff --git a/IMG_5983.jpg b/IMG_5983.jpg
diff --git a/IMG_6870.jpg b/IMG_6870.jpg
diff --git a/Me.jpg b/Me.jpg
diff --git a/README.md b/README.md
@@ -1,77 +1,17 @@
 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/). 
 
-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.)
+Jerry Assan
+https://a1-j3r3my97.herokuapp.com
 
-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.
+This project shows a bit of who i am. hope you enjoy.
 
-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 ...
-
-## Technical Achievements
-- **Proved P=NP**: Using a combination of...
-- **Solved AI**: ...
+### Technical Acheivements
+- ** modified server in order to load css and photos.
 
 ### Design Achievements
-- **Re-vamped Apple's Design Philosophy**: Shown in `style.css`, the code...
-
+- **adds W3 css to create parallel image effect.
+- **Implemented bootrap progress bar to show experience.
 
diff --git a/index.html b/index.html
@@ -1,27 +1,192 @@
-<html lang="en">
-  <head>
-    <title>CS4241 Assignment 1</title>
-    <meta charset="utf-8">
-  </head>
+<!DOCTYPE html>
+<html>
+<title>About Jerry Assan</title>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
+
+
+
+<style>
+
+    body,h1,h2,h3,h4,h5,h6 {font-family: "Lato", sans-serif;}
+    body, html {
+        height: 100%;
+        color: #777;
+        line-height: 1.8;
+    }
+    /* Create a Parallax Effect */
+    .bgimg-a ,.bgimg-b, .bgimg-c, .bgimg-d{
+        background-attachment: fixed;
+        background-position: center;
+        background-repeat: no-repeat;
+        background-size: cover;
+    }
+
+
+    .bgimg-a {
+        background-image: url("IMG_5771.jpg");
+        min-height: 400px;
+    }
+
+
+    .bgimg-b {
+        background-image: url("IMG_5976.jpg");
+        min-height: 400px;
+    }
+
+
+    .bgimg-c {
+        background-image: url("IMG_5983.jpg");
+        min-height: 400px;
+    }
+
+    .bgimg-d {
+        background-image: url("4.jpg");
+        min-height: 600px;
+    }
+
+
+
+
+
+</style>
   <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>
+
+  <div class="bgimg-d w3-display-container">
+      <div class="w3-display-middle w3-padding-large w3-border w3-wide w3-text-light-grey w3-center" >
+              <h1 class="w3-hide-medium w3-hide-small w3-xxxlarge">Jerry Assan</h1>
+              <h5 class="w3-hide-large" style="white-space:nowrap">Jerry Assan</h5>
+              <h3 class="w3-hide-medium w3-hide-small">About Me</h3>
+      </div>
+  </div>
+  <div class="container">
+      <div class="row">
+    <div class="col m-lg-5 text-right">
+        <h1>
+      WPI class of 2020
+        </h1>
+        <h5>
+      Major in CS, minor in DS
+        </h5>
+        <h6>
+      Fast learner, data driven and a team player
+        </h6>
+        <a href="https://github.com/J3r3my97">my git</a>
+        <br>
+        <a href="https://j3r3my97.github.io/Jerry.github.io">Design manifesto</a>
+    </div>
+          <div class="col m-xl-5">
+              <img src="Me.jpg" style="width:45%" class="w3-circle">
+          </div>
+      </div>
+  </div>
+  <div class="bgimg-a w3-display-container">
+      <div class="w3-display-middle" >
+          <span class="w3-xxlarge w3-text-white w3-wide">Experience</span>
+      </div>
+  </div>
+
+  <div>
+      <div class="album py-5 bg-light">
+          <div class="container">
+
+              <div class="row">
+                  <div class="col-md-4">
+                      <div class="card mb-4 box-shadow">
+                          <div class="card-body">
+                              <h4 class="card-title">Portfolio Management Intern</h4>
+                              <h6 class="card-subtitle mb-2 text-muted">summer 2017  |  Shanghai, China</h6>
+                              <p class="card-text p-md-5">Identify risks in various businesses. Research and analyze business data using Microsoft Excel.</p>
+                              <div class="d-flex justify-content-between align-items-center">
+                                  <div class="btn-group">
+                                      <a href="http://jupai.investorroom.com">Jupai Holdings,LLC</a>
+
+                                  </div>
+                              </div>
+                          </div>
+                      </div>
+                  </div>
+                  <div class="col-md-4">
+                      <div class="card mb-4 box-shadow">
+                          <div class="card-body">
+                              <h4 class="card-title">Web developper Intern</h4>
+                              <h6 class="card-subtitle mb-2 text-muted">summer 2018  |  Shanghai, China</h6>
+                              <p class="card-text p-md-5">Front-end design using java script , html and css. Implemented backend and server using Mysql and PHP. </p>
+                              <div class="d-flex justify-content-between align-items-center">
+                                  <div class="btn-group">
+                                      <a href="http://www.producemedia.com.cn">Produce Media System</a>
+
+                                  </div>
+                              </div>
+                          </div>
+                      </div>
+                  </div>
+                  <div class="col-md-4">
+                      <div class="card mb-4 box-shadow">
+                          <div class="card-body">
+                              <h4 class="card-title">Front-end developer</h4>
+                              <h6 class="card-subtitle mb-2 text-muted">summer 2018  |  Individual project </h6>
+                              <p class="card-text p-md-5">Made a portfolio website for a photographer. Focused mostly on vividly presenting the work of the artist.</p>
+                              <div class="d-flex justify-content-between align-items-center">
+                                  <div class="btn-group">
+                                      <a href="https://j3r3my97.github.io/MaxWeb/index.html">Photographer portfolio</a>
+
+                                  </div>
+                              </div>
+                          </div>
+                      </div>
+                  </div>
+              </div>
+
+  </div>
+
+  <div class="bgimg-b w3-display-container">
+      <div class="w3-display-middle" >
+          <span class="w3-xxlarge w3-text-white w3-wide">SKills and Tools</span>
+      </div>
+  </div>
+<div class="w3-center container w3-padding-64">
+    <p>Microsoft Office</p>
+    <div class="progress">
+        <div class="progress-bar bg-secondary" style="width:70%">70%</div>
+    </div>
+    <p>Java</p>
+    <div class="progress border">
+        <div class="progress-bar bg-secondary" style="width:60%">60%</div>
+    </div>
+    <p>Web developmentt</p>
+    <div class="progress border">
+        <div class="progress-bar bg-secondary" style="width:80%">80%</div>
+    </div>
+    <p>Python</p>
+    <div class="progress border">
+        <div class="progress-bar bg-secondary" style="width:75%">75%</div>
+    </div>
+    <p>R sturdio</p>
+    <div class="progress border">
+        <div class="progress-bar bg-secondary" style="width:65%">65%</div>
+    </div>
+
+</div>
+  <div class="bgimg-c w3-display-container">
+      <div class="w3-display-middle" >
+          <span class="w3-xxlarge w3-text-white w3-wide">Contact</span>
+      </div>
+  </div>
+          <div class="w3-padding-64 w3-content w3-text-grey" id="contact">
+              <h2 class="w3-text-dark">Contact Me</h2>
+              <hr style="width:200px" class="w3-opacity">
+
+              <div class="w3-section">
+                  <p><i class="fa fa-map-marker fa-fw w3-xxlarge w3-margin-right" style="color:black"></i> Worcester, US</p>
+                  <p><i class="fa fa-phone fa-fw  w3-xxlarge w3-margin-right"></i> Phone: 7743123467</p>
+                  <p><i class="fa fa-envelope fa-fw  w3-xxlarge w3-margin-right"> </i> Email: jxassan@wpi.edu</p>
+              </div><br>
+
+              <!-- End Contact Section -->
+          </div>
   </body>
 </html>
diff --git a/server.js b/server.js
@@ -13,6 +13,21 @@ var server = http.createServer (function (req, res) {
     case '/index.html':
       sendFile(res, 'index.html')
       break
+    case '/IMG_5771.jpg':
+      sendFile(res, 'IMG_5771.jpg')
+      break
+    case '/IMG_5976.jpg':
+    sendFile(res, 'IMG_5976.jpg')
+      break
+    case '/IMG_5983.jpg':
+    sendFile(res, 'IMG_5983.jpg')
+      break
+    case '/Me.jpg':
+    sendFile(res, 'Me.jpg')
+      break
+    case '/4.jpg':
+    sendFile(res, '4.jpg')
+      break
     default:
       res.end('404 not found')
   }