a1-thomas-schweich submission

README.md

@@ -1,77 +1,13 @@
-Assignment 1 - Hello World: Basic Deployment w/ Git, GitHub, Heroku  
-===
+Thomas Schweich  
+https://a1-thomas-schweich.herokuapp.com/
 
-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/). 
+This project shows a mobile-first, simple business-card-like personal website. The site is single page, but functionally
+provides two pages - one with an image of myself and a bit of basic information, the other with more detailed experience information.
 
-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 ...
-
-## Technical Achievements
-- **Proved P=NP**: Using a combination of...
-- **Solved AI**: ...
+### Technical Achievements
+- **Javascript Content Switching**: The contents of one page are dynamically hidden as the other is revealed using Javascript. An animation makes the switch smooth and showey for the audience. 
 
 ### Design Achievements
-- **Re-vamped Apple's Design Philosophy**: Shown in `style.css`, the code...
-
+- **Mobile-first Responsive Design and Style**: Materialize CSS was utilized to allow the page to both look clean and respond well to changes in screen size.
+- **Creative Page Arrangement**: Rather than having only one page, a single page is served, but content is divided, providing the initial aesthetic of a business card.
 

index.html

@@ -1,27 +1,120 @@
 <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>
+
+<head>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
+    crossorigin="anonymous"></script>
+  <title>CS4241 Assignment 1</title>
+  <meta charset="utf-8">
+</head>
+
+<body>
+  <div class="container">
+    <div class="row">
+      <div class="col s3"></div>
+      <div class="col s6">
+        <nav class="nav-extended blue">
+          <div class="nav-wrapper">
+            <a href="#" class="brand-logo center">Thomas Schweich</a>
+          </div>
+          <div class="nav-content center">
+            <ul class="tabs tabs-transparent center">
+              <li class="tab"><a href="#home">Home</a></li>
+              <li class="tab"><a href="#about">About</a></li>
+            </ul>
+          </div>
+        </nav>
+      </div>
+      <div class="col s3"></div>
+    </div>
+  </div>
+  <div id="home" class="container">
+    <div class="row">
+      <div class="col s3"></div>
+      <div class="col s6 center">
+        <div class="card">
+          <div class="card-image">
+            <img src="https://media.licdn.com/dms/image/C5603AQGWe7q420LK6w/profile-displayphoto-shrink_200_200/0?e=1541030400&v=beta&t=sjnAS8sERDX34zsDz6LPfY8nUFbhRuz0ojTLHt3csRM">
+            <span class="card-title">Thomas Schweich</span>
+          </div>
+          <div class="card-content">
+            <p>
+              I am a Junior at Worcester Polytechnic Institute with a passion for history and the progress of technology over time.
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="col s3"></div>
+    </div>
+  </div>
+  <div id="about" class="container" hidden>
+    <div class="row">
+      <div class="col s2"></div>
+      <div class="col s8 center">
+        <p>
+          I am a Computer Science major with a Physics minor.
+        </p>
+
+        <div class="card">
+          <div class="card-title">
+            <h3><i class="material-icons">school</i> Computer Science Classes</h3>
+          </div>
+          <div class="card-content">
+            <ul class="collection">
+              <li class="collection-item">Accellerated Introduction to Program Design</li>
+              <li class="collection-item">Accelerated Introduction to Object Oriented Design</li>
+              <li class="collection-item">Independent study: Context-aware Event Stream Analysis</li>
+              <li class="collection-item">Discrete Mathematics</li>
+              <li class="collection-item">Systems Programming</li>
+              <li class="collection-item">Foundations of Computer Science</li>
+              <li class="collection-item">Introduction to Machine Organization &amp; Assembly Language</li>
+              <li class="collection-item">Human-Computer Interaction</li>
+            </ul>
+          </div>
+        </div>
+        <div class="card">
+          <div class="card-title">
+            <h3><i class="material-icons">work</i> Computer Science Work Experience</h3>
+          </div>
+          <div class="card-content">
+            <ul class="collection">
+              <li class="collection-item">Computer Emulation &amp; Restoration Intern, Living Computers Museums + Labs</li>
+              <li class="collection-item">Lab &amp; Data Analysis Intern, Washington University Gravitation &amp; Earth Exploration
+                Lab
+              </li>
+            </ul>
+          </div>
+        </div>
+        <p>
+
+        </p>
+
+      </div>
+      <div class="col s2"></div>
+    </div>
+  </div>
+</body>
+
 </html>
+
+<script type="text/javascript">
+  var hideall = function () {
+    $('#about').hide()
+    $('#home').hide()
+  }
+
+  $(document).ready(function () {
+    $('a[href="#home"]').click(function () {
+      hideall()
+      $('#home').show({ duration: 1000 })
+    })
+    $('a[href="#about"]').click(function () {
+      hideall()
+      $('#about').show({ duration: 1000 }).done(function () {
+
+      })
+    })
+    $('.collapsible').collapsible();
+  })
+</script>

server.js

@@ -13,6 +13,10 @@ var server = http.createServer (function (req, res) {
     case '/index.html':
       sendFile(res, 'index.html')
       break
+    case '/kitten.jpg':
+      res.writeHead(200, {'Content-Type': 'image/jpg'})
+      sendFile(res, 'kitten.jpg')
+      break
     default:
       res.end('404 not found')
   }