- 6th project of OpenClassrooms's React / JS Developper Path
- Made with πin HTML / CSS / Vanilla JS only !
- The goal here was to create a non-responsive website for photographers to showcase their work, including a form to contact them, a lightbox to show in closeup view all medias, a filter section to order medias by title, date and popularity, and a "likes" counter.
- This website is accessible to all users, following the WCAG guidelines.
- This project was made with factory design pattern, and the code is organized in modules.
- The website is composed of 2 pages : the homepage and the photographer's page.
- Mockups available here : Figma
- Homepage
- Header
- Logo
- Navigation
- Main
- Photographers list
- Header
- Photographer's page
- Header
- Logo
- Navigation
- Main
- Photographer's profile
- Media list
- Lightbox
- Contact form
- Footer
- Social media links
- Legal notice
- Header
- Lightbox
- Close button
- Previous and next buttons
- Media title
- Media description
- Media date
- Media likes
- Contact form
- Name input
- Email input
- Message textarea
- Submit button
- Filter section
- Order by
- Popularity
- Date
- Title
- Order by
- Likes counter
- Like button
- Likes count
Before you begin, ensure you have met the following requirements:
- You have a modern web browser such as Chrome, Firefox, or Safari.
- You have Visual Studio Code (VS Code) installed.
- You have the "Live Server" extension installed in VS Code for local development.
To install "Fisheye", follow these steps:
-
Clone the repository to your local machine:
git clone https://github.com/beseb/Front-End-Fisheye.git
-
Open the project in Visual Studio Code:
code Fisheye
-
Right-click on the
index.html
file and select "Open with Live Server" to view the project in your default web browser.
Your feedback is welcome! If you have any suggestions or issues, please open an issue through GitHub or contact us directly.
Enjoy exploring and contributing to "Fisheye"! π