jv
/
my-homelab-configs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixing elegant - fancy themes

This commit is contained in:
jv 2026-05-24 19:26:06 -05:00
parent c551b8e8ee
commit f25b14abfe
4 changed files with 174 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
apps/website/cv-theme.js
View File

@ -1,5 +1,22 @@
const cvThemeButtons = [...document.querySelectorAll('[data-cv-theme]')]; const cvThemeButtons = [...document.querySelectorAll('[data-cv-theme]')];
const cvPortrait = document.getElementById('cv-portrait-orbit'); 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) { function setCvTheme(theme) {
const nextTheme = theme === 'fancy' ? 'fancy' : 'elegant'; const nextTheme = theme === 'fancy' ? 'fancy' : 'elegant';
@ -12,7 +29,7 @@ function setCvTheme(theme) {
button.setAttribute('aria-pressed', active ? 'true' : 'false'); button.setAttribute('aria-pressed', active ? 'true' : 'false');
}); });
localStorage.setItem('cv-theme', nextTheme); storeCvTheme(nextTheme);
} }
cvThemeButtons.forEach((button) => { cvThemeButtons.forEach((button) => {
@ -31,4 +48,5 @@ document.addEventListener('pointermove', (event) => {
cvPortrait.style.setProperty('--portrait-rotation', `${degrees + 8}deg`); cvPortrait.style.setProperty('--portrait-rotation', `${degrees + 8}deg`);
}); });
setCvTheme(localStorage.getItem('cv-theme') || 'elegant'); setCvTheme(getStoredCvTheme() || 'elegant');

5
apps/website/cv.php
View File

@ -169,10 +169,11 @@
</div> </div>
<script> <script>
const OTHER_PAGES = ['/index.php', '/blog.php']; const OTHER_PAGES = ['index.php', 'blog.php'];
</script> </script>
<script src="/cv-theme.js"></script> <script src="cv-theme.js"></script>
<?php require_once __DIR__ . '/partials/translation_ui.php'; ?> <?php require_once __DIR__ . '/partials/translation_ui.php'; ?>
</body> </body>
</html> </html>

23
apps/website/index.php
View File

@ -6,7 +6,7 @@
<title><?php echo $text['name']; ?></title> <title><?php echo $text['name']; ?></title>
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
</head> </head>
<body> <body class="home-page cv-elegant">
<nav class="top-nav"> <nav class="top-nav">
<div class="nav-left">Juvenal Diaz</div> <div class="nav-left">Juvenal Diaz</div>
@ -38,6 +38,23 @@
</div> </div>
</nav> </nav>
<div class="cv-theme-toolbar" aria-label="<?php echo htmlspecialchars($en['cv_theme_label']); ?>">
<span data-translate data-key="cv_theme_label"
data-en="<?php echo htmlspecialchars($en['cv_theme_label']); ?>">
<?php echo $text['cv_theme_label']; ?>
</span>
<button type="button" class="cv-theme-option is-active" data-cv-theme="elegant"
data-translate data-key="cv_theme_elegant"
data-en="<?php echo htmlspecialchars($en['cv_theme_elegant']); ?>">
<?php echo $text['cv_theme_elegant']; ?>
</button>
<button type="button" class="cv-theme-option" data-cv-theme="fancy"
data-translate data-key="cv_theme_fancy"
data-en="<?php echo htmlspecialchars($en['cv_theme_fancy']); ?>">
<?php echo $text['cv_theme_fancy']; ?>
</button>
</div>
<section class="hero"> <section class="hero">
<div class="hero-text"> <div class="hero-text">
<h1><?php echo $text['name']; ?></h1> <h1><?php echo $text['name']; ?></h1>
@ -78,9 +95,11 @@
// Tell translation.js to also translate these pages in the background // Tell translation.js to also translate these pages in the background
?> ?>
<script> <script>
const OTHER_PAGES = ['/cv.php', '/blog.php']; const OTHER_PAGES = ['cv.php', 'blog.php'];
</script> </script>
<script src="cv-theme.js"></script>
<?php require_once __DIR__ . '/partials/translation_ui.php'; ?> <?php require_once __DIR__ . '/partials/translation_ui.php'; ?>
</body> </body>
</html> </html>

132
apps/website/styles.css
View File

@ -149,6 +149,18 @@ body {
body { body {
margin: 20px; 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 { .hero-section {
flex-direction: column; flex-direction: column;
@ -204,6 +216,61 @@ body {
border-radius: 50%; 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 { .top-nav {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -353,6 +420,7 @@ body {
padding: 8px 12px; padding: 8px 12px;
border-radius: 6px; border-radius: 6px;
cursor: pointer; cursor: pointer;
font-family: inherit;
font-weight: 700; font-weight: 700;
} }
@ -385,7 +453,8 @@ body {
display: block; display: block;
} }
body.cv-elegant { body.cv-page.cv-elegant,
body.home-page.cv-elegant {
background: #030603; background: #030603;
color: #a8ffb0; color: #a8ffb0;
font-family: "Courier New", "Lucida Console", Monaco, monospace; font-family: "Courier New", "Lucida Console", Monaco, monospace;
@ -432,6 +501,30 @@ body.cv-elegant {
line-height: 1.55; 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 { .cv-elegant .cv-header-text {
min-height: 160px; min-height: 160px;
padding-right: 190px; padding-right: 190px;
@ -449,7 +542,8 @@ body.cv-elegant {
filter: saturate(0.8) contrast(1.08); filter: saturate(0.8) contrast(1.08);
} }
body.cv-fancy { body.cv-page.cv-fancy,
body.home-page.cv-fancy {
background: #f7f0e8; background: #f7f0e8;
color: #37251f; color: #37251f;
font-family: Georgia, "Times New Roman", serif; 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); 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 { .cv-fancy .cv-header-text {
text-align: center; text-align: center;
} }
@ -778,6 +901,10 @@ body.cv-fancy {
flex-direction: column; flex-direction: column;
} }
.home-page .hero-image img {
width: min(100%, 320px);
}
.cv-elegant .cv-header-text { .cv-elegant .cv-header-text {
padding-right: 0; padding-right: 0;
padding-top: 178px; padding-top: 178px;
@ -792,3 +919,4 @@ body.cv-fancy {
font-size: 2.35rem; font-size: 2.35rem;
} }
} }