I'm revamping my web development portfolio, and once I figured out approximately what I wanted to do with the layout, I had to confront the perennial question—how to deal with the data backend. I didn't really want to hard-code everything into a static HTML file, but I also didn't have to deal with creating an entire CMS theme for my one-page site.
I asked some friends for thoughts about simple ways to handle the content management; one of them suggested trying to hook into the Google Sheets API. It turned out Google Sheets had some flaws that made it unfeasible for my purposes (namely, not wrapping strings in quotes in the JSON output), but the idea of hooking into an API gave me an idea.
Trello is a web application I'd used for project organization before, and I realized that with the assistance of the Custom Fields power-up, I could pretty much get every field needed to run a portfolio just from their API. Just on a standard card, I can input a title and description, add image attachments, and tag it with labels; custom fields gave me the ability to add the project completion date and URL.
So:
I create a Trello board with two lists, "In Progress" and "Done." "In Progress" is where I keep my drafts; "Done" contains the live data that's served to the website. Trello doesn't make its board or list identifiers super obvious, so I use the Trello Developer Sandbox to get the board ID using the "get boards" example, and then inserte that ID into the "get lists" example script to get the ID of the "Done" list.
So then I ping the API to get all the cards from that list:
https://api.trello.com/1/lists/[LIST ID]/cards
This gives me a big JSON object with a lot of data that I format and append into the main content area of the website. Also among that data I get the ID value for each card, which is great, because for each card, I need to make exactly two more API calls.
The first one is because I'm using the custom fields power-up for this board to add more data to each card; power-up content is returned on the pluginData API route only, so I need to query this route for every card:
https://api.trello.com/1/cards/[CARD ID]/pluginData
The fields are not stored with easily-human-comprehensible names, but it's easy to figure out which field is which based on the content and extract the information to the correct place on the page. Then, I just need to query the API one last time to get the attachment data for the card:
https://api.trello.com/1/cards/[CARD ID]/attachments
...which gives me an array of attachment data objects, which includes such helpful data as urls for various sizes of thumbnails. And then that's everything!
The Trello API actually works pretty well as a CMS for this kind of usage; you could pretty easily run a simple blog off of it, I think, or use it as a more traditional CMS with lists representing site sections. Obviously, it has its limitations, especially because it's not meant for this (e.g., you can't rearrange attachments or add captions to them individually, and if I had a lot of projects the number of API calls might get unwieldy), but for this: works perfectly fine, and can run on any server that allows HTML/CSS/plain JS.
And so: