Video Demo: https://youtu.be/1TyJGXoerXU
Web app for my VFX portfolio, made using flask.
Bootstrap was used for basic CSS styling and as a template, using the Product Template.
- webGL eye
UX
File organisation
Python Anywhere hosting
There are 4 main pages, each of which have some standard sections, each explained hereafter:
layout.html
Header -
- Name (non-linked), Home, Portfolio, Contact, About Me Footer -
- Copyright text, Sitemap, Socials, Contact
minimalist_layout.html
Header -
- Name (non-linked), Home, Portfolio, Contact, About Me Footer -
- Copyright text
Splash screen with fullscreen showreel playing as background. Centered section has name, brief description and link to portfolio. Uses index.html.
This is the only page that uses minimalist_layout.html as the flask template instead of the standard layout.html.
This is a gallery of all my projects, rendered by getting all projects from my database projects.db and their corresponding images. Uses portfolio.html.
When View Project is clicked for any individual project, it leads you to /portfolio?project={project_num}. This is a page dynamically rendered from the database, in which the corresponding images, title and description are displayed using project.html.
This is list of all my github repositories made using the github API. It runs out of requests at 60 calls/hour, at which point it displays an error message with a link directly to my github. Uses coding_portfolio.html.
Contact form made using Formspree for a mailmerge. Uses contact.html. The 'Contact—' header is not visible on small screens.
About Me page rendered using about_me.hmtl. It is intended to be as quickly parsible as possible, with summary, education and proffesional history like a CV. The side titles are not visible on small screens.
The General system flow is as follows:
On each page there is a cta leading the user to the next page.
/ contains app.py, README.md etc.
/templates contains relevant .html files.
/JS contains .js files. Currently only one: form-validations.js to validate the contact form.
/static/media/{project_num} stores media (still frames and videos) for the corresponding project, where {project_num} represents the id attribute in projects.db.
- Create venv e.g.
mkvirtualenv myvirtualenv --python=/usr/bin/python3.13 - git clone using PAT (private access token) as password
Tip
If new PAT needed, go to github settings and generate a temporary classic PAT
- cd into project directory using
cd craqvfxor relevant project name. - Install dependencies using
pip install -r requirements.txt - change WSGI configuration file to
import sys
path = '/home/craqvfx/craqvfx'
if path not in sys.path:
sys.path.append(path)
from app import app as application
- update source code directory, venv directory, etc. in pythonanywhere web section
- It may be necessary to use absolute file path if an error is recieved that states projects.db does not exist: db = SQL("sqlite:////home/craqvfx/VFX-Portfolio-using-Flask/projects.db")
- reload app
Tip
Troubleshoot using server log or access log
I hope you like my project and have enjoyed reading the README.md! If you have any questions, or wish to contact me, I am available via cbolandross@gmail.com, craqvfx@gmail.com, or +44 7857 423006.
Alternatively, you can use the website described in this project.
Note
If a web page cannot be found at that URL, it may be because I purchased a unique URL. Contact me using the aforementioned details if any issues arise.