This commit is contained in:
Dejvino 2026-05-19 07:57:14 +02:00
parent adee14fabc
commit ebc81f5d8e
2 changed files with 55 additions and 18 deletions

View File

@ -12,7 +12,6 @@ $email_user = "ciao";
$about_text = [
"Full-stack developer focused on pragmatic architecture, observability and performance.",
//""
];
$nav_links = [
@ -51,7 +50,11 @@ $cv_education = [
[ "title" => "Master of Computer Science", "org" => "Technical University", "date" => "2014", "desc" => "" ]
];
$cv_skills = ["PHP", "Go", "Rust", "Docker", "Kubernetes", "PostgreSQL", "Redis", "Linux", "Git"];
$cv_skills = [
"Development" => ["PHP", "Go", "Rust", "TypeScript"],
"Cloud & Ops" => ["Docker", "Kubernetes", "Linux", "Git"],
"Storage" => ["PostgreSQL", "Redis"]
];
/**
* Page design:
@ -146,12 +149,27 @@ $cv_skills = ["PHP", "Go", "Rust", "Docker", "Kubernetes", "PostgreSQL", "Redis"
</label>
<div class="cv-content">
<?php $file_mod_time = filemtime(__FILE__); ?>
<p class="cv-modified">Modified: <?= date("Y-m-d", $file_mod_time) ?></p>
<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 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>
</div>
<?php endforeach; ?>
</div>
</section>

View File

@ -253,17 +253,42 @@ body {
opacity: 0.9;
}
.cv-modified {
text-align: right;
font-size: 0.7rem;
opacity: 0.5;
margin-top: -10px;
margin-bottom: 1rem;
font-family: var(--mono-font);
}
.skill-categories {
display: flex;
flex-direction: column;
gap: 2rem;
padding: 1rem 0;
}
.skill-group h3 {
font-size: 0.6rem;
text-transform: uppercase;
opacity: 0.4;
letter-spacing: 3px;
margin-bottom: 0.75rem;
text-align: center;
color: var(--text-color);
}
.skill-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
gap: 0.5rem 1.5rem;
justify-content: center;
align-items: center;
}
.tag {
font-size: 0.7rem;
padding: 4px 8px;
background: rgba(0, 243, 255, 0.1);
border: 1px solid rgba(0, 243, 255, 0.3);
display: inline-block;
opacity: 0;
transform: translateX(-5px);
transition: opacity 0.4s ease, transform 0.4s ease;
@ -403,12 +428,6 @@ h2 {
letter-spacing: 2px;
}
.link-grid a:hover {
background: rgba(255, 255, 255, 0.08);
border-left-color: var(--accent-color);
box-shadow: 0 0 15px var(--accent-color);
}
a { color: var(--link-color); text-decoration: none; }
@media (max-width: 768px) {