Warning: English is not my native language and I refused to ask an LLM to write this for me, so at least you got a somewhat human blogpost in exchange for some bad english :P

I’ve had an interest in photography for a long time, I remember being fascinated by it in highschool and since then I still enjoy looking at pictures, reading about photography (suffering from GAS) and most of all, taking pictures.

During all this time, different social networks were born to showcase photography: Flickr, 500px, and in my opinion, the most active one, Instagram – but the latter has lost its main focus, it’s not longer about sharing photos, but rather a lifestyle (real or not). Stories, Reels, people rarely posts nowadays and I believe interactions with posts have taken a dip.

Despite this, I’m still active in Instagram, I share pictures as posts and also I share some more ‘fancy’ snaps on stories focusing on composition.

For quite a while, I wanted to build some sort of portfolio. Nothing professional, I don’t expect having gigs as a photographer, after all, I do this on my free time and for pure enjoyment, but I wanted to have a more ‘curated’ site to post some of my favourite pictures, but never caught the time to do it myself. I remember looking everywhere for a good Jekyll or Hugo template, but those I’ve found, none convinced me, therefore I always put on hold the idea of doing it.

So I thought, maybe it is time to try these modern tools, and try to vibecode it.

My AI take

Honestly, at this point you might be pretty tired of hearing what AI can do, one-shot prompts, build your SaaS and generate profit™ as quick as possible, break everything, move fast!

And so am I. My usage so far has been more of peer programming, sometimes I find it really useful, and sometimes it feels like a waste of time, like I was fighting someone incredible intelligent yet stupid at the same time.

My problem is, I don’t have much skill building front-ends, I’ve done my fair bit of javascript (never enjoyed it), but I have more interest in the back-end, infra, and low level stuff, therefore I needed a lot of help if I wanted to build something anew.

In this case in particular, it is an utilitarian usecase, I mostly cared about the tool I wanted rather than to build it myself, because I wanted to focus on curating my pictures and having a place to display it, rather than getting excited on building it myself.

So, I tried it. From using it mostly as a peer programming tool, I asked the tool to write most of the app.

Setup

I wanted something I could host statically, didn’t want to have a CMS, and wanted to have as much reduced costs as I could.

I had previous experience using Hugo (admittedly, on a very superficial way, never truly built something myself), for the pictures I wanted to use Backblaze + Cloudflare for some caching (and since I handle my DNS there already), and so, I started with what I believe was a very simple prompt onto ChatGPT (4o):

I want to create a static website using hugo to host my portfolio. The page should be pretty minimal, with a sidebar with different categories (for example, black and white, color, film, etc.) and for each category I should have a carousel. I want to store the images on blackblaze, therefore I can provide urls per category, and maybe some metadata, I was thinking on using a yml for such a thing but I’m open for suggestion.

Create the whole project for me.

Honestly, this gave me a decent enough start. Of course, it generated a very barebones site, but it did stick to most of my requirements.

One of the first changes I asked it to do, is to have the categories and the metadata in one single file, it previously generated a .yml + .md, but after a few messages, I was able to unify them.

The workflow, though, got annoying really quick. Since I was using ChatGPT through its site, I had to ask every few prompts to generate a zipfile for me that I could download and test and see how things are going, and every time I did a change, had to copy-paste the code, then ask it to change the thing I needed.

I believe this process could have been faster using any of the fancy IDEs there are available, Zed, Cursor, I don’t know what else, but since I code on nvim (don’t even have installed vscode), I moved forward with this workflow until it got too annoying.

Deploying the first version.

After I had a first (barebones) working version, I used github pages to deploy it, did all the DNS shenanigans to have it hosted on my specific URL and well, there it was, doing what I asked to, my personal display of my work.

The site was not mobile friendly, it was a bit rough, but goal achieved, I guess?

Refining the site and the workflow.

Since I had the site hosted on github pages, and the code on, well, github, I wanted to give github codespaces a shot, because it’s there, and the few times I had to use it, it was good enough to do quick changes.

To my unsurprise, the vs code it launched, had AI tools integrated as well. So this time, I tried the “chatting and applying” workflow, and oh wow, it was so much better and fluid.

After some more back and forward, I think I achieved somewhat what I was looking for:

I know, I could have tried a more refined tool from the beginning, or maybe try a tool you could have suggested me if I asked, but honestly, I don’t expect making this my main workflow, so for this usecase, it was pretty fine!

Despite achieving something better than I expected (maybe my goals were too low? heh), working with an LLM is… exhausting.

It might have been my lack of skills on writing specifications, I did all of it in English which is not my native language, and unless you’re very specific, it will sometimes do things you didn’t expect. It felt very messy, sometimes it suggested big changes, it was difficult to keep track of all the changes, and at some point it just become a process of… just accepting the suggestions and see what happens.

I didn’t audited most of what it wrote, because it kept changing stuff, and it felt hard to go back when you changed something and it didn’t result on what you expected, and from time to time I had to do manual changes to the CSS file myself anyway because after trying several times explaining what I actually wanted, it never really captured it.

Despite achieving what I wanted, in a very short timespan (I think I totalled around 8 hours of work, which is crazy low to build an entire site from scratch in my opinion), I felt very tired, it was not very fun, but the result was there rather quickly.

We might get replaced, or we might be forced to integrate this workflow on our day to day, but my conclusion is, despite being useful, it is not that fun, most of the code went unaudited (which can’t/shouldn’t be accepted on a professional workplace!) and honestly, I hope to do it as less as possible.

How does the config file looks like

So, basically, the main configurability of the site are the categories and how do you show the images. They’re under

./content/categories % ls
black-and-white.md color.md           film.md            wildlife.md

And the files have a very basic file structure:

categories % cat black-and-white.md
+++
title = "Black and White"
images = [
  { url = "<url>/DSCF3112.jpg", caption = "Caption 1..." },
  { url = "<url>/DSCF3123.jpg", caption = "Caption 2..." },
  { url = "<url>/IMG_3999.jpg", caption = "Caption 3..." },

]
+++

So, it still requires a bit of manual work, I have to manually upload the pictures to somewhere, and edit the markdown file to add the image and the caption.

But, adding new categories, changing their titles, changing the captions, is pretty trivial! and all of it running on a static site.

Hosting

For the site hosting, as I mentioned, I’m using github pages with a custom subdomain. Configuring this is pretty trivial, HTTPS comes basically for free, and on every push, the site gets rebuild and deployed automatically by a very basic github action.

For the images, I decided to go with Backblaze because I used previously with another project. To reduce a bit the costs, I followed this great tutorial from Backblaze themselves, so the pictures can get cached through Cloudflare proxy, reducing actual hits to the bucket and making it a little bit faster.

Was it worth it?

In my opinion, yeah. This is a very personal goal I wanted to achieved, and if I didn’t have this tool available I would probably never done it myself. I won’t generate a dime out of it, and it made me realize how few pictures I had that I really like, therefore it pushes me to shoot more! and since then, I’ve taken my camera with me to more places.

Quality has not magically improved, I’m not a better photographer because of it, but my core goal was completed — I want to shoot more, I want to improve my photography skills, because now I have a place where to showcase them.

Things could be better, I think the image loading stuff is still slow (I think it is because it cannot calculate the grid until images are loaded, but I like this kind of grid!), and things could be improved, but I was able to get where I wanted, with minimal effort on the javascript side, at the cost of having to fight a very smart/dumb tool.

Honestly, if I had to build something bigger, with more states, sub-services, etc. I don’t see myself using AI full time, it is slow, it produces a lot of changes too quickly and it’s easy to get lost on what you were asking to, it also required being a bit more ’techy’ on asking for specific stuff, so with knowledge on the domain, certain things were easier.

In case you missed it, here’s the link if you want to take a peek

https://portfolio.etra0.cl