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:
- go directly to the detial.html or from index.html...
- type "UX D" in the search box
- click on "UX Designer" in the dropdown list
- 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