15 files changed, 530 insertions, 0 deletions
diff --git a/data/static/favicon.ico b/data/static/favicon.ico
new file mode 100644
index 0000000..08ad847
--- /dev/null
+++ b/data/static/favicon.ico
diff --git a/data/static/media/DTR-232-D-Final_Board-Scerba.jpg b/data/static/media/DTR-232-D-Final_Board-Scerba.jpg
new file mode 100644
index 0000000..e8fe089
--- /dev/null
+++ b/data/static/media/DTR-232-D-Final_Board-Scerba.jpg
diff --git a/data/static/media/MKE_Skyline_Art_Museum.jpg b/data/static/media/MKE_Skyline_Art_Museum.jpg
new file mode 100644
index 0000000..35ec29a
--- /dev/null
+++ b/data/static/media/MKE_Skyline_Art_Museum.jpg
diff --git a/data/static/media/Sketch Portfolio early 2021/Arai_Helmet_720p.jpg b/data/static/media/Sketch Portfolio early 2021/Arai_Helmet_720p.jpg
new file mode 100644
index 0000000..44aed51
--- /dev/null
+++ b/data/static/media/Sketch Portfolio early 2021/Arai_Helmet_720p.jpg
diff --git a/data/static/media/Sketch Portfolio early 2021/Bernie_720p.jpg b/data/static/media/Sketch Portfolio early 2021/Bernie_720p.jpg
new file mode 100644
index 0000000..d378ddc
--- /dev/null
+++ b/data/static/media/Sketch Portfolio early 2021/Bernie_720p.jpg
diff --git a/data/static/media/Sketch Portfolio early 2021/Dorm_Setup_720p.jpg b/data/static/media/Sketch Portfolio early 2021/Dorm_Setup_720p.jpg
new file mode 100644
index 0000000..699088c
--- /dev/null
+++ b/data/static/media/Sketch Portfolio early 2021/Dorm_Setup_720p.jpg
diff --git a/data/static/media/Sketch Portfolio early 2021/Flamingo_720p.jpg b/data/static/media/Sketch Portfolio early 2021/Flamingo_720p.jpg
new file mode 100644
index 0000000..b1ece50
--- /dev/null
+++ b/data/static/media/Sketch Portfolio early 2021/Flamingo_720p.jpg
diff --git a/data/static/media/Sketch Portfolio early 2021/Harley_Sportbike_Concept_720p.jpg b/data/static/media/Sketch Portfolio early 2021/Harley_Sportbike_Concept_720p.jpg
new file mode 100644
index 0000000..89fcb4d
--- /dev/null
+++ b/data/static/media/Sketch Portfolio early 2021/Harley_Sportbike_Concept_720p.jpg
diff --git a/data/static/media/Sketch Portfolio early 2021/Peacock_Portrait2_Zoom_720p.jpg b/data/static/media/Sketch Portfolio early 2021/Peacock_Portrait2_Zoom_720p.jpg
new file mode 100644
index 0000000..f61d05f
--- /dev/null
+++ b/data/static/media/Sketch Portfolio early 2021/Peacock_Portrait2_Zoom_720p.jpg
diff --git a/data/static/media/Sketch Portfolio early 2021/Peacock_Portrait_720p.jpg b/data/static/media/Sketch Portfolio early 2021/Peacock_Portrait_720p.jpg
new file mode 100644
index 0000000..2886e96
--- /dev/null
+++ b/data/static/media/Sketch Portfolio early 2021/Peacock_Portrait_720p.jpg
diff --git a/data/static/media/Sketch Portfolio early 2021/SL350_Bobber_720p.jpg b/data/static/media/Sketch Portfolio early 2021/SL350_Bobber_720p.jpg
new file mode 100644
index 0000000..6e87840
--- /dev/null
+++ b/data/static/media/Sketch Portfolio early 2021/SL350_Bobber_720p.jpg
diff --git a/data/static/oldStyle.css b/data/static/oldStyle.css
new file mode 100644
index 0000000..73a4838
--- /dev/null
+++ b/data/static/oldStyle.css
@@ -0,0 +1,348 @@
+/*@import url('https://fonts.googleapis.com/css?family=Roboto');*/
+
+
+/* Standard elements */
+* {
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+/* Header */
+
+header {
+  padding: 30px;
+  text-align: center;
+  background: rgba(0,0,0,0.1);
+}
+
+.header.sticky {
+  padding-bottom: 99px;
+}
+
+#name {
+  font-weight: bold;
+  font-size: 250%;
+}
+
+/* Navigation */
+
+.nav.sticky {
+  display: inline-block;
+  position: fixed;
+  min-width: 100%;
+  top: 0;
+  left: 0;
+}
+
+.action {
+  margin: 0;
+  padding: 0;
+  background-color: #333;
+}
+
+.action ul {
+  display: flex;
+  justify-content: space-around;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.action ul li a {
+  margin: 0;
+  padding: 20px;
+  color: white;
+  text-decoration: none;
+  display: inline-block;
+}
+
+.action ul li {
+  margin: 5px;
+  border-radius: 15px;
+}
+
+.action ul li:hover {
+  background-color: #ddd;
+}
+
+.action ul li a:hover {
+  color: #333;
+}
+
+.action span {
+  display: none;
+}
+
+#side-navigation {
+  padding: 20px;
+  flex: 25%;
+}
+
+#side-nav-scroll-box {
+  margin: 10px 0;
+  padding: 5px;
+  border: 2px #333 solid;
+  border-radius: 6px;
+  background-color: rgba(0,0,0,0.1);
+}
+
+::-webkit-scrollbar-track {
+  background: rgba(0,0,0,0.1);
+}
+
+#outline-navigation {
+  max-height: 50vh;
+  overflow: auto;
+  margin: 0;
+  padding: 0 0 0 25px;
+}
+
+#outline-navigation li {
+  margin: 10px;
+}
+
+/* Main content containers */
+
+#root-article {
+  flex: 75%;
+}
+
+#main-wo-aside {
+  padding: 20px 20%;
+}
+
+#main-w-aside {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 20px 0;
+  padding-right: 20%;
+}
+
+/* Body and standard tags */
+
+body {
+  /*font-family: 'Roboto', sans-serif;
+  font-size: 100%;*/
+  font-family: Arial, Helvetica, sans-serif;
+  margin: 0px;
+}
+
+main h1 {
+  text-align: center;
+}
+
+/* main h1, h2, h3, h4, h5, h6 {
+  font-family: 'Arial';
+} */
+
+main p {
+  text-align: justify;
+}
+
+main p a {
+  text-decoration: underline;
+}
+
+main a {
+  color: black;
+  text-decoration: none;
+}
+
+main ul {
+  padding-left: 20px;
+}
+
+main img {
+  border-radius: 6px;
+  max-width: 100%;
+}
+
+main figure {
+  margin: auto;
+  /*margin: 10px;*/
+  border: 2px #333 solid;
+  border-radius: 6px;
+  padding: 20px 20px 5px 20px;
+  max-width: 50%;
+}
+
+blockquote {
+  font-style: italic;
+}
+
+/* Special classes */
+
+.head-bar {
+  border: 2px black solid;
+}
+
+.framed-article {
+  margin: 25px;
+  padding: 5px 25px;
+  border: 2px #333 solid;
+  border-radius: 6px;
+  max-width: 100%;
+}
+
+.framed-article-half {
+  flex: 50%;
+  padding: 5px 25px;
+  border: 2px #333 solid;
+  border-radius: 6px;
+  max-width: 100%;
+}
+
+.tile {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 25px;
+}
+
+.tile article {
+  flex: 40%;
+  max-width: auto;
+  padding: 0px 15px 0px 15px;
+  border: 2px gray solid;
+  border-radius: 6px;
+  margin: 5px;
+}
+
+.tile figure {
+  flex: 40%;
+  max-width: auto;
+  padding: 15px;
+  border: 2px gray solid;
+  border-radius: 6px;
+  margin: 5px;
+}
+
+/* Footer */
+
+footer {
+  margin: 0;
+  padding: 5px;
+  text-align: center;
+  color: white;
+  background-color: #333;
+}
+
+footer a {
+  color: rgb(189, 212, 255);
+  padding: 0;
+}
+
+/* Figure resize at 1500px */
+
+@media screen and 
+(max-width: 1500px) {
+  figure {
+    max-width: 60%;
+  }
+  .tile figure {
+    max-width: auto;
+  }
+}
+
+/* Flex side nav to top of screen and resize figure */
+
+@media screen and 
+(max-width: 1200px) {
+  header, #main-w-aside{
+    flex-direction: column;
+  }  
+  #main-w-aside, #main-wo-aside {
+    padding-left: 10%;
+    padding-right: 10%;
+  }
+  figure {
+    max-width: 70%;
+  }
+  .tile figure {
+    max-width: auto;
+  }
+}
+
+/* Mobile View */
+
+@media only screen 
+and (max-width: 510px) {
+  main figure {
+    max-width: 100%;
+  }
+  .tile {
+    flex-direction: column;
+  }
+  .tile article {
+    max-width: 100%;
+  }
+  .tile figure {
+    max-width: 100%;
+  }
+  #side-navigation {
+    padding: 20px 10%;
+  }
+
+  main a {
+    text-decoration: none;
+  }
+  
+  .action {
+    position: fixed;
+    bottom: 25px;
+    left: 25px;
+    width: 50px;
+    height: 50px;
+    cursor: pointer;
+    background: #333;
+    border-radius: 50%;
+    box-shadow: 0 5px 5px rgba(0,0,0,0.1);
+  }
+  .action span {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: white;
+    font-size: 2em;
+    transition: 0.3s ease-in-out
+  }
+  .action.active span {
+    transform: rotate(135deg);
+  }
+  .action ul {
+    position: absolute;
+    bottom: 25px;
+    background: #333;
+    min-width: 150px;
+    padding: 0;
+    border-radius: 20px;
+    opacity: 0;
+    display: inline;
+    visibility: hidden;
+    transition: 0.3s;
+  }
+  .action.active ul {
+    bottom: 70px;
+    opacity: 1;
+    visibility: visible;
+    transition: 0.3s;
+  }
+  .action ul li {
+    list-style: none;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 15px;
+    padding: 0;
+    margin: 5px;
+  }
+
+  #outline-navigation {
+    max-height: 25vh;
+  }
+}
+\ No newline at end of file
diff --git a/data/static/script.js b/data/static/script.js
new file mode 100644
index 0000000..a7323f3
--- /dev/null
+++ b/data/static/script.js
@@ -0,0 +1,49 @@
+function stickyTopNav() {
+  var nav = document.querySelector('.nav');
+  var header = document.querySelector('.header');
+  if (document.body.scrollTop > 194 || document.documentElement.scrollTop > 194) {
+    if (document.querySelector('.sticky') == null) {
+      nav.classList.toggle('sticky');
+      header.classList.toggle('sticky');
+    }
+  } else {
+    if (document.querySelector('.sticky') != null) {
+      nav.classList.toggle('sticky');
+      header.classList.toggle('sticky');
+    }
+  }
+};
+
+window.onscroll = function() {
+  stickyTopNav();
+};
+
+window.onload = function() {
+  stickyTopNav();
+};
+
+function actionToggle() {
+  var action = document.querySelector('.action');
+  action.classList.toggle('active')
+}
+
+/*// https://stackoverflow.com/questions/17534661/make-anchor-link-go-some-pixels-above-where-its-linked-to
+
+// The function actually applying the offset
+function offsetAnchor() {
+  if (location.hash.length !== 0) {
+    window.scrollTo(window.scrollX, window.scrollY - 69);
+  }
+}
+
+// Captures click events of all <a> elements with href starting with #
+document.addEventListener('click', 'a[href^="#"]', function(event) {
+  // Click events are captured before hashchanges. Timeout
+  // causes offsetAnchor to be called after the page jump.
+  window.setTimeout(function() {
+    offsetAnchor();
+  }, 0);
+});
+
+// Set the offset when entering page with hash present in the url
+window.setTimeout(offsetAnchor, 0);*/
+\ No newline at end of file
diff --git a/data/static/sitemap.xml b/data/static/sitemap.xml
new file mode 100644
index 0000000..1f568c3
--- /dev/null
+++ b/data/static/sitemap.xml
@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset
+      xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
+      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9
+            http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
+<!-- created with Free Online Sitemap Generator www.xml-sitemaps.com -->
+
+
+<url>
+  <loc>https://alexscerba.com/</loc>
+  <lastmod>2023-06-15T04:44:23+00:00</lastmod>
+  <priority>1.00</priority>
+</url>
+<url>
+  <loc>https://alexscerba.com/projects/</loc>
+  <lastmod>2023-06-15T04:44:23+00:00</lastmod>
+  <priority>0.80</priority>
+</url>
+<url>
+  <loc>https://alexscerba.com/blog/</loc>
+  <lastmod>2023-06-15T04:44:23+00:00</lastmod>
+  <priority>0.80</priority>
+</url>
+<url>
+  <loc>https://alexscerba.com/about/</loc>
+  <lastmod>2023-06-15T04:44:23+00:00</lastmod>
+  <priority>0.80</priority>
+</url>
+<url>
+  <loc>https://alexscerba.com/projects/CCSEntryPortfolio</loc>
+  <lastmod>2023-06-15T04:44:23+00:00</lastmod>
+  <priority>0.80</priority>
+</url>
+<url>
+  <loc>https://alexscerba.com/blog/FirstPost</loc>
+  <lastmod>2023-06-15T04:44:23+00:00</lastmod>
+  <priority>0.64</priority>
+</url>
+
+
+</urlset>
+\ No newline at end of file
diff --git a/data/static/style.css b/data/static/style.css
new file mode 100644
index 0000000..28eda95
--- /dev/null
+++ b/data/static/style.css
@@ -0,0 +1,91 @@
+* {
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  font-family: Arial, Helvetica, sans-serif;
+  max-width: 500px;
+  margin: 0 auto;
+  padding: 0;
+}
+
+nav {
+  margin-top: 8px;
+  text-align: center;
+  border-radius: 6px;
+  background-color: rgb(228, 228, 228);
+}
+
+nav ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+nav li {
+  display: inline-block;
+  margin: 10px;
+}
+
+a {
+  font-weight: bold;
+  color: black;
+  text-decoration: none;
+  border-bottom: 1px dotted black;
+}
+
+h1 {
+  margin: 60px 0 0 0;
+}
+
+.subtitle {
+  margin: 8px 0 60px 12px;
+}
+
+figure {
+  margin: 20px 0;
+}
+
+img {
+  max-width: 100%;
+}
+
+.imgGrid {
+  margin: 20px auto;
+  line-height: 0;
+  column-count: 2;
+  column-gap: 0px;
+}
+
+.imgGrid img {
+  width: 100% !important;
+  height: auto !important;
+}
+
+footer {
+  text-align: center;
+  background-color: rgb(228, 228, 228);
+  border-radius: 6px;
+}
+
+footer p {
+  padding: 8px 0;
+}
+
+@media only screen 
+and (max-width: 520px) {
+  body {
+    max-width: 400px;
+  }
+}
+
+@media only screen 
+and (max-width: 410px) {
+  body {
+    max-width: 375px;
+  }
+}
+\ No newline at end of file