Stop war.How to help
Back

OHF31

This website is a basic showcase site I made for my orchestra. It's already its 3rd version and probabaly not the last. That's actually the one that got me started with web development.
This website is a basic showcase site I made for my orchestra. It's already its 3rd version and probabaly not the last. That's actually the one that got me started with web development.

Table of contents


Motivation

At the end of 2019, I was getting involved more and more in my orchestra’s (OHF31) online presence. Indeed, I was filming concerts with several cameras and editing videos to publish on social medias (nothing crazy, only fades in and out). But one thing was still not looking great: the website.

Made with an old Drupal template, I was looking for a solution to make the website look better and more professional. So I thought “Why not learn HTML along the way?” and I got started.

v1: HTML and CSS

Screenshot of the website v1

I never really coded before, I mean I coded in Unreal Engine 4 with blueprints but it was a visual editor, not lines of code. So to start I followed this tutorial from Traversy Media and it taught a lot of thing. I wasn’t understanding the half of the CSS I was writing (and I was using float…) but still, I managed to get this first website done.

I remember deploying this website over FTP using FileZilla on OVH around Christmas.

So definitely a great way to start!

The musicians space

Like a lot of devs out there, I decided I wanted to build my own CMS instead of using Wordpress. Why would I use a really popular CMS since I know everything to build a full custom one on my own? (Spoiler: I wasn’t ready)

So I started to learn PHP, I mean not a framework but really procedural PHP. The code was an absolute mess, absolutely not secure, duplications everywhere and so on. To be able to refresh some parts of the Ui without the whole page, I used AJAX with JQuery so I a way, I was building some kind of small APIs. BUT I was returning HTML, not JSON, stored in a string. It was an absolute nightmare to debug.

But still, I learned a lot along the way, especially about MySQL and CSS.

I don’t have any screenshot for you as I took the website down because of security issue and I don’t have the right setup to make it run locally for now.

v2: Bootstrap 5 and PHP

I don’t have a screenshot either.

As I was coding the musicians space at the same time, I discovered Bootstrap 5 and was really enjoying it. So, to train and because the first version of the website wasn’t looking that great after all, I decided to rebuild it from scratch. I was still using PHP for imports (html meta tags or stuff like this) but in hindsight it wasn’t useful.

v3: Nuxt 3 and Tailwind CSS

I think no screenshot is necessary for this one.

The 2nd version had been released for more than a year and then… “We need to add an announce now that we can do concerts, and the next one is in 1 week and half. Could you add it?” Sure I can but… My tech stack has changed a lot since last year, I was only beginning learning web development and I don’t have the right setup nor the will to get back to such tech. So guess what… 3rd version!

The deadline was the 10th of November and at the time I was looking for a way to try out Nuxt 3 now that beta was released since October. Well, it was instable and I had quite a lot of issues (of which HMR which is really painful) but eventually I managed to get it working. That was also the opportunity to try VueUse motion for animations.

I used Tailwind CSS for styling, GitHub for versioning (after all that time!), Cloudinary as a CDN for my images and Vercel for deployments.

Apart from the technical side, I didn’t really change the whole layouts or content.

Wrapping up

As you can see, this webite had a decisive role in my life by getting me started in web development. I’ll probably revisit it in the future to really work on content, layouts but also to improve the Nuxt implementation when it’s released and who knows, I might add a CMS for news and stuff.

Type
Website
Technologies
Nuxt 3, SSR, Tailwind CSS, TypeScript, Vercel, Vue 3, VueUse
Links
Website

Get in touch

If you wish to talk, or chat about an existing / upcoming project, feel free to reach out with any of the below methods.

Information
I'm not open for work right now.
Profile picture
Florian
LEFEBVRE
French self-taught fullstack developer.

© 2022 Florian LEFEBVRE. All rights reserved.

Loading...