Version 1 - syndamiadotcom

Article Source || GitLab Discussion
Created: 01 August 2020 || Edited: 24 September 2020

< Introductoin || Version 2 >


Version 1 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 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
  2. Style overview
  3. Content management
  4. Why was it replaced?

Layout and navigation

🔗

I based it on the text editor I was using at the time: 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.

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 page in Connect to Mysql in C# and Entity Framework 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:

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.

^