diff options
| Commit | fe86d9b36240376f6eba3ea719da7f377bc93ef3 (patch) | |
|---|---|---|
| Author | 2022-12-23 17:39:53 +0200 | |
| Committer | 2022-12-23 17:39:53 +0200 | |
| Files | f341e8c3b7525a94316f6af97517ffa6180a37e9 | |
| syndamia.com-fe86d9b36240376f6eba3ea719da7f377bc93ef3.tar syndamia.com-fe86d9b36240376f6eba3ea719da7f377bc93ef3.tar.gz syndamia.com-fe86d9b36240376f6eba3ea719da7f377bc93ef3.zip | ||
| Parent | 501942b638c34582de2f73dc31423c9322eb81fd (diff) | |
[blog] Added 2.6 years of webdesign blog post and removed old syndamiadotcom post
62 files changed, 261 insertions, 235 deletions
diff --git a/src/blog.md b/src/blog.md index 62c8a6f..8e2b758 100644 --- a/src/blog.md +++ b/src/blog.md @@ -6,6 +6,9 @@ Articles detailing personal experiences or exploration of certain topics. #### *2022* +&&gb [2.6 years of web design](/blog/2.6-years-of-web-design) +: `Shallow dive` `Web design` + &&gb [When a language forces simpler thinking](/blog/when-a-language-forces-simpler-thinking) : `Shallow dive` `Advent of Code` `Common Lisp` 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 differnew file mode 100644 index 0000000..9b829e3 --- /dev/null +++ b/src/blog/2.6-years-of-web-design/img/devhive-index-concept1.png 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 differnew file mode 100644 index 0000000..eca9a62 --- /dev/null +++ b/src/blog/2.6-years-of-web-design/img/devhive-index-concept2.png 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 differnew file mode 100644 index 0000000..04ec1ef --- /dev/null +++ b/src/blog/2.6-years-of-web-design/img/devhive-index-concept3.png 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 differnew file mode 100644 index 0000000..234fd54 --- /dev/null +++ b/src/blog/2.6-years-of-web-design/img/devhive-index-concept4.png 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 differnew file mode 100644 index 0000000..2b6fccf --- /dev/null +++ b/src/blog/2.6-years-of-web-design/img/devhive-index-concept5.png 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 differnew file mode 100644 index 0000000..51dd24e --- /dev/null +++ b/src/blog/2.6-years-of-web-design/img/v1.0-code block.png 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 differnew file mode 100644 index 0000000..4ce79ac --- /dev/null +++ b/src/blog/2.6-years-of-web-design/img/v1.0-index-smallscreen.png 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 differnew file mode 100644 index 0000000..2ec997a --- /dev/null +++ b/src/blog/2.6-years-of-web-design/img/v1.0-index.png 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 differnew file mode 100644 index 0000000..7e1b426 --- /dev/null +++ b/src/blog/2.6-years-of-web-design/img/v1.0-projects.png 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 differnew file mode 100644 index 0000000..e85a454 --- /dev/null +++ b/src/blog/2.6-years-of-web-design/img/v1.0-tutorial-page.png 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 differnew file mode 100644 index 0000000..96fc554 --- /dev/null +++ b/src/blog/2.6-years-of-web-design/img/v2.0-code block.png 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 differnew file mode 100644 index 0000000..3f4c5b8 --- /dev/null +++ b/src/blog/2.6-years-of-web-design/img/v2.0-index-smartphone.png 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 differnew file mode 100644 index 0000000..4c9e4b5 --- /dev/null +++ b/src/blog/2.6-years-of-web-design/img/v2.0-index.png 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 differnew file mode 100644 index 0000000..64b3b52 --- /dev/null +++ b/src/blog/2.6-years-of-web-design/img/v2.0-resume.png 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 differnew file mode 100644 index 0000000..241f089 --- /dev/null +++ b/src/blog/2.6-years-of-web-design/img/v2.1-index-smartphone.png 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 differnew file mode 100644 index 0000000..8a8c2eb --- /dev/null +++ b/src/blog/2.6-years-of-web-design/img/v2.2-index-footer-smallwidth.png 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 differnew file mode 100644 index 0000000..c4824fc --- /dev/null +++ b/src/blog/2.6-years-of-web-design/img/v2.2-index-full-header-smartphone.png 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 differnew file mode 100644 index 0000000..255577e --- /dev/null +++ b/src/blog/2.6-years-of-web-design/img/v2.2-index-full-header.png 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 differnew file mode 100644 index 0000000..d3ff4f2 --- /dev/null +++ b/src/blog/2.6-years-of-web-design/img/v2.2-index.png 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 differnew file mode 100644 index 0000000..d6211fd --- /dev/null +++ b/src/blog/2.6-years-of-web-design/img/v3.0-index-initial.png 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 differnew file mode 100644 index 0000000..10d0992 --- /dev/null +++ b/src/blog/2.6-years-of-web-design/img/v3.0-index.png 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 differnew file mode 100644 index 0000000..83432cf --- /dev/null +++ b/src/blog/2.6-years-of-web-design/img/v3.1-index-smartphone.png 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 differnew file mode 100644 index 0000000..f007cf9 --- /dev/null +++ b/src/blog/2.6-years-of-web-design/img/v3.1-index.png 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 differnew file mode 100644 index 0000000..6893ae7 --- /dev/null +++ b/src/blog/2.6-years-of-web-design/img/v3.1-table.png diff --git a/src/blog/2.6-years-of-web-design/index.md b/src/blog/2.6-years-of-web-design/index.md new file mode 100644 index 0000000..ed6effa --- /dev/null +++ b/src/blog/2.6-years-of-web-design/index.md @@ -0,0 +1,255 @@ +# 2.6 years of web design + +[**Article Source**](https://gitlab.com/Syndamia/syndamiadotcom/-/blob/master/src/blog/2.6-years-of-web-design/index.md) + +**Created: 23.12.2022** || **Edited: 23.12.2022** + +<br> + +On 17 May 2020 I [pushed the very first version of this website](https://gitlab.com/Syndamia/syndamiadotcom/-/commit/f2d3991cf3381d4d794b3faa2890439bb70af729), which went live 3 days later. +The whole idea of making my own website came on a whim: I had recently turned 18 and spent some of my money on getting a small VPS (which was primarily used for cloud storage). +There was no plan and I had never done anything like it, so a shitty website was to be expected. + +## Contents + +1. [v1.0](#v1.0) +2. [v2.0](#v2.0) +3. [v2.1](#v2.1) +4. [v2.2](#v2.2) +5. [v3.0](#v3.0) +6. [v3.1](#v3.1) +7. [now](#now) +8. [Appendix](#appendix) + +### v1.0 + +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. + +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)? + +Nonetheless, it served as a good starting point and stepping stone, for my web development *adventures*. + +### v2.0 + +Less than two months later, on 21 July, [I did a complete redesign](https://gitlab.com/Syndamia/syndamiadotcom/-/commit/64fbbd514733e42dd047bf65c511563a84ebd629). +To more easily separate the two, I decided to use [releases](https://gitlab.com/Syndamia/syndamiadotcom/-/releases), where a major version would signify a major styling change, and minor versions would be reserved for other important changes, like how the whole website is generated. + +Speaking of generated, I actually went away with the old "system" of manual labour, and turned to technology for aid. +It's all thanks to [Wolfgang's Channel](https://www.youtube.com/@WolfgangsChannel)'s tutorial on making a ["Fast & Minimal Blog"](https://www.youtube.com/watch?v=N_ttw2Dihn8). +There, he showed how to setup and use [ssg](https://www.romanzolotarev.com/ssg.html) with [lowdown](https://kristaps.bsd.lv/lowdown/), a combination that still powers this website. + +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. +So, with that association in place, replicating GitHub's style was a natural choice. +Though that last part wasn't done by me, but by [sindresorhus](https://github.com/sindresorhus/github-markdown-css). + +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. + +### v2.1 + +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. + +### v2.2 + +Still, by that time I started to get criminally bored by that black and white appearance. +As an avid fan of not hurting my eyes and [gruvbox](https://github.com/morhetz/gruvbox), a color overhaul needed to be done. + +But I'm getting ahead of myself, we need to sidetrack to a project I was working on at the time of [2.1's release](https://gitlab.com/Syndamia/syndamiadotcom/-/releases/v2.1): [DevHive](https://github.com/Team-Kaleidoscope). +Sparing you the details, it was a social media app, with detached front-end and back-end. +Me and two other guys worked on it for about 5 months, from December 2020 to April 2021, as a course project. + +Up until this point, the course I'm talking about almost didn't touch front-end design. +As you might imagine, I was the only one with any idea of web design, meaning I was the "lead designer". + +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. + +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. + +Why am I telling you all of this? +I believe those concepts served as good teaching tools and displayed very well how my design sense changed and improved. + +The second showed how certain color contrasts are too distracting, like vibrant orange borders on dark blue background. +The third scheme really showed how separation between items comes not only from shape, but also from overall color composition, and how both come hand in hand. +The fourth hinted at the idea of height, how certain elements need to look and feel above others. + +Of course, this isn't novel in any way, real designers probably learned these ideas in the very beginning. +But as someone who isn't really interested enough to spend time on proper education and training, these were very important notions. + +Some time later, we were required to change the design, so I got to thinking. +I needed something in between the second and third concepts, something which wasn't as flat as the third, but also wasn't as noisy/heavy as the second. + +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. +That's where everything stayed for a while. + +### v3.0 + +Of course, there were changes, I wrote more posts, tweaked some of the styling, hell, I even started adding (**non required**) JavaScript functionality. +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. +On small screens, the sidebar was placed at the bottom of the page, that's it. +However this didn't address the issue, just temporarily avoided it. + +### v3.1 + +The keen eyed among you might've been asking an even better question "Did you learn nothing?" and the answer would be an unsure "No" + +The whole point of DevHive's final redesign was to use colors for better separation between items on a page, the final two concepts taught me that you need to separate different elements of a page, and to do that you need to both utilize color and borders. +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. +awk's flexibility permitted me to create stuff like [the slide presentation system](/talks/demo.html) without too much trouble. + +### now + +As of the writing of this post, not too much has changed since the last release. +There have been new posts, like this one and [Taming the Fun-too](/blog/taming-the-fun-too) but the overall design is here to stay, at least until I learn more about creating web styles and/or get bored of the current one. + +Happy holidays everyone! + +### Appendix + +This post has been in the works since 01 August 2020. +At the time it was just called ["syndamiadotcom"](https://gitlab.com/Syndamia/syndamiadotcom/-/tree/501942b638c34582de2f73dc31423c9322eb81fd/src/blog/syndamiadotcom) and was listed under the now defunct "Projects" section. +It was actually still available on the website, under `/blog/syndamiadotcom/`, but I didn't list it in the blogs page. + +That first iteration looked at the layout in a much stiffer and uninteresting way. +I was talking about what exact color codes I used for crying out loud. +But it was left as-is because I struggled on how to approach it. +I'm still not entirely happy with this version either, [v2.2](#v2.2) was probably the most interesting and valuable part of the whole thing and the rest was fairly meh. + +Oh well, maybe I'll rewrite it again one day. +However, for the time being, I believe it's better for me to expect a bit less and just put stuff out there. +As you saw, learning the little I know about web design was a slow trial and error process that took over 2 years (and is still ongoing). +The same will happen with making blog posts and other articles. +I'm not a writer and I'm not interested enough to learn things properly. + +*P.S.* Expect this post to be updated in the future, when I make new releases! diff --git a/src/blog/index.md b/src/blog/index.md index 62c8a6f..8e2b758 100644 --- a/src/blog/index.md +++ b/src/blog/index.md @@ -6,6 +6,9 @@ Articles detailing personal experiences or exploration of certain topics. #### *2022* +&&gb [2.6 years of web design](/blog/2.6-years-of-web-design) +: `Shallow dive` `Web design` + &&gb [When a language forces simpler thinking](/blog/when-a-language-forces-simpler-thinking) : `Shallow dive` `Advent of Code` `Common Lisp` diff --git a/src/blog/syndamiadotcom/img/00-40-80.png b/src/blog/syndamiadotcom/img/00-40-80.png Binary files differdeleted file mode 100644 index ffc2a3d..0000000 --- a/src/blog/syndamiadotcom/img/00-40-80.png +++ /dev/null diff --git a/src/blog/syndamiadotcom/img/28-2c-34.png b/src/blog/syndamiadotcom/img/28-2c-34.png Binary files differdeleted file mode 100644 index 14d6a06..0000000 --- a/src/blog/syndamiadotcom/img/28-2c-34.png +++ /dev/null diff --git a/src/blog/syndamiadotcom/img/47-47-47.png b/src/blog/syndamiadotcom/img/47-47-47.png Binary files differdeleted file mode 100644 index 9ebb15d..0000000 --- a/src/blog/syndamiadotcom/img/47-47-47.png +++ /dev/null diff --git a/src/blog/syndamiadotcom/img/70-70-70.png b/src/blog/syndamiadotcom/img/70-70-70.png Binary files differdeleted file mode 100644 index aeb167f..0000000 --- a/src/blog/syndamiadotcom/img/70-70-70.png +++ /dev/null diff --git a/src/blog/syndamiadotcom/img/ab-b2-bf.png b/src/blog/syndamiadotcom/img/ab-b2-bf.png Binary files differdeleted file mode 100644 index 6059748..0000000 --- a/src/blog/syndamiadotcom/img/ab-b2-bf.png +++ /dev/null diff --git a/src/blog/syndamiadotcom/img/about-v2.png b/src/blog/syndamiadotcom/img/about-v2.png Binary files differdeleted file mode 100644 index 29da380..0000000 --- a/src/blog/syndamiadotcom/img/about-v2.png +++ /dev/null diff --git a/src/blog/syndamiadotcom/img/code-v1.png b/src/blog/syndamiadotcom/img/code-v1.png Binary files differdeleted file mode 100644 index f71270e..0000000 --- a/src/blog/syndamiadotcom/img/code-v1.png +++ /dev/null diff --git a/src/blog/syndamiadotcom/img/code-v2.png b/src/blog/syndamiadotcom/img/code-v2.png Binary files differdeleted file mode 100644 index a9dd1d1..0000000 --- a/src/blog/syndamiadotcom/img/code-v2.png +++ /dev/null diff --git a/src/blog/syndamiadotcom/img/contents-v2.png b/src/blog/syndamiadotcom/img/contents-v2.png Binary files differdeleted file mode 100644 index a92d187..0000000 --- a/src/blog/syndamiadotcom/img/contents-v2.png +++ /dev/null diff --git a/src/blog/syndamiadotcom/img/d6-d6-d6.png b/src/blog/syndamiadotcom/img/d6-d6-d6.png Binary files differdeleted file mode 100644 index a396e27..0000000 --- a/src/blog/syndamiadotcom/img/d6-d6-d6.png +++ /dev/null diff --git a/src/blog/syndamiadotcom/img/dd-dd-dd.png b/src/blog/syndamiadotcom/img/dd-dd-dd.png Binary files differdeleted file mode 100644 index 58c51c4..0000000 --- a/src/blog/syndamiadotcom/img/dd-dd-dd.png +++ /dev/null diff --git a/src/blog/syndamiadotcom/img/header-v2.png b/src/blog/syndamiadotcom/img/header-v2.png Binary files differdeleted file mode 100644 index 7bd54f9..0000000 --- a/src/blog/syndamiadotcom/img/header-v2.png +++ /dev/null diff --git a/src/blog/syndamiadotcom/img/introduction-v2.png b/src/blog/syndamiadotcom/img/introduction-v2.png Binary files differdeleted file mode 100644 index 3a9d411..0000000 --- a/src/blog/syndamiadotcom/img/introduction-v2.png +++ /dev/null diff --git a/src/blog/syndamiadotcom/img/iphonex-v1.png b/src/blog/syndamiadotcom/img/iphonex-v1.png Binary files differdeleted file mode 100644 index 6d36d86..0000000 --- a/src/blog/syndamiadotcom/img/iphonex-v1.png +++ /dev/null diff --git a/src/blog/syndamiadotcom/img/multi-back-btn-hover.png b/src/blog/syndamiadotcom/img/multi-back-btn-hover.png Binary files differdeleted file mode 100644 index 8f87983..0000000 --- a/src/blog/syndamiadotcom/img/multi-back-btn-hover.png +++ /dev/null diff --git a/src/blog/syndamiadotcom/img/multi-back-btn.png b/src/blog/syndamiadotcom/img/multi-back-btn.png Binary files differdeleted file mode 100644 index 5275090..0000000 --- a/src/blog/syndamiadotcom/img/multi-back-btn.png +++ /dev/null diff --git a/src/blog/syndamiadotcom/img/multi-title.png b/src/blog/syndamiadotcom/img/multi-title.png Binary files differdeleted file mode 100644 index 18c740c..0000000 --- a/src/blog/syndamiadotcom/img/multi-title.png +++ /dev/null diff --git a/src/blog/syndamiadotcom/img/next-page-v2.png b/src/blog/syndamiadotcom/img/next-page-v2.png Binary files differdeleted file mode 100644 index ff2c3f4..0000000 --- a/src/blog/syndamiadotcom/img/next-page-v2.png +++ /dev/null diff --git a/src/blog/syndamiadotcom/img/prev-page-v2.png b/src/blog/syndamiadotcom/img/prev-page-v2.png Binary files differdeleted file mode 100644 index eca3493..0000000 --- a/src/blog/syndamiadotcom/img/prev-page-v2.png +++ /dev/null diff --git a/src/blog/syndamiadotcom/img/sample-hyperlink-v1.png b/src/blog/syndamiadotcom/img/sample-hyperlink-v1.png Binary files differdeleted file mode 100644 index b4e7bca..0000000 --- a/src/blog/syndamiadotcom/img/sample-hyperlink-v1.png +++ /dev/null diff --git a/src/blog/syndamiadotcom/img/sample-page-v1.png b/src/blog/syndamiadotcom/img/sample-page-v1.png Binary files differdeleted file mode 100644 index 5aa1f28..0000000 --- a/src/blog/syndamiadotcom/img/sample-page-v1.png +++ /dev/null diff --git a/src/blog/syndamiadotcom/img/separator-v1.png b/src/blog/syndamiadotcom/img/separator-v1.png Binary files differdeleted file mode 100644 index 950d37f..0000000 --- a/src/blog/syndamiadotcom/img/separator-v1.png +++ /dev/null diff --git a/src/blog/syndamiadotcom/img/table-v1.png b/src/blog/syndamiadotcom/img/table-v1.png Binary files differdeleted file mode 100644 index 83a0072..0000000 --- a/src/blog/syndamiadotcom/img/table-v1.png +++ /dev/null diff --git a/src/blog/syndamiadotcom/img/table-v2.png b/src/blog/syndamiadotcom/img/table-v2.png Binary files differdeleted file mode 100644 index 9820b2f..0000000 --- a/src/blog/syndamiadotcom/img/table-v2.png +++ /dev/null diff --git a/src/blog/syndamiadotcom/img/tabs-v1-curr.png b/src/blog/syndamiadotcom/img/tabs-v1-curr.png Binary files differdeleted file mode 100644 index b8ad9e2..0000000 --- a/src/blog/syndamiadotcom/img/tabs-v1-curr.png +++ /dev/null diff --git a/src/blog/syndamiadotcom/img/tabs-v1-old.png b/src/blog/syndamiadotcom/img/tabs-v1-old.png Binary files differdeleted file mode 100644 index 92d3233..0000000 --- a/src/blog/syndamiadotcom/img/tabs-v1-old.png +++ /dev/null diff --git a/src/blog/syndamiadotcom/img/test-tabs.png b/src/blog/syndamiadotcom/img/test-tabs.png Binary files differdeleted file mode 100644 index 27e795b..0000000 --- a/src/blog/syndamiadotcom/img/test-tabs.png +++ /dev/null diff --git a/src/blog/syndamiadotcom/img/to-introduction-v2.png b/src/blog/syndamiadotcom/img/to-introduction-v2.png Binary files differdeleted file mode 100644 index d70c073..0000000 --- a/src/blog/syndamiadotcom/img/to-introduction-v2.png +++ /dev/null diff --git a/src/blog/syndamiadotcom/img/welcome-v1.png b/src/blog/syndamiadotcom/img/welcome-v1.png Binary files differdeleted file mode 100644 index 0c1c594..0000000 --- a/src/blog/syndamiadotcom/img/welcome-v1.png +++ /dev/null diff --git a/src/blog/syndamiadotcom/img/welcome-v2.png b/src/blog/syndamiadotcom/img/welcome-v2.png Binary files differdeleted file mode 100644 index 77935e5..0000000 --- a/src/blog/syndamiadotcom/img/welcome-v2.png +++ /dev/null diff --git a/src/blog/syndamiadotcom/img/xed-overview.png b/src/blog/syndamiadotcom/img/xed-overview.png Binary files differdeleted file mode 100644 index 9642203..0000000 --- a/src/blog/syndamiadotcom/img/xed-overview.png +++ /dev/null diff --git a/src/blog/syndamiadotcom/index.md b/src/blog/syndamiadotcom/index.md deleted file mode 100644 index 64a99df..0000000 --- a/src/blog/syndamiadotcom/index.md +++ /dev/null @@ -1,25 +0,0 @@ -# Introduction - syndamiadotcom - -[**Article Source**](https://gitlab.com/Syndamia/syndamiadotcom/-/blob/master/src/blog/syndamiadotcom/introduction.md) || [**GitLab Discussion**](https://gitlab.com/Syndamia/syndamiadotcom/-/issues/2) -<br> -**Created: 01 August 2020** || **Edited: 24 September 2020** - -[`Version 1 >`](./version1.html) - ---- - -One of my biggest networking and front-end projects is this very website. I started it on **25 May** as a place to talk about my project [Mundus](/projects/mundus/introduction.html). Over time it has become a **hub** for my **projects**, **tutorials**, **blog** and even **portfolio**. - -**Note**: Website versions differ mostly by **styling** and **system for managing content**. - -## Contents - -1. [Version 1](./version1.html) - 1. [Layout and navigation](./version1.html#Layout%20and%20navigation) - 2. [Style overview](./version1.html#Style%20overview) - 3. [Content management](./version1.html#Content%20management) - 4. [Why was it replaced?](./version1.html#Why%20was%20it%20replaced?) -2. [Version 2](./version2.html) - 1. [Layout and navigation](./version2.html#Layout%20and%20navigation) - 2. [Style overview](./version2.html#Style%20overview) - 3. [Content management](./version2.html#Content%20management) diff --git a/src/blog/syndamiadotcom/introduction.md b/src/blog/syndamiadotcom/introduction.md deleted file mode 100644 index 64a99df..0000000 --- a/src/blog/syndamiadotcom/introduction.md +++ /dev/null @@ -1,25 +0,0 @@ -# Introduction - syndamiadotcom - -[**Article Source**](https://gitlab.com/Syndamia/syndamiadotcom/-/blob/master/src/blog/syndamiadotcom/introduction.md) || [**GitLab Discussion**](https://gitlab.com/Syndamia/syndamiadotcom/-/issues/2) -<br> -**Created: 01 August 2020** || **Edited: 24 September 2020** - -[`Version 1 >`](./version1.html) - ---- - -One of my biggest networking and front-end projects is this very website. I started it on **25 May** as a place to talk about my project [Mundus](/projects/mundus/introduction.html). Over time it has become a **hub** for my **projects**, **tutorials**, **blog** and even **portfolio**. - -**Note**: Website versions differ mostly by **styling** and **system for managing content**. - -## Contents - -1. [Version 1](./version1.html) - 1. [Layout and navigation](./version1.html#Layout%20and%20navigation) - 2. [Style overview](./version1.html#Style%20overview) - 3. [Content management](./version1.html#Content%20management) - 4. [Why was it replaced?](./version1.html#Why%20was%20it%20replaced?) -2. [Version 2](./version2.html) - 1. [Layout and navigation](./version2.html#Layout%20and%20navigation) - 2. [Style overview](./version2.html#Style%20overview) - 3. [Content management](./version2.html#Content%20management) diff --git a/src/blog/syndamiadotcom/version1.md b/src/blog/syndamiadotcom/version1.md deleted file mode 100644 index 2c5c313..0000000 --- a/src/blog/syndamiadotcom/version1.md +++ /dev/null @@ -1,111 +0,0 @@ -# Version 1 - syndamiadotcom - -[**Article Source**](https://gitlab.com/Syndamia/syndamiadotcom/-/blob/master/src/blog/syndamiadotcom/version1.md) || [**GitLab Discussion**](https://gitlab.com/Syndamia/syndamiadotcom/-/issues/2) -<br> -**Created: 01 August 2020** || **Edited: 24 September 2020** - -[`< Introductoin`](./introduction.html) || [`Version 2 >`](./version2.html) - ---- - - - -[Version 1](https://gitlab.com/Syndamia/syndamiadotcom/-/releases/v1.0) is the **very first design** of this website. It's probably also the ugliest. - -It uses a tabbed layout with dark-themed colors. At the time, I didn't use any form of a content management system, meaning **I wrote each and every line of `HTML` by hand**. - -[Version 1](https://gitlab.com/Syndamia/syndamiadotcom/-/releases/v1.0) was used in production for close to **2 months**, from **25 May 2020** to **21 July 2020**. - -This was the **first serious website** I have ever done, so, at the time, I had only some extremely basic front-end skills and practically no knowledge for good web design. - -## Contents - -1. [Layout and navigation](#Layout%20and%20navigation) -2. [Style overview](#Style%20overview) -3. [Content management](#Content%20management) -4. [Why was it replaced?](#Why%20was%20it%20replaced?) - -## Layout and navigation - -I based it on the text editor I was using at the time: [xed](https://github.com/linuxmint/xed) (Oblivion theme). - - - -My vision was that I was going to use a similar **tab** style navigation between pages. - -Navigating between the main pages (*Home*, *About*, *Projects*, etc.) is also done through tabs. - - - -*Older version, where there were no Blog and Contact pages* - - - -*Newest version* - -Articles for *tutorials* and *projects* had two differences with the main pages: to the left of the tabs there is the title of the *tutorial/project* - - - -and to the right there is the back button, with which you could get back to the main pages. - - - - - -*The back button becomes red when hovering over it* - -## Style overview - -The colors are also based on [xed](https://github.com/linuxmint/xed). - -Pages are the place where the content is shown. They use a special background ( `#707070` ), **different from the body background** color ( `#474747`) on white foreground. - - - -Hyperlinks have the  `#d6d6d6` color, which is pretty **hard to see**. - - - -Code blocks and inline code are styled with the same ugly formatting: a  `#abb2bf` text on  `#282c34` background. - - - -*Code, taken from [Connecting](/tutorials/connect-to-mysql-in-csharp-ef/connecting.html) page in [Connect to Mysql in C# and Entity Framework](/tutorials/connect-to-mysql-in-csharp-ef/introduction.html) tutorial* - -Separators have the  `#dddddd` color with no shadow. - - - -Tables have **hidden borders** with centered text in them. At the time, the only place you could find tables were in the *Tutorials*, *Projects* and *Resume* pages, where certain rows that needed borders had a **row with a separator** between them. - - - -## Content management - -This version **didn't use any content management** of any shape or form. All pages were written in HTML **manually**. - -Later in it's lifespan the **header** and **footer** were made to be **generated through (bad) `JavaScript` code**. - -## Why was it replaced? - -This version was discontinued for three main reasons: - -- **First**, having to **write the `HTML`** code for **each new page** from scratch manually was very laborious - -- **Second**, **it was ugly**, the design was rushed and poorly implemented - -- **Third**, it just **doesn't work**. I mean, if you are on a 1080p computer monitor it was fine, but if you are on anything a bit smaller, it starts to kind of break - -  - - *How the [Mundus](/projects/mundus/introduction.html) project would look like on an `iPhone X`* - - Also, what about having a lot of pages for a *project/tutorial*? It works fine for 3-5 pages, but it breaks at 10-15 pages. And lets not talk about having a long *project/tutorial* title. - -  - - *An exaggerated example with 26 tabs* - -These problems aren't unfixable but they would require a fair amount of work and tweaking to fix them. In the end I decided to just **start from scratch**. - diff --git a/src/blog/syndamiadotcom/version2.md b/src/blog/syndamiadotcom/version2.md deleted file mode 100644 index ac078bf..0000000 --- a/src/blog/syndamiadotcom/version2.md +++ /dev/null @@ -1,74 +0,0 @@ -# Version 2 - syndamiadotcom - -[**Article Source**](https://gitlab.com/Syndamia/syndamiadotcom/-/blob/master/src/blog/syndamiadotcom/version2.md) || [**GitLab Discussion**](https://gitlab.com/Syndamia/syndamiadotcom/-/issues/2) -<br> -**Created: 02 August 2020** || **Edited: 24 September 2020** - -[`<<`](./introduction.html) || [`< Version 1`](./version1.html) - ---- - - - -[Version 2](https://gitlab.com/Syndamia/syndamiadotcom/-/releases/v2.0) is mostly based on a `Markdown` style. Pages are written in `Markdown` and made into the final `HTML` files through [ssg](https://www.romanzolotarev.com/ssg.html) and [lowdown](https://kristaps.bsd.lv/lowdown/). - -[Version 2](https://gitlab.com/Syndamia/syndamiadotcom/-/releases/v2.0) has been used in production ever since **21 July 2020**. - -My inspiration and guide was an excellent video from [Wolfgang](https://www.youtube.com/channel/UCsnGwSIHyoYN0kiINAGUKxg) on making a [fast and minimal blog](https://www.youtube.com/watch?v=N_ttw2Dihn8). - -## Contents - -1. [Layout and navigation](#Layout%20and%20navigation) -2. [Style overview](#Style%20overview) -3. [Content management](#Content%20management) - -## Layout and navigation - -This version uses a more **traditional layout** (although similar to the previous one). In the header there are **universal links** to the main pages (*Home*, *About*, *Projects*, etc.) - - - -All *project/tutorials* have an introduction page which contains contents of the *project/tutorial* (links to all of the pages). - - - -Each *project/tutorial* page has some links, a bit below the title: - -* one for the **introduction page** (only if the page isn't directly after the introduction) - -  - -* one for the **previous page** (if there is one) - -  - - *Example taken from [Filters](https://www.syndamia.com/tutorials/how-to-use-jira/filters.html) page in [How to use Jira](https://www.syndamia.com/tutorials/how-to-use-jira/introduction.html)* - -* one for the **next page** (if there is one) - -  - - *Example taken from [Filters](https://www.syndamia.com/tutorials/how-to-use-jira/filters.html) page in [How to use Jira](https://www.syndamia.com/tutorials/how-to-use-jira/introduction.html)* - -## Style overview - -The style resembles standard `Markdown` formatting like in `GitHub`. Text is black on white background with `Open Sans` font. - - - -Hyperlinks are bold and colored in dark blue ( `#004080`). - - - -Code blocks, inline code, blockquotes and tables are taken from [sindresorhus's github-markdown-css repo](https://github.com/sindresorhus/github-markdown-css). - - - - - -## Content management - -This version **doesn't** use a full-fledged **content management system**, but managing is a lot more automated. - -Pages are written in `Markdown` formatting and making the website is done with `ssg`, that takes care of generating the webpages, sitemap, etc. and `lowdown`, that converts the `Markdown` to `HTML`. - |
