This is a web-application built with Python, hosted for free on PythonAnywhere, and used to display my personal photography portfolio.
The website is available to browse here.
💥Tip: turn off 'Prevent cross-site tracking' or 'Prevent Cookies' in your browser to view images if they are not loading.
The webapp features a home page with album covers for each of my photo-series, each series (album) is accessible in its own subpage by clicking on the cover. To navigate back to the home page, each subpage contains a 'back' menu.
The site is run using Flask for its back-end, Plotly graphing library for displaying the map on the home page, and HTML/CSS for formatting the home page and photo-series subpages.
The code is hosted on GitHub and is continuously deployed at PythonAnywhere using their free resources, with updates to the website happening automatically after every push event.
All images are shot by me, edited using my own Adobe Lightroom presets (Lightroom is available for free on mobile), and are stored for free via my Google Drive.
💥Tip: loading large-resolution images from Google Drive might take a few seconds.
This brief tutorial is helpful in understanding the basics of backend with Flask, the lessons also feature handy instructions for adding more pages to the webapp and creating a navigation menu. The Quickstart Documentation for Flask covers these fundamentals as well.
These two tutorials, (1) and (2), go over the file structure, including the static directory for CSS and JS and the HTML templates files. The second link also explains the benefits of using the Flask micro-framework over Django, which is a good subject to explore more broadly.
W3Schools and Stack Overflow are very useful in providing advice and snippets of CSS/HTML code for particular styling and visualisation needs, like adding links to images, styling headings, centering text, etc.
For image display in neat rows, I recommend exploring Bootstrap 'grid' properties, among other Bootstrap functionality.
Google Drive is a good storage option for free, although the final webapp load-time of the images can be slow. For convenient access to the links in a Google Sheets file, I sorted my series into folders and used the Drive Explorer extension, but I advise you to read their 'Privacy Policy' before installing it onto your Drive.
I add my locations to two lists (country + town) to then access their coordinates from this dataset available as a csv. I then use Pandas to match the locations with their lattitude and longitude values.
💥Tip: adding a country list is useful, because there may be multiple cities with the same name in the GeoNames dataset, and you can then end up with multiple 'Londons' in 3+ different countries.
I then work with the Plotly Python library to create a scatter_mapbox with custom settings to fit the display style of my site.
💥Tip: you will need to sign up to Mapbox and generate your own access token to render Plotly charts.
Following this helpful TDS tutorial, I finally 'dump' my Python Plotly chart into a JSON and use the following code to display the plot using Plotly.js:
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script type='text/javascript'>
const graphs = {{graphJSON | safe}};
graphs.config = {displayModeBar: false};
Plotly.newPlot('chart', graphs);
</script>
💥Tip: the script needs to be outside the <body> tag, while the chart class item itself needs to be inside it: <body><div id='chart' class='chart'></div></body>.
To create webapp hosting and ensure free continuous deployment at PythonAnywhere I recommend following the steps in this video. It explains how to use GitHub webhooks, git hooks, and the PythonAnywhere interface to host and seamlessly update your site.
💥Tip: in troubleshooting GitHub webhooks, check if your repository is public. Otherwise, the continuous deployment procedure described in the video may not work (Error 500).
The Ubuntu Mono font available through Google fonts is licenced with the copyleft Ubuntu font license.
The countries-and-coordinates dataset stored in geonames.csv is compiled by GeoNames, accessible via Opendatasoft on this site with the CC BY 4.0 license.
The webapp's exact design and all images on the site are my property (©️), to be used with permission only.
Anastasia / an-sla
