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

CV as a scroll-out

Browse Source
This commit is contained in:
Dejvino 2026-05-19 07:33:17 +02:00
parent 229b5dee94
commit adee14fabc
2 changed files with 95 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
index.php
View File

@ -95,10 +95,10 @@ $cv_skills = ["PHP", "Go", "Rust", "Docker", "Kubernetes", "PostgreSQL", "Redis"
echo '<div class="avatar-placeholder"></div>'; echo '<div class="avatar-placeholder"></div>';
} }
?> ?>
<div class="header-text"> <header class="header-text">
<h1><?= $name ?></h1> <h1><?= $name ?></h1>
<p class="subtitle"><?= $subtitle ?></p> <p class="subtitle"><?= $subtitle ?></p>
</div> </header>
</section> </section>
<section class="card about"> <section class="card about">
@ -113,6 +113,18 @@ $cv_skills = ["PHP", "Go", "Rust", "Docker", "Kubernetes", "PostgreSQL", "Redis"
<p><?= $hardware_info ?></p> <p><?= $hardware_info ?></p>
</section> </section>
<section class="card contact">
<h2>Remote_Access</h2>
<address class="mono-addr">
Email: <span id="contact-mail">uncovering...</span>
</address>
<ul class="link-grid">
<?php foreach ($extra_contact_links as $label => $url): ?>
<li><a href="<?= $url ?>" target="_blank"><span><?= $label ?></span></a></li>
<?php endforeach; ?>
</ul>
</section>
<section class="card links"> <section class="card links">
<h2>Navigation</h2> <h2>Navigation</h2>
<ul class="link-grid"> <ul class="link-grid">
@ -122,19 +134,8 @@ $cv_skills = ["PHP", "Go", "Rust", "Docker", "Kubernetes", "PostgreSQL", "Redis"
</ul> </ul>
</section> </section>
<section class="card contact"> <section class="card cv-container">
<h2>Remote_Access</h2> <label class="cv-header" for="cv-toggle">
<p class="mono-addr">
Contact email: <span id="contact-mail">uncovering...</span>
</p>
<ul class="link-grid">
<?php foreach ($extra_contact_links as $label => $url): ?>
<li><a href="<?= $url ?>" target="_blank"><span><?= $label ?></span></a></li>
<?php endforeach; ?>
</ul>
</section>
<label class="card hiring-toggle" for="cv-toggle">
<div class="cv-toggle-container"> <div class="cv-toggle-container">
<span id="toggle-label-text">Looking to hire?</span> <span id="toggle-label-text">Looking to hire?</span>
<span class="switch"> <span class="switch">
@ -144,21 +145,8 @@ $cv_skills = ["PHP", "Go", "Rust", "Docker", "Kubernetes", "PostgreSQL", "Redis"
</div> </div>
</label> </label>
<section class="card experience hidden"> <div class="cv-content">
<h2>Experience</h2> <section class="cv-section skills hidden">
<?php foreach ($cv_experience as $job): ?>
<div class="cv-item">
<div class="cv-header">
<span class="cv-title"><?= $job['title'] ?></span>
<span class="cv-date"><?= $job['date'] ?></span>
</div>
<div class="cv-org"><?= $job['org'] ?></div>
<div class="cv-desc"><?= $job['desc'] ?></div>
</div>
<?php endforeach; ?>
</section>
<section class="card skills hidden">
<h2>Skills</h2> <h2>Skills</h2>
<div class="skill-tags"> <div class="skill-tags">
<?php foreach ($cv_skills as $i => $skill): ?> <?php foreach ($cv_skills as $i => $skill): ?>
@ -167,21 +155,37 @@ $cv_skills = ["PHP", "Go", "Rust", "Docker", "Kubernetes", "PostgreSQL", "Redis"
</div> </div>
</section> </section>
<section class="card education hidden"> <section class="cv-section experience hidden">
<h2>Experience</h2>
<?php foreach ($cv_experience as $job): ?>
<article class="cv-item">
<header class="cv-item-header">
<h3 class="cv-title"><?= $job['title'] ?></h3>
<time class="cv-date"><?= $job['date'] ?></time>
</header>
<p class="cv-org"><?= $job['org'] ?></p>
<p class="cv-desc"><?= $job['desc'] ?></p>
</article>
<?php endforeach; ?>
</section>
<section class="cv-section education hidden">
<h2>Education</h2> <h2>Education</h2>
<?php foreach ($cv_education as $edu): ?> <?php foreach ($cv_education as $edu): ?>
<div class="cv-item"> <article class="cv-item">
<div class="cv-header"> <header class="cv-item-header">
<span class="cv-title"><?= $edu['title'] ?></span> <h3 class="cv-title"><?= $edu['title'] ?></h3>
<span class="cv-date"><?= $edu['date'] ?></span> <time class="cv-date"><?= $edu['date'] ?></time>
</div> </header>
<div class="cv-org"><?= $edu['org'] ?></div> <p class="cv-org"><?= $edu['org'] ?></p>
<?php if ($edu['desc']): ?> <?php if ($edu['desc']): ?>
<div class="cv-desc"><?= $edu['desc'] ?></div> <p class="cv-desc"><?= $edu['desc'] ?></p>
<?php endif; ?> <?php endif; ?>
</div> </article>
<?php endforeach; ?> <?php endforeach; ?>
</section> </section>
</div>
</section>
</main> </main>
<script> <script>
@ -274,7 +278,7 @@ $cv_skills = ["PHP", "Go", "Rust", "Docker", "Kubernetes", "PostgreSQL", "Redis"
// Only scroll to top if we are collapsing the CV and the user is scrolled down // Only scroll to top if we are collapsing the CV and the user is scrolled down
if (!e.target.checked && window.scrollY > 200) { if (!e.target.checked && window.scrollY > 200) {
window.scrollTo({ top: document.querySelector('.hiring-toggle').offsetTop - 20, behavior: 'smooth' }); window.scrollTo({ top: document.querySelector('.cv-container').offsetTop - 20, behavior: 'smooth' });
} }
}); });
</script> </script>

36
style.css
View File

@ -107,9 +107,10 @@ body {
.profile { grid-column: span 3; } .profile { grid-column: span 3; }
.about { grid-column: span 2; } .about { grid-column: span 2; }
.interests { grid-column: span 1; } .interests { grid-column: span 1; }
.contact { grid-column: span 2; } .contact { grid-column: span 1; }
.links { grid-column: span 1; } .links { grid-column: span 2; }
.hiring-toggle { grid-column: span 3; } .hiring-toggle { grid-column: span 3; }
.cv-container { grid-column: span 3; }
.experience { grid-column: span 2; } .experience { grid-column: span 2; }
.skills { grid-column: span 1; } .skills { grid-column: span 1; }
.education { grid-column: span 3; } .education { grid-column: span 3; }
@ -188,6 +189,25 @@ body {
} }
/* CV Specific Content Styles */ /* CV Specific Content Styles */
.cv-section {
background: rgba(0, 243, 255, 0.03);
border: 1px solid rgba(0, 243, 255, 0.15);
padding: 20px;
margin-top: 15px;
clip-path: polygon(
0 10px, 10px 0,
100% 0,
100% calc(100% - 10px), calc(100% - 10px) 100%,
0 100%
);
transition: all 0.3s ease;
}
.cv-section:hover {
background: rgba(0, 243, 255, 0.07);
border-color: rgba(0, 243, 255, 0.3);
}
.cv-item { .cv-item {
margin-bottom: 20px; margin-bottom: 20px;
border-left: 2px solid rgba(0, 243, 255, 0.2); border-left: 2px solid rgba(0, 243, 255, 0.2);
@ -196,14 +216,20 @@ body {
.cv-item:last-child { margin-bottom: 0; } .cv-item:last-child { margin-bottom: 0; }
.cv-header { .cv-item-header, .cv-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: baseline; align-items: baseline;
margin-bottom: 4px; margin-bottom: 4px;
} }
.address.mono-addr {
font-style: normal;
margin-bottom: 15px;
}
.cv-title { .cv-title {
margin: 0;
font-weight: bold; font-weight: bold;
color: #fff; color: #fff;
font-size: 1rem; font-size: 1rem;
@ -215,12 +241,13 @@ body {
} }
.cv-org { .cv-org {
margin: 0 0 8px 0;
font-size: 0.8rem; font-size: 0.8rem;
color: var(--link-color); color: var(--link-color);
margin-bottom: 8px;
} }
.cv-desc { .cv-desc {
margin: 0;
font-size: 0.85rem; font-size: 0.85rem;
line-height: 1.4; line-height: 1.4;
opacity: 0.9; opacity: 0.9;
@ -304,6 +331,7 @@ body {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
width: 100%;
font-size: 0.85rem; font-size: 0.85rem;
color: var(--accent-color); color: var(--accent-color);
text-shadow: 0 0 10px var(--accent-color); text-shadow: 0 0 10px var(--accent-color);