Contact info

public/index.html

@@ -4,7 +4,7 @@
 	<meta charset='utf-8'>
 	<meta name='viewport' content='width=device-width,initial-scale=1'>
 
-	<title>Svelte app</title>
+	<title>Daniel Bulant</title>
 
 	<link rel='icon' type='image/png' href='/favicon.png'>
 	<link rel='stylesheet' href='/global.css'>

src/App.svelte

@@ -1,5 +1,6 @@
 <script>
 	import Button from "./components/button.svelte";
+import Flexbox from "./components/flexbox.svelte";
 	import Link from "./components/link.svelte";
 	import Navbar from "./components/navbar.svelte";
 	import Project from "./components/project.svelte";
@@ -9,7 +10,8 @@
 </script>
 
 <svelte:head>
-	<title>Daniel Bulant design</title>
+	<title>Daniel Bulant - Homepage</title>
+	<meta name="description" content="Homepage of danbulant.eu - List of my projects, contact info.">
 </svelte:head>
 
 <Navbar darkmode={$darkmode}>
@@ -17,6 +19,9 @@
 		Daniel Bulant
 	</Link>
 	<Separator />
+	<Link href="#contact">
+		Contact
+	</Link>
 	<Button bind:value={$darkmode} outline={$darkmode}>{$darkmode ? "Dark" : "Light"} mode</Button>
 </Navbar>
 
@@ -24,7 +29,7 @@
 	<h1 class="center">Daniel Bulant</h1>
 
 	<section>
-		<h2 class="center">Projects</h2>
+		<h2 class="center" id="projects">Projects</h2>
 
 		<Project title="igni">
 			<p slot="description">
@@ -71,11 +76,30 @@
 		</Project>
 	</section>
 
+	<section>
+		<h2 id="contact">Contact info</h2>
+
+		<ul>
+			<li>Discord - TechmandanCZ#0135, you can find me in my <Link href="https://discord.gg/EgBGYmA" colored>server</Link>.</li>
+			<li>Github - <Link href="https://github.com/danbulant"> @danbulant </Link> </li>
+			<li>Youtube - <Link href="https://youtube.com/thetutorials"> TheTutorials </Link> </li>
+		</ul>
+	</section>
+
+
+	<footer>
+		<Flexbox>
+			&copy; Daniel Bulant {(new Date()).getFullYear()}.
+			<Separator />
+			<Link href="/"> danbulant.eu </Link>
+		</Flexbox>
+	</footer>
 </main>
 	
 <style>
 	main {
 		min-height: calc(100vh - 50px);
+		padding-bottom: 10px;
 	}
 	main section {
 		max-width: 720px;
@@ -83,6 +107,11 @@
 		padding: 0 20px;
 		width: calc(100vw - 55px);
 	}
+
+	footer {
+		margin-top: 20px;
+		padding: 10px 20px;
+	}
 	.darkmode {
 		background: #242423;
 		color: #E8EDDF;

src/components/flexbox.svelte

@@ -0,0 +1,12 @@
+
+<div>
+    <slot />
+</div>
+
+<style>
+    div {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+</style>