The portfolio website has been updated, and this note explains the changes. The previous version of the website only contained notes. However, after the recent update, I decided to add a front page and a project page, and I updated the layout of the notes. In addition, I adjusted the responsiveness to better fit mobile users (not entirely satisfied with the outcome, but it works).
2023-03-28 17:14:27.029971+00
As mentioned, the previous version did not include a welcome page and only directed users to a list of posts. I developed a front page at the top to improve first impressions when users visit my site. The inspiration for the design was made from code editors and terminals, bearing a typing effect. It is replicated in React using useEffect and CSS transitions and keyframes. The useEffect part updates the displayed text every 150th millisecond using the JS setTimout() function and imitates the effect of someone typing letters. To improve the outcome, I added a blinking cursor using CSS keyframes, but since I have no experience with them, I took inspiration from this StackOverflow discussion.
In addition to creating a welcome page, I developed a project page using the SwiperJS library. It provides a cover flow effect with an infinite loop of my projects. In addition, it provides integrated features such as grabbing (useful for mobile) and slide-to-clicked-slide (this function is full of bugs on Firefox). One can also manually do the transitions using a helpful API, which allowed me to implement two buttons for sliding in each direction. The buttons also better indicate the possibility of sliding.
Lastly, I updated the previously simple notes page to a timeline. The code is inspired and refactored from this sandbox. The refactoring consisted of changing CSS to fit the website's theme by changing the color scheme and box layout.
