History Lens

🚀 Inspiration

Inspired by the need to make history more accessible and engaging through innovative technology.

📖 What it does

History Lens allows users to explore historical topics through an interactive search feature, providing summarized content and links to full articles.

🛠️ How we built it

The project was built using:

  • HTML for structuring the content
  • CSS for styling and layout
  • JavaScript for interactive functionality
  • GSAP for advanced animations and transitions
  • APIs like the Wikipedia API for fetching historical information

⚙️ Challenges we ran into

Some challenges included handling API requests efficiently, ensuring a responsive design, and creating an engaging user interface.

🏆 Accomplishments that we're proud of

Successfully implemented a user-friendly interface that provides quick access to historical information and offers a seamless experience.

📚 What we learned

Gained experience in frontend development, API integration, GSAP for animations, and the importance of user experience in web applications.

🔮 What's next for History Lens

Future plans include expanding features, such as adding user accounts for personalized content and incorporating more interactive elements to enhance learning.

🚀 How to Run the Project

  1. Unzip the project folder to access all files.
  2. Open the index.html file in your browser to launch the application.

📂 Project Structure

  • index.html – Main HTML file for the landing page.
  • style.css – CSS file for landing page styling.
  • script/script.js – JavaScript file for landing page interactions, including GSAP animations.
  • media/ – Contains all images and videos used in the project.
  • fonts/ – Includes font files for styling text.
  • books/, history/, ar/ – Separate folders for additional features, each containing their own code.

Enjoy exploring history with History Lens!

Built With

Share this project:

Updates