Organized the stylesheets,converted fonts to woff.
This commit is contained in:
g*
parent
7eba28d1a9
commit
fa2ec6c820
40 changed files with 631 additions and 660 deletions
186
docs/resume.md
186
docs/resume.md
|
|
@ -15,7 +15,7 @@ hide:
|
|||
|
||||
|
||||
<div class='hero-text'>
|
||||
<h2>hey, i'm gugulethu</h2>
|
||||
<h2>hey<span id="companyName"></span>, i'm gugulethu</h2>
|
||||
<h4>and i'm a pen for hire</h4>
|
||||
<div class='accent-divider'></div>
|
||||
<div class='meta-icons'>
|
||||
|
|
@ -26,7 +26,7 @@ hide:
|
|||
<span class='twemoji'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M10 2h4a2 2 0 0 1 2 2v2h4a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8c0-1.11.89-2 2-2h4V4c0-1.11.89-2 2-2m4 4V4h-4v2z'></path></svg></span> 15 years<span class='annotate'>(1)</span><ol><li><b>Content Management:</b> 8 years<br><b>Copywriting:</b> 2 years<br><b>Technical Writing:</b> 5 years</li></ol>
|
||||
</div>
|
||||
<div>
|
||||
<span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m12.87 15.07-2.54-2.51.03-.03A17.5 17.5 0 0 0 14.07 6H17V4h-7V2H8v2H1v2h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2zm-2.62 7 1.62-4.33L19.12 17z"></path></svg></span> Languages<span class='annotate'>(1)</span><ol><li><b>English:</b> Fluent (spoken/written)<br><b>German:</b> B1-level (spoken)<br><b>isiZulu:</b> Fluent (spoken/written)<br><b>Xhosa:</b> Fluent (spoken/written)<br><b>Afrikaans:</b> Basic (spoken)<br><b>French:</b> Basic (spoken)<br></li></ol>
|
||||
<span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m12.87 15.07-2.54-2.51.03-.03A17.5 17.5 0 0 0 14.07 6H17V4h-7V2H8v2H1v2h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2zm-2.62 7 1.62-4.33L19.12 17z"></path></svg></span> Languages<span class='annotate'>(1)</span><ol><li><b>English:</b> Fluent (spoken/written)<br><b>German:</b> B1 (spoken)<br><b>isiZulu:</b> Fluent (spoken/written)<br><b>Xhosa:</b> Fluent (spoken/written)<br><b>Afrikaans:</b> Basic (spoken)<br><b>French:</b> Basic (spoken)<br></li></ol>
|
||||
</div>
|
||||
<a href='https://linkedin.com/in/gugulet-hu' target='_blank' >
|
||||
<div>
|
||||
|
|
@ -53,19 +53,87 @@ body {
|
|||
</style>
|
||||
|
||||
<div class='tabbed-set tabbed-alternate' data-tabs='1:6' style='--md-indicator-x: 93px; --md-indicator-width: 92px;'>
|
||||
<input checked='checked' id='spread-ai' name='selected' type='radio' class=''>
|
||||
<input id='mambu' name='selected' type='radio'>
|
||||
<input id='yoco' name='selected' type='radio'>
|
||||
<input id='allan_gray' name='selected' type='radio'>
|
||||
<input id='the_jupiter_drawing_room' name='selected' type='radio'>
|
||||
<input id='allan_gray' name='selected' type='radio'>
|
||||
<input id='yoco' name='selected' type='radio'>
|
||||
<input id='mambu' name='selected' type='radio'>
|
||||
<input checked='checked' id='spread-ai' name='selected' type='radio' class=''>
|
||||
<div class='tabbed-labels tabbed-labels--linked'>
|
||||
<label for='spread-ai'><a href='#spread-ai' tabindex='-1'>2024</a></label>
|
||||
<label for='mambu'><a href='#mambu' tabindex='-1'>2021</a></label>
|
||||
<label for='yoco'><a href='#yoco' tabindex='-1'>2019</a></label>
|
||||
<label for='allan_gray'><a href='#allan_gray' tabindex='-1'>2015</a></label>
|
||||
<label for='the_jupiter_drawing_room'><a href='#the_jupiter_drawing_room' tabindex='-1'>2013</a></label>
|
||||
<label for='allan_gray'><a href='#allan_gray' tabindex='-1'>2015</a></label>
|
||||
<label for='yoco'><a href='#yoco' tabindex='-1'>2019</a></label>
|
||||
<label for='mambu'><a href='#mambu' tabindex='-1'>2021</a></label>
|
||||
<label for='spread-ai'><a href='#spread-ai' tabindex='-1'>2024</a></label>
|
||||
</div>
|
||||
<div class='tabbed-content fade-in-up-section'>
|
||||
<div class='tabbed-block'>
|
||||
<h3>Copywriting</h3>
|
||||
<div class='logo-and-title' >
|
||||
<img src='/src/the-jupiter-drawing-room-logo-119x118.png' /><h6>The Jupiter Drawing Room</h6><span class='annotate'>(1)</span><ol><li>The Jupiter Drawing Room is an advertising agency that serviced clients across South Africa and Namibia.</li></ol>
|
||||
</div>
|
||||
<div class='tags'>marketing, advertising, print, radio, television, online, established, private</div>
|
||||
<p class='blurb'>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 <abbr title='South African advertising awards for creativity in the field.'>Loeries</abbr>; a Silver <abbr title='An international advertising awards for creativity in communications.'>Cannes</abbr> Lion; and a Bronze <abbr title='An American advertising award for creative excellence.'>Clio</abbr>.</p>
|
||||
</div>
|
||||
<div class='tabbed-block'>
|
||||
<h3>Communications Specialist</h3>
|
||||
<div class='logo-and-title' >
|
||||
<img src='/src/allan-gray-logo-243x160.png' /><h6>Allan Gray</h6><span class='annotate'>(1)</span><ol><li>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.</li></ol>
|
||||
</div>
|
||||
<div class='tags'>financial services, investment, unit trusts (mutual funds), established, private</div>
|
||||
<p class='blurb'>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.</p>
|
||||
</div>
|
||||
<div class='tabbed-block'>
|
||||
<h3>Content Manager</h3>
|
||||
<div class='logo-and-title' >
|
||||
<img src='/src/yoco-logo-206x206.png' /><h6>Yoco</h6><span class='annotate'>(1)</span><ol><li>Yoco is the largest payments processor for small- and medium-businesses in South Africa.</li></ol>
|
||||
</div>
|
||||
<div class='tags'>financial services, payments, hardware, scale-up, series b</div>
|
||||
<p class='blurb'>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.</p>
|
||||
</div>
|
||||
<div class='tabbed-block'>
|
||||
<h3>Senior Technical Writer</h3>
|
||||
<div class='logo-and-title' >
|
||||
<img src='/src/mambu-logo-110x112.png' /><h6>Mambu</h6><span class='annotate'>(1)</span><ol><li>Mambu is a SaaS banking back-end that provides services to banks such as N26 and Solaris.</li></ol>
|
||||
</div>
|
||||
<div class='tags'>financial services, banking, saas, scale-up, series e</div>
|
||||
<div class='three-column'>
|
||||
<div class='column'>
|
||||
<div class='content'>
|
||||
<h6>Promoted to team lead</h6>
|
||||
<p>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. </p>
|
||||
</div>
|
||||
</div>
|
||||
<div class='column'>
|
||||
<div class='content'>
|
||||
<h6>Maintained legacy API Reference</h6>
|
||||
<p>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.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class='column'>
|
||||
<div class='content'>
|
||||
<h6>Documented integrations and <abbr title='Command-line interface, using text instead of UI elements.'>CLI</abbr></h6>
|
||||
<p>Documented integrations with services like nCino and Wise, and documented the Mambu Process Orchestrator - which managed these connections. Also documented the Mambu <abbr title='Command-line interface, using text instead of UI elements.'>CLI</abbr> for external engineers to connect to the back-end.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='meta-icons' >
|
||||
<div>
|
||||
<span class='twemoji'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M21.039 0a2.96 2.96 0 0 0-2.65 4.274l-6.447 6.447a2.96 2.96 0 1 0 1.335 1.336l6.447-6.447A2.959 2.959 0 1 0 21.04 0zM10.628 2.745q-.108.001-.214.004-.107.002-.215.005a11 11 0 0 0-1.335.138l-.03.005-.185.033-.105.02a8 8 0 0 0-.289.062l-.032.008a10.7 10.7 0 0 0-2.55.95l-.155.089q-.094.052-.187.105-.07.039-.14.079H5.19l-.01.005-.036.02v.002l.111.184 3.15 5.23a4 4 0 0 1 .38-.202 4.3 4.3 0 0 1 1.628-.413q.107-.007.214-.008zm.428.01v6.333q.489.05.96.209l4.66-4.66q-.259-.181-.528-.347l-.026-.015q-.084-.052-.168-.1l-.098-.056-.099-.055-.171-.092-.027-.014a11 11 0 0 0-1.425-.617c-.69-.241-1.403-.41-2.128-.505l-.089-.012-.09-.01-.17-.019-.049-.004-.204-.017a6 6 0 0 0-.255-.015q-.046-.004-.093-.004M4.782 4.498a10 10 0 0 0-1.36 1.062l4.461 4.461.018.018q.073-.06.149-.116l-.011-.018zm-1.67 1.36q-.074.076-.147.154l-.149.155q-.494.536-.902 1.118l-.039.056a11 11 0 0 0-.216.326 10.6 10.6 0 0 0-1.65 5.276l-.006.215-.003.214h6.317c0-.072.007-.143.01-.214.005-.072.006-.144.013-.215a4.3 4.3 0 0 1 .952-2.3c.045-.055.096-.106.144-.16.048-.052.093-.107.144-.158zm16.255 1.464-4.663 4.663q.158.47.21.959h6.332l-.004-.094a12 12 0 0 0-.032-.456l-.005-.052-.026-.241v-.009l-.033-.24v-.009a11 11 0 0 0-.327-1.493l-.003-.01-.07-.228-.01-.03-.069-.204-.02-.055a6 6 0 0 0-.153-.405l-.093-.227-.063-.144-.037-.081-.08-.171-.024-.052-.096-.194-.014-.027-.112-.212-.004-.008a11 11 0 0 0-.604-.98m-4.43 6.05c0 .071-.006.142-.01.214q-.003.108-.012.214a4.3 4.3 0 0 1-.952 2.301c-.045.055-.096.107-.144.16s-.093.108-.144.159l4.467 4.467q.075-.078.148-.155.076-.078.148-.155.497-.538.905-1.122l.032-.046.098-.144.085-.13.04-.063a10.6 10.6 0 0 0 1.647-5.272q.004-.107.006-.214.003-.107.004-.214zM.01 13.8l.004.093.01.179.005.076.017.206.005.046q.01.115.024.228l.003.022.033.248q.109.758.327 1.497l.002.006q.034.116.071.23l.004.014.005.014a16 16 0 0 0 .153.439l.03.08.059.148.093.228.062.14.038.084.078.169.027.054a11 11 0 0 0 .225.441l.025.043 5.408-3.258.02-.012a4.3 4.3 0 0 1-.395-1.414h-.025zm.505 2.846-.206.058.002.005zm6.425-1.052-5.415 3.262q.125.207.259.406l.008.014.004.005.008.014h.001l.022.032.001.002v.001a11 11 0 0 0 .298.417l.006.008a10 10 0 0 0 .29.368l.033.04q.064.078.13.153l.057.065.112.127.064.069.029.031.083.09.035.035q.073.077.149.153L7.58 16.42a4 4 0 0 1-.285-.321 4.4 4.4 0 0 1-.356-.505zm6.416 1.111q-.075.06-.15.116l.011.018 3.257 5.407q.227-.148.446-.307.473-.348.914-.756l-4.46-4.46zm-5.457.003-.015.015-4.46 4.46.195.176q.033.03.065.058l.152.13.215.174.023.017.191.148.008.005q.403.3.834.564l.03.018.164.097.101.057a6 6 0 0 0 .27.148q.012.007.025.013.243.127.493.24l.158-.385 2.243-5.448.009-.02a4.3 4.3 0 0 1-.701-.467m4.951.353q-.092.054-.187.104a4.32 4.32 0 0 1-3.271.336c-.069-.02-.135-.047-.203-.071-.067-.024-.136-.044-.202-.072l-2.242 5.444-.088.213-.075.183v.001l.017.007.019.007.005.003q.079.03.159.06.1.04.2.077l.102.04c.702.247 1.43.42 2.168.518l.087.012.09.01.172.019a7 7 0 0 0 .252.022q.035 0 .071.003l.184.011.112.005a7 7 0 0 0 .358.007h.05a10.7 10.7 0 0 0 1.793-.15l.185-.034.105-.02.109-.023.18-.04.032-.008a10.7 10.7 0 0 0 2.55-.95q.078-.044.156-.089.094-.052.187-.105.065-.035.13-.073h.001l.002-.002.002-.001.002-.001.007-.004.042-.025-.11-.183-.11-.184zm3.262 5.414-.042.025zm-.055.033h-.002z'></path></svg></span> <abbr title='The OpenAPI specification is a standard for documenting REST APIs.'>OpenAPI Specification</abbr>
|
||||
</div>
|
||||
<div>
|
||||
<span class='twemoji'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M11.754 0a4 4 0 0 0-2.049.596L3.33 4.532a4.25 4.25 0 0 0-2.017 3.615v8.03a4.13 4.13 0 0 0 2.067 3.574l6.486 3.733a3.88 3.88 0 0 0 3.835.018l7.043-3.966a3.82 3.82 0 0 0 1.943-3.323V7.752a3.57 3.57 0 0 0-1.774-3.084L13.817.541a4 4 0 0 0-2.063-.54zm.022 1.674c.413-.006.828.1 1.2.315l7.095 4.127c.584.34.941.96.94 1.635v8.462c0 .774-.414 1.484-1.089 1.864l-7.042 3.966a2.2 2.2 0 0 1-2.179-.01l-6.485-3.734a2.45 2.45 0 0 1-1.228-2.123v-8.03c0-.893.461-1.72 1.221-2.19l6.376-3.935a2.3 2.3 0 0 1 1.19-.347zm-4.7 3.844V18.37h2.69v-5.62h4.46v5.62h2.696V5.518h-2.696v4.681h-4.46V5.518Z'></path></svg></span> <abbr title='Hugo is a general purpose static site generator.'>Hugo</abbr>
|
||||
</div>
|
||||
<div>
|
||||
<span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M0 2.75C0 1.784.784 1 1.75 1h12.5c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0 1 14.25 15H1.75A1.75 1.75 0 0 1 0 13.25Zm1.75-.25a.25.25 0 0 0-.25.25v10.5c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25V2.75a.25.25 0 0 0-.25-.25ZM7.25 8a.75.75 0 0 1-.22.53l-2.25 2.25a.749.749 0 0 1-1.275-.326.75.75 0 0 1 .215-.734L5.44 8 3.72 6.28a.749.749 0 0 1 .326-1.275.75.75 0 0 1 .734.215l2.25 2.25c.141.14.22.331.22.53m1.5 1.5h3a.75.75 0 0 1 0 1.5h-3a.75.75 0 0 1 0-1.5"></path></svg></span> <abbr title='Bash or ZSH allow you to create shell scripts in the terminal to automate tasks and use packages.'>Shell</abbr>
|
||||
</div>
|
||||
<div>
|
||||
<span class='twemoji'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M0 0h24v24H0zm22.034 18.276c-.175-1.095-.888-2.015-3.003-2.873-.736-.345-1.554-.585-1.797-1.14-.091-.33-.105-.51-.046-.705.15-.646.915-.84 1.515-.66.39.12.75.42.976.9 1.034-.676 1.034-.676 1.755-1.125-.27-.42-.404-.601-.586-.78-.63-.705-1.469-1.065-2.834-1.034l-.705.089c-.676.165-1.32.525-1.71 1.005-1.14 1.291-.811 3.541.569 4.471 1.365 1.02 3.361 1.244 3.616 2.205.24 1.17-.87 1.545-1.966 1.41-.811-.18-1.26-.586-1.755-1.336l-1.83 1.051c.21.48.45.689.81 1.109 1.74 1.756 6.09 1.666 6.871-1.004.029-.09.24-.705.074-1.65zm-8.983-7.245h-2.248c0 1.938-.009 3.864-.009 5.805 0 1.232.063 2.363-.138 2.711-.33.689-1.18.601-1.566.48-.396-.196-.597-.466-.83-.855-.063-.105-.11-.196-.127-.196l-1.825 1.125c.305.63.75 1.172 1.324 1.517.855.51 2.004.675 3.207.405.783-.226 1.458-.691 1.811-1.411.51-.93.402-2.07.397-3.346.012-2.054 0-4.109 0-6.179z'></path></svg></span> JavaScript
|
||||
</div>
|
||||
<div>
|
||||
<span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M1.125 0C.502 0 0 .502 0 1.125v21.75C0 23.498.502 24 1.125 24h21.75c.623 0 1.125-.502 1.125-1.125V1.125C24 .502 23.498 0 22.875 0zm17.363 9.75q.918 0 1.627.111a6.4 6.4 0 0 1 1.306.34v2.458a4 4 0 0 0-.643-.361 5 5 0 0 0-.717-.26 5.5 5.5 0 0 0-1.426-.2q-.45 0-.819.086a2.1 2.1 0 0 0-.623.242q-.254.156-.393.374a.9.9 0 0 0-.14.49q0 .294.156.529.156.234.443.444c.287.21.423.276.696.41q.41.203.926.416.705.296 1.266.628.561.333.963.753.402.418.614.957.213.538.214 1.253 0 .986-.373 1.656a3.03 3.03 0 0 1-1.012 1.085 4.4 4.4 0 0 1-1.487.596q-.85.18-1.79.18a10 10 0 0 1-1.84-.164 5.5 5.5 0 0 1-1.512-.493v-2.63a5.03 5.03 0 0 0 3.237 1.2q.5 0 .872-.09.373-.09.623-.25.249-.162.373-.38a1.02 1.02 0 0 0-.074-1.089 2.1 2.1 0 0 0-.537-.5 5.6 5.6 0 0 0-.807-.444 28 28 0 0 0-1.007-.436q-1.377-.575-2.053-1.405t-.676-2.005q0-.92.369-1.582.368-.662 1.004-1.089a4.5 4.5 0 0 1 1.47-.629 7.5 7.5 0 0 1 1.77-.201m-15.113.188h9.563v2.166H9.506v9.646H6.789v-9.646H3.375z"></path></svg></span> <abbr title="TypeScript is a stricter version of JavaScript, where you have define types.">TypeScript</abbr>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='tabbed-block'>
|
||||
<div class='status-green'>Current</div>
|
||||
<h3>Documentation Engineer</h3>
|
||||
|
|
@ -123,74 +191,6 @@ body {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='tabbed-block'>
|
||||
<h3>Senior Technical Writer</h3>
|
||||
<div class='logo-and-title' >
|
||||
<img src='/src/mambu-logo-110x112.png' /><h6>Mambu</h6><span class='annotate'>(1)</span><ol><li>Mambu is a SaaS banking back-end that provides services to banks such as N26 and Solaris.</li></ol>
|
||||
</div>
|
||||
<div class='tags'>financial services, banking, saas, scale-up, series e</div>
|
||||
<div class='three-column'>
|
||||
<div class='column'>
|
||||
<div class='content'>
|
||||
<h6>Promoted to team lead</h6>
|
||||
<p>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. </p>
|
||||
</div>
|
||||
</div>
|
||||
<div class='column'>
|
||||
<div class='content'>
|
||||
<h6>Maintained legacy API Reference</h6>
|
||||
<p>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.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class='column'>
|
||||
<div class='content'>
|
||||
<h6>Documented integrations and <abbr title='Command-line interface, using text instead of UI elements.'>CLI</abbr></h6>
|
||||
<p>Documented integrations with services like nCino and Wise, and documented the Mambu Process Orchestrator - which managed these connections. Also documented the Mambu <abbr title='Command-line interface, using text instead of UI elements.'>CLI</abbr> for external engineers to connect to the back-end.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='meta-icons' >
|
||||
<div>
|
||||
<span class='twemoji'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M21.039 0a2.96 2.96 0 0 0-2.65 4.274l-6.447 6.447a2.96 2.96 0 1 0 1.335 1.336l6.447-6.447A2.959 2.959 0 1 0 21.04 0zM10.628 2.745q-.108.001-.214.004-.107.002-.215.005a11 11 0 0 0-1.335.138l-.03.005-.185.033-.105.02a8 8 0 0 0-.289.062l-.032.008a10.7 10.7 0 0 0-2.55.95l-.155.089q-.094.052-.187.105-.07.039-.14.079H5.19l-.01.005-.036.02v.002l.111.184 3.15 5.23a4 4 0 0 1 .38-.202 4.3 4.3 0 0 1 1.628-.413q.107-.007.214-.008zm.428.01v6.333q.489.05.96.209l4.66-4.66q-.259-.181-.528-.347l-.026-.015q-.084-.052-.168-.1l-.098-.056-.099-.055-.171-.092-.027-.014a11 11 0 0 0-1.425-.617c-.69-.241-1.403-.41-2.128-.505l-.089-.012-.09-.01-.17-.019-.049-.004-.204-.017a6 6 0 0 0-.255-.015q-.046-.004-.093-.004M4.782 4.498a10 10 0 0 0-1.36 1.062l4.461 4.461.018.018q.073-.06.149-.116l-.011-.018zm-1.67 1.36q-.074.076-.147.154l-.149.155q-.494.536-.902 1.118l-.039.056a11 11 0 0 0-.216.326 10.6 10.6 0 0 0-1.65 5.276l-.006.215-.003.214h6.317c0-.072.007-.143.01-.214.005-.072.006-.144.013-.215a4.3 4.3 0 0 1 .952-2.3c.045-.055.096-.106.144-.16.048-.052.093-.107.144-.158zm16.255 1.464-4.663 4.663q.158.47.21.959h6.332l-.004-.094a12 12 0 0 0-.032-.456l-.005-.052-.026-.241v-.009l-.033-.24v-.009a11 11 0 0 0-.327-1.493l-.003-.01-.07-.228-.01-.03-.069-.204-.02-.055a6 6 0 0 0-.153-.405l-.093-.227-.063-.144-.037-.081-.08-.171-.024-.052-.096-.194-.014-.027-.112-.212-.004-.008a11 11 0 0 0-.604-.98m-4.43 6.05c0 .071-.006.142-.01.214q-.003.108-.012.214a4.3 4.3 0 0 1-.952 2.301c-.045.055-.096.107-.144.16s-.093.108-.144.159l4.467 4.467q.075-.078.148-.155.076-.078.148-.155.497-.538.905-1.122l.032-.046.098-.144.085-.13.04-.063a10.6 10.6 0 0 0 1.647-5.272q.004-.107.006-.214.003-.107.004-.214zM.01 13.8l.004.093.01.179.005.076.017.206.005.046q.01.115.024.228l.003.022.033.248q.109.758.327 1.497l.002.006q.034.116.071.23l.004.014.005.014a16 16 0 0 0 .153.439l.03.08.059.148.093.228.062.14.038.084.078.169.027.054a11 11 0 0 0 .225.441l.025.043 5.408-3.258.02-.012a4.3 4.3 0 0 1-.395-1.414h-.025zm.505 2.846-.206.058.002.005zm6.425-1.052-5.415 3.262q.125.207.259.406l.008.014.004.005.008.014h.001l.022.032.001.002v.001a11 11 0 0 0 .298.417l.006.008a10 10 0 0 0 .29.368l.033.04q.064.078.13.153l.057.065.112.127.064.069.029.031.083.09.035.035q.073.077.149.153L7.58 16.42a4 4 0 0 1-.285-.321 4.4 4.4 0 0 1-.356-.505zm6.416 1.111q-.075.06-.15.116l.011.018 3.257 5.407q.227-.148.446-.307.473-.348.914-.756l-4.46-4.46zm-5.457.003-.015.015-4.46 4.46.195.176q.033.03.065.058l.152.13.215.174.023.017.191.148.008.005q.403.3.834.564l.03.018.164.097.101.057a6 6 0 0 0 .27.148q.012.007.025.013.243.127.493.24l.158-.385 2.243-5.448.009-.02a4.3 4.3 0 0 1-.701-.467m4.951.353q-.092.054-.187.104a4.32 4.32 0 0 1-3.271.336c-.069-.02-.135-.047-.203-.071-.067-.024-.136-.044-.202-.072l-2.242 5.444-.088.213-.075.183v.001l.017.007.019.007.005.003q.079.03.159.06.1.04.2.077l.102.04c.702.247 1.43.42 2.168.518l.087.012.09.01.172.019a7 7 0 0 0 .252.022q.035 0 .071.003l.184.011.112.005a7 7 0 0 0 .358.007h.05a10.7 10.7 0 0 0 1.793-.15l.185-.034.105-.02.109-.023.18-.04.032-.008a10.7 10.7 0 0 0 2.55-.95q.078-.044.156-.089.094-.052.187-.105.065-.035.13-.073h.001l.002-.002.002-.001.002-.001.007-.004.042-.025-.11-.183-.11-.184zm3.262 5.414-.042.025zm-.055.033h-.002z'></path></svg></span> <abbr title='The OpenAPI specification is a standard for documenting REST APIs.'>OpenAPI Specification</abbr>
|
||||
</div>
|
||||
<div>
|
||||
<span class='twemoji'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M11.754 0a4 4 0 0 0-2.049.596L3.33 4.532a4.25 4.25 0 0 0-2.017 3.615v8.03a4.13 4.13 0 0 0 2.067 3.574l6.486 3.733a3.88 3.88 0 0 0 3.835.018l7.043-3.966a3.82 3.82 0 0 0 1.943-3.323V7.752a3.57 3.57 0 0 0-1.774-3.084L13.817.541a4 4 0 0 0-2.063-.54zm.022 1.674c.413-.006.828.1 1.2.315l7.095 4.127c.584.34.941.96.94 1.635v8.462c0 .774-.414 1.484-1.089 1.864l-7.042 3.966a2.2 2.2 0 0 1-2.179-.01l-6.485-3.734a2.45 2.45 0 0 1-1.228-2.123v-8.03c0-.893.461-1.72 1.221-2.19l6.376-3.935a2.3 2.3 0 0 1 1.19-.347zm-4.7 3.844V18.37h2.69v-5.62h4.46v5.62h2.696V5.518h-2.696v4.681h-4.46V5.518Z'></path></svg></span> <abbr title='Hugo is a general purpose static site generator.'>Hugo</abbr>
|
||||
</div>
|
||||
<div>
|
||||
<span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M0 2.75C0 1.784.784 1 1.75 1h12.5c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0 1 14.25 15H1.75A1.75 1.75 0 0 1 0 13.25Zm1.75-.25a.25.25 0 0 0-.25.25v10.5c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25V2.75a.25.25 0 0 0-.25-.25ZM7.25 8a.75.75 0 0 1-.22.53l-2.25 2.25a.749.749 0 0 1-1.275-.326.75.75 0 0 1 .215-.734L5.44 8 3.72 6.28a.749.749 0 0 1 .326-1.275.75.75 0 0 1 .734.215l2.25 2.25c.141.14.22.331.22.53m1.5 1.5h3a.75.75 0 0 1 0 1.5h-3a.75.75 0 0 1 0-1.5"></path></svg></span> <abbr title='Bash or ZSH allow you to create shell scripts in the terminal to automate tasks and use packages.'>Shell</abbr>
|
||||
</div>
|
||||
<div>
|
||||
<span class='twemoji'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M0 0h24v24H0zm22.034 18.276c-.175-1.095-.888-2.015-3.003-2.873-.736-.345-1.554-.585-1.797-1.14-.091-.33-.105-.51-.046-.705.15-.646.915-.84 1.515-.66.39.12.75.42.976.9 1.034-.676 1.034-.676 1.755-1.125-.27-.42-.404-.601-.586-.78-.63-.705-1.469-1.065-2.834-1.034l-.705.089c-.676.165-1.32.525-1.71 1.005-1.14 1.291-.811 3.541.569 4.471 1.365 1.02 3.361 1.244 3.616 2.205.24 1.17-.87 1.545-1.966 1.41-.811-.18-1.26-.586-1.755-1.336l-1.83 1.051c.21.48.45.689.81 1.109 1.74 1.756 6.09 1.666 6.871-1.004.029-.09.24-.705.074-1.65zm-8.983-7.245h-2.248c0 1.938-.009 3.864-.009 5.805 0 1.232.063 2.363-.138 2.711-.33.689-1.18.601-1.566.48-.396-.196-.597-.466-.83-.855-.063-.105-.11-.196-.127-.196l-1.825 1.125c.305.63.75 1.172 1.324 1.517.855.51 2.004.675 3.207.405.783-.226 1.458-.691 1.811-1.411.51-.93.402-2.07.397-3.346.012-2.054 0-4.109 0-6.179z'></path></svg></span> JavaScript
|
||||
</div>
|
||||
<div>
|
||||
<span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M1.125 0C.502 0 0 .502 0 1.125v21.75C0 23.498.502 24 1.125 24h21.75c.623 0 1.125-.502 1.125-1.125V1.125C24 .502 23.498 0 22.875 0zm17.363 9.75q.918 0 1.627.111a6.4 6.4 0 0 1 1.306.34v2.458a4 4 0 0 0-.643-.361 5 5 0 0 0-.717-.26 5.5 5.5 0 0 0-1.426-.2q-.45 0-.819.086a2.1 2.1 0 0 0-.623.242q-.254.156-.393.374a.9.9 0 0 0-.14.49q0 .294.156.529.156.234.443.444c.287.21.423.276.696.41q.41.203.926.416.705.296 1.266.628.561.333.963.753.402.418.614.957.213.538.214 1.253 0 .986-.373 1.656a3.03 3.03 0 0 1-1.012 1.085 4.4 4.4 0 0 1-1.487.596q-.85.18-1.79.18a10 10 0 0 1-1.84-.164 5.5 5.5 0 0 1-1.512-.493v-2.63a5.03 5.03 0 0 0 3.237 1.2q.5 0 .872-.09.373-.09.623-.25.249-.162.373-.38a1.02 1.02 0 0 0-.074-1.089 2.1 2.1 0 0 0-.537-.5 5.6 5.6 0 0 0-.807-.444 28 28 0 0 0-1.007-.436q-1.377-.575-2.053-1.405t-.676-2.005q0-.92.369-1.582.368-.662 1.004-1.089a4.5 4.5 0 0 1 1.47-.629 7.5 7.5 0 0 1 1.77-.201m-15.113.188h9.563v2.166H9.506v9.646H6.789v-9.646H3.375z"></path></svg></span> <abbr title="TypeScript is a stricter version of JavaScript, where you have define types.">TypeScript</abbr>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='tabbed-block'>
|
||||
<h3>Content Manager</h3>
|
||||
<div class='logo-and-title' >
|
||||
<img src='/src/yoco-logo-206x206.png' /><h6>Yoco</h6><span class='annotate'>(1)</span><ol><li>Yoco is the largest payments processor for small- and medium-businesses in South Africa.</li></ol>
|
||||
</div>
|
||||
<div class='tags'>financial services, payments, hardware, scale-up, series b</div>
|
||||
<p class='blurb'>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.</p>
|
||||
</div>
|
||||
<div class='tabbed-block'>
|
||||
<h3>Communications Specialist</h3>
|
||||
<div class='logo-and-title' >
|
||||
<img src='/src/allan-gray-logo-243x160.png' /><h6>Allan Gray</h6><span class='annotate'>(1)</span><ol><li>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.</li></ol>
|
||||
</div>
|
||||
<div class='tags'>financial services, investment, unit trusts (mutual funds), established, private</div>
|
||||
<p class='blurb'>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.</p>
|
||||
</div>
|
||||
<div class='tabbed-block'>
|
||||
<h3>Copywriting</h3>
|
||||
<div class='logo-and-title' >
|
||||
<img src='/src/the-jupiter-drawing-room-logo-119x118.png' /><h6>The Jupiter Drawing Room</h6><span class='annotate'>(1)</span><ol><li>The Jupiter Drawing Room is an advertising agency that serviced clients across South Africa and Namibia.</li></ol>
|
||||
</div>
|
||||
<div class='tags'>marketing, advertising, print, radio, television, online, established, private</div>
|
||||
<p class='blurb'>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 <abbr title='South African advertising awards for creativity in the field.'>Loeries</abbr>; a Silver <abbr title='An international advertising awards for creativity in communications.'>Cannes</abbr> Lion; and a Bronze <abbr title='An American advertising award for creative excellence.'>Clio</abbr>.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class='tabbed-control tabbed-control--prev' hidden=''>
|
||||
<button class='tabbed-button' tabindex='-1' aria-hidden='true'></button>
|
||||
|
|
@ -279,24 +279,6 @@ body {
|
|||
<media-audio-layout></media-audio-layout>
|
||||
</media-player>
|
||||
</li>
|
||||
<!-- <li>
|
||||
<h6>
|
||||
<span class="twemoji">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 3 1 9l11 6 9-4.91V17h2V9M5 13.18v4L12 21l7-3.82v-4L12 17z"></path></svg>
|
||||
</span> Academic
|
||||
</h6>
|
||||
<p>My university research paper was published in an anthology of the best student papers.</p>
|
||||
<a href="/src/historical-approaches-vol7.pdf" target="_blank" ><div class="button">Read the paper</div></a>
|
||||
</li>
|
||||
<li>
|
||||
<h6>
|
||||
<span class="twemoji">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 3 1 9l11 6 9-4.91V17h2V9M5 13.18v4L12 21l7-3.82v-4L12 17z"></path></svg>
|
||||
</span> Academic
|
||||
</h6>
|
||||
<p>My university research paper was published in an anthology of the best student papers.</p>
|
||||
<a href="/src/historical-approaches-vol7.pdf" target="_blank" ><div class="button">Read the paper</div></a>
|
||||
</li> -->
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -308,16 +290,16 @@ body {
|
|||
<h3>Technical</h3>
|
||||
<p>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.</p>
|
||||
<div>
|
||||
<b><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M16.36 14c.08-.66.14-1.32.14-2s-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2m-5.15 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95a8.03 8.03 0 0 1-4.33 3.56M14.34 14H9.66c-.1-.66-.16-1.32-.16-2s.06-1.35.16-2h4.68c.09.65.16 1.32.16 2s-.07 1.34-.16 2M12 19.96c-.83-1.2-1.5-2.53-1.91-3.96h3.82c-.41 1.43-1.08 2.76-1.91 3.96M8 8H5.08A7.92 7.92 0 0 1 9.4 4.44C8.8 5.55 8.35 6.75 8 8m-2.92 8H8c.35 1.25.8 2.45 1.4 3.56A8 8 0 0 1 5.08 16m-.82-2C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2s.06 1.34.14 2M12 4.03c.83 1.2 1.5 2.54 1.91 3.97h-3.82c.41-1.43 1.08-2.77 1.91-3.97M18.92 8h-2.95a15.7 15.7 0 0 0-1.38-3.56c1.84.63 3.37 1.9 4.33 3.56M12 2C6.47 2 2 6.5 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2"></path></svg></span> <span>Web development</span></b> <div class='tags'>html, js, css, sass, python, static site generators, node.js, yaml, appsmith</div>
|
||||
<b><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M16.36 14c.08-.66.14-1.32.14-2s-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2m-5.15 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95a8.03 8.03 0 0 1-4.33 3.56M14.34 14H9.66c-.1-.66-.16-1.32-.16-2s.06-1.35.16-2h4.68c.09.65.16 1.32.16 2s-.07 1.34-.16 2M12 19.96c-.83-1.2-1.5-2.53-1.91-3.96h3.82c-.41 1.43-1.08 2.76-1.91 3.96M8 8H5.08A7.92 7.92 0 0 1 9.4 4.44C8.8 5.55 8.35 6.75 8 8m-2.92 8H8c.35 1.25.8 2.45 1.4 3.56A8 8 0 0 1 5.08 16m-.82-2C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2s.06 1.34.14 2M12 4.03c.83 1.2 1.5 2.54 1.91 3.97h-3.82c.41-1.43 1.08-2.77 1.91-3.97M18.92 8h-2.95a15.7 15.7 0 0 0-1.38-3.56c1.84.63 3.37 1.9 4.33 3.56M12 2C6.47 2 2 6.5 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2"></path></svg></span> <span>Web development</span></b> <div class='tags'>html, javascript, css, sass, python, static site generators, node.js, yaml, appsmith</div>
|
||||
</div>
|
||||
<div>
|
||||
<b><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M0 1.75C0 .784.784 0 1.75 0h3.5C6.216 0 7 .784 7 1.75v3.5A1.75 1.75 0 0 1 5.25 7H4v4a1 1 0 0 0 1 1h4v-1.25C9 9.784 9.784 9 10.75 9h3.5c.966 0 1.75.784 1.75 1.75v3.5A1.75 1.75 0 0 1 14.25 16h-3.5A1.75 1.75 0 0 1 9 14.25v-.75H5A2.5 2.5 0 0 1 2.5 11V7h-.75A1.75 1.75 0 0 1 0 5.25Zm1.75-.25a.25.25 0 0 0-.25.25v3.5c0 .138.112.25.25.25h3.5a.25.25 0 0 0 .25-.25v-3.5a.25.25 0 0 0-.25-.25Zm9 9a.25.25 0 0 0-.25.25v3.5c0 .138.112.25.25.25h3.5a.25.25 0 0 0 .25-.25v-3.5a.25.25 0 0 0-.25-.25Z"></path></svg></span> <span>DocOps and automation</span></b> <div class='tags'>github workflows, vale linting, shell scripting, node red</div>
|
||||
</div>
|
||||
<div>
|
||||
<b><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 3h2v2H5v5a2 2 0 0 1-2 2 2 2 0 0 1 2 2v5h2v2H5c-1.07-.27-2-.9-2-2v-4a2 2 0 0 0-2-2H0v-2h1a2 2 0 0 0 2-2V5a2 2 0 0 1 2-2m14 0a2 2 0 0 1 2 2v4a2 2 0 0 0 2 2h1v2h-1a2 2 0 0 0-2 2v4a2 2 0 0 1-2 2h-2v-2h2v-5a2 2 0 0 1 2-2 2 2 0 0 1-2-2V5h-2V3zm-7 12a1 1 0 0 1 1 1 1 1 0 0 1-1 1 1 1 0 0 1-1-1 1 1 0 0 1 1-1m-4 0a1 1 0 0 1 1 1 1 1 0 0 1-1 1 1 1 0 0 1-1-1 1 1 0 0 1 1-1m8 0a1 1 0 0 1 1 1 1 1 0 0 1-1 1 1 1 0 0 1-1-1 1 1 0 0 1 1-1"></path></svg></span> <span>Reading and writing code</span></b> <div class='tags'>js, python, json, xpath, yaml, openapi spec, graphql, markdown</div>
|
||||
<b><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 3h2v2H5v5a2 2 0 0 1-2 2 2 2 0 0 1 2 2v5h2v2H5c-1.07-.27-2-.9-2-2v-4a2 2 0 0 0-2-2H0v-2h1a2 2 0 0 0 2-2V5a2 2 0 0 1 2-2m14 0a2 2 0 0 1 2 2v4a2 2 0 0 0 2 2h1v2h-1a2 2 0 0 0-2 2v4a2 2 0 0 1-2 2h-2v-2h2v-5a2 2 0 0 1 2-2 2 2 0 0 1-2-2V5h-2V3zm-7 12a1 1 0 0 1 1 1 1 1 0 0 1-1 1 1 1 0 0 1-1-1 1 1 0 0 1 1-1m-4 0a1 1 0 0 1 1 1 1 1 0 0 1-1 1 1 1 0 0 1-1-1 1 1 0 0 1 1-1m8 0a1 1 0 0 1 1 1 1 1 0 0 1-1 1 1 1 0 0 1-1-1 1 1 0 0 1 1-1"></path></svg></span> <span>Reading and writing code</span></b> <div class='tags'>javascript, python, json, xpath, yaml, openapi spec, graphql, markdown</div>
|
||||
</div>
|
||||
<div>
|
||||
<b><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2a2 2 0 0 1 2 2c0 .74-.4 1.39-1 1.73V7h1a7 7 0 0 1 7 7h1a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-1v1a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-1H2a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h1a7 7 0 0 1 7-7h1V5.73c-.6-.34-1-.99-1-1.73a2 2 0 0 1 2-2M7.5 13A2.5 2.5 0 0 0 5 15.5 2.5 2.5 0 0 0 7.5 18a2.5 2.5 0 0 0 2.5-2.5A2.5 2.5 0 0 0 7.5 13m9 0a2.5 2.5 0 0 0-2.5 2.5 2.5 2.5 0 0 0 2.5 2.5 2.5 2.5 0 0 0 2.5-2.5 2.5 2.5 0 0 0-2.5-2.5"></path></svg></span> <span>Machine learning</span></b> <div class='tags'>ollama, deepseek, qwen, llama, openai, anthropic, agents, chatbots, rag, image generation, comfyui, openweb-ui</div>
|
||||
<b><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2a2 2 0 0 1 2 2c0 .74-.4 1.39-1 1.73V7h1a7 7 0 0 1 7 7h1a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-1v1a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-1H2a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h1a7 7 0 0 1 7-7h1V5.73c-.6-.34-1-.99-1-1.73a2 2 0 0 1 2-2M7.5 13A2.5 2.5 0 0 0 5 15.5 2.5 2.5 0 0 0 7.5 18a2.5 2.5 0 0 0 2.5-2.5A2.5 2.5 0 0 0 7.5 13m9 0a2.5 2.5 0 0 0-2.5 2.5 2.5 2.5 0 0 0 2.5 2.5 2.5 2.5 0 0 0 2.5-2.5 2.5 2.5 0 0 0-2.5-2.5"></path></svg></span> <span>Machine learning</span></b> <div class='tags'>ollama, deepseek, qwen, llama, agents, chatbots, comfyui, openweb-ui</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -369,7 +351,11 @@ body {
|
|||
</div>
|
||||
|
||||
<div class="contact-me">
|
||||
<a href="mailto:g_null+resume321498175290@aleeas.com" target="_blank" ><div class="button">Contact me</div></a>
|
||||
<a href="mailto:g_null+resume321498175290@aleeas.com" target="_blank" >
|
||||
<div class="button">
|
||||
<span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m20 8-8 5-8-5V6l8 5 8-5m0-2H4c-1.11 0-2 .89-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2"></path></svg></span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div id='loader'>
|
||||
|
|
|
|||
Binary file not shown.
BIN
docs/src/fonts/dm-mono/DMMono-Italic.woff2
Normal file
BIN
docs/src/fonts/dm-mono/DMMono-Italic.woff2
Normal file
Binary file not shown.
Binary file not shown.
BIN
docs/src/fonts/dm-mono/DMMono-Light.woff2
Normal file
BIN
docs/src/fonts/dm-mono/DMMono-Light.woff2
Normal file
Binary file not shown.
Binary file not shown.
BIN
docs/src/fonts/dm-mono/DMMono-LightItalic.woff2
Normal file
BIN
docs/src/fonts/dm-mono/DMMono-LightItalic.woff2
Normal file
Binary file not shown.
Binary file not shown.
BIN
docs/src/fonts/dm-mono/DMMono-Medium.woff2
Normal file
BIN
docs/src/fonts/dm-mono/DMMono-Medium.woff2
Normal file
Binary file not shown.
Binary file not shown.
BIN
docs/src/fonts/dm-mono/DMMono-MediumItalic.woff2
Normal file
BIN
docs/src/fonts/dm-mono/DMMono-MediumItalic.woff2
Normal file
Binary file not shown.
Binary file not shown.
BIN
docs/src/fonts/dm-mono/DMMono-Regular.woff2
Normal file
BIN
docs/src/fonts/dm-mono/DMMono-Regular.woff2
Normal file
Binary file not shown.
Binary file not shown.
BIN
docs/src/fonts/lato/Lato-Bold.woff2
Normal file
BIN
docs/src/fonts/lato/Lato-Bold.woff2
Normal file
Binary file not shown.
Binary file not shown.
BIN
docs/src/fonts/lato/Lato-BoldItalic.woff2
Normal file
BIN
docs/src/fonts/lato/Lato-BoldItalic.woff2
Normal file
Binary file not shown.
Binary file not shown.
BIN
docs/src/fonts/lato/Lato-Italic.woff2
Normal file
BIN
docs/src/fonts/lato/Lato-Italic.woff2
Normal file
Binary file not shown.
Binary file not shown.
BIN
docs/src/fonts/lato/Lato-Regular.woff2
Normal file
BIN
docs/src/fonts/lato/Lato-Regular.woff2
Normal file
Binary file not shown.
Binary file not shown.
BIN
docs/src/fonts/open-sans/OpenSans-ExtraBold.woff2
Normal file
BIN
docs/src/fonts/open-sans/OpenSans-ExtraBold.woff2
Normal file
Binary file not shown.
Binary file not shown.
BIN
docs/src/fonts/open-sans/OpenSans-Medium.woff2
Normal file
BIN
docs/src/fonts/open-sans/OpenSans-Medium.woff2
Normal file
Binary file not shown.
|
|
@ -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');
|
||||
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -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}`;
|
||||
}
|
||||
|
|
|
|||
15
docs/src/stylesheets/_button.css
Normal file
15
docs/src/stylesheets/_button.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
47
docs/src/stylesheets/_faces.css
Normal file
47
docs/src/stylesheets/_faces.css
Normal file
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
74
docs/src/stylesheets/_hero-text.css
Normal file
74
docs/src/stylesheets/_hero-text.css
Normal file
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
77
docs/src/stylesheets/_loader.css
Normal file
77
docs/src/stylesheets/_loader.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
37
docs/src/stylesheets/_media-player.css
Normal file
37
docs/src/stylesheets/_media-player.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
228
docs/src/stylesheets/_page-resume.css
Normal file
228
docs/src/stylesheets/_page-resume.css
Normal file
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
*****************************/
|
||||
|
|
|
|||
|
|
@ -1,7 +1 @@
|
|||
:material-web:
|
||||
|
||||
:material-code-json:
|
||||
|
||||
:octicons-workflow-16:
|
||||
|
||||
:material-robot:
|
||||
:material-email:
|
||||
|
|
|
|||
28
mkdocs.yml
28
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
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue