Source: https://projects.juanmanuelarmas.com/html/history-timeline/
The goal of this project was to research and create a horizontal scrolling website with a unique reading progress bar. The idea was inspired by a video tutorial on Youtube and the latest trends in web design. The project was initially planned to be completed in a few hours but turned into a multi-day effort. The purpose of this project was to add it to the portfolio to showcase the author’s skills and potential.
The project started with the creation of images in Photoshop following a tutorial. The design was then created in XD, which provided a more comprehensive view of the images and text in different sizes and positions. Initially, the author decided not to use the Sass framework or Bootstrap, but later changed their approach due to complications. The final design was much simpler and made using the Sass framework and the grid system.
• Horizontal scrolling website
• Unique reading progress bar as a historical timeline
• Design created using Photoshop and XD
• Use of Sass framework and the grid system
• Responsive design
• HTML
• CSS
• Sass framework
• Photoshop
• XD
The biggest challenge faced during the project was making the design responsive. I encountered problems with the viewport and the background, which caused the images to be cut off on smaller screens. After experimenting with different approaches, I found that using a grid system was more effective in terms of responsiveness and created a new file to implement the solution.
The author learned several key lessons, including the importance of using the Sass framework, the advantages of using a grid system, the value of challenging projects in terms of skill-building, and the benefits of using educational resources over customers to focus on upgrading skills without limitations.