g_it/site
g_it/site
1
0
Fork 0
Code Issues Releases 1 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