Building an urban planning portfolio in 10 minutes with Airtable and Pory
(Assuming you’ve already collected the content in Airtable)
Why not use a typical portfolio builder?
I’ve used lots of different portfolio builders over the years. My Cargo Collective site still holds the archive of all the random stuff I’ve made in the past 10+ years. And my Squarespace site has a more selective collection of some past mobile app work. Cargo Collective and Squarespace are actually both great solutions for a portfolio, especially if you want to be able to customize the layout of every project detail one page at a time. This is nice, but sort of slow and can be a pain to update if you decide you want to change the order or format on every detail page.
My needs:
- I wanted to collect my grad school projects in one place, but unlike some of my previous design work the main “product” is often a pdf document of a report rather than just the images. I didn’t want to have to copy and paste urls for each of these pdfs into each project detail page.
- Since each of these class projects has a similar structure I wanted to set up my content in one place and have it update a template automatically
- I wanted to be able to easily filter these different projects by different tags
- I was feeling a little lazy and didn’t want to spend a ton of time customizing the look of it right now, but I might want to later.
- I also really love playing with all these new “no-code” tools and just wanted to show how quickly you can use Airtable and Pory to throw together a site.
Cleanly structured data is a girl’s best friend
To be honest, 95% of the hard work is pulling together the content for the site, writing blurbs, collecting images, etc. This can take a long time, depending on how much content you’re dealing with, and is not part of that 10-minute estimate. But the process of gathering and authoring content is sort of the same regardless of what service you use in the end to display the content.
In the past, I might have organized my content in a google doc or spreadsheet first, and then copied that content over to a site builder, one page at a time. Or just typed it directly into each project detail page, going back and forth to make sure I’m writing in a consistent way.
This time, I just put it into an Airtable database, which is essentially just a fancy spreadsheet. The main difference is that each column has a defined “type” of content, which makes it easier to define how to handle each element and makes it possible to display the content predictably in a template later. For example, I have some columns set as text, some as multi-select, some as attachments, some as URLs.
Another feature of Airtable is the various apps you can install to automate things. In this case, I uploaded a pdf of my final report and wanted to be able link to the pdf directly later. So I added the “Convert attachments to URLs” app to my Airtable base. When I click “Run” it extracts the url from my “PDF” column, and puts it in my “PDFURL” column.
Make it pretty with Pory
Since Airtable includes a tidy little API it can connect to lots of other services and no-code tools such as Softr, Stacker, and Pory. Softr and Stacker probably have more bells and whistles than Pory but I actually kind of like Pory better for something like this because it’s simpler. Also, I just love that the product was made by these two cool ladies in Australia during the 2020 shutdowns.
After playing around with it a bit I was really impressed by how easy it was to connect everything together and figured it might be fun to record a speedrun and see how fast I could actually do it from scratch. But I also wanted the video to be kind of useful to other people and included some commentary. So it’s not as fast as it could be, but coming in around 10 minutes it’s not too bad. Here you go:
Incase you missed the link at the top of the page, you can see the live version here: https://murp-jayne.pory.app/
I could definitely spend some more time noodling with the design of it and stuff but as a quick and dirty front-end to my Airtable I think it works pretty well for now.
Pros & Cons
- The nice thing is that since my data is in Airtable it’s portable and I can easily connect it to another service or build a custom front end for it, whereas with something like Squarespace it’s going to be a pain to transfer all that data somewhere else.
- There’s also a lot of other features in Pory that I didn’t touch on here that could be used for other types of sites, such as having people sign up as members to access certain content.
- This Airtable+Pory solution is really perfect for things like listings and directories where the structure is generally the same for each item. It’s less ideal for something unstructured, but Pory does have lots of “blocks” you can add to create some of those one off pages (about, contact, etc).
Overall, think it’s pretty cool how easy this is. Let me know if you’re interested in setting up a similar type of site and need some help. I’d be happy to geek out over this and walk you through it. :)
