Skip to content

Latest commit

 

History

History
35 lines (26 loc) · 3.08 KB

README.md

File metadata and controls

35 lines (26 loc) · 3.08 KB

Joseph Thesmar http://a1-jpthesmar.glitch.me

This project shows ...

Technical Achievements

  • Styled page with CSS: Added rules for the body, h1, h2, p, list styling, and drop down button with hover feature

    1. Body: color (background + text) and font management
    2. h1: color, alignment, and font management
    3. h2: color, alignment, and font management
    4. p: padding, alignment, color (background + text), and dimension settings
    5. list styling: targets any ul element with the skills-list class, got different styles applying for the different parts (formtat, colors, padding, margin etc)
    6. drop down: button + hover mechanics

    Challenges: Developing this file required careful consideration of color contrasts, font choices, and layout adjustments to create a visually appealing and user-friendly experience, on my part this section involved trial and error to achieve the desired outcome.

  • JavaScript Animation: I added two different animations, two because I was not sure what animation entitled in this context

    1. Header animation: Implemented a cool continuous bouncing animation to the headers, got the idea from the DVD bounce screensaver. Developed a simple algorithm that moves the header based on its current position, velocity, and distance from amplitude (top) and 0 (bottom)
    2. Dropdown: To add a more typical 'animation', I added a drop down button that changes direction based on whether the tab is open/toggled or hidden and shows text accordingly. Make Sure to click on it to see information about me!

    Challenges: It was hard to implement the header bounce animation with precise control over movement and direction, had to tweak the algorithm quite a bit to ensure smooth transitions. Additionally, handling the dropdown toggle functionality required careful consideration to manage the visibility state and update the button's appearance dynamically while concurrently managing the css styling. This part made me rely on lots of online documentation and tutorials to come up with a successful animation plan (plan with an s in this case)

  • HTML Tags:

    • link: css styling + google font integration
    • script: js script for button class functionality
    • div: had to create a div to encapsulate the dropdown infromation
    • button: drop down button
    • strong: added in a few paragraph and listing places to show importance of text, further customized it in css as well

    Challenges: Implementing these HTML tags was difficult due to the need to integrate CSS for styling, manage JavaScript interactions, and ensure proper structuring and functionality of the different components of the app

Design Achievements

  • Used the New Amsterdam Font from Google Fonts: I used New Amsterdam as the font for the header text in my site. Those include h1 and h2 respectively. Followed the guidelines and utilized the embed code provided by Google Fonts.

    Challenges: Had to follow the google font instructions to apply the font family to my program, it was certainly a new experience to me and I learned