TheThomaas/11ty-resume
1
0
Fork 0
Code Issues 1 Pull requests Packages Projects Releases Wiki Activity

Compare commits

base: TheThomaas:48c232efd03d64699fde49a24c168b3c1a85e8cc
Branches Tags
TheThomaas:main
..
compare: TheThomaas:d399dbc8c366ddc30076c818ff1413ade2f5a512
Branches Tags
TheThomaas:main

6 commits
48c232efd0 ... d399dbc8c3

Author SHA1 Message Date
TheThomaas d399dbc8c3 Add moving clouds at the top of the page 2025-05-27 21:46:53 +02:00
TheThomaas 2a0ac62ad9 Update hero section styles 2025-05-27 21:42:31 +02:00
TheThomaas e03cef5ba5 Replace old colors with new variables 2025-05-27 21:42:16 +02:00
TheThomaas 2e3a000f30 Select random accent font on page load 2025-05-27 21:41:33 +02:00
TheThomaas 04f0fb83f7 Create accent-font class 2025-05-27 21:40:12 +02:00
TheThomaas 707fc602d6 Update color tokens 2025-05-27 21:38:01 +02:00
12 changed files with 194 additions and 96 deletions
Show stats Expand all files Collapse all files

18
src/_data/tokens.json
View file

@ -1,6 +1,6 @@
{ {
"color": { "color": {
"neutral": { "gray": {
"50": "#fafafa", "50": "#fafafa",
"100": "#f5f5f5", "100": "#f5f5f5",
"200": "#e5e5e5", "200": "#e5e5e5",
@ -20,7 +20,6 @@
"300": "#b1c98d", "300": "#b1c98d",
"400": "#95b368", "400": "#95b368",
"500": "#77984a", "500": "#77984a",
"DEFAULT": "#77984a",
"600": "#5c7838", "600": "#5c7838",
"700": "#485d2e", "700": "#485d2e",
"800": "#3b4b29", "800": "#3b4b29",
@ -34,26 +33,11 @@
"300": "#a4bfd5", "300": "#a4bfd5",
"400": "#739ebd", "400": "#739ebd",
"500": "#4a7798", "500": "#4a7798",
"DEFAULT": "#4a7798",
"600": "#3e688b", "600": "#3e688b",
"700": "#335471", "700": "#335471",
"800": "#2d475f", "800": "#2d475f",
"900": "#2a3e50", "900": "#2a3e50",
"950": "#1c2835" "950": "#1c2835"
},
"jewel": {
"50": "#f3faf4",
"100": "#e3f5e7",
"200": "#c8ead1",
"300": "#9cd9ac",
"400": "#69bf80",
"500": "#45a25e",
"600": "#34854a",
"700": "#2e6f40",
"DEFAULT": "#2e6f40",
"800": "#275434",
"900": "#21462c",
"950": "#0e2515"
} }
}, },
"font": { "font": {

4
src/_includes/layouts/base.html
View file

@ -17,12 +17,16 @@
{% include "css/components/timeline.css" %} {% include "css/components/timeline.css" %}
{% include "css/components/competences.css" %} {% include "css/components/competences.css" %}
{% include "css/components/download.css" %} {% include "css/components/download.css" %}
{% include "css/components/clouds.css" %}
{% endcss %} {% endcss %}
<link rel="stylesheet" href="{% getBundleFileUrl "css" %}"> <link rel="stylesheet" href="{% getBundleFileUrl "css" %}">
</head> </head>
<body> <body>
{% include "partials/header.liquid" %} {% include "partials/header.liquid" %}
{% include "partials/clouds.liquid" %}
<main tabindex="-1" id="main-content"> <main tabindex="-1" id="main-content">
{% block content %} {% block content %}
{{ content }} {{ content }}

21
src/_includes/partials/clouds.liquid Normal file
View file

@ -0,0 +1,21 @@
<div class="clouds-zone">
<div class="cloud--item" style="--delay: 35s; --scale: 0.65;">
<div class="cloud"></div>
</div>
<div class="cloud--item" style="--delay: 20s; --scale: 0.3;">
<div class="cloud"></div>
</div>
<div class="cloud--item" style="--delay: 30s; --scale: 0.5;">
<div class="cloud"></div>
</div>
<div class="cloud--item" style="--delay: 18s; --scale: 0.4;">
<div class="cloud"></div>
</div>
<div class="cloud--item" style="--delay: 25s; --scale: 0.55;">
<div class="cloud"></div>
</div>
</div>

60
src/css/components/clouds.css Normal file
View file

@ -0,0 +1,60 @@
.clouds-zone {
top: 70px;
inset-inline: 0;
position: absolute;
z-index: -1;
}
@keyframes animateCloud {
0% { margin-left: -1000px; }
100% { margin-left: 100%; }
}
.cloud--item {
animation: animateCloud var(--delay, 35s) linear infinite;
transform: scale(var(--scale, .5));
}
.cloud {
position: relative;
background: var(--cloud-color-primary, var(--color-neutral-50));
border-radius: 100px;
box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1);
height: 120px;
width: 350px;
}
.cloud:after, .cloud:before {
background: var(--cloud-color-primary, var(--color-neutral-50));
content: '';
position: absolute;
z-indeX: -1;
}
.cloud:after {
border-radius: 100px;
height: 100px;
left: 50px;
top: -50px;
width: 100px;
}
.cloud:before {
border-radius: 200px;
height: 180px;
right: 50px;
top: -90px;
width: 180px;
}
@media (prefers-reduced-motion: reduce) {
.clouds-zone {
display: none;
}
}

20
src/css/components/hero.css
View file

@ -2,23 +2,27 @@
height: 90svh; height: 90svh;
} }
.hero div { .hero div {
text-align: center; text-align: start;
flex-direction: column; flex-direction: column;
justify-content: end; justify-content: end;
align-items: center; align-items: start;
display: flex; display: flex;
} }
.hero p { .hero p {
max-width: 48ch; max-width: 48ch;
} }
@media screen and (min-width: 768px) {
.hero div {
text-align: start;
align-items: start;
}
}
.hero-title { .hero-title {
font-size: 1.8rem; font-size: 1.8rem;
font-weight: 600;
line-height: 1;
margin-bottom: .4em;
}
.hero-title .accent-font {
font-size: 1.5em;
line-height: 1;
font-weight: normal;
font-style: italic;
color: currentColor;
} }
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
.hero-title { .hero-title {

8
src/css/components/timeline.css
View file

@ -7,7 +7,7 @@
} }
.timeline:before { .timeline:before {
content: ""; content: "";
background-color: rgb(var(--neutral-lower)); background-color: var(--color-neutral-200);
inline-size: 6px; inline-size: 6px;
margin-inline-start: -3px; margin-inline-start: -3px;
position: absolute; position: absolute;
@ -30,8 +30,8 @@
content: ""; content: "";
aspect-ratio: 1; aspect-ratio: 1;
inline-size: var(--size); inline-size: var(--size);
background-color: rgb(var(--neutral-lower)); background-color: var(--color-neutral-200);
border: 6px solid rgb(var(--brand-secondary-medium)); border: 6px solid var(--color-primary-400);
z-index: 1; z-index: 1;
border-radius: 50%; border-radius: 50%;
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
@ -41,5 +41,5 @@
transform: translateY(50%); transform: translateY(50%);
} }
.timeline li:hover:before { .timeline li:hover:before {
border-color: rgb(var(--brand-secondary-high)); border-color: var(--color-primary-700);
} }

2
src/css/footer.css
View file

@ -1,5 +1,5 @@
footer { footer {
background-color: rgb(var(--brand-secondary-medium)); background-color: var(--color-primary-400);
justify-items: center; justify-items: center;
margin-block-start: 1.5rem; margin-block-start: 1.5rem;
} }

2
src/css/header.css
View file

@ -1,5 +1,5 @@
header { header {
background-color: rgb(var(--brand-primary-medium)); background-color: var(--color-secondary-400);
z-index: 10; z-index: 10;
position: fixed; position: fixed;
inset-block-start: 0; inset-block-start: 0;

19
src/css/main.css
View file

@ -13,6 +13,20 @@
} }
/* Other */ /* Other */
:root {
/*
Modern Font Stacks
Source: https://modernfontstacks.com/
*/
--accent-font-1: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
--accent-font-2: 'Nimbus Mono PS', 'Courier New', monospace;
--accent-font-3: Didot, 'Bodoni MT', 'Noto Serif Display', 'URW Palladio L', P052, Sylfaen, serif;
}
.accent-font {
font-family: var(--accent-font, var(--accent-font-1));
}
*, *,
:before, :before,
:after { :after {
@ -43,9 +57,12 @@ html {
} }
} }
body { body {
background: rgb(var(--brand-primary-medium)); background: var(--color-secondary-400);
background: var(--bg-gradient); background: var(--bg-gradient);
margin: 0; margin: 0;
position: relative;
z-index: 0;
overflow-x: hidden;
} }
body header, body header,
body footer { body footer {

36
src/css/theme.css
View file

@ -1,15 +1,15 @@
:root { :root {
--color-neutral-50: #fafafa; --color-gray-50: #fafafa;
--color-neutral-100: #f5f5f5; --color-gray-100: #f5f5f5;
--color-neutral-200: #e5e5e5; --color-gray-200: #e5e5e5;
--color-neutral-300: #d4d4d4; --color-gray-300: #d4d4d4;
--color-neutral-400: #a3a3a3; --color-gray-400: #a3a3a3;
--color-neutral-500: #737373; --color-gray-500: #737373;
--color-neutral-600: #525252; --color-gray-600: #525252;
--color-neutral-700: #404040; --color-gray-700: #404040;
--color-neutral-800: #262626; --color-gray-800: #262626;
--color-neutral-900: #171717; --color-gray-900: #171717;
--color-neutral-950: #0a0a0a; --color-gray-950: #0a0a0a;
--color-asparagus-50: #f4f7ee; --color-asparagus-50: #f4f7ee;
--color-asparagus-100: #e6eed9; --color-asparagus-100: #e6eed9;
--color-asparagus-200: #d0dfb7; --color-asparagus-200: #d0dfb7;
@ -21,7 +21,6 @@
--color-asparagus-800: #3b4b29; --color-asparagus-800: #3b4b29;
--color-asparagus-900: #344126; --color-asparagus-900: #344126;
--color-asparagus-950: #1a2211; --color-asparagus-950: #1a2211;
--color-asparagus: #77984a;
--color-wedgewood-50: #f5f7fa; --color-wedgewood-50: #f5f7fa;
--color-wedgewood-100: #e9eff5; --color-wedgewood-100: #e9eff5;
--color-wedgewood-200: #cedde9; --color-wedgewood-200: #cedde9;
@ -33,19 +32,6 @@
--color-wedgewood-800: #2d475f; --color-wedgewood-800: #2d475f;
--color-wedgewood-900: #2a3e50; --color-wedgewood-900: #2a3e50;
--color-wedgewood-950: #1c2835; --color-wedgewood-950: #1c2835;
--color-wedgewood: #4a7798;
--color-jewel-50: #f3faf4;
--color-jewel-100: #e3f5e7;
--color-jewel-200: #c8ead1;
--color-jewel-300: #9cd9ac;
--color-jewel-400: #69bf80;
--color-jewel-500: #45a25e;
--color-jewel-600: #34854a;
--color-jewel-700: #2e6f40;
--color-jewel-800: #275434;
--color-jewel-900: #21462c;
--color-jewel-950: #0e2515;
--color-jewel: #2e6f40;
--font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", sans-serif; --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", sans-serif;
--font-size: 1.2rem; --font-size: 1.2rem;
--gutter: clamp(1ch, 2.5vmax, 3ch); --gutter: clamp(1ch, 2.5vmax, 3ch);

86
src/css/variables.css
View file

@ -1,45 +1,55 @@
:root { :root {
--neutral-lowest: 255, 255, 255, 0.5; --color-neutral-50: var(--color-gray-50);
--neutral-lower: 231 231 231; --color-neutral-100: var(--color-gray-100);
--neutral-low: 209 209 209; --color-neutral-200: var(--color-gray-200);
--neutral-medium-low: 176 176 176; --color-neutral-300: var(--color-gray-300);
--neutral-medium: 136 136 136; --color-neutral-400: var(--color-gray-400);
--neutral-medium-high: 109 109 109; --color-neutral-500: var(--color-gray-500);
--neutral-high: 93 93 93; --color-neutral-600: var(--color-gray-600);
--neutral-higher: 79 79 79; --color-neutral-700: var(--color-gray-700);
--neutral-highest: 9, 9, 11; --color-neutral-800: var(--color-gray-800);
--brand-primary-lowest: 249 248 243; --color-neutral-900: var(--color-gray-900);
--brand-primary-lower: 242 239 226; --color-neutral-950: var(--color-gray-950);
--brand-primary-low: 210 199 159;
--brand-primary-medium-low: 194 176 128; --color-primary: var(--color-asparagus-500);
--brand-primary-medium: 177 151 94; --color-primary-50: var(--color-asparagus-50);
--brand-primary-medium-high: 164 133 82; --color-primary-100: var(--color-asparagus-100);
--brand-primary-high: 136 107 70; --color-primary-200: var(--color-asparagus-200);
--brand-primary-higher: 90 72 52; --color-primary-300: var(--color-asparagus-300);
--brand-primary-highest: 48 37 26; --color-primary-400: var(--color-asparagus-400);
--brand-secondary-lowest: 244 247 238; --color-primary-500: var(--color-asparagus-500);
--brand-secondary-lower: 231 238 217; --color-primary-600: var(--color-asparagus-600);
--brand-secondary-low: 187 208 154; --color-primary-700: var(--color-asparagus-700);
--brand-secondary-medium-low: 149 180 103; --color-primary-800: var(--color-asparagus-800);
--brand-secondary-medium: 119 152 74; --color-primary-900: var(--color-asparagus-900);
--brand-secondary-medium-high: 93 120 56; --color-primary-950: var(--color-asparagus-950);
--brand-secondary-high: 72 93 46;
--brand-secondary-higher: 52 65 38; --color-secondary: var(--color-wedgewood-500);
--brand-secondary-highest: 26 34 17; --color-secondary-50: var(--color-wedgewood-50);
--color-secondary-100: var(--color-wedgewood-100);
--color-secondary-200: var(--color-wedgewood-200);
--color-secondary-300: var(--color-wedgewood-300);
--color-secondary-400: var(--color-wedgewood-400);
--color-secondary-500: var(--color-wedgewood-500);
--color-secondary-600: var(--color-wedgewood-600);
--color-secondary-700: var(--color-wedgewood-700);
--color-secondary-800: var(--color-wedgewood-800);
--color-secondary-900: var(--color-wedgewood-900);
--color-secondary-950: var(--color-wedgewood-950);
--bg-gradient: linear-gradient( --bg-gradient: linear-gradient(
180deg, 180deg,
rgb(var(--brand-primary-medium)) 0%, var(--color-secondary-400) 0%,
rgb(var(--brand-primary-medium)) 5%, var(--color-secondary-400) 5%,
rgb(var(--brand-primary-low)) 30%, var(--color-secondary-300) 30%,
rgb(var(--brand-primary-lower)) 50%, color-mix(in srgb, var(--color-secondary-300) 70%, var(--color-primary-300) 30%) 50%,
rgb(var(--brand-secondary-lower)) 51%, var(--color-primary-300) 65%,
rgb(var(--brand-secondary-low)) 65%, var(--color-primary-400) 98%,
rgb(var(--brand-secondary-medium)) 98%, var(--color-primary-400) 100%
rgb(var(--brand-secondary-medium)) 100%
); );
--background: rgb(var(--brand-primary-medium)); --background: var(--color-secondary-400);
--text: rgb(var(--neutral-highest)); --text: var(--color-neutral-950);
--text-2: rgba(var(--neutral-highest), 0.8); --text-2: color-mix(in srgb, var(--color-neutral-950) 80%, transparent);
--font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
"Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", sans-serif; "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", sans-serif;
--font-italic: "Georgia", serif; --font-italic: "Georgia", serif;

12
src/js/main.js
View file

@ -23,3 +23,15 @@ const observer = new IntersectionObserver(entries => {
document.querySelectorAll('section').forEach(function(section, i) { document.querySelectorAll('section').forEach(function(section, i) {
observer.observe(section); observer.observe(section);
}); });
// Random accent font & color
const random = (min, max) => {
return Math.floor(Math.random() * (max-min+1) + min);
}
function randomFont() {
let randomNumber = random(1, 3);
document.documentElement.style.setProperty("--accent-font", `var(--accent-font-${randomNumber})`);
}
randomFont();