g_it/site
g_it/site
1
0
Fork 0
Code Issues Releases Wiki Activity Actions

Make it more mobile-friendly and add page loader.

Browse source
This commit is contained in:
g_it 2026-02-23 00:08:49 +01:00
commit ee8bda15e1
Signed by untrusted user who does not match committer: g_it
GPG key ID: A2B0A7C06A054627
13 changed files with 208 additions and 61 deletions
Download patch file Download diff file Expand all files Collapse all files

48
content/assets/css/loader.css Executable file
View file

@ -0,0 +1,48 @@
@import url("theme.css");
/*****************************
* LOADER
* Styling for the page loader.
*****************************/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: var(--neutral-grey);
}
.page-loader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--neutral-grey);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
opacity: 1;
transition: opacity 0.5s ease-in-out;
}
.page-loader.hidden {
opacity: 0;
pointer-events: none;
}
.loader-gif {
width: 120px;
height: auto;
}
/*
main {
padding: 40px;
max-width: 800px;
margin: 0 auto;
} */

145
content/assets/css/resume.css
View file

@ -23,24 +23,29 @@ body {
}
.twemoji {
--md-icon-size: 1.2rem !important;
--md-icon-size: 1.2rem;
vertical-align: middle !important;
}
}
.md-typeset .grid {
grid-gap: .4rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
margin: .4em 0;
}
/*****************************/
#experience {
min-height: 80vh;
height: clamp(60vh, 75vh, 100vh);
.cards {
/* OLD: padding: 1rem; */
padding: clamp(0.75rem, 2vw, 1.5rem);
padding: .4rem;
h2 {
color: var(--dark-grey);
font-family: var(--general-sans);
/* OLD: font-size: 2.5rem; */
font-size: clamp(1.5rem, 5vw, 2.5rem);
line-height: 1;
margin: 0;
@ -49,11 +54,9 @@ body {
.company {
font-family: var(--general-sans);
font-weight: 400;
/* OLD: font-size: 1.2rem; */
font-size: clamp(0.9rem, 2vw, 1.2rem);
span {
/* OLD: font-size: 0.7rem; */
font-size: clamp(0.6rem, 1.2vw, 0.7rem);
font-weight: 400;
margin: 0 0 0 25px;
@ -62,14 +65,11 @@ body {
.job-blurb {
font-family: var(--general-serif);
/* OLD: font-size: 1.2rem; */
font-size: clamp(0.9rem, 2vw, 1.2rem);
font-variation-settings: "opsz" 8;
font-weight: 700;
line-height: 1.5;
/* OLD: margin-bottom: 30px; */
margin-bottom: clamp(1.5rem, 3vw, 2rem);
/* OLD: margin-top: 30px; */
margin-top: clamp(1.5rem, 3vw, 2rem);
}
@ -80,7 +80,6 @@ body {
h5 {
color: var(--dark-grey);
cursor: pointer;
/* OLD: font-size: 0.9rem; */
font-size: clamp(0.75rem, 1.8vw, 0.9rem);
margin: 0;
text-transform: none;
@ -106,8 +105,8 @@ body {
background-repeat: no-repeat;
filter: saturate(0);
height: 112px;
margin-left: 3rem;
margin-right: 3rem;
margin-left: 1rem;
margin-right: 1rem;
position: relative;
&::after {
@ -119,7 +118,7 @@ body {
position: absolute;
right: 0;
top: 0;
z-index: -5;
z-index: -1;
}
}
}
@ -132,10 +131,9 @@ body {
background-size: 50vh;
display: flex;
flex-direction: column;
height: 100vh;
height: clamp(50vh, 50vh + 10rem, 100vh);
justify-content: center;
text-align: center;
z-index: -5;
&::after {
background: rgba(250, 250, 250, 0.95);
@ -150,7 +148,6 @@ body {
.title {
font-family: var(--general-serif);
/* OLD: font-size: 5rem; */
font-size: clamp(2rem, 8vw, 5rem);
font-variation-settings: "opsz" 8;
font-weight: 900;
@ -167,8 +164,7 @@ body {
figcaption {
color: var(--dark-grey);
font-family: var(--general-sans);
/* OLD: font-size: 0.8rem; */
font-size: clamp(0.65rem, 1.2vw, 0.8rem);
font-size: clamp(0.9rem, 1.2vw, 1.2rem);
font-style: normal;
font-weight: 400;
}
@ -188,13 +184,12 @@ body {
background-color: var(--light-grey);
figure {
display: flex;
align-items: center;
gap: 0.75rem;
display: flex;
flex-wrap: wrap;
margin: 0;
gap: 0.75rem;
justify-content: center;
margin: 0;
img {
max-width: 150px;
@ -224,52 +219,57 @@ body {
margin: 2.5rem;
.cards {
ul li {
align-items: center;
display: flex;
flex-direction: column;
/* OLD: font-size: 1.8rem; */
font-size: clamp(1.2rem, 3vw, 1.8rem);
justify-content: flex-start;
justify-content: space-evenly;
padding: 1rem;
.technical-icons {
align-items: center;
column-gap: 1.5rem;
align-content: stretch;
column-gap: 1rem;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
row-gap: 1.5rem;
justify-content: space-evenly;
gap: 1rem;
flex: 1;
width: 100%;
.technical {
align-items: center;
display: flex;
min-width: 80px;
span {
align-items: flex-end;
align-items: center;
display: flex;
font-size: 0.7rem;
gap: 5px;
height: 100%;
img,
svg {
height: 1rem;
margin-right: 5px;
width: 1rem;
max-height: 1rem;
max-width: 1rem;
object-fit: contain;
vertical-align: middle;
width: 1rem;
flex-shrink: 0;
}
}
}
}
.writing-types {
/* OLD: font-size: 0.8rem; */
flex: 1;
font-size: clamp(0.7rem, 1.5vw, 0.8rem);
justify-content: center;
justify-content: stretch;
margin-bottom: 0.7rem;
text-align: left;
width: 100%;
svg {
height: 0.8rem;
@ -277,19 +277,18 @@ body {
}
.media-tools {
figure {
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
margin: 0;
justify-content: center;
figure {
align-items: center;
display: flex;
gap: 0.75rem;
justify-content: space-evenly;
margin: 0;
img {
max-width: 150px;
max-width: 100px;
width: 20%;
min-width: 100px;
min-width: 80px;
height: auto;
display: block;
padding: 20px;
@ -299,7 +298,6 @@ body {
color: var(--dark-grey);
flex: 1 1 200px;
font-family: var(--general-sans);
/* OLD: font-size: 0.8rem; */
font-size: clamp(0.7rem, 1.5vw, 0.8rem);
font-style: normal;
margin: 0;
@ -315,13 +313,28 @@ body {
grid-template-rows: repeat(2, 1fr);
margin-top: 0;
li {
border-bottom: 0.5px solid var(--light-grey);
border-top: 0.5px solid var(--light-grey);
display: flex;
flex-direction: row;
padding: 0;
margin: 0;
figcaption {
color: var(--dark-grey);
font-family: var(--general-code);
font-size: clamp(0.5rem, 0.7rem, 0.8rem);
font-style: normal;
font-weight: 400;
}
}
img {
max-width: 150px;
width: 15%;
min-width: 100px;
height: auto;
height: 40px;
display: block;
padding: 20px;
padding: 5px;
width: auto;
}
}
}
@ -331,13 +344,13 @@ body {
border-bottom: 2px solid var(--dark-grey);
color: var(--dark-grey);
font-family: var(--general-serif);
/* OLD: font-size: 1.2rem; */
font-size: clamp(1rem, 2.5vw, 1.2rem);
font-variation-settings: "opsz" 8;
font-weight: 700;
}
}
.faq-container {
position: relative;
@ -398,9 +411,12 @@ body {
z-index: 1000;
.icon {
font-size: 1rem;
position: absolute;
transition: opacity 0.3s;
span.twemoji {
--md-icon-size: clamp(1.2rem, 1vw + 2rem, 1.8rem);
}
}
.icon.question {
@ -539,8 +555,7 @@ body {
background-color: var(--neutral-grey);
display: flex;
flex-direction: row;
/* OLD: font-size: 0.7rem; */
font-size: clamp(0.65rem, 1.5vw, 0.7rem);
font-size: clamp(1rem, 2vw + 2rem, 1.3rem);
font-weight: 400;
justify-content: center;
padding: 10px;
@ -554,3 +569,23 @@ body {
margin: 0 8px;
}
}
/*****************************/
@media (max-width: 640px) {
#experience {
height: 45vh;
}
}
@media (max-width: 1300px) {
#skills>div.grid>ul>li:nth-child(3) {
display: none;
}
}
@media (max-width: 1000px) {
#skills>div.grid>ul>li:nth-child(4) {
display: none;
}
}

11
content/assets/css/theme.css
View file

@ -32,6 +32,7 @@
/* General */
@font-face {
font-display: swap;
font-family: 'Source Code';
font-style: normal;
font-weight: 100 700;
@ -39,6 +40,7 @@
}
@font-face {
font-display: swap;
font-family: 'Source Sans';
font-style: normal;
font-weight: 100 700;
@ -46,6 +48,7 @@
}
@font-face {
font-display: swap;
font-family: 'Source Serif';
font-style: normal;
font-weight: 100 700;
@ -54,6 +57,7 @@
/* Technical */
@font-face {
font-display: swap;
font-family: 'DM Mono';
font-style: normal;
font-weight: 100 700;
@ -61,6 +65,7 @@
}
@font-face {
font-display: swap;
font-family: 'DM Sans';
font-style: normal;
font-weight: 100 700;
@ -68,6 +73,7 @@
}
@font-face {
font-display: swap;
font-family: 'Tiny5';
font-style: normal;
font-weight: 900;
@ -76,6 +82,7 @@
/* Visual */
@font-face {
font-display: swap;
font-family: 'Plaster';
font-style: normal;
font-weight: 900;
@ -83,6 +90,7 @@
}
@font-face {
font-display: swap;
font-family: 'Rubik';
font-style: normal;
font-weight: 100 700;
@ -91,6 +99,7 @@
/* Words */
@font-face {
font-display: swap;
font-family: 'EB Garamond';
font-style: italic;
font-weight: 100 700;
@ -98,6 +107,7 @@
}
@font-face {
font-display: swap;
font-family: 'EB Garamond';
font-style: normal;
font-weight: 100 700;
@ -105,6 +115,7 @@
}
@font-face {
font-display: swap;
font-family: 'Playfair Display SC';
font-style: normal;
font-weight: 900;

21
content/assets/js/loader.js Executable file
View file

@ -0,0 +1,21 @@
// LOADER.js
// Manages the page loader
let loaderHidden = false;
// Hide the page loader after x seconds once DOM is loaded
document.addEventListener('DOMContentLoaded', function () {
const pageLoader = document.getElementById('pageLoader');
setTimeout(function () {
pageLoader.classList.add('hidden');
loaderHidden = true;
}, 2800);
});
// Maximum timeout of 8 seconds - redirect to error page if loader still showing
setTimeout(function () {
if (!loaderHidden) {
window.location.href = '../error.html'; // Change to your error page path
}
}, 8000);

BIN
content/assets/media/download-link-256x256.webp Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
content/assets/media/faces-animation-250x352.gif Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 47 KiB

BIN
content/assets/media/faces-animation.key Executable file
View file

Binary file not shown.

BIN
content/assets/media/git-link-512x512.webp
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.4 KiB

After

Width:  |  Height:  |  Size: 3.3 KiB

Before After
Before After

BIN
content/assets/media/site-link-512x512.webp
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 7.1 KiB

11
content/overrides/main.html
View file

@ -2,6 +2,9 @@
{% block extrahead %}
<link rel="icon" href="../assets/media/face-favicon-512x512.png" sizes="any">
<!-- The page loader CSS -->
<link rel="stylesheet" href="../assets/css/loader.css">
{% endblock %}
{% block site_meta %}
@ -30,6 +33,14 @@
{% block content %}
<!-- The page loader JS -->
<script src="../assets/js/loader.js"></script>
<!-- The page loader HTML -->
<div id="pageLoader" class="page-loader">
<img src="../assets/media/faces-animation-250x352.gif" alt="Loading..." class="loader-gif">
</div>
<!-- Use the extra_js values from a page's frontmatter -->
{% for path in page.meta.extra_js or [] %}
<script src="{{ path | url }}"></script>

4
content/overrides/partials/footer.html
View file

@ -1,5 +1,7 @@
<footer>
<div class="logo"><img src="../assets/media/g-logo-250x250.webp" alt="The G* Logo"></div>
<div class="logo">
<a href="/"><img src="../assets/media/g-logo-250x250.webp" alt="The G* Logo"></a>
</div>
<div class="tcs">
<span>© all rights reserved</span>
<span><a href="https://www.linkedin.com/in/gugulet-hu/">contact</a></span>

34
content/resume.md
View file

@ -72,12 +72,12 @@ title: Resume
<div class="spread">
<h2>Documentation Engineer</h2>
<div class="company"><abbr title="SPREAD is a Software-as-a-Service (SaaS) platform for creating actionable and contextualised data for product engineers. The platform counts Volkswagen, Audi, BMW, and other automotive firms as users.">SPREAD</abbr> <span>2024 to 2026</span></div>
<div class="job-blurb">Hired as the first Technical Writer to establish the documentation function. <a href="https://docs.spread.ai" target="_blank"><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="var(--dark-grey)" d="M384 32c35.3 0 64 28.7 64 64v320c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96c0-35.3 28.7-64 64-64zM272 296c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24H184c-13.3 0-24 10.7-24 24s10.7 24 24 24h54.1l-103 103c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l103-103z"></path></svg></span></a></div>
<div class="job-blurb">First Technical Writer hired; to establish the documentation function. <a href="https://docs.spread.ai" target="_blank"><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="var(--dark-grey)" d="M384 32c35.3 0 64 28.7 64 64v320c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96c0-35.3 28.7-64 64-64zM272 296c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24H184c-13.3 0-24 10.7-24 24s10.7 24 24 24h54.1l-103 103c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l103-103z"></path></svg></span></a></div>
<div class="job-achievements">
<h5 style="cursor: default">Built a docs-as-code publishing pipeline</h5>
<p>Built a pipeline that used GitHub Actions to build the documentation site, Vale to lint content, Docker to deploy the site, and shell scripting.</p>
<h5 onclick="document.querySelector('.spread-docs-modal-container').classList.add('is-visible')">Established the documentation function <span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M384 32c35.3 0 64 28.7 64 64v320c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96c0-35.3 28.7-64 64-64zM272 296c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24H184c-13.3 0-24 10.7-24 24s10.7 24 24 24h54.1l-103 103c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l103-103z"></path></svg></span></h5>
<p>Socialized the rest of the company to documentation processes and workings; this included onboarding colleagues to edit and use docs.</p>
<p>Socialized the company to documentation processes; this included onboarding colleagues to edit and use docs.</p>
<h5 style="cursor: default">Documented the full product range</h5>
<p>Documented the full product range within two quarters. Kept the documentation up to date through two product refreshes.</p>
</div>
@ -273,10 +273,30 @@ title: Resume
<h3>AI</h3>
<div class="grid cards ai">
<ul>
<li><abbr title="Used Ollama to manage, test, and run open-source models locally."><img src="assets/media/ollama-logo-250x250.webp" alt="The Ollama logo" ></abbr></li>
<li><abbr title="Created workflows to review drafts as reader personas. This was useful for engineers when drafting content."><img src="assets/media/n8n-logo-250x250.webp" alt="The n8n logo" ></abbr></li>
<li><abbr title="Experimented with offering our own Model Context Protocol server at Spread. Ultimately it proved more useful for internal use."><img src="assets/media/modelcontextprotocol-logo-250x250.webp" alt="The Model Context Protocol logo" ></abbr></li>
<li><abbr title="Used Krita (and its plugins) to create simple AI-generated graphics locally. An easier interface than SwarmUI."><img src="assets/media/krita-logo-200x200.webp" alt="The Krita logo" ></abbr></li>
<li>
<figure>
<img src="assets/media/ollama-logo-250x250.webp" alt="The Ollama logo" >
<figcaption>Used Ollama to manage, test, and run open-source models locally.</figcaption>
</figure>
</li>
<li>
<figure>
<img src="assets/media/n8n-logo-250x250.webp" alt="The n8n logo" >
<figcaption>Created workflows to review drafts as reader personas.</figcaption>
</figure>
</li>
<li>
<figure>
<img src="assets/media/modelcontextprotocol-logo-250x250.webp" alt="The MCP logo" >
<figcaption>Experimented with offering an Model Context Protocol server at Spread.</figcaption>
</figure>
</li>
<li>
<figure>
<img src="assets/media/krita-logo-200x200.webp" alt="The Krita logo" >
<figcaption>Used Krita to create simple AI-generated graphics locally.</figcaption>
</figure>
</li>
</ul>
</div>
</li>
@ -326,7 +346,7 @@ title: Resume
<div class="prefooter" >
<div><a href="https://git.gugulet.hu/explore" target="_blank"><img src="assets/media/git-link-512x512.webp" alt="Self-hosted ForgeJo instance with git repos"></a></div>
<div><a href="https://linkedin.com/in/gugulet-hu" target="_blank"><img src="assets/media/linkedin-logo-512x512.webp" alt="Link to LinkedIn profile"></a></div>
<div><a href="https://gugulet.hu" target="_blank"><img src="assets/media/site-link-512x512.webp" alt="Link to the home page"></a></div>
<!-- <div><a href="https://gugulet.hu" target="_blank"><img src="assets/media/download-link-256x256.webp" alt="Link to the home page"></a></div> -->
</div>
<div class="faq-container">