Cleanup 3

MyWebsite/MyWebsite/Controllers/HomeController.cs

@@ -19,11 +19,11 @@ namespace MyWebsite.Controllers
 
         [Route("Projects")]
         public IActionResult Projects() =>
-            View();
+            View(Startup.Database.Projects.OrderByDescending(i => i.Id));
 
         [Route("Error")]
         [ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)]
         public IActionResult Error() =>
-            View("Views/Shared/Error.cshtml", new ErrorViewModel { RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier });
+            View(new ErrorViewModel { RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier });
     }
 }

MyWebsite/MyWebsite/Models/Project.cs

@@ -16,8 +16,6 @@ namespace MyWebsite.Models
         [Column(TypeName = "text")]
         public string Description { get; set; }
 
-        [Column(TypeName = "varchar(50)")]
-        public string ImageName { get; set; }
         [Column(TypeName = "varchar(50)")]
         public string Link { get; set; }
         [Column(TypeName = "varchar(50)")]

MyWebsite/MyWebsite/Program.cs

@@ -1,11 +1,5 @@
-using System;
-using System.Collections.Generic;
-using System.Linq;
-using System.Threading.Tasks;
 using Microsoft.AspNetCore.Hosting;
-using Microsoft.Extensions.Configuration;
 using Microsoft.Extensions.Hosting;
-using Microsoft.Extensions.Logging;
 
 namespace MyWebsite
 {

MyWebsite/MyWebsite/Views/Gallery/Details.cshtml

@@ -4,7 +4,9 @@
 }
 
 <header>
-    <p>&#xE760; <a asp-action="Index" asp-controller="Gallery">Back to gallery</a></p>
+    <p>
+        &#xE760; <a asp-action="Index" asp-controller="Gallery">Back to gallery</a>
+    </p>
 </header>
 
 <article class="image-overview-block">
@@ -20,17 +22,14 @@
 </article>
 
 <link rel="stylesheet" type="text/css" href="~/css/Gallery.css" />
+
 <script type="text/javascript">
     function ToggleImageSize()
     {
         var image = document.getElementById("image");
 
-        if (image.style.maxHeight == "none")
+        if (image.style.cursor == "zoom-out")
-        {
+            image.style = "";
-            image.style.maxHeight = "50vh";
-            image.style.maxWidth = "100%";
-            image.style.cursor = "zoom-in";
-        }
         else
         {
             image.style.maxHeight = "none";

MyWebsite/MyWebsite/Views/Gallery/Index.cshtml

@@ -15,7 +15,7 @@
         }
     else
     {
-        <h3>No content available</h3>
+        <p class="comment">// No content available</p>
     }
 </article>
 

MyWebsite/MyWebsite/Views/Shared/ContactsBlock.cshtml

@@ -3,24 +3,30 @@
     List<Link> links = Startup.Database.Links.Where(i => new string[] { "linkedin", "github", "twitter", "vkontakte" }.Contains(i.Name)).OrderBy(i => i.Order).ToList();
 }
 
-<div class="contact-me">
+<div id="contact-me">
     <var>if</var> (<var class="class">You</var>.InsterestedInMe)<br />
-    <span class="t1"></span><var class="method">ContactMe</var>();<br />
+    <div>
+        <var class="method">ContactMe</var>();<br />
+    </div>
     <br />
     <a class="comment">// All links are clickable</a><br />
     <var>public void</var> <var class="method">ConatactMe</var>()<br />
     {<br />
+     <div>
          @if (email != null)
          {
-        <span><span class="t1"></span><var>string</var> email = <a class="string" href="@email.Url">"@email.Username"</a>;</span><br />
+             <span><var>string</var> email = <a href="@email.Url">@email.Username</a>;<br /></span>
          }
-    <span class="t1"></span><var class="class">Link</var>[] socialNetworks = <var>new</var> <var class="class">Link</var>[]<br />
+         <var class="class">Link</var>[] socialNetworks = <var>new</var> <var class="class">Link</var>[]<br />
-    <span class="t1"></span>{<br />
+         {<br />
+          <div>
               @foreach (Link link in links)
               {
-        <span><span class="t2"></span><var>new</var> <var class="class">Link</var>(<a class="string">"@(link.Title)"</a>, <a class="string" target="_blank" href="@(link.Url)">"https:@(link.Url)"</a>),</span><br />
+                  <span><img /><img /><var>new</var> <var class="class">Link</var>(<a>@(link.Title)</a>, <a target="_blank" href="@(link.Url)">https:@(link.Url)</a>),</span><br />
               }
-    <span class="t1"></span>}<br />
+          </div>
+         }<br />
+     </div>
     }<br />
     <br />
     <a class="comment">// Copyright &copy;@(DateTime.Today.Year) Michael "XFox" Gordeev</a>

MyWebsite/MyWebsite/Views/Shared/Error.cshtml

@@ -3,6 +3,7 @@
     ViewData["Title"] = "Error";
 }
 
+<!-- TODO: Make Error page-->
 <header>
     <h1 class="text-danger">Error.</h1>
     <h2 class="text-danger">An error occurred while processing your request.</h2>

MyWebsite/MyWebsite/Views/Shared/Projects.cshtml

@@ -1,4 +1,5 @@
-@{
+@model IEnumerable<Project>
+@{
     ViewData["Title"] = "My projects";
     List<Badge> badges = Startup.Database.Badges.ToList();
 }
@@ -12,7 +13,7 @@
 </header>
 
 <article>
-    @foreach (Project project in Startup.Database.Projects.OrderByDescending(i => i.Id))
+    @foreach (Project project in Model)
     {
         <div class="project-item">
             <div>
@@ -22,10 +23,10 @@
                 </p>
                 <a href="@(project.Link)" target="_blank">@project.LinkCaption</a>
             </div>
-            <div>
+            <div class="badge-placeholder">
                 @foreach (string badge in project.Badges.Split(','))
                 {
-                    <div class="badge" style="background-image: url(../images/Badges/@(badges.FirstOrDefault(i => i.Name == badge)?.Image).png)" title="@(badges.FirstOrDefault(i => i.Name == badge)?.Description)"></div>
+                    <div style="background-image: url(../images/Badges/@(badges.FirstOrDefault(i => i.Name == badge)?.Image).png)" title="@(badges.FirstOrDefault(i => i.Name == badge)?.Description)"></div>
                 }
             </div>
         </div>

MyWebsite/MyWebsite/Views/Shared/_Layout.cshtml

@@ -2,15 +2,14 @@
 <html>
     <head>
         <title>@ViewData["Title"] - XFox111.NET</title>
-        <link rel="shortcut icon" href="~/images/favicon.png" type="image/png" />
+        <link rel="shortcut icon" href="~/favicon.ico" type="image/x-icon" />
 
         <link rel="stylesheet" type="text/css" href="~/css/Style.css" />
         <link rel="stylesheet" href="https://d1azc1qln24ryf.cloudfront.net/114779/Socicon/style-cf.css?9ukd8d">
 
         <script src="~/js/site.js" type="text/javascript"></script>
         <script type="text/javascript">
-            function ToggleMenu()
+            function ToggleMenu() {
-            {
                 var menu = document.getElementById("main-menu");
 
                 if (menu.style.display == "none")

MyWebsite/MyWebsite/wwwroot/css/AboutMe.css

@@ -1,37 +0,0 @@
-article {
-    margin: 0px;
-}
-
-.block {
-    position: relative;
-    margin-bottom: -10px;
-    z-index: -1;
-}
-.block .content {
-    position: absolute;
-}
-.block .background {
-    width: 100%;
-}
-
-.intro {
-    color: white;
-    background-color: #00a7dc;
-    font-size: 36px;
-    text-shadow: 2px 2px 1px black;
-}
-.intro .content {
-    bottom: 50px;
-    left: 50px;
-    max-width: 65%;
-}
-
-.sut {
-    color: white;
-    background-color: #ff8000;
-    font-size: 28px;
-    text-shadow: 2px 2px 1px black;
-}
-.sut .content {
-    margin: 50px 50px;
-}

MyWebsite/MyWebsite/wwwroot/css/ContactsBlock.css

@@ -1,33 +1,51 @@
-footer {
+footer
+{
 	display: none;
 }
 
-.contact-me {
+#contact-me
+{
 	padding: 30px 50px;
+	margin: 0px;
 	background-color: #1e1e1e;
 	color: white;
 }
 
-var {
+	#contact-me var
+	{
 		color: #569cd6;
 		font: inherit;
-}
+	}
 
-.class {
+	#contact-me .class
+	{
 		color: #4ec9b0;
-}
+	}
 
-.string, .string:visited {
+	#contact-me .method
+	{
+		color: #dcdcaa;
+	}
+
+	#contact-me div
+	{
+		margin-left: 25px;
+	}
+
+	#contact-me span a,
+	#contact-me span a:visited
+	{
 		color: #d69d85;
 		text-decoration: none;
-}
+	}
-.string:link:hover {
+
+		#contact-me span a:before,
+		#contact-me span a:after
+		{
+			content: "\"";
+		}
+
+		#contact-me span a:link:hover
+		{
 			text-decoration: underline;
-}
+		}
-
-.method {
-    color: #dcdcaa;
-}
-
-.t1  { margin-right: 25px; }
-.t2  { margin-right: 50px; }

MyWebsite/MyWebsite/wwwroot/css/Gallery.css

@@ -1,35 +1,49 @@
-.gallery img {
+/* Gallery styles */
+.gallery img
+{
 	object-fit: cover;
 	max-height: 300px;
 	max-width: 100%;
 	margin: 2px;
 	transition: .25s;
 }
-.gallery img:hover {
+
+	.gallery img:hover
+	{
 		filter: brightness(125%);
 		transform: scale(1.1);
+	}
+
+/* Adaptive code */
+@media only screen and (max-width: 600px)
+{
+	.gallery img
+	{
+		max-height: none;
+	}
+
+		.gallery img:hover
+		{
+			transform: none;
+		}
 }
 
-.image-overview-block img {
+/* Image details page styles */
+.image-overview-block img
+{
 	max-height: 50vh;
 	max-width: 100%;
 	float: left;
 	cursor: zoom-in;
 }
-.image-overview-block div {
+
+.image-overview-block div
+{
 	display: inline-block;
 	margin-left: 20px;
 }
-.image-overview-block h1 {
+
+.image-overview-block h1
+{
 	margin-bottom: 0px;
 }
-
-@media only screen and (max-width: 600px) {
-    .gallery img {
-        max-height: none;
-    }
-    .gallery img:hover {
-        filter: brightness(125%);
-        transform: none;
-    }
-}

MyWebsite/MyWebsite/wwwroot/css/Projects.css

@@ -1,41 +1,59 @@
-header {
+/* Header style rules */
+header
+{
 	display: grid;
 	grid-template-columns: 1fr auto;
-    grid-template-rows: auto auto;
 	grid-column-gap: 20px;
-    margin-bottom: 20px;
+	margin: 20px 50px;
 }
 
-article {
+h1
-    margin: 0px 10px;
+{
+	margin: 0px;
 }
 
-.github-stats {
+.github-stats
-    margin-top: 20px;
+{
 	width: 200px;
 	height: 110px;
 }
 
-.project-item {
+@media only screen and (max-width: 600px)
-    display: grid;
+{
-    padding: 20px;
+	.github-stats
-    padding-top: 0px;
+	{
-    grid-template-rows: auto auto;
-    grid-row-gap: 20px;
-    background-color: whitesmoke;
-    margin-bottom: 10px;
-}
-
-.badge {
-    height: 25px;
-    width: 25px;
-    margin-right: 10px;
-    display: inline-block;
-    background-size: contain;
-}
-
-@media only screen and (max-width: 600px) {
-    .github-stats {
 		grid-row: 2;
 	}
 }
+
+/* Content styles */
+article
+{
+	display: grid;
+	grid-row-gap: 10px;
+	margin: 0px 10px;
+}
+
+.project-item
+{
+	display: grid;
+	padding: 20px;
+	grid-row-gap: 20px;
+	background-color: whitesmoke;
+}
+
+.badge-placeholder
+{
+	display: grid;
+	grid-column-gap: 10px;
+	grid-auto-columns: max-content;
+	grid-auto-flow: column;
+}
+
+	.badge-placeholder div
+	{
+		height: 25px;
+		width: 25px;
+		display: inline-block;
+		background-size: contain;
+	}

MyWebsite/MyWebsite/wwwroot/css/Style.css

@@ -2,21 +2,24 @@
     This file contains main layout styles which applies to every View. In some views this rules are overrided in separate CSS files
 */
 
-/*Declaring fonts*/
+/* Declaring fonts */
-@font-face {
+@font-face
+{
 	font-family: 'Consolas';
 	src: url("/fonts/consolas.eot");
 	src: url("/fonts/consolas.eot?#iefix") format("embedded-opentype"), url("/fonts/consolas.otf") format("opentype"), url("/fonts/consolas.svg") format("svg"), url("/fonts/consolas.ttf") format("truetype"), url("/fonts/consolas.woff") format("woff"), url("/fonts/consolas.woff2") format("woff2");
 }
 
-@font-face {
+@font-face
+{
 	font-family: 'Segoe MDL2 Assets';
 	src: url("/fonts/segoeMLD2assets.eot");
 	src: url("/fonts/segoeMLD2assets.eot?#iefix") format("embedded-opentype"), url("/fonts/segoeMLD2assets.otf") format("opentype"), url("/fonts/segoeMLD2assets.svg") format("svg"), url("/fonts/segoeMLD2assets.ttf") format("truetype"), url("/fonts/segoeMLD2assets.woff") format("woff"), url("/fonts/segoeMLD2assets.woff2") format("woff2");
 }
 
-/*Header styles*/
+/* Header styles */
-nav {
+nav
+{
 	display: grid;
 	grid-template-columns: auto 1fr auto;
 	grid-column-gap: 10px;
@@ -32,99 +35,122 @@ nav {
 	font-size: 26px;
 }
 
-nav a {
+	nav a
+	{
 		text-decoration: none;
 		color: white;
-}
+	}
-nav a:hover { 
+
+		nav a:hover
+		{
 			color: gray;
-}
+		}
-nav div {
+
+	nav div
+	{
 		grid-column: 3;
 		user-select: none;
 		cursor: pointer;
-}
+	}
-menu {
+
+menu
+{
 	margin: 26px auto 26px auto;
 	grid-row: 2;
 	list-style: none;
 }
-menu li {
+
+	menu li
+	{
 		font-size: 20px;
 		margin-top: 10px;
-}
+	}
 
-/*Adaptive code*/
+/* Adaptive code */
-@media only screen and (min-width: 1000px) {
+@media only screen and (min-width: 1000px)
-    menu {
+{
+	menu
+	{
 		display: initial !important;
 		grid-row: 1;
 		grid-column: 2;
 		margin: 0px;
 	}
 
-        menu li {
+		menu li
+		{
 			display: inline-block;
 			margin-right: 10px;
 			margin-top: 0px;
 		}
 
-    #menu-toggle {
+	#menu-toggle
+	{
 		display: none;
 	}
 }
 
-/*Footer styles*/
+/* Footer styles */
-footer {
+footer
+{
 	padding: 10px;
 	display: grid;
 	align-items: center;
 	grid-template-columns: 1fr auto;
 	grid-column-gap: 10px;
 }
-footer a {
+
+	footer a
+	{
 		text-decoration: none;
 		color: black;
-}
+	}
-footer a:hover { 
-    color: orangered;
-}
 
-/*Body styles*/
+		footer a:hover
-html {
+		{
+			color: orangered;
+		}
+
+/* Body styles */
+html
+{
 	overflow: hidden;
 }
 
-body {
+body
+{
 	overflow: auto;
-
 	margin: 0px;
 	margin-top: 53px;
-
 	font-family: 'Consolas', 'Segoe MDL2 Assets';
-
+	/* This stuff is necessary for sticky footer */
-    /*This stuff is necessary for sticky footer*/
 	display: grid;
 	grid-template-rows: 1fr auto;
 	height: calc(100vh - 53px);
 }
 
-header a {
+header a
+{
 	text-decoration: none;
 	color: black;
 }
-header a:hover {
-    text-decoration: underline;
-}
 
-article, header {
+	header a:hover
+	{
+		text-decoration: underline;
+	}
+
+article, header
+{
 	margin: 0px 50px;
 }
 
-article a:visited, article a:link {
+	article a:visited, article a:link
+	{
 		color: blue;
-}
+	}
 
-.comment, .comment:visited {
+.comment, .comment:visited
+{
 	color: #57a64a !important;
 }