style: drop notable creations and redesign interests as wide tag cloud
Co-authored-by: aider (openai/qwen3.6) <aider@aider.chat>
This commit is contained in:
Dejvino
parent
9af492998f
commit
b574e2531c
14
data.json
14
data.json
@ -36,20 +36,6 @@
|
||||
"3D Printing",
|
||||
"Mountain Biking"
|
||||
],
|
||||
"creations": [
|
||||
{
|
||||
"title": "Neon Drift (Synthwave)",
|
||||
"description": "Original composition & video edit",
|
||||
"thumbnail": "thumb_neon.jpg",
|
||||
"url": "https://youtube.com/watch?v=example1"
|
||||
},
|
||||
{
|
||||
"title": "Analog Dreams",
|
||||
"description": "Live mandolin session & synth layers",
|
||||
"thumbnail": "thumb_analog.jpg",
|
||||
"url": "https://youtube.com/watch?v=example2"
|
||||
}
|
||||
],
|
||||
"cv": {
|
||||
"experience": [
|
||||
{
|
||||
|
||||
19
index.php
19
index.php
@ -248,25 +248,6 @@ $cv_skills = $cvData['cv']['skills'] ?? [];
|
||||
<?php endif; ?>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if (!$isCvPath && ($cvData['creations'] ?? [])): ?>
|
||||
<section class="card creations">
|
||||
<h2>Notable Creations</h2>
|
||||
<div class="creations-grid">
|
||||
<?php foreach ($cvData['creations'] as $c): ?>
|
||||
<a href="<?= $c['url'] ?? '#' ?>" target="_blank" class="creation-item">
|
||||
<?php if ($c['thumbnail'] ?? ''): ?>
|
||||
<img src="<?= $c['thumbnail'] ?>" alt="<?= $c['title'] ?? '' ?>" loading="lazy">
|
||||
<?php endif; ?>
|
||||
<div class="creation-info">
|
||||
<h3><?= $c['title'] ?? '' ?></h3>
|
||||
<p><?= $c['description'] ?? '' ?></p>
|
||||
</div>
|
||||
</a>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
</section>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ($isCvPath): ?>
|
||||
<section class="card cv-container">
|
||||
<div class="cv-content">
|
||||
|
||||
71
style.css
71
style.css
@ -131,8 +131,8 @@ body {
|
||||
.hero { grid-column: span 3; }
|
||||
.hiring-toggle { grid-column: span 3; }
|
||||
.selected-work { grid-column: span 2; }
|
||||
.personal { grid-column: span 1; }
|
||||
.creations { 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; }
|
||||
@ -151,7 +151,6 @@ body {
|
||||
.hero { transform: rotate(0.1deg); }
|
||||
.selected-work { transform: translate(2px, -2px) rotate(-0.2deg); }
|
||||
.personal { transform: translate(1px, -1px) rotate(-0.15deg); }
|
||||
.creations { transform: translate(-1px, 2px) rotate(0.1deg); }
|
||||
.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); }
|
||||
@ -343,71 +342,34 @@ body {
|
||||
|
||||
|
||||
/**
|
||||
* Personal interests – narrow side panel, non-interactive
|
||||
* Personal interests – tag cloud
|
||||
*/
|
||||
.personal-tags {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.personal-tag {
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-color);
|
||||
opacity: 0.85;
|
||||
padding-left: 10px;
|
||||
border-left: 2px solid rgba(0, 243, 255, 0.15);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Notable Creations
|
||||
*/
|
||||
.creations-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.creation-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 6px 14px;
|
||||
border-radius: 20px;
|
||||
background: rgba(0, 243, 255, 0.05);
|
||||
border: 1px solid rgba(0, 243, 255, 0.2);
|
||||
border-radius: 6px;
|
||||
padding: 12px;
|
||||
text-decoration: none;
|
||||
color: var(--text-color);
|
||||
border: 1px solid rgba(0, 243, 255, 0.15);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.creation-item:hover {
|
||||
background: rgba(0, 243, 255, 0.1);
|
||||
border-color: rgba(0, 243, 255, 0.5);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 0 15px rgba(0, 243, 255, 0.2);
|
||||
.personal-tag:hover {
|
||||
background: rgba(0, 243, 255, 0.15);
|
||||
border-color: rgba(0, 243, 255, 0.4);
|
||||
}
|
||||
|
||||
.creation-item img {
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
object-fit: cover;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 10px;
|
||||
border: 1px solid rgba(0, 243, 255, 0.3);
|
||||
}
|
||||
|
||||
.creation-info h3 {
|
||||
margin: 0 0 4px 0;
|
||||
font-size: 0.95rem;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.creation-info p {
|
||||
margin: 0;
|
||||
font-size: 0.8rem;
|
||||
opacity: 0.7;
|
||||
}
|
||||
/* Varying shades for tag cloud */
|
||||
.personal-tag:nth-child(3n+1) { opacity: 0.6; }
|
||||
.personal-tag:nth-child(3n+2) { opacity: 0.8; }
|
||||
.personal-tag:nth-child(3n) { opacity: 1.0; }
|
||||
|
||||
|
||||
.hiring-toggle {
|
||||
@ -740,7 +702,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, .creations {
|
||||
.experience, .skills, .education {
|
||||
grid-column: span 1;
|
||||
}
|
||||
.avatar {
|
||||
@ -758,7 +720,6 @@ a { color: var(--link-color); text-decoration: none; }
|
||||
.hero-contacts, .hero-nav { justify-content: center; }
|
||||
.pill { white-space: normal; gap: 4px 6px; padding: 5px 10px; }
|
||||
.pill-url { display: inline; }
|
||||
.creations-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user