How My Website Works

This website is a personal portfolio built using the Flask web framework. It showcases my skills, projects, and provides contact information. The website consists of several pages, including a home page, projects page, about page, and contact page. The project data is loaded from a JSON file, which makes it easy to update and manage.

Code Breakdown

• Imports: I imported Flask, render_template, jsonify, and send_from_directory from the flask module. These are essential for creating the web application, rendering HTML templates, converting Python dictionaries to JSON responses, and serving static files, respectively. I also imported the json module to handle JSON data.
• Flask App Initialization: I initialized the Flask application with app = Flask(__name__). The __name__ argument helps Flask determine the root path of the application.
• Helper Function: I created a helper function load_projects() that reads project data from a JSON file (data/projects.json) and returns it as a Python dictionary. This data is used to dynamically populate the projects page.
• Routes:
  • /: The home route renders the index.html template, which serves as the landing page of the website.
  • /projects: This route loads project data using the load_projects() function and renders the projects.html template, passing the project data to it.
  • /about: Renders the about.html template, which contains information about me.
  • /contact: Renders the contact.html template, providing a way for visitors to contact me.
  • /data/images/<path:filename>: This route serves static image files from the data/images directory. The <path:filename> part of the URL captures the filename of the image to be served.
• App Execution: The if __name__ == '__main__': block ensures that the Flask application runs only if the script is executed directly. It runs the app in debug mode on port 8080.

How It Works

When a user visits the home page (/), the home function is called, which renders the index.html template. This template is likely formatted using block templates, allowing for consistent styling and structure across different pages.

When a user navigates to the projects page (/projects), the projects function is called. This function loads project data from the JSON file and renders the projects.html template, passing the project data to it. The JSON file (data/projects.json) contains details about each project, such as the title, description, and possibly links to the project.

The about page (/about) and contact page (/contact) are rendered by their respective functions, which simply return the corresponding HTML templates. These templates are also likely formatted using block templates for consistency.

Static images are served from the data/images directory using the custom_static function, which is mapped to the /data/images/<path:filename> route. This allows me to easily include images in my projects and other parts of the website.

This structure allows for easy expansion and maintenance of the website. I can add new routes and templates as needed, and the use of JSON for project data makes it simple to update and manage the content displayed on the projects page. The block templates ensure that the website has a consistent look and feel across all pages.