Migreate to use cdn.enpaul.net CDN URL

Update copyright
Remove twitter integration
Remove twitter social link

content/css/style.css

@@ -2,7 +2,7 @@ html {
   height: 100%;
   background-color: black;
   color: white;
-  font-family: Verdana, Helvetica, serif;
+  font-family: Verdana, Helvetica, sans-serif;
 }
 
 a {
@@ -13,11 +13,11 @@ a {
 
 a:hover {
   text-decoration: none;
-  text-shadow: 3px 3px 10px #fff, -3px -3px 10px #fff;
+  text-shadow: 5px 5px 10px #fff, -5px -5px 10px #fff;
 }
 
 #background-image {
-  background-image: url("https://cdn.enp.one/img/backgrounds/cl-photo-allis.jpg");
+  background-image: url("https://cdn.enpaul.net/img/backgrounds/cl-photo-allis.jpg");
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
@@ -48,15 +48,15 @@ a:hover {
 
   width: 40em;
   max-width: 90%;
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(0, 0, 0, 0.4);
   border-style: solid;
   border-width: 2px;
-  border-color: rgba(255, 255, 255, 0);
+  border-color: rgba(0, 0, 0, 0);
   border-radius: 128px;
-  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.6), 0 6px 20px 0 rgba(0, 0, 0, 0.6);
 
   position: absolute;
-  top: 20%;
+  top: 15%;
   left: 50%;
   transform: translate(-50%, 0);
   z-index: 10;
@@ -69,14 +69,15 @@ a:hover {
   width: 50%;
   display: block;
   border-style: solid;
-  border-color: rgba(255, 255, 255, 0);
+  border-color: rgba(0, 0, 0, 0.2);
   border-radius: 50%;
   border-width: 5px;
-  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.4);
 }
 
 h1 {
   font-variant: small-caps;
+  font-size: 2.5em;
 }
 
 #content p {
@@ -87,13 +88,12 @@ h1 {
 ul.buttons {
   list-style: none;
   padding-left: 0;
-  margin-top: 3em;
-  margin-bottom: 4em;
-  font-size: 1.1em;
+  margin-top: 1em;
+  margin-bottom: 1em;
+  font-size: 1.75em;
 }
 
 ul.buttons li {
-  display: inline;
   line-height: 1;
   padding: 0.5em;
   margin-left: 0.5em;
@@ -102,6 +102,17 @@ ul.buttons li {
   text-transform: uppercase;
 }
 
+.button.nav {
+  padding-top: 0.75em;
+  padding-bottom: 0.55em;
+  padding-left: 1.5em;
+  padding-right: 1.5em;
+
+  border-radius: 30px;
+
+  transition: all 0.25s ease-in-out;
+}
+
 .button:hover {
   text-shadow:
     -3px -3px 5px #fff,
@@ -111,7 +122,27 @@ ul.buttons li {
     0px 0px 7px #ff0000;
 }
 
-.gallery:hover { color: #5588e0; }
+.button.nav:hover {
+  text-shadow:
+    0px 0px 7px #000,
+    -5px -5px 10px #fff,
+    -5px 5px 10px #fff,
+    5px -5px 10px #fff,
+    5px 5px 10px #fff;
+
+  -webkit-animation-name: pulse;
+  -webkit-animation-duration: 6s;
+  -webkit-animation-timing-function: linear;
+  -webkit-animation-iteration-count: infinite;
+  -webkit-animation-fill-mode: none;
+  animation-name: pulse;
+  animation-duration: 6s;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+  animation-fill-mode: none;
+}
+
+.explore:hover { color: #5588e0; }
 
 .youtube:hover { color: #ff0000; }
 
@@ -130,15 +161,20 @@ ul.buttons li {
   z-index: 5;
 }
 
-.footer {
-  font-size: 0.9em;
+footer { font-size: 0.9em; }
+
+footer div { margin-bottom: 0.5em; }
+
+footer a.button i {
+  padding: 0.5em;
+  font-size: 1.25em;
 }
 
 .fadeout {
   -webkit-animation: fadeout 0.25s linear 1;
   -webkit-animation-fill-mode: forwards;
   animation: fadeout 0.25s linear 1;
-  animation-fill-mode: both;
+  animation-fill-mode: forwards;
 }
 
 #preloader {
@@ -191,6 +227,59 @@ ul.buttons li {
   100% {opacity: 0;}
 }
 
+@keyframes pulse {
+  0% {
+    box-shadow:
+      0px 0px 15px 3px rgba(0,0,0,0),
+      0px 0px 15px 3px rgba(0,0,0,0);
+  }
+  3% {
+    box-shadow:
+      0px 0px 15px 3px #fff,
+      0px 0px 15px 3px #88a9fc;
+  }
+  10% {
+    box-shadow:
+      -10px -10px 15px 3px #fff,
+      10px 10px 15px 3px #88a9fc;
+  }
+  30% {
+    box-shadow:
+      -10px 10px 15px 3px #b5f7fc,
+      10px -10px 15px 3px #fcaa99;
+  }
+  45% {
+    box-shadow:
+      10px 10px 15px 3px #ecf9a7,
+      -10px -10px 15px 3px #fcaa99;
+  }
+  60% {
+    box-shadow:
+      10px -10px 15px 3px #ecf9a7,
+      -10px 10px 15px 3px #abfcad;
+  }
+  75% {
+    box-shadow:
+      -10px -10px 15px 3px #b5f7fc,
+      10px 10px 15px 3px #abfcad;
+  }
+  90% {
+    box-shadow:
+      -10px 10px 15px 3px #fff,
+      10px -10px 15px 3px #88a9fc;
+  }
+  97% {
+    box-shadow:
+      0px 0px 15px 3px #b5f7fc,
+      0px 0px 15px 3px #88a9fc;
+  }
+  100% {
+    box-shadow:
+      0px 0px 15px 3px rgba(0,0,0,0),
+      0px 0px 15px 3px rgba(0,0,0,0);
+  }
+}
+
 @-webkit-keyframes spinner {
   0% { transform: translate(-50%,-50%) rotate(0deg); }
   100% { transform: translate(-50%,-50%) rotate(360deg); }
@@ -200,3 +289,26 @@ ul.buttons li {
   0% { transform: translate(-50%,-50%) rotate(0deg); }
   100% { transform: translate(-50%,-50%) rotate(360deg); }
 }
+
+@media only screen and (max-width: 600px) {
+  #content {
+    padding: 0;
+    padding-bottom: 1em;
+    border-radius: 32px;
+    top: 6em;
+  }
+
+  #content p {
+    margin: 1em;
+  }
+
+  ul.buttons {
+    margin-top: 1.5em;
+    margin-bottom: 1.5em;
+  }
+
+  ul.buttons li {
+    display: block;
+    margin-top: 1em;
+  }
+}

content/index.html

@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
+    <meta content="utf-8" http-equiv="encoding">
+
+    <!-- Web crawler and search indexing meta -->
+    <meta charset="utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <meta name="author" content="admin@allaroundhere.org"/>
+    <meta name="description" content="Some of the best places are all around here"/>
+    <meta name="robots" content="index follow"/>
+    <meta
+      name="keywords"
+      content="travel photography explore exploration urbex urban nature all around here local museum history historical society"
+    />
+
+    <!-- Opengraph integration meta -->
+    <meta property="og:title" content="All Around Here"/>
+    <meta property="og:url" content="https://allaroundhere.org/explore/"/>
+    <meta property='og:site_name' content="All Around Here"/>
+    <meta property="og:type" content="website"/>
+    <meta property='og:locale' content="en_US"/>
+    <meta property="og:image" content="https://cdn.enpaul.net/img/backgrounds/cl-photo-boston.jpg"/>
+    <meta property='og:description' content="Some of the best places are all around here"/>
+
+    <title>All Around Here</title>
+    <link rel="shortcut icon" href="https://cdn.enpaul.net/img/logos/aah-b-sm.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="https://cdn.enpaul.net/img/logos/aah-b-sm.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="https://cdn.enpaul.net/img/logos/aah-b-sm.png" >
+    <link rel="icon" type="image/png" sizes="16x16" href="https://cdn.enpaul.net/img/logos/aah-b-sm.png">
+
+    <link rel="stylesheet" href="css/style.css"/>
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
+      integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
+      crossorigin="anonymous"
+    />
+
+    <script type="text/javascript" src="js/custom.js"></script>
+
+    <noscript><style>.nojs { display: none; }</style></noscript>
+  </head>
+
+  <body>
+    <div id="background-image"></div>
+
+    <div id="preloader" class="nojs"><div class="spinner"><div></div></div></div>
+
+    <div id="content">
+      <img
+        id="logo"
+        alt="Road to the great wide nowhere"
+        src="https://cdn.enpaul.net/img/logos/aah-md.jpg"
+      />
+
+      <h1>All Around Here</h1>
+
+      <p>
+        This is a project of mine where I turn my random travels, undirected wanderings, and
+        unexpected discoveries into something other people can enjoy along with me. There are a
+        lot of cool things in the world and I like to find them, wherever I happen to be. If you're
+        interested in seeing some of these arbitrary oddities then check out the links below.
+      </p>
+
+      <ul class="buttons">
+        <li>
+          <a class="button nav" title="Explore All Around Here" href="explore/">
+            <i class="fas fa-binoculars"></i>&nbsp;Explore
+          </a>
+        </li>
+      </ul>
+
+      <footer>
+        <div>
+          <!-- <a
+            class="button youtube"
+            title="Subscribe to All Around Here on YouTube"
+            href="https://www.instagram.com/allaroundhere/"
+          >
+            <i class="fab fa-youtube"></i>
+          </a> -->
+          <a
+            class="button instagram"
+            title="Follow All Around Here on instagram @allaroundhere"
+            href="https://www.instagram.com/allaroundhere/"
+          >
+            <i class="fab fa-instagram"></i>
+          </a>
+        </div>
+        <div>
+          <a title="Personal website" href="https://enpaul.net/">&copy;2024 enpaul</a>
+        </div>
+      </footer>
+    </div>
+  </body>
+
+</html>

content/js/custom.js

@@ -2,67 +2,67 @@
 
 const BACKGROUND_IMAGES = [
   {
-    url: "https://cdn.enp.one/img/backgrounds/cl-photo-allis.jpg",
+    url: "https://cdn.enpaul.net/img/backgrounds/cl-photo-allis.jpg",
     description: "Allis Engine #4, Metropolitan Waterworks Museum",
     source: ""
   },
   {
-    url: "https://cdn.enp.one/img/backgrounds/cl-photo-boston.jpg",
+    url: "https://cdn.enpaul.net/img/backgrounds/cl-photo-boston.jpg",
     description: "Charles River Basin and Skyline",
     source: ""
   },
   {
-    url: "https://cdn.enp.one/img/backgrounds/cl-photo-denver.jpg",
+    url: "https://cdn.enpaul.net/img/backgrounds/cl-photo-denver.jpg",
     description: "Mile-High City Skyline",
     source: ""
   },
   {
-    url: "https://cdn.enp.one/img/backgrounds/cl-photo-geese.jpg",
+    url: "https://cdn.enpaul.net/img/backgrounds/cl-photo-geese.jpg",
     description: "Geese and Goslings on the banks of the Charles River",
     source: ""
   },
   {
-    url: "https://cdn.enp.one/img/backgrounds/cl-photo-hotel.jpg",
+    url: "https://cdn.enpaul.net/img/backgrounds/cl-photo-hotel.jpg",
     description: "Bay Point Hotel, Lake Winnipesaukee",
     source: ""
   },
   {
-    url: "https://cdn.enp.one/img/backgrounds/cl-photo-lawrencedam.jpg",
+    url: "https://cdn.enpaul.net/img/backgrounds/cl-photo-lawrencedam.jpg",
     description: "Hydroelectric Dam on the St. Lawrence River",
     source: ""
   },
   {
-    url: "https://cdn.enp.one/img/backgrounds/cl-photo-letchworth.jpg",
+    url: "https://cdn.enpaul.net/img/backgrounds/cl-photo-letchworth.jpg",
     description: "The Middle Falls in Letchworth State Park",
     source: ""
   },
   {
-    url: "https://cdn.enp.one/img/backgrounds/cl-photo-library.jpg",
+    url: "https://cdn.enpaul.net/img/backgrounds/cl-photo-library.jpg",
     description: "Robert W. Woodruff Library at Emory University",
     source: ""
   },
   {
-    url: "https://cdn.enp.one/img/backgrounds/cl-photo-lighthouse.jpg",
+    url: "https://cdn.enpaul.net/img/backgrounds/cl-photo-lighthouse.jpg",
     description: "Nubble Lighthouse",
     source: ""
   },
   {
-    url: "https://cdn.enp.one/img/backgrounds/cl-photo-mbta.jpg",
+    url: "https://cdn.enpaul.net/img/backgrounds/cl-photo-mbta.jpg",
     description: "Old vs New MBTA Green Line",
     source: ""
   },
   {
-    url: "https://cdn.enp.one/img/backgrounds/cl-photo-rockyshore.jpg",
+    url: "https://cdn.enpaul.net/img/backgrounds/cl-photo-rockyshore.jpg",
     description: "Icy Stormy Shoreline at Brenton Point",
     source: ""
   },
   {
-    url: "https://cdn.enp.one/img/backgrounds/cl-photo-rt112.jpg",
+    url: "https://cdn.enpaul.net/img/backgrounds/cl-photo-rt112.jpg",
     description: "Northern end of the Route 112 Scenic Byway",
     source: ""
   },
   {
-    url: "https://cdn.enp.one/img/backgrounds/cl-photo-startrek.jpg",
+    url: "https://cdn.enpaul.net/img/backgrounds/cl-photo-startrek.jpg",
     description: "Enterprise Engineering Systems at the Star Trek Set Museum",
     source: ""
   }
@@ -84,14 +84,6 @@ window.addEventListener("DOMContentLoaded", function () {
   document.getElementById(
     "background-image"
   ).style.backgroundImage = "url(" + selected.url + ")";
-
-  // document.getElementById(
-  //   "background-info-link"
-  // ).innerHTML = selected.description;
-
-  document.getElementById(
-    "background-info-link"
-  ).href = selected.source;
 });
 
 

index.html

@@ -1,61 +0,0 @@
-<html>
-  <head>
-    <!-- Web crawler and search indexing meta -->
-    <meta charset="utf-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1"/>
-    <meta name="author" content="admin@allaroundhere.org"/>
-    <meta name="description" content=""/>
-    <meta name="keywords" content=""/>
-
-    <title>All Around Here</title>
-
-    <link rel="stylesheet" href="css/style.css">
-    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
-
-    <script type="text/javascript" src="js/custom.js"></script>
-
-    <noscript><style>.nojs {display: none;}</style></noscript>
-  </head>
-
-  <body>
-    <div id="background-image"></div>
-
-    <div id="preloader" class="nojs"><div class="spinner"><div></div></div></div>
-
-    <div id="content">
-      <img id="logo" src="https://cdn.enp.one/img/logos/aah-md.jpg"/>
-
-      <h1>All Around Here</h1>
-
-      <p>
-        This is a project of mine where I turn my random travels, undirected wanderings, and
-        unexpected discoveries into something other people can enjoy along with me. There are a
-        lot of cool things in the world and I like to find them, wherever I happen to be. If you're
-        interested in seeing some of these arbitrary oddities then check out the links below.
-      </p>
-
-      <ul class="buttons">
-        <li><a class="button gallery" href="gallery/">
-          <i class="fas fa-camera"></i>&nbsp;Gallery
-        </li></a>
-        <li><a class="button instagram" href="https://www.instagram.com/allaroundhere/">
-          <i class="fab fa-instagram"></i>&nbsp;Instagram
-        </li></a>
-      </ul>
-
-      <div class="footer">
-        &copy;2021
-        <a href="https://enpaul.net/" target="_blank">@enpaul</a>
-      </div>
-    </div>
-
-    <!-- <div id="background-info">
-      <i>
-        <a href="" target="_blank" id="background-info-link"></a>
-        Allis Engine #4, Metropolitan Waterworks Museum
-      </i>
-    </div> -->
-  </body>
-
-</html>