various style improvements

src/lib/components/heroPost.svelte

@@ -22,10 +22,10 @@
         <h3>{title}</h3>
         <p>{description}</p>
         <div class="author">
-            <img src={authorIcon} alt="Avatar of author" draggable={false}>
+            <!-- <img src={authorIcon} alt="Avatar of author" draggable={false}>
             <span class="spacer">—</span>
             <span class="author">{author}</span>
-            <span class="spacer">—</span>
+            <span class="spacer">—</span> -->
             <span class="date">{relDate}</span>
         </div>
     </div>
@@ -61,6 +61,9 @@
     p {
         font-size: 18px;
     }
+    .author {
+        color: gray;
+    }
     .author > * {
         padding: 0 5px;
     }

src/lib/components/post.svelte

@@ -1,10 +1,12 @@
 <script>
+    import darkmode from "$lib/stores/darkmode";
+
     export var thumbnail;
     // export var categories = [];
-    export var author;
+    // export var author;
     export var relDate;
     export var title;
-    export var authorIcon;
+    // export var authorIcon;
     export var currentHover;
     export var path;
     export var description
@@ -20,11 +22,11 @@
     }
 </script>
 
-<a href={path} class="post" class:grayscale on:mouseenter={mouseenter} on:mouseleave={mouseleave}>
+<a href={path} class:dark={$darkmode} class="post" class:grayscale on:mouseenter={mouseenter} on:mouseleave={mouseleave}>
     {#if thumbnail}
         <img src={thumbnail} alt="Thumbnail" class="thumbnail" draggable={false}>
     {:else}
-        <div style="width: 150px; height: 150px;"></div>
+        <div class="thumbnail"></div>
     {/if}
     <div class="data">
         <!-- <div class="categories">
@@ -35,10 +37,10 @@
         <h4>{title}</h4>
         <p>{description}</p>
         <div class="author">
-            <img src={authorIcon} alt="Avatar of author" draggable={false}>
+            <!-- <img src={authorIcon} alt="Avatar of author" draggable={false}>
             <span class="spacer">—</span>
             <span class="author">{author}</span>
-            <span class="spacer">—</span>
+            <span class="spacer">—</span> -->
             <span class="date">{relDate}</span>
         </div>
     </div>
@@ -73,18 +75,23 @@
         width: 150px;
         height: 150px;
         margin-right: 15px;
+        margin-top: 5px;
         object-fit: cover;
+        box-shadow: 0 0 5px rgb(145, 145, 145);
+    }
+    .dark .thumbnail {
+        box-shadow: 0 0 5px rgb(0, 0, 0);
     }
     img {
         height: 100%;
         border-radius: 5px;
     }
-    .author img {
+    /* .author img {
         height: 100%;
         border-radius: 50%;
-    }
+    } */
     .author {
-        height: 2em;
+        color: gray;
         display: flex;
         flex-wrap: wrap;
         align-items: center;
@@ -93,4 +100,7 @@
     .author > * {
         padding: 0 5px;
     }
+    p {
+        margin: 0;
+    }
 </style>

src/lib/components/posts.svelte

@@ -36,15 +36,14 @@
         font-size: 40px;
         font-weight: 500;
         max-width: 1360px;
-        margin: auto;
+        margin: 50px auto 30px;
-        margin-top: 50px;
-        margin-bottom: 20px;
     }
     .hero {
         width: calc(60% - 5px);
         margin-right: 5px;
         min-width: 620px;
         flex-shrink: 0;
+        margin-bottom: 15px;
     }
     .posts {
         width: calc(40% - 5px);
@@ -56,10 +55,11 @@
             width: calc(100% - min(120px, 10%));
             margin: 0 min(60px, 5%);
             min-width: initial;
+            margin-bottom: 15px;
         }
         h2 {
             width: calc(100% - min(120px, 10%));
-            margin: 0 min(60px, 5%);
+            margin: 10px min(60px, 5%) 20px;
         }
         .posts {
             display: flex;

src/lib/components/project.svelte

@@ -12,7 +12,7 @@
     }
 </script>
 
-<a href={link} target="_blank" rel="noreferrer noopener" class="full" on:click={handle}>
+<a href={link || "#"} target="_blank" rel="noreferrer noopener" class="full" on:click={handle}>
     <div class="project">
         <div class="imgcon">
             <img src={image} alt="Project" draggable={false} class:grayscale>
@@ -28,7 +28,7 @@
         <h3><slot /></h3>
         <div class="tags">
             {#each tags as tag, i}
-                <span>{tag}</span>{#if i !== tags.length - 1}<span>&middot;</span>{/if}
+                <span>{tag}</span>{#if i !== tags.length - 1}<span>&middot;&ZeroWidthSpace;</span>{/if}
             {/each}
         </div>
         <a href={link || "#"} rel="noreferrer noopener" target="_blank">View</a>
@@ -42,6 +42,8 @@
     .tags {
         margin: 5px 0;
         margin-left: -3px;
+        max-width: 100%;
+        overflow-wrap: normal;
     }
     .tags span {
         padding: 0 3px;

src/lib/components/technologyDetails.svelte

@@ -38,6 +38,7 @@
             <h2>Git + GitHub</h2>
             <p>I use Git version control system for all of my projects, even if I don't upload them to GitHub. Most of my projects can be found on GitHub.</p>
             <p>My GitHub profile is @<a href="https://github.com/danbulant" target="_blank" rel="noopener noreferrer">danbulant</a>.</p>
+            <p>The source code of this website is available <a href="https://github.com/danbulant/design" target="_blank" rel="noopener noreferrer">here</a></p>
         {:else if selected === "docker"}
             <h2>Docker + Docker compose + Docker desktop</h2>
             <p><a href="https://www.docker.com" rel="noopener noreferrer" target="_blank">Docker</a> is the most widely used container runtime. <a href="https://docs.docker.com/compose/" target="_blank" rel="noopener noreferrer">Docker compose</a> makes it easy to orchestrate multiple containers, and finally, <a href="https://docs.docker.com/desktop/" target="_blank" rel="noopener noreferrer">Docker desktop</a> is the easiest way to get Docker on Windows.</p>

src/lib/layouts/post.svelte

@@ -50,7 +50,7 @@
 <hr class:dark={$darkmode}>
 
 <footer>
-    Daniel Bulant - Blog posts CC-BY-SA 
+    Daniel Bulant - Blog posts CC-BY-SA (unless otherwise specified)
 </footer>
 
 <style>

src/routes/api/posts.json.js

@@ -1,6 +1,9 @@
 import { DateTime } from "luxon";
 
-export async function get() {
+/**
+ * @type {import("@sveltejs/kit").RequestHandler}
+ */
+export async function get(req) {
     const allPostFiles = import.meta.glob('../posts/**/*.md');
 
     const allPosts = await Promise.all(

src/routes/index.svelte

@@ -12,15 +12,13 @@
 </script>
 
 <script>
-	import Bar from "$lib/components/bar.svelte";
+	import Bottombar from "$lib/components/bottombar.svelte";
-import Bottombar from "$lib/components/bottombar.svelte";
 	import Button from "$lib/components/button.svelte";
 	import Contact from "$lib/components/contact.svelte";
 	import Hero from "$lib/components/hero.svelte";
 	import Navbar from "$lib/components/navbar.svelte";
 	import Posts from "$lib/components/posts.svelte";
 	import Project from "$lib/components/project.svelte";
-	import Split from "$lib/components/split.svelte";
 	import TechnologyDetails from "$lib/components/technologyDetails.svelte";
 	import darkmode from "$lib/stores/darkmode";
 
@@ -56,6 +54,13 @@ import Bottombar from "$lib/components/bottombar.svelte";
 		<!-- <h3>To be used later</h3> -->
 		<Button href="#projects">Check out my work</Button>
 	</Hero>
+	<div class="blog">
+		I recently started my own blog.<br>
+		You can checkout &ldquo;<a href={posts[0].path}><b>{posts[0].title}</b></a>&rdquo; and other recent blog posts:<br>
+		<div style="text-align: center; margin-top: 5px;">
+			<Button href="/posts">blog</Button>
+		</div>
+	</div>
 	<div class="projects" id="projects">
 		<div>
 			<h2>
@@ -110,11 +115,14 @@ import Bottombar from "$lib/components/bottombar.svelte";
 			</Project>
 		</div>
 	</div>
+	<div class="center">
+		In addition, this website is open-source and available on <img class="white" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/github/github-original.svg" style="height: 1em;" alt=""> <a href="https://github.com/danbulant/design" style="color: rgb(255, 102, 128)">GitHub</a>
+	</div>
 	<div class="also relative">
 		<TechnologyDetails bind:selected={technologySelected} />
 		<h2 class="text-center">I also worked with the following:</h2>
 		<noscript class="text-center text-white">Clicking won't work if javascript is not enabled.</noscript>
-		<span class="text-center" class:text-gray={!technologyHover} class:text-white={technologyHover}>Click each technology for more details about why I'm using it.</span>
+		<span class="text-center" class:text-gray={!technologyHover} class:text-white={technologyHover}>{typeof window !== "undefined" && window.matchMedia("(hover: none) and (pointer: coarse)").matches ? "Touch" : "Click"} each technology for more details about why I'm using it.</span>
 		<div class="split" on:mouseenter={() => technologyHover = true} on:mouseleave={() => technologyHover = false}>
 			<ul>
 				<li on:click={() => technologySelected = "typescript"}>
@@ -122,7 +130,7 @@ import Bottombar from "$lib/components/bottombar.svelte";
 					Typescript
 				</li>
 				<li on:click={() => technologySelected = "rust"}>
-					<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/rust/rust-plain.svg" alt="" draggable={false} />
+					<img class="white" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/rust/rust-plain.svg" alt="" draggable={false} />
 					Rust
 				</li>
 				<li on:click={() => technologySelected = "x11"}>
@@ -134,7 +142,7 @@ import Bottombar from "$lib/components/bottombar.svelte";
 					C#
 				</li>
 				<li on:click={() => technologySelected = "git"}>
-					<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/github/github-original.svg" alt="" draggable={false} />
+					<img class="white" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/github/github-original.svg" alt="" draggable={false} />
 					Git + GitHub
 				</li>
 				<li on:click={() => technologySelected = "docker"}>
@@ -184,7 +192,7 @@ import Bottombar from "$lib/components/bottombar.svelte";
 					Node.js
 				</li>
 				<li on:click={() => technologySelected = "deno"}>
-					<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/denojs/denojs-original.svg" alt="" draggable={false} />
+					<img class="white" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/denojs/denojs-original.svg" alt="" draggable={false} />
 					Deno
 				</li>
 				<li on:click={() => technologySelected = "linux"}>
@@ -212,12 +220,31 @@ import Bottombar from "$lib/components/bottombar.svelte";
 <Bottombar />
 
 <style>
+	img.white {
+		background: white;
+		border-radius: 50%;
+	}
+	.blog {
+		margin: auto;
+		max-width: max-content;
+		padding: 15px;
+		border-radius: 5px;
+		background: #282B29;
+		color: white;
+	}
+	.dark .blog {
+		background: white;
+		color: #282B29;
+	}
 	/* :global(body) {
 		background-image: linear-gradient(to top, rgb(242,210,223), transparent min(180vh, 1080px));
 	}
 	:global(body.dark) {
 		background-image: linear-gradient(to top, rgba(94, 61, 74, 0.685), transparent min(180vh, 1080px));
 	} */
+	.center {
+		text-align: center;
+	}
 	.relative {
 		position: relative;
 	}
@@ -247,10 +274,10 @@ import Bottombar from "$lib/components/bottombar.svelte";
 		display: flex;
 		flex-wrap: wrap;
 		justify-content: space-between;
-		margin: 0 20px 50px 20px;
+		margin: 0 20px 0px 20px;
 	}
 	.also {
-		margin: auto;
+		margin: 50px auto 0 auto;
 		max-width: 850px;
 		border-radius: 15px;
 	}
@@ -269,6 +296,7 @@ import Bottombar from "$lib/components/bottombar.svelte";
 	}
 	.split ul {
 		min-width: 340px;
+		margin: 0;
 	}
 	.also li {
 		height: 32px;
@@ -298,11 +326,11 @@ import Bottombar from "$lib/components/bottombar.svelte";
 	}
 	.also li img {
 		height: 24px;
-		padding-right: 6px;
+		margin-right: 6px;
 	}
 	@media (min-width: 1520px) {
 		.projects {
-			margin: 0 auto 50px auto;
+			margin: 0 auto 0px auto;
 		}
 	}
 	.projects > div {
@@ -335,7 +363,7 @@ import Bottombar from "$lib/components/bottombar.svelte";
 		color: #282B29;
 	}
 	h1 {
-		font-size: 72px;
+		font-size: 64px;
 	}
 	@media (max-width: 1100px) {
 		h1 {

src/routes/posts/index.svelte

@@ -13,7 +13,8 @@
 
 <script>
     import HeroPost from "$lib/components/heroPost.svelte";
-import Post from "$lib/components/post.svelte";
+    import Post from "$lib/components/post.svelte";
+    import darkmode from "$lib/stores/darkmode";
 
     var currentHover = null;
     export var posts;
@@ -24,11 +25,15 @@ import Post from "$lib/components/post.svelte";
 	<meta name="description" content="My personal blog about work, programming and fun stuff.">
 </svelte:head>
 
-<div class="posts">
+<div class="posts" class:dark={$darkmode}>
     <h1>Posts</h1>
 
+    <hr>
+
     <HeroPost {...posts[0]} />
 
+    <hr>
+
     {#each posts.slice(1) as post (post.title)}
         <Post {...post} bind:currentHover />
     {/each}
@@ -44,4 +49,12 @@ import Post from "$lib/components/post.svelte";
         margin: 0;
         padding: 0;
     }
+    hr {
+        height: 1px;
+        border: none;
+        background: black;
+    }
+    .dark hr {
+        background: white;
+    }
 </style>

src/routes/posts/rust-basics/index.md

@@ -1,6 +1,6 @@
 ---
 title: Rust basics, from the perspective of a high level programmer
-date: 2022-03-05
+date: 2022-03-06
 author: Daniel Bulant
 authorIcon: /logo.png
 categories: [programming, rust]
@@ -142,6 +142,15 @@ The curly braces are required.
 Types are either primitives (like numbers and str) or structs (String).  
 Nearly the only difference is that primitives are just written as they are to initialize, but complex types require some kind of constructor.
 
+#### Heap vs Stack
+
+Heap:
+- slower (still really fast)
+- bigger
+
+Stack:
+
+
 #### Common primitives
 
 Numbers:
@@ -151,7 +160,47 @@ Numbers:
 
 Strings:
 - `str` - a simple primitive UTF-8 string (all Rust strings are UTF-8. Invalid UTF-8 strings cannot be used and will throw/panic). Usually used as a pointer (i.e. `&str`)
-- `String` - a more complex type, stored on the heap.
+- `String` - a more complex type (technically not a primitive), stored on the heap.
+
+Arrays:
+- `T[]` - arrays have a fixed length (they can have fewer elements if you use `Option<T>` type).
+
+#### Tuples
+
+Tuples can be used to have multiple values with different types (basically an array with multiple types and fixed size).  
+Unlike array, they're accesssed directly by the dot notation, i.e. `tuple.0` will get the first item, and tuples don't have methods like `.len()`.  
+
+```rust
+let var = (1, "str");
+```
+
+An interesting quirk is that you can use `()` (empty tuple) to return "void". Functions that don't have a `return` statement and don't return a value return `()`.
+
+#### Common structs
+
+##### Option&amp;lt;T&amp;gt;
+
+Is an enum (we'll get to how `enum`s work later. They're kind of different from other languages) with either **`Some(T)` or `None`** values.  
+To get the value, you can use **`match`** like with other enums, or use **`.unwrap()`** (which will panic if it's `None`).
+
+#### Result&amp;lt;T, E&amp;gt;
+
+Similar to `Option`, but used to handle errors (commonly returned by <abbr title="Input Output">IO</abbr> methods).   
+It's values are either `Ok(T)` or `Err(E)`.  
+To get the value, you can again use **`match` block or `.unwrap()`**.
+
+For easier use, when a function returns `Result<T, E>`, it can use `?` after calling methods that can return `Result<T, E>` (where `E` must be of compatible type) to return the error `E` (similar to using `.unwrap()`, but instead of panic makes the function return the error).
+
+```rust
+fn example() -> Result<(), Error> { // An Error type. For simplicity, you can use String, or you can define your own enum.
+    something_that_returns_result()?;
+    Ok(()) // returns empty Tuple
+}
+```
+
+#### Vec&amp;lt;T&ampt;gt;
+
+`Vec`tors are growable arrays stored on the heap.
 
 ### Namespace
 

static/global.css

@@ -4,6 +4,10 @@ html, body {
 	min-height: 100vh;
 }
 
+* {
+	-webkit-tap-highlight-color: transparent;
+}
+
 body {
 	color: #333;
 	margin: 0;

static/index.html

@@ -1,20 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<meta charset='utf-8'>
-	<meta name='viewport' content='width=device-width,initial-scale=1'>
-
-	<title>Daniel Bulant</title>
-
-	<link rel='icon' type='image/png' href='/logo.png'>
-	<link rel='stylesheet' href='/global.css'>
-	<link rel='stylesheet' href='/build/bundle.css'>
-
-	<script defer src='/build/bundle.js'></script>
-	<link rel="preconnect" href="https://fonts.gstatic.com">
-	<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,700;1,400&display=swap" rel="stylesheet">
-</head>
-
-<body>
-</body>
-</html>