☰HOMEABOUT MEPROJECTSCONTACT

Project Info

Name:Homepage 1.0Started:2022-06-01Finished:2022-08-20

Table of Contents

IntroductionImplementation DetailsLearning About UI/UX and Mobile DesignConclusion

Introduction

Homepage 1.0 was my first attempt at creating a professional homepage to showcase my portfolio and the work I had done. It was the predecessor to what would later become the Spawnpoint project. This version was an important stepping stone in my journey, teaching me a lot about web development, scalability, and user experience.

It is still live at v1.bats.li

image

Implementation Details

The entire project was built using PHP, HTML, and CSS, which worked well for a small-scale website. This project was also the reason I purchased the bats.li domain and rented a server from Netcup. My goal was to build a place where I could showcase my abilities and projects, making it a professional portfolio.

Hardcoded Structure and Scalability Challenges

While Homepage 1.0 did what it needed to do, I quickly ran into issues with scalability. The website had no real database or persistent storage for projects or content. Instead, all information, including project details, was hardcoded into the site.

For each project that was displayed a line of code similar to this one had to be written:

<?php drawCard("BESD", ["python", "mysql", "html", "docker"], ["favorites", "software"], "April 2024", "Bats' Epic Server Dashboard - Monitor all your metrics from your linux server", "https://status.bats.li", "https://git.bats.li/bats/bats-epic-server-dashboard", "besd.png") ?>

As you can imagine, this was a chore to keep updated and not a fun experience. This workflow became tedious and unsustainable, especially as I added more projects. There was no easy way to implement individual project pages like the ones found in Spawnpoint, since rendering markdown was not feasible with this approach.

These limitations made me realize the importance of scalability and future-proofing when developing websites, especially if they’re meant to grow or regularly showcase new content.

Learning About UI/UX and Mobile Design

One of the more positive takeaways from Homepage 1.0 was the experience I gained in UI/UX design. I spent a lot of time learning how to structure the layout, choose color schemes, and make the site mobile-friendly, as this was my first website where I specifically wanted mobile support. This process helped me understand what works well in terms of user experience and what doesn’t, which has significantly informed how I approach web design today.

Conclusion

While Homepage 1.0 ultimately reached its limitations and was replaced by the more robust Spawnpoint, it played a critical role in shaping how I think about web development. It was my introduction to the challenges of scalability and taught me that a solid foundation is key to future growth.

Written: 2024-09-17