diff --git a/apps/website/cv-theme.js b/apps/website/cv-theme.js index b40701a..63b3593 100644 --- a/apps/website/cv-theme.js +++ b/apps/website/cv-theme.js @@ -1,5 +1,22 @@ const cvThemeButtons = [...document.querySelectorAll('[data-cv-theme]')]; const cvPortrait = document.getElementById('cv-portrait-orbit'); +const cvThemeStorageKey = 'cv-theme'; + +function getStoredCvTheme() { + try { + return localStorage.getItem(cvThemeStorageKey); + } catch (_error) { + return null; + } +} + +function storeCvTheme(theme) { + try { + localStorage.setItem(cvThemeStorageKey, theme); + } catch (_error) { + // Theme switching should still work when storage is blocked. + } +} function setCvTheme(theme) { const nextTheme = theme === 'fancy' ? 'fancy' : 'elegant'; @@ -12,7 +29,7 @@ function setCvTheme(theme) { button.setAttribute('aria-pressed', active ? 'true' : 'false'); }); - localStorage.setItem('cv-theme', nextTheme); + storeCvTheme(nextTheme); } cvThemeButtons.forEach((button) => { @@ -31,4 +48,5 @@ document.addEventListener('pointermove', (event) => { cvPortrait.style.setProperty('--portrait-rotation', `${degrees + 8}deg`); }); -setCvTheme(localStorage.getItem('cv-theme') || 'elegant'); +setCvTheme(getStoredCvTheme() || 'elegant'); + diff --git a/apps/website/cv.php b/apps/website/cv.php index 8973791..3258e71 100644 --- a/apps/website/cv.php +++ b/apps/website/cv.php @@ -169,10 +169,11 @@ - + + diff --git a/apps/website/index.php b/apps/website/index.php index 10dbec6..7f9834e 100644 --- a/apps/website/index.php +++ b/apps/website/index.php @@ -6,7 +6,7 @@ <?php echo $text['name']; ?> - + +
+ + + + + +
+

@@ -78,9 +95,11 @@ // Tell translation.js to also translate these pages in the background ?> + + diff --git a/apps/website/styles.css b/apps/website/styles.css index eacf10e..1d9c07a 100644 --- a/apps/website/styles.css +++ b/apps/website/styles.css @@ -149,6 +149,18 @@ body { body { margin: 20px; } + + .home-page .hero { + grid-template-columns: 1fr; + padding: 24px; + } + + .home-page .hero-image img { + display: block; + width: min(100%, 320px); + height: auto; + margin: 0 auto; + } .hero-section { flex-direction: column; @@ -204,6 +216,61 @@ body { border-radius: 50%; } +.home-page .hero { + max-width: 1080px; + margin: 0 auto; + display: grid; + grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr); + gap: 40px; + align-items: center; + padding: 32px; +} + +.home-page .top-nav, +.home-page .cv-theme-toolbar { + max-width: 1080px; +} + +.cv-page .top-nav, +.cv-page .cv-theme-toolbar { + max-width: 900px; +} + +.home-page .top-nav, +.cv-page .top-nav { + margin-left: auto; + margin-right: auto; +} + +.home-page .hero-text h1 { + margin: 0 0 16px; + font-size: 3rem; +} + +.home-page .hero-image { + justify-self: center; +} + +.home-page .hero-image img { + display: block; + width: min(100%, 360px); + max-width: 100%; + height: auto; + aspect-ratio: 1 / 1; + margin: 0 auto; +} + +.home-page .bio-intro, +.home-page .bio-story, +.home-page .cta { + line-height: 1.6; + font-size: 1.05rem; +} + +.home-page .cta a { + font-weight: 700; +} + .top-nav { display: flex; justify-content: space-between; @@ -353,6 +420,7 @@ body { padding: 8px 12px; border-radius: 6px; cursor: pointer; + font-family: inherit; font-weight: 700; } @@ -385,7 +453,8 @@ body { display: block; } -body.cv-elegant { +body.cv-page.cv-elegant, +body.home-page.cv-elegant { background: #030603; color: #a8ffb0; font-family: "Courier New", "Lucida Console", Monaco, monospace; @@ -432,6 +501,30 @@ body.cv-elegant { line-height: 1.55; } +.cv-elegant.home-page .hero { + background: #061106; + border: 1px solid #2b7a38; + box-shadow: 0 0 18px rgba(168, 255, 176, 0.12); +} + +.cv-elegant.home-page .hero-text h1, +.cv-elegant.home-page .cta a { + color: #c7ffd0; + font-family: inherit; +} + +.cv-elegant.home-page .bio-intro, +.cv-elegant.home-page .bio-story, +.cv-elegant.home-page .cta { + color: #a8ffb0; +} + +.cv-elegant.home-page .hero-image img { + border-radius: 0; + border: 2px solid #a8ffb0; + filter: saturate(0.8) contrast(1.08); +} + .cv-elegant .cv-header-text { min-height: 160px; padding-right: 190px; @@ -449,7 +542,8 @@ body.cv-elegant { filter: saturate(0.8) contrast(1.08); } -body.cv-fancy { +body.cv-page.cv-fancy, +body.home-page.cv-fancy { background: #f7f0e8; color: #37251f; font-family: Georgia, "Times New Roman", serif; @@ -482,6 +576,35 @@ body.cv-fancy { box-shadow: 0 18px 40px rgba(95, 63, 53, 0.16); } +.cv-fancy.home-page .hero { + background: #fffaf7; + border: 1px solid #ead5c6; + border-radius: 16px; + box-shadow: 0 18px 40px rgba(95, 63, 53, 0.16); +} + +.cv-fancy.home-page .hero-text h1 { + color: #6f3d53; + font-family: "Brush Script MT", "Segoe Script", cursive; + font-size: 3.4rem; + font-weight: 400; +} + +.cv-fancy.home-page .bio-intro, +.cv-fancy.home-page .bio-story, +.cv-fancy.home-page .cta { + color: #5f3f35; +} + +.cv-fancy.home-page .cta a { + color: #6f3d53; +} + +.cv-fancy.home-page .hero-image img { + border: 8px solid #fff; + box-shadow: 0 12px 24px rgba(95, 63, 53, 0.2); +} + .cv-fancy .cv-header-text { text-align: center; } @@ -778,6 +901,10 @@ body.cv-fancy { flex-direction: column; } + .home-page .hero-image img { + width: min(100%, 320px); + } + .cv-elegant .cv-header-text { padding-right: 0; padding-top: 178px; @@ -792,3 +919,4 @@ body.cv-fancy { font-size: 2.35rem; } } +