set up initial styling and structure

package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "TODO",
+  "name": "WompMacho.com",
   "version": "0.0.1",
   "lockfileVersion": 1,
   "requires": true,

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "TODO",
+  "name": "WompMacho.com",
-  "description": "TODO",
+  "description": "Personal Website for WompMacho",
   "version": "0.0.1",
   "scripts": {
     "dev": "sapper dev",

src/components/Footer.svelte

@@ -0,0 +1,14 @@
+<footer class="small text-center fixed-bottom">
+        <span class="text-muted">Copyright © WompMacho 2020</span>
+</footer>
+
+<style>
+    footer{
+        margin-top: 1em;
+        bottom: 0vh;
+        width: 100%;
+        height: 60px;
+        line-height: 60px;
+        background-color: #252526;
+    }
+</style>

src/components/Nav.svelte

@@ -1,9 +1,12 @@
 <script>
 	export let segment;
+	import Social from '../components/Social.svelte';
+
 </script>
 
 <style>
 	nav {
+		background-color: #323233 !important;
 		border-bottom: 1px solid rgba(255,62,0,0.1);
 		font-weight: 300;
 		padding: 0 1em;
@@ -26,6 +29,10 @@
 		float: left;
 	}
 	
+	li:hover {
+		background-color: #474748;
+	}
+
 	[aria-current] {
 		position: relative;
 		display: inline-block;
@@ -35,26 +42,37 @@
 		position: absolute;
 		content: '';
 		width: calc(100% - 1em);
-		height: 2px;
+		height: .3em;
-		background-color: rgb(255,62,0);
+		background-color: #161616;
 		display: block;
-		bottom: -1px;
+		bottom: 0px;
 	}
 
 	a {
+		color: #cccccc;
 		text-decoration: none;
 		padding: 1em 0.5em;
 		display: block;
 	}
 </style>
 
-<nav>
+<nav class="navbar navbar-expand-lg navbar-light" id="mainNav">
-	<ul>
+	<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
-		<li><a aria-current="{segment === undefined ? 'page' : undefined}" href=".">home</a></li>
+		Menu
-		<li><a aria-current="{segment === 'about' ? 'page' : undefined}" href="about">about</a></li>
+		<i class="fas fa-bars"></i>
+	</button>
+	<div class="collapse navbar-collapse" id="navbarResponsive">
+		<ul class="navbar-nav">
+			<li class=""><a class="" aria-current="{segment === undefined ? 'page' : undefined}" href=".">WompMacho</a></li>
+			<li class=""><a aria-current="{segment === 'about' ? 'page' : undefined}" href="about">about</a></li>
+			<li class=""><a aria-current="{segment === 'livestream' ? 'page' : undefined}" href="livestream">Live Stream</a></li>
+			<li class=""><a aria-current="{segment === 'esports' ? 'page' : undefined}" href="esports">esports</a></li>
+			<li class=""><a aria-current="{segment === 'videography' ? 'page' : undefined}" href="videography">videography</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 aria-current="{segment === 'blog' ? 'page' : undefined}" href="blog">blog</a></li>
+			<li><a rel=prefetch aria-current="{segment === 'projects' ? 'page' : undefined}" href="projects">projects</a></li>
 		</ul>
+	</div>
+	<Social></Social>
 </nav>

src/components/Social.svelte

@@ -0,0 +1,20 @@
+<social-links>
+    <div class="social d-flex justify-content-center align-middle">
+        <a class="mx-2" href="#!"><i class="fab fa-discord fa-2x"></i></a>
+        <a class="mx-2" href="#!"><i class="fab fa-youtube fa-2x"></i></a>
+        <a class="mx-2" href="#!"><i class="fab fa-github fa-2x"></i></a>
+        <a class="mx-2" href="#!"><i class="fab fa-twitter fa-2x"></i></a>
+        <a class="mx-2" href="#!"><i class="fab fa-instagram fa-2x"></i></a>
+        <a class="mx-2" href="#!"><i class="fab fa-linkedin fa-2x"></i></a>
+        <a class="mx-2" href="#!"><i class="fab fa-facebook fa-2x"></i></a>
+    </div>
+</social-links>
+
+<style>
+    a{
+        color: #00ff00;
+    }
+    a:hover{
+        color: red;
+    }
+</style>

src/routes/_layout.svelte

@@ -1,22 +1,25 @@
 <script>
 	import Nav from '../components/Nav.svelte';
-
+	import Footer from '../components/Footer.svelte';
 	export let segment;
 </script>
 
 <style>
 	main {
 		position: relative;
-		max-width: 56em;
+		max-width: 60em;
-		background-color: white;
+		background-color: #252526 !important;
 		padding: 2em;
 		margin: 0 auto;
 		box-sizing: border-box;
+		margin-top: 1em;
 	}
 </style>
 
-<Nav {segment}/>
+<Nav {segment}></Nav>
 
-<main>
+<main class="shadow p-3 mb-5 bg-white rounded">
 	<slot></slot>
 </main>
+
+<Footer></Footer>

src/routes/blog/_posts.js

@@ -1,92 +0,0 @@
-// Ordinarily, you'd generate this data from markdown files in your
-// repo, or fetch them from a database of some kind. But in order to
-// avoid unnecessary dependencies in the starter template, and in the
-// service of obviousness, we're just going to leave it here.
-
-// This file is called `_posts.js` rather than `posts.js`, because
-// we don't want to create an `/blog/posts` route — the leading
-// underscore tells Sapper not to do that.
-
-const posts = [
-	{
-		title: 'What is Sapper?',
-		slug: 'what-is-sapper',
-		html: `
-			<p>First, you have to know what <a href='https://svelte.dev'>Svelte</a> is. Svelte is a UI framework with a bold new idea: rather than providing a library that you write code with (like React or Vue, for example), it's a compiler that turns your components into highly optimized vanilla JavaScript. If you haven't already read the <a href='https://svelte.dev/blog/frameworks-without-the-framework'>introductory blog post</a>, you should!</p>
-
-			<p>Sapper is a Next.js-style framework (<a href='blog/how-is-sapper-different-from-next'>more on that here</a>) built around Svelte. It makes it embarrassingly easy to create extremely high performance web apps. Out of the box, you get:</p>
-
-			<ul>
-				<li>Code-splitting, dynamic imports and hot module replacement, powered by webpack</li>
-				<li>Server-side rendering (SSR) with client-side hydration</li>
-				<li>Service worker for offline support, and all the PWA bells and whistles</li>
-				<li>The nicest development experience you've ever had, or your money back</li>
-			</ul>
-
-			<p>It's implemented as Express middleware. Everything is set up and waiting for you to get started, but you keep complete control over the server, service worker, webpack config and everything else, so it's as flexible as you need it to be.</p>
-		`
-	},
-
-	{
-		title: 'How to use Sapper',
-		slug: 'how-to-use-sapper',
-		html: `
-			<h2>Step one</h2>
-			<p>Create a new project, using <a href='https://github.com/Rich-Harris/degit'>degit</a>:</p>
-
-			<pre><code>npx degit "sveltejs/sapper-template#rollup" my-app
-			cd my-app
-			npm install # or yarn!
-			npm run dev
-			</code></pre>
-
-			<h2>Step two</h2>
-			<p>Go to <a href='http://localhost:3000'>localhost:3000</a>. Open <code>my-app</code> in your editor. Edit the files in the <code>src/routes</code> directory or add new ones.</p>
-
-			<h2>Step three</h2>
-			<p>...</p>
-
-			<h2>Step four</h2>
-			<p>Resist overdone joke formats.</p>
-		`
-	},
-
-	{
-		title: 'Why the name?',
-		slug: 'why-the-name',
-		html: `
-			<p>In war, the soldiers who build bridges, repair roads, clear minefields and conduct demolitions — all under combat conditions — are known as <em>sappers</em>.</p>
-
-			<p>For web developers, the stakes are generally lower than those for combat engineers. But we face our own hostile environment: underpowered devices, poor network connections, and the complexity inherent in front-end engineering. Sapper, which is short for <strong>S</strong>velte <strong>app</strong> mak<strong>er</strong>, is your courageous and dutiful ally.</p>
-		`
-	},
-
-	{
-		title: 'How is Sapper different from Next.js?',
-		slug: 'how-is-sapper-different-from-next',
-		html: `
-			<p><a href='https://github.com/zeit/next.js'>Next.js</a> is a React framework from <a href='https://vercel.com/'>Vercel</a>, and is the inspiration for Sapper. There are a few notable differences, however:</p>
-
-			<ul>
-				<li>It's powered by <a href='https://svelte.dev'>Svelte</a> instead of React, so it's faster and your apps are smaller</li>
-				<li>Instead of route masking, we encode route parameters in filenames. For example, the page you're looking at right now is <code>src/routes/blog/[slug].svelte</code></li>
-				<li>As well as pages (Svelte components, which render on server or client), you can create <em>server routes</em> in your <code>routes</code> directory. These are just <code>.js</code> files that export functions corresponding to HTTP methods, and receive Express <code>request</code> and <code>response</code> objects as arguments. This makes it very easy to, for example, add a JSON API such as the one <a href='blog/how-is-sapper-different-from-next.json'>powering this very page</a></li>
-				<li>Links are just <code>&lt;a&gt;</code> elements, rather than framework-specific <code>&lt;Link&gt;</code> components. That means, for example, that <a href='blog/how-can-i-get-involved'>this link right here</a>, despite being inside a blob of HTML, works with the router as you'd expect.</li>
-			</ul>
-		`
-	},
-
-	{
-		title: 'How can I get involved?',
-		slug: 'how-can-i-get-involved',
-		html: `
-			<p>We're so glad you asked! Come on over to the <a href='https://github.com/sveltejs/svelte'>Svelte</a> and <a href='https://github.com/sveltejs/sapper'>Sapper</a> repos, and join us in the <a href='https://svelte.dev/chat'>Discord chatroom</a>. Everyone is welcome, especially you!</p>
-		`
-	}
-];
-
-posts.forEach(post => {
-	post.html = post.html.replace(/^\t{3}/gm, '');
-});
-
-export default posts;

src/routes/esports.svelte

@@ -0,0 +1,7 @@
+<svelte:head>
+	<title>esports</title>
+</svelte:head>
+
+<h1>Esports Page</h1>
+
+<p>This is the 'esports' page.</p>

src/routes/index.svelte

@@ -1,5 +1,7 @@
 <script>
 	import successkid from 'images/successkid.jpg';
+	import logo_512 from 'images/logo-512.png';
+
 </script>
 
 <style>
@@ -37,14 +39,20 @@
 </style>
 
 <svelte:head>
-	<title>Sapper project template</title>
+	<title>WompMacho.com</title>
 </svelte:head>
 
 <h1>Great success!</h1>
 
-<figure>
+<figure class="">
+	<img src="{logo_512}" alt="">
+
+
 	<img alt="Success Kid" src="{successkid}">
 	<figcaption>Have fun with Sapper!</figcaption>
 </figure>
 
-<p><strong>Try editing this file (src/routes/index.svelte) to test live reloading.</strong></p>
+
+<p><strong>Try editing this file goteem to test live reloading.</strong></p>
+
+

src/routes/livestream.svelte

@@ -0,0 +1,7 @@
+<svelte:head>
+	<title>Live Stream</title>
+</svelte:head>
+
+<h1>Stream Page</h1>
+
+<p>Stream Stuff Lives Here</p>

src/routes/projects/[slug].svelte

@@ -2,7 +2,7 @@
 	export async function preload({ params }) {
 		// the `slug` parameter is available because
 		// this file is called [slug].svelte
-		const res = await this.fetch(`blog/${params.slug}.json`);
+		const res = await this.fetch(`projects/${params.slug}.json`);
 		const data = await res.json();
 
 		if (res.status === 200) {

src/routes/projects/_posts.js

@@ -0,0 +1,59 @@
+// Ordinarily, you'd generate this data from markdown files in your
+// repo, or fetch them from a database of some kind. But in order to
+// avoid unnecessary dependencies in the starter template, and in the
+// service of obviousness, we're just going to leave it here.
+
+// This file is called `_posts.js` rather than `posts.js`, because
+// we don't want to create an `/projects/posts` route — the leading
+// underscore tells Sapper not to do that.
+
+const posts = [
+	{
+		title: 'WompMacho.com',
+		slug: 'this-website',
+		html: `
+			<h3>About This Site goes here</h3>
+		`
+	},
+	{
+		title: 'Django Site',
+		slug: 'django',
+		html: `
+			<h3>About Django Site goes here</h3>
+		`
+	},
+	{
+		title: 'Tuner',
+		slug: 'tuner',
+		html: `
+			<h3>About Tuner JS goes here</h3>
+		`
+	},
+	{
+		title: 'Sound Visualizer',
+		slug: 'sound-visualizer',
+		html: `
+			<h3>About Sound Visualizer JS goes here</h3>
+		`
+	},
+	{
+		title: 'Fractal Tree App',
+		slug: 'fractal-tree-java-applet',
+		html: `
+			<h3>About Fractal Tree Java Applet App goes here</h3>
+		`
+	},
+	{
+		title: 'Wompchat Chrome Extension',
+		slug: 'wompchat',
+		html: `
+			<h3>About Wompchat Chrome Extension goes here</h3>
+		`
+	}
+];
+
+posts.forEach(post => {
+	post.html = post.html.replace(/^\t{3}/gm, '');
+});
+
+export default posts;

src/routes/projects/index.svelte

@@ -1,6 +1,6 @@
 <script context="module">
 	export function preload() {
-		return this.fetch(`blog.json`).then(r => r.json()).then(posts => {
+		return this.fetch(`projects.json`).then(r => r.json()).then(posts => {
 			return { posts };
 		});
 	}
@@ -18,10 +18,10 @@
 </style>
 
 <svelte:head>
-	<title>Blog</title>
+	<title>Projects</title>
 </svelte:head>
 
-<h1>Recent posts</h1>
+<h1>Past Projects</h1>
 
 <ul>
 	{#each posts as post}
@@ -29,6 +29,6 @@
 				tell Sapper to load the data for the page as soon as
 				the user hovers over the link or taps it, instead of
 				waiting for the 'click' event -->
-		<li><a rel="prefetch" href="blog/{post.slug}">{post.title}</a></li>
+		<li><a rel="prefetch" href="projects/{post.slug}">{post.title}</a></li>
 	{/each}
 </ul>

src/routes/resume/education.svelte

@@ -0,0 +1,7 @@
+<svelte:head>
+	<title>education</title>
+</svelte:head>
+
+<h1>Education Page</h1>
+
+<p>In conjunction with Experiance Page</p>

src/routes/resume/experiance.svelte

@@ -0,0 +1,7 @@
+<svelte:head>
+	<title>experiance</title>
+</svelte:head>
+
+<h1>Experiance Page</h1>
+
+<p>Need A Direct Link For This Page</p>

src/routes/videography.svelte

@@ -0,0 +1,7 @@
+<svelte:head>
+	<title>Videography</title>
+</svelte:head>
+
+<h1>Videography Page</h1>
+
+<p>Videography Stuff Lives Here</p>

src/template.html

@@ -1,15 +1,25 @@
 <!doctype html>
 <html lang="en">
 	<head>
+		<link rel="canonical" href="https://wompmacho.com"/>
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width,initial-scale=1.0">
 		<meta name="theme-color" content="#333333">
 
 		%sapper.base%
 
-	<link rel="stylesheet" href="global.css">
+		<!-- Font Awesome icons (free version)-->
+        <script src="https://use.fontawesome.com/releases/v5.15.1/js/all.js" crossorigin="anonymous"></script>
+        <!-- Google fonts-->
+        <link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet" />
+		<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet" />
+
+		<!-- Font Awesome icons (free version)-->
+		<link rel="stylesheet" href="css/bootstrap-grayscale-styles.css">
+		<link rel="stylesheet" href="css/global.css">
+		
 		<link rel="manifest" href="manifest.json" crossorigin="use-credentials">
-	<link rel="icon" type="image/png" href="favicon.png">
+		<link rel="icon" type="image/png" href="icons/favicon.png">
 
 		<!-- Sapper creates a <script> tag containing `src/client.js`
 			and anything else it needs to hydrate the app and
@@ -25,9 +35,21 @@
 			the current page has one -->
 		%sapper.head%
 	</head>
-<body>
+	<body id="page-top">
 		<!-- The application will be rendered inside this element,
 			because `src/client.js` references it -->
 		<div id="sapper">%sapper.html%</div>
 	</body>
+	<style>
+		body{
+			background-color: #1e1e1e;
+			color: #ffffff;
+		}
+	</style>
+
+	<!-- Bootstrap core JS-->
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+	<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>
+	<!-- Third party plugin JS-->
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
 </html>

static/css/global.css

@@ -3,7 +3,8 @@ body {
 	font-family: Roboto, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
 	font-size: 14px;
 	line-height: 1.5;
-	color: #333;
+	color: #d4d4d4;
+	background-color: #1e1e1e;
 }
 
 h1, h2, h3, h4, h5, h6 {