aseward.games

Custom made portfolio and blog site using Flask

Gitlab

About

aseward.games was built as a personal portfolio and small blog site in a little over a week.
The idea was to create a quick and dirty yet professional looking and easy to use site to post projects I am working on as well as projects I've made.

Skills Used

Python
Flask
Pycharm
CSS
Semantic-UI
JQuery
SQLAlchemy
Continuous Integration
Ubuntu 16.04

Posting

The entire goal of the site was to be able to post new projects easily and quickly rather than spend the time writing static html pages.
While it would have been completely possible to create a simple script to generate a static html page, I wanted the control from having it generated at post time.
If you've used Jinja before you'll notice I'm writing and generating the posts from uploaded jinja2 templates.
While I don't think this is safe in a conventional sense, I'm the only user capable of creating posts thanks to the role system which currently has no way to elevate another user.
I'm using a template that's included in any post called 'macros' which is exactly as it sounds, a collection of macros that allow me to format my post easily.
Here's the macro for creating the neat little 'skills' labels.

Labels

			
				

{% macro label(text, icon='') %}
	<div class="ui label">
		{% if icon %}
			<i class="{{ icon }} icon"></i>
		{% endif %}
		{{ text }}
	</div>
{% endmacro %}


			
		
which is then used by doing
			
				

{{ md.label('Python') }} 


			
		

Images

Another huge issue I learned from my last web project, was Image uploading isn't as straight forward as "Upload, display, done".
There's many little problems to deal with, thumbnailing, what if the user cancels the post, deletes the post, removes the image, etc...
I didn't really care about solving any of these problems besides thumbnailing (Because my images are 1440p), but they are things to think about.

Thumbnailing

This was solved using a Flask library called Flask Images .
This does not work out of the box, at least for python 3.6. I ended up finding a fork of the project on github that was updated for 3.6, and with some small changes its working great.

Modals

You may have noticed when you click an image it pops out into a nice little modal. That's entirely handled by Semantic UI .
The image is sized properly by Flask Images, so you're never downloading more than you need.
I used Placeholder.com to quickly create placeholders so the modal isn't improperly positioned as it loads the image.