The project is a scrollytelling website that tells the story of a man who is struggling with high energy bills and is searching for ways to reduce them.
The website is based on the United Nations' Sustainable Development Goal 7, which is to ensure access to affordable, reliable, sustainable, and modern energy for all.
The website presents information about this goal and provides various solutions that can help the man and others like him reduce their energy bills while also promoting clean and sustainable energy sources.
Through an engaging and interactive storytelling format, the project aims to raise awareness about the importance of clean and affordable energy and inspire people to take action towards achieving this goal.
This project raises awareness about the United Nations Sustainable Development Goal 7. By highlighting the importance of this goal, the project helps to promote a greater understanding of the need for clean and sustainable energy sources.
This scrollytelling provides an engaging and interactive way to educate people about the importance of reducing energy bills and adopting more sustainable energy practices. Through the story of a man who is struggling with high energy bills, the website provides relatable examples of the challenges faced by individuals and families who are trying to reduce their energy usage and expenses.
We also offer practical solutions that individuals can implement to reduce their energy bills and promote clean and sustainable energy practices. By providing clear and actionable advice, the website empowers individuals to take meaningful action towards achieving Sustainable Development Goal 7.
Overall, the project is a tool for promoting awareness and inspiring action towards achieving affordable and clean energy for all.
To work with the project, the developer can get access to it though assignment-3--scrollytelling-group_2 (Public) repository at the GitHub and make a fork of the repository. Then developer needs to clone the fork repository to his own laptop to work on it. Changes can be made into a pull request; project developers can then merge this pull request into the original project repository.
New scrollable sections can be added as section elements within the main scroll-container div element. Future extensions of the story may include further sections about how the character John installs his solar panels and the resulting confidence and satisfaction he gains about living sustainably as he sees his solar panels contributing renewable energy over time.
The text-highlighting animations are created with IntersectionObservers on text sections with the para__span class. To add a highlight animation to emphasized statements in any new sections, just encapsulate the highlight text in a span with the para__span class and observe the element with the observerSceneOne observer. The observer handler code will add the text-highlighting animation once the text is scrolled to.
Issues can be opened in the project's Github repository's Issues; project maintainers will respond to issues and work to resolve bugs and feature requests.
For a reader or user of the website, it is enough to simply open the link to the website and study the topic.
We understand that using a new project can sometimes be overwhelming, which is why we offer several resources to help you navigate and troubleshoot any issues you may encounter.
First and foremost, our comprehensive documentation provides step-by-step instructions on how to use our project to prevent any misunderstanding. We've designed our documentation to be easily accessible and well-organized, so you can quickly find the information you need.
If you need further assistance, we offer email support where you can contact us directly with any questions or concerns. We are dedicated to provide prompt and helpful solutions to any issues you may be experiencing.
Just like our previous assignment, we utilized a range of technologies to deliver a seamless user experience. One of the core technologies we used is HTML, which provided the foundation for the markup and structure of the web page. With HTML, we structured and organized the content in a logical and intuitive manner, resulting in an easy-to-use interface for the users.
In addition to HTML, we made extensive use of SCSS, a powerful preprocessor for CSS that allowed us to write more efficient and organized code. SCSS extended the functionality of CSS, enabling us to write complex styles and maintain consistency across the entire web page. By leveraging SCSS, we wrote cleaner, more modular code that was easier to read, maintain, and update. We also implemented the separation of concerns principle, which involved separating the CSS into reusable and manageable components. This allowed us to have a more scalable and maintainable codebase.
We also used the Intersection Observer API to enhance the user experience. This API allowed us to track when certain elements on the page entered or left the viewport of the user's browser, enabling us to trigger animations. With this API, we could create a more engaging and dynamic user experience. We were able to animate elements such as images and texts – making the web page feel more responsive and interactive. Also, we could make the laptop screen could go from static to sticky positioning to simulate the character reading the article from his point of view.
To streamline our development process, we implemented BEM (Block, Element, Modifier), a naming convention that made CSS classes more descriptive and easier to understand. BEM provided us with a clear and consistent way of naming and organizing CSS classes, which made it easier to create and manage complex styles across the entire web page.
Furthermore, we utilized Live Sass Compiler, an extension that compiled our SCSS code into CSS in real-time. With this tool, we were able to make changes to our SCSS code and instantly see the results without the need for manual compilation. By leveraging Live Sass Compiler, we were able to work more efficiently and productively.
By combining the power of these technologies, we delivered a well-structured, maintainable, and highly functional web page that provided users with a seamless and intuitive experience. Our use of HTML, SCSS with separation of concerns, Intersection Observer API, BEM, and Live Sass Compiler enabled us to work efficiently and effectively to deliver a high-quality product that met the needs of our users.
Our project is being developed by a collaborative team of three individuals: Edgar, Christopher, and Snizhana. We are collectively responsible for maintaining and contributing to the project, and we believe that effective communication and responsibilities are essential to its success.
To ensure that we maintain a cohesive and coordinated approach to our work, we hold regular team meetings to review progress and discuss any issues that arise. These meetings serve as an opportunity to brainstorm new ideas, collaborate on features or enhancements, and ensure that our work is aligned with the project's goals and objectives.
As a team, we are committed to leveraging our individual strengths and areas of expertise to deliver a high-quality product that meets the needs of our user/users. By establishing clear roles and responsibilities and maintaining open lines of communication, we believe that we can work together effectively to ensure the success of our project. We are confident that our team's dedication and collaborative efforts will lead to a successful outcome.