web modernization

src/lib/components/bar.svelte

@@ -1,4 +1,4 @@
-<nav class="bar-component">
+<nav class="bar-component backdrop-blur">
     <slot />
 </nav>
 
@@ -15,7 +15,4 @@
     :global(.dark nav.bar-component) {
 		background: rgba(28, 28, 33, 0.2);
     }
-    :global(nav.bar-component > *) {
-        margin: 5px 10px;
-    }
 </style>

src/lib/components/bottombar.svelte

@@ -9,7 +9,7 @@
 		<h3>Daniel Bulant</h3>
 		<Split />
 		<h3>
-			Design by Carl Hansen
+			2020-2023
 		</h3>
 	</Bar>
 </div>
@@ -19,6 +19,10 @@
 		margin: 30px auto 30px auto;
 		width: calc(100% - min(100px, 10%));
 	}
+    
+    h3 {
+        margin: 5px 10px;
+    }
 	@media (max-width: 520px) {
 		.bottombar {
 			margin: 30px 0 0 0;

src/lib/components/button.svelte

@@ -3,19 +3,21 @@
 
     export var href = "";
     export var text = false;
+
+    let className;
+    export { className as class };
 </script>
 
 {#if href}
-    <a href={href} tabindex="0" class="button" class:text class:dark={$darkmode}><slot /></a>
+    <a href={href} tabindex="0" class="button {className}" class:text class:dark={$darkmode}><slot /></a>
 {:else}
-    <button class="button" on:click class:text class:dark={$darkmode}><slot /></button>
+    <button class="button {className}" on:click class:text class:dark={$darkmode}><slot /></button>
 {/if}
 
 <style>
 
     .button {
-        background: #006db3;
+        @apply backdrop-blur bg-black/50 rounded;
-        border-radius: 5px;
         padding: 10px 15px;
         color: white;
         cursor: pointer;

src/lib/components/hero.svelte

@@ -34,12 +34,10 @@
         position: relative;
         padding: 40px 120px;
         padding: 40px min(120px, 10vw);
-        margin: 0 20px;
+        margin: 2rem 1.5rem;
         /* min-height: calc(100vh - 129px - 80px + 5px); */
         max-height: 1080px;
         max-width: 1500px;
-        
-        margin-bottom: 30px;
     }
     .bg {
         position: absolute;

src/lib/components/navbar.svelte

@@ -9,14 +9,16 @@
     }
 </script>
 
-<div class="bar fixed top-0 left-0 z-99 w-100vw max-w-1920px mx-auto mb-30px backdrop-blur" class:dark={$darkmode}>
+<div class="bar fixed top-0 left-0 z-99 w-100vw mx-auto mb-30px" class:dark={$darkmode}>
 	<Bar>
-		<a href="/"><h3>Daniel Bulant</h3></a>
+        <div class="subbar w-full flex items-center justify-between max-w-8xl m-auto">
-		<Split />
+            <a href="/"><h3>Daniel Bulant</h3></a>
-		<Button text on:click={toggle}>{$darkmode ? "Light" : "Dark"} mode</Button>
+            <Split />
-        <div class="big">
+            <Button text on:click={toggle}>{$darkmode ? "Light" : "Dark"} mode</Button>
-            <Button text href="/#contact" class="big">Contact</Button>
+            <div class="big">
-            <Button text href="/posts" class="big">Blog</Button>
+                <Button text href="/#contact" class="big">Contact</Button>
+                <Button text href="/posts" class="big">Blog</Button>
+            </div>
         </div>
 	</Bar>
 </div>
@@ -35,14 +37,9 @@
 		backdrop-filter: blur(10px);
 		-webkit-backdrop-filter: blur(10px);
 	}
-	/* @supports (-moz-appearance:none) {
+    .bar .subbar > * {
-		.bar {
+        margin: 5px 10px;
-			background: rgba(255,255,255,0.9) !important;
+    }
-		}
-		.dark.bar {
-			background: rgba(28, 28, 33, 0.9) !important;
-		}
-	} */
 	@media (max-width: 400px) {
 		.bar {
 			width: 100vw;

src/lib/components/post.svelte

@@ -70,8 +70,8 @@
         flex-grow: 1;
     }
     @media (max-width: 768px) {
-        .post {
+        img.thumbnail {
-            flex-wrap: wrap;
+            width: 20vw;
         }
     }
     h4 {

src/lib/components/project.svelte

@@ -77,8 +77,8 @@
         margin-bottom: 30px;
     }
     .imgcon {
+        @apply rounded-lg mb-4;
         width: 100%;
-        border-radius: 10px;
         position: relative;
         overflow: hidden;
     }
@@ -90,7 +90,7 @@
         filter: blur(35px);
     }
     .desc {
-        @apply absolute top-0 left-0 w-full h-full rounded-10px opacity-0 select-none flex flex-col py-10px px-15px;
+        @apply absolute top-0 left-0 w-full h-full rounded-lg opacity-0 select-none flex flex-col py-10px px-15px;
         transition: background-color 0.3s, opacity 0.3s;
         background-color: rgba(0, 0, 0, 0.2);
         color: rgb(214, 214, 214);
@@ -107,9 +107,9 @@
         flex-grow: 1;
     }
     img {
+        @apply rounded-lg;
         width: 100%;
         height: auto;
-        border-radius: 10px;
         transition: filter 0.3s;
         filter: blur(0px) grayscale(0);
     }

src/routes/+layout.svelte

@@ -30,3 +30,9 @@
         <slot />
     </PageTransition>
 </div>
+
+<style>
+    :global(*) {
+        box-sizing: border-box;
+    }
+</style>

src/routes/+page.svelte

@@ -42,17 +42,22 @@
 			<b on:mouseenter={() => appTypeHover = "applications"} on:mouseleave={() => appTypeHover == "applications" && (appTypeHover = null)}>applications</b> and
 			<b on:mouseenter={() => appTypeHover = "bots"} on:mouseleave={() => appTypeHover == "bots" && (appTypeHover = null)}>discord bots</b>.</h1>
 		<!-- <h3>To be used later</h3> -->
-		<Button href="#projects">Check out my work</Button>
+        <div class="flex gap-4">
+            <Button class="!p-4" href="#projects">Check out my work</Button>
+            <div class="blog-preview flex backdrop-blur bg-black/40 items-center rounded">
+                <Button class="!p-4 h-full !flex items-center !rounded-r-0 !bg-transparent !backdrop-none" href="/posts">
+                    <span>
+                        Blog
+                    </span>
+                </Button>
+                <div class="right p-4 border-l-2 border-l-white/20">
+                    {#if selectedPost}
+                        <a href={selectedPost.path}><b>{selectedPost.title}</b></a>
+                    {/if}
+                </div>
+            </div>
+        </div>
 	</Hero>
-	<div class="blog">
-		I recently started my own blog.<br>
-		{#if selectedPost}
-			You can checkout &ldquo;<a href={selectedPost.path}><b>{selectedPost.title}</b></a>&rdquo; and other recent blog posts:<br>
-		{/if}
-		<div style="text-align: center; margin-top: 5px;">
-			<Button href="/posts">blog</Button>
-		</div>
-	</div>
 	<div class="projects" id="projects">
 		<div>
 			<h2>
@@ -84,6 +89,7 @@
 				extradark
 				width={1920}
 				height={940}
+				link="https://animasher.net"
                 name="Animasher"
 			>
 				<b>Animasher</b> - Platform for creating and sharing animations
@@ -246,19 +252,6 @@
 		background: white;
 		border-radius: 50%;
 	}
-	.blog {
-		margin: auto;
-		margin-top: 20px;
-		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));
 	}

src/routes/posts/+page.svelte

@@ -39,42 +39,55 @@
     <meta property="og:profile:gender" content="male" />
 </svelte:head>
 
-<div class="posts" class:dark={$darkmode}>
+
-    <h1>Posts</h1>
+<div class="parent md:flex max-w-screen" class:dark={$darkmode}>
+    <h1 class="md:hidden">Posts</h1>
 
     {#if tags}
-        <div class="tags">
+        <div class="tags md:flex-col">
             {#each tags as tag}
                 <div class="tag" class:selected={selectedTags.includes(tag)} on:click={() => toggle(tag)}>
                     {tag}
                 </div>
             {/each}
+            <a href="/posts/rss.xml" class="rss hidden flex items-center w-full md:block">
+                <img src="/rss-icon.svg" alt="RSS icon" class="w-6 h-6 inline" />
+                RSS
+            </a>
         </div>
     {/if}
-
+    
-    <hr>
+    <div class="posts">
-
+        <h1 class="hidden md:block">Posts</h1>
-    {#if !selectedTags.length || selectedTags.find(tag => posts[0].categories.includes(tag))}
+    
-        <HeroPost {...posts[0]} />
+        {#if !selectedTags.length || selectedTags.find(tag => posts[0].categories.includes(tag))}
-
+            <HeroPost {...posts[0]} />
-        <hr>
+    
-    {/if}
+            <hr>
-
+        {/if}
-
+    
-    {#each filteredPosts as post (post.title)}
+    
-        <div animate:flip={{ duration: 250 }}>
+        {#each filteredPosts as post (post.title)}
-            <Post {...post} bind:currentHover />
+            <div animate:flip={{ duration: 250 }}>
-        </div>
+                <Post {...post} bind:currentHover />
-    {/each}
+            </div>
-
+        {/each}
-    <small>There's also RSS feed available <a href="/posts/rss.xml">here</a>.</small>
+    
+        <small class="md:hidden block">There's also RSS feed available <a href="/posts/rss.xml">here</a>.</small>
+    </div>
 </div>
 
 <style>
+    .parent {
+        @apply pt-10 w-max m-auto px-5 gap-5;
+    }
     .posts {
-        margin: auto;
+        @apply max-w-2xl;
-        max-width: 700px;
+    }
-        padding: 0 20px;
+    @media (min-width: 42rem) {
+        .posts {
+            @apply w-2xl;
+        }
     }
     .tags {
         @apply flex flex-wrap gap-2 mt-2 mb-3;
@@ -83,11 +96,9 @@
         background: rgb(77, 77, 77);
     }
     .tag {
-        background:rgb(173, 173, 173);
+        @apply rounded-full cursor-pointer select-none px-4 py-2;
-        padding: 5px 10px;
+        background: rgb(173, 173, 173);
-        border-radius: 99px;
+        text-transform: capitalize;
-        cursor: pointer;
-        user-select: none;
     }
     .dark .tag.selected {
         background: rgb(0, 108, 170);
@@ -107,12 +118,14 @@
         background: white;
     }
     small {
-        display: block;
         text-align: center;
         width: 100%;
         margin: 30px 0;
     }
-    small a {
+    small a, .rss {
         color: rgb(4, 192, 192)
     }
+    .rss {
+        @apply pl-4;
+    }
 </style>

static/rss-icon.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="128px" height="128px" id="RSSicon" viewBox="0 0 256 256">
+<defs>
+<linearGradient x1="0.085" y1="0.085" x2="0.915" y2="0.915" id="RSSg">
+<stop  offset="0.0" stop-color="#E3702D"/><stop  offset="0.1071" stop-color="#EA7D31"/>
+<stop  offset="0.3503" stop-color="#F69537"/><stop  offset="0.5" stop-color="#FB9E3A"/>
+<stop  offset="0.7016" stop-color="#EA7C31"/><stop  offset="0.8866" stop-color="#DE642B"/>
+<stop  offset="1.0" stop-color="#D95B29"/>
+</linearGradient>
+</defs>
+<rect width="256" height="256" rx="55" ry="55" x="0"  y="0"  fill="#CC5D15"/>
+<rect width="246" height="246" rx="50" ry="50" x="5"  y="5"  fill="#F49C52"/>
+<rect width="236" height="236" rx="47" ry="47" x="10" y="10" fill="url(#RSSg)"/>
+<circle cx="68" cy="189" r="24" fill="#FFF"/>
+<path d="M160 213h-34a82 82 0 0 0 -82 -82v-34a116 116 0 0 1 116 116z" fill="#FFF"/>
+<path d="M184 213A140 140 0 0 0 44 73 V 38a175 175 0 0 1 175 175z" fill="#FFF"/>
+</svg>