-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+
diff --git a/docs/src/fonts/open-sans/OpenSans-ExtraBold.ttf b/docs/src/fonts/open-sans/OpenSans-ExtraBold.ttf
new file mode 100644
index 0000000..2b4ba63
Binary files /dev/null and b/docs/src/fonts/open-sans/OpenSans-ExtraBold.ttf differ
diff --git a/docs/src/fonts/open-sans/OpenSans-Medium.ttf b/docs/src/fonts/open-sans/OpenSans-Medium.ttf
new file mode 100644
index 0000000..117ce67
Binary files /dev/null and b/docs/src/fonts/open-sans/OpenSans-Medium.ttf differ
diff --git a/docs/src/js/faces-intro.js b/docs/src/js/faces-intro.js
deleted file mode 100644
index 0146500..0000000
--- a/docs/src/js/faces-intro.js
+++ /dev/null
@@ -1,16 +0,0 @@
-// ---------------------
-// 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);
-});
diff --git a/docs/src/js/hover-text.js b/docs/src/js/index.js
similarity index 61%
rename from docs/src/js/hover-text.js
rename to docs/src/js/index.js
index f858cd3..52d741f 100644
--- a/docs/src/js/hover-text.js
+++ b/docs/src/js/index.js
@@ -20,3 +20,20 @@ function setHoverText(elementId, text) {
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);
+});
diff --git a/docs/src/js/page-loader.js b/docs/src/js/loader.js
similarity index 100%
rename from docs/src/js/page-loader.js
rename to docs/src/js/loader.js
diff --git a/docs/src/stylesheets/_colours.css b/docs/src/stylesheets/_colours.css
index f779c24..518b229 100644
--- a/docs/src/stylesheets/_colours.css
+++ b/docs/src/stylesheets/_colours.css
@@ -50,6 +50,6 @@
}
a:hover {
- color: var(--primary-color);
+ color: var(--secondary-color);
}
}
diff --git a/docs/src/stylesheets/_fonts.css b/docs/src/stylesheets/_fonts.css
index 972a454..fe77cb5 100644
--- a/docs/src/stylesheets/_fonts.css
+++ b/docs/src/stylesheets/_fonts.css
@@ -141,12 +141,27 @@
src: url('../fonts/dm-mono/DMMono-LightItalic.ttf');
}
+@font-face {
+ font-family: 'Open Sans';
+ font-weight: medium;
+ font-style: normal;
+ src: url('../fonts/open-sans/OpenSans-Medium.ttf');
+}
+
+@font-face {
+ font-family: 'DM Serif';
+ font-weight: bolder;
+ font-style: italic;
+ src: url('../fonts/open-sans/OpenSans-ExtraBold.ttf');
+}
+
/* Variables */
:root {
--primary-font: 'Libre Baskerville', serif;
--secondary-font: 'Lato', sans-serif;
--tertiary-font: 'DM Mono', monospace;
+ --number-font: 'Open Sans', sans-serif;
}
/* Typeset */
@@ -163,7 +178,7 @@
h4,
h5,
h6 {
- font-weight: bold;
+ font-weight: 900;
}
}
diff --git a/docs/src/stylesheets/_index.css b/docs/src/stylesheets/_index.css
index 56ac5ff..f6b4cd1 100644
--- a/docs/src/stylesheets/_index.css
+++ b/docs/src/stylesheets/_index.css
@@ -12,6 +12,7 @@ body,
margin: 0;
padding: 0;
box-sizing: border-box;
+ max-width: none;
}
article,
@@ -24,7 +25,6 @@ article,
header,
nav,
-footer,
.md-content .md-typeset h1 {
display: none !important;
}
diff --git a/docs/src/stylesheets/_size.css b/docs/src/stylesheets/_size.css
index e0315b8..3c765bd 100644
--- a/docs/src/stylesheets/_size.css
+++ b/docs/src/stylesheets/_size.css
@@ -17,14 +17,11 @@
--third-height: 33.3vh;
--quarter-height: 25vh;
--fifth-height: 20vh;
- --three-column: repeat(3, 1fr);
- --two-column: repeat(2, 1fr);
--horizontal-spacing: 0.3vw;
--vertical-spacing: 0.45vh;
}
/* Font sizes */
-
.md-typeset {
p {
font-size: max(var(--text-variable-size), var(--text-min-size));
@@ -68,17 +65,7 @@
}
/* Default padding and margins */
-
div {
margin: calc(var(--vertical-spacing) * 2) 0;
padding: calc(var(--vertical-spacing) * 2) 0;
-
- &.no-spacing {
- margin: var(--zero);
- padding: var(--zero);
- }
-}
-
-span {
- margin-left: var(--horizontal-spacing);
}
diff --git a/docs/src/stylesheets/g.css b/docs/src/stylesheets/g.css
index 169d302..3d58089 100644
--- a/docs/src/stylesheets/g.css
+++ b/docs/src/stylesheets/g.css
@@ -70,17 +70,21 @@ article.md-content__inner.md-typeset:after {
blink-caret 0.75s step-end infinite;
}
- h4#hover-text {
+ h4 {
font-weight: normal;
- opacity: 0;
- transition: opacity 0.5s ease-out;
- &.fade-in {
- opacity: 1;
- }
+ hover-text {
- &.leave {
opacity: 0;
+ transition: opacity 0.5s ease-out;
+
+ &.fade-in {
+ opacity: 1;
+ }
+
+ &.leave {
+ opacity: 0;
+ }
}
}
@@ -162,11 +166,7 @@ article.md-content__inner.md-typeset:after {
}
}
-@media (max-width: 768px) {
- .faces {
- flex-direction: column;
- }
-}
+
/*****************************
* PAGE LOADER
@@ -246,84 +246,183 @@ article.md-content__inner.md-typeset:after {
animation: fadeOut 1s ease-out forwards;
}
+/*****************************
+* RESUMÉ
+*****************************/
-/* */
-
-.resume-icon-meta {
- font-size: max(1vw, 8px);
+/* 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: 0.5rem;
-}
+ gap: 25px;
+ width: fit-content;
+ margin: 0;
-.resume-icon-meta>div,
-.resume-icon-meta>a {
- margin-right: 2em;
- display: flex;
- align-items: center;
- font-family: var(--secondary-font);
-}
+ & .md-typeset .twemoji {
+ height: max(calc(var(--text-variable-size) + 5px), var(--text-min-size));
+ }
-svg {
- width: 30px;
- height: auto;
- margin-right: 0.3rem;
-}
+ & svg {
+ margin-right: 3px;
+ }
-span {
- font-size: 1rem;
-}
-
-.annotate {
- color: transparent;
- font-size: small;
+ a:hover {
+ color: var(--secondary-colour);
+ }
}
-.md-annotation:not([hidden]) {
- line-height: inherit;
-}
-
-
-.md-tooltip__inner {
- font-family: var(--secondary-font);
-}
-
-.logo-and-title {
- display: inline-block;
-}
-
-.logo-and-title img {
- height: max(12px, 0.5vh);
- margin-right: 10px;
-}
-
-.logo-and-title h4 {
- display: inline-block;
- font-family: var(--secondary-font);
- margin-right: 5px;
- font-size: max(16px, inherit);
-}
-
+/* Career timeline */
.tabbed-labels {
- font-family: var(--secondary-font);
-}
+ font-family: var(--number-font);
+ font-weight: 900;
+ margin-bottom: 0;
-.md-typeset .tabbed-labels>label {
- font-size: max(1.7vw, 8px);
-}
+ 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: 3vw;
+ }
+
+ >label:nth-child(2) {
+ margin-left: 18vw;
+ }
+
+ >label:nth-child(3) {
+ margin-left: 12vw;
+ }
+
+ >label:nth-child(4) {
+ margin-left: 21vw;
+ }
+
+ >label:nth-child(5) {
+ margin-left: 3vw;
+ }
+}
.tabbed-content {
background-color: #FAF9F6;
+ margin-top: 0;
}
div.tabbed-block {
- padding: 3em;
+ 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-size: max(9px, 0.8em);
+ 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) + 5px), calc(var(--text-min-size) + 2px));
+ color: var(--primary-colour);
+ text-transform: uppercase;
+ margin-bottom: 8px;
+ }
+
+ p {
+ font-size: max(calc(var(--text-variable-size) + 3px), var(--text-min-size));
+ }
+ }
+ }
+}
+
+p.blurb {
+ font-size: max(calc(var(--text-variable-size) + 3px), var(--text-min-size));
+ margin-top: 25px;
+}
+
+/*****************************
+* PORTFOLIO
+*****************************/
+
+.two-column {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ max-width: 1500px;
+ padding: 20px 20px 20px 0;
+ width: 100%;
+ margin: 30px auto;
+ border-bottom: 1px solid var(--secondary-colour);
+
+ .column {
+ justify-self: center;
+ padding: 20px;
+ text-align: left;
+
+ .content {
+ h6 {
+ font-size: max(calc(var(--text-variable-size) + 5px), calc(var(--text-min-size) + 2px));
+ color: var(--primary-colour);
+ text-transform: uppercase;
+ margin-bottom: 8px;
+ }
+
+ p {
+ font-size: max(calc(var(--text-variable-size) + 3px), var(--text-min-size));
+ }
+ }
+ }
+}
+
+/*****************************
+* STATUS
+*****************************/
+
div.status-green {
background-color: #007a5a;
color: var(--background-colour);
@@ -336,156 +435,80 @@ div.status-green {
width: fit-content;
margin: 0;
letter-spacing: 0.3em;
+ margin-bottom: 15px;
}
-.tabbed-labels>label:nth-child(1) {
- margin-left: 3vw;
+/*****************************
+* TOOLTIP
+*****************************/
+
+.md-annotation__index {
+ overflow: inherit;
+ vertical-align: inherit;
}
-.tabbed-labels>label:nth-child(2) {
- margin-left: 18vw;
+.md-tooltip {
+ box-shadow: none;
+ border: 0.5px solid var(--secondary-colour);
+ padding: 3px;
+ margin: 0;
}
-.tabbed-labels>label:nth-child(3) {
- margin-left: 12vw;
+.md-tooltip__inner {
+ font-family: var(--secondary-font);
+ font-size: 0.8em;
+ padding-top: 0;
+ padding-bottom: 0;
}
-.tabbed-labels>label:nth-child(4) {
- margin-left: 21vw;
-}
+/*****************************
+* FOOTER
+*****************************/
-.tabbed-labels>label:nth-child(5) {
- margin-left: 3vw;
-}
-
-span.md-annotation__index {
- font-size: inherit;
-}
-
-
-div.tags {
- font-size: max(9px, 0.8em);
- font-style: italic;
- color: var(--tertiary-colour);
-}
-
-.grid-3col-container {
- display: grid;
- grid-template-columns: repeat(3, 1fr);
- max-width: 1500px;
- padding: 20px 20px 20px 0;
- width: 100vw;
-}
-
-/* Center content within columns */
-.grid-3col-item {
- justify-self: center;
- min-height: 150px;
- padding: 20px;
- text-align: left;
-}
-
-.grid-3col-item:nth-child(1) {
- padding-left: 0;
-}
-
-.grid-3col-item:nth-child(2) {
- border-left: 1px solid var(--secondary-colour);
- border-right: 1px solid var(--secondary-colour);
-}
-
-/* Responsive design */
-@media (max-width: 768px) {
- .grid-3col-container {
- grid-template-columns: 1fr;
- }
-
- .grid-3col-item:nth-child(1) {
- padding-left: 20px;
- }
-
- .grid-3col-item:nth-child(2) {
- border: none;
- }
-}
-
-/* Optional: Add some styling to the content */
-.grid-3col-content {
- font-size: 1.2em;
- margin-top: 10px;
-}
-
-p.blurb {
- margin: 20px 0;
- font-size: 1.5em;
-}
-
-div.resume-footer {
+div.footer {
margin: 30px 0 10px 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));
+ }
}
-.version {
- transform: rotate(180deg);
- font-size: 8px;
- margin-left: 20px;
- writing-mode: vertical-rl;
- font-family: var(--secondary-font);
-}
-
-.resume-footer-menu {
- display: flex;
- justify-content: center;
- gap: 3em;
- color: var(--primary-colour);
- margin-left: 2em;
-}
-
-
-.resume-footer-menu .technical {}
-
-span.visual {
- text-decoration: none;
- transition: all 0.3s ease;
-}
-
-
-
-span.visual:hover {
- text-decoration: underline;
- text-underline-offset: 3px;
- text-decoration-thickness: 3px;
- text-decoration-color: var(--secondary-colour);
- transition: text-decoration 0.3s ease;
-}
-
-.portfolio>.grid-3col-container {
- margin: 30px auto;
- border-bottom: 1px solid var(--secondary-colour);
- grid-template-columns: repeat(2, 1fr);
- max-width: 1500px;
- padding: 20px 20px 20px 0;
- width: 100vw;
-}
-
-.portfolio>.grid-3col-item>.grid-3col-content {
- display: flex;
- justify-content: center;
- align-items: center;
- min-height: fit-content;
- gap: 1rem;
-}
-
-.portfolio .grid-3col-item:nth-child(2) {
- border: none;
-}
-
-.portfolio h4 {
- font-size: 3em;
- color: var(--secondary-colour);
- /* text-transform: uppercase; */
- font-family: var(--secondary-font);
- text-align: center;
+/*****************************
+* 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;
+ }
+ }
+
}
diff --git a/docs/visual.md b/docs/visual.md
index e69de29..1698832 100644
--- a/docs/visual.md
+++ b/docs/visual.md
@@ -0,0 +1 @@
+:octicons-terminal-16: