Helldivers 2 Web App

Before security became a core focal point of my personal applications, my primary goal was simply achieving results while learning new concepts along the way. When I first started building applications, I focused heavily on efficiency- and while there is nothing wrong with that, parsing through my old code has revealed some crucial insights that hadn’t occurred to me before. Web app development is a newer challenge for me, and it has highlighted security flaws I had not previously considered.

Back in August, when the Helldiver’s 2 app began progressing at a more serious pace, concepts such as hosting or interacting with an API were new territory. While the video game’s community hosts their own API for data parsing, I challenged myself to host it independently to fully understand the process of building an API.

I already understood the concept of security tokens or API keys. If the API is a waiter, the API key is the membership card confirming the individual is allowed to order from the menu. If I were to host my own API, I needed to ensure that I was the only individual who could access the database itself. Without a distinguished API key (i.e., allowing public access), anyone could access the database, compromising the integrity of my data. In addition, I now update my security keys on a consistent basis to maintain that integrity.

Beyond these measures, when I access the community API to extract data, I must set ‘courtesy headers’ to identify myself to the API developers. This prevents a single source from overloading and stressing the database, while also providing identification should a user introduce any anomalies.

I also learned the importance of maintaining a .env file. This acts like a vault for the aforementioned keys. Crucially, when pushing a project to a repository on GitHub, I must remember to add this file to .gitignore. This prevents me from accidentally uploading my API passwords for the world to see. While a leak now might not be detrimental to my livelihood, it is better to build these habits now than to learn the hard way later in the field.

---

Security Portfolio

Turning to this security portfolio, I decided to learn a new approach to running and hosting a web app. I had a multitude of options: writing my site from scratch, using existing frameworks, or integrating third-party libraries into my own code.

Writing a site from scratch, while feasible, slowed down both my studying and app development. I am still mastering HTML, CSS, and JavaScript, and while I do use third-party libraries for specific functions on my Helldivers 2 site, relying on an existing framework felt like the most efficient path for this portfolio.

Writing my own site from scratch, while feasible, slowed down the progression of both my studying and my app development. I am still learning the HTML, CSS, and JavaScript languages and how to utilize them to my advantage. While I use third-party libraries to handle certain functions and interactions on my Helldivers 2 site, it seems unnecessary to include here. If I were to add third-party libraries, it just makes sense to use an existing framework.

The first framework I attempted to work with was Hugo. While I appreciated the variety of themes, I found that version incompatabilities created too many errors, and the workarounds felt too verbose for the desired result. After a bit more research, I came across the framework used to display this article to you: Astro. It uses JavaScript and HTML to build components that live on what are called ‘islands’, effectively isolating and displaying the desired information. I found this framework not only flexible enough for my intentions but simple to use throughout.

To gain further experience with real-world tools, I chose Azure’s Static Web App to host my portfolio. Astro in tandem with the Static Web App strengthens my security posture while still providing the user with an efficient experience. Astro gives me the ability to strip away the JavaScript typically needed to run a site, leaving just raw, lightweight HTML. Because there is no scripting, there is no server constantly running, greatly expanding my attack surface. In addition, when Azure pushes the lightweight HTML to their Content Delivery Network (CDN), I am shipping the smallest possible file to the closest possible server for the user; providing a fast, stream-lined experience.

When this site was first deployed, there were only three pages: Home, About, and Blog. Thanks to the flexibility of the framework, I have since built- and continue to develop- a ‘Projects’ page to compile all my personal work into one organized location.

---

Ultimately, this portfolio is more than just a collection of links; it is a live documentation of my transition from a musician to a cybersecurity professional. Every project listed here, from the Helldivers 2 tracker to this very site, represents a specific hurdle I’ve crossed—whether that was learning to host an API, managing secrets securely, or mastering a new framework like Astro.

As I continue to learn, this site will continue to evolve. I invite you to check back often, not just to see what I’ve built, but to see how I’ve built it: securely, efficiently, and with a constant drive to improve.