This commit is contained in:
kankys committed 2026-09-12 23:12:03 +02:00
1 parent 3eaf56625a
commit dc5a6318bc
2 files changed
+614 -224

No files matched your search

+223 -161
View File
@@ -5,181 +5,243 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta name="description" content="CV Lukáše Kaňky" /> <meta name="description" content="Profesní životopis – Lukáš Kaňka" />
<meta name="keywords" content="Hlavní strana" />
<meta name="author" content="Lukáš Kaňka" /> <meta name="author" content="Lukáš Kaňka" />
<link rel="stylesheet" href="/cv/style-cv.css" /> <link rel="stylesheet" href="style-cv.css" />
<title>Životopis</title> <title>Životopis – Lukáš Kaňka</title>
</head> </head>
<body> <body>
<div class="flexbox"> <!-- Action Bar (screen only) -->
<!-- <div class="title"> <div class="top-actions no-print">
<h1>ŽIVOTOPIS LUKÁŠ<br> KAŇKA</h1> <a href="../index.html" class="back-link">&larr; Zpět na hlavní web</a>
</div> --> <button class="action-btn" onclick="window.print()">
<svg viewBox="0 0 24 24"><path d="M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z"/></svg>
Stáhnout / Vytisknout PDF
</button>
</div>
<div class="cv-container">
<div class="menu"> <!-- Header -->
<img src="/cv/image/1702045296079.jpeg" width="200" height="200" alt="Lukáš Kaňka" /> <header class="header">
<!--<h2>Státní příslušnost:</h2> <img src="image/1702045296079.jpeg" alt="Lukáš Kaňka" class="header-photo" />
<ul class="dot-none"> <div class="header-main">
<li>Česká</li> <h1>LUKÁŠ KAŇKA</h1>
</ul> <div class="subtitle">Procesní designér (vývoj FE) &amp; QA / Test Automation</div>
<div class="contact-grid">
<h2>Datum narození:</h2> <div class="contact-item">
<ul class="dot-none"> <svg viewBox="0 0 24 24"><path d="M6.62 10.79a15.05 15.05 0 006.59 6.59l2.2-2.2a1 1 0 011.02-.24 11.72 11.72 0 003.68.59 1 1 0 011 1V20a1 1 0 01-1 1A17 17 0 013 4a1 1 0 011-1h3.5a1 1 0 011 1 11.72 11.72 0 00.59 3.68 1 1 0 01-.24 1.02l-2.23 2.09z"/></svg>
<li>2.4.1981</li> <a href="tel:+420725303747">+420 725 303 747</a>
</ul>--> </div>
<h2>Kontakty:</h2> <div class="contact-item">
<ul class="dot-none"> <svg viewBox="0 0 24 24"><path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>
<li> <a href="mailto:lukas.kanka@proton.me">lukas.kanka@proton.me</a>
</div>
<a class="tlacitko" href="tel:+420 725 303 747">Telefon: +420 725 303 747</a> <div class="contact-item">
</li> <svg viewBox="0 0 24 24"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 010-5 2.5 2.5 0 010 5z"/></svg>
<li> <span>Praha, Česká republika</span>
<a class="tlacitko" href="mailto:kankys.cz@gmail.com" target="_blank" rel="noopener noreferrer">Email </div>
</a> <div class="contact-item">
</li> <svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 100 20 10 10 0 000-20zm-1 17.93A8.006 8.006 0 014.07 13H7a15.4 15.4 0 001.07 5.73A8.09 8.09 0 0111 19.93zm-5.93-8.93A8.04 8.04 0 0111 4.07V9H5.07zm7.93-6.93A8.006 8.006 0 0119.93 11H13V4.07zM13 13h5.93a8.04 8.04 0 01-5.93 6.93V13zm-2-2H5.07c.07-.34.13-.67.23-1H11v1zm0-2H5.5a15.4 15.4 0 011.57-4.73A8.09 8.09 0 0111 3.07V9zm2 2V9h5.5c.34.62.62 1.3.83 2H13zm0 2h4.5a15.4 15.4 0 01-1.57 4.73A8.09 8.09 0 0113 20.93V13z"/></svg>
<li> <a href="https://lukaskanka.cz" target="_blank" rel="noopener noreferrer">lukaskanka.cz</a>
<a class="tlacitko" href="https://lukaskanka.cz" target="_blank" rel="noopener noreferrer">Web</a> </div>
</li> <div class="contact-item">
<li> <svg viewBox="0 0 24 24"><path d="M12 2A10 10 0 002 12c0 4.42 2.87 8.17 6.84 9.5.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34-.46-1.16-1.11-1.47-1.11-1.47-.91-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.87 1.52 2.34 1.07 2.91.83.1-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.92 0-1.11.38-2 1.03-2.71-.1-.25-.45-1.29.1-2.64 0 0 .84-.27 2.75 1.02.79-.22 1.65-.33 2.5-.33.85 0 1.71.11 2.5.33 1.91-1.29 2.75-1.02 2.75-1.02.55 1.35.2 2.39.1 2.64.65.71 1.03 1.6 1.03 2.71 0 3.82-2.34 4.66-4.57 4.91.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0012 2z"/></svg>
<a class="tlacitko" href="https://codeberg.org/Kankys" target="_blank" rel="noopener noreferrer">Git repozitáře</a> <a href="https://codeberg.org/Kankys" target="_blank" rel="noopener noreferrer">codeberg.org/Kankys</a>
</li> </div>
<li> <div class="contact-item">
<a class="tlacitko" href="https://www.linkedin.com/in/luk%C3%A1%C5%A1-ka%C5%88ka-b2a0a1a0/" <svg viewBox="0 0 24 24"><path d="M19 3a2 2 0 012 2v14a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h14m-.5 15.5v-5.3a3.26 3.26 0 00-3.26-3.26c-.85 0-1.84.52-2.28 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 011.4 1.4v4.93h2.75M6.88 8.56a1.68 1.68 0 001.68-1.68c0-.93-.75-1.69-1.68-1.69a1.69 1.69 0 00-1.69 1.69c0 .93.76 1.68 1.69 1.68m1.39 9.94v-8.37H5.5v8.37h2.77z"/></svg>
target="_blank" rel="noopener noreferrer">LinkedIn</a> <a href="https://www.linkedin.com/in/luk%C3%A1%C5%A1-ka%C5%88ka-b2a0a1a0/" target="_blank" rel="noopener noreferrer">linkedin.com/in/lukas-kanka</a>
</li> </div>
</ul> </div>
<!-- <h2>Adresa:</h2>
<ul class="dot-none">
<li>Petržílkova 27</li>
<li>Praha 13</li>
<li>158 00</li>
</ul> -->
</div>
<div class="flexbox-content">
<div class="title">
<h1>ŽIVOTOPIS<br> LUKÁŠ KAŇKA</h1>
</div> </div>
</header>
<!-- Main Layout -->
<div class="main-body">
<!-- Left Sidebar -->
<aside class="sidebar">
<!-- Dovednosti -->
<div>
<div class="section-title">Dovednosti</div>
<div class="content"> <!--<div class="skill-group">
<div class="skill-title">Frontend &amp; Kód</div>
<div class="tag-container">
<span class="tag highlight">JavaScript (ES6+)</span>
<span class="tag highlight">HTML5</span>
<span class="tag highlight">CSS3</span>
<span class="tag">SQL / MSSQL</span>
</div>
</div>-->
<section class="info-section"> <div class="skill-group">
<h2>O MNĚ</h2> <div class="skill-title">QA &amp; Testování</div>
<hr /> <div class="tag-container">
<p> <span class="tag">Playwright</span>
IT nadšenec a Tech-libertarián s pozitivním přístupem k životu a vášní pro technologie,FreeBSD, Linux a OpenSource. Do světa IT jsem vstoupil jako Support, pak mě osud dovedl na pozici testera. Aktuálně se vzdělávám v JavaScript, HTML, CSS a automatizovaném testování. <!--<span class="tag">Cucumber</span>-->
<span class="tag">E2E testování</span>
<span class="tag">Manuální testování</span>
<span class="tag">Test Cases</span>
<span class="tag">Web Services</span>
</div>
</div>
<div class="skill-group">
<div class="skill-title">Nástroje &amp; Vývoj</div>
<div class="tag-container">
<span class="tag">Git</span>
<span class="tag">GitHub</span>
<span class="tag">GitLab</span>
<span class="tag">Jira</span>
<span class="tag">Enterprise Architect (EA)</span>
<span class="tag">Make (Integromat)</span>
</div>
</div>
<div class="skill-group">
<div class="skill-title">Operační systémy</div>
<div class="tag-container">
<span class="tag">Linux (Ubuntu, Arch)</span>
<span class="tag">macOS</span>
<span class="tag">GrapheneOS</span>
</div>
</div>
</div>
<!-- Jazyky -->
<div>
<div class="section-title">Jazyky</div>
<ul class="sidebar-list">
<li>
<strong>Čeština</strong>
<span class="subtext">Rodilý mluvčí</span>
</li>
<li>
<strong>Angličtina</strong>
<span class="subtext">B1 – technická dokumentace</span>
</li>
</ul>
</div>
<!-- Vzdělání & Kurzy -->
<div>
<div class="section-title">Kurzy a certifikace</div>
<ul class="sidebar-list">
<li>
<strong>Úvod do Playwright</strong>
<div class="subtext">Tesena | 04/2023 | Praha</div>
</li>
<li>
<strong>Základy testování, SQL, Web Services</strong>
<div class="subtext">Acamar | 08/2020 | Praha</div>
</li>
</ul>
</div>
<!-- Dobrovolnictví -->
<div>
<div class="section-title">Dobrovolnictví</div>
<div class="sidebar-note">
<strong>Mapper – Missing Maps</strong><br>
Humanitární mapování v rámci Missing Maps pomocí OSM přes HOT Tasking Manager.
</div>
</div>
<!-- Zájmy -->
<div>
<div class="section-title">Zájmy a koníčky</div>
<div class="sidebar-note">
Open source, Linux, FreeBSD, sebevzdělávání v IT, cyklistika, longboarding, turistika.
</div>
</div>
</aside>
<!-- Right Main Content -->
<main class="content-area">
<!-- O mně -->
<section>
<div class="section-title">O mně</div>
<p class="summary-text">
Technologický nadšenec se zaměřením na frontendový vývoj, procesní design a open-source ekosystém.
Do světa IT jsem vstoupil přes technickou podporu a následně svou kariéru nasměroval do oblasti QA a testování softwaru.
V současné době působím jako procesní designér (vývoj FE) ve společnosti Kyndryl na platformě Smart pro Českou spořitelnu,
kde propojuji návrh procesů a tvorbu frontendových komponent s automatizovaným testováním v Playwrightu.
Dlouhodobě preferuji open-source nástroje a aktivně se dále vzdělávám v moderním webovém vývoji.
</p> </p>
<p> Pracuji pro společnost Kyndryl na pozici juniorní Frontendový vývojář pro platformu SMART v ČS.</p>
<p>V osobním životě se snažím používat Opensource. Na pc používám EndeavourOS jako operační systém a mobilní operační systém jsem zvolil GrapheneOS.</p>
</section> </section>
<section class="job-section">
<h2>PRACOVNÍ ZKUŠENOSTI</h2> <!-- Pracovní zkušenosti -->
<hr /> <section>
<ul class="dot"> <div class="section-title">Pracovní zkušenosti</div>
<li>
<strong class="jobs">Vývoj na platformě Smart</strong> <!-- Kyndryl -->
</li> <article class="experience-item">
<li><strong>Kyndryl [ 15/05/2024 – ]</strong></li> <div class="exp-header">
<li>Město: Praha</li> <span class="exp-role">Procesní designér (vývoj FE) – platforma Smart</span>
<li>Země: Česko</li> <span class="exp-date">05/2024 – dosud</span>
<li>Vývojář na platformě Smart pro Českou spořitelnu.</li> </div>
<li>Technologie:Jira, GitHub, Playwright, EA.</li> <div class="exp-company">Kyndryl | Praha (klient: Česká spořitelna)</div>
</ul> <ul class="exp-bullets">
<ul class="dot"> <li>Vývoj a údržba frontendových částí na platformě Smart pro Českou spořitelnu.</li>
<li> <li>Tvorba a rozvoj automatizovaných E2E testů v nástroji Playwright pro ověření funkcionalit.</li>
<strong class="jobs">Tester softwaru</strong> <li>Zakreslení procesních a architektonických modelů v Enterprise Architectu (EA).</li>
</li> <li>Aktivní účast v agilním týmu, správa verzí v GitHubu a sledování požadavků v Jiře.</li>
<li><strong>Uniprog Solutions, a.s [ 15/08/2022 – 14/08/2023 ]</strong></li> </ul>
<li>Město: Praha</li> <div class="exp-tech">
<li>Země: Česko</li> <strong>Technologie:</strong> Enterprise Architect (EA), JavaScript, Playwright, GitHub, Jira
<li>Manuální testování PowerBuilder aplikací.</li> </div>
<li>Údržba a oprava automatizovaných testů Cucumber.</li> </article>
<li>Manuální testování webových aplikací dle Test Case a dokumentace.</li>
<li>Komunikace napříč vývojovými týmy.</li> <!-- Uniprog -->
<li>Technologie: MSSQL, Jira, PowerBuilder, GitLab.</li> <article class="experience-item">
</ul> <div class="exp-header">
<ul class="dot"> <span class="exp-role">Tester softwaru</span>
<li><strong class="jobs">IT support</strong></li> <span class="exp-date">08/2022 – 08/2023</span>
<li><strong>Comfort Finance Group CFG Živnostník [ 04/2022 – 07/2022 ]</strong></li> </div>
<li> Město: Praha </li> <div class="exp-company">Uniprog Solutions, a.s. | Praha</div>
<li>Země: Česko </li> <ul class="exp-bullets">
<li>Poskytování IT podpory uživatelům (SW, HW), onboarding nováčků, <li>Manuální testování webových a PowerBuilder aplikací dle testovacích scénářů (Test Cases) a specifikace.</li>
evidence skladu vybavení, řešení nastalých technických problémů.</li> <li>Údržba a úprava automatizovaných testů v Cucumberu.</li>
<li>Reporting systémových chyb na adekvátní oddělení.</li> <li>Práce s MSSQL databází pro přípravu a ověřování testovacích dat.</li>
<li>Práce v OS Ubuntu Linux.</li> <li>Hlášení a správa defektů v Jiře, úzká komunikace s vývojovými týmy.</li>
<li>Práce s nástroji jako Intergromat, Jira.</li> </ul>
</ul> <div class="exp-tech">
<ul class="dot"> <strong>Technologie:</strong> Cucumber, MSSQL, Jira, GitLab, PowerBuilder
<li><strong class="jobs">Řidič dodávky</strong></li> </div>
<li> </article>
<strong>Artglass Lighting Na plný úvazek [ 03/2016 – 04/2020 ]</strong><br />
Země: Česko <br /> <!-- CFG -->
Řízení dodávky, komunikace se zákazníky, podpora prodeje. <article class="experience-item">
</li> <div class="exp-header">
</ul> <span class="exp-role">IT Support Specialist</span>
<ul class="dot"> <span class="exp-date">04/2022 – 07/2022</span>
<li><strong class="pozice">Řidič nákladního vozu</strong></li> </div>
<li> <div class="exp-company">Comfort Finance Group (CFG) | Praha (OSVČ)</div>
<strong>ČSAD Liberec Na plný úvazek [ 07/2006 – 08/2014 ]</strong> <ul class="exp-bullets">
</li> <li>Poskytování L1/L2 technické podpory uživatelům (řešení SW a HW incidentů).</li>
<li>Řízení nákladních vozidel (MAN, DAF, Iveco, Renault). <li>Onboarding nováčků, příprava stanic v Ubuntu Linux a evidence hardwaru.</li>
</li> <li>Automatizace rutinních procesů v nástroji Make (dříve Integromat).</li>
</ul> </ul>
<div class="exp-tech">
<strong>Technologie:</strong> Ubuntu Linux, Make (Integromat), Jira
</div>
</article>
<!-- Předchozí praxe -->
<article class="experience-item">
<div class="exp-header">
<span class="exp-role" style="font-size: 13px; color: #475569;">Předchozí pracovní praxe (mimo IT)</span>
</div>
<div class="previous-jobs">
<strong>Artglass Lighting</strong> (03/2016 – 04/2020) – Řidič dodávky, logistika, komunikace se zákazníky.<br>
<strong>ČSAD Liberec</strong> (07/2006 – 08/2014) – Řidič nákladního vozu (vnitrostátní a mezinárodní přeprava).
</div>
</article>
</section> </section>
<section class="edu-section"> </main>
<h2>VZDĚLÁNÍ A ODBORNÁ PŘÍPRAVA</h2>
<hr />
<ul class="dot">
<li><strong class="course">Základy Testingu, SQL, Web Services</strong></li>
<li>
<strong>Acamar [ 08/2020 ]</strong>
</li>
<li>Město: Praha </li>
<li>Země: Česko</li>
</ul>
<ul class="dot">
<li><strong class="course">Úvod do Playwright</strong></li>
<li><strong>Tesena [ 04/2023 ]</strong></li>
<li>Město: Praha </li>
<li>Země: Česko</li>
</ul>
</section>
<section class="hobby-section">
<h2>ZÁJMY A KONÍČKY</h2>
<hr />
<ul class="dot">
<li><strong class="fun">
<!--FreeBSD, Opensource, Linux, Sebevzdělávání v testingu a dalších technologiích,
Cyklistika, Longboarding-->
</strong></li>
<li>
FreeBSD, Opensource, Linux, Sebevzdělávání v testingu a dalších technologiích,
Cyklistika, Longboarding, Turistika
<!--Mimo jiné se ve volném čase účastním amatérských závodů na kole a rád
si zaběhám.-->
</li>
</ul>
<h2>DOBROVOLNICKÁ ČINNOST</h2>
<hr />
<ul class="dot">
<li><strong class="fun">Maper Missing Maps</strong></li>
<li>
Ve volném čase mapuji pro humanitární účely, v projektu
<a class="tlacitko" href="https://www.missingmaps.org" target="_blank" rel="noopener noreferrer">Missing Maps</a>
pomocí OSM na platformě
<a class="tlacitko" href="https://tasks.hotosm.org" target="_blank" rel="noopener noreferrer">Hot Tasking Manager</a>.
</li>
</ul>
</section>
</div>
</div> </div>
</div> </div>
<!--<footer>Copyright &copy; Lukáš Kaňka 2025</footer> -->
</body> </body>
</html> </html>
+391 -63
View File
@@ -1,86 +1,414 @@
:root { :root {
--my-black: black; --primary: #1e3a8a;
--my-beckground: #ded4d4; --primary-light: #eff6ff;
max-width: 1200px; --text-main: #1f2937;
margin: auto; --text-muted: #4b5563;
--border-color: #e2e8f0;
--bg-sidebar: #f8fafc;
--accent: #2563eb;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
} }
body { body {
background-color: var(--my-beckground); font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
max-width: 1200px; color: var(--text-main);
margin: auto; background-color: #f1f5f9;
margin-bottom: 25px; line-height: 1.42;
} font-size: 13px;
@media screen and (max-width: 600px) { -webkit-font-smoothing: antialiased;
body {
width: calc(100% - 16px);
}
} }
footer { /* Screen top action bar */
position: fixed; .top-actions {
bottom: 0; max-width: 900px;
} margin: 15px auto 0;
.tlacitko {
color: var(--my-black);
}
td,
th {
border: 1px solid var(--my-black);
padding: 15px;
}
.flexbox {
display: flex; display: flex;
max-width: auto; justify-content: space-between;
margin: auto; align-items: center;
padding: 0 5px;
} }
.flexbox-content {
.action-btn {
display: inline-flex;
align-items: center;
gap: 8px;
background-color: #1e293b;
color: #ffffff;
padding: 8px 16px;
border-radius: 6px;
text-decoration: none;
font-size: 13px;
font-weight: 500;
border: none;
cursor: pointer;
transition: background-color 0.2s;
}
.action-btn:hover {
background-color: #334155;
}
.action-btn svg {
width: 15px;
height: 15px;
fill: currentColor;
}
.back-link {
color: #475569;
text-decoration: none;
font-size: 13px;
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 6px;
}
.back-link:hover {
color: #0f172a;
text-decoration: underline;
}
.cv-container {
max-width: 900px;
margin: 12px auto 25px;
background: #ffffff;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.menu { /* Header */
margin-top: 25px; .header {
display: flex;
align-items: center;
gap: 20px;
padding: 18px 30px;
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
color: #ffffff;
} }
.content { .header-photo {
order: 2; width: 96px;
flex: 3; height: 96px;
padding: 55px; border-radius: 50%;
margin-top: -45px; object-fit: cover;
} border: 3px solid rgba(255, 255, 255, 0.9);
.dot { flex-shrink: 0;
list-style-type: none;
}
.jobs,
.course,
.fun {
font-size: 20px;
}
.title {
text-align: center;
order: 1;
} }
@media screen and (max-width: 600px) { .header-main {
.flexbox { flex: 1;
}
.header-main h1 {
font-size: 25px;
font-weight: 700;
letter-spacing: 0.5px;
color: #ffffff;
margin-bottom: 2px;
}
.header-main .subtitle {
font-size: 14px;
color: #93c5fd;
font-weight: 500;
margin-bottom: 10px;
}
.contact-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 5px 12px;
font-size: 12px;
}
.contact-item {
display: flex;
align-items: center;
gap: 6px;
color: #e2e8f0;
white-space: nowrap;
}
.contact-item svg {
width: 13px;
height: 13px;
fill: currentColor;
color: #60a5fa;
flex-shrink: 0;
}
.contact-item a {
color: #e2e8f0;
text-decoration: none;
}
.contact-item a:hover {
color: #ffffff;
text-decoration: underline;
}
/* Layout Body */
.main-body {
display: grid;
grid-template-columns: 260px 1fr;
}
.sidebar {
background-color: var(--bg-sidebar);
border-right: 1px solid var(--border-color);
padding: 20px 18px;
display: flex;
flex-direction: column;
gap: 16px;
}
.content-area {
padding: 20px 25px;
display: flex;
flex-direction: column;
gap: 16px;
}
/* Section Titles */
.section-title {
font-size: 13.5px;
text-transform: uppercase;
letter-spacing: 0.8px;
font-weight: 700;
color: var(--primary);
margin-bottom: 8px;
padding-bottom: 3px;
border-bottom: 2px solid #cbd5e1;
}
/* Sidebar blocks */
.skill-group {
margin-bottom: 10px;
}
.skill-group:last-child {
margin-bottom: 0;
}
.skill-title {
font-size: 11.5px;
text-transform: uppercase;
font-weight: 700;
color: #475569;
margin-bottom: 4px;
}
.tag-container {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.tag {
background: #e2e8f0;
color: #1e293b;
padding: 2px 6px;
border-radius: 3px;
font-size: 11px;
font-weight: 500;
}
.tag.highlight {
background: #dbeafe;
color: #1e40af;
font-weight: 600;
}
.sidebar-list {
list-style: none;
font-size: 12px;
color: var(--text-main);
}
.sidebar-list li {
margin-bottom: 6px;
line-height: 1.35;
}
.sidebar-list strong {
display: block;
color: #0f172a;
}
.sidebar-list .subtext {
color: var(--text-muted);
font-size: 11px;
}
.sidebar-note {
font-size: 11.5px;
line-height: 1.4;
color: #334155;
}
/* Content Area */
.summary-text {
font-size: 12.5px;
color: #334155;
line-height: 1.48;
}
.experience-item {
margin-bottom: 14px;
}
.experience-item:last-child {
margin-bottom: 0;
}
.exp-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 2px;
}
.exp-role {
font-size: 14px;
font-weight: 700;
color: #0f172a;
}
.exp-date {
font-size: 11.5px;
font-weight: 600;
color: #64748b;
}
.exp-company {
font-size: 12.5px;
font-weight: 600;
color: var(--accent);
margin-bottom: 4px;
}
.exp-bullets {
list-style-type: disc;
padding-left: 16px;
color: #334155;
font-size: 12.5px;
margin-bottom: 5px;
}
.exp-bullets li {
margin-bottom: 3px;
line-height: 1.4;
}
.exp-tech {
font-size: 11.5px;
color: #475569;
background: #f1f5f9;
padding: 3px 6px;
border-radius: 4px;
display: inline-block;
}
.exp-tech strong {
color: #1e293b;
}
.previous-jobs {
font-size: 11.5px;
color: var(--text-muted);
line-height: 1.45;
}
/* Responsive Styles */
@media screen and (max-width: 768px) {
.top-actions {
padding: 0 15px;
}
.cv-container {
margin: 10px 0 0 0;
box-shadow: none;
}
.header {
flex-direction: column; flex-direction: column;
text-align: center;
padding: 20px 15px;
} }
.menu { .contact-grid {
order: 1; grid-template-columns: 1fr;
text-align: center; text-align: left;
} }
.dot-none {
list-style-type: none; .main-body {
grid-template-columns: 1fr;
} }
/* .content {
order: 3; .sidebar {
} */ border-right: none;
.title { border-bottom: 1px solid var(--border-color);
order: -1; }
}
/* Print Styles for PDF */
@page {
size: A4 portrait;
margin: 0;
}
@media print {
body {
background: #ffffff !important;
font-size: 11.5px;
}
.no-print {
display: none !important;
}
.cv-container {
max-width: 100%;
margin: 0;
box-shadow: none;
height: 100vh;
}
.header {
padding: 14px 22px;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.main-body {
grid-template-columns: 240px 1fr;
}
.sidebar {
padding: 16px 14px;
gap: 12px;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.content-area {
padding: 16px 20px;
gap: 12px;
}
.contact-item a {
color: #ffffff;
}
.experience-item {
break-inside: avoid;
page-break-inside: avoid;
} }
} }