Our project is a dynamic and interactive website designed to cater to a diverse audience seeking inspiration, information, and engagement for free. The core components of our website include a Quotes page, a Sign-up form, a Home page, and an About Us section. Each element is meticulously crafted to provide a user-friendly experience and valuable content.
The Quotes page is a unique feature allowing users to engage with a wide array of quotes. It includes functionalities such as commenting, filtering, and categorizing, enabling users to interact and find quotes that resonate with their interests and needs.
The Sign-up form is designed for ease of use, encouraging users to join our community. It is a gateway for users to access more personalized content and engage more deeply with our platform, such as commenting on individual quotes and discussing with other users using the comment section.
The Home page serves as the welcoming point of our website, offering a snapshot of what we offer and guiding users to various sections according to their interests.
The About Us section delves into our mission, values, and story, offering a transparent view of who we are and what we aim to achieve.
The first thing users see when they open the Home page, is a world of void, only stars and 2 philosophers in deep thought, with the rapid movement of stars representing the long hours, indicates that the duo are immersed. A world of void represents the world from their perspective, unimportant, as they only care about what's in their mind. Quote of the day and Philosophers of the day is meant to introduce users to Philosophy. Theme is mostly white and black, signifying that everything in this world is meaningless (colorless), but it's humans that give meaning to it. Categories section are at the top of the page in Quotes page, so that users can easily filter when they first enter the page. This also makes it easy to locate the filter feature. Background images in About Us page showcases philosophers of the past, further reinforcing what our website is about.
Our website is designed for individuals seeking motivation, insight, and a community platform. The primary goal is to provide an enriching experience that is both informative and interactive, all for free.
As a motivational speaker, I want to find and comment on inspirational quotes, so that I can share them in my sessions. As a student, I want to filter quotes based on categories like 'Knowledge' or 'perseverance,' so that I can find relevant content for my academic journey. As a deep thinker, I want to ponder over quotes mentioned by great philosophers of the past. As a potential member, I want to easily sign up, so that I can access more personalized content and community features.
Wireframes and mockups were created to visualize the website layout. Adobe XD was used for designing and prototyping.
Quote Of The Day: Features famous quotes by philosophers that changes everyday. Philosopher of the Day: Features famous philosophers from the past, including a succinct description of them. Different philosophers are featured each day. Quote Interaction: Allows users to engage with quotes through comments. Dynamic Filtering: Enables users to filter quotes by categories. Multi filternig: Users can select multiple categories at once. Animations: Hovering over quotes in Quotes page enlarges it slightly, making it easier to read. Hovering over navigation bar texts changes its color and pointer (mouse), indicating the text can be clicked. Responsive Sign-Up Form: Simplifies the registration process for new users. Profile Picture: Users can select any image as profile picture when signing up, giving them a personal online presence in Philosophy Hub. Informative About Us Page: Shares our mission, values, and story.
User Profile Customization: To allow users to personalize their experience on the site even after signing up. Philosophers page: Includes categories, Philosopher cards and Comment section similar to Quotes page, specifically introducing philosophers of the past. Provides users more insights on the wise people in the past, such as their upbringing and life. Topics page: Includes categories, Topic cards and Comment section similar to Quotes page, goes in depth about topics such as Absurdism. Users can deepen their insights of specific philosophical concepts and the diverse perspectives. Search function: Users can look for specific Philosophers, Quotes or Topics in the respective pages, enabling users to look for what they want in an instant.
- Event Handling
- Local Storage
- DOM
- Input Form Validation
- Keyframes
Navigate to "Sign Up" page. Attempt to submit an empty form to check for required field validation. Submit with an invalid email and verify error messaging. Submit a valid form and confirm the success message.
The website was tested across multiple browsers and screen sizes to ensure compatibility and responsiveness.
Home page: Statues (image) resizes properly, size decreases when viewport width decreases to 768px and below.
Home page, About Us, Quotes page: Text decreases in size as viewport width decreases. Images and GIFs decreases proportionally in size as viewport width decreases.
Sign-up form pages: Container for form resizes accordingly when viewport width decreases beyond its default size.
Known Issues User Profile link is not working. CSS Style for comment section in Quotes page is not working.
Sea - https://evolutionary.men/wp-content/uploads/2021/02/AdobeStock_182295156.jpeg
Logo (Owl/Infinity) - https://www.vectorstock.com/royalty-free-vector/infinity-eye-owl-icon-symbol-vector-31859097
Navigation Bar/Menu (reference) - https://www.youtube.com/watch?v=PwWHL3RyQgk&pp=ygUPbmF2aWdhdGlvbiBtZW51
Thinking Statues - https://ecurwithblake.wordpress.com/2017/12/13/a-teaching-philosophy-or-lack-of-one/ https://www.theodysseyonline.com/11-things-learned-as-philosophy-major
clouds - https://giphy.com/search/dark-clouds
boat - https://cadbull.com/detail/112269/2D-Boat-Block-Design-in-DWG-file
ocean - https://www.pinterest.com/pin/707698528915010190/
rain - https://gifs.alphacoders.com/gifs/view/17878
our-mission-background - https://wallpapercave.com/philosophers-wallpapers
our-values-background - https://wallpapercave.com/philosophers-wallpapers
our-story-background - https://wallpapercave.com/philosophers-wallpapers
instagram icon - http://andersonmgt.com/instagram-icon/
tiktok icon - https://cannot-go-de-blog.blogspot.com/2021/02/38-hq-images-tiktok-app-logo-aesthetic.html
facebook icon - https://favpng.com/png_view/facebook-logo-facebook-logo-icon-png/Hm09ZW2H
aristotle - https://www.britannica.com/biography/Aristotle
albert camus - https://www.youtube.com/watch?v=R79d4OhwPjU
jean paul satre - https://www.quotenova.net/authors/jean-paul-sartre/q7pke3
abigail van buren - https://networthpost.org/net-worth/abigail-van-buren-net-worth/
albert schweitzer - https://factoriahistorica.wordpress.com/2014/03/20/albert-schweitzer-2/
allen saunders - https://www.goodreads.com/author/show/276029.Allen_Saunders
robert frost - http://faithfictionfriends.blogspot.com/2015/09/robert-frost-and-road-not-taken.html
socrates - https://lifenlesson.com/socrates/
ivern ball (no-image) - https://www.kindpng.com/imgv/TxibwmR_person-icon-grey-hd-png-download/
I received inspiration for this project from https://poets.org