Updated design of tutorials/index, projects/index and of resume. Fixed wrong word in index.

5 files changed, 88 insertions, 42 deletions

diff --git a/website/index.html b/website/index.html
index cc2be66..483a45a 100644
--- a/website/index.html
+++ b/website/index.html
@@ -31,7 +31,7 @@
             <br>
             In projects, I will be sharing detailes about different projects I am/was working on.
             <br>
-            In about and portfollio you can find more about me.
+            In about and resume you can find more about me.
         </div>
 
         <br>
diff --git a/website/projects/index.html b/website/projects/index.html
index 29aaf60..264d7ee 100644
--- a/website/projects/index.html
+++ b/website/projects/index.html
@@ -13,14 +13,6 @@
         <title>Syndamia - Projects</title>
         <link rel="stylesheet" href="../styles.css">
         <link rel="stylesheet" href="../styles-multiple-page-articles.css">
-
-        <style media="screen">
-            .hyperlink {
-                display: inline-block;
-                vertical-align: middle;
-                padding-left: 10px;
-            }
-        </style>
     </head>
 
     <body>
@@ -33,16 +25,32 @@
         </div>
 
         <div class="page-centered">
-            <a href="./mundus/introduction.html" class="hyperlink">Mundus</a>
-            <a href="https://github.com/Syndamia/Mundus" target="_blank" class="hyperlink" title="GitHub"><img src="../images/logos/github.png" alt="GitHub" width="32" height="32"></a>
-
-            <hr class="separator">
-
-            syndamiadotcom [COMING SOON]
-
-            <hr class="separator">
-
-            Bitspace [COMING SOON]
+            <table class="items-table">
+                <tr>
+                    <td colspan="2" class="separator-cell"><hr class="separator"></td>
+                </tr>
+                <tr>
+                    <td><a href="./mundus/introduction.html" class="hyperlink">Mundus</a></td>
+                    <td><a href="https://github.com/Syndamia/Mundus" target="_blank" class="hyperlink" title="GitHub"><img src="../images/logos/github.png" alt="GitHub" width="32" height="32"></a></td>
+                </tr>
+                <tr>
+                    <td colspan="2" class="separator-cell"><hr class="separator"></td>
+                </tr>
+                <tr>
+                    <td>syndamiadotcom <span class="warning">[COMING SOON]</span></td>
+                    <td><a href="https://github.com/Syndamia/syndamiadotcom" target="_blank" class="hyperlink" title="GitHub"><img src="../images/logos/github.png" alt="GitHub" width="32" height="32"></a></td>
+                </tr>
+                <tr>
+                    <td colspan="2" class="separator-cell"><hr class="separator"></td>
+                </tr>
+                <tr>
+                    <td>Bitspace <span class="warning">[COMING SOON]</span></td>
+                    <td><a href="https://github.com/Syndamia/Shower" target="_blank" class="hyperlink" title="GitHub"><img src="../images/logos/github.png" alt="GitHub" width="32" height="32"></a></td>
+                </tr>
+                <tr>
+                    <td colspan="2" class="separator-cell"><hr class="separator"></td>
+                </tr>
+            </table>
         </div>
 
         <br>
diff --git a/website/resume.html b/website/resume.html
index d54aedb..0328f87 100644
--- a/website/resume.html
+++ b/website/resume.html
@@ -17,13 +17,7 @@
             .title-data {
                 text-align: left;
             }
-            table {
-                margin-right: auto;
-                margin-left: auto;
-            }
             td {
-                padding-bottom: 5px;
-                padding-top: 5px;
                 vertical-align: text-top;
             }
             li {
@@ -43,9 +37,12 @@
         </div>
 
         <div class="page-centered">
-            <table>
+            <table class="items-table">
+                <tr>
+                    <td colspan="3" class="separator-cell"><hr class="separator"></td>
+                </tr>
                 <tr>
-                    <td class="title-data">Technologies</td>
+                    <th class="title-data">Technologies</th>
                     <td class="title-data">That I know well:</td>
                     <td class="title-data">That I somewhat know:</td>
                 </tr>
@@ -66,41 +63,44 @@
                     </td>
                 </tr>
                 <tr>
-                    <td colspan="3"><hr class="separator"></td>
+                    <td colspan="3" class="separator-cell"><hr class="separator"></td>
                 </tr>
                 <tr>
-                    <td class="title-data">Work Experience</td>
+                    <th class="title-data">Work Experience</th>
                     <td colspan="2">-</td>
                 </tr>
                 <tr>
-                    <td colspan="3"><hr class="separator"></td>
+                    <td colspan="3" class="separator-cell"><hr class="separator"></td>
                 </tr>
                 <tr>
-                    <td class="title-data">Internships</td>
+                    <th class="title-data">Internships</th>
                     <td colspan="2">-</td>
                 </tr>
                 <tr>
-                    <td colspan="3"><hr class="separator"></td>
+                    <td colspan="3" class="separator-cell"><hr class="separator"></td>
                 </tr>
                 <tr>
-                    <td class="title-data">Education</td>
+                    <th class="title-data">Education</th>
                     <td colspan="2">
                         <b>Applied programmer</b><br>
                         <i>C# MySQL</i><br>
-                        <b style="color:#ff9999">[ONGOING]</b> 2019-2021, Course <a href="https://it-kariera.mon.bg/e-learning/" class="hyperlink">IT-kariera</a>
+                        <span class="caution">[ONGOING]</span> 2019-2021, Course <a href="https://it-kariera.mon.bg/e-learning/" class="hyperlink">IT-kariera</a>
                     </td>
                 </tr>
                 <tr>
-                    <td colspan="3"><hr class="separator"></td>
+                    <td colspan="3" class="separator-cell"><hr class="separator"></td>
                 </tr>
                 <tr>
-                    <td class="title-data">Visits</td>
+                    <th class="title-data">Visits</th>
                     <td colspan="2">
                         <a href="https://careers-digital.bg/" class="hyperlink">Lidl Digital</a> 24.02.2020
                         <br><br>
                         <a href="https://helecloud.com/" class="hyperlink">Helecloud</a> 20.02.2020
                     </td>
                 </tr>
+                <tr>
+                    <td colspan="3" class="separator-cell"><hr class="separator"></td>
+                </tr>
             </table>
         </div>
 
diff --git a/website/styles.css b/website/styles.css
index a52106e..6374ac4 100644
--- a/website/styles.css
+++ b/website/styles.css
@@ -103,6 +103,11 @@ hr {
     border: 1px solid #ddd;
 }
 
+.separator-cell {
+    padding-left: 0px;
+    padding-right: 0px;
+}
+
 .hidden-text {
     color: black;
     background-color: black;
@@ -111,3 +116,25 @@ hr {
 .hidden-text:hover {
     color: white;
 }
+
+.items-table {
+    display: inline;
+}
+
+th, td {
+    padding-top: 5px;
+    padding-bottom: 5px;
+
+    padding-left: 20px;
+    padding-right: 20px;
+}
+
+.warning {
+    color: #ff9999;
+    font-weight: bold;
+}
+
+.caution {
+    color: #ffff99;
+    font-weight: bold;
+}
diff --git a/website/tutorials/index.html b/website/tutorials/index.html
index 324eb2c..ae24f9d 100644
--- a/website/tutorials/index.html
+++ b/website/tutorials/index.html
@@ -25,12 +25,23 @@
         </div>
 
         <div class="page-centered">
-            GtkSharp 2.0 [COMING SOON]
-
-            <hr class="separator">
-
-            <a href="./connect-to-mysql-in-csharp-ef/introduction.html" class="hyperlink">Connect to MySql in C# and Entity Framework</a>
-
+            <table class="items-table">
+                <tr>
+                    <td class="separator-cell"><hr class="separator"></td>
+                </tr>
+                <tr>
+                    <td>GtkSharp 2.0 <span class="warning">[COMING SOON]</span></td>
+                </tr>
+                <tr>
+                    <td class="separator-cell"><hr class="separator"></td>
+                </tr>
+                <tr>
+                    <td><a href="./connect-to-mysql-in-csharp-ef/introduction.html" class="hyperlink">Connect to MySql in C# and Entity Framework</a></td>
+                </tr>
+                <tr>
+                    <td class="separator-cell"><hr class="separator"></td>
+                </tr>
+            </table>
             <p>
                 I have some tutorial-style notes in my <a href="https://github.com/Syndamia/References" class="hyperlink">references repo</a>. Warning: some stuff might be wrong.
             </p>