diff --git a/content/assets/css/_chapter.css b/content/assets/css/chapter.css similarity index 100% rename from content/assets/css/_chapter.css rename to content/assets/css/chapter.css diff --git a/content/assets/css/index.css b/content/assets/css/index.css index 8579aff..6f37e4a 100755 --- a/content/assets/css/index.css +++ b/content/assets/css/index.css @@ -15,102 +15,94 @@ padding: 0; position: relative; width: 100%; -} -.content ul { - align-items: center; - display: flex; - height: 1.4em; - justify-content: center; - left: 50%; - line-height: 1.4em; - list-style: none; - margin: 0 !important; - max-width: 900px; - overflow: visible; - pointer-events: none; - padding: 0; - position: absolute; - text-align: center; - top: 20px; - transform: translateX(-50%); - width: 100%; - z-index: 0; -} + .faces { + align-items: center; + flex-grow: 0; + display: flex; + justify-content: center; + min-height: 320px; + margin-top: 0; + position: relative; + width: 100%; -.content ul li { - align-items: center; - box-sizing: border-box; - display: flex; - font-size: 15vw; - inset: 0; - justify-content: center; - margin: 0 !important; - padding: 0; - pointer-events: auto; - position: absolute; - text-align: center; - white-space: nowrap; - width: 100%; -} + .slide { + border-radius: 10px; + left: 50%; + max-width: 600px; + opacity: 0; + position: absolute; + transform: translate(-50%, -50%); + top: 50%; + visibility: hidden; + width: 80%; + z-index: 1; -.content ul li:hover { - cursor: pointer; -} + img { + border-radius: 10px; + display: block; + height: auto; + width: 100%; + } + } + } -.content ul li a { - text-decoration: none !important; -} + ul { + align-items: center; + display: flex; + height: 1.4em; + justify-content: center; + left: 50%; + line-height: 1.4em; + list-style: none; + margin: 0 !important; + max-width: 900px; + overflow: visible; + pointer-events: none; + padding: 0; + position: absolute; + text-align: center; + top: 20px; + transform: translateX(-50%); + width: 100%; + z-index: 0; -.content ul li:nth-child(2) { - font-family: var(--words-title) !important; -} + li { + align-items: center; + box-sizing: border-box; + display: flex; + font-size: 15vw; + inset: 0; + justify-content: center; + margin: 0 !important; + padding: 0; + pointer-events: auto; + position: absolute; + text-align: center; + white-space: nowrap; + width: 100%; -.content ul li:nth-child(3) { - font-family: var(--visuals-title); -} + a { + text-decoration: none !important; + } -.content ul li:nth-child(4) { - font-family: var(--technical-title); -} + &:hover { + cursor: pointer; + } -.content .faces { - align-items: center; - flex-grow: 0; - display: flex; - justify-content: center; - min-height: 320px; - margin-top: 0; - position: relative; - width: 100%; -} + &:nth-child(2) { + font-family: var(--words-title); + } -.faces .slide { - border-radius: 10px; - left: 50%; - max-width: 600px; - opacity: 0; - position: absolute; - transform: translate(-50%, -50%); - top: 50%; - visibility: hidden; - width: 80%; - z-index: 1; -} + &:nth-child(3) { + font-family: var(--visuals-title); + } -.faces .slide img { - border-radius: 10px; - display: block; - height: auto; - width: 100%; -} - -footer { - background: repeating-linear-gradient(0deg, transparent, transparent 19px, rgba(75, 85, 99, 0.08) 19px, rgba(75, 85, 99, 0.08) 20px, transparent 20px, transparent 39px, rgba(75, 85, 99, 0.08) 39px, rgba(75, 85, 99, 0.08) 40px), - repeating-linear-gradient(90deg, transparent, transparent 19px, rgba(75, 85, 99, 0.08) 19px, rgba(75, 85, 99, 0.08) 20px, transparent 20px, transparent 39px, rgba(75, 85, 99, 0.08) 39px, rgba(75, 85, 99, 0.08) 40px), - radial-gradient(circle at 20px 20px, rgba(55, 65, 81, 0.12) 2px, transparent 2px), - radial-gradient(circle at 40px 40px, rgba(55, 65, 81, 0.12) 2px, transparent 2px); - font-family: var(--general-sans); + &:nth-child(4) { + font-family: var(--technical-title); + } + } + } } .hero { @@ -127,3 +119,11 @@ footer { .hidden { display: none; } + +footer { + background: repeating-linear-gradient(0deg, transparent, transparent 19px, rgba(75, 85, 99, 0.08) 19px, rgba(75, 85, 99, 0.08) 20px, transparent 20px, transparent 39px, rgba(75, 85, 99, 0.08) 39px, rgba(75, 85, 99, 0.08) 40px), + repeating-linear-gradient(90deg, transparent, transparent 19px, rgba(75, 85, 99, 0.08) 19px, rgba(75, 85, 99, 0.08) 20px, transparent 20px, transparent 39px, rgba(75, 85, 99, 0.08) 39px, rgba(75, 85, 99, 0.08) 40px), + radial-gradient(circle at 20px 20px, rgba(55, 65, 81, 0.12) 2px, transparent 2px), + radial-gradient(circle at 40px 40px, rgba(55, 65, 81, 0.12) 2px, transparent 2px); + font-family: var(--general-sans); +} diff --git a/content/assets/css/resume.css b/content/assets/css/resume.css index f576546..1c5dd3e 100755 --- a/content/assets/css/resume.css +++ b/content/assets/css/resume.css @@ -10,112 +10,44 @@ } body { - color: var(--primary-colour); + color: var(--dark-grey); font-family: var(--general-sans); -} -.page-menu { - align-items: center; - background-color: var(--background-colour); - color: var(--primary-colour); - display: flex; - flex-direction: row; - font-size: 0.6rem; - font-weight: 400; - justify-content: center; - padding: 10px; - position: sticky; - text-align: center; - top: 0; - z-index: 100; + li { + /* Remove the default styles for grids */ + border: none !important; - &>*:not(:last-child)::after { - content: " | "; - margin: 0 8px; - } -} - -.hero { - align-items: center; - background-image: url('../media/face-1276x1276.webp'); - background-position: center center; - background-repeat: no-repeat; - background-size: 50vh; - display: flex; - flex-direction: column; - height: 100vh; - justify-content: center; - text-align: center; - z-index: -5 !important; - - &::after { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: rgba(255, 255, 255, 0.95); - pointer-events: none; - } - - .title { - font-family: var(--general-serif); - font-size: 5rem; - font-variation-settings: "opsz" 8; - font-weight: 900; - } - - .metadetails { - border-bottom: 0.5px solid lightgray; - border-top: 0.5px solid lightgray; - display: flex; - flex-direction: row; - gap: 5rem; - - img { - height: 2.5rem; - } - - figcaption { - color: var(--primary-colour); - font-family: var(--general-sans); - font-size: 0.8rem; - font-style: normal; - font-weight: 400; + &:hover { + box-shadow: none !important; } } + + .twemoji { + --md-icon-size: 1.2rem !important; + vertical-align: middle !important; + } } +/*****************************/ + #experience { - color: var(--primary-colour); min-height: 80vh; - - &>div { - margin: 30px; - padding: 1.2rem; - - li { - border: none; - - &:hover { - box-shadow: none; - } - } + .cards { + padding: 1rem; h2 { - color: var(--primary-colour); + color: var(--dark-grey); font-family: var(--general-sans); font-size: 2.5rem; - margin: 0 0 -18px 0; + line-height: 1; + margin: 0; } .company { font-family: var(--general-sans); font-weight: 400; font-size: 1.2rem; - margin: 0; span { font-size: 0.7rem; @@ -127,6 +59,7 @@ body { .job-blurb { font-family: var(--general-serif); font-size: 1.2rem; + font-variation-settings: "opsz" 8; font-weight: 700; line-height: 1.5; margin-bottom: 30px; @@ -135,9 +68,11 @@ body { .job-achievements { font-family: var(--general-serif); + font-variation-settings: "opsz" 8; h5 { - color: var(--primary-colour); + color: var(--dark-grey); + cursor: pointer; font-size: 0.9rem; margin: 0; text-transform: none; @@ -168,7 +103,7 @@ body { position: relative; &::after { - background: rgba(255, 255, 255, 0.70); + background: rgba(250, 250, 250, 0.70); bottom: 0; content: ''; left: 0; @@ -181,23 +116,55 @@ body { } } -#demo { - margin: 0 2.5rem; +#hero { + align-items: center; + background-image: url('../media/face-1276x1276.webp'); + background-position: center center; + background-repeat: no-repeat; + background-size: 50vh; + display: flex; + flex-direction: column; + height: 100vh; + justify-content: center; + text-align: center; + z-index: -5; - .cards { + &::after { + background: rgba(250, 250, 250, 0.95); + bottom: 0; + content: ''; + position: absolute; + left: 0; + pointer-events: none; + right: 0; + top: 0; + } - .twemoji { - font-size: 3rem; - margin-bottom: 8px; + .title { + font-family: var(--general-serif); + font-size: 5rem; + font-variation-settings: "opsz" 8; + font-weight: 900; + } + + .metadetails { + border-bottom: 0.5px solid var(--light-grey); + border-top: 0.5px solid var(--light-grey); + display: flex; + flex-direction: row; + gap: 5rem; + margin-top: 1rem; + + figcaption { + color: var(--dark-grey); + font-family: var(--general-sans); + font-size: 0.8rem; + font-style: normal; + font-weight: 400; } - ul li { - align-items: center; - display: flex; - flex-direction: column; - font-size: 1.8rem; - height: 300px; - justify-content: center; + img { + height: 2.5rem; } } } @@ -208,45 +175,179 @@ body { .cards { ul li { - background-color: var(--tertiary-colour); - border: none; + background-color: var(--light-grey); - &:hover { - box-shadow: none; + figure { + display: flex; + align-items: center; + gap: 0.75rem; + flex-wrap: wrap; + margin: 0; + justify-content: center; + + + img { + max-width: 150px; + width: 30%; + min-width: 100px; + height: auto; + display: block; + padding: 20px; + } + + figcaption { + color: var(--dark-grey); + flex: 1 1 200px; + font-family: var(--general-sans); + font-size: 0.8rem; + font-style: normal; + margin: 0; + text-align: left; + } } } } } -.prefooter { - align-items: flex-start; - display: flex; - flex-direction: row; - gap: 2rem; - justify-content: center; - margin-top: 1.3rem; - margin-bottom: 0.5rem; - text-align: center; +#skills { + margin: 2.5rem; - div { - img { - height: 1.2rem; + .cards { + + ul li { + align-items: center; + display: flex; + flex-direction: column; + font-size: 1.8rem; + justify-content: flex-start; + padding: 1rem; + + .technical-icons { + align-items: center; + column-gap: 1.5rem; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + row-gap: 1.5rem; + + .technical { + + span { + align-items: flex-end; + display: flex; + font-size: 0.7rem; + + img, + svg { + height: 1rem; + margin-right: 5px; + max-height: 1rem; + max-width: 1rem; + object-fit: contain; + vertical-align: middle; + width: 1rem; + } + } + } + } + + .writing-types { + font-size: 0.8rem; + justify-content: center; + margin-bottom: 0.7rem; + text-align: left; + + svg { + height: 0.8rem; + } + } + + .media-tools { + figure { + display: flex; + align-items: center; + gap: 0.75rem; + flex-wrap: wrap; + margin: 0; + justify-content: center; + + + img { + max-width: 150px; + width: 20%; + min-width: 100px; + height: auto; + display: block; + padding: 20px; + } + + figcaption { + color: var(--dark-grey); + flex: 1 1 200px; + font-family: var(--general-sans); + font-size: 0.8rem; + font-style: normal; + margin: 0; + text-align: left; + } + } + } + + .ai { + grid-gap: 0.4rem; + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: repeat(2, 1fr); + margin-top: 0; + + img { + max-width: 150px; + width: 15%; + min-width: 100px; + height: auto; + display: block; + padding: 20px; + } + } } } - div:last-child { - img { - height: 1.5rem; - } + h3 { + border-bottom: 2px solid var(--dark-grey); + color: var(--dark-grey); + font-family: var(--general-serif); + font-size: 1.2rem; + font-variation-settings: "opsz" 8; + font-weight: 700; } } .faq-container { position: relative; + #faq-toggle { + &:checked { + &+.question-icon { + .icon.question { + opacity: 0; + } + + .icon.close { + opacity: 1; + } + } + + &~.faq { + opacity: 1; + visibility: visible; + } + } + } + .faq { - background: var(--background-colour); - border: 2px solid var(--primary-colour); + background-color: var(--neutral-grey); + border: 2px solid var(--dark-grey); border-radius: 5px; bottom: 50px; opacity: 0; @@ -255,31 +356,24 @@ body { right: 20px; transition: opacity 0.3s, visibility 0.3s; visibility: hidden; - width: 300px; + width: 400px; z-index: 999; h3 { - color: var(--primary-colour); + color: var(--dark-grey); font-family: var(--general-serif); + font-size: 1.2rem; + font-variation-settings: "opsz" 8; } - } - #faq-toggle:checked+.question-icon .icon.question { - opacity: 0; - } - - #faq-toggle:checked+.question-icon .icon.close { - opacity: 1; - } - - #faq-toggle:checked~.faq { - opacity: 1; - visibility: visible; + p { + font-size: 1rem; + } } .question-icon { align-items: center; - bottom: 20px; + bottom: 30px; cursor: pointer; display: flex; justify-content: center; @@ -302,12 +396,143 @@ body { opacity: 0; } } + + .visually-hidden { + height: 1px; + left: -9999px; + overflow: hidden; + position: absolute; + width: 1px; + } } -.visually-hidden { - height: 1px; - left: -9999px; - overflow: hidden; - position: absolute; - width: 1px; +.modal-container { + align-items: center; + background-color: rgba(250, 250, 250, 0.9); + display: none; + height: 100%; + justify-content: center; + position: fixed; + left: 0; + top: 0; + width: 100%; + z-index: 999; + + &.is-visible { + display: flex; + } + + .modal { + background-color: var(--neutral-grey); + border: 2px solid var(--dark-grey); + border-radius: 5px; + height: 80vh; + max-height: 1200px; + max-width: 1200px; + overflow: auto; + position: relative; + transition: opacity 0.3s, visibility 0.3s; + width: 80vw; + z-index: 999; + + .body-image { + border: 1px solid var(--light-grey); + margin: 0 1rem; + width: 80%; + } + + button { + background-color: var(--light-grey); + color: var(--dark-grey); + cursor: pointer; + border-radius: 5px; + font-size: 0.8rem; + font-weight: 700; + margin-bottom: 1rem; + margin-left: 1rem; + padding: 0.5rem; + } + + h5 { + color: var(--dark-grey); + font-size: 0.8rem; + font-weight: 900; + margin-bottom: 0; + } + + ul { + list-style-type: square; + + li { + font-size: 1rem; + ; + } + } + + p { + margin-top: 0; + } + + h5, + ul, + p { + padding: 0 1rem; + } + } + + .close-icon { + position: absolute; + right: 5vw; + top: 5vh; + + svg { + height: 1.8rem; + max-height: none; + width: 1.8rem; + } + } +} + + +.prefooter { + align-items: flex-start; + display: flex; + flex-direction: row; + gap: 2rem; + justify-content: center; + margin-top: 1.3rem; + margin-bottom: 0.5rem; + text-align: center; + + div { + img { + height: 1.2rem; + } + + &:last-child { + img { + height: 1.5rem; + } + } + } +} + +.section-menu { + align-items: center; + background-color: var(--neutral-grey); + display: flex; + flex-direction: row; + font-size: 0.7rem; + font-weight: 400; + justify-content: center; + padding: 10px; + position: sticky; + text-align: center; + top: 0; + z-index: 100; + + &>*:not(:last-child)::after { + content: " | "; + margin: 0 8px; + } } diff --git a/content/assets/css/theme.css b/content/assets/css/theme.css index 9090f85..f3d84cf 100755 --- a/content/assets/css/theme.css +++ b/content/assets/css/theme.css @@ -7,22 +7,23 @@ /* Colour variables */ :root { - --background-colour: #FFF; - --primary-colour: #323036; - --quarternary-colour: #FAF9F6; - --secondary-colour: #818589; - --tertiary-colour: #E6E6E6; - --transparent: transparent; + --background-color: #FAFAFA; + --dark-grey: #343434; + --darker-grey: #666666; + --light-grey: #C9C9C9; + --medium-grey: #979797; + --neutral-grey: #FAFAFA; } /* Adjust Zensical colours */ [data-md-color-accent=custom] { - --md-default-bg-color: var(--background-colour); - --md-footer-bg-color: var(--background-colour); - --md-primary-bg-color: var(--background-colour); - --md-primary-fg-color: var(--primary-colour); - --md-primary-fg-color--dark: var(--primary-colour); - --md-primary-fg-color--light: var(--tertiary-colour); + --md-accent-bg-color: var(--neutral-grey); + --md-default-bg-color: var(--neutral-grey); + --md-footer-bg-color: var(--neutral-grey); + --md-primary-bg-color: var(--neutral-grey); + --md-primary-fg-color: var(--dark-grey); + --md-primary-fg-color--dark: var(--dark-grey); + --md-primary-fg-color--light: var(--light-grey); } /***************************** @@ -129,13 +130,13 @@ a, figcaption { - color: var(--secondary-colour); + color: var(--medium-grey); max-width: none; text-decoration: none; } a:hover { - color: var(--teriary-color); + color: var(--medium-grey); } h1, @@ -144,21 +145,28 @@ h4, h5, h6 { - color: var(--secondary-colour); + color: var(--darker-grey); font-weight: bold; } p { - color: var(--primary-colour); + color: var(--dark-grey); } } +/* Sizes */ + +p { + font-size: 1rem; +} + /***************************** * RULES *****************************/ body { align-items: center; + background-color: var(--neutral-grey); display: flex; justify-content: center; min-height: 100vh; diff --git a/content/assets/media/affinity-logo-160x160.png b/content/assets/media/affinity-logo-160x160.png new file mode 100755 index 0000000..2260328 Binary files /dev/null and b/content/assets/media/affinity-logo-160x160.png differ diff --git a/content/assets/media/berlin-logo-1000x1000.png b/content/assets/media/berlin-logo-1000x1000.png index 955d9c2..2d91ffd 100755 Binary files a/content/assets/media/berlin-logo-1000x1000.png and b/content/assets/media/berlin-logo-1000x1000.png differ diff --git a/content/assets/media/berlin-writers-workshop-1516x1516.webp b/content/assets/media/berlin-writers-workshop-1516x1516.webp new file mode 100755 index 0000000..6ca1753 Binary files /dev/null and b/content/assets/media/berlin-writers-workshop-1516x1516.webp differ diff --git a/content/assets/media/coursera-logo-600x600.png b/content/assets/media/coursera-logo-600x600.png new file mode 100755 index 0000000..68bec67 Binary files /dev/null and b/content/assets/media/coursera-logo-600x600.png differ diff --git a/content/assets/media/davinciresolve-logo-640x640.png b/content/assets/media/davinciresolve-logo-640x640.png new file mode 100755 index 0000000..e7c3e27 Binary files /dev/null and b/content/assets/media/davinciresolve-logo-640x640.png differ diff --git a/content/assets/media/doc-detective-logo-200x200.png b/content/assets/media/doc-detective-logo-200x200.png new file mode 100755 index 0000000..5732380 Binary files /dev/null and b/content/assets/media/doc-detective-logo-200x200.png differ diff --git a/content/assets/media/face-1276x1276.png b/content/assets/media/face-1276x1276.png deleted file mode 100755 index e5aa6f7..0000000 Binary files a/content/assets/media/face-1276x1276.png and /dev/null differ diff --git a/content/assets/media/face-favicon-512x512.png b/content/assets/media/face-favicon-512x512.png new file mode 100755 index 0000000..c4bd9fe Binary files /dev/null and b/content/assets/media/face-favicon-512x512.png differ diff --git a/content/assets/media/krita-logo-640x640.png b/content/assets/media/krita-logo-640x640.png new file mode 100755 index 0000000..7a338b4 Binary files /dev/null and b/content/assets/media/krita-logo-640x640.png differ diff --git a/content/assets/media/mermaid-logo-200x200.png b/content/assets/media/mermaid-logo-200x200.png new file mode 100755 index 0000000..b5a3a45 Binary files /dev/null and b/content/assets/media/mermaid-logo-200x200.png differ diff --git a/content/assets/media/modelcontextprotocol-logo-640x640.png b/content/assets/media/modelcontextprotocol-logo-640x640.png new file mode 100755 index 0000000..a1769b1 Binary files /dev/null and b/content/assets/media/modelcontextprotocol-logo-640x640.png differ diff --git a/content/assets/media/n8n-logo-640x640.png b/content/assets/media/n8n-logo-640x640.png new file mode 100755 index 0000000..7eb3fb9 Binary files /dev/null and b/content/assets/media/n8n-logo-640x640.png differ diff --git a/content/assets/media/ollama-logo-640x640.png b/content/assets/media/ollama-logo-640x640.png new file mode 100755 index 0000000..2eeea58 Binary files /dev/null and b/content/assets/media/ollama-logo-640x640.png differ diff --git a/content/assets/media/spread-print-layout-1596x1872.png b/content/assets/media/spread-print-layout-1596x1872.png deleted file mode 100755 index 8bb8625..0000000 Binary files a/content/assets/media/spread-print-layout-1596x1872.png and /dev/null differ diff --git a/content/assets/media/treehouse-logo-178x200.webp b/content/assets/media/treehouse-logo-178x200.webp new file mode 100755 index 0000000..0a7d37f Binary files /dev/null and b/content/assets/media/treehouse-logo-178x200.webp differ diff --git a/content/assets/media/uct-logo-250x306.png b/content/assets/media/uct-logo-250x306.png new file mode 100755 index 0000000..a815f4b Binary files /dev/null and b/content/assets/media/uct-logo-250x306.png differ diff --git a/content/assets/media/zensical-logo-200x200.png b/content/assets/media/zensical-logo-200x200.png new file mode 100755 index 0000000..c43e92c Binary files /dev/null and b/content/assets/media/zensical-logo-200x200.png differ diff --git a/content/overrides/chapter.html b/content/overrides/chapter.html index 4b395ef..f373a4c 100755 --- a/content/overrides/chapter.html +++ b/content/overrides/chapter.html @@ -5,7 +5,7 @@ {{ super() }} - + {% endblock %} diff --git a/content/overrides/main.html b/content/overrides/main.html index 294338c..5712aa1 100755 --- a/content/overrides/main.html +++ b/content/overrides/main.html @@ -1,5 +1,9 @@ {% extends "base.html" %} +{% block extrahead %} + +{% endblock %} + {% block site_meta %} diff --git a/content/resume.md b/content/resume.md index 12e2abf..16ac285 100755 --- a/content/resume.md +++ b/content/resume.md @@ -13,13 +13,13 @@ title: Resume -