Assignment 1 - Hello World: Basic Deployment w/ Git, GitHub, Glitch

Matthew McAlarney

https://a1-maccode7110.glitch.me

This assignment shows information about me as it pertains to WPI. The webpage displays my name, major, list of completed courses, technology experience and work experience. In additon, the webpage also includes a basic animation of a dot moving down a container.

Technical Achievements

• Styled page with CSS: Added rules for the body, h1, h2, p, and ul selectors. For these five rules, I applied a combination of background-color, font-family, and color properties to the webpage. I also added #container and #animateDot selectors for the extra animation. In these two CSS #id selectors, width, height, position, and background-color properties are used to style the container and dot. The dot is also defined using the border-radius property and further formatted using the display property.
• Added a JavaScript animation: At the bottom of the webpage, on the click of the "Move Dot Down" button, a simple animation occurs where the purple dot moves straight down the left side of the orange container. I referenced the following resources to learn how to create a dot and a simple animation:
  1. https://www.w3schools.com/js/tryit.asp?filename=tryjs_dom_animate_3
  2. https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_circles
• Experimented with the button HTML tag: To start the animation described above, the "Move Dot Down" button must be clicked.

Design Achievements

• Created a color palette and used all colors in the webpage: Shown in the AdobeColorPaletteTriadRule.jpg image in this repository, I created a color palette on color.adobe.com and used all five colors in my webpage. To generate the palette, I selected a Triad rule and adjusted the RGB scales. Color #592302 (A) is used to style the h1 tags, #C6FFBD (B) is used to style the body tag, #FF731F (C) is used to style the color of the container, #1505FA (D) is used to style the p tags, and #5C52F3 (E) is used to style the color of the dot.
• Used Roboto Font from Google Fonts: To style the h1 HTML tag displaying the text "Information about Matthew McAlarney", I used the Roboto Font from Google Fonts. I accomplished this by linking to the Google Fonts stylesheet where Roboto is listed and then setting the style of the h1 tag in index.html to "font-family: Roboto;".