Instagram Photo Feed 📸

Welcome to the Instagram Photo Feed project! This is a responsive web application built with Bootstrap, mimicking a simplified version of Instagram's photo feed interface. It showcases a grid and post view for images, a navigation bar, and a modal for creating new posts. Perfect for demonstrating front-end development skills! 🚀

Table of Contents

• Features
• Technologies Used
• Setup
• Usage
• Screenshots
• Contributing
• License

Features

• Responsive Navigation Bar: Includes a branded logo, a button to create new posts, and a dropdown menu for user settings. 🧭
• Modal for Post Creation: A modal window to input captions and add media or location tags.
• Toggleable Views: Switch between a grid view (image tiles) and a post view (detailed card view).
• Responsive Design: Built with Bootstrap to ensure compatibility across devices. 📱💻
• Interactive Elements: Uses Font Awesome icons for a polished look.

Technologies Used

• HTML5: For the structure of the web page.
• Bootstrap 5.2.1: For responsive layout and pre-styled components.
• Font Awesome 7.0.0: For icons used in navigation and buttons.
• JavaScript: For Bootstrap's interactive components (modals, dropdowns, tabs).
• CSS: Minimal custom styles to enhance Bootstrap's defaults.

Setup

1. Clone the Repository:

   git clone https://github.com/your-username/instagram-photo-feed.git

2. Navigate to the Project Directory:

   cd instagram-photo-feed

3. Open the Project:

   • Open index.html in a web browser to view the application.
   • No additional dependencies or build steps are required, as all resources are loaded via CDNs.

Usage

• Navigation: Use the navbar to access the "Create a new post" button or user settings via the dropdown menu.
• Create a Post: Click the "Create a new post" button to open a modal where you can add a caption and simulate adding media or a location.
• View Posts:
  • Grid View: Displays a collection of images in a responsive grid.
  • Post View: Shows a detailed card with an image, caption, likes, and date.
• Toggle Views: Use the tabs above the main content to switch between grid and post views.

Screen Capture

Contributing

Contributions are welcome! 🌟 If you'd like to enhance this project, please:

1. Fork the repository.
2. Create a new branch (git checkout -b feature/your-feature).
3. Make your changes and commit (git commit -m 'Add your feature').
4. Push to the branch (git push origin feature/your-feature).
5. Open a pull request.

👋 About the Author

Hi! I’m Phillip Cantu, an American digital nomad, a Full Sail University web development student, and a 4Geeks Academy Full Stack Development with AI Bootcamp. I’m passionate about creating modern, user-friendly, and practical applications that help people learn and build faster.

You can find me here:

• GitHub: hereisphil
• LinkedIn: PhillipCantu
• Instagram: @philtheotaku