Merge pull request #8 from efergus/dev

Clean up code blocks

src/app.css

@@ -11,6 +11,9 @@
     --color-contrast-primary: 255 255 255;
     --color-contrast-secondary: 255 255 255;
     --color-highlight: 129 212 250;
+    --color-subtle: 223 243 253;
+
+    --color-confirm: 66 245 69;
     @apply bg-theme;
   }
 
@@ -22,6 +25,8 @@
     --color-contrast-primary: 255 255 255;
     --color-contrast-secondary: 255 255 255;
     --color-highlight: 129 212 250;
+    --color-subtle: 12 18 72;
+
     @apply bg-theme;
   }
 
@@ -68,6 +73,6 @@
   }
 
   .center {
-    justify-content: center;
+    @apply flex justify-center items-center;
   }
 }

src/lib/components/Code.svelte

@@ -1,13 +1,33 @@
 <script lang="ts">
   import Highlight from "svelte-highlight";
   import atom from "svelte-highlight/styles/atom-one-dark";
+  import js from "svelte-highlight/languages/javascript";
+  import xml from "svelte-highlight/languages/xml";
+  import css from "svelte-highlight/languages/css";
+  import bash from "svelte-highlight/languages/bash";
+  import yaml from "svelte-highlight/languages/yaml";
+
+  const languages = {
+    css,
+    js,
+    xml,
+    html: xml,
+    bash,
+    sh: bash,
+    yaml,
+    svelte: js,
+  };
 
   export let source: string;
-  export let lang: any;
+  export let lang: keyof typeof languages;
+
+  const language = languages[lang];
+
+  console.log({ lang });
 </script>
 
 <svelte:head>
   {@html atom}
 </svelte:head>
 
-<Highlight language={lang} code={source} />
+<Highlight {language} code={source} />

src/lib/icons/CheckIcon.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  export let size = 24;
+  export let width = size;
+  export let height = size;
+  export let stroke = 2;
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  {width}
+  {height}
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width={stroke}
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  class="feather feather-check"
+  ><polyline points="20 6 9 17 4 12"></polyline></svg
+>

src/lib/icons/CopyIcon.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  export let width = 24;
+  export let height = width;
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  {width}
+  {height}
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  class="feather feather-copy"
+  ><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path
+    d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"
+  ></path></svg
+>

src/lib/icons/MailIcon.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  export let width = 24;
+  export let height = width;
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  {width}
+  {height}
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  class="feather feather-mail"
+  ><path
+    d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"
+  ></path><polyline points="22,6 12,13 2,6"></polyline></svg
+>

src/lib/markdown/experience.md

@@ -68,7 +68,7 @@
 
 *August 2019 - May 2023*
 
-Bachelor of Science in Computer Science, *Summa Cum Laude* (GPA: 3.98)
+- Bachelor of Science in Computer Science, *Summa Cum Laude* (GPA: 3.98)
 
 ## Certifications
 

src/lib/markdown/markdown.css

@@ -1,3 +1,7 @@
+.markdown {
+  @apply flex flex-col gap-2;
+}
+
 .markdown h1 {
   @apply pb-1 border-b-4 border-highlight mb-2;
 }
@@ -21,3 +25,7 @@
 .markdown p > code {
   @apply bg-secondary/30 rounded px-1 py-0.5;
 }
+
+.markdown pre > code {
+  @apply rounded;
+}

src/lib/markdown/svelte-pages.md

@@ -6,7 +6,7 @@ Initialize a directory with `SvelteKit`
 npm create svelte@latest
 ```
 
-Also ensure `.svelte-kit` is added to `.gitignore`
+Also ensure `.svelte-kit` is added to your `.gitignore` if using git
 
 ## Static Adapter
 
@@ -21,7 +21,7 @@ npm i -D @sveltejs/adapter-static
 Add the static adapter to `svelte.config.js` and set the options for the adapter
 
 ```js
-import adapter from "@sveltejs/adapter-static";
+import adapter from "@sveltejs/adapter-static"; // <- this is the important bit
 import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
 
 /** @type {import('@sveltejs/kit').Config} */
@@ -47,6 +47,7 @@ export default config;
 This is necessary to get the static site generation to work properly:
 
 ```js
+// +layout.js
 export const prerender = true;
 ```
 
@@ -71,20 +72,22 @@ export default {
   kit: {
     adapter: adapter(),
   },
-  preprocess: vitePreprocess(),
+  preprocess: vitePreprocess(), // <- this guy
 };
 ```
 
 ## Add app.css:
 
 ```css
+/* app.css */
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 ```
 
 ## Add +layout.svelte:
 
+In `+layout.svelte`:
 ```svelte
 <script>
   import "../app.css";
@@ -95,13 +98,15 @@ export default {
 
 ## Add to style tags:
 
+Add this to any style tags if you want to use tailwind constructs like `@apply`:
 ```html
 <style lang="postcss">
 ```
 
 # Add .github/workflows/deploy.yml
 
-```
+Create `.github/workflows/deploy.yml`:
+```yaml
 name: Deploy to GitHub Pages
 
 on:

src/routes/+page.svelte

@@ -1,6 +1,21 @@
 <script lang="ts">
   import linkedin from "$lib/assets/In-Blue-48.png";
   import personality from "$lib/assets/Personality.jpg";
+  import CheckIcon from "$lib/icons/CheckIcon.svelte";
+  import CopyIcon from "$lib/icons/CopyIcon.svelte";
+  import MailIcon from "$lib/icons/MailIcon.svelte";
+  import clsx from "clsx";
+
+  const email_domain = "gmail.com";
+  const email_user = "ethanmferguson";
+  let email = email_domain + email_user;
+  $: email_ready = email.includes("@");
+  $: copied = false;
+
+  const getEmail = () => {
+    email = [email_user, email_domain].join("@");
+    return email;
+  };
 </script>
 
 <div class="flex flex-col gap-2 h-full max-w-4xl text-lg">
@@ -14,11 +29,12 @@
     I'm a Software Engineer at Jahnel Group. I studied CS and Cybersecurity at
     Binghamton University. I have published and presented at ACM (Association
     for Computing Machinery) and IEEE (Institute of Electrical and Electronics
-    Engineers) conferences. I have a love for exploration and discovery that
-    thrives in both the information-rich world of technology and the great
-    outdoors.
+    Engineers) conferences. I've also worked for CodeSecure and Sonnet Software,
+    and I love working on interesting projects. If you've got something cool for
+    me to do, let's connect! While you're here, check out some of my
+    <a href="/projects">projects</a>!
   </p>
-  <p>
+  <!-- <p>
     I currently develop full-stack applications with Jahnel Group, tackling the
     hardest problems they have to throw at me. I worked as an intern with
     Grammatech developing software for binary analysis and identification. I
@@ -40,16 +56,65 @@
     project management. Exploration has also driven creative projects, such as
     art and photography. If you've got something cool for me to do, let's
     connect.
-  </p>
-  <a
-    href="https://www.linkedin.com/in/ethan-ferguson-112011193/"
-    target="_blank"
-    class="self-end"
-  >
-    <img
-      src={linkedin}
-      alt="LinkedIn Logo"
-      class="h-12 w-12 border-transparent hover:border-highlight border rounded"
-    />
-  </a>
+  </p> -->
+  <div class="flex gap-2 justify-end items-center flex-wrap">
+    <button
+      class={clsx(
+        "flex items-center gap-4 rounded-md p-2 bg-subtle",
+        email_ready && "hover:bg-subtle/75 border-primary"
+      )}
+      on:click={() => {
+        if (email_ready) {
+          navigator.clipboard.writeText(email);
+          copied = true;
+          setTimeout(() => (copied = false), 800);
+        } else {
+          getEmail();
+        }
+      }}
+    >
+      {#if email_ready}
+        <div class="center relative text-sm">
+          <p
+            class={clsx(
+              "transition-opacity md:text-base ml-1",
+              email_ready ? "opacity-100" : "opacity-0",
+              copied && "animate-peeked"
+            )}
+          >
+            {email}
+          </p>
+          <div class="absolute inset-0 center">
+            <p class={clsx(copied ? "animate-peek" : "opacity-0")}>Copied!</p>
+          </div>
+        </div>
+        <div class="relative">
+          <div class={clsx(copied && "animate-peeked")}>
+            <CopyIcon width={48} />
+          </div>
+          <div
+            class={clsx(
+              "absolute inset-0 text-confirm rounded-lg flex justify-center items-center",
+              copied ? "animate-peek" : "opacity-0"
+            )}
+          >
+            <CheckIcon size={36} stroke={3} />
+          </div>
+        </div>
+      {:else}
+        <MailIcon width={48} />
+      {/if}
+    </button>
+    <a
+      href="https://www.linkedin.com/in/ethan-ferguson-112011193/"
+      target="_blank"
+      class="self-end p-2 bg-subtle rounded-lg hover:bg-subtle/75"
+    >
+      <img
+        src={linkedin}
+        alt="LinkedIn Logo"
+        class="h-12 w-12 border-transparent hover:border-highlight border rounded"
+      />
+    </a>
+  </div>
 </div>

src/routes/experience/+page.svelte

@@ -7,6 +7,12 @@
   <title>Experience</title>
 </svelte:head>
 
-<div class="text-lg max-w-4xl markdown">
+<div class="text-lg max-w-4xl markdown experience">
   <SvelteMarkdown {source} />
 </div>
+
+<style lang="postcss">
+  .markdown.experience > :global(h2) {
+    @apply pb-0.5 border-b-2 border-b-highlight;
+  }
+</style>

src/routes/projects/no-js/dark-mode/+page.svelte

@@ -1,8 +1,5 @@
 <script lang="ts">
   import Card from "$lib/components/Card.svelte";
-  import js from "svelte-highlight/languages/javascript";
-  import xml from "svelte-highlight/languages/xml";
-  import css from "svelte-highlight/languages/css";
 
   import mediaQuery from "./media-query.css?raw";
   import exampleJs from "./example-js.txt?raw";
@@ -29,12 +26,12 @@
       you want the theme to be based on the user's system preferences. There's
       built-in CSS just for that purpose:
     </p>
-    <Code source={mediaQuery} lang={css} />
+    <Code source={mediaQuery} lang={"css"} />
     <p>
       But what if we want to let the user toggle dark mode with a button? Well,
       that's still easy if you're willing to use JavaScript:
     </p>
-    <Code source={exampleJs} lang={js} />
+    <Code source={exampleJs} lang={"js"} />
     <p>
       With a little tweaking, we could even make that support the user's system
       preference. But what if we did something a little... weirder. A little
@@ -111,11 +108,11 @@
         <p>HTML:</p>
         <DarkModeButton />
       </div>
-      <Code source={exampleHtml} lang={xml} />
+      <Code source={exampleHtml} lang={"xml"} />
     </div>
     <div>
       <p>CSS:</p>
-      <Code source={exampleCSS} lang={css} />
+      <Code source={exampleCSS} lang={"css"} />
     </div>
     <p>
       We create the dark and light classes, apply them to the root element based

src/routes/projects/no-js/dark-mode/example.html

@@ -1,8 +1,8 @@
 <header>
   <label class="dark-mode-toggle">
     <input type="checkbox" class="dark-mode-toggle" />
-    Your svg here
+    Your icon here
   </label>
-  Your header here
+  The container of the dark mode button here
 </header>
 <div>The rest of your site here</div>