Refactoring and updating code for deployment to a caprover server

Dockerfile

@@ -0,0 +1,3 @@
+FROM docker.io/nginx:1-alpine
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+COPY ./www /www

captain-definition

@@ -0,0 +1,4 @@
+{
+  "schemaVersion": 2,
+  "dockerfilePath": "./Dockerfile"
+}

local-test.sh

@@ -0,0 +1,4 @@
+# Script used to spin up a local webserver for development & testing
+
+#!/bin/bash
+podman run -it --rm -p 3000:80 $(podman build -q .)

nginx.conf

@@ -0,0 +1,14 @@
+server {
+        listen          80;
+        root            /www;
+
+        location / {
+                index index.html;
+                try_files $uri /index.html;
+        }
+
+        location /lucy {
+                index index.html;
+                try_files $uri /lucy.html;
+        }
+}

www/css/main.css

@@ -89,18 +89,41 @@ textarea {
    ========================================================================== */
 
 :root {
-  --jason-bg-color: #F2EDEA;
+  --jason-bg: #F2EDEA;
-  --jason-accent-color: #302B44;
+  --jason-title-fg: #302B44;
-  --jason-hover-bg-color: #913A50;
+  --jason-link-bg: var(--jason-title-fg);
-  --jason-hover-fg-color: #FFFFFF;
+  --jason-link-fg: var(--jason-bg);
-  --flo-bg-color: #601F22;
+  --jason-hover-bg: #913A50;
-  --flo-accent-color: #FFE4E1;
+  --jason-hover-fg: #FFFFFF;
-  --flo-hover-bg-color: #00C4FF;
+  --jason-back-bg: #B05C7144;
-  --flo-hover-fg-color: #FFFFFF;
+  --jason-back-fg: var(--jason-title-fg);
-  --lucy-bg-color: #ECCFC3;
+  --jason-back-fg: #585568;
-  --lucy-accent-color: #904C77;
+
-  --lucy-hover-bg-color: #E49AB0;
+  --flo-bg: #601F22;
-  --lucy-hover-fg-color: #000000;
+  --flo-title-fg: #CCB7B5;
+  --flo-link-bg: #FFE4E1;
+  --flo-link-fg: var(--flo-bg);
+  --flo-hover-bg: #00C4FF;
+  --flo-hover-fg: #FFFFFF;
+  --flo-back-bg: #FFE4E188;
+  --flo-back-fg: #998987;
+  --flo-back-fg: var(--flo-bg);
+
+  --lucy-bg: #ECCFC3;
+  --lucy-title-fg: #904C77;
+  --lucy-link-bg: #ECB8A5;
+  --lucy-link-fg: var(--lucy-title-fg);
+  --lucy-hover-bg: #E49AB0;
+  --lucy-hover-fg: #333333;
+  --lucy-back-bg: #ECB8A5;
+  --lucy-back-fg: var(--lucy-title-fg);
+  --lucy-bio-fg: #333333;
+  --lucy-bio-link: var(--lucy-title-fg);
+  --lucy-bio-link-hover: #E49AB0;
+  --lucy-alert-bg: var(--lucy-title-fg);
+  --lucy-alert-fg: #FFFFFF;
+  --lucy-alert-link: #ECCFC3;
+  --lucy-alert-link-hover: var(--lucy-bio-link-hover);
 }
 
 body {
@@ -184,7 +207,6 @@ div {
 
 .links #lost
 {
-  background-color: #ECB8A5;
   margin: 0 auto 0 auto;
   width: 90%;
   margin-bottom: 1rem;
@@ -193,8 +215,21 @@ div {
   text-align: center;
 }
 
+#backbutton {
+  position: fixed;
+  top: -3rem;
+  right: -3rem;
+  height: 3rem;
+  width: 3rem;
+  z-index: 100;
+  border-radius: 1rem;
+  font-size: 2rem;
+  line-height: 3rem;
+  text-align: center;
+}
+
 .splash.jason, .main.jason {
-  background-color: var(--jason-bg-color);
+  background-color: var(--jason-bg);
   font-family: 'Raleway', sans-serif;
 }
 
@@ -206,21 +241,30 @@ div {
 
 .jason h1 a {
   text-decoration: none;
-  color: var(--jason-accent-color);
+  color: var(--jason-title-fg);
 }
 
 .links.jason li a {
-  background-color: var(--jason-accent-color);
+  background-color: var(--jason-link-bg);
-  color: var(--jason-bg-color);
+  color: var(--jason-link-fg);
 }
 
 .links.jason li a:hover {
-  background-color: var(--jason-hover-bg-color);
+  background-color: var(--jason-hover-bg);
-  color: var(--jason-hover-fg-color);
+  color: var(--jason-hover-fg);
+}
+
+#backbutton.jason {
+  background-color: var(--jason-back-bg);
+  color: var(--jason-back-fg);
+}
+
+#backbutton.jason a {
+  color: var(--jason-back-fg);
 }
 
 .splash.flo, .main.flo {
-  background-color: var(--flo-bg-color);
+  background-color: var(--flo-bg);
   font-family: 'Quicksand', sans-serif;
 }
 
@@ -231,21 +275,30 @@ div {
 
 .flo h1 a {
   text-decoration: none;
-  color: var(--flo-accent-color);
+  color: var(--flo-title-fg);
 }
 
 .links.flo li a {
-  background-color: var(--flo-accent-color);
+  background-color: var(--flo-link-bg);
-  color: var(--flo-bg-color);
+  color: var(--flo-link-fg);
 }
 
 .links.flo li a:hover {
-  background-color: var(--flo-hover-bg-color);
+  background-color: var(--flo-hover-bg);
-  color: var(--flo-hover-fg-color);
+  color: var(--flo-hover-fg);
+}
+
+#backbutton.flo {
+  background-color: var(--flo-back-bg);
+  color: var(--flo-back-fg);
+}
+
+#backbutton.flo a {
+  color: var(--flo-back-fg);
 }
 
 .splash.lucy, .main.lucy {
-  background-color: var(--lucy-bg-color);
+  background-color: var(--lucy-bg);
   font-family: 'Asap', sans-serif;
 }
 
@@ -256,25 +309,51 @@ div {
 
 .lucy h1 a {
   text-decoration: none;
-  color: var(--lucy-accent-color);
+  color: var(--lucy-title-fg);
 }
 
-.links.lucy #lost a {
+#lost.lucy {
-  color: var(--lucy-accent-color);
+  background-color: var(--lucy-alert-bg);
+  color: var(--lucy-alert-fg);
 }
 
-.links.lucy #lost a:hover {
+#lost.lucy a {
-  color: #FF0000;
+  color: var(--lucy-alert-link);
+}
+
+#lost.lucy a:hover {
+  color: var(--lucy-alert-link-hover);
+}
+
+.links.lucy {
+  color: var(--lucy-bio-fg);
+}
+
+.links.lucy a {
+  color: var(--lucy-bio-link);
+}
+
+.links.lucy a:hover {
+  color: var(--lucy-bio-link-hover);
 }
 
 .links.lucy li a {
-  background-color: var(--lucy-accent-color);
+  background-color: var(--lucy-link-bg);
-  color: var(--lucy-bg-color);
+  color: var(--lucy-link-fg);
 }
 
 .links.lucy li a:hover {
-  background-color: var(--lucy-hover-bg-color);
+  background-color: var(--lucy-hover-bg);
-  color: var(--lucy-hover-fg-color);
+  color: var(--lucy-hover-fg);
+}
+
+#backbutton.lucy {
+  background-color: var(--lucy-back-bg);
+  color: var(--lucy-back-fg);
+}
+
+#backbutton.lucy a {
+  color: var(--lucy-back-fg);
 }
 
 

www/index.html

@@ -7,18 +7,14 @@
   <meta name="description" content="">
   <meta name="viewport" content="width=device-width, initial-scale=1">
 
-  <meta property="og:title" content="">
-  <meta property="og:type" content="">
-  <meta property="og:url" content="">
-  <meta property="og:image" content="">
-
   <link rel="stylesheet" href="/css/normalize.css">
   <link rel="stylesheet" href="/css/main.css">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Cinzel&family=Marck+Script&family=Quicksand&family=Raleway&display=swap" rel="stylesheet">
 
-  <meta name="theme-color" content="#fafafa">
+  <link rel="icon" type="image/png" sizes="32x32" href="/img/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/img/favicon-16x16.png">
 </head>
 
 <body>
@@ -71,6 +67,10 @@
 		</div>
 	</div>
 
+	<div id="backbutton" class="jason" data-person="none">
+		<a href="/" class="closelink"><i class="fa-solid fa-left-long"></i></a>
+	</div>
+
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/js/all.min.js" integrity="sha512-rpLlll167T5LJHwp0waJCh3ZRf7pO6IT1+LZOhAyP6phAirwchClbTZV3iqL3BMrVxIYRbzGTpli4rfxsCK6Vw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 	<script src="/js/vendor/modernizr-3.11.2.min.js"></script>
@@ -78,11 +78,14 @@
 	<script src="/js/main.js"></script>
 
   <!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
+  <script async src="https://www.googletagmanager.com/gtag/js?id=G-Z7645Z1330"></script>
   <script>
-    window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
+	window.dataLayer = window.dataLayer || [];
-    ga('create', 'UA-XXXXX-Y', 'auto'); ga('set', 'anonymizeIp', true); ga('set', 'transport', 'beacon'); ga('send', 'pageview')
+	function gtag(){dataLayer.push(arguments);}
+	gtag('js', new Date());
+  
+	gtag('config', 'G-Z7645Z1330');
   </script>
-  <script src="https://www.google-analytics.com/analytics.js" async></script>
 </body>
 
 </html>

www/js/main.js

@@ -24,12 +24,12 @@ $(() => {
   };
 
   // Handle clicks on profile links (by doing nothing)
-  $('a.openlink').click(function(e) {
+  $('a.openlink, a.closelink').click(function(e) {
     e.preventDefault();
   })
 
   // Handle clicks on the banner
-  $('div.banner').click(function() {
+  $('div.banner, div#backbutton').click(function() {
     // If there's no person to open, do nothing
     if (typeof $(this).attr('data-person') == 'undefined') return;
 
@@ -134,6 +134,17 @@ $(() => {
       queue: true
     })
 
+    $('#backbutton').animate({
+      top: '-3rem',
+      right: '-3rem'
+    }, {
+      duration: 300,
+      complete: () => {
+        $('#backbutton').removeAttr('class')
+      }
+    })
+
+
     if (window.matchMedia('(orientation: portrait)').matches) {
       // If we're closing in portrait mode...
       $('.main.not' + p).css('width', '100vw')
@@ -178,13 +189,19 @@ $(() => {
     }
   }
 
-  // Animate the display of links for a defined person
+  // Animate the display of links for a defined person, and show the back button
   function animateLinks(p) {
     $('#links-' + p).animate({
       height: $('#links-' + p).get(0).scrollHeight
     }, {
-      duration: 300,
+      duration: 300
-      queue: true
+    })
+
+    $('#backbutton').addClass(p).animate({
+      top: '2.5rem',
+      right: '2.5rem'
+    }, {
+      duration: 300
     })
   }
 })

www/lucy.html

@@ -7,18 +7,14 @@
   <meta name="description" content="">
   <meta name="viewport" content="width=device-width, initial-scale=1">
 
-  <meta property="og:title" content="">
-  <meta property="og:type" content="">
-  <meta property="og:url" content="">
-  <meta property="og:image" content="">
-
   <link rel="stylesheet" href="/css/normalize.css">
   <link rel="stylesheet" href="/css/main.css">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Asap&family=Reenie+Beanie&display=swap" rel="stylesheet">
 
-  <meta name="theme-color" content="#fafafa">
+  <link rel="icon" type="image/png" sizes="32x32" href="/img/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/img/favicon-16x16.png">
 </head>
 
 <body>
@@ -39,8 +35,8 @@
           <div id="bio">🎂 Oct 3, 2022<br>
             🏡Calgary, AB, Canada<br>
             ♀️ Sheepadoodle<br>
-            👫 @jaywll &amp; @asiancwgrl</div>
+            👫 @<a href="https://instagram.com/jaywll">jaywll</a> &amp; @<a href="https://instagram.com/asiancwgrl">asiancwgrl</a></div>
-          <div id="lost">🚨⚠️ Am I lost!? Oh no! Please contact my humans: ⚠️🚨<br>
+          <div id="lost" class="lucy">🚨⚠️ Am I lost!? Oh no! Please contact my humans: ⚠️🚨<br>
             <a href='mailto&#58;f&#108;o%40d%6&#53;-%&#54;7uzm&#37;61&#37;6&#69;&#46;%63&#97;'>flo&#64;de-gu&#122;m&#97;n&#46;ca</a> | <a href='m&#97;ilto&#58;%6A&#64;&#115;o&#110;&#45;w&#105;&#108;l%&#54;&#57;&#97;&#37;&#54;Ds%2E%6&#51;%61'>j&#64;son-wi&#108;liams&#46;&#99;a</a> | <a href="tel:+15873299013">(587) 329-9013</a>
           </div>
           <ul>
@@ -51,54 +47,10 @@
       </div>
     </div>
   </div>
-	<!-- <div id="container">
+
-		<div id="splash-jason" class="splash jason notflo">
+	<div id="backbutton" class="lucy">
-			<div class="col-container">
+		<a href="/"><i class="fa-solid fa-left-long"></i></a>
-				<img src="/img/splash-jason.jpg">
 	</div>
-		</div>
-		<div id="main-jason" class="main jason notflo">
-			<div class="col-container">
-				<div id="banner-jason" class="banner jason notflo" data-person="jason">
-					<a href="/jason" class="openlink" data-person="jason" data-pos="0vw"><img src="/img/profile-jason.png"></a>
-					<h1><a href="/jason" class="openlink">Jason Williams</a></h1>
-			  </div>
-				<div id="links-jason" class="links jason notflo">
-					<ul>
-						<li><a href="https://ja.son-williams.ca"><i class="fa-solid fa-user"></i> Website</a></li>
-						<li><a href="https://ja.son-williams.ca/resume"><i class="fa-solid fa-file"></i> Résumé</a></li>
-						<li><a href="https://www.linkedin.com/in/jaywll/"><i class="fa-brands fa-linkedin-in"></i> LinkedIn</a></li>
-						<li><a href="https://twitter.com/jaywll"><i class="fa-brands fa-twitter"></i> Twitter</a></li>
-						<li><a href="https://mstdn.ca/@jaywll"><i class="fa-brands fa-mastodon"></i> Mastodon</a></li>
-						<li><a href="https://www.instagram.com/jaywll/"><i class="fa-brands fa-instagram"></i> Instagram</a></li>
-						<li><a href="https://jaywll.wordpress.com/category/blog/"><i class="fa-brands fa-wordpress"></i> Blog</a></li>
-						<li><a href="https://code.jaywll.co/explore/repos"><i class="fa-solid fa-code-branch"></i> Code</a></li>
-						<li><a href="https://ja.son-williams.ca/contact"><i class="fa-solid fa-envelope"></i> Contact Me</a></li>
-					</ul>
-				</div>
-			</div>
-		</div>
-		<div id="main-flo" class="main flo notjason">
-			<div class="col-container">
-				<div id="banner-flo" class="banner flo notjason" data-person="flo">
-          <a href="/flo" class="openlink"><img src="/img/profile-flo.png"></a>
-					<h1><a href="/flo" class="openlink">Flo de Guzman</a></h1>
-				</div>
-				<div id="links-flo" class="links flo notjason">
-					<ul>
-						<li><a href="#"><i class="fa-brands fa-linkedin-in"></i> LinkedIn</a></li>
-						<li><a href="#"><i class="fa-brands fa-instagram"></i> Instagram</a></li>
-						<li><a href="#"><i class="fa-brands fa-facebook-f"></i> Facebook</a></li>
-					</ul>
-				</div>
-			</div>
-		</div>
-		<div id="splash-flo" class="splash flo notjason">
-			<div class="col-container">
-				<img src="/img/splash-flo.jpg">
-			</div>
-		</div>
-	</div> -->
 
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/js/all.min.js" integrity="sha512-rpLlll167T5LJHwp0waJCh3ZRf7pO6IT1+LZOhAyP6phAirwchClbTZV3iqL3BMrVxIYRbzGTpli4rfxsCK6Vw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
@@ -107,11 +59,14 @@
   <script src="/js/main.js"></script>
 
   <!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
+  <script async src="https://www.googletagmanager.com/gtag/js?id=G-Z7645Z1330"></script>
   <script>
-    window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
+    window.dataLayer = window.dataLayer || [];
-    ga('create', 'UA-XXXXX-Y', 'auto'); ga('set', 'anonymizeIp', true); ga('set', 'transport', 'beacon'); ga('send', 'pageview')
+    function gtag(){dataLayer.push(arguments);}
+    gtag('js', new Date());
+  
+    gtag('config', 'G-Z7645Z1330');
   </script>
-  <script src="https://www.google-analytics.com/analytics.js" async></script>
 </body>
 
 </html>