diff --git a/docs/resume.md b/docs/resume.md index 02a8d51..b080b0b 100644 --- a/docs/resume.md +++ b/docs/resume.md @@ -15,7 +15,7 @@ hide:
-

hey, i'm gugulethu

+

hey, i'm gugulethu

and i'm a pen for hire

@@ -26,7 +26,7 @@ hide: 15 years(1)
  1. Content Management: 8 years
    Copywriting: 2 years
    Technical Writing: 5 years
- Languages(1)
  1. English: Fluent (spoken/written)
    German: B1-level (spoken)
    isiZulu: Fluent (spoken/written)
    Xhosa: Fluent (spoken/written)
    Afrikaans: Basic (spoken)
    French: Basic (spoken)
+ Languages(1)
  1. English: Fluent (spoken/written)
    German: B1 (spoken)
    isiZulu: Fluent (spoken/written)
    Xhosa: Fluent (spoken/written)
    Afrikaans: Basic (spoken)
    French: Basic (spoken)
@@ -53,19 +53,87 @@ body {
- - - - + + + +
- 2024 - - - + + + +
+
+

Copywriting

+
+
The Jupiter Drawing Room
(1)
  1. The Jupiter Drawing Room is an advertising agency that serviced clients across South Africa and Namibia.
+
+
marketing, advertising, print, radio, television, online, established, private
+

I worked on brands such as Windhoek Beer, Hyundai, Vitaminwater, Sanlam (financial services), Lucky Star (food), and Club Mykonos (accommodation) in print, radio, online, and television. Campaigns where I was the Copywriter have won Gold, Silver, and Bronze Loeries; a Silver Cannes Lion; and a Bronze Clio.

+
+
+

Communications Specialist

+
+
Allan Gray
(1)
  1. Allan Gray Investment Management is one of the largest asset managers in Africa and operates in South Africa, Namibia, Kenya, Nigeria, Botswana, and other countries.
+
+
financial services, investment, unit trusts (mutual funds), established, private
+

I created and edited investment content for radio, print, and online; worked in public relations to prepare executives for inrterviews; managed the creation of webinars for outreach to advisers and other creative projects.

+
+
+

Content Manager

+
+
Yoco
(1)
  1. Yoco is the largest payments processor for small- and medium-businesses in South Africa.
+
+
financial services, payments, hardware, scale-up, series b
+

Built a content hub from its foundations - including building a team of freelance writers across the country to supply the content. I was involved in developing content for content marketing campaigns and multimedia stories about merchants.

+
+
+

Senior Technical Writer

+
+
Mambu
(1)
  1. Mambu is a SaaS banking back-end that provides services to banks such as N26 and Solaris.
+
+
financial services, banking, saas, scale-up, series e
+
+
+
+
Promoted to team lead
+

I was promoted to team lead to lead a team of two other technical writers. This shifted my role into more managerial tasks on top of working on documentation.

+
+
+
+
+
Maintained legacy API Reference
+

The API References included old documentation that needed to maintenance for clients that had not yet migrated to the latest versions of the REST API.

+
+
+
+
+
Documented integrations and CLI
+

Documented integrations with services like nCino and Wise, and documented the Mambu Process Orchestrator - which managed these connections. Also documented the Mambu CLI for external engineers to connect to the back-end.

+
+
+
+
+
+ OpenAPI Specification +
+
+ Hugo +
+
+ Shell +
+
+ JavaScript +
+
+ TypeScript +
+
+
Current

Documentation Engineer

@@ -123,74 +191,6 @@ body {
-
-

Senior Technical Writer

-
-
Mambu
(1)
  1. Mambu is a SaaS banking back-end that provides services to banks such as N26 and Solaris.
-
-
financial services, banking, saas, scale-up, series e
-
-
-
-
Promoted to team lead
-

I was promoted to team lead to lead a team of two other technical writers. This shifted my role into more managerial tasks on top of working on documentation.

-
-
-
-
-
Maintained legacy API Reference
-

The API References included old documentation that needed to maintenance for clients that had not yet migrated to the latest versions of the REST API.

-
-
-
-
-
Documented integrations and CLI
-

Documented integrations with services like nCino and Wise, and documented the Mambu Process Orchestrator - which managed these connections. Also documented the Mambu CLI for external engineers to connect to the back-end.

-
-
-
-
-
- OpenAPI Specification -
-
- Hugo -
-
- Shell -
-
- JavaScript -
-
- TypeScript -
-
-
-
-

Content Manager

-
-
Yoco
(1)
  1. Yoco is the largest payments processor for small- and medium-businesses in South Africa.
-
-
financial services, payments, hardware, scale-up, series b
-

Built a content hub from its foundations - including building a team of freelance writers across the country to supply the content. I was involved in developing content for content marketing campaigns and multimedia stories about merchants.

-
-
-

Communications Specialist

-
-
Allan Gray
(1)
  1. Allan Gray Investment Management is one of the largest asset managers in Africa and operates in South Africa, Namibia, Kenya, Nigeria, Botswana, and other countries.
-
-
financial services, investment, unit trusts (mutual funds), established, private
-

I created and edited investment content for radio, print, and online; worked in public relations to prepare executives for inrterviews; managed the creation of webinars for outreach to advisers and other creative projects.

-
-
-

Copywriting

-
-
The Jupiter Drawing Room
(1)
  1. The Jupiter Drawing Room is an advertising agency that serviced clients across South Africa and Namibia.
-
-
marketing, advertising, print, radio, television, online, established, private
-

I worked on brands such as Windhoek Beer, Hyundai, Vitaminwater, Sanlam (financial services), Lucky Star (food), and Club Mykonos (accommodation) in print, radio, online, and television. Campaigns where I was the Copywriter have won Gold, Silver, and Bronze Loeries; a Silver Cannes Lion; and a Bronze Clio.

-
@@ -308,16 +290,16 @@ body {

Technical

As a one-man technical writing department, my technical skills are important to maintaining Documentation Operations (DocOps) and building infrastructure. I create, service, and maintain all the technical aspects of documentation.

- Web development
html, js, css, sass, python, static site generators, node.js, yaml, appsmith
+ Web development
html, javascript, css, sass, python, static site generators, node.js, yaml, appsmith
DocOps and automation
github workflows, vale linting, shell scripting, node red
- Reading and writing code
js, python, json, xpath, yaml, openapi spec, graphql, markdown
+ Reading and writing code
javascript, python, json, xpath, yaml, openapi spec, graphql, markdown
- Machine learning
ollama, deepseek, qwen, llama, openai, anthropic, agents, chatbots, rag, image generation, comfyui, openweb-ui
+ Machine learning
ollama, deepseek, qwen, llama, agents, chatbots, comfyui, openweb-ui
@@ -369,7 +351,11 @@ body {
-
Contact me
 + +
+ +
+
diff --git a/docs/src/fonts/dm-mono/DMMono-Italic.ttf b/docs/src/fonts/dm-mono/DMMono-Italic.ttf deleted file mode 100644 index d7045a1..0000000 Binary files a/docs/src/fonts/dm-mono/DMMono-Italic.ttf and /dev/null differ diff --git a/docs/src/fonts/dm-mono/DMMono-Italic.woff2 b/docs/src/fonts/dm-mono/DMMono-Italic.woff2 new file mode 100644 index 0000000..ffdaf51 Binary files /dev/null and b/docs/src/fonts/dm-mono/DMMono-Italic.woff2 differ diff --git a/docs/src/fonts/dm-mono/DMMono-Light.ttf b/docs/src/fonts/dm-mono/DMMono-Light.ttf deleted file mode 100644 index 19d28f0..0000000 Binary files a/docs/src/fonts/dm-mono/DMMono-Light.ttf and /dev/null differ diff --git a/docs/src/fonts/dm-mono/DMMono-Light.woff2 b/docs/src/fonts/dm-mono/DMMono-Light.woff2 new file mode 100644 index 0000000..b03a6d1 Binary files /dev/null and b/docs/src/fonts/dm-mono/DMMono-Light.woff2 differ diff --git a/docs/src/fonts/dm-mono/DMMono-LightItalic.ttf b/docs/src/fonts/dm-mono/DMMono-LightItalic.ttf deleted file mode 100644 index 00192a9..0000000 Binary files a/docs/src/fonts/dm-mono/DMMono-LightItalic.ttf and /dev/null differ diff --git a/docs/src/fonts/dm-mono/DMMono-LightItalic.woff2 b/docs/src/fonts/dm-mono/DMMono-LightItalic.woff2 new file mode 100644 index 0000000..9b3580b Binary files /dev/null and b/docs/src/fonts/dm-mono/DMMono-LightItalic.woff2 differ diff --git a/docs/src/fonts/dm-mono/DMMono-Medium.ttf b/docs/src/fonts/dm-mono/DMMono-Medium.ttf deleted file mode 100644 index 3e7a763..0000000 Binary files a/docs/src/fonts/dm-mono/DMMono-Medium.ttf and /dev/null differ diff --git a/docs/src/fonts/dm-mono/DMMono-Medium.woff2 b/docs/src/fonts/dm-mono/DMMono-Medium.woff2 new file mode 100644 index 0000000..fccf3a0 Binary files /dev/null and b/docs/src/fonts/dm-mono/DMMono-Medium.woff2 differ diff --git a/docs/src/fonts/dm-mono/DMMono-MediumItalic.ttf b/docs/src/fonts/dm-mono/DMMono-MediumItalic.ttf deleted file mode 100644 index 369a4c3..0000000 Binary files a/docs/src/fonts/dm-mono/DMMono-MediumItalic.ttf and /dev/null differ diff --git a/docs/src/fonts/dm-mono/DMMono-MediumItalic.woff2 b/docs/src/fonts/dm-mono/DMMono-MediumItalic.woff2 new file mode 100644 index 0000000..e94a24f Binary files /dev/null and b/docs/src/fonts/dm-mono/DMMono-MediumItalic.woff2 differ diff --git a/docs/src/fonts/dm-mono/DMMono-Regular.ttf b/docs/src/fonts/dm-mono/DMMono-Regular.ttf deleted file mode 100644 index 1cdda91..0000000 Binary files a/docs/src/fonts/dm-mono/DMMono-Regular.ttf and /dev/null differ diff --git a/docs/src/fonts/dm-mono/DMMono-Regular.woff2 b/docs/src/fonts/dm-mono/DMMono-Regular.woff2 new file mode 100644 index 0000000..f1e1449 Binary files /dev/null and b/docs/src/fonts/dm-mono/DMMono-Regular.woff2 differ diff --git a/docs/src/fonts/lato/Lato-Bold.ttf b/docs/src/fonts/lato/Lato-Bold.ttf deleted file mode 100644 index 016068b..0000000 Binary files a/docs/src/fonts/lato/Lato-Bold.ttf and /dev/null differ diff --git a/docs/src/fonts/lato/Lato-Bold.woff2 b/docs/src/fonts/lato/Lato-Bold.woff2 new file mode 100644 index 0000000..343d4fb Binary files /dev/null and b/docs/src/fonts/lato/Lato-Bold.woff2 differ diff --git a/docs/src/fonts/lato/Lato-BoldItalic.ttf b/docs/src/fonts/lato/Lato-BoldItalic.ttf deleted file mode 100644 index a05d503..0000000 Binary files a/docs/src/fonts/lato/Lato-BoldItalic.ttf and /dev/null differ diff --git a/docs/src/fonts/lato/Lato-BoldItalic.woff2 b/docs/src/fonts/lato/Lato-BoldItalic.woff2 new file mode 100644 index 0000000..56aa2ec Binary files /dev/null and b/docs/src/fonts/lato/Lato-BoldItalic.woff2 differ diff --git a/docs/src/fonts/lato/Lato-Italic.ttf b/docs/src/fonts/lato/Lato-Italic.ttf deleted file mode 100644 index 0d0f69e..0000000 Binary files a/docs/src/fonts/lato/Lato-Italic.ttf and /dev/null differ diff --git a/docs/src/fonts/lato/Lato-Italic.woff2 b/docs/src/fonts/lato/Lato-Italic.woff2 new file mode 100644 index 0000000..ed3302e Binary files /dev/null and b/docs/src/fonts/lato/Lato-Italic.woff2 differ diff --git a/docs/src/fonts/lato/Lato-Regular.ttf b/docs/src/fonts/lato/Lato-Regular.ttf deleted file mode 100644 index bb2e887..0000000 Binary files a/docs/src/fonts/lato/Lato-Regular.ttf and /dev/null differ diff --git a/docs/src/fonts/lato/Lato-Regular.woff2 b/docs/src/fonts/lato/Lato-Regular.woff2 new file mode 100644 index 0000000..fc15998 Binary files /dev/null and b/docs/src/fonts/lato/Lato-Regular.woff2 differ diff --git a/docs/src/fonts/open-sans/OpenSans-ExtraBold.ttf b/docs/src/fonts/open-sans/OpenSans-ExtraBold.ttf deleted file mode 100644 index 2b4ba63..0000000 Binary files a/docs/src/fonts/open-sans/OpenSans-ExtraBold.ttf and /dev/null differ diff --git a/docs/src/fonts/open-sans/OpenSans-ExtraBold.woff2 b/docs/src/fonts/open-sans/OpenSans-ExtraBold.woff2 new file mode 100644 index 0000000..8010c59 Binary files /dev/null and b/docs/src/fonts/open-sans/OpenSans-ExtraBold.woff2 differ diff --git a/docs/src/fonts/open-sans/OpenSans-Medium.ttf b/docs/src/fonts/open-sans/OpenSans-Medium.ttf deleted file mode 100644 index 117ce67..0000000 Binary files a/docs/src/fonts/open-sans/OpenSans-Medium.ttf and /dev/null differ diff --git a/docs/src/fonts/open-sans/OpenSans-Medium.woff2 b/docs/src/fonts/open-sans/OpenSans-Medium.woff2 new file mode 100644 index 0000000..2b3506b Binary files /dev/null and b/docs/src/fonts/open-sans/OpenSans-Medium.woff2 differ diff --git a/docs/src/js/index.js b/docs/src/js/index.js index 52d741f..cc82b70 100644 --- a/docs/src/js/index.js +++ b/docs/src/js/index.js @@ -1,7 +1,8 @@ -// --------------------- -// This script changes the text when hovering over faces on the home page. -// --------------------- +/* +Homepage +*/ +// This script changes the text when hovering over faces on the home page. function setHoverText(elementId, text) { const hoverTextElement = document.getElementById('hover-text'); @@ -21,11 +22,8 @@ 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. -// --------------------- +// This script does the animations for the faces on the home page. document.addEventListener('DOMContentLoaded', function () { const imageContainers = document.querySelectorAll('.face'); diff --git a/docs/src/js/loader.js b/docs/src/js/loader.js index be701f3..9a0a3e0 100644 --- a/docs/src/js/loader.js +++ b/docs/src/js/loader.js @@ -1,7 +1,8 @@ -// --------------------- -// This script loads the page loading animation. -// --------------------- +/* +PAGE LOADER +*/ +// This loads a screen before the page is fully loaded. document.getElementById('loader').style.display = 'block'; function fadeOutLoader() { diff --git a/docs/src/js/resume.js b/docs/src/js/resume.js index f62aac6..d135f4d 100644 --- a/docs/src/js/resume.js +++ b/docs/src/js/resume.js @@ -1,3 +1,8 @@ +/* +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'); @@ -10,3 +15,11 @@ window.addEventListener('scroll', function () { } }); }); + +// 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}`; +} diff --git a/docs/src/stylesheets/_button.css b/docs/src/stylesheets/_button.css new file mode 100644 index 0000000..a95793b --- /dev/null +++ b/docs/src/stylesheets/_button.css @@ -0,0 +1,15 @@ +/***************************** +* 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; + } +} diff --git a/docs/src/stylesheets/_colours.css b/docs/src/stylesheets/_colours.css index 0d03357..bd49410 100644 --- a/docs/src/stylesheets/_colours.css +++ b/docs/src/stylesheets/_colours.css @@ -40,16 +40,14 @@ color: var(--primary-color); } + figcaption, + a, h4, h5, h6 { color: var(--tertiary-colour); } - a { - color: var(--tertiary-colour); - } - a:hover { color: var(--secondary-color); } diff --git a/docs/src/stylesheets/_faces.css b/docs/src/stylesheets/_faces.css new file mode 100644 index 0000000..2918188 --- /dev/null +++ b/docs/src/stylesheets/_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); + } +} diff --git a/docs/src/stylesheets/_fonts.css b/docs/src/stylesheets/_fonts.css index 39581bf..4e480fb 100644 --- a/docs/src/stylesheets/_fonts.css +++ b/docs/src/stylesheets/_fonts.css @@ -29,7 +29,7 @@ font-family: 'Lato'; font-weight: bold; font-style: normal; - src: url('../fonts/lato/Lato-Bold.ttf'); + src: url('../fonts/lato/Lato-Bold.woff2'); } @@ -37,14 +37,14 @@ font-family: 'Lato'; font-weight: bold; font-style: italic; - src: url('../fonts/lato/Lato-BoldItalic.ttf'); + src: url('../fonts/lato/Lato-BoldItalic.woff2'); } @font-face { font-family: 'Lato'; font-weight: normal; font-style: normal; - src: url('../fonts/lato/Lato-Regular.ttf'); + src: url('../fonts/lato/Lato-Regular.woff2'); } @@ -52,7 +52,7 @@ font-family: 'Lato'; font-weight: normal; font-style: italic; - src: url('../fonts/lato/Lato-Italic.ttf'); + src: url('../fonts/lato/Lato-Italic.woff2'); } @@ -60,56 +60,56 @@ font-family: 'DM Mono'; font-weight: normal; font-style: normal; - src: url('../fonts/dm-mono/DMMono-Regular.ttf'); + 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.ttf'); + 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.ttf'); + 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.ttf'); + 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.ttf'); + 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.ttf'); + 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.ttf'); + 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.ttf'); + src: url('../fonts/open-sans/OpenSans-ExtraBold.woff2'); } /* Variables */ @@ -123,23 +123,15 @@ /* Typeset */ -.md-typeset p { - font-size: max(var(--text-variable-size), var(--text-min-size)); -} - .md-typeset { - - h1, - h2, - h3, - h4, - h5, - h6 { - font-weight: 900; + p { + font-family: var(--primary-font); } -} -.md-typeset { + figcaption { + font-family: var(--secondary-font); + font-style: normal; + } h1, h2, @@ -153,3 +145,15 @@ font-family: var(--secondary-font); } } + +.md-typeset { + + h1, + h2, + h3, + h4, + h5, + h6 { + font-weight: bold; + } +} diff --git a/docs/src/stylesheets/_hero-text.css b/docs/src/stylesheets/_hero-text.css new file mode 100644 index 0000000..cd072ab --- /dev/null +++ b/docs/src/stylesheets/_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); + } +} diff --git a/docs/src/stylesheets/_loader.css b/docs/src/stylesheets/_loader.css new file mode 100644 index 0000000..6851a22 --- /dev/null +++ b/docs/src/stylesheets/_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; +} diff --git a/docs/src/stylesheets/_media-player.css b/docs/src/stylesheets/_media-player.css new file mode 100644 index 0000000..0001a3a --- /dev/null +++ b/docs/src/stylesheets/_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; +} diff --git a/docs/src/stylesheets/_page-resume.css b/docs/src/stylesheets/_page-resume.css new file mode 100644 index 0000000..7b2ce17 --- /dev/null +++ b/docs/src/stylesheets/_page-resume.css @@ -0,0 +1,228 @@ +/***************************** +* 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: 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: 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; + padding: 2em !important; + margin: 2em !important; + + h6 { + span { + margin-right: 3px; + } + } + + &:hover { + box-shadow: none !important; + border: 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); + } + } +} diff --git a/docs/src/stylesheets/_size.css b/docs/src/stylesheets/_size.css index 3c765bd..7e0aca6 100644 --- a/docs/src/stylesheets/_size.css +++ b/docs/src/stylesheets/_size.css @@ -6,7 +6,6 @@ :root { --text-min-size: 8px; --text-variable-size: 0.7vw; - --zero: 0; --full-width: 100vw; --half-width: 50vw; --third-width: 33.3vw; @@ -24,7 +23,11 @@ /* Font sizes */ .md-typeset { p { - font-size: max(var(--text-variable-size), var(--text-min-size)); + 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, @@ -34,7 +37,7 @@ h5, h6 { letter-spacing: normal; - margin: var(--zero); + margin: 0 0 5px 0; } } @@ -60,7 +63,7 @@ } h6 { - font-size: max(calc(var(--text-variable-size) + 5px), calc(var(--text-min-size) + 1px)); + font-size: max(calc(var(--text-variable-size) + 8px), calc(var(--text-min-size) + 1px)); } } diff --git a/docs/src/stylesheets/g.css b/docs/src/stylesheets/g.css index 67130d2..4a5f8c3 100644 --- a/docs/src/stylesheets/g.css +++ b/docs/src/stylesheets/g.css @@ -1,6 +1,13 @@ @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(_button.css); +@import url(_media-player.css); + /***************************** * GENERAL RULES @@ -44,494 +51,9 @@ article.md-content__inner.md-typeset:after { } .md-typeset figcaption { - font-family: var(--secondary-font); - color: var(--tertiary-colour); - font-size: 0.8em; - font-style: normal; max-width: none; } -.vds-title { - font-family: var(--secondary-font); - font-size: 0.8em; -} - -/***************************** -* 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; - } -} - -/***************************** -* 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); - } -} - -/***************************** -* INDEX 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); - } -} - - - -/***************************** -* 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; -} - -/***************************** -* 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: 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: 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; - } -} - -.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 */ -.grid.cards { - - li { - background-color: var(--quarternary-colour); - border: none !important; - border-radius: 5px !important; - box-shadow: none; - padding: 2em !important; - margin: 2em !important; - - h6 { - text-transform: initial !important; - - span { - margin-right: 3px; - } - } - - &:hover { - box-shadow: none !important; - border: none !important; - } - } -} - -.writing { - padding: 4em; - - 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)); - } -} - -.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%; - - 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)); - } - - div { - font-family: var(--secondary-font); - } - } - } -} - -/* Contact */ - -div.contact-me { - display: flex; - justify-content: center; - align-items: center; - - div.button { - font-size: 1.8em; - text-transform: uppercase; - font-weight: bold !important; - color: var(--tertiary-colour); - - &:hover { - border-bottom: 3px solid var(--tertiary-colour); - color: var(--secondary-colour); - } - } -} - /***************************** * STATUS *****************************/ diff --git a/docs/visual.md b/docs/visual.md index ddb9a6c..b4436f5 100644 --- a/docs/visual.md +++ b/docs/visual.md @@ -1,7 +1 @@ -:material-web: - -:material-code-json: - -:octicons-workflow-16: - -:material-robot: +:material-email: diff --git a/mkdocs.yml b/mkdocs.yml index 7957335..116fdad 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -14,24 +14,6 @@ extra: link: https://codeberg.org/gugulethu - icon: material/linkedin link: https://www.linkedin.com/in/gugulet-hu - tags: - HTML: html - JavaScript: js - CSS: css - Python: python - Shell: shell - Manual: manual - Sync: sync - Logic: logic - Database: database - Collect: collect - Validate: validate - Display: display - Analyse: analyse - Predict: predict - Watch: watch - Mobile: mobile - Laptop: laptop extra_css: - src/stylesheets/g.css @@ -147,12 +129,6 @@ plugins: - search # Plugin to create index pages for each section. [https://github.com/oprypin/mkdocs-section-index] - section-index - # Plugin to manage social media cards. Requires installing: pip install "mkdocs-material[imaging] - - social: - cards: true - cards_layout_options: - background_color: "#828089" - font_family: Libre Baskerville - tags repo_name: gugulet-hu/gugulet.hu @@ -187,10 +163,8 @@ theme: - search.highlight # Highlight the search item in the page. - search.suggest # Suggest search results. - search.share # Deep-link to a search results page. - font: - text: Libre Baskerville - code: DM Mono # Icons to use for different tags and the repo. + font: false icon: annotation: material/plus-circle-outline repo: material/git