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

Adding deploy folder.

Browse source
This commit is contained in:
g_it 2026-02-16 12:31:11 +01:00
commit d460a35d31
Signed by untrusted user who does not match committer: g_it
GPG key ID: A2B0A7C06A054627
121 changed files with 3133 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

50
deploy/assets/css/chapter.css Executable file
View file

@ -0,0 +1,50 @@
/*****************************
* CHAPTER
* Styling for chapter pages.
*****************************/
/* Removing all padding, margins, etc. The content covers the entire viewing area */
body,
.md-content__inner,
.md-main__inner,
.md-grid {
box-sizing: border-box;
margin: 0;
max-width: none;
padding: 0;
}
body {
align-items: center;
display: flex;
justify-content: center;
min-height: 100%;
width: 100%;
}
article,
.md-container,
div.md-content {
margin: 0;
min-height: 100%;
padding: 0;
width: 100%;
}
article.md-content__inner.md-typeset:before,
article.md-content__inner.md-typeset:after {
content: none;
}
/* Hide announcements bar on chapter pages */
header,
[data-md-component="skip"],
[data-md-component="announce"],
.md-content .md-typeset h1 {
display: none !important;
}
/* Hide the repo stuff */
.md-source {
display: none !important;
}

129
deploy/assets/css/index.css Executable file
View file

@ -0,0 +1,129 @@
@import url("theme.css");
/*****************************
* INDEX
* Styling for the homepage.
*****************************/
.content {
align-items: center;
display: flex;
flex-direction: column;
justify-content: flex-start;
margin: 0 auto;
max-width: 900px;
padding: 0;
position: relative;
width: 100%;
.faces {
align-items: center;
flex-grow: 0;
display: flex;
justify-content: center;
min-height: 320px;
margin-top: 0;
position: relative;
width: 100%;
.slide {
border-radius: 10px;
left: 50%;
max-width: 600px;
opacity: 0;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
visibility: hidden;
width: 80%;
z-index: 1;
img {
border-radius: 10px;
display: block;
height: auto;
width: 100%;
}
}
}
ul {
align-items: center;
display: flex;
height: 1.4em;
justify-content: center;
left: 50%;
line-height: 1.4em;
list-style: none;
margin: 0 !important;
max-width: 900px;
overflow: visible;
pointer-events: none;
padding: 0;
position: absolute;
text-align: center;
top: 20px;
transform: translateX(-50%);
width: 100%;
z-index: 0;
li {
align-items: center;
box-sizing: border-box;
display: flex;
font-size: 15vw;
inset: 0;
justify-content: center;
margin: 0 !important;
padding: 0;
pointer-events: auto;
position: absolute;
text-align: center;
white-space: nowrap;
width: 100%;
a {
text-decoration: none !important;
}
&:hover {
cursor: pointer;
}
&:nth-child(2) {
font-family: var(--words-title);
}
&:nth-child(3) {
font-family: var(--visuals-title);
}
&:nth-child(4) {
font-family: var(--technical-title);
}
}
}
}
.hero {
align-items: center;
display: flex;
height: 100vh;
justify-content: center;
margin: 0;
overflow: hidden;
padding: 0;
width: 100%;
}
.hidden {
display: none;
}
footer {
background: repeating-linear-gradient(0deg, transparent, transparent 19px, rgba(75, 85, 99, 0.08) 19px, rgba(75, 85, 99, 0.08) 20px, transparent 20px, transparent 39px, rgba(75, 85, 99, 0.08) 39px, rgba(75, 85, 99, 0.08) 40px),
repeating-linear-gradient(90deg, transparent, transparent 19px, rgba(75, 85, 99, 0.08) 19px, rgba(75, 85, 99, 0.08) 20px, transparent 20px, transparent 39px, rgba(75, 85, 99, 0.08) 39px, rgba(75, 85, 99, 0.08) 40px),
radial-gradient(circle at 20px 20px, rgba(55, 65, 81, 0.12) 2px, transparent 2px),
radial-gradient(circle at 40px 40px, rgba(55, 65, 81, 0.12) 2px, transparent 2px);
font-family: var(--general-sans);
}

538
deploy/assets/css/resume.css Executable file
View file

@ -0,0 +1,538 @@
@import url("theme.css");
/*****************************
* RESUME
* Styling for the resume page.
*****************************/
* {
z-index: 1;
}
body {
color: var(--dark-grey);
font-family: var(--general-sans);
li {
/* Remove the default styles for grids */
border: none !important;
&:hover {
box-shadow: none !important;
}
}
.twemoji {
--md-icon-size: 1.2rem !important;
vertical-align: middle !important;
}
}
/*****************************/
#experience {
min-height: 80vh;
.cards {
padding: 1rem;
h2 {
color: var(--dark-grey);
font-family: var(--general-sans);
font-size: 2.5rem;
line-height: 1;
margin: 0;
}
.company {
font-family: var(--general-sans);
font-weight: 400;
font-size: 1.2rem;
span {
font-size: 0.7rem;
font-weight: 400;
margin: 0 0 0 25px;
}
}
.job-blurb {
font-family: var(--general-serif);
font-size: 1.2rem;
font-variation-settings: "opsz" 8;
font-weight: 700;
line-height: 1.5;
margin-bottom: 30px;
margin-top: 30px;
}
.job-achievements {
font-family: var(--general-serif);
font-variation-settings: "opsz" 8;
h5 {
color: var(--dark-grey);
cursor: pointer;
font-size: 0.9rem;
margin: 0;
text-transform: none;
}
p {
margin: 0 0 10px 0;
}
}
}
.mambu {
background-image: url("../media/mambu-logo-272x263.png");
}
.spread {
background-image: url("../media/spread-ai-logo-125x144.png");
}
.mambu,
.spread {
background-size: contain;
background-repeat: no-repeat;
filter: saturate(0);
height: 112px;
margin-left: 3rem;
margin-right: 3rem;
position: relative;
&::after {
background: rgba(250, 250, 250, 0.70);
bottom: 0;
content: '';
left: 0;
pointer-events: none;
position: absolute;
right: 0;
top: 0;
z-index: -5;
}
}
}
#hero {
align-items: center;
background-image: url('../media/face-1276x1276.webp');
background-position: center center;
background-repeat: no-repeat;
background-size: 50vh;
display: flex;
flex-direction: column;
height: 100vh;
justify-content: center;
text-align: center;
z-index: -5;
&::after {
background: rgba(250, 250, 250, 0.95);
bottom: 0;
content: '';
position: absolute;
left: 0;
pointer-events: none;
right: 0;
top: 0;
}
.title {
font-family: var(--general-serif);
font-size: 5rem;
font-variation-settings: "opsz" 8;
font-weight: 900;
}
.metadetails {
border-bottom: 0.5px solid var(--light-grey);
border-top: 0.5px solid var(--light-grey);
display: flex;
flex-direction: row;
gap: 5rem;
margin-top: 1rem;
figcaption {
color: var(--dark-grey);
font-family: var(--general-sans);
font-size: 0.8rem;
font-style: normal;
font-weight: 400;
}
img {
height: 2.5rem;
}
}
}
#learning {
margin: 2.5rem;
.cards {
ul li {
background-color: var(--light-grey);
figure {
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
margin: 0;
justify-content: center;
img {
max-width: 150px;
width: 30%;
min-width: 100px;
height: auto;
display: block;
padding: 20px;
}
figcaption {
color: var(--dark-grey);
flex: 1 1 200px;
font-family: var(--general-sans);
font-size: 0.8rem;
font-style: normal;
margin: 0;
text-align: left;
}
}
}
}
}
#skills {
margin: 2.5rem;
.cards {
ul li {
align-items: center;
display: flex;
flex-direction: column;
font-size: 1.8rem;
justify-content: flex-start;
padding: 1rem;
.technical-icons {
align-items: center;
column-gap: 1.5rem;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
row-gap: 1.5rem;
.technical {
span {
align-items: flex-end;
display: flex;
font-size: 0.7rem;
img,
svg {
height: 1rem;
margin-right: 5px;
max-height: 1rem;
max-width: 1rem;
object-fit: contain;
vertical-align: middle;
width: 1rem;
}
}
}
}
.writing-types {
font-size: 0.8rem;
justify-content: center;
margin-bottom: 0.7rem;
text-align: left;
svg {
height: 0.8rem;
}
}
.media-tools {
figure {
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
margin: 0;
justify-content: center;
img {
max-width: 150px;
width: 20%;
min-width: 100px;
height: auto;
display: block;
padding: 20px;
}
figcaption {
color: var(--dark-grey);
flex: 1 1 200px;
font-family: var(--general-sans);
font-size: 0.8rem;
font-style: normal;
margin: 0;
text-align: left;
}
}
}
.ai {
grid-gap: 0.4rem;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
margin-top: 0;
img {
max-width: 150px;
width: 15%;
min-width: 100px;
height: auto;
display: block;
padding: 20px;
}
}
}
}
h3 {
border-bottom: 2px solid var(--dark-grey);
color: var(--dark-grey);
font-family: var(--general-serif);
font-size: 1.2rem;
font-variation-settings: "opsz" 8;
font-weight: 700;
}
}
.faq-container {
position: relative;
#faq-toggle {
&:checked {
&+.question-icon {
.icon.question {
opacity: 0;
}
.icon.close {
opacity: 1;
}
}
&~.faq {
opacity: 1;
visibility: visible;
}
}
}
.faq {
background-color: var(--neutral-grey);
border: 2px solid var(--dark-grey);
border-radius: 5px;
bottom: 50px;
opacity: 0;
padding: 20px;
position: fixed;
right: 20px;
transition: opacity 0.3s, visibility 0.3s;
visibility: hidden;
width: 400px;
z-index: 999;
h3 {
color: var(--dark-grey);
font-family: var(--general-serif);
font-size: 1.2rem;
font-variation-settings: "opsz" 8;
}
p {
font-size: 1rem;
}
}
.question-icon {
align-items: center;
bottom: 30px;
cursor: pointer;
display: flex;
justify-content: center;
position: fixed;
right: 20px;
width: 50px;
z-index: 1000;
.icon {
font-size: 1rem;
position: absolute;
transition: opacity 0.3s;
}
.icon.question {
opacity: 1;
}
.icon.close {
opacity: 0;
}
}
.visually-hidden {
height: 1px;
left: -9999px;
overflow: hidden;
position: absolute;
width: 1px;
}
}
.modal-container {
align-items: center;
background-color: rgba(250, 250, 250, 0.9);
display: none;
height: 100%;
justify-content: center;
position: fixed;
left: 0;
top: 0;
width: 100%;
z-index: 999;
&.is-visible {
display: flex;
}
.modal {
background-color: var(--neutral-grey);
border: 2px solid var(--dark-grey);
border-radius: 5px;
height: 80vh;
max-height: 1200px;
max-width: 1200px;
overflow: auto;
position: relative;
transition: opacity 0.3s, visibility 0.3s;
width: 80vw;
z-index: 999;
.body-image {
border: 1px solid var(--light-grey);
margin: 0 1rem;
width: 80%;
}
button {
background-color: var(--light-grey);
color: var(--dark-grey);
cursor: pointer;
border-radius: 5px;
font-size: 0.8rem;
font-weight: 700;
margin-bottom: 1rem;
margin-left: 1rem;
padding: 0.5rem;
}
h5 {
color: var(--dark-grey);
font-size: 0.8rem;
font-weight: 900;
margin-bottom: 0;
}
ul {
list-style-type: square;
li {
font-size: 1rem;
;
}
}
p {
margin-top: 0;
}
h5,
ul,
p {
padding: 0 1rem;
}
}
.close-icon {
position: absolute;
right: 5vw;
top: 5vh;
svg {
height: 1.8rem;
max-height: none;
width: 1.8rem;
}
}
}
.prefooter {
align-items: flex-start;
display: flex;
flex-direction: row;
gap: 2rem;
justify-content: center;
margin-top: 1.3rem;
margin-bottom: 0.5rem;
text-align: center;
div {
img {
height: 1.2rem;
}
&:last-child {
img {
height: 1.5rem;
}
}
}
}
.section-menu {
align-items: center;
background-color: var(--neutral-grey);
display: flex;
flex-direction: row;
font-size: 0.7rem;
font-weight: 400;
justify-content: center;
padding: 10px;
position: sticky;
text-align: center;
top: 0;
z-index: 100;
&>*:not(:last-child)::after {
content: " | ";
margin: 0 8px;
}
}

189
deploy/assets/css/theme.css Executable file
View file

@ -0,0 +1,189 @@
/*****************************
* Theme
* Base CSS file
------------------------------
* COLOURS
*****************************/
/* Colour variables */
:root {
--background-color: #FAFAFA;
--dark-grey: #343434;
--darker-grey: #666666;
--light-grey: #C9C9C9;
--medium-grey: #979797;
--neutral-grey: #FAFAFA;
}
/* Adjust Zensical colours */
[data-md-color-accent=custom] {
--md-accent-bg-color: var(--neutral-grey);
--md-default-bg-color: var(--neutral-grey);
--md-footer-bg-color: var(--neutral-grey);
--md-primary-bg-color: var(--neutral-grey);
--md-primary-fg-color: var(--dark-grey);
--md-primary-fg-color--dark: var(--dark-grey);
--md-primary-fg-color--light: var(--light-grey);
}
/*****************************
* FONTS
*****************************/
/* General */
@font-face {
font-family: 'Source Code';
font-style: normal;
font-weight: 100 700;
src: url('../fonts/source-code.ttf') format('truetype');
}
@font-face {
font-family: 'Source Sans';
font-style: normal;
font-weight: 100 700;
src: url('../fonts/source-sans.ttf') format('truetype');
}
@font-face {
font-family: 'Source Serif';
font-style: normal;
font-weight: 100 700;
src: url('../fonts/source-serif.ttf') format('truetype');
}
/* Technical */
@font-face {
font-family: 'DM Mono';
font-style: normal;
font-weight: 100 700;
src: url('../fonts/dm-mono.ttf') format('truetype');
}
@font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 100 700;
src: url('../fonts/dm-sans.ttf') format('truetype');
}
@font-face {
font-family: 'Tiny5';
font-style: normal;
font-weight: 900;
src: url('../fonts/tiny5.ttf') format('truetype');
}
/* Visual */
@font-face {
font-family: 'Plaster';
font-style: normal;
font-weight: 900;
src: url('../fonts/plaster.ttf') format('truetype');
}
@font-face {
font-family: 'Rubik';
font-style: normal;
font-weight: 100 700;
src: url('../fonts/rubik.ttf') format('truetype');
}
/* Words */
@font-face {
font-family: 'EB Garamond';
font-style: italic;
font-weight: 100 700;
src: url('../fonts/eb-garamond-italics.ttf') format('truetype');
}
@font-face {
font-family: 'EB Garamond';
font-style: normal;
font-weight: 100 700;
src: url('../fonts/eb-garamond.ttf') format('truetype');
}
@font-face {
font-family: 'Playfair Display SC';
font-style: normal;
font-weight: 900;
src: url('../fonts/playfair-display-sc.ttf') format('truetype');
}
/* Variables */
:root {
--general-sans: 'Source Sans', sans-serif;
--general-serif: 'Source Serif', serif;
--general-code: 'Source Code', monospace;
--technical-code: 'DM Mono', monospace;
--technical-text: 'DM Sans', monospace;
--technical-title: 'Tiny5', 'DM Mono', monospace;
--visuals-text: 'Rubik', sans-serif;
--visuals-title: 'Plaster', 'Rubik', sans-serif;
--words-text: 'EB Garamond', serif;
--words-title: 'Playfair Display SC', 'EB Garamond', serif;
}
/* Colours and weights */
.md-typeset {
a,
figcaption {
color: var(--medium-grey);
max-width: none;
text-decoration: none;
}
a:hover {
color: var(--medium-grey);
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--darker-grey);
font-weight: bold;
}
p {
color: var(--dark-grey);
}
}
/* Sizes */
p {
font-size: 1rem;
}
/*****************************
* RULES
*****************************/
body {
align-items: center;
background-color: var(--neutral-grey);
display: flex;
justify-content: center;
min-height: 100vh;
width: 100%;
}
/* Footer */
footer {
align-items: center;
display: flex;
flex-direction: row;
justify-content: center;
margin-bottom: 5px;
padding-bottom: 0;
}
footer>*:not(:last-child)::after {
content: " | ";
margin: 0 8px;
}