Creation Process

Creation

My portfolio website is a completely modular website powered by Python and Flask. I used Sass for the design styling and responsiveness. No front-end frameworks or Javascript were used, the UI is entirely handled by the Flask templating engine, Jinja.

I call it modular because of it’s structure. Nothing is hardcoded except the “About” page. The website is organised into Categories and their respective Projects. For example, “Video Games” is a category and “Micro Mike” is a project. On the server, this works by treating every directory inside the /static/projects/ directory as a Category; and its subdirectories are the respective Projects. Thus, it’s modular because to add a new Category all I have to do is create a new folder inside /static/projects, and then create a folder inside that to create a new Project webpage. No additional coding or editing is needed.

Inside each Project folder are all its required files: thumbnail and banner images (.webp), webpage content (.html), any images, audio files, or PDFs to embed in the page content, and a metadata file with the project title, description, and creation date (.json). Using Python, I created class objects Category and Project, which store all the required properties. For Category, it stores its name, sorting order in the main page, and its respective Project objects. For Project, it stores all the metadata as properties, as well as its generated URL, and full path on disk. Then I loop through each directory and subdirectory in the /static/projects/ path and automatically generate all the objects.

Thanks to Jinja, I can create object-oriented HTML templates that inherit all the required elements, so in a Project’s HTML content file I only need to worry about the information I want to display for this specific project. The headers and footers are automatically inherited from the templates, the Project’s content is read from the content.html file in its folder, and metadata such as Title and Creation Date are read from its object properties. In case any or all of these files aren’t available, a fall-back project content file is used.

Maybe I rambled on too much, but honestly I felt pretty clever when designing this system :)

Check out the code 🧠