Merge pull request #2 from ethanfox/Search-Overlay

Added about Overlay
ethanfox · Jul 25, 2024 · 1b2c3e3 · 1b2c3e3
2 parents 1f14c0b + bd2a5ec
commit 1b2c3e3
Show file tree

Hide file tree

Showing 18 changed files with 250 additions and 6 deletions.
diff --git a/index.html b/index.html
@@ -5,6 +5,33 @@
     <link rel="icon" href="/favicon.ico" />
     <link rel="stylesheet" href="https://use.typekit.net/kuf3cvh.css" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="apple-touch-icon"
+      sizes="180x180"
+      href="/public/apple-touch-icon.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="/public/favicon-32x32.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="/public/favicon-16x16.png"
+    />
+    <link rel="manifest" href="/public/site.webmanifest" />
+    <link
+      rel="mask-icon"
+      href="/public/safari-pinned-tab.svg"
+      color="#5bbad5"
+    />
+    <link rel="shortcut icon" href="/public/favicon.ico" />
+    <meta name="msapplication-TileColor" content="#da532c" />
+    <meta name="msapplication-config" content="/public/browserconfig.xml" />
+    <meta name="theme-color" content="#ffffff" />
     <title>Vite App</title>
   </head>
   <body>

diff --git a/public/android-chrome-192x192.png b/public/android-chrome-192x192.png
diff --git a/public/android-chrome-256x256.png b/public/android-chrome-256x256.png
diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png
diff --git a/public/browserconfig.xml b/public/browserconfig.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/public/mstile-150x150.png"/>
+            <TileColor>#da532c</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>
diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png
diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/mstile-150x150.png b/public/mstile-150x150.png
diff --git a/public/safari-pinned-tab.svg b/public/safari-pinned-tab.svg
diff --git a/public/site.webmanifest b/public/site.webmanifest
@@ -0,0 +1,19 @@
+{
+    "name": "",
+    "short_name": "",
+    "icons": [
+        {
+            "src": "/public/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/public/android-chrome-256x256.png",
+            "sizes": "256x256",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}
diff --git a/src/assets/close-menu.svg b/src/assets/close-menu.svg
diff --git a/src/assets/github.svg b/src/assets/github.svg
diff --git a/src/assets/linkedin.svg b/src/assets/linkedin.svg
diff --git a/src/assets/user.svg b/src/assets/user.svg
diff --git a/src/components/AboutOverlay.vue b/src/components/AboutOverlay.vue
@@ -0,0 +1,134 @@
+<template>
+  <transition name="about-fade">
+    <div v-if="showAboutOverlay" class="search-overlay">
+      <div
+        class="bg-neutral-950/50 backdrop fixed inset-0 flex flex-col gap-8 items-center justify-center z-[10] sm:px-8 px-8 md:px-16 lg:px-32 xl:px-64 2xl:px-96"
+      >
+        <!-- SEARCH -->
+        <div
+          class="flex flex-col gap-20 p-8 bg-white rounded-sm glass-shadow border border-neutral-100 w-full"
+        >
+          <div class="flex flex-col w-full px-2 md:px-8 gap-8">
+            <div class="flex w-full justify-between">
+              <h1 class="text-6xl tracking-tight text-neutral-950">About</h1>
+              <button
+                alt="Close"
+                @click="closeButtonClicked"
+                class="bg-[#b50938] text-white hover:bg-[#810032] size-14 my-auto rounded-full transition-all p-4"
+              >
+                <img
+                  src="../assets/close-menu.svg"
+                  alt="Search"
+                  class="h-full mx-auto my-auto object-contain rounded-l-sm"
+                />
+              </button>
+            </div>
+
+            <p class="text-lg text-neutral-950">
+              This page was created by
+              <span class="font-semibold"> Ethan Fox </span> . This site was
+              developed using Vue.js and styled with Tailwind CSS. Leveraging
+              the Art Institute of Chicago's public API, this online gallery
+              features the entire collection of works and displays the museum's
+              current exhibitions. This project is hosted on GitHub Pages.
+            </p>
+          </div>
+          <div class="flex flex-col gap-4 w-full px-2 md:px-8">
+            <p class="text-lg font-semibold text-neutral-950">
+              To learn more about me:
+            </p>
+            <div class="flex flex-col lg:flex-row gap-4">
+              <div class="flex gap-1">
+                <img
+                  src="../assets/user.svg"
+                  alt="Search"
+                  class="h-8 mx-auto my-auto object-contain rounded-l-sm"
+                />
+                <a
+                  href="https://www.ethanjamesfox.com"
+                  target="_blank"
+                  class="text-lg text-[#b50938] my-auto hover:underline"
+                  >Visit my website</a
+                >
+              </div>
+              <div class="flex gap-1">
+                <img
+                  src="../assets/github.svg"
+                  alt="Search"
+                  class="h-8 mx-auto my-auto object-contain rounded-l-sm"
+                />
+                <a
+                  href="https://github.com/ethanfox"
+                  target="_blank"
+                  class="text-lg text-[#b50938] my-auto hover:underline"
+                  >View Github Profile</a
+                >
+              </div>
+              <div class="flex gap-1">
+                <img
+                  src="../assets/linkedin.svg"
+                  alt="Search"
+                  class="h-8 mx-auto my-auto object-contain rounded-l-sm"
+                />
+                <a
+                  href="https://www.linkedin.com/in/ethanjamesfox/"
+                  target="_blank"
+                  class="text-lg text-[#b50938] my-auto hover:underline"
+                  >Connect on LinkedIn</a
+                >
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+import { ref, watchEffect } from "vue";
+
+export default {
+  components: {},
+  methods: {
+    closeButtonClicked() {
+      this.$emit("close-button-clicked");
+    },
+  },
+  props: {
+    showAboutOverlay: Boolean,
+  },
+  setup(props) {
+    return {};
+  },
+};
+</script>
+
+<style scoped>
+.backdrop {
+  transition:
+    backdrop-filter 0.5s ease,
+    opacity 0.5s ease;
+  backdrop-filter: blur(8px);
+}
+.search-overlay {
+  position: fixed;
+}
+
+.about-fade-enter-active,
+.search-fade-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.about-fade-enter-from .backdrop,
+.search-fade-leave-to .backdrop {
+  opacity: 0;
+  backdrop-filter: blur(0px);
+}
+
+.about-fade-enter-to .backdrop,
+.about-fade-leave-from .backdrop {
+  opacity: 1;
+  backdrop-filter: blur(8px);
+}
+</style>
diff --git a/src/components/Navigation.vue b/src/components/Navigation.vue
@@ -13,23 +13,26 @@
       </a>
       <div class="w-full justify-between flex border border-neutral-200">
         <a
+          target="_blank"
           class="flex-p-8 my-auto mx-auto font-semibold text-sm lg:text-lg hover:bg-neutral-200 px-6 lg:px-16 object-center w-full h-full text-center flex content-center transition-all"
-          href="/visit"
+          href="https://www.artic.edu/visit"
           ><span class="mx-auto my-auto">Visit</span></a
         >
-        <a
+        <button
+          @click="aboutButtonClicked"
           class="flex-p-8 my-auto mx-auto font-semibold text-sm lg:text-lg hover:bg-neutral-200 px-6 lg:px-16 object-center w-full h-full text-center flex content-center transition-all"
           href="/about"
-          ><span class="mx-auto my-auto">About</span></a
         >
+          <span class="mx-auto my-auto">About</span>
+        </button>
       </div>
     </div>
     <div class="flex">
       <div
         class="w-full bg-white border-neutral-200 hover:bg-neutral-200 transition-all border justify-between mr-8 rounded-sm xl:mr-32 flex shadow-lg"
       >
         <button
-          @click="buttonClicked"
+          @click="searchButtonClicked"
           class="my-auto mx-auto font-semibold text-sm lg:text-lg p-6 object-center xl:size-24 size-24 text-center flex content-center"
           href="/about"
         >
@@ -93,9 +96,12 @@
 <script>
 export default {
   methods: {
-    buttonClicked() {
+    searchButtonClicked() {
       this.$emit("navigation-button-clicked");
     },
+    aboutButtonClicked() {
+      this.$emit("about-button-clicked");
+    },
   },
 };
 </script>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
@@ -28,27 +28,34 @@
       <div v-else key="loaded" class="relative">
         <Navigation
           @navigation-button-clicked="showSearchOverlay = !showSearchOverlay"
+          @about-button-clicked="showAboutOverlay = !showAboutOverlay"
         />
 
         <Gallery :artworks="artworks" @load-more="loadMoreArtworks" />
         <SearchOverlay :showSearchOverlay="showSearchOverlay" />
+        <AboutOverlay
+          @close-button-clicked="showAboutOverlay = !showAboutOverlay"
+          :showAboutOverlay="showAboutOverlay"
+        />
       </div>
     </transition>
   </div>
 </template>
 
 <script>
+import AboutOverlay from "../components/AboutOverlay.vue";
 import Navigation from "../components/Navigation.vue";
 import SearchOverlay from "../components/SearchOverlay.vue";
 import Gallery from "../components/Gallery.vue";
 import axios from "axios";
 import { ref, onMounted, computed } from "vue";
 
 export default {
-  components: { Navigation, Gallery, SearchOverlay },
+  components: { Navigation, Gallery, SearchOverlay, AboutOverlay },
   data() {
     return {
       showSearchOverlay: false,
+      showAboutOverlay: false,
     };
   },
   setup() {