My portfolio website

• About
• Skills
• Projects
• Testimonials
• Contact

• Custom Logo & Icon
• Mouse Hover Event
• Image Switch
• Heroku & Domain

• 2020/12/28 : Switch images according to the window size using HTML, CSS, JavaScript

• 2020/12/30 : Responsive Design for all devices

  1. Set parents' width to 100% and set child's smaller than that
  2. Set margin: auto.

• 2020/12/30 : Heroku Application Error

  1. H10: port issue
     const port = process.env.PORT || 3000;
  2. H20: use boot timeout tool to increase the boot time
     changed the boot time to 150 seconds

• 2020/12/31 : Switch icons on mouse hover in CSS

  1. Before : CSS => too slow
     .class img:hover { content: url(''); };

  2. After : HTML => solved
     <img src="" onmouseover="this.src=''" onmouseout="this.src=''">

• 2021/01/08 : CSS for image slides

• 2021/01/22 : CSS for auto navigation

• 2021/01/23 : CSS(max-width for about container)

• 2021/01/28 : CSS(space on the right side on mobile)

  1. Comment out div one by one and check which div is the problem
  2. Check if any div is set to the width that is bigger than its parents(or the mobile width)

• 2021/02/03 : JS + CSS(show nav menu when toggle is clicked)

  1. set onClick=showHideMenu() to the toggle to run the function when the toggle is clicked

  2. create function showHideMenu(){} and show nav menu if it's hidden

     if (~.style.display === "none") {
     ~.style.display = "flex";
     }

• 2021/02/04 : JS + CSS(transform nav menu when scrolling down)

  1. window.scrollY;

  2. const navbarHeight = navbar.getBoundingClientRect().height;

     document.addEventListener('scroll', () => {
       if (navbarMenu.style.display !== "none" && window.scrollY > navbarHeight) {
       navbarMenu.classList.add('transform');
       } else {
       navbarMenu.classList.remove('transform');
       }
     });
     

• 2021/02/04 : JS + CSS(scroll down when the nav menu is clicked)

  1. add data-link="#each section's id" to navbarMenuItems

  2. add addEventListener to navbarMenu

  3. now when the event happens(the navbarMenu is clicked), its event.target(navbarMenuItem) saves its data-link values to event.target.dataset.link

  4. thus, we can check if the navbarMenuItem is clicked by checking the link

  5. if the navbarMenuItem is clicked, it will have each section's id as their data-link

  6. when the navbarMenuItem is clicked, call the scrollIntoView on the link to scroll down to each section

       navbarMenu.addEventListener('click', (event) => {
         const target = event.target;
         const link = target.dataset.link;
     
         if (link == null) {
         return;
         }
         const scrollTo = document. querySelector(link);
         scrollTo.scrollIntoView();
       });
     

• 2021/02/04 : CSS(nav menu has to be on top always)
  => z-index: 1

• heroku pre-receive hook declined error after installing React

  1. delete cache
     heroku config:set NODE_MODULES_CACHE=false

  2. check if versions of node / npm match engines in node_modules
     => node -v
     => npm -v
     => "engines": { "node": "v14.6.0", "npm": "6.14.7" },

  3. set ~ to true

  • 2021/02/12 : animation performance issue