How I rebuilt my portfolio with Flask and MySQL

My old portfolio was a single static page. Every time I finished a client project I had to open the code, copy a card, edit it by hand and redeploy. So I rebuilt it as a small Flask app where everything lives in MySQL and I edit it from an admin panel.

The stack#

• Flask for routing and templates. No front-end build step.
• MySQL through PyMySQL, with plain SQL instead of an ORM.
• Vanilla JavaScript for every animation, with zero dependencies.
• A tiny block format for blog posts, so nothing is stored as raw HTML.

The contour-map hero#

The background of the home page is a live topographic map. A height field is sampled on a grid and marching squares turns it into contour lines, about 30 times a second. Moving the mouse raises a peak under the cursor.

const height = (x, y) =>
  Math.sin(x * 0.0042 + t) * Math.cos(y * 0.0056 - t)
  + (y / H) * 0.9            // ridge rising to the south
  + peakUnderCursor(x, y);

Writing posts like this one#

Posts are built from blocks: headings, paragraphs, lists, images with captions, quotes, code and callouts. The admin editor lets me add, reorder and preview them before publishing.

1. Write the post as a draft.
2. Click Preview to see it exactly as visitors will.
3. Switch it to Published, or pick a future date to schedule it.

Make it work, make it right, make it fast.

Kent Beck

Want something similar for your business? Get in touch and tell me what you're building.