dejvino/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CV design tuning

Browse Source
This commit is contained in:
Dejvino 2026-05-24 22:50:56 +02:00
parent 64efd8ebce
commit 595b9ca233
2 changed files with 175 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

126
index.php
View File

@ -299,77 +299,65 @@ $cv_skills = $cvData['cv']['skills'] ?? [];
<?php endif; ?>
<?php if ($isCvPath): ?>
<section class="card cv-container">
<div class="cv-content">
<?php
$firstJob = $cv_experience[0] ?? null;
if ($firstJob):
?>
<section class="cv-section first-experience">
<h2>Latest Experience</h2>
<article class="cv-item">
<header class="cv-item-header">
<h3 class="cv-title"><?= $firstJob['title'] ?></h3>
<span class="cv-date"><?= $firstJob['date'] ?> (<?= calculateYears($firstJob['date']) ?>)</span>
</header>
<p class="cv-org"><?= $firstJob['org'] ?></p>
<p class="cv-desc"><?= $firstJob['desc'] ?></p>
</article>
</section>
<?php endif; ?>
<section class="cv-section skills">
<h2>Skills</h2>
<div class="skill-categories">
<?php
$global_i = 0;
foreach ($cv_skills as $category => $skills): ?>
<div class="skill-group">
<h3><?= $category ?></h3>
<div class="skill-tags">
<?php foreach ($skills as $skill):
$fontSize = 0.85 + (($global_i * 3) % 5) * 0.2;
$opacity = 0.6 + (($global_i * 2) % 4) * 0.1;
?>
<span class="tag" style="transition-delay: <?= 0.6 + ($global_i * 0.05) ?>s; font-size: <?= $fontSize ?>rem; opacity: <?= $opacity ?>;"><?= $skill ?></span>
<?php $global_i++;
endforeach; ?>
</div>
<?php
$firstJob = $cv_experience[0] ?? null;
if ($firstJob):
?>
<section class="card first-experience">
<h2>Latest Experience</h2>
<article class="cv-item">
<header class="cv-item-header">
<h3 class="cv-title"><?= $firstJob['title'] ?></h3>
<span class="cv-date"><?= $firstJob['date'] ?> (<?= calculateYears($firstJob['date']) ?>)</span>
</header>
<p class="cv-org"><?= $firstJob['org'] ?></p>
<p class="cv-desc"><?= $firstJob['desc'] ?></p>
</article>
</section>
<?php endif; ?>
<section class="card skills">
<h2>Skills</h2>
<div class="skill-categories">
<?php foreach ($cv_skills as $category => $skills): ?>
<div class="skill-group">
<h3><?= $category ?></h3>
<div class="skill-tags">
<?php foreach ($skills as $skill): ?>
<span class="tag"><?= $skill ?></span>
<?php endforeach; ?>
</div>
<?php endforeach; ?>
</div>
</section>
<section class="cv-section experience">
<h2>Past Experience</h2>
<?php foreach (array_slice($cv_experience, 1) as $job): ?>
<article class="cv-item">
<header class="cv-item-header">
<h3 class="cv-title"><?= $job['title'] ?></h3>
<span class="cv-date"><?= $job['date'] ?> (<?= calculateYears($job['date']) ?>)</span>
</header>
<p class="cv-org"><?= $job['org'] ?></p>
<p class="cv-desc"><?= $job['desc'] ?></p>
</article>
</div>
<?php endforeach; ?>
</section>
<section class="cv-section education">
<h2>Education</h2>
<?php foreach ($cv_education as $edu): ?>
<article class="cv-item">
<header class="cv-item-header">
<h3 class="cv-title"><?= $edu['title'] ?></h3>
<time class="cv-date"><?= $edu['date'] ?></time>
</header>
<p class="cv-org"><?= $edu['org'] ?></p>
<?php if ($edu['desc']): ?>
<p class="cv-desc"><?= $edu['desc'] ?></p>
<?php endif; ?>
</article>
<?php endforeach; ?>
</section>
</div>
</section>
</div>
</section>
<section class="card experience">
<h2>Past Experience</h2>
<?php foreach (array_slice($cv_experience, 1) as $job): ?>
<article class="cv-item">
<header class="cv-item-header">
<h3 class="cv-title"><?= $job['title'] ?></h3>
<span class="cv-date"><?= $job['date'] ?> (<?= calculateYears($job['date']) ?>)</span>
</header>
<p class="cv-org"><?= $job['org'] ?></p>
<p class="cv-desc"><?= $job['desc'] ?></p>
</article>
<?php endforeach; ?>
</section>
<section class="card education">
<h2>Education</h2>
<?php foreach ($cv_education as $edu): ?>
<article class="cv-item">
<header class="cv-item-header">
<h3 class="cv-title"><?= $edu['title'] ?></h3>
<time class="cv-date"><?= $edu['date'] ?></time>
</header>
<p class="cv-org"><?= $edu['org'] ?></p>
<?php if ($edu['desc']): ?>
<p class="cv-desc"><?= $edu['desc'] ?></p>
<?php endif; ?>
</article>
<?php endforeach; ?>
</section>
<?php endif; ?>
</main>

138
style.css
View File

@ -128,16 +128,16 @@ body {
border-radius: 4px !important;
margin-right: 16px !important;
}
.hero { grid-column: span 3; }
.interests-showcase { grid-column: span 3; }
.hiring-toggle { grid-column: span 3; }
.selected-work { grid-column: span 2; }
body:not(.cv-mode) .personal { grid-column: span 3; }
.cv-mode .personal { grid-column: span 1; }
.cv-container { grid-column: span 3; }
.experience { grid-column: span 3; }
.skills { grid-column: span 3; }
.education { grid-column: span 3; }
.hero { grid-column: span 3; transform: none; }
.interests-showcase { grid-column: span 3; transform: none; }
.hiring-toggle { grid-column: span 3; transform: none; }
.selected-work { grid-column: span 2; transform: none; }
body:not(.cv-mode) .personal { grid-column: span 3; transform: none; }
.cv-mode .personal { grid-column: span 1; transform: none; }
.first-experience { grid-column: span 3; transform: none; }
.experience { grid-column: span 3; transform: none; }
.skills { grid-column: span 3; transform: none; }
.education { grid-column: span 3; transform: none; }
/* Shuffle Logic */
.avatar {
@ -149,13 +149,14 @@ body {
border-radius: 4px !important;
margin-right: 16px !important;
}
.hero { transform: rotate(0.1deg); }
.selected-work { transform: translate(2px, -2px) rotate(-0.2deg); }
.personal { transform: translate(1px, -1px) rotate(-0.15deg); }
.hiring-toggle { transform: translate(-2px, 3px) rotate(0.2deg); }
.experience { transform: translate(3px, -2px) rotate(-0.2deg); }
.skills { transform: translate(-3px, 4px) rotate(0.6deg); }
.education { transform: translate(2px, 3px) rotate(-0.4deg); }
.hero { transform: none; }
.selected-work { transform: translate(2px, -2px); }
.personal { transform: translate(1px, -1px); }
.hiring-toggle { transform: translate(-2px, 3px); }
.first-experience { transform: translate(3px, -2px); }
.experience { transform: translate(3px, -2px); }
.skills { transform: translate(-3px, 4px); }
.education { transform: translate(2px, 3px); }
}
@ -381,8 +382,8 @@ body {
.hiring-toggle:hover {
filter: brightness(1.2);
transform: translate(-2px, 3px) rotate(0.2deg) scale(1.01);
filter: brightness(1.2); /* Keep brightness for hover effect */
transform: translate(-2px, 3px) scale(1.01); /* Remove rotation, keep translate and scale */
background: linear-gradient(var(--card-bg), var(--card-bg)) padding-box,
linear-gradient(135deg, rgba(255, 0, 255, 0.6), rgba(0, 243, 255, 0.6)) border-box;
}
@ -703,7 +704,7 @@ a { color: var(--link-color); text-decoration: none; }
@media (max-width: 768px) {
.bento-grid { grid-template-columns: 1fr; }
.profile, .about, .interests, .links, .contact,
.experience, .skills, .education {
.first-experience, .experience, .skills, .education {
grid-column: span 1;
}
.avatar {
@ -723,6 +724,103 @@ a { color: var(--link-color); text-decoration: none; }
.pill-url { display: inline; }
}
/* Tamed Cyberpunk Overrides for CV Mode */
body.cv-mode {
--bg-color: #0d0e12;
--text-color: #cbd5e1; /* slaty blue-gray */
--accent-color: #00d2ff;
--secondary-accent: #f472b6; /* modern pink/magenta */
--card-bg: #15171e;
background-image:
linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px) !important;
background-size: 60px 60px !important;
font-family: system-ui, -apple-system, sans-serif;
}
.cv-mode .card {
clip-path: none !important;
transform: none !important;
border: 1px solid rgba(255, 255, 255, 0.05) !important;
box-shadow: none !important;
background: var(--card-bg) !important;
border-top: 2px solid #1e293b !important;
filter: none !important;
border-radius: 6px;
}
.cv-mode .card:hover {
border-top-color: var(--accent-color) !important; /* Visual feedback on focus */
background: #1a1c25 !important;
}
.cv-mode h1, .cv-mode h2, .cv-mode h3 {
font-family: inherit;
text-transform: uppercase;
letter-spacing: normal;
text-shadow: none !important;
}
.cv-mode h1 {
color: #fff;
text-transform: none;
font-weight: 800;
letter-spacing: -0.02em;
}
.cv-mode h2 {
color: var(--accent-color);
font-size: 0.7rem;
font-family: var(--mono-font);
letter-spacing: 0.15em;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
padding-bottom: 12px;
margin-bottom: 24px;
}
.cv-mode h3 {
color: #f8fafc;
text-transform: none;
font-weight: 600;
font-size: 1.05rem;
}
.cv-mode .tag {
font-size: 0.72rem !important;
font-family: var(--mono-font);
font-weight: 500;
opacity: 1 !important;
border: 1px solid rgba(0, 210, 255, 0.15);
background: rgba(0, 210, 255, 0.04);
color: var(--accent-color);
padding: 4px 12px;
transform: none !important;
border-radius: 4px;
}
.cv-mode .cv-date {
color: var(--secondary-accent);
font-family: var(--mono-font);
font-weight: 600;
font-size: 0.75rem;
background: rgba(244, 114, 182, 0.05);
padding: 2px 8px;
border-radius: 4px;
}
.cv-mode .cv-org {
font-size: 0.85rem;
color: var(--accent-color);
opacity: 0.9;
font-weight: 600;
margin: 4px 0 10px 0;
}
.cv-mode .cv-desc {
font-size: 0.9rem;
line-height: 1.6;
color: var(--text-color);
}
/* Print mode */
/* Condensed Print Mode - White Background */