🏗️Project Structure

Understanding the project structure will help you navigate and customize the Morena Photography template efficiently. Here's a breakdown of the main folders and files:

Root Folder: Template_Wedding_Photography

This is the main directory that contains all the files necessary for your Morena Photography template. Inside this folder, you will find:

• .env: This file contains environment variables and configuration settings for form configuration. You need to customize this file to match your server setup and preferences.

• public Folder: This is where all the core files and folders of the template are located. Here's what you'll find inside:

  • fonts/: This folder contains all the font files used in the template. If you want to add or change fonts, you can place the new font files here.

  • img/: This folder stores all the images used across the template. This includes images for the gallery, backgrounds, icons, and any other visual content. You can replace these with your own images to personalize the template.

  • js/: This folder contains all the JavaScript files that add interactivity and functionality to the template. Here's a breakdown of each JavaScript file:

    • lazy_loading.js: Handles lazy loading of images and other assets to improve page load times and overall performance.

    • gallery.js: Contains the code that manages the functionality and interactions of the gallery section, allowing users to view images and text in a dynamic and responsive way.

    • menu.js: Manages the functionality of the navigation menu, including opening and closing actions. This script ensures a smooth user experience when interacting with the menu.

    • scroll_triggered_counter.js: Implements a counter that triggers when the user scrolls to the about section of the page.

    • slider.js: Manages the slider component of the template, including animations and transitions between slides. This script ensures the slider works smoothly and provides an engaging user experience.

  • node_modules/: This folder holds all the Node.js modules required for the template's development environment.

  • src/: This folder includes all source files and is organized to follow a component-based architecture. Inside this folder, you have:

    • components/: Contains all the PHP files for each section of the webpage. Each file represents a different component or section, making it easy to manage and update individual parts of the template. For example:

      • slider.php: This file contains the code for the slider section of the template.

      • introduction.php: This file contains the code for the introduction section.

      • paralax.php: This file contains the code for the parallax section.

      • about.php: This file contains the code for the about section.

      • Etc...

    • email_config/: This directory contains all the files necessary for configuring and managing the email functionality of the contact form, such as:

      • phpMailer/: The PHP library used for sending emails securely.

      • send_email.php: The PHP script that processes form submissions and send emails.

      • email_design.html: The HTML file that defines the design and layout of the emails sent from the contact form.

      • successful_msg.php: The PHP file that generates the success message displayed to users after a successful form submission.

    • input.css and output.css: These files are used for Tailwind CSS. input.css is where you define your custom Tailwind CSS styles, and output.css is the generated file after compiling Tailwind, containing all the CSS styles used in the project.

  • styles/: This directory contains all the CSS files for the template, organized to make it easy to manage both global and responsive styles. Here are the main files:

    • index.css: The main stylesheet that includes the base styles and layout definitions for the template. This file is used to style the overall look and feel of the website.

    • responsive.css: This stylesheet contains media queries and other responsive styles to ensure the template looks good on all screen sizes and devices. Adjusting this file will help you fine-tune the template's appearance for different screen widths.

  • videos/: Here, you'll find all the video files used in the template. If the template includes video backgrounds or clips, you can replace them with your own videos.

  • index.php: This is the main entry point of the template. It serves as the homepage and loads the necessary components and files. The file is structured to include different sections using PHP require_once() statements to load components dynamically from the src/components folder. This allows for a clear separation of concerns and makes the template easy to manage and update.

  • package-lock.json: This file is automatically generated by npm and keeps track of the exact versions of dependencies that are installed. It's important for ensuring a consistent development environment.

  • package.json: This file contains metadata about the project, including dependencies, scripts, and other project-specific information. It's essential for managing your project's Node.js dependencies and running development scripts.

  • tailwind.config.js: This is the configuration file for Tailwind CSS, a utility-first CSS framework. If you want to customize Tailwind’s default settings or add new utility classes, you can do so in this file.