# syndamiadotcom - Version 1
[![🔗](/img/link-tabler.svg)](#syndamiadotcom%20-%20Version%201)

**Article Created: 01 August 2020** || **Last Edited: 24 September 2020**

[`< Introductoin`](./introduction.html) || [`Version 2 >`](./version2.html)

---

![](./img/welcome-v1.png)

[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
[![🔗](/img/link-tabler.svg)](#Layout%20and%20navigation)

I based it on the text editor I was using at the time: [xed](https://github.com/linuxmint/xed) (Oblivion theme).

![](./img/xed-overview.png)

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.

![](./img/tabs-v1-old.png) 

*Older version, where there were no Blog and Contact pages*

![](./img/tabs-v1-curr.png) 

*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*

![](./img/multi-title.png)

and to the right there is the back button, with which you could get back to the main pages.

![](./img/multi-back-btn.png)

![](./img/multi-back-btn-hover.png) 

*The back button becomes red when hovering over it*

## Style overview
[![🔗](/img/link-tabler.svg)](#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 (![](./img/70-70-70.png) `#707070` ), **different from the body background** color (![](./img/47-47-47.png) `#474747`) on white foreground.

![](./img/sample-page-v1.png)

Hyperlinks have the ![](./img/d6-d6-d6.png) `#d6d6d6` color, which is pretty **hard to see**.

![](./img/sample-hyperlink-v1.png)

Code blocks and inline code are styled with the same ugly formatting: a ![](./img/ab-b2-bf.png) `#abb2bf` text on ![](./img/28-2c-34.png) `#282c34` background.

![](./img/code-v1.png) 

*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 ![](./img/dd-dd-dd.png) `#dddddd` color with no shadow.

![](./img/separator-v1.png)

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.

![](./img/table-v1.png)

## Content management
[![🔗](/img/link-tabler.svg)](#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?
[![🔗](/img/link-tabler.svg)](#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

  ![](./img/iphonex-v1.png) 

  *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.

  ![](./img/test-tabs.png) 

  *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**.