diff options
80 files changed, 90 insertions, 37 deletions
diff --git a/src/blog/2.6-years-of-web-design/img/devhive-index-concept1.png b/src/blog/2.6-years-of-web-design/img/devhive-index-concept1.png Binary files differdeleted file mode 100644 index 9b829e3..0000000 --- a/src/blog/2.6-years-of-web-design/img/devhive-index-concept1.png +++ /dev/null diff --git a/src/blog/2.6-years-of-web-design/img/devhive-index-concept1.webp b/src/blog/2.6-years-of-web-design/img/devhive-index-concept1.webp Binary files differnew file mode 100644 index 0000000..81415d7 --- /dev/null +++ b/src/blog/2.6-years-of-web-design/img/devhive-index-concept1.webp diff --git a/src/blog/2.6-years-of-web-design/img/devhive-index-concept2.png b/src/blog/2.6-years-of-web-design/img/devhive-index-concept2.png Binary files differdeleted file mode 100644 index eca9a62..0000000 --- a/src/blog/2.6-years-of-web-design/img/devhive-index-concept2.png +++ /dev/null diff --git a/src/blog/2.6-years-of-web-design/img/devhive-index-concept2.webp b/src/blog/2.6-years-of-web-design/img/devhive-index-concept2.webp Binary files differnew file mode 100644 index 0000000..9d7b90d --- /dev/null +++ b/src/blog/2.6-years-of-web-design/img/devhive-index-concept2.webp diff --git a/src/blog/2.6-years-of-web-design/img/devhive-index-concept3.png b/src/blog/2.6-years-of-web-design/img/devhive-index-concept3.png Binary files differdeleted file mode 100644 index 04ec1ef..0000000 --- a/src/blog/2.6-years-of-web-design/img/devhive-index-concept3.png +++ /dev/null diff --git a/src/blog/2.6-years-of-web-design/img/devhive-index-concept3.webp b/src/blog/2.6-years-of-web-design/img/devhive-index-concept3.webp Binary files differnew file mode 100644 index 0000000..e009e72 --- /dev/null +++ b/src/blog/2.6-years-of-web-design/img/devhive-index-concept3.webp diff --git a/src/blog/2.6-years-of-web-design/img/devhive-index-concept4.png b/src/blog/2.6-years-of-web-design/img/devhive-index-concept4.png Binary files differdeleted file mode 100644 index 234fd54..0000000 --- a/src/blog/2.6-years-of-web-design/img/devhive-index-concept4.png +++ /dev/null diff --git a/src/blog/2.6-years-of-web-design/img/devhive-index-concept4.webp b/src/blog/2.6-years-of-web-design/img/devhive-index-concept4.webp Binary files differnew file mode 100644 index 0000000..aaef358 --- /dev/null +++ b/src/blog/2.6-years-of-web-design/img/devhive-index-concept4.webp diff --git a/src/blog/2.6-years-of-web-design/img/devhive-index-concept5.png b/src/blog/2.6-years-of-web-design/img/devhive-index-concept5.png Binary files differdeleted file mode 100644 index 2b6fccf..0000000 --- a/src/blog/2.6-years-of-web-design/img/devhive-index-concept5.png +++ /dev/null diff --git a/src/blog/2.6-years-of-web-design/img/devhive-index-concept5.webp b/src/blog/2.6-years-of-web-design/img/devhive-index-concept5.webp Binary files differnew file mode 100644 index 0000000..c168941 --- /dev/null +++ b/src/blog/2.6-years-of-web-design/img/devhive-index-concept5.webp diff --git a/src/blog/2.6-years-of-web-design/img/v1.0-code block.png b/src/blog/2.6-years-of-web-design/img/v1.0-code block.png Binary files differdeleted file mode 100644 index 51dd24e..0000000 --- a/src/blog/2.6-years-of-web-design/img/v1.0-code block.png +++ /dev/null diff --git a/src/blog/2.6-years-of-web-design/img/v1.0-code_block.webp b/src/blog/2.6-years-of-web-design/img/v1.0-code_block.webp Binary files differnew file mode 100644 index 0000000..69d161f --- /dev/null +++ b/src/blog/2.6-years-of-web-design/img/v1.0-code_block.webp diff --git a/src/blog/2.6-years-of-web-design/img/v1.0-index-smallscreen.png b/src/blog/2.6-years-of-web-design/img/v1.0-index-smallscreen.png Binary files differdeleted file mode 100644 index 4ce79ac..0000000 --- a/src/blog/2.6-years-of-web-design/img/v1.0-index-smallscreen.png +++ /dev/null diff --git a/src/blog/2.6-years-of-web-design/img/v1.0-index-smallscreen.webp b/src/blog/2.6-years-of-web-design/img/v1.0-index-smallscreen.webp Binary files differnew file mode 100644 index 0000000..9fc7ff0 --- /dev/null +++ b/src/blog/2.6-years-of-web-design/img/v1.0-index-smallscreen.webp diff --git a/src/blog/2.6-years-of-web-design/img/v1.0-index.png b/src/blog/2.6-years-of-web-design/img/v1.0-index.png Binary files differdeleted file mode 100644 index 2ec997a..0000000 --- a/src/blog/2.6-years-of-web-design/img/v1.0-index.png +++ /dev/null diff --git a/src/blog/2.6-years-of-web-design/img/v1.0-index.webp b/src/blog/2.6-years-of-web-design/img/v1.0-index.webp Binary files differnew file mode 100644 index 0000000..25ee895 --- /dev/null +++ b/src/blog/2.6-years-of-web-design/img/v1.0-index.webp diff --git a/src/blog/2.6-years-of-web-design/img/v1.0-projects.png b/src/blog/2.6-years-of-web-design/img/v1.0-projects.png Binary files differdeleted file mode 100644 index 7e1b426..0000000 --- a/src/blog/2.6-years-of-web-design/img/v1.0-projects.png +++ /dev/null diff --git a/src/blog/2.6-years-of-web-design/img/v1.0-projects.webp b/src/blog/2.6-years-of-web-design/img/v1.0-projects.webp Binary files differnew file mode 100644 index 0000000..3ab46c3 --- /dev/null +++ b/src/blog/2.6-years-of-web-design/img/v1.0-projects.webp diff --git a/src/blog/2.6-years-of-web-design/img/v1.0-tutorial-page.png b/src/blog/2.6-years-of-web-design/img/v1.0-tutorial-page.png Binary files differdeleted file mode 100644 index e85a454..0000000 --- a/src/blog/2.6-years-of-web-design/img/v1.0-tutorial-page.png +++ /dev/null diff --git a/src/blog/2.6-years-of-web-design/img/v1.0-tutorial-page.webp b/src/blog/2.6-years-of-web-design/img/v1.0-tutorial-page.webp Binary files differnew file mode 100644 index 0000000..310cd48 --- /dev/null +++ b/src/blog/2.6-years-of-web-design/img/v1.0-tutorial-page.webp diff --git a/src/blog/2.6-years-of-web-design/img/v2.0-code block.png b/src/blog/2.6-years-of-web-design/img/v2.0-code block.png Binary files differdeleted file mode 100644 index 96fc554..0000000 --- a/src/blog/2.6-years-of-web-design/img/v2.0-code block.png +++ /dev/null diff --git a/src/blog/2.6-years-of-web-design/img/v2.0-code_block.webp b/src/blog/2.6-years-of-web-design/img/v2.0-code_block.webp Binary files differnew file mode 100644 index 0000000..3f086c8 --- /dev/null +++ b/src/blog/2.6-years-of-web-design/img/v2.0-code_block.webp diff --git a/src/blog/2.6-years-of-web-design/img/v2.0-index-smartphone.png b/src/blog/2.6-years-of-web-design/img/v2.0-index-smartphone.png Binary files differdeleted file mode 100644 index 3f4c5b8..0000000 --- a/src/blog/2.6-years-of-web-design/img/v2.0-index-smartphone.png +++ /dev/null diff --git a/src/blog/2.6-years-of-web-design/img/v2.0-index-smartphone.webp b/src/blog/2.6-years-of-web-design/img/v2.0-index-smartphone.webp Binary files differnew file mode 100644 index 0000000..53547aa --- /dev/null +++ b/src/blog/2.6-years-of-web-design/img/v2.0-index-smartphone.webp diff --git a/src/blog/2.6-years-of-web-design/img/v2.0-index.png b/src/blog/2.6-years-of-web-design/img/v2.0-index.png Binary files differdeleted file mode 100644 index 4c9e4b5..0000000 --- a/src/blog/2.6-years-of-web-design/img/v2.0-index.png +++ /dev/null diff --git a/src/blog/2.6-years-of-web-design/img/v2.0-index.webp b/src/blog/2.6-years-of-web-design/img/v2.0-index.webp Binary files differnew file mode 100644 index 0000000..ccebc63 --- /dev/null +++ b/src/blog/2.6-years-of-web-design/img/v2.0-index.webp diff --git a/src/blog/2.6-years-of-web-design/img/v2.0-resume.png b/src/blog/2.6-years-of-web-design/img/v2.0-resume.png Binary files differdeleted file mode 100644 index 64b3b52..0000000 --- a/src/blog/2.6-years-of-web-design/img/v2.0-resume.png +++ /dev/null diff --git a/src/blog/2.6-years-of-web-design/img/v2.0-resume.webp b/src/blog/2.6-years-of-web-design/img/v2.0-resume.webp Binary files differnew file mode 100644 index 0000000..0b6cb60 --- /dev/null +++ b/src/blog/2.6-years-of-web-design/img/v2.0-resume.webp diff --git a/src/blog/2.6-years-of-web-design/img/v2.1-index-smartphone.png b/src/blog/2.6-years-of-web-design/img/v2.1-index-smartphone.png Binary files differdeleted file mode 100644 index 241f089..0000000 --- a/src/blog/2.6-years-of-web-design/img/v2.1-index-smartphone.png +++ /dev/null diff --git a/src/blog/2.6-years-of-web-design/img/v2.1-index-smartphone.webp b/src/blog/2.6-years-of-web-design/img/v2.1-index-smartphone.webp Binary files differnew file mode 100644 index 0000000..d4330ed --- /dev/null +++ b/src/blog/2.6-years-of-web-design/img/v2.1-index-smartphone.webp diff --git a/src/blog/2.6-years-of-web-design/img/v2.2-index-footer-smallwidth.png b/src/blog/2.6-years-of-web-design/img/v2.2-index-footer-smallwidth.png Binary files differdeleted file mode 100644 index 8a8c2eb..0000000 --- a/src/blog/2.6-years-of-web-design/img/v2.2-index-footer-smallwidth.png +++ /dev/null diff --git a/src/blog/2.6-years-of-web-design/img/v2.2-index-footer-smallwidth.webp b/src/blog/2.6-years-of-web-design/img/v2.2-index-footer-smallwidth.webp Binary files differnew file mode 100644 index 0000000..618ac4a --- /dev/null +++ b/src/blog/2.6-years-of-web-design/img/v2.2-index-footer-smallwidth.webp diff --git a/src/blog/2.6-years-of-web-design/img/v2.2-index-full-header-smartphone.png b/src/blog/2.6-years-of-web-design/img/v2.2-index-full-header-smartphone.png Binary files differdeleted file mode 100644 index c4824fc..0000000 --- a/src/blog/2.6-years-of-web-design/img/v2.2-index-full-header-smartphone.png +++ /dev/null diff --git a/src/blog/2.6-years-of-web-design/img/v2.2-index-full-header-smartphone.webp b/src/blog/2.6-years-of-web-design/img/v2.2-index-full-header-smartphone.webp Binary files differnew file mode 100644 index 0000000..c91f936 --- /dev/null +++ b/src/blog/2.6-years-of-web-design/img/v2.2-index-full-header-smartphone.webp diff --git a/src/blog/2.6-years-of-web-design/img/v2.2-index-full-header.png b/src/blog/2.6-years-of-web-design/img/v2.2-index-full-header.png Binary files differdeleted file mode 100644 index 255577e..0000000 --- a/src/blog/2.6-years-of-web-design/img/v2.2-index-full-header.png +++ /dev/null diff --git a/src/blog/2.6-years-of-web-design/img/v2.2-index-full-header.webp b/src/blog/2.6-years-of-web-design/img/v2.2-index-full-header.webp Binary files differnew file mode 100644 index 0000000..f872fea --- /dev/null +++ b/src/blog/2.6-years-of-web-design/img/v2.2-index-full-header.webp diff --git a/src/blog/2.6-years-of-web-design/img/v2.2-index.png b/src/blog/2.6-years-of-web-design/img/v2.2-index.png Binary files differdeleted file mode 100644 index d3ff4f2..0000000 --- a/src/blog/2.6-years-of-web-design/img/v2.2-index.png +++ /dev/null diff --git a/src/blog/2.6-years-of-web-design/img/v2.2-index.webp b/src/blog/2.6-years-of-web-design/img/v2.2-index.webp Binary files differnew file mode 100644 index 0000000..9f05801 --- /dev/null +++ b/src/blog/2.6-years-of-web-design/img/v2.2-index.webp diff --git a/src/blog/2.6-years-of-web-design/img/v3.0-index-initial.png b/src/blog/2.6-years-of-web-design/img/v3.0-index-initial.png Binary files differdeleted file mode 100644 index d6211fd..0000000 --- a/src/blog/2.6-years-of-web-design/img/v3.0-index-initial.png +++ /dev/null diff --git a/src/blog/2.6-years-of-web-design/img/v3.0-index-initial.webp b/src/blog/2.6-years-of-web-design/img/v3.0-index-initial.webp Binary files differnew file mode 100644 index 0000000..734d835 --- /dev/null +++ b/src/blog/2.6-years-of-web-design/img/v3.0-index-initial.webp diff --git a/src/blog/2.6-years-of-web-design/img/v3.0-index.png b/src/blog/2.6-years-of-web-design/img/v3.0-index.png Binary files differdeleted file mode 100644 index 10d0992..0000000 --- a/src/blog/2.6-years-of-web-design/img/v3.0-index.png +++ /dev/null diff --git a/src/blog/2.6-years-of-web-design/img/v3.0-index.webp b/src/blog/2.6-years-of-web-design/img/v3.0-index.webp Binary files differnew file mode 100644 index 0000000..fc04986 --- /dev/null +++ b/src/blog/2.6-years-of-web-design/img/v3.0-index.webp diff --git a/src/blog/2.6-years-of-web-design/img/v3.1-index-smartphone.png b/src/blog/2.6-years-of-web-design/img/v3.1-index-smartphone.png Binary files differdeleted file mode 100644 index 83432cf..0000000 --- a/src/blog/2.6-years-of-web-design/img/v3.1-index-smartphone.png +++ /dev/null diff --git a/src/blog/2.6-years-of-web-design/img/v3.1-index-smartphone.webp b/src/blog/2.6-years-of-web-design/img/v3.1-index-smartphone.webp Binary files differnew file mode 100644 index 0000000..e8ccfbe --- /dev/null +++ b/src/blog/2.6-years-of-web-design/img/v3.1-index-smartphone.webp diff --git a/src/blog/2.6-years-of-web-design/img/v3.1-index.png b/src/blog/2.6-years-of-web-design/img/v3.1-index.png Binary files differdeleted file mode 100644 index f007cf9..0000000 --- a/src/blog/2.6-years-of-web-design/img/v3.1-index.png +++ /dev/null diff --git a/src/blog/2.6-years-of-web-design/img/v3.1-index.webp b/src/blog/2.6-years-of-web-design/img/v3.1-index.webp Binary files differnew file mode 100644 index 0000000..e9fc5de --- /dev/null +++ b/src/blog/2.6-years-of-web-design/img/v3.1-index.webp diff --git a/src/blog/2.6-years-of-web-design/img/v3.1-table.png b/src/blog/2.6-years-of-web-design/img/v3.1-table.png Binary files differdeleted file mode 100644 index 6893ae7..0000000 --- a/src/blog/2.6-years-of-web-design/img/v3.1-table.png +++ /dev/null diff --git a/src/blog/2.6-years-of-web-design/img/v3.1-table.webp b/src/blog/2.6-years-of-web-design/img/v3.1-table.webp Binary files differnew file mode 100644 index 0000000..6098941 --- /dev/null +++ b/src/blog/2.6-years-of-web-design/img/v3.1-table.webp diff --git a/src/blog/2.6-years-of-web-design/index.md b/src/blog/2.6-years-of-web-design/index.md index 109d6d7..2f75f91 100644 --- a/src/blog/2.6-years-of-web-design/index.md +++ b/src/blog/2.6-years-of-web-design/index.md @@ -19,11 +19,11 @@ There was no plan and I had never done anything like it, so a shitty website was Looking back at it now, that first design's color palette was comprised of three dull grey colors, which didn't contrast very much on the white font: - + For code blocks, the background was a dark-blue color with a blue-ish font color, absolutely horrible for readability: - + Although I wasn't the one to invent that color scheme, it was *inspired* from [xed](https://github.com/linuxmint/xed)'s Oblivion theme. @@ -31,18 +31,18 @@ It wasn't all completely bonkers, there were some not-so-ugly design decisions. Navigation was done with tabs, which look decently nice on a desktop. On blog posts, and especially on those with multiple pages, you would have the title on the left, and a close button on the right, "mimicking" a browser window. - + As you can imagine, this was a scalability nightmare. If the title was too long or there were too many pages, stuff would overlap in an unreadable manner: - + You know, if this website was published on [neocities](https://neocities.org/), my desktop-oriented unscaleable layout might've been seen as cool and novel... Thankfully (or maybe unfortunately), I didn't go down that road. Finally, tables, like those used in the "Projects" listing, were the absolute dumbest: - + As you can see, the design was overwhelmingly ugly, with many boneheaded decisions behind it. Did I mention every post had to be written entirely by hand in HTML, except for the headers and footers, which were [**generated client-side with JavaScript**](https://gitlab.com/Syndamia/syndamiadotcom/-/tree/v1.0/website/js)? @@ -60,15 +60,15 @@ There, he showed how to setup and use [ssg](https://www.romanzolotarev.com/ssg.h Turning to the actual website itself, now it looked quite pleasant, in the day at least: - + Rather than using multiple colors for different elements, I went for a monochrome "printed on a piece of paper" look. One might call that regression, but I'd like to think of it as minimalism. Looking at those same code blocks and tables: - - + + Ay, that's pretty clean! But it should remind you of something. Before, the only time I would work with Markdown files was in GitHub READMEs. @@ -78,7 +78,7 @@ Though that last part wasn't done by me, but by [sindresorhus](https://github.co As for the overall design, there isn't too much to say. Yes, the original tab idea kinda lived on, as those buttons at the top, and yes, it still wasn't scaleable, but now it didn't even try to be. - + Overall, this made it more "commercialized", soulless (assuming v1.0 had one) and plain old boring. It seems I hit the other end of the spectrum, from ugly but interesting to pleasing but dull. @@ -87,7 +87,7 @@ It seems I hit the other end of the spectrum, from ugly but interesting to pleas Over the following half a year, I wrote a couple more articles, but most importantly the styling was finally made scaleable: - + Ignoring my big fat head taking up 70% of the screen, the index page properly fit on a mobile screen! The navigation tabs weren't very symmetrically organized, but at least nothing was overlapping and overflowing over the screen. @@ -107,21 +107,21 @@ As you might imagine, I was the only one with any idea of web design, meaning I This time, however, I wanted to do it a bit more properly, so I made mockups of the final design. The first was done in [Pencil](https://pencil.evolus.vn/), a somewhat limited application for designing layouts: - + Pretty quickly I turned to actual HTML and CSS, because I needed a more realistic feel of how the actual elements would be laid out. Another idea that came up to mind was using a palette: a certain selection of colors for everything. After talking with the others, I found a decent selection of blue and orange sunset-y colours and got to work. The end result was this beauty: - + Although it looked pretty nice, we decided against it, since the focus was on the back-end, the front-end needed to be simpler. There are also some problems with the color scheme, but more on that later. Then I did what I had already done before: simplified the devil out of it. - + Now this looks way too cartoon-ish, you could make it with a steady hand and a ruler on a sheet of paper. However it made the others happy, so we went along with it. @@ -129,7 +129,7 @@ However it made the others happy, so we went along with it. The overall flatness and emptiness, and general boringness bugged me for a while. Some time later, after messing around for a couple hours, I came up with this: - + A much more modern-looking and feeling concept, completely different from it's comic roots. Unfortunately, we didn't go with it, later we found out it had some issues with certain elements, and the previous idea was already implemented. @@ -150,14 +150,14 @@ I needed something in between the second and third concepts, something which was Coincidentally, at the same time, I was working on a dark colored implementation of my website, using the gruvbox color. Putting two and two together, I came up with this thing; - + Now this looked really nice, somewhat professional even, was very simple and didn't hurt your eyes. Suffice to say, everyone loved it, and we redid everything to look like it. As for my own website, this is what it looked like by the time I made release 2.2: - + There is no point in showing code blocks or other elements, since it was just a change of colors. But boy oh boy how long it took to make such a simple change. @@ -169,27 +169,27 @@ Of course, there were changes, I wrote more posts, tweaked some of the styling, Still, I was yearning for something better. Scalability was continuing to be an issue, outside of the annoying misalignment, navigation buttons in the header or footer would disappear into the void if it's contents were too long: - + This example is unrealistic, but there were times where I wanted to put something longer in the footer button, and this issue arose. Also the whole button idea wasn't very expandable, what if I wanted to have not 6 but more than 20 buttons in the header up top? - + And don't get me started on how comically bad this is on mobile: - + Something needed to change yet again, and something did. A year and a third later, on [3 July 2022](https://gitlab.com/Syndamia/syndamiadotcom/-/commit/bde3ebdea6310c891b7e38185906d1a1e03977e4), I went away with the tabbed-like button layout, and opted for a dead simple sidebar: - + About that useless right border and the weird choice for only left and bottom borders on the sidebar: I wanted some separation for the sidebar and I wanted more "fun" in the overall design. Most of the inspiration for those came from [Julia Evan's blog](https://jvns.ca/), where there is a big orange ribbon running on the sides and across the page. Over time I did more tweaking on the colors and layout of everything, so by the time I created release 3.0, it looked like this: - + A good question you might be asking yourself is "How is this supposed to be scaleable?" The answer is that it kinda of wasn't, at the time. @@ -206,17 +206,17 @@ But that completely when over my head when I initially did that 3.0 redesign. Fortunately, it later came back. It might've been four and a half months later, but I finally [added color separation between the background and article and navbar](https://gitlab.com/Syndamia/syndamiadotcom/-/commit/55afc85bf7da9c0ed5e8859027080aebfa55ec50). - + And about that unfixed scalability? Well, I fixed it, now on a mobile devices, the navbar stays up top, but is shrunk and can be expanded with a button: - + Another notable styling change was in tables. I pretty much stole the design from [LEMMiNO](https://www.lemmi.no/)'s website: - + Finally, probably the most important change of it all, before I used some bash scripts to automate certain actions in the result HTML files, like generating the description automatically. Now, this was all done with [awk](https://www.gnu.org/software/gawk/manual/gawk.html), a programming language specifically designed for making text changes to files. diff --git a/src/blog/mundus-first-shot-at-gamedev/img/boulder-tile.png b/src/blog/mundus-first-shot-at-gamedev/img/boulder-tile.png Binary files differdeleted file mode 100644 index a5db10a..0000000 --- a/src/blog/mundus-first-shot-at-gamedev/img/boulder-tile.png +++ /dev/null diff --git a/src/blog/mundus-first-shot-at-gamedev/img/boulder-tile.webp b/src/blog/mundus-first-shot-at-gamedev/img/boulder-tile.webp Binary files differnew file mode 100644 index 0000000..d9af591 --- /dev/null +++ b/src/blog/mundus-first-shot-at-gamedev/img/boulder-tile.webp diff --git a/src/blog/mundus-first-shot-at-gamedev/img/crafting-window.png b/src/blog/mundus-first-shot-at-gamedev/img/crafting-window.png Binary files differdeleted file mode 100644 index 61a7127..0000000 --- a/src/blog/mundus-first-shot-at-gamedev/img/crafting-window.png +++ /dev/null diff --git a/src/blog/mundus-first-shot-at-gamedev/img/crafting-window.webp b/src/blog/mundus-first-shot-at-gamedev/img/crafting-window.webp Binary files differnew file mode 100644 index 0000000..e457cff --- /dev/null +++ b/src/blog/mundus-first-shot-at-gamedev/img/crafting-window.webp diff --git a/src/blog/mundus-first-shot-at-gamedev/img/create-new-game.png b/src/blog/mundus-first-shot-at-gamedev/img/create-new-game.png Binary files differdeleted file mode 100644 index fe8d672..0000000 --- a/src/blog/mundus-first-shot-at-gamedev/img/create-new-game.png +++ /dev/null diff --git a/src/blog/mundus-first-shot-at-gamedev/img/create-new-game.webp b/src/blog/mundus-first-shot-at-gamedev/img/create-new-game.webp Binary files differnew file mode 100644 index 0000000..50c789e --- /dev/null +++ b/src/blog/mundus-first-shot-at-gamedev/img/create-new-game.webp diff --git a/src/blog/mundus-first-shot-at-gamedev/img/grass-tile.png b/src/blog/mundus-first-shot-at-gamedev/img/grass-tile.png Binary files differdeleted file mode 100644 index 06c38dd..0000000 --- a/src/blog/mundus-first-shot-at-gamedev/img/grass-tile.png +++ /dev/null diff --git a/src/blog/mundus-first-shot-at-gamedev/img/grass-tile.webp b/src/blog/mundus-first-shot-at-gamedev/img/grass-tile.webp Binary files differnew file mode 100644 index 0000000..9cac2f7 --- /dev/null +++ b/src/blog/mundus-first-shot-at-gamedev/img/grass-tile.webp diff --git a/src/blog/mundus-first-shot-at-gamedev/img/inventory-menu.png b/src/blog/mundus-first-shot-at-gamedev/img/inventory-menu.png Binary files differdeleted file mode 100644 index 297d408..0000000 --- a/src/blog/mundus-first-shot-at-gamedev/img/inventory-menu.png +++ /dev/null diff --git a/src/blog/mundus-first-shot-at-gamedev/img/inventory-menu.webp b/src/blog/mundus-first-shot-at-gamedev/img/inventory-menu.webp Binary files differnew file mode 100644 index 0000000..c9026f4 --- /dev/null +++ b/src/blog/mundus-first-shot-at-gamedev/img/inventory-menu.webp diff --git a/src/blog/mundus-first-shot-at-gamedev/img/main-screen.png b/src/blog/mundus-first-shot-at-gamedev/img/main-screen.png Binary files differdeleted file mode 100644 index bcf13c5..0000000 --- a/src/blog/mundus-first-shot-at-gamedev/img/main-screen.png +++ /dev/null diff --git a/src/blog/mundus-first-shot-at-gamedev/img/main-screen.webp b/src/blog/mundus-first-shot-at-gamedev/img/main-screen.webp Binary files differnew file mode 100644 index 0000000..1e7b883 --- /dev/null +++ b/src/blog/mundus-first-shot-at-gamedev/img/main-screen.webp diff --git a/src/blog/mundus-first-shot-at-gamedev/img/map-menu.png b/src/blog/mundus-first-shot-at-gamedev/img/map-menu.png Binary files differdeleted file mode 100644 index f640abb..0000000 --- a/src/blog/mundus-first-shot-at-gamedev/img/map-menu.png +++ /dev/null diff --git a/src/blog/mundus-first-shot-at-gamedev/img/map-menu.webp b/src/blog/mundus-first-shot-at-gamedev/img/map-menu.webp Binary files differnew file mode 100644 index 0000000..546f58d --- /dev/null +++ b/src/blog/mundus-first-shot-at-gamedev/img/map-menu.webp diff --git a/src/blog/mundus-first-shot-at-gamedev/img/placeholder-grass-tile.jpg b/src/blog/mundus-first-shot-at-gamedev/img/placeholder-grass-tile.jpg Binary files differdeleted file mode 100644 index 3a6baf0..0000000 --- a/src/blog/mundus-first-shot-at-gamedev/img/placeholder-grass-tile.jpg +++ /dev/null diff --git a/src/blog/mundus-first-shot-at-gamedev/img/placeholder-grass-tile.webp b/src/blog/mundus-first-shot-at-gamedev/img/placeholder-grass-tile.webp Binary files differnew file mode 100644 index 0000000..ecb2586 --- /dev/null +++ b/src/blog/mundus-first-shot-at-gamedev/img/placeholder-grass-tile.webp diff --git a/src/blog/mundus-first-shot-at-gamedev/img/placeholder-rock-tile.jpg b/src/blog/mundus-first-shot-at-gamedev/img/placeholder-rock-tile.jpg Binary files differdeleted file mode 100644 index 408b522..0000000 --- a/src/blog/mundus-first-shot-at-gamedev/img/placeholder-rock-tile.jpg +++ /dev/null diff --git a/src/blog/mundus-first-shot-at-gamedev/img/placeholder-rock-tile.webp b/src/blog/mundus-first-shot-at-gamedev/img/placeholder-rock-tile.webp Binary files differnew file mode 100644 index 0000000..cdbf936 --- /dev/null +++ b/src/blog/mundus-first-shot-at-gamedev/img/placeholder-rock-tile.webp diff --git a/src/blog/mundus-first-shot-at-gamedev/img/small-game-window.png b/src/blog/mundus-first-shot-at-gamedev/img/small-game-window.png Binary files differdeleted file mode 100644 index 8af9885..0000000 --- a/src/blog/mundus-first-shot-at-gamedev/img/small-game-window.png +++ /dev/null diff --git a/src/blog/mundus-first-shot-at-gamedev/img/small-game-window.webp b/src/blog/mundus-first-shot-at-gamedev/img/small-game-window.webp Binary files differnew file mode 100644 index 0000000..4c99071 --- /dev/null +++ b/src/blog/mundus-first-shot-at-gamedev/img/small-game-window.webp diff --git a/src/blog/mundus-first-shot-at-gamedev/img/tree-tile.png b/src/blog/mundus-first-shot-at-gamedev/img/tree-tile.png Binary files differdeleted file mode 100644 index fcfcadd..0000000 --- a/src/blog/mundus-first-shot-at-gamedev/img/tree-tile.png +++ /dev/null diff --git a/src/blog/mundus-first-shot-at-gamedev/img/tree-tile.webp b/src/blog/mundus-first-shot-at-gamedev/img/tree-tile.webp Binary files differnew file mode 100644 index 0000000..b07fd56 --- /dev/null +++ b/src/blog/mundus-first-shot-at-gamedev/img/tree-tile.webp diff --git a/src/blog/mundus-first-shot-at-gamedev/index.md b/src/blog/mundus-first-shot-at-gamedev/index.md index 2c623e5..cdde5a3 100644 --- a/src/blog/mundus-first-shot-at-gamedev/index.md +++ b/src/blog/mundus-first-shot-at-gamedev/index.md @@ -36,9 +36,9 @@ Nevertheless, this journey was very important to me, hence writing this multi-pa ## Screenshots <div style="display: flex; overflow-x: scroll; align-items: center"> - <img src="./img/small-game-window.png" style="height: 100%; flex: 1; margin-right: 0.5em"> - <img src="./img/map-menu.png" style="height: 100%; flex: 1; margin-right: 0.5em"> - <img src="./img/inventory-menu.png" style="height: 100%; flex: 1;"> + <img src="./img/small-game-window.webp" style="height: 100%; flex: 1; margin-right: 0.5em"> + <img src="./img/map-menu.webp" style="height: 100%; flex: 1; margin-right: 0.5em"> + <img src="./img/inventory-menu.webp" style="height: 100%; flex: 1;"> </div> *Screenshots are made on Linux Mint Cinnamon with the Mint-Y theme* diff --git a/src/blog/mundus-first-shot-at-gamedev/timeline.md b/src/blog/mundus-first-shot-at-gamedev/timeline.md index cb3da01..38b3620 100644 --- a/src/blog/mundus-first-shot-at-gamedev/timeline.md +++ b/src/blog/mundus-first-shot-at-gamedev/timeline.md @@ -26,7 +26,7 @@ Finally, it was time to plan the actual game. So far I have only done preparation but on this day, I started actual programming. The UI and most of the mechanics were completely sketched. -Around a week later I also drew the first proper textures for the game world: a [tile of grass](https://gitlab.com/Syndamia/IT-kariera/-/blob/a100f71372496ba89e26fedc520edcefd2442848/Year%202/Software%20development/Mundus/Mundus/Icons/Land/Ground/grass.png) <img src="./img/grass-tile.png" class="pixelated-render"> and a [tile of grass with a boulder on top](https://gitlab.com/Syndamia/IT-kariera/-/blob/a100f71372496ba89e26fedc520edcefd2442848/Year%202/Software%20development/Mundus/Mundus/Icons/Land/Ground/boulder.png) <img src="./img/boulder-tile.png" class="pixelated-render">. These replaced the [grass](https://gitlab.com/Syndamia/IT-kariera/-/blob/7b2c8cbc1d6adb874ca6a41f2871ea1950866d70/Year%202/Software%20development/Project/Mundus/Mundus/Views/Icons/Land/Ground/grass.jpg) <img src="./img/placeholder-grass-tile.jpg" class="pixelated-render"> and [rock](https://gitlab.com/Syndamia/IT-kariera/-/blob/7b2c8cbc1d6adb874ca6a41f2871ea1950866d70/Year%202/Software%20development/Project/Mundus/Mundus/Views/Icons/Land/Ground/rock.jpg) <img src="./img/placeholder-rock-tile.jpg" class="pixelated-render"> placeholder textures I made on the 29th. +Around a week later I also drew the first proper textures for the game world: a [tile of grass](https://gitlab.com/Syndamia/IT-kariera/-/blob/a100f71372496ba89e26fedc520edcefd2442848/Year%202/Software%20development/Mundus/Mundus/Icons/Land/Ground/grass.webp) <img src="./img/grass-tile.webp" class="pixelated-render"> and a [tile of grass with a boulder on top](https://gitlab.com/Syndamia/IT-kariera/-/blob/a100f71372496ba89e26fedc520edcefd2442848/Year%202/Software%20development/Mundus/Mundus/Icons/Land/Ground/boulder.webp) <img src="./img/boulder-tile.webp" class="pixelated-render">. These replaced the [grass](https://gitlab.com/Syndamia/IT-kariera/-/blob/7b2c8cbc1d6adb874ca6a41f2871ea1950866d70/Year%202/Software%20development/Project/Mundus/Mundus/Views/Icons/Land/Ground/grass.webp) <img src="./img/placeholder-grass-tile.jpg" class="pixelated-render"> and [rock](https://gitlab.com/Syndamia/IT-kariera/-/blob/7b2c8cbc1d6adb874ca6a41f2871ea1950866d70/Year%202/Software%20development/Project/Mundus/Mundus/Views/Icons/Land/Ground/rock.webp) <img src="./img/placeholder-rock-tile.jpg" class="pixelated-render"> placeholder textures I made on the 29th. Concerning the temporary textures, I just drew them in half an hour in GIMP, so I could test out some of the code. @@ -36,7 +36,7 @@ The proper textures, I believe, turned out fairly well, given that I've never be Slowly and steadily I had been making fine progress, but a lot of issues started to surface. As it turns out, I hadn't thought everything completely through, so I mostly went back to the drawing board. -But at the very least, I had some important systems in place, like breaking and placing stuff, proper movement through the map and using items. Also, I had drawn my favorite texture from the whole projects: [the tree](https://gitlab.com/Syndamia/Mundus/-/blob/c47a34847e52ef76361394dba2c4f524a56d1b92/Mundus/Icons/Land/Items/tree.png) <img src="./img/tree-tile.png" class="pixelated-render">. +But at the very least, I had some important systems in place, like breaking and placing stuff, proper movement through the map and using items. Also, I had drawn my favorite texture from the whole projects: [the tree](https://gitlab.com/Syndamia/Mundus/-/blob/c47a34847e52ef76361394dba2c4f524a56d1b92/Mundus/Icons/Land/Items/tree.webp) <img src="./img/tree-tile.webp" class="pixelated-render">. > ***06.04.2020*** Day 58 diff --git a/src/blog/mundus-first-shot-at-gamedev/user-interface.md b/src/blog/mundus-first-shot-at-gamedev/user-interface.md index 45fe7d1..8b8bb57 100644 --- a/src/blog/mundus-first-shot-at-gamedev/user-interface.md +++ b/src/blog/mundus-first-shot-at-gamedev/user-interface.md @@ -23,7 +23,7 @@ A lot of the topics covered are explained in more detail in [Basic Concepts](./b ## Main screen - + We start off with the main screen. @@ -31,7 +31,7 @@ Only the `Create a new game` button is implemented, although the `Settings` one ## Create new game - + Creating a game gives you a couple of options: @@ -47,7 +47,7 @@ Creating a game gives you a couple of options: ## Game Window - + After the world is generated, the game window opens. @@ -63,7 +63,7 @@ After that, you have the `Event log` button and some of the most recent events. ## Map menu - + The Map menu is an extension (to the left) of the normal game window. It cannot be opened at the same time as the inventory menu. @@ -71,13 +71,13 @@ At the top, you can see the ground layer tiles. Below it you can find the name o ## Inventory menu - + The Inventory menu is an extension (to the right) of the normal game window. From here you can store your items, organize them, craft and see information about a given item. ## Crafting window - + Every time you open the crafting menu, it automatically finds all items that you can craft using the items in your "Items inventory". diff --git a/src/blog/plan9-in-linux-mouse-menus/img/plan9-mouse2-menu.png b/src/blog/plan9-in-linux-mouse-menus/img/plan9-mouse2-menu.png Binary files differdeleted file mode 100644 index 0ece0a2..0000000 --- a/src/blog/plan9-in-linux-mouse-menus/img/plan9-mouse2-menu.png +++ /dev/null diff --git a/src/blog/plan9-in-linux-mouse-menus/img/plan9-mouse2-menu.webp b/src/blog/plan9-in-linux-mouse-menus/img/plan9-mouse2-menu.webp Binary files differnew file mode 100644 index 0000000..aefc396 --- /dev/null +++ b/src/blog/plan9-in-linux-mouse-menus/img/plan9-mouse2-menu.webp diff --git a/src/blog/plan9-in-linux-mouse-menus/img/plan9-mouse3-menu.png b/src/blog/plan9-in-linux-mouse-menus/img/plan9-mouse3-menu.png Binary files differdeleted file mode 100644 index d780393..0000000 --- a/src/blog/plan9-in-linux-mouse-menus/img/plan9-mouse3-menu.png +++ /dev/null diff --git a/src/blog/plan9-in-linux-mouse-menus/img/plan9-mouse3-menu.webp b/src/blog/plan9-in-linux-mouse-menus/img/plan9-mouse3-menu.webp Binary files differnew file mode 100644 index 0000000..e3b1e9d --- /dev/null +++ b/src/blog/plan9-in-linux-mouse-menus/img/plan9-mouse3-menu.webp diff --git a/src/blog/plan9-in-linux-mouse-menus/index.md b/src/blog/plan9-in-linux-mouse-menus/index.md index ec33709..a0ba39f 100644 --- a/src/blog/plan9-in-linux-mouse-menus/index.md +++ b/src/blog/plan9-in-linux-mouse-menus/index.md @@ -30,7 +30,7 @@ The left mouse button (button 1), works as expected: you use it to select text. Pressing and holding down the right mouse button (button 3), shows all possible window options: - + For example, if you release it while hovering "New", you cursor will change, and after holding it down again, dragging out will result in a grey rectangle representing the dimensions (and position) of a new terminal window (releasing the button creates that new window). @@ -43,7 +43,7 @@ Your browser doesn't support the video tag Finally, the middle mouse button (button 2), shows text-control options, which can be executed on selected text: - + You'll recognise `cut`, `paste` and `snarf`[^snarf], the latter being just another word for copy. Since every modern window manager supports those in some form, I'll concentrate on the others. diff --git a/src/blog/slideshow-presentations-in-the-browser/index.md b/src/blog/slideshow-presentations-in-the-browser/index.md new file mode 100644 index 0000000..aa7bde8 --- /dev/null +++ b/src/blog/slideshow-presentations-in-the-browser/index.md @@ -0,0 +1,53 @@ +# Slideshow presentations in the browser + +Conventional tools for slideshow presentations are pretty horrible, at least compatibility-wise. +I've made my fair share of presentations, especially during high-school, usually I ran a much newer Microsoft Office version than was available on the school computers (on which I would present). +Everything "worked", but often a lot of features like animations and formattings were completely wrong. + +Visual Basic for Applications, however, was despicable. +For an assignment I worked on an interactive [Who wants to be a millionare presentations](TODO), with buttons, sound effects and all of the pazzaz. +After 3 days of work, in the final hour of work, Microsoft Office crashed so bad, all of the code was deleted and unrecoverable. + +Switching to Linux didn't make the situation any greener. +Some of the blame should be aleviated, since I kinda had to use [Microsoft's proprietary formats](TODO), which are [**the worst**](TODO). +At the time (~2020) I tried out most available FOSS solutions, but the best one was LibreOffice, which still had issues with Bulgarian text, maths fonts and general element placement. +Times have passed, so it's probably a good idea to revisit them, however I doubt anything groundbreaking has happened. + +For a while I had to make my presentations in [Microsoft Office 365](TODO) (which my highschool had a license for, so I could use it freely), which did the job. +But now I'm out of (high)school, if I'm gonna make a presentation, it's going to be on a topic I care about and shared with people who might also care, and the process of creating and presenting had to be simplified. + +Shopping for a new slideshow tool began with [ozlab's](TODO) list of [linux.conf.au presentation slides](https://lca-kernel.ozlabs.org/). +Snooping around the files, we learn this: + +| Tool |Sum|2022|2021|2020|2019|2018| +|------------------------|---|----|----|----|----|----| +|LibreOffice Impress | 10| 2 | 1 | 1 | 3 | 3 | +|Microsoft Powerpoint 365| 1| 1 | | | | | +|Microsoft Poweropint | 3| | 1 | | | 2 | +|LaTeX | 3| 1 | 1 | | 1 | | +|Google Slides | 9| 3 | 4 | 1 | 1 | | +|macOS Quartz | 2| 1 | 1 | | | | +|reveal.js | 1| | | 1 | | | +|Markdown | 1| | | 1 | | | +|iText | 1| | | | | 1 | + +LibreOffice was most widely used! +However, that still doesn't fix my problem. +Proprietaries are a no-go, TeX is fantastic for papers but it isn't very visually appealing (without some work) and there are easier ways to format text, and Markdown needs to be somehow extended to work for a presentation (more on that later). + +What's left is reveal.js, hinting at the idea of web browsers (direct HTML, not like MS Office 365) as presentation tools. +As an overall replacement, reveal.js is great, especially when paired with their (non-free) web GUI, [slides.com](https://slides.com/). +It supports arbitrary placement of elements, (obviously) text, images, code blocks, transitions and animations and everything else you might want. + +On the other hand, elementary observations reveal that most presentations from linux.conf.au, are shared as a PDF file. +Furthermore, most of the slides have only a heading, some text (often in the form as an item list) and an image or two, either below the text, or taking up the whole slide. +This rules out animations, transitions and arbitrary placement! +Additionally, this seems to apply to most presentations in other conferences, like [strangeloop](TODO) or [TODO]. + +Thus, the new slideshow system needs to be significantly simpler, mostly wrapping HTML into slides and adding some additional options to present, export to PDF and so on. +Moreover, I have a website, I can create HTML text paragraphs, lists, images and so on very easily with Markdown, wouldn't it be awesome if I could pretty much write an article, which is then split into slides? + +There are actually [quite a lot](https://gist.github.com/johnloy/27dd124ad40e210e91c70dd1c24ac8c8) of utilities that support this. +Most are web or electron based apps, which I would like to avoid, since I write with vim. +Most of the command-line tools, that convert Markdown to HTML, use either [Remark.js](https://github.com/gnab/remark) or [mdx](TODO) [TODO INEFFICIENCY COMPARISON] + |
