Project source:
https://learner-studios.github.io/batman/
Good evening my tech pilgrims, I wanted to apologize for the hit and miss schedule that I have been holding myself to. The process of building the life I want and the journey to get there from here has been rocky not only with personal life stuff but also battling the results of procrastination. I wanted to sincerely apologize but also say that I have no excuses I want to give and instead want to simply jump in and explain to you what has been going on.
So to start off with I have come from a completely different direction than I had originally pictured. I might’ve already mentioned this and I apologize if this is is repetitive in the slightest. But I have had this idea for a few years, the original seed of the idea came to me in November 2022 when I had found out that Kevin Conroy had passed away.
At the time I had mostly finished university undergrad studies and getting my footing after graduating and the COVID pandemic really threw me for a loop. But I had wanted to compose this memorial page for him to show respect but also the love that he had had for a lot of people in my generation and all of the dedication he had put into this character.
Concept design
Originally for the idea of this page I had wanted to make sure that this web page had an opening scene where Batman originally got the Bat signal and was donning his gear and costume to head out to where the action is. But this opening scene I had envisioned it to include Kevin Conroy in place of the animated version. This scene I still wanted it to be open and animated but with the actual voice actor being substituted for his normal analog. This animated scene would be presented as a full screen scene that would transition to the web page loading and showing the tribute page.
This ultimately was an idea I scrapped, one because the shelf life of this idea was starting to show it’s age and I am really pushing myself to make sure that I publish and get my projects live and not really worry too much about perfection. It’s kind of the same analogy with writing if you never publish and write your work will never get out there. This medium is what I prefer to use for my communication. And here’s where we will continue our dialogue…
With the animated scene out of the way I wanted to focus next on the copy and structure of how I wanted this page to be. Originally I had wanted this page to be something that I threw together to highlight the extensive life he lived but again keeping with the principle of ‘less is more’ I decided to keep it a brief outline and overview of his life and embellish it some more with other visual flare.
Assets
One of the hard parts of building anything is finding correct sources of assets that others have built to throw it together in a product that you like. The first thing I wanted to find was a proper font that would compliment the vibe. I did a quick search on Google for one that I decided on called Palazan, it is an open source community built one that really matches the look and feel of the show back in it’s heyday.
The other type of assets I wanted to grab we some animation scenes that I felt would present the vibe and look that I was aiming for. And the one that worked for me is toward the end of the opening credits scene where Batman is on top of the building with lightning striking the background and his silhouette shining for a brief split second. Really showing his prowess and the results of hard training and dedication to his mission. There were a few other resources that I wanted to track down. One of them was a good head-shot of the actor himself and to include that somewhere in the page.
For the head-shot I had originally thought that it would be a good idea to have it either on the left side underneath the animation. The original layout I had in mind for the animation and the text format was that the text would be centered on the right side with the media (animation and pictures on the left side). But eventually I originally decided to keep things centered. On a separate but same tangible plane I needed to find a good quality icon picture for the favicon in the tab of the HTML page.
Perhaps the last source of assets that I needed to find was a good source of information for Kevin’s life. I spread my find across a few Wiki pages that dealt with the animated Batman character, but it also spent a good amount of time giving the highlights and overview of Kevin’s life. There was also a memorial page that a writer wrote who works for DC and I do say they did a good job of running through how Kevin got the role of playing Batman. With these pieces in place I was ready to start creating.
HTML and CSS Layout
After I had spent some time looking at the different biography sources I had made sure that I compiled the key points that I wanted to include in the copy of the page itself into bullet points. From those bullet points I wrote the paragraphs and the headings for Kevin’s biography. Most of the web-page was under my design but as with this channel my goal is to embrace a lot of different technologies to explore and learn them. If it would help me with getting better at my job then I’m all for using it and embracing it. But there will definitely be times where I will be challenging myself to do things the hard way.
Using one of those tools was Claude Code, it helped me with setting up most of the style sheets for the layout of all content of the web page. It also helped with writing the HTML tags that would properly load the animation and the head-shot of Kevin in the positions that I wanted them in. As well as making sure that the animation was running at a speed that I wanted.
Challenges and closing thoughts
I wanted to keep this project simple and close it out, there were two challenges, well I’ll say two and a half that I came across with throwing this project together. One of them for me was getting the hosting part of these files figured out. I wanted to write a JSON file to have it automatically create a Github Page and load any changes I make automatically to the website in real time.
Since this website isn’t something that is content heavy, this was still something that I still need to figure out. The other challenge I have is that this isn’t the final format I want, I still need to go through the written copy and make sure things are edited and correct to a certain degree. I’m not going to edit it heavily but it has to be in a presentable format, there are also style changes that I need to make to make sure that things like my font and other pieces of design stay consistent across my website.
One of my proposed solutions, at least for the hosting side of things is to build a self-hosted option with Gitlab. This option sounds the most promising because it provides a lot more tools available to monitor whatever an app and project you load isn’t down or suffering from other types of vulnerabilities.
Lastly, the ‘half of a problem’ that I was struggling with was to use Claude code and AI solutions in a progressive way where I’m not relying on it 100%. This is the balance that I’m trying to make sure I keep with. However the project I’d say turned out to be a really good success. The next item for me I’m investigating could be building a progressive web app. I have this idea for a rotating grocery list that is shared between my significant other and me and that would essentially be out grocery list in case we ever need to make some last minute adjustments that we can share across devices. This would save us time from writing lists and then sending it to each other. Just write and process in real time. Anyway that’s all I have to mention for now, thank you for coming with me on this journey. Onto the next project…enjoy yourself on your journey, stay curious, and stay building.
Leave a Reply