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

Halfway through resume page. Need to add modals.

Browse source
This commit is contained in:
g_it 2026-02-13 22:41:52 +01:00
commit 3f38f601e9
Signed by untrusted user who does not match committer: g_it
GPG key ID: A2B0A7C06A054627
30 changed files with 514 additions and 194 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -0,0 +1,313 @@
@import url("theme.css");
/*****************************
* RESUME
* Styling for the resume page.
*****************************/
* {
z-index: 1;
}
body {
color: var(--primary-colour);
font-family: var(--general-sans);
}
.page-menu {
align-items: center;
background-color: var(--background-colour);
color: var(--primary-colour);
display: flex;
flex-direction: row;
font-size: 0.6rem;
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;
}
}
.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 !important;
&::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.95);
pointer-events: none;
}
.title {
font-family: var(--general-serif);
font-size: 5rem;
font-variation-settings: "opsz" 8;
font-weight: 900;
}
.metadetails {
border-bottom: 0.5px solid lightgray;
border-top: 0.5px solid lightgray;
display: flex;
flex-direction: row;
gap: 5rem;
img {
height: 2.5rem;
}
figcaption {
color: var(--primary-colour);
font-family: var(--general-sans);
font-size: 0.8rem;
font-style: normal;
font-weight: 400;
}
}
}
#experience {
color: var(--primary-colour);
min-height: 80vh;
&>div {
margin: 30px;
padding: 1.2rem;
li {
border: none;
&:hover {
box-shadow: none;
}
}
h2 {
color: var(--primary-colour);
font-family: var(--general-sans);
font-size: 2.5rem;
margin: 0 0 -18px 0;
}
.company {
font-family: var(--general-sans);
font-weight: 400;
font-size: 1.2rem;
margin: 0;
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-weight: 700;
line-height: 1.5;
margin-bottom: 30px;
margin-top: 30px;
}
.job-achievements {
font-family: var(--general-serif);
h5 {
color: var(--primary-colour);
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(255, 255, 255, 0.70);
bottom: 0;
content: '';
left: 0;
pointer-events: none;
position: absolute;
right: 0;
top: 0;
z-index: -5;
}
}
}
#demo {
margin: 0 2.5rem;
.cards {
.twemoji {
font-size: 3rem;
margin-bottom: 8px;
}
ul li {
align-items: center;
display: flex;
flex-direction: column;
font-size: 1.8rem;
height: 300px;
justify-content: center;
}
}
}
#learning {
margin: 2.5rem;
.cards {
ul li {
background-color: var(--tertiary-colour);
border: none;
&:hover {
box-shadow: none;
}
}
}
}
.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;
}
}
div:last-child {
img {
height: 1.5rem;
}
}
}
.faq-container {
position: relative;
.faq {
background: var(--background-colour);
border: 2px solid var(--primary-colour);
border-radius: 5px;
bottom: 50px;
opacity: 0;
padding: 20px;
position: fixed;
right: 20px;
transition: opacity 0.3s, visibility 0.3s;
visibility: hidden;
width: 300px;
z-index: 999;
h3 {
color: var(--primary-colour);
font-family: var(--general-serif);
}
}
#faq-toggle:checked+.question-icon .icon.question {
opacity: 0;
}
#faq-toggle:checked+.question-icon .icon.close {
opacity: 1;
}
#faq-toggle:checked~.faq {
opacity: 1;
visibility: visible;
}
.question-icon {
align-items: center;
bottom: 20px;
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;
}