cs4241-21a · jfredo7 · Aug 25, 2022 · Aug 28, 2022 · Aug 28, 2022 · Aug 28, 2022
diff --git a/README.md b/README.md
@@ -94,7 +94,7 @@ http://a1-charlieroberts.glitch.me
 This project shows ...
 
 ## Technical Achievements
-- **Styled page with CSS**: Added rules for the p, li, and a selectors...
+- **Styled page with CSS**: I filled in the headers and paragraphs with information about myself and my interest.I styled the color, background, font, alignment, spacing, padding, and height of each of these categories. I added an animation that I named 'pulse' to the title and title background. I played around with some other HTML tags, including adding a url to my LinkedIn, a table of my interests, an image at the top of the page, and an unordered list of my programming experience. 
 
 ### Design Achievements
-- **Used the Roboto Font from Google Fonts**: I used Roboto as the font for the primary copy text in my site.
+- **Used the Open Sans and Lobster Fonts from Google Fonts**: I used Open Sans as the font for the primary copy text in my site, and Lobster for the title and headers. I also used color.adobe.com to generate a color pallet and used these colors in my design. I will add a screenshot of it to my repository.
diff --git a/Screen Shot 2022-08-28 at 6.34.18 PM.png b/Screen Shot 2022-08-28 at 6.34.18 PM.png
diff --git a/index.html b/index.html
@@ -2,27 +2,67 @@
 <html lang="en">
   <head>
     <title>CS4241 Assignment 1</title>
+    <link rel="stylesheet" href="styles.css">
     <meta charset="utf-8">
   </head>
   <body>
-    <h1>Information about [Your name here]</h1>
+    <h1>Information About Jack Fredo</h1>
+    <img src="https://www.linkedin.com/in/jack-fredo-866a691a8">
     <p>
-      [Self introduction]
+      Hi there, my name is Jack Fredo! 
+      Here is a link to my LinkedIn: 
     </p>
+    <a href="https://www.linkedin.com/in/jack-fredo/">Jack's Linkedin Profile</a>
     <p>
-      [Major and other information]
+      I am a Senior Data Science major at WPI. 
+      Some clubs and organizations that I am 
+      involved in on campus include
+      the Men's Club Ice Hockey Team, 
+      which I am the President of, and Theta Chi
+      Fraternity, which I am the Vice President of. Below is a table representing each of my personal hobbies, as well as how long I have been involved in each of them respectively.
     </p>
+    <table>
+      <tr>
+        <th>Hobby</th>
+        <th>Years</th>
+      </tr>
+      <tr>
+        <td>Hockey</td>
+        <td>16</td>
+      </tr>
+      <tr>
+        <td>Golf</td>
+        <td>10</td>
+      </tr>
+      <tr>
+        <td>Sailing</td>
+        <td>4</td>
+        <tr>
+          <td>Ukulele</td>
+          <td>2</td>
+        </tr>
+        <tr>
+          <td>Guitar</td>
+          <td>1</td>
+        </tr>
+      </tr>
+    </table>
     <p>
-      [Other things]
+      Some fun facts about myself; I live on Cape Cod,
+       MA, I am one of 4 children in my family, I 
+       have a twin brother who also attends WPI, is 
+       also on the Club Ice Hockey Team, and 
+      is also a brotgher in Theta Chi, and I have 2
+      cats at home.
     </p>
 
-    <h2>Experience</h2>
-    <p>
-      Working experience
-    </p>
+    <h2>Experience working with:</h2>
     <ul>
-      <li>IBM/Rational</li>
-      <li>WPI</li>
+      <li>Python</li>
+      <li>SQL</li>
+      <li>R</li>
+      <li>Java</li>
+     <li>Microsoft Excel</li>
     </ul>
   </body>
 </html>
diff --git a/server.js b/server.js
@@ -1,6 +1,6 @@
 const http = require('http'),
       fs   = require('fs'),
-      port = 3000
+      port = 300
 
 const server = http.createServer( function( request,response ) {
   switch( request.url ) {

diff --git a/styles.css b/styles.css
@@ -0,0 +1,101 @@
+@import url('https://fonts.googleapis.com/css?family=open+sans&display=swap');
+@import url('https://fonts.googleapis.com/css?family=lobster&display=swap');
+
+h1{
+    font-family: 'Lobster', sans-serif;
+    color: black;
+    background-color: #7BE2E3;
+    font-weight: 400;
+    line-height: 1.5;
+    letter-spacing: -.005em;
+    font-size: 50px;
+    padding: 20px;
+    animation: pulse 2s ease-in-out infinite;
+    text-align: center;
+}
+
+h2 {
+    font-family: "Lobster", sans-serif;
+    color: black;
+    background-color: #93B2FA;
+    font-weight: 400;
+    line-height: 1.5;
+    letter-spacing: -.003em;
+    font-size: 30px;
+    padding: 15px;
+    text-align: center;
+}
+
+body {
+    font-family: "Open Sans", sans-serif;
+    color: #823EE6;
+    background-color: #FB87E1;
+    font-weight: 400;
+    line-height: 1.5;
+    letter-spacing: -.005em;
+    font-size: 30px;
+    padding: 50px;
+    text-align: center;
+
+}
+
+p {
+    font-family: "Open Sans", sans-serif;
+    color: black;
+    background-color: #84FFA4;
+    font-size: large;
+    font-weight: 400;
+    line-height: 1.58;
+    letter-spacing: -.005em;
+    font-size: 20px;
+    padding: 40px;
+    text-align: center;
+}
+
+@keyframes pulse {
+    0%{
+        opacity: 1;
+        transform: scale(1);
+    }
+
+    50% {
+        opacity: 0.5;
+        transform: scale(1.1);
+    }
+
+    100% {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+ul {
+    color: black;
+    background-color: #84FFA4;
+    font-size: medium;
+    font-weight: 400;
+    line-height: 1.34;
+    letter-spacing: -.005em;
+    font-size: 20px;
+    padding: 30px;
+    text-align: center;
+}
+
+a {
+    color: white;
+    background-color: #823EE6;
+    font-size: large;
+    font-weight: 400;
+    line-height: 1.58;
+    letter-spacing: -.005em;
+    font-size: 20px;
+    padding: 10px;
+    text-align: center;
+}
+
+table {
+    font-family: "Open Sans", sans-serif;
+    color: white;
+    margin-left:auto;
+    margin-right:auto;
+}