Add moving clouds at the top of the page

Update hero section styles
Replace old colors with new variables
2025-05-27 21:46:53 +02:00 · 2025-05-27 21:42:31 +02:00 · 2025-05-27 21:42:16 +02:00 · 2025-05-27 21:41:33 +02:00 · 2025-05-27 21:40:12 +02:00 · 2025-05-27 21:38:01 +02:00
12 changed files with 194 additions and 96 deletions
--- a/src/_data/tokens.json
+++ b/src/_data/tokens.json
@ -1,6 +1,6 @@
 {
    "color": {
-        "neutral": {
+        "gray": {
            "50": "#fafafa",
            "100": "#f5f5f5",
            "200": "#e5e5e5",
@ -20,7 +20,6 @@
            "300": "#b1c98d",
            "400": "#95b368",
            "500": "#77984a",
-            "DEFAULT": "#77984a",
            "600": "#5c7838",
            "700": "#485d2e",
            "800": "#3b4b29",
@ -34,26 +33,11 @@
            "300": "#a4bfd5",
            "400": "#739ebd",
            "500": "#4a7798",
-            "DEFAULT": "#4a7798",
            "600": "#3e688b",
            "700": "#335471",
            "800": "#2d475f",
            "900": "#2a3e50",
            "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": {
--- a/src/_includes/layouts/base.html
+++ b/src/_includes/layouts/base.html
@ -17,12 +17,16 @@
      {% include "css/components/timeline.css" %}
      {% include "css/components/competences.css" %}
      {% include "css/components/download.css" %}
+      
+      {% include "css/components/clouds.css" %}
    {% endcss %}
    <link rel="stylesheet" href="{% getBundleFileUrl "css" %}">
  </head>
  <body>
    {% include "partials/header.liquid" %}

+    {% include "partials/clouds.liquid" %}
+
    <main tabindex="-1" id="main-content">
      {% block content %}
        {{ content }}
--- a/src/_includes/partials/clouds.liquid
+++ b/src/_includes/partials/clouds.liquid
@ -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>
--- a/src/css/components/clouds.css
+++ b/src/css/components/clouds.css
@ -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;
+  }
+}
--- a/src/css/components/hero.css
+++ b/src/css/components/hero.css
@ -2,23 +2,27 @@
  height: 90svh;
 }
 .hero div {
-  text-align: center;
+  text-align: start;
  flex-direction: column;
  justify-content: end;
-  align-items: center;
+  align-items: start;
  display: flex;
 }
 .hero p {
  max-width: 48ch;
 }
-@media screen and (min-width: 768px) {
-  .hero div {
-    text-align: start;
-    align-items: start;
-  }
-}
 .hero-title {
  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) {
  .hero-title {
--- a/src/css/components/timeline.css
+++ b/src/css/components/timeline.css
@ -7,7 +7,7 @@
 }
 .timeline:before {
  content: "";
-  background-color: rgb(var(--neutral-lower));
+  background-color: var(--color-neutral-200);
  inline-size: 6px;
  margin-inline-start: -3px;
  position: absolute;
@ -30,8 +30,8 @@
  content: "";
  aspect-ratio: 1;
  inline-size: var(--size);
-  background-color: rgb(var(--neutral-lower));
-  border: 6px solid rgb(var(--brand-secondary-medium));
+  background-color: var(--color-neutral-200);
+  border: 6px solid var(--color-primary-400);
  z-index: 1;
  border-radius: 50%;
  transition: all 0.2s ease-in-out;
@ -41,5 +41,5 @@
  transform: translateY(50%);
 }
 .timeline li:hover:before {
-  border-color: rgb(var(--brand-secondary-high));
+  border-color: var(--color-primary-700);
 }
--- a/src/css/footer.css
+++ b/src/css/footer.css
@ -1,5 +1,5 @@
 footer {
-  background-color: rgb(var(--brand-secondary-medium));
+  background-color: var(--color-primary-400);
  justify-items: center;
  margin-block-start: 1.5rem;
 }
--- a/src/css/header.css
+++ b/src/css/header.css
@ -1,5 +1,5 @@
 header {
-  background-color: rgb(var(--brand-primary-medium));
+  background-color: var(--color-secondary-400);
  z-index: 10;
  position: fixed;
  inset-block-start: 0;
--- a/src/css/main.css
+++ b/src/css/main.css
@ -13,6 +13,20 @@
 }

 /* 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,
 :after {
@ -43,9 +57,12 @@ html {
  }
 }
 body {
-  background: rgb(var(--brand-primary-medium));
+  background: var(--color-secondary-400);
  background: var(--bg-gradient);
  margin: 0;
+  position: relative;
+  z-index: 0;
+  overflow-x: hidden;
 }
 body header,
 body footer {
--- a/src/css/theme.css
+++ b/src/css/theme.css
@ -1,15 +1,15 @@
 :root {
-	--color-neutral-50: #fafafa;
-	--color-neutral-100: #f5f5f5;
-	--color-neutral-200: #e5e5e5;
-	--color-neutral-300: #d4d4d4;
-	--color-neutral-400: #a3a3a3;
-	--color-neutral-500: #737373;
-	--color-neutral-600: #525252;
-	--color-neutral-700: #404040;
-	--color-neutral-800: #262626;
-	--color-neutral-900: #171717;
-	--color-neutral-950: #0a0a0a;
+	--color-gray-50: #fafafa;
+	--color-gray-100: #f5f5f5;
+	--color-gray-200: #e5e5e5;
+	--color-gray-300: #d4d4d4;
+	--color-gray-400: #a3a3a3;
+	--color-gray-500: #737373;
+	--color-gray-600: #525252;
+	--color-gray-700: #404040;
+	--color-gray-800: #262626;
+	--color-gray-900: #171717;
+	--color-gray-950: #0a0a0a;
 	--color-asparagus-50: #f4f7ee;
 	--color-asparagus-100: #e6eed9;
 	--color-asparagus-200: #d0dfb7;
@ -21,7 +21,6 @@
 	--color-asparagus-800: #3b4b29;
 	--color-asparagus-900: #344126;
 	--color-asparagus-950: #1a2211;
-	--color-asparagus: #77984a;
 	--color-wedgewood-50: #f5f7fa;
 	--color-wedgewood-100: #e9eff5;
 	--color-wedgewood-200: #cedde9;
@ -33,19 +32,6 @@
 	--color-wedgewood-800: #2d475f;
 	--color-wedgewood-900: #2a3e50;
 	--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-size: 1.2rem;
 	--gutter: clamp(1ch, 2.5vmax, 3ch);
--- a/src/css/variables.css
+++ b/src/css/variables.css
@ -1,45 +1,55 @@
 :root {
-  --neutral-lowest: 255, 255, 255, 0.5;
-  --neutral-lower: 231 231 231;
-  --neutral-low: 209 209 209;
-  --neutral-medium-low: 176 176 176;
-  --neutral-medium: 136 136 136;
-  --neutral-medium-high: 109 109 109;
-  --neutral-high: 93 93 93;
-  --neutral-higher: 79 79 79;
-  --neutral-highest: 9, 9, 11;
-  --brand-primary-lowest: 249 248 243;
-  --brand-primary-lower: 242 239 226;
-  --brand-primary-low: 210 199 159;
-  --brand-primary-medium-low: 194 176 128;
-  --brand-primary-medium: 177 151 94;
-  --brand-primary-medium-high: 164 133 82;
-  --brand-primary-high: 136 107 70;
-  --brand-primary-higher: 90 72 52;
-  --brand-primary-highest: 48 37 26;
-  --brand-secondary-lowest: 244 247 238;
-  --brand-secondary-lower: 231 238 217;
-  --brand-secondary-low: 187 208 154;
-  --brand-secondary-medium-low: 149 180 103;
-  --brand-secondary-medium: 119 152 74;
-  --brand-secondary-medium-high: 93 120 56;
-  --brand-secondary-high: 72 93 46;
-  --brand-secondary-higher: 52 65 38;
-  --brand-secondary-highest: 26 34 17;
+  --color-neutral-50: var(--color-gray-50);
+	--color-neutral-100: var(--color-gray-100);
+	--color-neutral-200: var(--color-gray-200);
+	--color-neutral-300: var(--color-gray-300);
+	--color-neutral-400: var(--color-gray-400);
+	--color-neutral-500: var(--color-gray-500);
+	--color-neutral-600: var(--color-gray-600);
+	--color-neutral-700: var(--color-gray-700);
+	--color-neutral-800: var(--color-gray-800);
+	--color-neutral-900: var(--color-gray-900);
+	--color-neutral-950: var(--color-gray-950);
+
+  --color-primary: var(--color-asparagus-500);
+  --color-primary-50: var(--color-asparagus-50);
+  --color-primary-100: var(--color-asparagus-100);
+  --color-primary-200: var(--color-asparagus-200);
+  --color-primary-300: var(--color-asparagus-300);
+  --color-primary-400: var(--color-asparagus-400);
+  --color-primary-500: var(--color-asparagus-500);
+  --color-primary-600: var(--color-asparagus-600);
+  --color-primary-700: var(--color-asparagus-700);
+  --color-primary-800: var(--color-asparagus-800);
+  --color-primary-900: var(--color-asparagus-900);
+  --color-primary-950: var(--color-asparagus-950);
+
+  --color-secondary: var(--color-wedgewood-500);
+  --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(
    180deg,
-    rgb(var(--brand-primary-medium)) 0%,
-    rgb(var(--brand-primary-medium)) 5%,
-    rgb(var(--brand-primary-low)) 30%,
-    rgb(var(--brand-primary-lower)) 50%,
-    rgb(var(--brand-secondary-lower)) 51%,
-    rgb(var(--brand-secondary-low)) 65%,
-    rgb(var(--brand-secondary-medium)) 98%,
-    rgb(var(--brand-secondary-medium)) 100%
+    var(--color-secondary-400) 0%,
+    var(--color-secondary-400) 5%,
+    var(--color-secondary-300) 30%,
+    color-mix(in srgb, var(--color-secondary-300) 70%, var(--color-primary-300) 30%) 50%,
+    var(--color-primary-300) 65%,
+    var(--color-primary-400) 98%,
+    var(--color-primary-400) 100%
  );
-  --background: rgb(var(--brand-primary-medium));
-  --text: rgb(var(--neutral-highest));
-  --text-2: rgba(var(--neutral-highest), 0.8);
+  --background: var(--color-secondary-400);
+  --text: var(--color-neutral-950);
+  --text-2: color-mix(in srgb, var(--color-neutral-950) 80%, transparent);
  --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
    "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", sans-serif;
  --font-italic: "Georgia", serif;
--- a/src/js/main.js
+++ b/src/js/main.js
@ -22,4 +22,16 @@ const observer = new IntersectionObserver(entries => {

 document.querySelectorAll('section').forEach(function(section, i) {
  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();
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