Removing uv as package manager. Isues with using it on network volume.

content/assets/css/_colours.css

@@ -0,0 +1,54 @@
+/*****************************
+* COLOURS
+*****************************/
+
+:root {
+     --background-colour: #FFF;
+     --primary-colour: #323036;
+     --secondary-colour: #EFE5DC;
+     --tertiary-colour: #818589;
+     --quarternary-colour: #FAF9F6;
+     --transparent: transparent;
+}
+
+/* Adjust Mkdocs colours */
+
+:root {
+     --md-primary-fg-color: var(--primary-colour);
+     --md-primary-fg-color--light: var(--tertiary-colour);
+     --md-primary-fg-color--dark: var(--primary-colour);
+     --md-primary-bg-color: var(--background-colour);
+     --md-footer-bg-color: var(--background-colour);
+     --md-default-bg-color: var(--background-colour);
+}
+
+[data-md-color-accent=custom] {
+     --md-primary-fg-color: var(--primary-colour);
+     --md-primary-fg-color--light: var(--tertiary-colour);
+     --md-primary-fg-color--dark: var(--primary-colour);
+     --md-accent-fg-color: var(--secondary-colour);
+}
+
+/* Font colours */
+
+.md-typeset {
+
+     p,
+     h1,
+     h2,
+     h3 {
+          color: var(--primary-color);
+     }
+
+     figcaption,
+     a,
+     h4,
+     h5,
+     h6 {
+          color: var(--tertiary-colour);
+     }
+
+     a:hover {
+          color: var(--secondary-color);
+     }
+}

content/assets/css/_faces.css

@@ -0,0 +1,47 @@
+/*****************************
+* FACES
+*****************************/
+
+.faces {
+     display: flex;
+     justify-content: space-between;
+     width: 80vw;
+     height: 30vh;
+}
+
+.face {
+     width: 100%;
+     height: 33.33vh;
+     position: relative;
+     overflow: hidden;
+     transition: all 0.5s ease;
+}
+
+.face:hover {
+     filter: invert(50%);
+}
+
+.face img {
+     width: 100%;
+     height: 100%;
+     object-fit: contain;
+     opacity: 0;
+     transform: scale(0.9);
+     transition: all 2s ease-out forwards;
+}
+
+.face.active img {
+     animation: fadeIn 2s ease-out forwards;
+}
+
+@keyframes fadeIn {
+     0% {
+          opacity: 0;
+          transform: scale(0.9);
+     }
+
+     100% {
+          opacity: 1;
+          transform: scale(1);
+     }
+}

content/assets/css/_fonts.css

@@ -0,0 +1,202 @@
+/*****************************
+* FONTS
+*****************************/
+
+@font-face {
+     font-family: 'Libre Baskerville';
+     font-weight: normal;
+     font-style: normal;
+     src: url('../fonts/libre-baskerville/LibreBaskerville-Regular.woff');
+}
+
+@font-face {
+     font-family: 'Libre Baskerville';
+     font-weight: bold;
+     font-style: normal;
+     src: url('../fonts/libre-baskerville/LibreBaskerville-Bold.woff');
+
+}
+
+@font-face {
+     font-family: 'Libre Baskerville';
+     font-weight: normal;
+     font-style: italic;
+     src: url('../fonts/libre-baskerville/LibreBaskerville-Italic.woff');
+
+}
+
+@font-face {
+     font-family: 'Lato';
+     font-weight: normal;
+     font-style: normal;
+     src: url('../fonts/lato/Lato-Regular.ttf');
+
+}
+
+@font-face {
+     font-family: 'Lato';
+     font-weight: normal;
+     font-style: italic;
+     src: url('../fonts/lato/Lato-Italic.ttf');
+
+}
+
+@font-face {
+     font-family: 'Lato';
+     font-weight: bold;
+     font-style: normal;
+     src: url('../fonts/lato/Lato-Bold.woff2');
+
+}
+
+@font-face {
+     font-family: 'Lato';
+     font-weight: bold;
+     font-style: italic;
+     src: url('../fonts/lato/Lato-BoldItalic.woff2');
+}
+
+@font-face {
+     font-family: 'Lato';
+     font-weight: light;
+     font-style: normal;
+     src: url('../fonts/lato/Lato-Regular.woff2');
+
+}
+
+@font-face {
+     font-family: 'Lato';
+     font-weight: light;
+     font-style: italic;
+     src: url('../fonts/lato/Lato-Italic.woff2');
+}
+
+@font-face {
+     font-family: 'Lato';
+     font-weight: bolder;
+     font-style: normal;
+     src: url('../fonts/lato/Lato-Black.ttf');
+}
+
+@font-face {
+     font-family: 'Lato';
+     font-weight: bolder;
+     font-style: italic;
+     src: url('../fonts/lato/Lato-BlackItalic.ttf');
+}
+
+@font-face {
+     font-family: 'Lato';
+     font-weight: thin;
+     font-style: normal;
+     src: url('../fonts/lato/Lato-Light.ttf');
+}
+
+@font-face {
+     font-family: 'Lato';
+     font-weight: thin;
+     font-style: italic;
+     src: url('../fonts/lato/Lato-ThinItalic.ttf');
+}
+
+@font-face {
+     font-family: 'DM Mono';
+     font-weight: normal;
+     font-style: normal;
+     src: url('../fonts/dm-mono/DMMono-Regular.woff2');
+}
+
+@font-face {
+     font-family: 'DM Mono';
+     font-weight: normal;
+     font-style: italic;
+     src: url('../fonts/dm-mono/DMMono-Italic.woff2');
+}
+
+@font-face {
+     font-family: 'DM Mono';
+     font-weight: medium;
+     font-style: italic;
+     src: url('../fonts/dm-mono/DMMono-MediumItalic.woff2');
+}
+
+@font-face {
+     font-family: 'DM Mono';
+     font-weight: medium;
+     font-style: normal;
+     src: url('../fonts/dm-mono/DMMono-Medium.woff2');
+}
+
+@font-face {
+     font-family: 'DM Mono';
+     font-weight: light;
+     font-style: normal;
+     src: url('../fonts/dm-mono/DMMono-Light.woff2');
+}
+
+@font-face {
+     font-family: 'DM Mono';
+     font-weight: light;
+     font-style: italic;
+     src: url('../fonts/dm-mono/DMMono-LightItalic.woff2');
+}
+
+@font-face {
+     font-family: 'Open Sans';
+     font-weight: medium;
+     font-style: normal;
+     src: url('../fonts/open-sans/OpenSans-Medium.woff2');
+}
+
+@font-face {
+     font-family: 'DM Serif';
+     font-weight: bolder;
+     font-style: italic;
+     src: url('../fonts/open-sans/OpenSans-ExtraBold.woff2');
+}
+
+/* Variables */
+
+:root {
+     --primary-font: 'Libre Baskerville', serif;
+     --secondary-font: 'Lato', sans-serif;
+     --tertiary-font: 'DM Mono', monospace;
+     --number-font: 'Open Sans', sans-serif;
+}
+
+/* Typeset */
+
+.md-typeset {
+     p, li, ul {
+          font-family: var(--primary-font);
+     }
+
+     figcaption {
+          font-family: var(--secondary-font);
+          font-style: normal;
+     }
+
+     h1,
+     h2,
+     h3 {
+          font-family: var(--secondary-font);
+     }
+
+     h4,
+     h5,
+     h6 {
+          font-family: var(--secondary-font);
+     }
+}
+
+.md-typeset {
+
+     h1,
+     h2,
+     h3,
+     h4,
+     h5,
+     h6 {
+          font-weight: bold;
+     }
+}

content/assets/css/_hero-text.css

@@ -0,0 +1,74 @@
+/*****************************
+* HERO TEXT
+*****************************/
+
+.hero-text {
+     flex: 1;
+     min-width: fit-content;
+     height: 50vh;
+     display: inline-block;
+     flex-direction: row;
+     justify-content: center;
+     padding: 5em;
+     font-family: var(--primary-font);
+     text-align: left;
+     margin: var(--zero);
+
+     h2 {
+          margin-bottom: 0.1em;
+          overflow: hidden;
+          border-right: .15em solid var(--tertiary-colour);
+          white-space: nowrap;
+          letter-spacing: .05em;
+          animation:
+               typing 5s steps(40, end) forwards 2s,
+               blink-caret 0.75s step-end infinite;
+     }
+
+     h4 {
+          font-weight: normal;
+
+          &#hover-text {
+
+               opacity: 0;
+               transition: opacity 0.5s ease-out;
+
+               &.fade-in {
+                    opacity: 1;
+               }
+
+               &.leave {
+                    opacity: 0;
+               }
+          }
+     }
+
+     .accent-divider {
+          background-color: var(--secondary-colour);
+          width: 100%;
+          height: 10px;
+          margin: 1em 0;
+     }
+}
+
+@keyframes typing {
+     from {
+          width: 0
+     }
+
+     to {
+          width: 100%
+     }
+}
+
+@keyframes blink-caret {
+
+     from,
+     to {
+          border-color: transparent;
+     }
+
+     50% {
+          border-color: var(--tertiary-colour);
+     }
+}

content/assets/css/_index.css

@@ -0,0 +1,30 @@
+/*****************************
+* INDEX
+* Styling for index pages.
+*****************************/
+
+.md-content__inner,
+.md-main__inner,
+.md-grid,
+html,
+body,
+* {
+     margin: 0;
+     padding: 0;
+     box-sizing: border-box;
+     max-width: none;
+}
+
+article,
+.md-container {
+     min-height: 100%;
+     width: 100%;
+     margin: 0;
+     padding: 0;
+}
+
+header,
+nav,
+.md-content .md-typeset h1 {
+     display: none !important;
+}

content/assets/css/_loader.css

@@ -0,0 +1,77 @@
+/*****************************
+* PAGE LOADER
+*****************************/
+
+#loader {
+     position: fixed;
+     top: 0;
+     left: 0;
+     width: 100vw;
+     height: 100vh;
+     background-color: var(--secondary-colour);
+     display: flex !important;
+     justify-content: center;
+     align-items: center;
+     z-index: 9999;
+     transition: opacity 1s ease-out, transform 0.5s ease-out;
+     margin: 0;
+     padding: 0;
+}
+
+#loader.fade-out {
+     opacity: 0;
+     transform: scale(1.1);
+}
+
+#loader img {
+     width: 50px;
+     height: 50px;
+
+}
+
+@keyframes spin {
+     from {
+          transform: rotate(0deg);
+     }
+
+     to {
+          transform: rotate(360deg);
+     }
+}
+
+#loading-text {
+     font-family: var(--secondary-font);
+     font-size: 24px;
+     color: black;
+     animation: pulse 1s ease-in-out infinite;
+}
+
+@keyframes pulse {
+     0% {
+          opacity: 1;
+     }
+
+     50% {
+          opacity: 0.5;
+     }
+
+     100% {
+          opacity: 1;
+     }
+}
+
+@keyframes fadeOut {
+     from {
+          opacity: 1;
+          transform: scale(1);
+     }
+
+     to {
+          opacity: 0;
+          transform: scale(1.1);
+     }
+}
+
+.fade-out {
+     animation: fadeOut 1s ease-out forwards;
+}

content/assets/css/_media-player.css

@@ -0,0 +1,37 @@
+/*****************************
+* MEDIA PLAYER
+*****************************/
+
+media-player {
+     margin: 5px 0;
+
+     * {
+          filter: none;
+     }
+}
+
+.light .vds-time,
+.vds-button {
+     --default-color: #818589 !important;
+     color: #818589 !important;
+}
+
+.light .vds-audio-layout .vds-play-button,
+.vds-audio-layout.light .vds-play-button {
+     --default-bg: transparent !important;
+}
+
+.media-audio-layout {
+     background-color: transparent !important;
+}
+
+.vds-audio-layout.light {
+     --default-bg: transparent !important;
+}
+
+.vds-title {
+     font-family: var(--secondary-font);
+     font-size: 0.8em;
+     font-weight: bold;
+     color: #818589;
+}

content/assets/css/_page-resume.css

@@ -0,0 +1,230 @@
+/*****************************
+* RESUMÉ
+*****************************/
+
+/* Fade in content */
+.fade-in-up-section {
+     opacity: 0;
+     transform: translateY(20px);
+     transition: opacity 2s ease-in-out, transform 2s ease-in-out;
+}
+
+.fade-in-up-section.visible {
+     opacity: 1;
+     transform: translateY(0);
+}
+
+.fade-in-up-content {
+     padding: 20px;
+     border-radius: 5px;
+     /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); */
+}
+
+/* Career meta-information */
+.meta-icons {
+     font-size: max(calc(var(--text-variable-size) + 3px), var(--text-min-size));
+     font-family: var(--secondary-font);
+     font-weight: 900;
+     color: var(--tertiary-colour);
+     text-align: left;
+     display: flex;
+     justify-content: left;
+     gap: 25px;
+     width: fit-content;
+     margin: 0;
+
+     & .md-typeset .twemoji {
+          height: max(calc(var(--text-variable-size) + 5px), var(--text-min-size));
+     }
+
+     & svg {
+          margin-right: 3px;
+     }
+
+     a:hover {
+          color: var(--secondary-colour);
+     }
+}
+
+/* Career timeline */
+.tabbed-labels {
+     font-family: var(--number-font);
+     font-weight: 900;
+     margin-bottom: 0;
+
+     a:hover {
+          color: var(--secondary-colour);
+     }
+
+     label {
+          font-size: max(calc(var(--text-variable-size) + 9px), calc(var(--text-min-size) + 3px)) !important;
+     }
+
+     >label:nth-child(1) {
+          margin-left: 4vw;
+     }
+
+     >label:nth-child(2) {
+          margin-left: 12vw;
+     }
+
+     >label:nth-child(3) {
+          margin-left: 24vw;
+     }
+
+     >label:nth-child(4) {
+          margin-left: 12vw;
+     }
+
+     >label:nth-child(5) {
+          margin-left: 10vw;
+     }
+}
+
+.tabbed-content {
+     background-color: var(--quarternary-colour);
+     margin-top: 0;
+}
+
+div.tabbed-block {
+     padding: 1em 2.5em;
+}
+
+/* Timeline content */
+.logo-and-title {
+     display: inline-block;
+     margin: 0;
+
+     img {
+          height: max(15px, 0.5vh);
+          margin-right: 10px;
+     }
+
+     h6 {
+          display: inline-block;
+          margin-right: 5px;
+     }
+}
+
+div.tags {
+     font-family: var(--primary-font);
+     font-size: max(var(--text-variable-size), var(--text-min-size));
+     font-style: italic;
+     color: var(--tertiary-colour);
+     margin: 0;
+     padding: 0;
+}
+
+.three-column {
+     display: grid;
+     grid-template-columns: repeat(3, 1fr);
+     max-width: 1500px;
+     padding: 0;
+     width: 100%;
+
+     .column {
+          justify-self: center;
+          padding: 20px;
+          text-align: left;
+
+          &:nth-child(1) {
+               padding-left: 0;
+          }
+
+          &:nth-child(2) {
+               border-left: 1px solid var(--secondary-colour);
+               border-right: 1px solid var(--secondary-colour);
+          }
+
+          .content {
+               h6 {
+                    font-size: max(calc(var(--text-variable-size) + 7px), calc(var(--text-min-size) + 2px));
+                    font-family: var(--secondary-font);
+                    margin-bottom: 8px;
+               }
+          }
+     }
+}
+
+p.blurb {
+     font-family: var(--primary-font);
+     font-size: max(calc(var(--text-variable-size) + 5px), var(--text-min-size));
+     margin-top: 25px;
+}
+
+/* Portfolio */
+.grid.cards {
+
+     li {
+          background-color: var(--quarternary-colour);
+          border: none !important;
+          border-radius: 5px !important;
+          box-shadow: none !important;
+          padding: 2em !important;
+          margin: 2em !important;
+
+
+          h6 {
+               span {
+                    margin-right: 3px;
+               }
+          }
+
+          &:hover {
+               box-shadow: none !important;
+               border: none !important;
+               transition: none !important;
+          }
+     }
+}
+
+.writing {
+     padding: 4em;
+
+     h6 {
+          margin-bottom: 8px;
+     }
+}
+
+.two-column {
+     display: grid;
+     grid-template-columns: repeat(2, 1fr);
+     max-width: 1500px;
+     padding: 20px 20px 20px 0;
+     width: 100%;
+     margin: 10px auto;
+
+     .column {
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          padding: 20px;
+          text-align: left;
+
+          .content {
+               display: flex;
+               flex-direction: column;
+               justify-content: center;
+               height: 100%;
+          }
+     }
+}
+
+/* Contact */
+
+div.contact-me {
+     display: flex;
+     justify-content: center;
+     align-items: center;
+     text-align: center;
+
+     div.button {
+          font-size: 1.8em;
+          color: var(--tertiary-colour);
+          border: none;
+
+          &:hover {
+               color: var(--secondary-colour);
+          }
+     }
+}

content/assets/css/_size.css

@@ -0,0 +1,74 @@
+/*****************************
+* SIZE
+*****************************/
+
+/* Standard screen size is based on 1728x1117 screen. */
+:root {
+     --text-min-size: 8px;
+     --text-variable-size: 0.7vw;
+     --full-width: 100vw;
+     --half-width: 50vw;
+     --third-width: 33.3vw;
+     --quarter-width: 25vw;
+     --fifth-width: 20vw;
+     --full-height: 100vh;
+     --half-height: 50vh;
+     --third-height: 33.3vh;
+     --quarter-height: 25vh;
+     --fifth-height: 20vh;
+     --horizontal-spacing: 0.3vw;
+     --vertical-spacing: 0.45vh;
+}
+
+/* Font sizes */
+.md-typeset {
+     p {
+          font-size: max(calc(var(--text-variable-size) + 3px), var(--text-min-size));
+     }
+
+     figcaption {
+          font-size: max(calc(var(--text-variable-size)), var(--text-min-size));
+     }
+
+     h1,
+     h2,
+     h3,
+     h4,
+     h5,
+     h6 {
+          letter-spacing: normal;
+          margin: 0 0 5px 0;
+     }
+}
+
+.md-typeset {
+     h1 {
+          font-size: max(calc(var(--text-variable-size) * 6), calc(var(--text-min-size) + 6px));
+     }
+
+     h2 {
+          font-size: max(calc(var(--text-variable-size) * 4), calc(var(--text-min-size) + 5px));
+     }
+
+     h3 {
+          font-size: max(calc(var(--text-variable-size) * 3.5), calc(var(--text-min-size) + 4px));
+     }
+
+     h4 {
+          font-size: max(calc(var(--text-variable-size) * 2.8), calc(var(--text-min-size) + 3px));
+     }
+
+     h5 {
+          font-size: max(calc(var(--text-variable-size) * 2), calc(var(--text-min-size) + 2px));
+     }
+
+     h6 {
+          font-size: max(calc(var(--text-variable-size) + 8px), calc(var(--text-min-size) + 1px));
+     }
+}
+
+/* Default padding and margins */
+div {
+     margin: calc(var(--vertical-spacing) * 2) 0;
+     padding: calc(var(--vertical-spacing) * 2) 0;
+}

content/assets/css/g.css

@@ -0,0 +1,180 @@
+@import url(_colours.css);
+@import url(_fonts.css);
+@import url(_size.css);
+@import url(_loader.css);
+@import url(_page-resume.css);
+@import url(_hero-text.css);
+@import url(_faces.css);
+@import url(_media-player.css);
+
+
+/*****************************
+* GENERAL RULES
+*****************************/
+
+body {
+     background: var(--background);
+     min-height: 100vh;
+     display: flex;
+     justify-content: center;
+     align-items: center;
+     width: 100%;
+}
+
+nav, .md-header {
+     background-color: var(--transparent);
+}
+
+a.md-header__button {
+     display: none !important;
+}
+
+.md-typeset a:hover {
+     text-decoration: none;
+}
+
+.md-header--shadow {
+     box-shadow: none;
+}
+
+.md-header__topic:first-child {
+     display: none;
+}
+
+/* Change colour of search highlighting. */
+.md-search-result__link:focus,
+.md-search-result__link:hover {
+     background-color: var(--transparent);
+}
+
+.md-typeset mark {
+     background-color: var(--transparent);
+}
+
+/* This was creating an annoying space at the top. */
+article.md-content__inner.md-typeset:before,
+article.md-content__inner.md-typeset:after {
+     content: none;
+}
+
+.md-typeset figcaption {
+     max-width: none;
+}
+
+/* Hide the repo stuff */
+.md-source {
+     display: none !important;
+}
+
+/*****************************
+* BUTTON
+*****************************/
+
+div.button {
+     font-family: var(--secondary-font);
+     border-bottom: 3px solid var(--secondary-colour);
+     width: fit-content;
+     padding-bottom: 3px;
+     font-weight: bold;
+
+     &:hover {
+          border-bottom: 3px solid white;
+     }
+}
+
+
+/*****************************
+* STATUS
+*****************************/
+
+div.status-green {
+     background-color: #007a5a;
+     color: var(--background-colour);
+     border-radius: 5px;
+     padding: 5px 15px;
+     text-transform: uppercase;
+     font-family: var(--secondary-font);
+     font-weight: 900;
+     font-size: 0.8em;
+     width: fit-content;
+     margin: 0;
+     letter-spacing: 0.3em;
+     margin-bottom: 15px;
+}
+
+/*****************************
+* TOOLTIP
+*****************************/
+
+.md-annotation__index {
+     overflow: inherit;
+     vertical-align: inherit;
+}
+
+.md-tooltip {
+     box-shadow: none;
+     border: 1px solid var(--secondary-colour);
+     padding: 3px;
+     margin: 0;
+}
+
+.md-tooltip__inner {
+     font-family: var(--secondary-font);
+     font-size: 0.8em;
+     padding-top: 0;
+     padding-bottom: 0;
+}
+
+/*****************************
+* FOOTER
+*****************************/
+
+div.footer {
+     margin: 30px 5px 5px 0;
+     padding-bottom: 0;
+     display: flex;
+     justify-content: space-between;
+     align-items: center;
+
+     .version {
+          transform: rotate(180deg);
+          font-size: 8px;
+          margin-left: 20px;
+          writing-mode: vertical-rl;
+          font-family: var(--secondary-font);
+     }
+
+     .menu {
+          display: flex;
+          justify-content: center;
+          gap: 3em;
+          color: var(--primary-colour);
+          margin-left: 2em;
+          font-size: max(calc(var(--text-variable-size) * 2), calc(var(--text-min-size) + 2px));
+          font-family: var(--primary-font);
+     }
+}
+
+/*****************************
+* RESPONSIVE
+*****************************/
+
+@media (max-width: 768px) {
+     .faces {
+          flex-direction: column;
+     }
+
+
+     .three-column {
+          grid-template-columns: 1fr;
+
+          .column:nth-child(1) {
+               padding-left: 20px;
+          }
+
+          .column:nth-child(2) {
+               border: none;
+          }
+     }
+
+}

content/assets/css/index.css

@@ -0,0 +1,213 @@
+@import url(_colours.css);
+@import url("https: //api.fonts.coollabs.io/css2?family=Lato:wght@300;400;700;900&family=Libre+Baskerville&family=DM+Mono:wght@400;500&display=swap");
+
+header,
+nav,
+footer,
+.md-content .md-typeset h1 {
+     display: none !important;
+}
+
+article,
+.md-container {
+     min-height: 100vh;
+     width: 100%;
+     margin: 0;
+     padding: 0;
+}
+
+.md-content__inner,
+.md-main__inner,
+.md-grid,
+html,
+body,
+* {
+     margin: 0;
+     padding: 0;
+     box-sizing: border-box;
+}
+
+.md-grid {
+     max-width: none;
+}
+
+/* This was creating an annoying space at the top */
+article.md-content__inner.md-typeset:before,
+article.md-content__inner.md-typeset:after {
+     content: none;
+}
+
+body {
+     min-height: 100vh;
+     display: flex;
+     justify-content: center;
+     align-items: center;
+     background-color: white;
+     width: 100%;
+}
+
+.container {
+     width: 100%;
+     height: 100%;
+}
+
+.columns {
+     display: flex;
+     justify-content: space-between;
+     width: 100%;
+     height: 50vh;
+}
+
+.top-row {
+     flex: 1;
+     min-width: 100vw;
+     height: 50vh;
+     display: flex;
+     flex-direction: row;
+     justify-content: center;
+     padding: 5em;
+     font-family: 'Libre Baskerville', serif;
+}
+
+.top-row h2 {
+     margin-bottom: 0.1em;
+     font-size: 5vw;
+     font-weight: 900;
+     overflow: hidden;
+     border-right: .15em solid #818589;
+     white-space: nowrap;
+     letter-spacing: .05em;
+     animation:
+          typing 5s steps(40, end) forwards 2s,
+          blink-caret 0.75s step-end infinite;
+}
+
+@keyframes typing {
+     from {
+          width: 0
+     }
+
+     to {
+          width: 100%
+     }
+}
+
+@keyframes blink-caret {
+
+     from,
+     to {
+          border-color: transparent;
+     }
+
+     50% {
+          border-color: #818589;
+     }
+}
+
+.top-row p {
+     font-size: 3vw;
+     color: #818589;
+}
+
+.top-row * {
+     text-align: left;
+}
+
+/* Image Container Styling */
+.image-container {
+     width: 100%;
+     height: 33.33vh;
+     position: relative;
+     overflow: hidden;
+}
+
+.image-container:hover {
+     filter: invert(50%);
+}
+
+.image-container img {
+     width: 100%;
+     height: 100%;
+     object-fit: contain;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+     .columns {
+          flex-direction: column;
+     }
+}
+
+#loader {
+     position: fixed;
+     top: 0;
+     left: 0;
+     width: 100vw;
+     height: 100vh;
+     background-color: #EFE5DC;
+     display: flex !important;
+     justify-content: center;
+     align-items: center;
+     z-index: 9998;
+     transition: opacity 1s ease-out, transform 0.5s ease-out;
+}
+
+#loader.fade-out {
+     opacity: 0;
+     transform: scale(1.1);
+}
+
+#loader img {
+     width: 50px;
+     height: 50px;
+
+}
+
+@keyframes spin {
+     from {
+          transform: rotate(0deg);
+     }
+
+     to {
+          transform: rotate(360deg);
+     }
+}
+
+#loading-text {
+     font-family: Arial, sans-serif;
+     font-size: 24px;
+     color: black;
+     /* Change text color if needed */
+     animation: pulse 1s ease-in-out infinite;
+}
+
+@keyframes pulse {
+     0% {
+          opacity: 1;
+     }
+
+     50% {
+          opacity: 0.5;
+     }
+
+     100% {
+          opacity: 1;
+     }
+}
+
+/* Add fade-out animation */
+@keyframes fadeOut {
+     from {
+          opacity: 1;
+          transform: scale(1);
+     }
+
+     to {
+          opacity: 0;
+          transform: scale(1.1);
+     }
+}
+
+.fade-out {
+     animation: fadeOut 1s ease-out forwards;
+}

content/assets/fonts/fira-code/OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2014-2020 The Fira Code Project Authors (https://github.com/tonsky/FiraCode)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

content/assets/fonts/fira-code/README.txt

@@ -0,0 +1,67 @@
+Fira Code Variable Font
+=======================
+
+This download contains Fira Code as both a variable font and static fonts.
+
+Fira Code is a variable font with this axis:
+  wght
+
+This means all the styles are contained in a single file:
+  Fira_Code/FiraCode-VariableFont_wght.ttf
+
+If your app fully supports variable fonts, you can now pick intermediate styles
+that aren’t available as static fonts. Not all apps support variable fonts, and
+in those cases you can use the static font files for Fira Code:
+  Fira_Code/static/FiraCode-Light.ttf
+  Fira_Code/static/FiraCode-Regular.ttf
+  Fira_Code/static/FiraCode-Medium.ttf
+  Fira_Code/static/FiraCode-SemiBold.ttf
+  Fira_Code/static/FiraCode-Bold.ttf
+
+Get started
+-----------
+
+1. Install the font files you want to use
+
+2. Use your app's font picker to view the font family and all the
+available styles
+
+Learn more about variable fonts
+-------------------------------
+
+  https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts
+  https://variablefonts.typenetwork.com
+  https://medium.com/variable-fonts
+
+In desktop apps
+
+  https://theblog.adobe.com/can-variable-fonts-illustrator-cc
+  https://helpx.adobe.com/nz/photoshop/using/fonts.html#variable_fonts
+
+Online
+
+  https://developers.google.com/fonts/docs/getting_started
+  https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide
+  https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts
+
+Installing fonts
+
+  MacOS: https://support.apple.com/en-us/HT201749
+  Linux: https://www.google.com/search?q=how+to+install+a+font+on+gnu%2Blinux
+  Windows: https://support.microsoft.com/en-us/help/314960/how-to-install-or-remove-a-font-in-windows
+
+Android Apps
+
+  https://developers.google.com/fonts/docs/android
+  https://developer.android.com/guide/topics/ui/look-and-feel/downloadable-fonts
+
+License
+-------
+Please read the full license text (OFL.txt) to understand the permissions,
+restrictions and requirements for usage, redistribution, and modification.
+
+You can use them in your products & projects – print or digital,
+commercial or otherwise.
+
+This isn't legal advice, please consider consulting a lawyer and see the full
+license for all details.

content/assets/fonts/fira-sans/OFL.txt

@@ -0,0 +1,93 @@
+Copyright (c) 2012-2015, The Mozilla Foundation and Telefonica S.A.
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

content/assets/fonts/libre-baskerville/style.css

@@ -0,0 +1,24 @@
+/* #### Generated By: http://font.download #### */
+
+    @font-face {
+    font-family: 'Libre Baskerville';
+    font-style: normal;
+    font-weight: normal;
+    src: local('Libre Baskerville'), url('LibreBaskerville-Regular.woff') format('woff');
+    }
+    
+
+    @font-face {
+    font-family: 'Libre Baskerville Italic';
+    font-style: normal;
+    font-weight: normal;
+    src: local('Libre Baskerville Italic'), url('LibreBaskerville-Italic.woff') format('woff');
+    }
+    
+
+    @font-face {
+    font-family: 'Libre Baskerville Bold';
+    font-style: normal;
+    font-weight: normal;
+    src: local('Libre Baskerville Bold'), url('LibreBaskerville-Bold.woff') format('woff');
+    }

content/assets/js/index-text.js

@@ -0,0 +1,11 @@
+document.getElementById('visual-hover').onmouseover = function () {
+     document.getElementById('hover-text').innerHTML = "a thousand words at a time";
+};
+
+document.getElementById('technical-hover').onmouseover = function () {
+     document.getElementById('hover-text').innerHTML = "in zeroes, ones, and other numbers";
+};
+
+document.getElementById('writing-hover').onmouseover = function () {
+     document.getElementById('hover-text').innerHTML = "letter by letter, word by word";
+};

content/assets/js/index.js

@@ -0,0 +1,37 @@
+/*
+Homepage
+*/
+
+// This script changes the text when hovering over faces on the home page.
+function setHoverText(elementId, text) {
+     const hoverTextElement = document.getElementById('hover-text');
+
+     document.getElementById(elementId).onmouseover = function () {
+          hoverTextElement.innerHTML = text;
+          hoverTextElement.classList.remove('leave');
+          hoverTextElement.classList.add('fade-in');
+     };
+
+     document.getElementById(elementId).onmouseout = function () {
+          hoverTextElement.classList.remove('fade-in');
+          hoverTextElement.classList.add('leave');
+     };
+}
+
+setHoverText('visual-hover', 'a thousand words at a time');
+setHoverText('technical-hover', 'in zeroes, ones, and other numbers');
+setHoverText('writing-hover', 'letter by letter, word by word');
+
+
+// This script does the animations for the faces on the home page.
+document.addEventListener('DOMContentLoaded', function () {
+     const imageContainers = document.querySelectorAll('.face');
+
+     setTimeout(() => {
+          imageContainers.forEach((container, index) => {
+               setTimeout(() => {
+                    container.classList.add('active');
+               }, (index + 1) * 1000); // Adjust delay between images
+          });
+     }, 4800);
+});

content/assets/js/loader.js

@@ -0,0 +1,17 @@
+/*
+PAGE LOADER
+*/
+
+// This loads a screen before the page is fully loaded.
+document.getElementById('loader').style.display = 'block';
+
+function fadeOutLoader() {
+     const loader = document.getElementById('loader');
+     loader.classList.add('fade-out');
+
+     setTimeout(() => {
+          loader.remove();
+     }, 1000);
+}
+
+setTimeout(fadeOutLoader, 2500);

content/assets/js/resume.js

@@ -0,0 +1,25 @@
+/*
+RESUME
+*/
+
+// Make elements visible as the user scrolls down the page by applying a class
+window.addEventListener('scroll', function () {
+     const contents = document.querySelectorAll('.fade-in-up-section');
+
+     contents.forEach(content => {
+          const contentPosition = content.getBoundingClientRect().top;
+          const screenPosition = window.innerHeight / 1.2;
+
+          if (contentPosition < screenPosition) {
+               content.classList.add('visible');
+          }
+     });
+});
+
+// Get the name of the company from URL
+const urlParams = new URLSearchParams(window.location.search);
+
+if (urlParams.has('name')) {
+     const paramValue = urlParams.get('name');
+     document.getElementById('companyName').innerHTML = ` ${paramValue}`;
+}

content/includes/defintions.md

@@ -0,0 +1,3 @@
+<!-- List of defiintions that will appear in toptips -->
+*[data]: Data defined as raw input, which when processed becomes information. Wisdom and knowledge are higher levels of information alloyed with experience.
+*[ADB]: The Android Debug Bridge lets you communicate with your Android or wearOS device via the terminal (or console). You can install apps, push orpull files, and change settings using commands.

content/index.md

@@ -0,0 +1,44 @@
+---
+title: i'm a writer
+description: "i'm a writer..."
+hide:
+     - toc
+     - navigation
+---
+
+<link href="/src/stylesheets/_index.css" rel="stylesheet">
+<style>
+     footer {
+          display: none !important;
+     }
+</style>
+
+<div class='hero-text'>
+     <h2>hi, i'm g* and i write</h2>
+     <h4 id='hover-text'>...</h4>
+     <div class='accent-divider'></div>
+</div>
+<div class='faces'>
+     <!-- <a href='#'> -->
+          <div id='visual-hover' class='face'>
+               <img src='/src/gugulet.hu-visual-face-1276x1276.webp' >
+          </div>
+     <!-- </a>
+     <a href='#'> -->
+          <div id='technical-hover' class='face'>
+               <img src='/src/gugulet.hu-technical-face-1276x1276.webp' >
+          </div>
+     <!-- </a>
+     <a href='#'> -->
+          <div id='writing-hover' class='face'>
+               <img src='/src/gugulet.hu-writing-face-1276x1276.webp' >
+          </div>
+     <!-- </a> -->
+</div>
+
+<div id='loader'>
+     <div><img src='/src/gugulet.hu-site-logo-350x350.png'></div>
+     <script src='/src/js/loader.js'></script>
+</div>
+
+<script src='/src/js/index.js'></script>

content/overrides/main.html

@@ -0,0 +1,54 @@
+{% extends "base.html" %}
+
+{% block extrahead %}
+<meta name="robots"
+     content="nocache, noindex, noimageindex, nofollow, noarchive, nosnippet, notranslate, nositelinkssearchbox, noai, noimageai">
+{% endblock %}
+
+{% block content %}
+
+{{ super() }}
+
+<!-- Script to protect content on the website -->
+<script>
+     // Prevent right-click context menu
+     document.addEventListener('contextmenu', function (e) {
+          e.preventDefault();
+     });
+
+     // Prevent text selection
+     document.addEventListener('selectstart', function (e) {
+          e.preventDefault();
+     });
+
+     // Block Ctrl+C and other keyboard shortcuts for copying
+     document.addEventListener('keydown', function (e) {
+          if (e.ctrlKey && e.key === 'c') { // Blocks Ctrl+C
+               e.preventDefault();
+          }
+          if (e.ctrlKey && e.shiftKey && e.key === 'v') { // Blocks Ctrl+Shift+V
+               e.preventDefault();
+          }
+     });
+
+     // Additional measures for image protection
+     document.addEventListener('contextmenu', function (e) {
+          if (e.target.tagName.toLowerCase() === 'img') {
+               e.preventDefault();
+          }
+     });
+</script>
+
+<!-- Analytics script to measure the performance of the website -->
+<script>
+     window.op = window.op || function () { var n = []; return new Proxy(function () { arguments.length && n.push([].slice.call(arguments)) }, { get: function (t, r) { return "q" === r ? n : function () { n.push([r].concat([].slice.call(arguments))) } }, has: function (t, r) { return "q" === r } }) }();
+     window.op('init', {
+          clientId: '4148df94-31a3-47ee-b998-6de681efcbd5',
+          trackScreenViews: true,
+          trackOutgoingLinks: true,
+          trackAttributes: true,
+     });
+</script>
+<script src="https://analytics.gugulet.hu/op1.js" defer async></script>
+
+{% endblock %}

content/overrides/partials/footer.html

@@ -0,0 +1,8 @@
+<div class="footer">
+     <div class="menu">
+          <a href="#"><span class="footer-menu-item">technical</span></a>
+          <a href="#"><span class="footer-menu-item">visual</span></a>
+          <a href="#"><span class="footer-menu-item">writing</span></a>
+     </div>
+     <div class="version">v202506.1</div>
+</div>

content/qself/financial/assets/index.md

@@ -0,0 +1,6 @@
+---
+title: "Assets and Logistics"
+description: "An overview of the asset management and logistics features of the project."
+weight: 30
+headless: true
+---

content/qself/financial/index.md

@@ -0,0 +1,26 @@
+---
+title: "Financial"
+description: "An overview of the financial aspect of the project."
+tags:
+        - HTML
+        - JavaScript
+        - CSS
+        - Logic
+---
+
+The financial aspect of the qSelf project tracks and processes expenses, investments, income, assets, and logistics:
+
+* **Expenses:** The fundamental unit tracked is transactions. For more information see the [Transactions](transactions/index.md) page.
+* **Investment:** The investment portfolio is tracked using transaction data, with extra information, and is stored in the investment table. For more information see the [Investment](investment/index.md) page.
+* **Assets and Logistics:** Records asset purchases and monitors their value, state, and location with a logistics component. For more information see the [Assets](assets/index.md) page.
+
+## Reconciliation
+To keep financial information accurate, the reconciliation flows run on a set schedule to check that the liquid money available, investment portfolio value, asset value, and other balances correspond with the reality. This is the primary function of the [`4 Finances`](https://github.com/gugulet-hu/qself-process/tree/main/automate/4%20Finances) flow, which serves all the other financial subflows.
+
+_TBC_
+
+
+
+
+
+

content/qself/financial/investment/index.md

@@ -0,0 +1,6 @@
+---
+title: "Investment"
+description: "An overview of the investment management feature of the project."
+weight: 20
+headless: true
+---

content/qself/financial/transactions/index.md

@@ -0,0 +1,14 @@
+---
+title: "Transactions"
+description: "An overview of the root financial feature of transaction tracking."
+---
+
+
+All financial tracking starts as a transaction, which has the following structure.
+
+| Parameter | Type | Description | Required |
+
+
+The logic for collecting transactions is handled by the `4a Transactions` flow in Automate, which presents an input form, returns the data via query parameters, and enriches the data with exchange rate information, where necessary, and unit cost calculations.
+
+_TBC_

content/qself/getting-started/index.md

@@ -0,0 +1,62 @@
+---
+title: "Getting started"
+description: "Getting all the prerequisite tools and software needed to get the project going."
+---
+
+The qSelf project is made up of a number of inter-connected components:
+
+* **Logical components:** These are responsible for the logical progression of flows, moving data from screens and sensors to the database and further on to displays.
+* **Sensory components:** These components collect external data from various sensors (mostly from the smartwatch).
+* **Input and Display components:** These are responsible for receiving manually inputted data that supplements sensory data. The display components display the processed data on dashboards and reports.
+* **Analytical components:** These components take the received data and parse it into useful information.
+* **Storage and Sync components:** These components take data and store it in the SQLCipher database or in temp files for quick retrieval.
+
+Components are immutable, but the tools that make them work are replaceable and interchangeable.
+
+**Diagram: Topology of the qSelf system**
+
+![The topology of the qSelf system from a wide view.](qs-topology-3333x3333.webp "This is a Title"){width=750}
+
+## Install
+
+### 1. Install all applications and tools
+Install all applications in the toolset table. This includes CLI tools that are listed in the Termux row, and plugins for Automate.
+
+### 2. Clone the project repo
+Clone the project repo to the root of your user space on your mobile device using Termux and the following commands:
+
+```
+cd /storage/emulated/0/
+git clone git@github.com:gugulet-hu/qself-process.git
+```
+
+### 3. Import flows into Automate and displays into Kustom
+Import the `latest.flo` files in each of the directories in the **qself-process/Automate/** folder. Inside Automate, the dot menu in the top-left corner includes the option to **Import**. Import the files in the **qself-process/Kustom/wallpapers/** folder into KLWP and import the files in the **qself-process/Kustom/watchfaces/** folder into KWCH.
+
+### 4. Configure the root settings
+Configure the root settings in **qself-process/Automate/.demo-config.json** file and rename the file to **.config.json**.
+
+### 5. Start the [`1 Context`](https://github.com/gugulet-hu/qself-process/tree/main/automate/1%20Context) flow in Automate
+
+## Toolset
+
+| Component | Tool | Device |  Description | Install | Learn |
+| --- | --- | :---: | --- | --- | --- |
+| Logical | Python | [:material-laptop:](../reference/devices/index.md#laptop) | Python is a general purpose programming language used for data analysis and various scripts. | [Python](https://www.python.org/) |  [TreeHouse](https://teamtreehouse.com/tracks/beginning-python) |
+| | Automate | [:material-cellphone:](../reference/devices/index.md#mobile) | Automate is a graphical code tool to create and manage logic on the mobile device. The project also requires these Tasker plugins: [AutoWear, AutoInput](https://joaoapps.com/), [Termux:Tasker](https://github.com/termux/termux-tasker), [Sleep as Android](https://docs.sleep.urbandroid.org/services/tasker_automate.html), and [Kustom](https://docs.kustom.rocks/) (the last two apps come with their respective Automate plugins). | [Google Play](https://play.google.com/store/apps/details?id=com.llamalab.automate) | [LlamaLab](https://llamalab.com/automate/doc/index.html) |
+| Sensory | wearOS device | [:material-watch:](../reference/devices/index.md#watch) | Any wearOS compatible smartwatch. The TicWatch Pro 5 is recommended for its battery life and general ease of use. It can also be rooted quite easily, unlike Samsung devices. | [TicWatch](https://www.mobvoi.com/us/pages/ticwatchpro5) | |
+| | Android smartphone | [:material-cellphone:](../reference/devices/index.md#mobile) | The smartphone is a fallback option for certain types of sensory input, such as Steps. The Pixel series is a lean option without the junkware from other Android device manufacturers. You can overlay it with [Graphene OS](https://grapheneos.org/) to somewhat protect yourself from Google tracking and annoyances. | [Pixel](https://store.google.com/category/phones) | |
+| | Sleep as Android | [:material-cellphone:](../reference/devices/index.md#mobile) [:material-watch:](../reference/devices/index.md#watch) | This app is the most reliable sleep tracker for Android. Make sure to turn off the features that send your data to the developer. It is deeply integrated into the way the sleep track flow works. | [Google Play](https://play.google.com/store/apps/details?id=com.urbandroid.sleep) | [Docs](https://www.docs.sleep.urbandroid.org/services/automation.html) |
+| Input and Display | HTML | [:material-laptop:](../reference/devices/index.md#laptop) | HTML is required foundational knowledge to create web screens to accept manual inputs. | | |
+| | CSS | [:material-laptop:](../reference/devices/index.md#laptop) | CSS is required foundational knowledge to create web screens to accept manual inputs. Better yet, Sass to manage the complexity of some of the input screens. | | |
+| | JavaScript | [:material-laptop:](../reference/devices/index.md#laptop) | JavaScript is required foundational knowledge to create web screens to accept manual inputs. Some JS is also required for using advanced Automate techniques. | | |
+| | KLWP | [:material-cellphone:](../reference/devices/index.md#mobile) | Kustom Live Wallpaper allows you to create interactive home screens and is a pretty powerful logical engine of its own. Most of the data is piped to the home screen dashboard for easy access. | [Google Play](https://play.google.com/store/apps/details?id=org.kustom.wallpaper&hl=en&gl=US) | [Kustom](https://docs.kustom.rocks/) |
+| | KWCH | [:material-cellphone:](../reference/devices/index.md#mobile) [:material-watch:](../reference/devices/index.md#watch) | Kustom Watch Face allows you to create watch faces using the Kustom interface. Like KLWP, it is also capable of doing logical operations. | [Google Play](https://play.google.com/store/apps/details?id=org.kustom.watchface&hl=en&gl=US) | [Kustom](https://docs.kustom.rocks/) |
+| Analytical | TBA | | | | |
+| Storage and Sync | SQLCipher | [:material-cellphone:](../reference/devices/index.md#mobile) [:material-laptop:](../reference/devices/index.md#laptop) | SQLCipher is the secure version of SQLite. The commands and queries are largely the same, except for the parts to access the database. | [GitHub](https://github.com/sqlcipher/sqlcipher) | [Zetetic](https://www.zetetic.net/sqlcipher/)  |
+| | TablePlus | [:material-laptop:](../reference/devices/index.md#laptop) | GUI tool for relational databases. In this project used to manually edit the database when things go wrong. Also useful to create queries. | [TablePlus](https://tableplus.com/) | [Docs](https://docs.tableplus.com/) |
+| | Termux | [:material-cellphone:](../reference/devices/index.md#mobile) | Termux is a terminal for Android that allows you to send commands for many popular application. For this project it is used for git commands and a couple of advanced techniques. The following packages are installed using the `pkg install <package>` command: curl, gh, git, openssh, python, sqlcipher, termux-api, and termux-tools. | [GitHub](https://github.com/termux/termux-app/releases) | [Termux](https://termux.dev/en/) |
+| | iTerm2 | [:material-laptop:](../reference/devices/index.md#laptop) | iTerm is my preferred console for macOS. See the description for Termux for which CLI tools to install using the command `brew install <package>`. [Homebrew](https://brew.sh/) will also need to be installed. | [iTerm](https://iterm2.com/) | [Docs](https://iterm2.com/documentation.html) |
+| | Syncthing | [:material-cellphone:](../reference/devices/index.md#mobile) [:material-laptop:](../reference/devices/index.md#laptop) | Syncthing syncs folders and files across devices. Used to keep the project files updated between the laptop and the smartphone. | [Syncthing](https://syncthing.net/downloads/) | [Docs](https://docs.syncthing.net/) |
+
+

content/qself/health/exercise/index.md

@@ -0,0 +1 @@
+# Test