A1 Submission

README.md

@@ -1,77 +1,20 @@
 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/). 
+Peter Maida  
+http://a1-petermaidarobot.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 the deployment of a simple website using the Heroku web platform (http://www.heroku.com). It is intended as a chance to get up to speed on Git, GitHub, and Heroku. The website itself is an generic page that has information about me.
 
 ## Technical Achievements
-- **Proved P=NP**: Using a combination of...
-- **Solved AI**: ...
+- **Links**: The course descriptions have been linked to the listed courses under the experience section of the website. What I have learned when adding the links and changing the colors of the link, visited, hover, active states is that the ordering of states in the css matters, as one may override the other. The rules for ordering states is that hover must come after link and visited, and that active must come after hover. There are areas where these states overlap, and that is why the importance of each state matters. The source of this can be found at https://www.w3schools.com/css/css_link.asp
+- **Classes**: By following a walkthrough on Youtube I was able to create classes for different sections of the HTML. By creating these classes, it is much easier to edit variables in an alternative CSS file, which extracts presentation features from the HTML allowing it to focus on semantics. https://www.youtube.com/watch?v=DNiGz7Zxk2Y
 
 ### Design Achievements
-- **Re-vamped Apple's Design Philosophy**: Shown in `style.css`, the code...
-
-
+- **Color**: Some research on colors has shown that people tend to like a lighter background with darker text to read. Research has also shown that three color palettes have a good reaction. I changed the color to a light blue with a gray/black screen to give a trustworthy/office emotion.
+https://www.websitebuilderexpert.com/designing-websites/how-to-choose-color-for-your-website/
+https://neilpatel.com/blog/website-color-scheme/
+https://www.w3schools.com/colors/colors_psychology.asp
+- **Font**: I have looked into some different styles of fonts to use for the website and decided to go with one that was more respectable and traditional.
+https://www.crazyegg.com/blog/psychology-of-fonts-infographic/
+https://websitesetup.org/web-safe-fonts-html-css/

index.html

@@ -2,26 +2,57 @@
   <head>
     <title>CS4241 Assignment 1</title>
     <meta charset="utf-8">
+    <link rel="stylesheet" type="text/css" href="style.css">
   </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>
+      <div class="page">
+          <div class="overview">
+              <h1>Peter Maida</h1>
+              <h2>WPI Class of 2020</h2>
+              <h2>Computer Science</h2>
+              <img src="headshot.jpg" type="image" alt="Profile Picture">
+          </div>
+
+           <div class="tab">
+               <a href="#about-me"><h3>About Me</h3></a>
+               <a href="#course-experience"><h3>Course Experience</h3></a>
+               <a href="#webdev-experience"><h3>Webdev Experience</h3></a>
+           </div>
+
+           <div class="info" id="about-me">
+               <p>
+                   In my free time I enjoy playing videogames, hanging out with friends, and going to the gym.
+               </p>
+           </div>
+
+           <div class="info" id="course-experience">
+               <h4>Here is a list of applicable courses I have taken, click on them for more information</h4>
+               <ul>
+                 <li><a href="https://www.wpi.edu/academics/calendar-courses/course-descriptions/computer-science#cs_3733">CS3733 - Software Engineering</a></li>
+                 <li><a href="https://www.wpi.edu/academics/calendar-courses/course-descriptions/computer-science#cs_3516">CS3516 - Computer Networks</a></li>
+                 <li><a href="https://www.wpi.edu/academics/calendar-courses/course-descriptions/computer-science#cs_3013">CS3013 - Operating Systems</a></li>
+                 <li><a href="https://www.wpi.edu/academics/calendar-courses/course-descriptions/computer-science#cs_3133">CS3133 - Foundations of Computer Science</a></li>
+                 <li><a href="https://www.wpi.edu/academics/calendar-courses/course-descriptions/computer-science#cs_3043">CS3043 - Social Implications</a></li>
+                 <li><a href="https://www.wpi.edu/academics/calendar-courses/course-descriptions/computer-science#cs_2223">CS2223 - Algorithms</a></li>
+                 <li><a href="https://www.wpi.edu/academics/calendar-courses/course-descriptions/computer-science#cs_2303">CS2303 - Systems Programming Concepts</a></li>
+               </ul>
+           </div>
+
+           <div class="info" id="webdev-experience">
+               <h4>Welcome to my first website! Here is my programming experience:</h4>
+               <ul>
+                 <li>HTML - none</li>
+                 <li>CSS - some</li>
+                 <li>Java - a lot</li>
+                 <li>JavaScript - none</li>
+                 <li>Ruby - none</li>
+                 <li>Python - a lot</li>
+                 <li>unit testing - some</li>
+               </ul>
+           </div>
+
+       </div>
+
   </body>
 </html>

server.js

@@ -13,6 +13,12 @@ var server = http.createServer (function (req, res) {
     case '/index.html':
       sendFile(res, 'index.html')
       break
+    case '/headshot.jpg':
+      sendFile(res, 'headshot.jpg')
+      break
+    case '/style.css':
+        sendFile(res, 'style.css')
+        break
     default:
       res.end('404 not found')
   }

style.css

@@ -0,0 +1,84 @@
+h1, h2, p, ul {
+    color: #262626;
+}
+
+ul {
+    display: table;
+    margin: 0 auto;
+    text-align: left;
+    list-style-type: none
+}
+
+a:link {
+    color: #404040
+}
+
+a:visited {
+    color: #262626;
+}
+
+a:hover {
+    color: #707070
+}
+
+a:active {
+    color: #262626
+}
+
+a {
+    text-decoration: none;
+}
+
+
+* {
+    margin: 0;
+    padding: 0;
+    font-family: "Trajan";
+}
+
+.page, body {
+    background-color: cceeff;
+    text-align: center;
+}
+
+.overview {
+    margin: 20px;
+}
+
+.overview h1 {
+    font-size: 28px;
+}
+
+.overview h2 {
+    font-size: 16px;
+}
+
+.overview img {
+    height: 300;
+    object-fit: contain;
+    margin: 10px;
+    border-radius: 10%;
+}
+
+.tab h3 {
+    margin-left: 10px;
+    margin-right: 10px;
+    margin-bottom: 10px;
+    padding-bottom: 5px;
+    border-bottom: 2px solid #000000;
+    display: inline-block;
+}
+
+.info {
+    height: 0px;
+    overflow: hidden;
+}
+
+.info:target {
+    height: auto;
+}
+
+.info h4 {
+    color: #404040;
+    margin-bottom: 10px;
+}