An iconised magpie

Capoeira Derby Dev Diary

I've begun this project because the old Capoeira website is not optimal, in a number of ways.

First, it has no photos. This sort of thing needs to be 80% photos. Pictures speak a thousand words with these things.

Second, the website theme feels out of date, and has subtle bugs that I don't know how to fix. I have no doubt I could improve the theme and work out the bugs, but given that it is built using wordpress, I also have no doubt that it would take me as long to work out the bugs as it would to build it from scratch using React/NextJS.

Finally, the information on the website is out of date. This is relatively easy to update, especially in wordpress, but it is unpleasant, and if I need to do any updates other than text, I am left grappling with the wordpress admin UI again.

Combine all of these things and I have landed on the conclusion that it will be easier to build it from scratch than it will be to update this website.

02/03/2025

Aim: Replace the website?

I really was not sure how far I could get in one day. I hoped I'd get a functioning website churned out, though this was certainly ambitious.

What I've actually gotten done is this:

A screenshot of the Capoeira Derby web page.

The website theme and layout is taking shape. I have a working header with links, a nice friendly banner photo with all of us smiling, a friendly colourful tagline and more photos alongside an introduction to the Derby Capoeira group.

There are a number of things left to do though. The theme is taking shape... but far from complete. The colours are blunt and could be more subtle and complimentary.

The links don't yet go anywhere, and are unstyled, as are the CTAs.

The images could do with a bit of blending into the page.

The footer is incomplete.

It is not hosted nor deployed anywhere.

The page is totally unresponsive:

A screenshot of the Capoeira Derby web page in mobile mode. It does not look good.

So certainly lots left to do!

But it has been rewarding work so far. Anything that helps channel traffic to the Capoeira group makes me happy.

I'd love to have this done by the end of next weekend.

Next time: Add some of the pages, starting with 'what is Capoeira?'

04/03/2025

Aim: Add 'What is Capoeira?' page

Yep, certainly managed that! A couple of beers has certainly helped me not to overthink this.

I've added the new page, abstracted a few common components and made some of the standard things look a little bit better.

A screenshot of the new 'What is Capoeira?' page.

It's been fun. Still quite a few pages left to add, but it's proper flow zone stuff. Easy-ish but a few tricky bits, enough to not make me bored, plus it's nice to think about it actually being used and directing people to the group in a positive way!

Next time: Add the next page - can i do Capoeira, think about making it responsive.

05/03/2025

Aim: Add 'Can I do Capoeira?' page

The page specified above has indeed been added! I've had to take out a page talking about portuguese because it came with a glossary, which I can't be bothered to add, and a section talking about Ligerinho's qualifications, which won't work because he's no longer in the group!

It has made me question whether we ought to perhaps create a more standard FAqs page, and a separate page for some of the sections within it - like one to talk about the instructors. Or could this be part of the 'Our Group' page? Perhaps. For now I think I keep transcribing over the existing pages and we see how it goes when I've moved all of them over, we see what else I'm missing.

Also... I've made it responsive!

A screenshot of the newly responsive home page.

Next time, I'm going to do the next page - classes - which might not be so simple. I think there is a better way to lay out that information, which I will not at all try to work out myself, I will just ask ChatGPT!

08/03/2025

Aim: Add the classes page

Added! This page was not as satisfying as the others. I've changed the layout quite a lot because it was shit before, and is now... less shit but there are still issues.

a screenshot of the new classes page.

There is some text above the class cards that is a bit of a tagline but is styled more like a header - that needs a bit more thought.

The address on the cards is formatted poorly, and the text on the cards generally is probably a bit small.

Finally, the CTA box at the bottom of the page is a bit bland. It feels like it needs to be a bit flashier. But those are problems for another time.

There are a few of these 'problems for another time' mounting up. I sense that the final 10% of building this website will not be as smooth as the initial 90%...

One last thing, I've been using ChatGPT heavily for layout suggestions on this page, too heavily. It's making my brain feel sluggish. It makes me feel like I can't trust my own thoughts, like I must offload any problems onto ChatGPT. The balance has not been right. Next time, I think I need to at least have an idea before I ask, or ask and then attempt to implement it myself. Either way, ask and then try something, and then ask and then try something else. Not just chain together multiple asks.

Ah, finally finally for real this time - I had a bit of a think (and also queried ChatGPT) on the layout. I think it's not far off right as it is, but I think we can possibly combine the Capoeira history page and our group page, along with adding some other bits.

We should also rename the 'can I do Capoeira' to FAQs, or something more standard like that.

So final page list could be:

Next time: Think more on this layout. Add the 'Our Group' page and think about maybe combining the pages.

09/03/2025

Aim: Add the 'Our Group' page

Adding went well! The page lives! I had to add more about the instructors now, and less about the controversy of leaving Cordao de Ouro.

Technically, it was cool to see that I can just add the video directly too. It was more trouble converting the video into mp4 format rather than actually embedding it in the page.

I also started to clean up the page a little bit. There were a few unresponsive bits and a few other little fixes to do.

The only things left to do now are to decide on the final list of pages, do a bit of QA and finally actually host the thing on github so people can actually see it!

Next time: Finally decide on and implement the final list of pages.

17/03/2025

Aim: Finish it off

It has been a week since I really got any time to work on this. I was extremely busy - my free days were eaten by Capoeira lesson planning, illness and gigs.

Now though, I have a week off. For the rest of the week I'll be recording, but today I have a free day, and I wanted to finish this website. At least, from a development perspective.

What did that entail though?

Wow, it's a lot when I spell it out like that.

Did I get it all done? Of course I did!

I started with adding the About page and renaming FAQs, along with some minor bug fixes around the menu layout and changing links to those pages. That was easy enough if a little time consuming.

Next I decided to host the thing. THAT was harder. Despite it being exactly the same as what I've done before with my blog, it still took over an hour with a fair bit of trial and error in various config files before i got it working.

Especially noteworthy is the fact that I added some background images this time, and embedded a video. The NExt Image component has it's own way of dealing with image paths which I have had to deal with before with my blog, however the background images and videos do NOT work that way, so I've had to do a rather ugly hack to prepend the repository endpoint onto the front of the image and video file names.

a screenshot of some damn ugly code.

But eventually it was all working. Until I realised I had forgotten to add a font, so then I spent 30 minutes fighting with google fonts, tailwind, css and chatgpt to work out how to upload and use my font of choice.

A quick round of QA from Chris to iron out a couple of minor bugs, then permissions sent off to parents.

Was it all worth it? I think the final product is looking pretty good...

a screenshot of the final site.

Next time (and the final time?): Implement any required changes due to feedback then get it deployed by working with Dave.

19/04/2025

It has been shared, and feedback has been received. It's mainly positive. Chris was able to point out some minor flaws, but that is all.

Just waiting on Dave being free so that I can deploy it to the correct URL, then we're done!