1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
|
# syndamiadotcom - Version 1
[](#syndamiadotcom%20-%20Version%201)
**Article Created: 01 August 2020** || **Last Edited: 24 September 2020**
[`< Introductoin`](./introduction.html) || [`Version 2 >`](./version2.html)
---
[Version 1](https://github.com/Syndamia/syndamiadotcom/releases/tag/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://github.com/Syndamia/syndamiadotcom/releases/tag/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.
## Layout and navigation
[](#Layout%20and%20navigation)
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
[](#Style%20overview)
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
[](#Content%20management)
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?
[](#Why%20was%20it%20replaced?)
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**.
|
