Included a mermaid diagram to our contribution file (#498)

* Included a mermaid diagram to our contribution file

* Fix footer and header to inherit from _layouts/default.html

CONTRIBUTING.md

@@ -6,6 +6,64 @@ Follow these steps and note these guidelines to begin contributing:
 1. Bug fixes are always welcome. Start by reviewing the [list of bugs](https://github.com/BlackPythonDevs/blackpythondevs.github.io/issues).
 1. A good way to easily start contributing is to pick and work on a [good first issue](https://github.com/BlackPythonDevs/blackpythondevs.github.io/labels/good%20first%20issue). We try to make these issues as clear as possible and provide basic info on how the code should be changed, and if something is unclear feel free to ask for more information on the issue.
 
+# Diagram of infracstructure in use
+
+Below are some diagrams to best explain the file structure of the website, the development structure and how some information are been generated
+
+## Website structure
+
+The diagram below illustrates the main navigation structure of BPD website, showing how the homepage `(Index)` connects to various sections, including the `Home`, `Blog`, `About Us`, `Events`, and `Community`. Each blog article, represented as `Article1` and `Article2`, is linked directly from the `Blog` section.
+
+```mermaid
+flowchart TD
+    Index --> Home
+    Index --> Blog
+    Blog --> Article1
+    Blog --> Article2
+    Index --> AboutUs
+    Index --> Events
+    Index --> Community
+```
+
+## Development structure
+
+The diagram below outlines the file structure of the development environment. The root node represents the main directory, containing essential files and folders like `_config.yml`, `_posts`, `_layouts`, `_includes`, `_data`, `_articles`, and `assets`. Each folder contains further organization of specific files. This will aid contributors in understanding how the project is organized and where different components are located.
+
+```mermaid
+    flowchart TD
+    root --> _config.yml
+    root --> _posts/
+    root --> _layouts/
+    root --> _includes/
+    root --> _data/
+    root --> _articles/
+    root --> assets/
+    root --> about.md
+    root --> index.html
+    root --> tests/
+    _posts/ --> post1
+    _posts/ --> post2
+    assets/ --> css/
+    assets/ --> images/
+    assets/ --> js/
+```
+
+## How some information are generated
+
+The diagram below explains how information is generated for the about page, showing how the `about.md`(source content) connects with other contents, templates and configuration files. The `about.md` file links to `_layouts/default.html` and `_includes/header.html` and `footer.html`, which define the page layout and thus generates a `about.html` this html file can be styled and scripted with files in the `assets/` folder. This diagram clarifies the rendering process and how different files work together to create the final output for the about page.
+
+```mermaid
+    flowchart TD
+    about.md --> _layouts/default.html
+    about.md --> _config.yml
+    _layouts/default.html --> _includes/header.html
+    _layouts/default.html --> _includes/footer.html
+    _layouts/default.html --> about.html
+    _config.yml --> about.html
+    about.html --> assets/css/style.css
+    about.html --> assets/js/script.js
+```
+
 # How to Contribute
 
 ## Fork the repository