NikolajDanger/website-cv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🐐

Browse Source
This commit is contained in:
NikolajDanger
2026-06-14 15:29:00 +02:00
parent 5c33377c31
commit b3b3f0ce03
3 changed files with 87 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
style.css
+61 -5
View File
@@ -353,7 +353,7 @@ main { position: relative; z-index: 1; }
box-shadow: var(--card-shadow);
transition: transform 0.3s var(--ease), box-shadow 0.3s;
}
.skill-card:hover { transform: translateY(-5px); box-shadow: var(--glow-orange); }
.skill-card:hover { box-shadow: var(--glow-orange); }
.skill-card-icon { width: 42px; height: 42px; border-radius: 10px; background: var(--grad); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.05rem; margin-bottom: 0.85rem; }
.skill-card h3 { font-size: 1.05rem; font-weight: 800; margin-bottom: 1.25rem; }
@@ -368,7 +368,7 @@ main { position: relative; z-index: 1; }
transition: transform 0.3s var(--ease), box-shadow 0.3s;
will-change: transform;
}
.project-card:hover { transform: translateY(-4px); box-shadow: var(--glow-orange); }
.project-card:hover { box-shadow: var(--glow-orange); }
.project-header {
display: flex; align-items: flex-start; gap: 1rem;
@@ -421,6 +421,13 @@ main { position: relative; z-index: 1; }
padding: 0.25rem 0.7rem; border-radius: 999px;
background: rgba(26,10,0,0.07); color: var(--ink-soft);
border: 1px solid rgba(244, 114, 43, 0.18);
transition: all 0.2s var(--ease);
}
.project-tags span:hover, .timeline-tags span:hover {
background: var(--orange);
border-color: var(--orange);
color: #fff;
box-shadow: var(--glow-orange);
}
/* ── Timeline / Experience ──────────────────────────────────── */
@@ -444,7 +451,7 @@ main { position: relative; z-index: 1; }
box-shadow: var(--card-shadow);
transition: transform 0.3s var(--ease), box-shadow 0.3s;
}
.timeline-card:hover { transform: translateX(5px); box-shadow: var(--glow-orange); }
.timeline-card:hover { box-shadow: var(--glow-orange); }
.timeline-meta { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 0.6rem; }
.timeline-date { font-family: var(--mono); font-size: 0.75rem; color: var(--orange); }
.timeline-tag { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; background: rgba(244,114,43,0.12); color: var(--orange); border-radius: 999px; padding: 0.18rem 0.6rem; }
@@ -469,7 +476,7 @@ main { position: relative; z-index: 1; }
display: flex; gap: 1.25rem; align-items: flex-start;
transition: transform 0.3s var(--ease), box-shadow 0.3s;
}
.edu-card:hover { transform: translateY(-4px); box-shadow: var(--glow-orange); }
.edu-card:hover { box-shadow: var(--glow-orange); }
.edu-icon { width: 46px; height: 46px; flex-shrink: 0; border-radius: 12px; background: var(--grad); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.15rem; }
.edu-body h3 { font-size: 1.05rem; font-weight: 800; margin-bottom: 0.25rem; }
.edu-school { font-weight: 700; color: var(--orange); font-size: 0.85rem; margin-bottom: 0.2rem; }
@@ -561,10 +568,59 @@ footer {
background: var(--orange);
border-color: var(--orange);
color: #fff;
transform: translateY(-2px);
box-shadow: var(--glow-orange);
}
/* ── Skill pills: shared behavior (no select + tooltip anchor) ─── */
.lang-tag, .project-tags span, .timeline-tags span {
position: relative;
cursor: default;
user-select: none;
-webkit-user-select: none;
}
.lang-tag[data-tip]:not([data-tip=""]):hover::after,
.project-tags span[data-tip]:not([data-tip=""]):hover::after,
.timeline-tags span[data-tip]:not([data-tip=""]):hover::after {
content: attr(data-tip);
position: absolute;
bottom: calc(100% + 10px);
left: 50%;
transform: translateX(-50%);
width: max-content;
max-width: 220px;
padding: 0.5rem 0.7rem;
border-radius: 10px;
background: var(--ink);
color: var(--cream);
font-family: var(--font);
font-size: 0.72rem;
font-weight: 500;
line-height: 1.4;
letter-spacing: normal;
text-transform: none;
text-align: center;
white-space: normal;
box-shadow: var(--card-shadow);
z-index: 10;
pointer-events: none;
}
/* Tooltip arrow */
.lang-tag[data-tip]:not([data-tip=""]):hover::before,
.project-tags span[data-tip]:not([data-tip=""]):hover::before,
.timeline-tags span[data-tip]:not([data-tip=""]):hover::before {
content: '';
position: absolute;
bottom: calc(100% - 3px);
left: 50%;
transform: translateX(-50%);
border: 8px solid transparent;
border-top-color: var(--ink);
z-index: 10;
pointer-events: none;
}
.skills-cards {
display: grid;
grid-template-columns: repeat(2, 1fr);