diff options
Added a project page for the website (syndamiadotcom).
34 files changed, 185 insertions, 0 deletions
diff --git a/src/projects/syndamiadotcom/img/00-40-80.png b/src/projects/syndamiadotcom/img/00-40-80.png Binary files differnew file mode 100644 index 0000000..ffc2a3d --- /dev/null +++ b/src/projects/syndamiadotcom/img/00-40-80.png diff --git a/src/projects/syndamiadotcom/img/28-2c-34.png b/src/projects/syndamiadotcom/img/28-2c-34.png Binary files differnew file mode 100644 index 0000000..14d6a06 --- /dev/null +++ b/src/projects/syndamiadotcom/img/28-2c-34.png diff --git a/src/projects/syndamiadotcom/img/47-47-47.png b/src/projects/syndamiadotcom/img/47-47-47.png Binary files differnew file mode 100644 index 0000000..9ebb15d --- /dev/null +++ b/src/projects/syndamiadotcom/img/47-47-47.png diff --git a/src/projects/syndamiadotcom/img/70-70-70.png b/src/projects/syndamiadotcom/img/70-70-70.png Binary files differnew file mode 100644 index 0000000..aeb167f --- /dev/null +++ b/src/projects/syndamiadotcom/img/70-70-70.png diff --git a/src/projects/syndamiadotcom/img/ab-b2-bf.png b/src/projects/syndamiadotcom/img/ab-b2-bf.png Binary files differnew file mode 100644 index 0000000..6059748 --- /dev/null +++ b/src/projects/syndamiadotcom/img/ab-b2-bf.png diff --git a/src/projects/syndamiadotcom/img/about-v2.png b/src/projects/syndamiadotcom/img/about-v2.png Binary files differnew file mode 100644 index 0000000..391d0e3 --- /dev/null +++ b/src/projects/syndamiadotcom/img/about-v2.png diff --git a/src/projects/syndamiadotcom/img/code-v1.png b/src/projects/syndamiadotcom/img/code-v1.png Binary files differnew file mode 100644 index 0000000..f71270e --- /dev/null +++ b/src/projects/syndamiadotcom/img/code-v1.png diff --git a/src/projects/syndamiadotcom/img/code-v2.png b/src/projects/syndamiadotcom/img/code-v2.png Binary files differnew file mode 100644 index 0000000..54c1964 --- /dev/null +++ b/src/projects/syndamiadotcom/img/code-v2.png diff --git a/src/projects/syndamiadotcom/img/contents-v2.png b/src/projects/syndamiadotcom/img/contents-v2.png Binary files differnew file mode 100644 index 0000000..919663d --- /dev/null +++ b/src/projects/syndamiadotcom/img/contents-v2.png diff --git a/src/projects/syndamiadotcom/img/d6-d6-d6.png b/src/projects/syndamiadotcom/img/d6-d6-d6.png Binary files differnew file mode 100644 index 0000000..a396e27 --- /dev/null +++ b/src/projects/syndamiadotcom/img/d6-d6-d6.png diff --git a/src/projects/syndamiadotcom/img/dd-dd-dd.png b/src/projects/syndamiadotcom/img/dd-dd-dd.png Binary files differnew file mode 100644 index 0000000..58c51c4 --- /dev/null +++ b/src/projects/syndamiadotcom/img/dd-dd-dd.png diff --git a/src/projects/syndamiadotcom/img/header-v2.png b/src/projects/syndamiadotcom/img/header-v2.png Binary files differnew file mode 100644 index 0000000..80f1a14 --- /dev/null +++ b/src/projects/syndamiadotcom/img/header-v2.png diff --git a/src/projects/syndamiadotcom/img/introduction-v2.png b/src/projects/syndamiadotcom/img/introduction-v2.png Binary files differnew file mode 100644 index 0000000..a67b396 --- /dev/null +++ b/src/projects/syndamiadotcom/img/introduction-v2.png diff --git a/src/projects/syndamiadotcom/img/iphonex-v1.png b/src/projects/syndamiadotcom/img/iphonex-v1.png Binary files differnew file mode 100644 index 0000000..6d36d86 --- /dev/null +++ b/src/projects/syndamiadotcom/img/iphonex-v1.png diff --git a/src/projects/syndamiadotcom/img/multi-back-btn-hover.png b/src/projects/syndamiadotcom/img/multi-back-btn-hover.png Binary files differnew file mode 100644 index 0000000..8f87983 --- /dev/null +++ b/src/projects/syndamiadotcom/img/multi-back-btn-hover.png diff --git a/src/projects/syndamiadotcom/img/multi-back-btn.png b/src/projects/syndamiadotcom/img/multi-back-btn.png Binary files differnew file mode 100644 index 0000000..5275090 --- /dev/null +++ b/src/projects/syndamiadotcom/img/multi-back-btn.png diff --git a/src/projects/syndamiadotcom/img/multi-title.png b/src/projects/syndamiadotcom/img/multi-title.png Binary files differnew file mode 100644 index 0000000..18c740c --- /dev/null +++ b/src/projects/syndamiadotcom/img/multi-title.png diff --git a/src/projects/syndamiadotcom/img/next-page-v2.png b/src/projects/syndamiadotcom/img/next-page-v2.png Binary files differnew file mode 100644 index 0000000..53d56dd --- /dev/null +++ b/src/projects/syndamiadotcom/img/next-page-v2.png diff --git a/src/projects/syndamiadotcom/img/prev-page-v2.png b/src/projects/syndamiadotcom/img/prev-page-v2.png Binary files differnew file mode 100644 index 0000000..7c665bc --- /dev/null +++ b/src/projects/syndamiadotcom/img/prev-page-v2.png diff --git a/src/projects/syndamiadotcom/img/sample-hyperlink-v1.png b/src/projects/syndamiadotcom/img/sample-hyperlink-v1.png Binary files differnew file mode 100644 index 0000000..b4e7bca --- /dev/null +++ b/src/projects/syndamiadotcom/img/sample-hyperlink-v1.png diff --git a/src/projects/syndamiadotcom/img/sample-page-v1.png b/src/projects/syndamiadotcom/img/sample-page-v1.png Binary files differnew file mode 100644 index 0000000..5aa1f28 --- /dev/null +++ b/src/projects/syndamiadotcom/img/sample-page-v1.png diff --git a/src/projects/syndamiadotcom/img/separator-v1.png b/src/projects/syndamiadotcom/img/separator-v1.png Binary files differnew file mode 100644 index 0000000..950d37f --- /dev/null +++ b/src/projects/syndamiadotcom/img/separator-v1.png diff --git a/src/projects/syndamiadotcom/img/table-v1.png b/src/projects/syndamiadotcom/img/table-v1.png Binary files differnew file mode 100644 index 0000000..83a0072 --- /dev/null +++ b/src/projects/syndamiadotcom/img/table-v1.png diff --git a/src/projects/syndamiadotcom/img/table-v2.png b/src/projects/syndamiadotcom/img/table-v2.png Binary files differnew file mode 100644 index 0000000..c784244 --- /dev/null +++ b/src/projects/syndamiadotcom/img/table-v2.png diff --git a/src/projects/syndamiadotcom/img/tabs-v1-curr.png b/src/projects/syndamiadotcom/img/tabs-v1-curr.png Binary files differnew file mode 100644 index 0000000..b8ad9e2 --- /dev/null +++ b/src/projects/syndamiadotcom/img/tabs-v1-curr.png diff --git a/src/projects/syndamiadotcom/img/tabs-v1-old.png b/src/projects/syndamiadotcom/img/tabs-v1-old.png Binary files differnew file mode 100644 index 0000000..92d3233 --- /dev/null +++ b/src/projects/syndamiadotcom/img/tabs-v1-old.png diff --git a/src/projects/syndamiadotcom/img/test-tabs.png b/src/projects/syndamiadotcom/img/test-tabs.png Binary files differnew file mode 100644 index 0000000..27e795b --- /dev/null +++ b/src/projects/syndamiadotcom/img/test-tabs.png diff --git a/src/projects/syndamiadotcom/img/to-introduction-v2.png b/src/projects/syndamiadotcom/img/to-introduction-v2.png Binary files differnew file mode 100644 index 0000000..1466608 --- /dev/null +++ b/src/projects/syndamiadotcom/img/to-introduction-v2.png diff --git a/src/projects/syndamiadotcom/img/welcome-v1.png b/src/projects/syndamiadotcom/img/welcome-v1.png Binary files differnew file mode 100644 index 0000000..0c1c594 --- /dev/null +++ b/src/projects/syndamiadotcom/img/welcome-v1.png diff --git a/src/projects/syndamiadotcom/img/welcome-v2.png b/src/projects/syndamiadotcom/img/welcome-v2.png Binary files differnew file mode 100644 index 0000000..7778033 --- /dev/null +++ b/src/projects/syndamiadotcom/img/welcome-v2.png diff --git a/src/projects/syndamiadotcom/img/xed-overview.png b/src/projects/syndamiadotcom/img/xed-overview.png Binary files differnew file mode 100644 index 0000000..9642203 --- /dev/null +++ b/src/projects/syndamiadotcom/img/xed-overview.png diff --git a/src/projects/syndamiadotcom/introduction.md b/src/projects/syndamiadotcom/introduction.md new file mode 100644 index 0000000..a1b854f --- /dev/null +++ b/src/projects/syndamiadotcom/introduction.md @@ -0,0 +1,20 @@ +# syndamiadotcom - Introduction + +**Article Created: 01 August 2020** || **Last Edited: 02 August 2020** + +[Version 1 >](./version1.html) + +--- + +This very website is a big project in itself. I started it on **25 May** as a place to explain my project [Mundus](/projects/mundus/introduction.html) in detail. Over time I've made it into a place for not only my **projets** but also for **tutorials**, **blog posts** and **portfolio**. + +Website versions differ mosty by **styling** and **system for managing content**. + +## Contents + +1. [Introduction](./introduction.html) + +2. [Version 1](./version1.html) + +3. [Version 2](./version2.html) + diff --git a/src/projects/syndamiadotcom/version1.md b/src/projects/syndamiadotcom/version1.md new file mode 100644 index 0000000..21a319a --- /dev/null +++ b/src/projects/syndamiadotcom/version1.md @@ -0,0 +1,100 @@ +# syndamiadotcom - Version 1 + +**Article Created: 01 August 2020** || **Last Edited: 02 August 2020** + +[\< Introductoin](./introduction.html) || [Version 2 >](./version2.html) + +--- + + + +[Version 1](https://github.com/Syndamia/syndamiadotcom/releases/tag/v1.0) is the **very first design** this website had and probably the **ugliest** one it will ever have. It has a tabbed layout with dark-themed colors. I used no system for managing content, 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 I had some extremely basic front-end skills and practically no knowledge for good web design. + +## Layout and navigation + +I based it on [xed](https://github.com/linuxmint/xed) (dark theme), a lightweight text editor. + + + +The whole idea was that navigation through multiple pages would be done mostly through **tabs**. + +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* + +Pages 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 we have a back button, with which you would 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 backgound ( `#707070` ), **different from the body background** color ( `#474747`) on white foreground. + + + +Hyperlinks have the  `#d6d6d6` color, which is a bit **hard to see** on the page background and pretty difficult to differentiate from normal text. + + + +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 this website version was in production, the only place tables you could find 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 (stupidly written) `JavaScript`**. + +## Why was it replaced? + +This version was discontinued for three main reasons: + +- **First**, adding new pages was very laborious, having to **rewrite the `HTML`** code for **each new page** from scratch manually. + +- **Second**, **it was ugly**. I came up and made most of the initial design in 2-3 days and kind of left it as it was, I didn't work in it thoroughly. + +- **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/projects/syndamiadotcom/version2.md b/src/projects/syndamiadotcom/version2.md new file mode 100644 index 0000000..ae1f9b6 --- /dev/null +++ b/src/projects/syndamiadotcom/version2.md @@ -0,0 +1,65 @@ +# syndamiadotcom - Version 2 + +**Article Created: 02 August 2020** || **Last Edited: 02 August 2020** + +[\<\<](./introduction.html) || [\< Version 1](./version1.html) + +--- + + + +[Version 2](https://github.com/Syndamia/syndamiadotcom/releases/tag/v2.0) is mostly based on a `Markdown` layout. 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://github.com/Syndamia/syndamiadotcom/releases/tag/v2.0) has been used in production ever since **21 July 2020**. + +My insparation 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). + +## Layout and navigation + +This version uses a more **traditional layout**, compared 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 *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 still **doesn't** use a **content management system**, although managing content is considerably simpler. + +I write the pages in `Markdown` files and `ssg` and `lowdown` take care of **everything else** (the header and footer are in separate `HTML` files). |
