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}`;
+}