WIP

.gitignore

@@ -34,3 +34,7 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+
+# cypress
+cypress/screenshots

cypress/e2e/site.cy.js

@@ -24,30 +24,31 @@ context("site", () => {
   });
 
   it("should have a working link to my resume", () => {
-    cy.get("a")
-      .contains("Resume")
-      .should("have.attr", "href", "/Resume_ClintPlummer_ENMR.pdf")
+    cy.get("a[href='/resume.clintp.docx']")
+      .should("exist")
       .then(($anchor) => {
         cy.request($anchor.attr("href")).its("status").should("eq", 200);
       });
   });
 
-  it("should have a working link to my ipynb", () => {
-    cy.get("a")
-      .contains("ipynb")
-      .should(
-        "have.attr",
-        "href",
-        "https://github.com/yuhonas/clintp.xyz/blob/main/docs/public/Resume_ClintPlummer_ENMR.ipynb"
-      )
+  // it("should have a working link to my ipynb", () => {
+  //   cy.get("a")
+  //     .contains("ipynb")
+  //     .should(
+  //       "have.attr",
+  //       "href",
+  //       "https://github.com/yuhonas/clintp.xyz/blob/main/docs/public/Resume_ClintPlummer_ENMR.ipynb"
+  //     )
+  //     .then(($anchor) => {
+  //       cy.request($anchor.attr("href")).its("status").should("eq", 200);
+  //     });
+  // });
+
+  it("should have a working link to my linkedin", () => {
+    cy.get("a[href='https://www.linkedin.com/in/clint-plummer/']")
+      .should("exist")
       .then(($anchor) => {
         cy.request($anchor.attr("href")).its("status").should("eq", 200);
       });
   });
-
-  it("should have a link to my linkedin", () => {
-    cy.get("a[href='https://www.linkedin.com/in/clint-plummer/']").should(
-      "exist"
-    );
-  });
 });

pages/index.tsx

@@ -94,8 +94,12 @@ export default function Home() {
             alt="Picture of me"
           />
           <p className="text-lg dark:text-neutral-200">{resume.basics.summary}</p>
+          <h3 className="text-3xl font-bold mt-12 mb-8">Looking for a Resume?</h3>
+          <ul className="mb-4 flex gap-3">
+            <Link href="/resume.clintp.docx" className="hover:underline"><Image src="images/icon-file-docx.svg" width={30} height={30} className="" alt="docx" /></Link>
+          </ul>
           {/* <AboutSection /> */}
-          <h3 className="text-3xl font-bold mt-12 mb-8">Would Like to get in Contact?</h3>
+          <h3 className="text-3xl font-bold mt-12 mb-8">Want to get in Contact?</h3>
           <p>I can be reached at <a href={ `mailto:` + resume.basics.email } className="hover:underline" >{ resume.basics.email }</a></p>
           <ProjectsSection />
 

public/theme/001.css

@@ -0,0 +1,31 @@
+/* CSS variables
+   Generated by 'wal' */
+:root, body[data-theme='001'] {
+  --wallpaper2000w: url('./001/background-2000w.avif');
+  --wallpaper4000w: url('./001/background-4000w.avif');
+  --ansiart: url('./001/ansi.png');
+
+  /* Special */
+  --background: #02182F;
+  --foreground: #f2e4cb;
+  --cursor: #f2e4cb;
+
+  /* Colors */
+  --color0: #02182F;
+  --color1: #0C6D96;
+  --color2: #5E7098;
+  --color3: #B17596;
+  --color4: #138DB1;
+  --color5: #40A7C4;
+  --color6: #E7A19D;
+  --color7: #f2e4cb;
+  --color8: #a99f8e;
+  --color9: #0C6D96;
+  --color10: #5E7098;
+  --color11: #B17596;
+  --color12: #138DB1;
+  --color13: #40A7C4;
+  --color14: #E7A19D;
+  --color15: #f2e4cb;
+}
+

public/theme/002.css

@@ -0,0 +1,30 @@
+/* CSS variables
+   Generated by 'wal' */
+body[data-theme='002'] {
+    --wallpaper2000w: url('./002/background-2000w.avif');
+    --wallpaper4000w: url('./002/background-4000w.avif');
+    --ansiart: url('./002/ansi.png');
+
+    /* Special */
+    --background: #130f10;
+    --foreground: #b1b7b9;
+    --cursor: #b1b7b9;
+
+    /* Colors */
+    --color0: #130f10;
+    --color1: #314857;
+    --color2: #5A585C;
+    --color3: #9B4F10;
+    --color4: #AE692F;
+    --color5: #F69C0A;
+    --color6: #CE9966;
+    --color7: #b1b7b9;
+    --color8: #7b8081;
+    --color9: #314857;
+    --color10: #5A585C;
+    --color11: #9B4F10;
+    --color12: #AE692F;
+    --color13: #F69C0A;
+    --color14: #CE9966;
+    --color15: #b1b7b9;
+}

public/theme/003.css

@@ -0,0 +1,30 @@
+/* CSS variables
+   Generated by 'wal' */
+body[data-theme='003'] {
+    --wallpaper2000w: url('./003/background-2000w.avif');
+    --wallpaper4000w: url('./003/background-4000w.avif');
+    --ansiart: url('./003/ansi.png');
+
+    /* Special */
+    --background: #0d160a;
+    --foreground: #a2dee3;
+    --cursor: #a2dee3;
+
+    /* Colors */
+    --color0: #0d160a;
+    --color1: #29886B;
+    --color2: #71B04E;
+    --color3: #5D9E6B;
+    --color4: #99B16C;
+    --color5: #21979A;
+    --color6: #4DBAB3;
+    --color7: #a2dee3;
+    --color8: #719b9e;
+    --color9: #29886B;
+    --color10: #71B04E;
+    --color11: #5D9E6B;
+    --color12: #99B16C;
+    --color13: #21979A;
+    --color14: #4DBAB3;
+    --color15: #a2dee3;
+}

public/theme/GithubCorner.vue

@@ -0,0 +1,18 @@
+<script>
+export default {
+  props: ['repo'],
+  mounted() {
+    this.repoUrl = new URL(this.repo, 'https://www.github.com/')
+  },
+  data() {
+    return {
+      repoUrl: ''
+    }
+  }
+}
+</script>
+<template>
+  <a :href="repoUrl">
+    <img alt="github" src="./images/github-logo.svg" class="z-10 absolute top-2 right-3 w-5 md:w-8 hover:animate-spin">
+  </a>
+</template>

public/theme/Layout.vue

@@ -0,0 +1,73 @@
+<script setup>
+import { useData } from 'vitepress'
+const { page } = useData();
+</script>
+<script>
+import GithubCorner from './GithubCorner.vue'
+
+// load GithubCorner component
+export default {
+  components: {
+    GithubCorner
+  },
+  methods: {
+    swapTheme(theme, event) {
+      event.preventDefault();
+      document.querySelector('body').dataset.theme = theme;
+      this.currentTheme = theme;
+    },
+    nextTheme(event) {
+      // move to the next theme in the themes array based on our currentTheme
+      const currentIndex = this.themes.indexOf(this.currentTheme);
+      const nextIndex = (currentIndex + 1) % this.themes.length;
+      const nextTheme = this.themes[nextIndex];
+
+      this.swapTheme(nextTheme, event);
+    }
+  },
+  data() {
+    return {
+      currentTheme: '001',
+      themes: ['001', '002', '003']
+    }
+  }
+}
+
+</script>
+
+<template>
+  <GithubCorner repo="yuhonas/clintp.xyz" />
+  <main>
+    <h1 class="font-extrabold text-white my-2 md:my-1 ms-4 md:text-lg">
+      <a href="" @click="nextTheme">$ ./clintp.xyz</a>
+    </h1>
+
+    <div class="max-w-2xl mx-auto">
+      <nav class="bg-theme rounded-t-md p-3 mt-2 hidden md:block">
+        <div class="flex gap-1.5">
+          <a href="" @click="swapTheme('001', $event)"><div class="w-2.5 h-2.5 bg-red-400 rounded-full"></div></a>
+          <a href="" @click="swapTheme('002', $event)"><div class="w-2.5 h-2.5 bg-yellow-400 rounded-full"></div></a>
+          <a href="" @click="swapTheme('003', $event)"><div class="w-2.5 h-2.5 bg-green-400 rounded-full"></div></a>
+        </div>
+      </nav>
+      <section class="bg-theme terminal text-white rounded-b-md px-3 pb-4 font-mono md:max-w-2xl mb-4 h-[80vh]">
+          <article class="md:overflow-y-scroll markdown pb-4 h-full pe-1">
+            <div v-if="page.isNotFound">
+              <h2 class="text-xl mb-4">404 - Page Not Found</h2>
+              <p class="mb-4">
+                  But fear not, we've dispatched our squad of pixelated Ghostbusters to hunt it down, who you gonna call? 🕹️👻
+                  <a href="https://www.youtube.com/watch?v=Fe93CLbHjxQ">
+                    <img src="./images/404.svg" class="mx-auto mt-8 w-1/2 animate-pulse hover:animate-spin" alt="Ghostbusters Logo" />
+                  </a>
+              </p>
+            </div>
+            <div class="pb-4 md:pb-0" v-else>
+              <img  alt="ANSI Art Graphics" class="w-full mb-4 ansi-art" />
+
+              <Content />
+            </div>
+          </article>
+      </section>
+    </div>
+  </main>
+</template>