From d4825b60f11a63dbce00d9910bcc6574e97beed9 Mon Sep 17 00:00:00 2001
From: Bobby <bobbysebolao@gmail.com>
Date: Fri, 5 Nov 2021 01:44:45 +0000
Subject: [PATCH] Style home page

---
 src/app.css                        |   9 +-
 src/lib/head/Head.svelte           |   3 +-
 src/lib/home/Aliens.svelte         |  56 +++++++++
 src/lib/home/ContactForm.svelte    |  77 +++++++++++++
 src/lib/home/ProjectSummary.svelte | 137 ++++++++++++++++++++++
 src/routes/__layout.svelte         |  30 +++--
 src/routes/about.svelte            |  70 ++++++------
 src/routes/blog.svelte             |  33 +++---
 src/routes/index.svelte            | 175 +++++++++++++++++++++--------
 src/routes/work.svelte             |  33 +++---
 10 files changed, 494 insertions(+), 129 deletions(-)
 create mode 100644 src/lib/home/Aliens.svelte
 create mode 100644 src/lib/home/ContactForm.svelte
 create mode 100644 src/lib/home/ProjectSummary.svelte

diff --git a/src/app.css b/src/app.css
index 4e1ed02..d428865 100644
--- a/src/app.css
+++ b/src/app.css
@@ -6,11 +6,18 @@
   box-sizing: border-box;
   color: rgba(0, 0, 0, 0.84);
 
-  /* Global colour variables */
+  /* Primary colours */
+  /* Normal state */
   --postit-green: #afec6a;
   --postit-yellow: #faf557;
   --postit-blue: #7fd9cf;
   --postit-pink: #fe9bba;
+
+  /* Hover state */
+  --postit-green-hover: hsl(88, 77%, 77%);
+  --postit-yellow-hover: hsl(58, 94%, 76%);
+  --postit-blue-hover: hsl(173, 54%, 77%);
+  --postit-pink-hover: hsl(341, 98%, 90%);
 }
 
 body {
diff --git a/src/lib/head/Head.svelte b/src/lib/head/Head.svelte
index cd81241..0847243 100644
--- a/src/lib/head/Head.svelte
+++ b/src/lib/head/Head.svelte
@@ -2,7 +2,8 @@
   <!-- Global site tag (gtag.js) - Google Analytics -->
   <script
     async
-    src="https://www.googletagmanager.com/gtag/js?id=UA-100955415-3"></script>
+    src="https://www.googletagmanager.com/gtag/js?id=UA-100955415-3">
+  </script>
   <script>
     window.dataLayer = window.dataLayer || [];
     function gtag() {
diff --git a/src/lib/home/Aliens.svelte b/src/lib/home/Aliens.svelte
new file mode 100644
index 0000000..cec49c8
--- /dev/null
+++ b/src/lib/home/Aliens.svelte
@@ -0,0 +1,56 @@
+<script>
+  export let active_display_modes = "";
+  export let alienCount = 0;
+  export let alienType = "one";
+</script>
+
+<div class="aliens {active_display_modes}">
+  {#each Array(alienCount) as _}
+    <div class="aliens__{alienType}" />
+  {/each}
+</div>
+
+<style lang="scss">
+  .sprite {
+    &.aliens {
+      display: flex;
+      justify-content: space-around;
+      margin-top: 5em;
+      margin-bottom: 6.5em;
+      div {
+        width: 30px;
+        height: 30px;
+        background-repeat: no-repeat;
+        background-size: cover;
+        background-position: left center;
+        animation: alienAnim 2s steps(2) infinite;
+      }
+
+      .aliens__one {
+        background-image: url(/static/alien_1.svg);
+      }
+
+      .aliens__two {
+        background-image: url(/static/alien_2.svg);
+      }
+
+      .aliens__three {
+        background-image: url(/static/alien_3.svg);
+      }
+
+      .aliens__defense {
+        background-image: url(/static/defense.svg);
+      }
+
+      .aliens__player {
+        background-image: url(/static/player.svg);
+      }
+
+      @keyframes alienAnim {
+        100% {
+          background-position-x: 200%;
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/lib/home/ContactForm.svelte b/src/lib/home/ContactForm.svelte
new file mode 100644
index 0000000..6595022
--- /dev/null
+++ b/src/lib/home/ContactForm.svelte
@@ -0,0 +1,77 @@
+<form
+  class="contact-form"
+  action="/contact/send"
+  method="post"
+  enctype="multipart/form-data"
+>
+  <input
+    type="text"
+    name="name"
+    placeholder="Ada Lovelace"
+    id="contact-form-name"
+    required
+  />
+  <label for="contact-form-name">Name</label>
+  <input
+    type="text"
+    name="email"
+    placeholder="ada@example.com"
+    id="contact-form-email"
+    required
+  />
+  <label for="contact-form-email">Email</label>
+
+  <fieldset class="contact-form-about">
+    <legend>About</legend>
+    <div class="contact-form-checkboxes">
+      <div>
+        <input
+          class="contact-form-checkbox"
+          type="checkbox"
+          name="websiteCheckbox"
+          id="contact-form-checkbox-one"
+        />
+        <label for="contact-form-checkbox-one">Website</label>
+        <div />
+        <div />
+      </div>
+      <div>
+        <input
+          class="contact-form-checkbox"
+          type="checkbox"
+          name="contentCheckbox"
+          id="contact-form-checkbox-two"
+        />
+        <label for="contact-form-checkbox-two">Content</label>
+        <div />
+        <div />
+      </div>
+      <div>
+        <input
+          class="contact-form-checkbox"
+          type="checkbox"
+          name="seoCheckbox"
+          id="contact-form-checkbox-three"
+        />
+        <label for="contact-form-checkbox-three">SEO</label>
+        <div />
+        <div />
+      </div>
+      <div>
+        <input
+          class="contact-form-checkbox"
+          type="checkbox"
+          name="otherCheckbox"
+          id="contact-form-checkbox-four"
+        />
+        <label for="contact-form-checkbox-four">Other</label>
+        <div />
+        <div />
+      </div>
+    </div>
+  </fieldset>
+  <textarea id="contact-form-message" name="message" rows="8" required />
+  <label for="contact-form-message">Message</label>
+
+  <button type="submit" id="contact-form-button">Send</button>
+</form>
diff --git a/src/lib/home/ProjectSummary.svelte b/src/lib/home/ProjectSummary.svelte
new file mode 100644
index 0000000..22adb85
--- /dev/null
+++ b/src/lib/home/ProjectSummary.svelte
@@ -0,0 +1,137 @@
+<script>
+  export let colour = "#cccccc";
+  export let projectType = "Distributed Cloud Platform";
+  export let projectName = "Rate My Barber";
+  export let projectDescription = `Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum
+        blanditiis quisquam odit laborum minus, veniam aliquid, laboriosam atque
+        a corrupti odio architecto.`;
+  export let projectTech = "Built with Node.js, React, and SQL.";
+  export let ctaUrl = "https://github.com/bobbysebolao";
+  export let ctaText = "GitHub";
+</script>
+
+<section class="portfolio-project">
+  <div class="project-image"><div /></div>
+  <div class="project-bg {colour}">
+    <div class="project-description">
+      <p class="project-type">{projectType}</p>
+      <h2 class="project-title">{projectName}</h2>
+      <p class="project-summary">{projectDescription}</p>
+      <p class="project-tech">{projectTech}</p>
+    </div>
+  </div>
+
+  <a href={ctaUrl} target="_blank" class="read-more-cta {colour}">{ctaText}</a>
+</section>
+
+<style lang="scss">
+  .portfolio-project {
+    margin-bottom: 10em;
+    position: relative;
+    z-index: 0;
+
+    .project-image {
+      width: 360px;
+      height: 448px;
+      margin-top: 0px;
+      background: #cccccc;
+      background-repeat: no-repeat;
+      background-position: center center;
+      z-index: 1;
+      border-radius: 5px;
+    }
+
+    .project-bg {
+      position: absolute;
+      top: -1.5em;
+      left: 1.5em;
+      width: calc(100% - 1.5em);
+      height: 448px;
+      z-index: -1;
+      border-radius: 5px;
+
+      &.green {
+        background: var(--postit-green);
+      }
+
+      &.yellow {
+        background: var(--postit-yellow);
+      }
+
+      &.blue {
+        background: var(--postit-blue);
+      }
+
+      &.pink {
+        background: var(--postit-pink);
+      }
+    }
+
+    .project-description {
+      display: flex;
+      flex-direction: column;
+      position: absolute;
+      top: 0em;
+      right: 0;
+      width: 280px;
+      z-index: 0;
+      padding: 2em 1.25em 0em 1.25em;
+
+      .project-type {
+        align-self: flex-end;
+        text-align: right;
+        width: 70%;
+        margin: 0 0 0 0;
+      }
+
+      .project-title {
+        margin-top: 24px;
+        margin-bottom: 8px;
+        text-align: left;
+      }
+
+      .project-summary {
+        font-family: "Lato", sans-serif;
+        text-align: left;
+      }
+
+      .project-tech {
+        font-family: "Lato", sans-serif;
+        text-align: left;
+      }
+    }
+
+    .read-more-cta {
+      position: absolute;
+      bottom: 0px;
+      right: 20px;
+      font-size: 1.25em;
+      padding: 12px 12px;
+      text-transform: uppercase;
+      background: black;
+      text-decoration: none;
+      color: white;
+      transition: all 0.25s ease;
+      border-radius: 5px;
+
+      &.green:hover {
+        background: var(--postit-green-hover);
+        color: black;
+      }
+      &.yellow:hover {
+        background: var(--postit-yellow-hover);
+        color: black;
+      }
+
+      &.blue:hover {
+        background: var(--postit-blue-hover);
+        color: black;
+      }
+
+      &.pink:hover {
+        background: var(--postit-pink-hover);
+        color: black;
+      }
+    }
+  }
+</style>
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index f41d462..e82f71c 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -1,9 +1,12 @@
 <script>
+  import { setContext, getContext } from "svelte";
   import Head from "$lib/head/Head.svelte";
   import Icons from "$lib/icons/Icons.svelte";
   import Header from "$lib/header/Header.svelte";
   import Footer from "$lib/footer/Footer.svelte";
   import "../app.css";
+  const active_display_modes = "sprite";
+  setContext("active_display_modes", active_display_modes);
 </script>
 
 <Head />
@@ -12,21 +15,32 @@
 
 <Header />
 
-<main>
+<main class={active_display_modes}>
   <slot />
 </main>
 
 <Footer />
 
-<style>
+<style lang="scss">
   main {
-    flex: 1;
+    background: #fdfdfd;
+    padding: 80px 80px 0em 80px;
+    box-shadow: 5px 10px 10px 0px #000000;
+    font-family: "Permanent Marker", cursive;
+
     display: flex;
     flex-direction: column;
-    padding: 1rem;
-    width: 100%;
-    max-width: 1024px;
-    margin: 0 auto;
-    box-sizing: border-box;
+    justify-content: space-between;
+    max-width: 840px;
+    z-index: 0;
+    position: relative;
+    &.sprite {
+      font-family: "VT323", monospace;
+    }
+  }
+  @media only screen and (min-device-width: 320px) and (max-device-width: 600px) {
+    main {
+      padding: 2.5em 2.5em 0em 2.5em;
+    }
   }
 </style>
diff --git a/src/routes/about.svelte b/src/routes/about.svelte
index 569d3e1..5b4666f 100644
--- a/src/routes/about.svelte
+++ b/src/routes/about.svelte
@@ -1,50 +1,46 @@
 <script context="module">
-	import { browser, dev } from '$app/env';
+  import { browser, dev } from "$app/env";
 
-	// we don't need any JS on this page, though we'll load
-	// it in dev so that we get hot module replacement...
-	export const hydrate = dev;
+  // we don't need any JS on this page, though we'll load
+  // it in dev so that we get hot module replacement...
+  export const hydrate = dev;
 
-	// ...but if the client-side router is already loaded
-	// (i.e. we came here from elsewhere in the app), use it
-	export const router = browser;
+  // ...but if the client-side router is already loaded
+  // (i.e. we came here from elsewhere in the app), use it
+  export const router = browser;
 
-	// since there's no dynamic data here, we can prerender
-	// it so that it gets served as a static asset in prod
-	export const prerender = true;
+  // since there's no dynamic data here, we can prerender
+  // it so that it gets served as a static asset in prod
+  export const prerender = true;
 </script>
 
 <svelte:head>
-	<title>About</title>
+  <title>About | Bobby Sebolao</title>
 </svelte:head>
 
 <div class="content">
-	<h1>About this app</h1>
-
-	<p>
-		This is a <a href="https://kit.svelte.dev">SvelteKit</a> app. You can make your own by typing the
-		following into your command line and following the prompts:
-	</p>
-
-	<!-- TODO lose the @next! -->
-	<pre>npm init svelte@next</pre>
-
-	<p>
-		The page you're looking at is purely static HTML, with no client-side interactivity needed.
-		Because of that, we don't need to load any JavaScript. Try viewing the page's source, or opening
-		the devtools network panel and reloading.
-	</p>
-
-	<p>
-		The <a href="/todos">TODOs</a> page illustrates SvelteKit's data loading and form handling. Try using
-		it with JavaScript disabled!
-	</p>
+  <h1>About this app</h1>
+
+  <p>
+    This is a <a href="https://kit.svelte.dev">SvelteKit</a> app. You can make your
+    own by typing the following into your command line and following the prompts:
+  </p>
+
+  <!-- TODO lose the @next! -->
+  <pre>npm init svelte@next</pre>
+
+  <p>
+    The page you're looking at is purely static HTML, with no client-side
+    interactivity needed. Because of that, we don't need to load any JavaScript.
+    Try viewing the page's source, or opening the devtools network panel and
+    reloading.
+  </p>
+
+  <p>
+    The <a href="/todos">TODOs</a> page illustrates SvelteKit's data loading and
+    form handling. Try using it with JavaScript disabled!
+  </p>
 </div>
 
-<style>
-	.content {
-		width: 100%;
-		max-width: var(--column-width);
-		margin: var(--column-margin-top) auto 0 auto;
-	}
+<style lang="scss">
 </style>
diff --git a/src/routes/blog.svelte b/src/routes/blog.svelte
index 85ba4ba..ea8285b 100644
--- a/src/routes/blog.svelte
+++ b/src/routes/blog.svelte
@@ -1,33 +1,28 @@
 <script context="module">
-	import { browser, dev } from '$app/env';
+  import { browser, dev } from "$app/env";
 
-	// we don't need any JS on this page, though we'll load
-	// it in dev so that we get hot module replacement...
-	export const hydrate = dev;
+  // we don't need any JS on this page, though we'll load
+  // it in dev so that we get hot module replacement...
+  export const hydrate = dev;
 
-	// ...but if the client-side router is already loaded
-	// (i.e. we came here from elsewhere in the app), use it
-	export const router = browser;
+  // ...but if the client-side router is already loaded
+  // (i.e. we came here from elsewhere in the app), use it
+  export const router = browser;
 
-	// since there's no dynamic data here, we can prerender
-	// it so that it gets served as a static asset in prod
-	export const prerender = true;
+  // since there's no dynamic data here, we can prerender
+  // it so that it gets served as a static asset in prod
+  export const prerender = true;
 </script>
 
 <svelte:head>
-	<title>Blog</title>
+  <title>Blog | Bobby Sebolao</title>
 </svelte:head>
 
 <div class="content">
-	<h1>BLOG</h1>
+  <h1>BLOG</h1>
 
-	<p>WIP</p>
+  <p>WIP</p>
 </div>
 
-<style>
-	.content {
-		width: 100%;
-		max-width: var(--column-width);
-		margin: var(--column-margin-top) auto 0 auto;
-	}
+<style lang="scss">
 </style>
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index c4d531b..a1f6867 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -1,59 +1,146 @@
-<script context="module">
-  export const prerender = true;
-</script>
-
 <script>
-  import Counter from "$lib/Counter.svelte";
+  import { getContext } from "svelte";
+  import Aliens from "../lib/home/Aliens.svelte";
+  import ContactForm from "../lib/home/ContactForm.svelte";
+  import ProjectSummary from "../lib/home/ProjectSummary.svelte";
+  export const prerender = true;
+  const active_display_modes = getContext("active_display_modes");
 </script>
 
 <svelte:head>
-  <title>Home</title>
+  <title>Home | Bobby Sebolao</title>
 </svelte:head>
 
-<section>
-  <h1>
-    <div class="welcome">
-      <picture>
-        <source srcset="favicon.png" type="image/png" />
-        <img src="favicon.png" alt="Welcome" />
-      </picture>
-    </div>
-
-    to your new<br />SvelteKit app
-  </h1>
-
-  <h2>
-    try editing <strong>src/routes/index.svelte</strong>
-  </h2>
-
-  <Counter />
-</section>
-
-<style>
-  section {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    flex: 1;
+<!-- I added this div for webmentions, but can't remember exactly what it was for/if it worked... -->
+<div class="h-entry" style="display:none">
+  <div class="u-author h-card">
+    <img
+      src="https://console-blog.s3.amazonaws.com/user-avatars/bobby-250x250px-user-image.jpg"
+      class="u-photo"
+      width="40"
+      alt="My user avatar"
+    />
+    <a href="https://www.bobbysebolao.com/" class="u-url p-name"
+      >Bobby Sebolao</a
+    >
+  </div>
+  <p>
+    in reply to:
+    <a
+      class="u-in-reply-to"
+      href="https://hwclondon.co.uk/meetups/20190807"
+      rel="in-reply-to">an event invite on hwclondon.co.uk</a
+    >
+  </p>
+  <p class="e-content"><span class="p-rsvp">yes</span></p>
+  <a href="https://www.bobbysebolao.com/" class="u-url" />
+</div>
+
+<h1 class="intro {active_display_modes}">
+  <span>Hi </span>-<span> I'm</span><br /><span>Bobby</span>
+</h1>
+
+<p class="intro {active_display_modes}">I tell stories with prose and code</p>
+
+<Aliens {active_display_modes} alienCount={5} alienType="one" />
+
+<hr class="home-separators" />
+
+<h2>Web Projects</h2>
+
+<ProjectSummary
+  colour="green"
+  projectType="Distributed Cloud Platform"
+  projectName="Rate My Barber"
+  projectDescription="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum
+  blanditiis quisquam odit laborum minus, veniam aliquid, laboriosam atque
+  a corrupti odio architecto."
+  projectTech="Built with Node.js, React, and SQL."
+  ctaUrl="https://github.com/bobbysebolao"
+  ctaText="GitHub"
+/>
+
+<Aliens {active_display_modes} alienCount={5} alienType="two" />
+
+<ProjectSummary
+  colour="yellow"
+  projectType="Distributed Cloud Platform"
+  projectName="Rate My Barber"
+  projectDescription="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum
+  blanditiis quisquam odit laborum minus, veniam aliquid, laboriosam atque
+  a corrupti odio architecto."
+  projectTech="Built with Node.js, React, and SQL."
+  ctaUrl="https://github.com/bobbysebolao"
+  ctaText="GitHub"
+/>
+
+<Aliens {active_display_modes} alienCount={5} alienType="three" />
+
+<ProjectSummary
+  colour="blue"
+  projectType="Distributed Cloud Platform"
+  projectName="Rate My Barber"
+  projectDescription="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum
+  blanditiis quisquam odit laborum minus, veniam aliquid, laboriosam atque
+  a corrupti odio architecto."
+  projectTech="Built with Node.js, React, and SQL."
+  ctaUrl="https://github.com/bobbysebolao"
+  ctaText="GitHub"
+/>
+
+<Aliens {active_display_modes} alienCount={3} alienType="defense" />
+
+<ProjectSummary
+  colour="pink"
+  projectType="Distributed Cloud Platform"
+  projectName="Rate My Barber"
+  projectDescription="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum
+  blanditiis quisquam odit laborum minus, veniam aliquid, laboriosam atque
+  a corrupti odio architecto."
+  projectTech="Built with Node.js, React, and SQL."
+  ctaUrl="https://github.com/bobbysebolao"
+  ctaText="GitHub"
+/>
+
+<Aliens {active_display_modes} alienCount={3} alienType="player" />
+
+<hr class="home-separators" />
+
+<h2>Wanna Work Together?</h2>
+
+<p class="contact-form-intro">
+  I'm always happy to chat over ☕ - drop me a ✉️!
+</p>
+
+<ContactForm />
+
+<hr />
+
+<style lang="scss">
+  .sprite {
+    font-family: "VT323", monospace;
+    position: relative;
+    text-transform: uppercase;
+
+    span {
+      font-size: 1.5em;
+      font-weight: bold;
+      &:last-child {
+        font-family: "Calculator";
+      }
+    }
   }
 
-  h1 {
-    width: 100%;
+  h1.intro {
+    text-transform: uppercase;
   }
 
-  .welcome {
-    position: relative;
-    width: 100%;
-    height: 0;
-    padding: 0 0 calc(100% * 495 / 2048) 0;
+  p.intro {
+    font-size: 2em;
   }
 
-  .welcome img {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
+  .home-separators {
     display: block;
+    margin-top: 5em;
   }
 </style>
diff --git a/src/routes/work.svelte b/src/routes/work.svelte
index 3bfc5de..c593ede 100644
--- a/src/routes/work.svelte
+++ b/src/routes/work.svelte
@@ -1,33 +1,28 @@
 <script context="module">
-	import { browser, dev } from '$app/env';
+  import { browser, dev } from "$app/env";
 
-	// we don't need any JS on this page, though we'll load
-	// it in dev so that we get hot module replacement...
-	export const hydrate = dev;
+  // we don't need any JS on this page, though we'll load
+  // it in dev so that we get hot module replacement...
+  export const hydrate = dev;
 
-	// ...but if the client-side router is already loaded
-	// (i.e. we came here from elsewhere in the app), use it
-	export const router = browser;
+  // ...but if the client-side router is already loaded
+  // (i.e. we came here from elsewhere in the app), use it
+  export const router = browser;
 
-	// since there's no dynamic data here, we can prerender
-	// it so that it gets served as a static asset in prod
-	export const prerender = true;
+  // since there's no dynamic data here, we can prerender
+  // it so that it gets served as a static asset in prod
+  export const prerender = true;
 </script>
 
 <svelte:head>
-	<title>Work</title>
+  <title>Work | Bobby Sebolao</title>
 </svelte:head>
 
 <div class="content">
-	<h1>WORK</h1>
+  <h1>WORK</h1>
 
-	<p>WIP</p>
+  <p>WIP</p>
 </div>
 
-<style>
-	.content {
-		width: 100%;
-		max-width: var(--column-width);
-		margin: var(--column-margin-top) auto 0 auto;
-	}
+<style lang="scss">
 </style>