CV as a scroll-out
This commit is contained in:
Dejvino
parent
229b5dee94
commit
adee14fabc
122
index.php
122
index.php
@ -95,10 +95,10 @@ $cv_skills = ["PHP", "Go", "Rust", "Docker", "Kubernetes", "PostgreSQL", "Redis"
|
||||
echo '<div class="avatar-placeholder"></div>';
|
||||
}
|
||||
?>
|
||||
<div class="header-text">
|
||||
<header class="header-text">
|
||||
<h1><?= $name ?></h1>
|
||||
<p class="subtitle"><?= $subtitle ?></p>
|
||||
</div>
|
||||
</header>
|
||||
</section>
|
||||
|
||||
<section class="card about">
|
||||
@ -113,6 +113,18 @@ $cv_skills = ["PHP", "Go", "Rust", "Docker", "Kubernetes", "PostgreSQL", "Redis"
|
||||
<p><?= $hardware_info ?></p>
|
||||
</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">
|
||||
<h2>Navigation</h2>
|
||||
<ul class="link-grid">
|
||||
@ -122,65 +134,57 @@ $cv_skills = ["PHP", "Go", "Rust", "Docker", "Kubernetes", "PostgreSQL", "Redis"
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="card contact">
|
||||
<h2>Remote_Access</h2>
|
||||
<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">
|
||||
<span id="toggle-label-text">Looking to hire?</span>
|
||||
<span class="switch">
|
||||
<input type="checkbox" id="cv-toggle">
|
||||
<span class="slider"></span>
|
||||
</span>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<section class="card experience hidden">
|
||||
<h2>Experience</h2>
|
||||
<?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>
|
||||
<section class="card cv-container">
|
||||
<label class="cv-header" for="cv-toggle">
|
||||
<div class="cv-toggle-container">
|
||||
<span id="toggle-label-text">Looking to hire?</span>
|
||||
<span class="switch">
|
||||
<input type="checkbox" id="cv-toggle">
|
||||
<span class="slider"></span>
|
||||
</span>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</section>
|
||||
</label>
|
||||
|
||||
<section class="card skills hidden">
|
||||
<h2>Skills</h2>
|
||||
<div class="skill-tags">
|
||||
<?php foreach ($cv_skills as $i => $skill): ?>
|
||||
<span class="tag" style="transition-delay: <?= 0.6 + ($i * 0.05) ?>s"><?= $skill ?></span>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="card education hidden">
|
||||
<h2>Education</h2>
|
||||
<?php foreach ($cv_education as $edu): ?>
|
||||
<div class="cv-item">
|
||||
<div class="cv-header">
|
||||
<span class="cv-title"><?= $edu['title'] ?></span>
|
||||
<span class="cv-date"><?= $edu['date'] ?></span>
|
||||
<div class="cv-content">
|
||||
<section class="cv-section skills hidden">
|
||||
<h2>Skills</h2>
|
||||
<div class="skill-tags">
|
||||
<?php foreach ($cv_skills as $i => $skill): ?>
|
||||
<span class="tag" style="transition-delay: <?= 0.6 + ($i * 0.05) ?>s"><?= $skill ?></span>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<div class="cv-org"><?= $edu['org'] ?></div>
|
||||
<?php if ($edu['desc']): ?>
|
||||
<div class="cv-desc"><?= $edu['desc'] ?></div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</section>
|
||||
|
||||
<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>
|
||||
<?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>
|
||||
</main>
|
||||
|
||||
@ -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
|
||||
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>
|
||||
|
||||
36
style.css
36
style.css
@ -107,9 +107,10 @@ body {
|
||||
.profile { grid-column: span 3; }
|
||||
.about { grid-column: span 2; }
|
||||
.interests { grid-column: span 1; }
|
||||
.contact { grid-column: span 2; }
|
||||
.links { grid-column: span 1; }
|
||||
.contact { grid-column: span 1; }
|
||||
.links { grid-column: span 2; }
|
||||
.hiring-toggle { grid-column: span 3; }
|
||||
.cv-container { grid-column: span 3; }
|
||||
.experience { grid-column: span 2; }
|
||||
.skills { grid-column: span 1; }
|
||||
.education { grid-column: span 3; }
|
||||
@ -188,6 +189,25 @@ body {
|
||||
}
|
||||
|
||||
/* 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 {
|
||||
margin-bottom: 20px;
|
||||
border-left: 2px solid rgba(0, 243, 255, 0.2);
|
||||
@ -196,14 +216,20 @@ body {
|
||||
|
||||
.cv-item:last-child { margin-bottom: 0; }
|
||||
|
||||
.cv-header {
|
||||
.cv-item-header, .cv-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.address.mono-addr {
|
||||
font-style: normal;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.cv-title {
|
||||
margin: 0;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
font-size: 1rem;
|
||||
@ -215,12 +241,13 @@ body {
|
||||
}
|
||||
|
||||
.cv-org {
|
||||
margin: 0 0 8px 0;
|
||||
font-size: 0.8rem;
|
||||
color: var(--link-color);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.cv-desc {
|
||||
margin: 0;
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.4;
|
||||
opacity: 0.9;
|
||||
@ -304,6 +331,7 @@ body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
font-size: 0.85rem;
|
||||
color: var(--accent-color);
|
||||
text-shadow: 0 0 10px var(--accent-color);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user