Refactoring and updating code for deployment to a caprover server

Removing unused icon.png
Fixing error in server configuration
2025-01-06 13:10:45 -07:00 · 2022-11-21 13:44:07 -07:00 · 2022-11-21 13:43:56 -07:00 · 2022-11-21 13:25:58 -07:00 · 2022-11-21 13:18:19 -07:00 · 2022-11-21 13:11:52 -07:00
11 changed files with 190 additions and 111 deletions
--- a/3
+++ b/3
@@ -0,0 +1,3 @@
+FROM docker.io/nginx:1-alpine
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+COPY ./www /www
--- a/4
+++ b/4
@@ -0,0 +1,4 @@
+{
+  "schemaVersion": 2,
+  "dockerfilePath": "./Dockerfile"
+}
--- a/local-test.sh
+++ b/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 .)
--- a/nginx.conf
+++ b/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;
+        }
+}
--- a/www/css/main.css
+++ b/www/css/main.css
@@ -89,18 +89,41 @@ textarea {
   ========================================================================== */

 :root {
-  --jason-bg-color: #F2EDEA;
-  --jason-accent-color: #302B44;
-  --jason-hover-bg-color: #913A50;
-  --jason-hover-fg-color: #FFFFFF;
-  --flo-bg-color: #601F22;
-  --flo-accent-color: #FFE4E1;
-  --flo-hover-bg-color: #00C4FF;
-  --flo-hover-fg-color: #FFFFFF;
-  --lucy-bg-color: #ECCFC3;
-  --lucy-accent-color: #904C77;
-  --lucy-hover-bg-color: #E49AB0;
-  --lucy-hover-fg-color: #000000;
+  --jason-bg: #F2EDEA;
+  --jason-title-fg: #302B44;
+  --jason-link-bg: var(--jason-title-fg);
+  --jason-link-fg: var(--jason-bg);
+  --jason-hover-bg: #913A50;
+  --jason-hover-fg: #FFFFFF;
+  --jason-back-bg: #B05C7144;
+  --jason-back-fg: var(--jason-title-fg);
+  --jason-back-fg: #585568;
+
+  --flo-bg: #601F22;
+  --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);
-  color: var(--jason-bg-color);
+  background-color: var(--jason-link-bg);
+  color: var(--jason-link-fg);
 }

 .links.jason li a:hover {
-  background-color: var(--jason-hover-bg-color);
-  color: var(--jason-hover-fg-color);
+  background-color: var(--jason-hover-bg);
+  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);
-  color: var(--flo-bg-color);
+  background-color: var(--flo-link-bg);
+  color: var(--flo-link-fg);
 }

 .links.flo li a:hover {
-  background-color: var(--flo-hover-bg-color);
-  color: var(--flo-hover-fg-color);
+  background-color: var(--flo-hover-bg);
+  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 {
-  color: var(--lucy-accent-color);
+#lost.lucy {
+  background-color: var(--lucy-alert-bg);
+  color: var(--lucy-alert-fg);
 }

-.links.lucy #lost a:hover {
-  color: #FF0000;
+#lost.lucy a {
+  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);
-  color: var(--lucy-bg-color);
+  background-color: var(--lucy-link-bg);
+  color: var(--lucy-link-fg);
 }

 .links.lucy li a:hover {
-  background-color: var(--lucy-hover-bg-color);
-  color: var(--lucy-hover-fg-color);
+  background-color: var(--lucy-hover-bg);
+  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);
 }


--- a/www/icon.png
+++ b/www/icon.png
--- a/www/img/favicon-16x16.png
+++ b/www/img/favicon-16x16.png
--- a/www/img/favicon-32x32.png
+++ b/www/img/favicon-32x32.png
--- a/www/index.html
+++ b/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;
-    ga('create', 'UA-XXXXX-Y', 'auto'); ga('set', 'anonymizeIp', true); ga('set', 'transport', 'beacon'); ga('send', 'pageview')
+	window.dataLayer = window.dataLayer || [];
+	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>
--- a/www/js/main.js
+++ b/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,
-      queue: true
+      duration: 300
+    })
+
+    $('#backbutton').addClass(p).animate({
+      top: '2.5rem',
+      right: '2.5rem'
+    }, {
+      duration: 300
    })
  }
 })
--- a/www/lucy.html
+++ b/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>
-          <div id="lost">🚨⚠️ Am I lost!? Oh no! Please contact my humans: ⚠️🚨<br>
+            👫 @<a href="https://instagram.com/jaywll">jaywll</a> &amp; @<a href="https://instagram.com/asiancwgrl">asiancwgrl</a></div>
+          <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 class="col-container">
-				<img src="/img/splash-jason.jpg">
+
+	<div id="backbutton" class="lucy">
+		<a href="/"><i class="fa-solid fa-left-long"></i></a>
 	</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;
-    ga('create', 'UA-XXXXX-Y', 'auto'); ga('set', 'anonymizeIp', true); ga('set', 'transport', 'beacon'); ga('send', 'pageview')
+    window.dataLayer = window.dataLayer || [];
+    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>
Author	SHA1	Message	Date
Jason Williams	78a535d3a0	Refactoring and updating code for deployment to a caprover server	2025-01-06 13:10:45 -07:00
Jason Williams	deaa3d6841	Removing unused icon.png	2022-11-21 13:44:07 -07:00
Jason Williams	173ee160ca	Fixing error in server configuration	2022-11-21 13:43:56 -07:00
Jason Williams	02e1763715	Adding server configuration	2022-11-21 13:25:58 -07:00
Jason Williams	6910d9aaad	Adding google analytics	2022-11-21 13:18:19 -07:00
Jason Williams	2641b72473	Adding favicon and removing unused metadata fields	2022-11-21 13:11:52 -07:00
Jason Williams	021eb37af9	Adjusting Flo's title colour	2022-11-20 20:30:07 -07:00
Jason Williams	ac00446e4a	Improving back button styling and colour schemes.	2022-11-20 20:23:52 -07:00
Jason Williams	a9ac160c85	Adding a back button when profiles are open.	2022-11-20 18:26:36 -07:00
Jason Williams	56e0ceeaae	Removing commented out content from Lucy's page	2022-11-20 17:28:21 -07:00
Jason Williams	6daf1d1228	Adding links to Lucy's profle	2022-11-20 17:26:26 -07:00