The Making of My Website

I’ve been knowledgable on web development since more than 20 years, and although my main expertise area is 3D game development, I firmly believe that there’s quite a lot of common software development principles (DRY, KISS, YAGNI) and core principles.

And because I’m specialized in making an open-world game, my goal is to focus on optimization and scalability.

Goldanniyatech website making of

Introduction

My main objective is to have an exceptionally fast website focused on media-heavy content and the lowest amount of pages. To achieve this, I treat each page as a standalone landing page, whenever it makes sense of course 😅.

My Current Tech Stack

By creating this website entirely from scratch, my main objective is to ensure that it is the most optimized website, specifically tailored to my own needs. Despite the fact that I only need a static frontend website (alright, not purely static, as I still need to have a Light/ Dark mode switch 😅), it is still quite a challenging task 😁! Thus, as of now, my technical stack, which is the set of technologies I use to build my website, consists of the tools and languages below.

  • The Astro JavaScript Framework, a content-first, HTML-first framework, perfect for my content-heavy website.
  • HTML and Markdown (MDX)
  • Vanilla CSS to customize my UI as I see fit
  • TypeScript, but very rarely as it’s mostly a static website with almost no interaction 😅

Making the Right Choices

Making the right technical decisions when building a website isn’t about using the most advanced tools; It’s about choosing the tools that truly fit my needs. In fact, one of the core principles of software development is, I believe, keeping an open mind about technologies and the tools we choose.

Having deep expertise in C++ and being a software developer doesn’t mean I have to use the most complex tools available. Instead, I firmly believe that my role as an expert is to choose the most effective tool; the one that gives me what I need in the shortest time possible, without major compromises on quality or control.

3 Ways of making websites

I believe there are three distinct levels of complexity when building a website:

I’ve already tried Wix for a couple of months, long before opening my company in November 2021, to write internal documentation for the first Train Prototype of my game.

Although it was a very pleasant experience and incredibly fast (that’s the point of no-code tools 😅), I still wanted to have more technical control over my website, even if it takes slightly more time than using a CMS or a no-code platform!

The Astro framework was actually released in June 2021, but I didn’t hear about it until late 2023.

Working with the
Astro Framework

The primary purpose of Astro is to create a static website, and I’m only using it mostly for static content. However, Astro allows the integration of dynamic UI components on any page, referred to as islands in this Framework!

I don’t need this feature for now, but I firmly believe that scalability is extremely important in software development, i.e., the ability to add more complex features to your software or product. Thus, if I ever need to integrate dynamic UI components in the future, for whatever reason, I know I can still use Astro.

Visual Studio Code screenshot of GWeb focusing on HTML in the Astro framework

HTML Documents

To write my content, I use HTML (unsurprisingly 😅) embedded inside Astro files. In fact, I try to keep my HTML code as simple and maintainable as possible, and platform-agnostic. For this reason, I avoid some HTML tags, and try to present the content using standard HTML.

I also avoid using Markdown (MD and MDX files), as I’m really accustomed to HTML and very quick to write code, especially with Emmet abbreviations in Visual Studio Code.

GWeb SCSS Style screenshot

CSS Stylesheets

For my website design (technically its stylesheet), I decided to use SCSS instead of plain CSS, because it’s closer to a programming language (not a full-fledged one, though 😉)!

It has some pretty nice advantages over CSS, such as modules (having separated files) and mixins (reusing groups of properties like color or font-size). Nesting is also great, as it’s pre-compiled instead of being parsed by the web browser in the regular CSS!

Full Control over my design

Besides, I also decided to avoid any CSS library like Tailwind because I wanted full control over my website appearance, and I mostly take inspiration from technical documentations and Wikis like Fandom.

My ultimate goal is to create a minimalist design, so players will focus on my games more than the website’s appearance! 😅 The most important thing, though, is clearness and having a website incredibly quick! I want every future player (website user) to be able to click and access any information on this website in less than a second.

Stylesheet optimization

Also, I exclusively rely on system fonts, as I wanted to avoid using Google Fonts or any other font library. I think that system fonts are very good, and they are already installed on your computer, thus loaded instantly 😅!

GWeb animation

TypeScript

TypeScript is a particular case for my website! As much as I like to use programming languages (and the idea of writing JSX is brilliant in my opinion), I am still building a static website. Since my website doesn’t even require interactions, there is no need for front-end libraries like React.

Thus, my goal is to be as close as possible to a Zero JavaScript Website! For reference, the TypeScript language is transpiled into JavaScript, as web browsers can’t read TypeScript, which is why I say zero JavaScript 😉.