Added projects page

MyWebsite/MyWebsite/wwwroot/Projects.json

@@ -0,0 +1,76 @@
+[
+  {
+    "Title": "FoxTube",
+    "Description": "This is my first big project. And the first one published in Microsoft Store.<br />This is a Windows client application for YouTube",
+    "ImageName": "FoxTube.png",
+    "Link": "//foxtube.xfox111.net",
+    "LinkCaption": "Learn more...",
+    "Badges": [
+      "csharp", "dotnet", "uwp"
+    ]
+  },
+  {
+    "Title": "My Bonch",
+    "Description": "",
+    "ImageName": "",
+    "Link": "",
+    "LinkCaption": "Availavle soon...",
+    "Badges": [
+      "csharp", "xamarin", "uwp", "android"/*, "ios"*/
+    ]
+  },
+  {
+    "Title": "MotionDecoder",
+    "Description": "This project is used to analyze videos from security cameras and shows short clips which contain detected motions.<br />I made this projects during scientific projects competition in big data division.",
+    "ImageName": "MotionDecoder.png",
+    "Link": "//github.com/XFox111/motiondecoder",
+    "LinkCaption": "View on GitHub",
+    "Badges": [
+      "csharp",
+      "dotnet",
+      "win32"
+    ]
+  },
+  {
+    "Title": "2048",
+    "Description": "Simple classic game. I made it in Unity just for fun",
+    "ImageName": "2048.png",
+    "Link": "",
+    "LinkCaption": "",
+    "Badges": [
+      "csharp", "unity", "windows", "android"
+    ]
+  },
+  {
+    "Title": "MiSmartAlarm",
+    "Description": "Smart alarm app for Xiaomi MiBand",
+    "ImageName": "MiSmartAlarm.png",
+    "Link": "https://github.com/XFox111/mismartalarm",
+    "LinkCaption": "View on GitHub",
+    "Badges": [
+      "csharp", "xamarin", "uwp", "android"
+    ]
+  },
+  {
+    "Title": "YouTubeScrapper",
+    "Description": "A C# library which is used to extend the abilities of YouTube API v3",
+    "ImageName": "",
+    "Link": "https://github.com/XFox111/youtubescraper",
+    "LinkCaption": "View on GitHub",
+    "Badges": [
+      "csharp", "dotnet", "uwp"
+    ]
+  },
+  {
+    "Title": "GZipCompression",
+    "Description": "Console program which splits files on 1MB blocks and compresses them in multi-thread.<br />I made this program as intro challange in Veeam Software",
+    "ImageName": "",
+    "Link": "https://github.com/XFox111/gzipcompression",
+    "LinkCaption": "View on GitHub",
+    "Badges": [
+      "csharp",
+      "dotnet",
+      "windows"
+    ]
+  }
+]

MyWebsite/MyWebsite/wwwroot/css/Style.css

@@ -73,7 +73,7 @@ main {
 }
 
 header {
-    margin-left: 50px;
+    margin: 0px 50px;
 }
 header a {
     text-decoration: none;
@@ -117,4 +117,51 @@ article a:visited {
 .gallery img:hover {
     filter: brightness(125%);
     transform: scale(1.25);
-}
+}
+
+.inline-header {
+    display: inline-block;
+}
+.github-stats {
+    margin-top: 20px;
+    float: right;
+    display: none;
+}
+
+.projects-block {
+    margin: 0px 10px;
+}
+
+.project-item {
+    background-color: whitesmoke;
+    margin-bottom: 10px;
+    min-height: 200px;
+}
+.project-item img {
+    max-height: 200px;
+    float: left;
+}
+.project-item .text {
+    display: inline-block;
+    margin-left: 20px;
+    margin-bottom: 15px;
+}
+
+.text div {
+    margin-top: 20px;
+}
+
+.badge {
+    height: 25px;
+    width: 25px;
+    margin-right: 10px !important;
+}
+
+.csharp { content: url("../images/Badges/csharp.png"); }
+.dotnet { content: url("../images/Badges/dotnet.png"); }
+.xamarin { content: url("../images/Badges/xamarin.png"); }
+.unity { content: url("../images/Badges/unity.png"); }
+.android { content: url("../images/Badges/android.png"); }
+.uwp { content: url("../images/Badges/windows.png"); }
+.win32 { content: url("../images/Badges/windows.png"); }
+.windows { content: url("../images/Badges/windows.png"); }

MyWebsite/MyWebsite/wwwroot/js/site.js

@@ -1,8 +1,55 @@
-function ToggleImageSize() {
+function ToggleImageSize()
+{
     var image = document.getElementById("image");
 
     if (image.style.maxHeight == "none")
         image.style.maxHeight = "50vh";
     else
         image.style.maxHeight = "none";
+}
+
+function UpdateProjects()
+{
+    // Settings badges tooltips
+    var badges = document.getElementsByClassName("badge");
+    for (var i = 0; i < badges.length; i++)
+    {
+        switch (badges[i].classList[1])
+        {
+            case "csharp":
+                badges[i].setAttribute("title", "C# Programming language");
+                break;
+            case "dotnet":
+                badges[i].setAttribute("title", ".NET Framework");
+                break;
+            case "xamarin":
+                badges[i].setAttribute("title", "Xamarin Framework");
+                break;
+            case "unity":
+                badges[i].setAttribute("title", "Unity Engine");
+                break;
+            case "uwp":
+                badges[i].setAttribute("title", "Universal Windows Platform");
+                break;
+            case "windows":
+                badges[i].setAttribute("title", "Windows Platform");
+                break;
+            case "win32":
+                badges[i].setAttribute("title", "Windows Platform (Win32)");
+                break;
+            case "android":
+                badges[i].setAttribute("title", "Android Platform");
+                break;
+        }
+    }
+
+    // Making projects descriptions multiline
+    var descriptions = document.getElementsByClassName("description");
+    for (var i = 0; i < descriptions.length; i++)
+    {
+        var desc = descriptions[i];
+        var text = desc.innerText;
+        desc.innerText = "";
+        desc.innerHTML = text;
+    }
 }