Add some dark styles

src/components/Nav.svelte

@@ -3,7 +3,7 @@
 </script>
 
 <style>
-	nav {
+	/* nav {
 		border-bottom: 1px solid rgba(255,62,0,0.1);
 		font-weight: 300;
 		padding: 0 1em;
@@ -15,7 +15,7 @@
 	}
 
 	/* clearfix */
-	ul::after {
+	/* ul::after {
 		content: '';
 		display: block;
 		clear: both;
@@ -39,22 +39,48 @@
 		background-color: rgb(255,62,0);
 		display: block;
 		bottom: -1px;
-	}
+	} */
 
-	a {
+	/* a {
 		text-decoration: none;
 		padding: 1em 0.5em;
 		display: block;
-	}
+  } */
+  
+  nav {
+    position: sticky;
+    top: 0;
+    background: rgb(31, 22, 94);
+    z-index: 1;
+    padding: 0.5em;
+    box-shadow: 0px 2px 4px #090808;
+  }
+
+  nav a {
+    padding: 0.4em 0.5em;
+    text-decoration: none;
+  }
+
+  nav a:hover {
+    text-decoration: underline
+  }
 </style>
 
 <nav>
-	<ul>
+	<!-- <ul> -->
 		<!-- <li><a class='{segment === undefined ? "selected" : ""}' href='.'>home</a></li> -->
-		<li><a class='{segment === "portfolio" ? "selected" : ""}' href='portfolio'>portfolio</a></li>
+		<!-- <li><a class='{segment === "portfolio" ? "selected" : ""}' href='portfolio'>portfolio</a></li> -->
 
 		<!-- for the blog link, we're using rel=prefetch so that Sapper prefetches
 		     the blog data when we hover over the link or tap it on a touchscreen -->
 		<!-- <li><a rel=prefetch class='{segment === "blog" ? "selected" : ""}' href='blog'>blog</a></li> -->
-	</ul>
+	<!-- </ul> -->
+
+  <div class="page-navigation">
+	  <a href="portfolio#personal-information">About</a>
+		<a href="portfolio#skills">Skills</a>
+		<a href="portfolio#work-history">Work History</a>
+		<a href="portfolio#projects">Projects</a>
+		<a href="portfolio#education">Education</a>
+  </div>
 </nav>

src/routes/_layout.svelte

@@ -5,18 +5,30 @@
 </script>
 
 <style>
+  .app-content {
+		background: linear-gradient(176deg, rgb(31, 22, 94) 0%,rgb(67, 117, 236) 100%);
+    background-attachment: fixed;
+		color:#f2f0f0;
+  }
+
 	main {
 		position: relative;
 		max-width: 56em;
-		background-color: white;
 		padding: 2em;
 		margin: 0 auto;
 		box-sizing: border-box;
 	}
+
+  :global(::selection) {
+    background: #0dd0d0;
+  }
+
 </style>
 
-<Nav {segment}/>
+<div class="app-content">
+  <Nav {segment}/>
 
-<main>
+  <main>
-	<slot></slot>
+    <slot></slot>
-</main>
+  </main>
+</div>

src/routes/index.svelte

@@ -1,3 +1,9 @@
+<script context="module">
+  export async function preload() {
+	  return this.redirect(302, 'portfolio')
+  }
+</script>
+
 <style>
 	h1, figure, p {
 		text-align: center;

src/routes/portfolio/index.svelte

@@ -15,6 +15,16 @@
   export let content
 </script>
 
+<style>
+  :global([id])::before {
+    content: '';
+    display: block;
+    height:      3em;
+    margin-top: -3em;
+    visibility: hidden;
+  }
+</style>
+
 <svelte:head>
 	<title>{content.title}</title>
 </svelte:head>
@@ -23,11 +33,11 @@
 
 <h2>Software Developer</h2>
 
-<section class="personal-information">
+<section id="personal-information">
   {@html content.body}
 </section>
 
-<section class="work-history">
+<section id="work-history">
   <h2>Work experience</h2>
   <section class="work-history-prelude">
     {@html content.workHistoryPrelude}
@@ -41,7 +51,7 @@
   </ul>
 </section>
 
-<section class="projects">
+<section id="projects">
   <h2>Projects</h2>
   <ul>
     {#each content.projects as project}
@@ -52,7 +62,7 @@
   </ul>
 </section>
 
-<section class="education">
+<section id="education">
   <h2>Education</h2>
   <ul>
     {#each content.education as work}

static/global.css

@@ -1,3 +1,7 @@
+html {
+	scroll-behavior: smooth;
+}
+
 body {
 	margin: 0;
 	font-family: Roboto, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;