Files

742 lines
23 KiB
HTML
Raw Permalink Normal View History

<!DOCTYPE html>
<html lang="da">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Erika Nielsen - CV</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--sidebar-bg: #1e2d4a;
--sidebar-text: #c8d6ed;
--accent: #4a8fe8;
--accent-light: #d6e6ff;
--white: #ffffff;
--body-bg: #f0f4fa;
--text-dark: #1e2d4a;
--text-muted: #7a8caa;
--border: #dce6f5;
--tag-bg: #e8f0fc;
}
body {
font-family: 'Inter', sans-serif;
background: var(--body-bg);
color: var(--text-dark);
min-height: 100vh;
display: flex;
align-items: flex-start;
justify-content: center;
padding: 40px 20px;
}
.cv-wrapper {
width: 100%;
max-width: 960px;
background: var(--white);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(30, 45, 74, 0.18);
display: flex;
border-top: 5px solid var(--accent);
}
/* ---- SIDEBAR ---- */
.sidebar {
width: 280px;
min-width: 280px;
background: linear-gradient(170deg, #243761 0%, #1a2840 100%);
color: var(--sidebar-text);
padding: 40px 28px;
display: flex;
flex-direction: column;
gap: 32px;
}
.avatar-wrap {
display: flex;
justify-content: center;
}
.avatar {
width: 120px;
height: 120px;
border-radius: 50%;
border: 3px solid var(--accent);
box-shadow: 0 0 0 6px rgba(74,143,232,0.15), 0 8px 24px rgba(0,0,0,0.3);
overflow: hidden;
background: linear-gradient(135deg, #2e4a7a, #1e2d4a);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.avatar-initials {
font-size: 36px;
font-weight: 700;
color: var(--accent);
letter-spacing: 2px;
}
.sidebar-name {
text-align: center;
}
.sidebar-name h1 {
font-size: 20px;
font-weight: 700;
color: var(--white);
line-height: 1.3;
}
.sidebar-name p {
font-size: 12px;
font-weight: 400;
color: var(--accent);
margin-top: 4px;
text-transform: uppercase;
letter-spacing: 1.2px;
}
.sidebar-section h3 {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
color: var(--accent);
border-bottom: 1px solid rgba(74, 143, 232, 0.3);
padding-bottom: 8px;
margin-bottom: 14px;
}
.contact-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 10px;
}
.contact-list li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 13px;
line-height: 1.4;
}
.contact-icon {
width: 18px;
height: 18px;
flex-shrink: 0;
margin-top: 1px;
opacity: 0.75;
}
.profile-text {
font-size: 13px;
line-height: 1.7;
color: var(--sidebar-text);
}
.skill-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.skill-tag {
background: rgba(74, 143, 232, 0.15);
border: 1px solid rgba(74, 143, 232, 0.3);
color: var(--accent-light);
font-size: 12px;
font-weight: 500;
padding: 4px 12px;
border-radius: 20px;
}
/* ---- MAIN CONTENT ---- */
.main {
flex: 1;
padding: 40px 36px;
display: flex;
flex-direction: column;
gap: 36px;
min-width: 0;
}
.section-title {
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2.5px;
color: var(--accent);
border-left: 4px solid var(--accent);
padding: 4px 0 4px 12px;
margin-bottom: 20px;
background: linear-gradient(90deg, rgba(74,143,232,0.07) 0%, transparent 80%);
border-radius: 0 4px 4px 0;
}
/* Timeline */
.timeline {
display: flex;
flex-direction: column;
gap: 0;
}
.timeline-item {
display: flex;
gap: 20px;
padding-bottom: 24px;
position: relative;
}
.timeline-item:last-child {
padding-bottom: 0;
}
.timeline-left {
display: flex;
flex-direction: column;
align-items: center;
flex-shrink: 0;
width: 12px;
}
.timeline-dot {
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--accent);
flex-shrink: 0;
margin-top: 3px;
box-shadow: 0 0 0 3px rgba(74, 143, 232, 0.25), 0 0 0 6px rgba(74,143,232,0.08);
}
.timeline-line {
width: 2px;
flex: 1;
background: var(--border);
margin-top: 6px;
}
.timeline-item:last-child .timeline-line {
display: none;
}
.timeline-content {
flex: 1;
min-width: 0;
}
.timeline-period {
font-size: 11px;
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.8px;
margin-bottom: 4px;
}
.timeline-title {
font-size: 15px;
font-weight: 600;
color: var(--text-dark);
line-height: 1.3;
}
.timeline-subtitle {
font-size: 12px;
color: var(--accent);
font-weight: 500;
margin-top: 2px;
margin-bottom: 8px;
}
.timeline-bullets {
list-style: none;
display: flex;
flex-direction: column;
gap: 5px;
}
.timeline-bullets li {
font-size: 13px;
color: #4a5568;
line-height: 1.5;
padding-left: 14px;
position: relative;
}
.timeline-bullets li::before {
content: '';
position: absolute;
left: 0;
top: 8px;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--accent);
opacity: 0.6;
}
/* Education cards */
.edu-grid {
display: flex;
flex-direction: column;
gap: 14px;
}
.edu-card {
background: var(--white);
border: 1px solid var(--border);
border-left: 4px solid var(--accent);
border-radius: 0 10px 10px 0;
padding: 14px 16px;
box-shadow: 0 2px 8px rgba(30,45,74,0.06);
transition: box-shadow 0.2s;
}
.edu-card:hover { box-shadow: 0 4px 16px rgba(30,45,74,0.12); }
.edu-period {
font-size: 11px;
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.8px;
margin-bottom: 4px;
}
.edu-title {
font-size: 14px;
font-weight: 600;
color: var(--text-dark);
}
.edu-place {
font-size: 12px;
color: var(--text-muted);
margin-top: 2px;
}
/* Language bars */
.lang-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.lang-item label {
display: flex;
justify-content: space-between;
font-size: 13px;
font-weight: 600;
color: var(--text-dark);
margin-bottom: 6px;
}
.lang-item .level {
font-weight: 400;
font-size: 11px;
color: var(--text-muted);
text-transform: uppercase;
}
.lang-bar-track {
height: 7px;
background: var(--border);
border-radius: 10px;
overflow: hidden;
}
.lang-bar-fill {
height: 100%;
background: linear-gradient(90deg, var(--accent), #7ab4f5);
border-radius: 10px;
transition: width 1s ease;
}
2026-04-19 17:35:07 +02:00
/* PDF-knap */
.pdf-btn {
position: fixed;
bottom: 32px;
right: 32px;
background: var(--accent);
color: white;
border: none;
border-radius: 50px;
padding: 14px 28px;
font-size: 1rem;
font-family: 'Inter', sans-serif;
font-weight: 600;
cursor: pointer;
box-shadow: 0 4px 20px rgba(74, 143, 232, 0.5);
transition: background 0.2s, transform 0.1s;
z-index: 999;
text-decoration: none;
display: inline-block;
2026-04-19 17:35:07 +02:00
}
.pdf-btn:hover { background: #2f72d0; transform: scale(1.04); }
/* Print / PDF via WeasyPrint */
@media print {
@page { size: A4 portrait; margin: 10mm 8mm; }
html, body { background: white !important; padding: 0 !important; margin: 0 !important; }
body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.pdf-btn { display: none !important; }
/* Fixed height = A4(297mm) - top(10mm) - bottom(10mm) - border(~1mm) = 276mm */
.cv-wrapper {
box-shadow: none !important;
border-radius: 0 !important;
width: 100% !important;
max-width: 100% !important;
border-top: 3px solid #4a8fe8 !important;
display: flex !important;
height: 276mm !important;
overflow: hidden !important;
}
/* ---- SIDEBAR ---- */
.sidebar {
-webkit-print-color-adjust: exact; print-color-adjust: exact;
background: #1e2d4a !important;
width: 188px !important; min-width: 188px !important;
height: 100% !important;
padding: 22px 16px !important;
gap: 20px !important;
color: #c8d6ed !important;
display: flex !important;
flex-direction: column !important;
box-sizing: border-box !important;
}
.avatar-wrap { padding: 0 !important; justify-content: flex-start !important; }
.avatar {
width: 80px !important; height: 80px !important;
border: 2px solid #4a8fe8 !important;
box-shadow: none !important;
}
.avatar-initials { font-size: 24px !important; }
.sidebar-name { text-align: left !important; }
.sidebar-name h1 { font-size: 16px !important; font-weight: 700 !important; color: #fff !important; line-height: 1.25 !important; margin: 0 !important; }
.sidebar-name p { font-size: 10px !important; margin-top: 4px !important; color: #4a8fe8 !important; }
.sidebar-section h3 {
font-size: 9px !important;
font-weight: 700 !important;
letter-spacing: 1px !important;
color: #4a8fe8 !important;
padding-bottom: 6px !important;
margin-bottom: 10px !important;
border-bottom: 1px solid rgba(74,143,232,0.35) !important;
}
.contact-list { gap: 9px !important; }
.contact-list li { font-size: 10.5px !important; gap: 7px !important; line-height: 1.45 !important; color: #c8d6ed !important; }
.contact-icon { width: 13px !important; height: 13px !important; flex-shrink: 0 !important; }
.profile-text { font-size: 10px !important; line-height: 1.65 !important; color: #c8d6ed !important; }
.skill-tags { gap: 6px !important; }
.skill-tag {
font-size: 9.5px !important; padding: 4px 11px !important;
background: rgba(74,143,232,0.18) !important;
border: 1px solid rgba(74,143,232,0.35) !important;
color: #d6e6ff !important;
border-radius: 20px !important;
}
/* ---- MAIN ---- */
.main {
padding: 24px 22px 20px !important;
gap: 0 !important;
flex: 1 !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
box-sizing: border-box !important;
height: 100% !important;
}
section { margin-bottom: 0 !important; }
.section-title {
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: 2px !important;
color: #4a8fe8 !important;
border-left: 3px solid #4a8fe8 !important;
padding: 4px 0 4px 9px !important;
margin-bottom: 14px !important;
background: none !important;
}
/* Timeline */
.timeline-item { padding-bottom: 16px !important; gap: 11px !important; }
.timeline-item:last-child { padding-bottom: 0 !important; }
.timeline-dot {
width: 9px !important; height: 9px !important;
margin-top: 4px !important;
box-shadow: none !important;
background: #4a8fe8 !important;
flex-shrink: 0 !important;
}
.timeline-line { background: #dce6f5 !important; }
.timeline-period { font-size: 9px !important; margin-bottom: 2px !important; color: #7a8caa !important; }
.timeline-title { font-size: 12.5px !important; font-weight: 600 !important; line-height: 1.25 !important; color: #1e2d4a !important; }
.timeline-subtitle { font-size: 10.5px !important; margin-top: 2px !important; margin-bottom: 5px !important; color: #4a8fe8 !important; }
.timeline-bullets { gap: 3px !important; }
.timeline-bullets li {
font-size: 10px !important; line-height: 1.5 !important;
padding-left: 12px !important;
color: #3a4a62 !important;
}
.timeline-bullets li::before {
width: 4px !important; height: 4px !important;
top: 7px !important;
background: #4a8fe8 !important;
}
/* Education — 3 columns */
.edu-grid {
flex-direction: row !important; gap: 8px !important;
align-items: stretch !important;
}
.edu-card {
flex: 1 !important; padding: 11px 13px !important;
box-shadow: none !important;
border: 1px solid #dce6f5 !important;
border-left: 3px solid #4a8fe8 !important;
border-radius: 0 6px 6px 0 !important;
}
.edu-period { font-size: 8.5px !important; margin-bottom: 4px !important; color: #7a8caa !important; }
.edu-title { font-size: 11px !important; font-weight: 600 !important; color: #1e2d4a !important; }
.edu-place { font-size: 10px !important; margin-top: 2px !important; color: #7a8caa !important; }
/* Language bars */
.lang-grid { gap: 14px !important; }
.lang-item label { font-size: 10.5px !important; margin-bottom: 5px !important; color: #1e2d4a !important; }
.lang-item .level { font-size: 9px !important; color: #7a8caa !important; }
.lang-bar-track { height: 6px !important; background: #dce6f5 !important; }
.lang-bar-fill { background: #4a8fe8 !important; }
}
/* Mobile */
@media (max-width: 700px) {
.cv-wrapper { flex-direction: column; }
.sidebar { width: 100%; min-width: 0; }
.lang-grid { grid-template-columns: 1fr; }
}
</style>
</head>
<body>
<div class="cv-wrapper">
<!-- SIDEBAR -->
<aside class="sidebar">
<div class="avatar-wrap">
<div class="avatar">
{% if pdf_mode %}
<div class="avatar-initials" style="display:flex">EN</div>
{% else %}
<img src="/static/photo.jpg" alt="Erika Nielsen"
onerror="this.style.display='none'; this.nextElementSibling.style.display='flex'">
<div class="avatar-initials" style="display:none">EN</div>
{% endif %}
</div>
</div>
<div class="sidebar-name">
<h1>Erika Nielsen</h1>
<p>Serviceminded &amp; engageret</p>
</div>
<div class="sidebar-section">
<h3>Kontakt</h3>
<ul class="contact-list">
<li>
<svg class="contact-icon" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
<path d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
<path d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
</svg>
<span>Skovstræde 3, Vordingborg</span>
</li>
<li>
<svg class="contact-icon" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
<path d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498A1 1 0 0121 15.72V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
</svg>
<span>+45 30 84 97 73</span>
</li>
<li>
<svg class="contact-icon" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
<path d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
</svg>
<span>erikastensvedny@gmail.com</span>
</li>
<li>
<svg class="contact-icon" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
<line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/>
<line x1="3" y1="10" x2="21" y2="10"/>
</svg>
<span>11 januar 2008</span>
</li>
</ul>
</div>
<div class="sidebar-section">
<h3>Faglig Profil</h3>
<p class="profile-text">
Jeg er kommunikativ, nem at omgås og kan tilpasse mig enhver situation.
Jeg søger et job, hvor jeg kan bidrage med mit engagement og mit store
arbejdsdrive. I mine tidligere job har jeg altid udmærket mig ved at
være produktiv og lære hurtigt.
</p>
</div>
<div class="sidebar-section">
<h3>Kompetencer</h3>
<div class="skill-tags">
<span class="skill-tag">Problemlosning</span>
<span class="skill-tag">Empatisk</span>
<span class="skill-tag">Fejlfinding</span>
<span class="skill-tag">Serviceminded</span>
<span class="skill-tag">Initiativrig</span>
</div>
</div>
</aside>
<!-- MAIN -->
<main class="main">
<!-- ERHVERVSERFARING -->
<section>
<div class="section-title">Erhvervserfaring</div>
<div class="timeline">
<div class="timeline-item">
<div class="timeline-left"><div class="timeline-dot"></div><div class="timeline-line"></div></div>
<div class="timeline-content">
<div class="timeline-period">Marts 2026 - April 2026</div>
<div class="timeline-title">Tjener - Restaurant Kujirasushi</div>
<div class="timeline-subtitle">Vordingborg</div>
<ul class="timeline-bullets">
<li>Koordinerede med køkkenpersonalet for at sikre hurtig og præcis levering af retter</li>
<li>Assisterede i daglig opsætning og oprydning af restaurantens borde og serviceområder</li>
<li>Serverede mad og drikkevarer til gæster, hvilket sikrede en høj grad af kundetilfredshed</li>
</ul>
</div>
</div>
<div class="timeline-item">
<div class="timeline-left"><div class="timeline-dot"></div><div class="timeline-line"></div></div>
<div class="timeline-content">
<div class="timeline-period">April 2026 - April 2026</div>
<div class="timeline-title">Praktikant - Egmont</div>
<div class="timeline-subtitle">København</div>
<ul class="timeline-bullets">
<li>Udvikling af hjemmeside</li>
<li>Test af AI-løsninger</li>
<li>Deltagelse i udviklingsmøder</li>
</ul>
</div>
</div>
<div class="timeline-item">
<div class="timeline-left"><div class="timeline-dot"></div><div class="timeline-line"></div></div>
<div class="timeline-content">
<div class="timeline-period">Januar 2025 - Februar 2026</div>
<div class="timeline-title">Privat Rengøring</div>
<div class="timeline-subtitle">Vordingborg / Stensved / Kalvehave</div>
<ul class="timeline-bullets">
<li>Rengøring i private hjem</li>
<li>Effektiv udførelse af tildelte opgaver</li>
</ul>
</div>
</div>
<div class="timeline-item">
<div class="timeline-left"><div class="timeline-dot"></div><div class="timeline-line"></div></div>
<div class="timeline-content">
<div class="timeline-period">Januar 2025 - Maj 2025</div>
<div class="timeline-title">Rengøringshjælp - Møllers Grill</div>
<div class="timeline-subtitle">Vordingborg</div>
<ul class="timeline-bullets">
<li>Planlagde og udførte rengøringsopgaver i henhold til en detaljeret tidsplan</li>
<li>Effektiv udførelse af tildelte opgaver</li>
</ul>
</div>
</div>
<div class="timeline-item">
<div class="timeline-left"><div class="timeline-dot"></div><div class="timeline-line"></div></div>
<div class="timeline-content">
<div class="timeline-period">Oktober 2024 - Oktober 2024</div>
<div class="timeline-title">Praktikant - Vordingborg Madservice</div>
<div class="timeline-subtitle">Nyråd</div>
<ul class="timeline-bullets">
<li>Lavede mad til ældre borgere</li>
<li>Rengøring af køkken</li>
</ul>
</div>
</div>
</div>
</section>
<!-- UDDANNELSE -->
<section>
<div class="section-title">Uddannelse</div>
<div class="edu-grid">
<div class="edu-card">
<div class="edu-period">August 2025 - Juni 2027</div>
<div class="edu-title">Hf-eksamen</div>
<div class="edu-place">Hf, Vordingborg</div>
</div>
<div class="edu-card">
<div class="edu-period">August 2023 - Juni 2024</div>
<div class="edu-title">10. klasse-eksamen</div>
<div class="edu-place">10. klasse, Næsved</div>
</div>
<div class="edu-card">
<div class="edu-period">August 2023 - Juni 2024</div>
<div class="edu-title">9. klasse-eksamen</div>
<div class="edu-place">9. klasse Efterskole, Glamsbjerg</div>
</div>
</div>
</section>
<!-- SPROG -->
<section>
<div class="section-title">Sprog</div>
<div class="lang-grid">
<div class="lang-item">
<label>Dansk <span class="level">Modersmål</span></label>
<div class="lang-bar-track"><div class="lang-bar-fill" style="width:100%"></div></div>
</div>
<div class="lang-item">
<label>Engelsk <span class="level">Højere mellemniveau</span></label>
<div class="lang-bar-track"><div class="lang-bar-fill" style="width:68%"></div></div>
</div>
<div class="lang-item">
<label>Tysk <span class="level">Basisniveau</span></label>
<div class="lang-bar-track"><div class="lang-bar-fill" style="width:30%"></div></div>
</div>
</div>
</section>
</main>
</div>
2026-04-19 17:35:07 +02:00
{% if not pdf_mode %}
<a class="pdf-btn" href="/static/Erika_Nielsen_CV.pdf" download="Erika_Nielsen_CV.pdf">⬇ Download CV som PDF</a>
{% endif %}
2026-04-19 17:35:07 +02:00
</body>
</html>