# website-with-custom-carousel

First website I ever built (my third and final career change). I started from HTML and CSS templates which I ended up reworte 90% of them. 

The home page is simple (took me a while for my first build; ensuring the right styling, position, and feature is time consuming; great learning experience).  The search box is not fully functioning.  It acts more like a dropdown for now.

The detail page has the dynamic carousel that I built.  The number of cards in the carousel can be changed by the updating the teamData.  The width of it will change with the size of the window and the left/right arrows will appear when the carousel can slide in the corresponding direction.

HOW TO get to the webpage with custom carousel:
1) go directly to the detial.html
or from index.html...
1) type "UX D" in the search box
2) click on "UX Designer" in the dropdown list
3) my custom carousel is right below the header

NEXT STEPS:
+ separate carousel section from main.js and create a carousel.js. (done)
+ complete initial career path map (done)
+ get rid of repeated titles in the search list (done)
+ add "x" in the search box (done)
+ limiting the search list result to the bottom of the window and add scroll bar (done)
+ refine career path map so left side dot show up (done; restructured to use 3 columns instead of 2)
+ word wrap the titles in the path map (low)
+ figure out how svg works and change its color other than black (done)
+ refract HTML so all "li" tags are JS driven instead of hard code (done)
+ data list in a separate file; source Search list from the smae source instead of creating a different list (done)
+ revisit search box code and css so it can be more of a component (in progress 70%)
+ convert all to React.js to componentize
  
Thanks for visiting.

Technology:

Plain Javascript, HTML, CSS
