Updated index and style

author: Natasha Moongrave <natasha@256phi.eu> 2026-04-16 09:44:47 +0200
committer: Natasha Moongrave <natasha@256phi.eu> 2026-04-16 09:44:47 +0200
commit: 81f2347b7f3c4b3918ae0998a7b0072d960529f4 (patch)
tree: 8630fb8224b2ba682bb4fdf5377c8aa219371b3a
parent: 6f415d976036c95b9f6f463805bb5616dac06ae0 (diff)
2 files changed, 599 insertions, 106 deletions
diff --git a/src/index.html b/src/index.html
index 0887d8a..a747023 100644
--- a/src/index.html
+++ b/src/index.html
@@ -3,71 +3,219 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Psychology student and researcher — CV and portfolio.">
     <title>Firstname Lastname | Psychology 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=Fraunces:opsz,wght@9..144,500;9..144,600&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
+
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
 
-    <header class="container">
-        <h1>Firstname Lastname</h1>
-        <p class="subtitle">Psychology Student / Researcher</p>
+    <header class="container site-header">
+        <div class="avatar" aria-hidden="true">
+            <!-- Replace src with a real photo (e.g. photo.jpg). Falls back to initials if image fails. -->
+            <img src="photo.jpg" alt="" onerror="this.style.display='none'; this.parentElement.classList.add('avatar--fallback');">
+            <span class="avatar__initials">FL</span>
+        </div>
+
+        <div class="site-header__text">
+            <h1>Firstname Lastname</h1>
+            <p class="subtitle">Psychology Student &amp; Researcher</p>
+            <p class="tagline">[One-line tagline — e.g. interested in cognitive development and mental-health research.]</p>
+
+            <nav class="quick-contact" aria-label="Quick contact">
+                <a href="mailto:email@example.com" class="chip">
+                    <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true"><path fill="currentColor" d="M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2zm0 2v.4l8 5 8-5V6H4zm16 2.6-7.47 4.67a1 1 0 0 1-1.06 0L4 8.6V18h16V8.6z"/></svg>
+                    email@example.com
+                </a>
+                <a href="https://linkedin.com/in/your-handle" class="chip" target="_blank" rel="noopener">
+                    <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true"><path fill="currentColor" d="M4.98 3.5a2.5 2.5 0 1 1 .02 5 2.5 2.5 0 0 1-.02-5zM3 9h4v12H3V9zm7 0h3.8v1.7h.05c.53-1 1.83-2.05 3.77-2.05 4.03 0 4.78 2.65 4.78 6.1V21H18.6v-5.3c0-1.27-.02-2.9-1.77-2.9-1.77 0-2.04 1.38-2.04 2.8V21H10V9z"/></svg>
+                    LinkedIn
+                </a>
+                <a href="cv.pdf" class="chip chip--primary" download>
+                    <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true"><path fill="currentColor" d="M12 3a1 1 0 0 1 1 1v9.59l3.3-3.3a1 1 0 1 1 1.4 1.42l-5 5a1 1 0 0 1-1.4 0l-5-5a1 1 0 1 1 1.4-1.42L11 13.6V4a1 1 0 0 1 1-1zM4 18a1 1 0 0 1 1 1v1h14v-1a1 1 0 1 1 2 0v2a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1z"/></svg>
+                    Download CV
+                </a>
+            </nav>
+        </div>
     </header>
 
     <main class="container">
 
-        <section class="card">
+        <section class="card" id="about">
             <h2>About</h2>
-            <p>[Short professional summary placeholder]</p>
+            <p>[Short professional summary — two or three sentences about your background, current focus, and what you are looking for next.]</p>
         </section>
 
-        <section class="card">
+        <section class="card" id="education">
             <h2>Education</h2>
+
+            <div class="item">
+                <div class="item__head">
+                    <h3>[University Name]</h3>
+                    <span class="date">20XX – 20XX</span>
+                </div>
+                <p class="item__sub">[BSc / MSc in Psychology]</p>
+                <p>[Thesis title, relevant coursework, honours, GPA — whichever is worth highlighting.]</p>
+            </div>
+
             <div class="item">
-                <h3>University Name</h3>
-                <span class="date">20XX – 20XX</span>
-                <p>BSc / MSc in Psychology</p>
+                <div class="item__head">
+                    <h3>[Previous School]</h3>
+                    <span class="date">20XX – 20XX</span>
+                </div>
+                <p class="item__sub">[Qualification]</p>
             </div>
         </section>
 
-        <section class="card">
+        <section class="card" id="experience">
             <h2>Experience</h2>
+
             <div class="item">
-                <h3>Role Title</h3>
-                <span class="date">20XX – Present</span>
+                <div class="item__head">
+                    <h3>[Role Title] · <span class="item__org">[Organisation]</span></h3>
+                    <span class="date">20XX – Present</span>
+                </div>
+                <ul class="bullets">
+                    <li>[Responsibility or accomplishment — start with a verb.]</li>
+                    <li>[Another point, ideally with a concrete result or number.]</li>
+                </ul>
+            </div>
+
+            <div class="item">
+                <div class="item__head">
+                    <h3>[Previous Role] · <span class="item__org">[Organisation]</span></h3>
+                    <span class="date">20XX – 20XX</span>
+                </div>
+                <ul class="bullets">
+                    <li>[Description]</li>
+                </ul>
+            </div>
+        </section>
+
+        <section class="card" id="projects">
+            <h2>Projects &amp; Research</h2>
+
+            <div class="item">
+                <div class="item__head">
+                    <h3>[Project / Study Title]</h3>
+                    <span class="date">20XX</span>
+                </div>
+                <p class="item__sub">[Type — e.g. Bachelor's thesis · Research assistantship · Independent study]</p>
+                <p>[Short description: the research question, methods (e.g. survey, EEG, qualitative interviews), and what you found or contributed.]</p>
+                <p class="item__links">
+                    <a href="#">Read more</a> · <a href="#">Repository / materials</a>
+                </p>
+            </div>
+
+            <div class="item">
+                <div class="item__head">
+                    <h3>[Second Project Title]</h3>
+                    <span class="date">20XX</span>
+                </div>
+                <p class="item__sub">[Type]</p>
                 <p>[Description]</p>
             </div>
         </section>
 
-        <section class="card">
+        <section class="card" id="publications">
+            <h2>Publications &amp; Presentations</h2>
+            <ol class="publications">
+                <li>
+                    <span class="pub__authors">[Lastname, F.]</span>,
+                    <span class="pub__coauthors">&amp; [Co-author, A.]</span>
+                    (20XX).
+                    <span class="pub__title">[Title of the paper or poster].</span>
+                    <em class="pub__venue">[Journal / Conference Name]</em>,
+                    <span class="pub__details">[vol(issue), pages]</span>.
+                </li>
+                <li>
+                    <span class="pub__authors">[Lastname, F.]</span>
+                    (20XX, Month).
+                    <span class="pub__title">[Poster / talk title].</span>
+                    <em class="pub__venue">[Conference Name]</em>,
+                    <span class="pub__details">[City, Country]</span>.
+                </li>
+            </ol>
+        </section>
+
+        <section class="card" id="interests">
             <h2>Research Interests</h2>
             <ul>
                 <li>[Cognitive Psychology]</li>
-                <li>[Behavioral Neuroscience]</li>
-                <li>[Mental Health]</li>
+                <li>[Behavioural Neuroscience]</li>
+                <li>[Mental Health &amp; Wellbeing]</li>
+                <li>[Developmental Psychology]</li>
             </ul>
         </section>
 
-        <section class="card">
+        <section class="card" id="skills">
             <h2>Skills</h2>
             <ul class="skills">
-                <li>[SPSS]</li>
-                <li>[Python]</li>
-                <li>[Data Analysis]</li>
-                <li>[Writing]</li>
+                <li>SPSS</li>
+                <li>R</li>
+                <li>Python</li>
+                <li>Qualitative coding</li>
+                <li>Experimental design</li>
+                <li>Academic writing</li>
+                <li>Literature review</li>
+                <li>Presentation</li>
+            </ul>
+        </section>
+
+        <section class="card" id="languages">
+            <h2>Languages</h2>
+            <ul class="languages">
+                <li>
+                    <span class="lang__name">[Language 1]</span>
+                    <span class="lang__level">Native</span>
+                </li>
+                <li>
+                    <span class="lang__name">[Language 2]</span>
+                    <span class="lang__level">Fluent · C1</span>
+                </li>
+                <li>
+                    <span class="lang__name">[Language 3]</span>
+                    <span class="lang__level">Intermediate · B1</span>
+                </li>
             </ul>
         </section>
 
-        <section class="card">
+        <section class="card" id="contact">
             <h2>Contact</h2>
-            <p>Email: [email@example.com]</p>
-            <p>LinkedIn: [link]</p>
+            <p>Email: <a href="mailto:email@example.com">email@example.com</a></p>
+            <p>LinkedIn: <a href="https://linkedin.com/in/your-handle" target="_blank" rel="noopener">linkedin.com/in/your-handle</a></p>
+            <p>Location: [City, Country]</p>
         </section>
 
     </main>
 
     <footer class="container">
-        <p>© 20XX Firstname Lastname</p>
+        <p>&copy; <span id="year">20XX</span> Firstname Lastname</p>
     </footer>
 
+    <script>
+        // Current year in footer
+        document.getElementById('year').textContent = new Date().getFullYear();
+
+        // Subtle scroll reveal — progressive enhancement, cards stay visible if JS fails.
+        const cards = document.querySelectorAll('.card');
+        if ('IntersectionObserver' in window) {
+            cards.forEach(c => c.classList.add('reveal'));
+            const io = new IntersectionObserver((entries) => {
+                entries.forEach(e => {
+                    if (e.isIntersecting) {
+                        e.target.classList.add('is-visible');
+                        io.unobserve(e.target);
+                    }
+                });
+            }, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });
+            cards.forEach(c => io.observe(c));
+        }
+    </script>
+
 </body>
 </html>
diff --git a/src/style.css b/src/style.css
index 528b0c3..0a15bb6 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,176 +1,521 @@
-/* Hide scrollbar but allow scrolling */
-body {
-    overflow: auto;
-    scrollbar-width: none !important;       /* Firefox */
-    -ms-overflow-style: none !important;    /* IE/Edge */
-}
+/* =========================================================
+   Catppuccin Latte + pastel-pink accents
+   Psychology CV / portfolio
+   ========================================================= */
 
-body::-webkit-scrollbar {
-    display: none !important;               /* Chrome/Safari */
-}
+:root {
+    /* Latte base */
+    --base:         #eff1f5;
+    --mantle:       #e6e9ef;
+    --crust:        #dce0e8;
+    --surface0:     #ccd0da;
 
+    /* Text */
+    --text:         #4c4f69;
+    --subtext:      #6c6f85;
+    --muted:        #8c8fa1;
 
+    /* Pastel pink accents */
+    --accent-soft:  #f4b8e4;   /* pastel, used for tints/hovers */
+    --accent:       #ea76cb;   /* Latte pink, used for headings & links */
+    --accent-deep:  #d364ac;   /* slightly deeper for contrast on hover */
+    --accent-tint:  rgba(234, 118, 203, 0.10);
 
-/* Catppuccin Latte inspired palette */
-:root {
-    --base: #eff1f5;
-    --mantle: #e6e9ef;
-    --text: #4c4f69;
-    --subtext: #6c6f85;
-    --accent: #f4b8e4;
-    --accent-strong: #ea76cb;
-    --border: #dce0e8;
+    /* Misc */
+    --border:       #dce0e8;
+    --shadow-sm:    0 1px 2px rgba(76, 79, 105, 0.05);
+    --shadow-md:    0 10px 30px rgba(76, 79, 105, 0.08);
+
+    --radius:       14px;
+    --radius-sm:    10px;
 }
 
-/* Reset */
+/* =========================================================
+   Reset + base
+   ========================================================= */
+
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }
 
+html { scroll-behavior: smooth; }
+
 body {
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-    background: var(--base);
-    color: var(--text);
+    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    font-size: 16px;
     line-height: 1.6;
+    color: var(--text);
+    background:
+        radial-gradient(1200px 600px at 10% -10%, var(--accent-tint), transparent 60%),
+        radial-gradient(900px 500px at 110% 10%, rgba(244, 184, 228, 0.15), transparent 60%),
+        var(--base);
+    background-attachment: fixed;
+
+    /* Hide scrollbar but allow scrolling */
+    overflow-x: hidden;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+
+    animation: fadeIn 0.6s ease both;
+}
+body::-webkit-scrollbar { display: none; }
+
+a {
+    color: var(--accent);
+    text-decoration: none;
+    transition: color 0.2s ease;
 }
+a:hover { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px; }
+
+/* =========================================================
+   Layout
+   ========================================================= */
 
-/* Layout */
 .container {
-    max-width: 800px;
-    margin: auto;
+    max-width: 820px;
+    margin: 0 auto;
     padding: 2rem 1.5rem;
 }
 
-/* Header */
-header {
-    margin-bottom: 2rem;
+/* =========================================================
+   Header
+   ========================================================= */
+
+.site-header {
+    display: flex;
+    align-items: center;
+    gap: 1.5rem;
+    padding-top: 3rem;
+    padding-bottom: 1rem;
 }
 
+.site-header__text { flex: 1; min-width: 0; }
+
 h1 {
-    font-size: 2rem;
+    font-family: "Fraunces", Georgia, serif;
     font-weight: 600;
+    font-size: clamp(1.9rem, 2.2vw + 1.2rem, 2.6rem);
+    letter-spacing: -0.01em;
+    color: var(--text);
 }
 
 .subtitle {
-    color: var(--subtext);
     margin-top: 0.25rem;
+    color: var(--accent);
+    font-weight: 500;
 }
 
-/* Card sections */
-.card {
-    background: rgba(255, 255, 255, 0.6);
-    backdrop-filter: blur(6px);
+.tagline {
+    margin-top: 0.5rem;
+    color: var(--subtext);
+    font-size: 0.95rem;
+}
+
+/* Avatar */
+.avatar {
+    position: relative;
+    flex: 0 0 auto;
+    width: 96px;
+    height: 96px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, var(--accent-soft), var(--accent));
+    padding: 3px;                      /* ring */
+    box-shadow: var(--shadow-md);
+}
+.avatar img {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    object-fit: cover;
+    background: var(--mantle);
+    display: block;
+}
+.avatar__initials {
+    position: absolute;
+    inset: 3px;
+    border-radius: 50%;
+    display: none;
+    align-items: center;
+    justify-content: center;
+    font-family: "Fraunces", serif;
+    font-weight: 600;
+    font-size: 1.8rem;
+    color: white;
+    background: linear-gradient(135deg, var(--accent-soft), var(--accent));
+}
+.avatar--fallback .avatar__initials { display: flex; }
+
+/* Quick contact chips */
+.quick-contact {
+    margin-top: 1rem;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+}
+
+.chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    padding: 0.4rem 0.8rem;
+    background: rgba(255, 255, 255, 0.7);
     border: 1px solid var(--border);
-    border-radius: 14px;
-    padding: 1.2rem 1.2rem;
-    margin-bottom: 1.5rem;
+    border-radius: 999px;
+    color: var(--text);
+    font-size: 0.85rem;
+    font-weight: 500;
+    transition: all 0.2s ease;
+    text-decoration: none;
+}
+.chip:hover {
+    border-color: var(--accent);
+    color: var(--accent-deep);
+    transform: translateY(-1px);
+    text-decoration: none;
+}
+.chip svg { opacity: 0.8; }
 
-    transition: all 0.25s ease;
+.chip--primary {
+    background: linear-gradient(135deg, var(--accent-soft), var(--accent));
+    border-color: transparent;
+    color: white;
+}
+.chip--primary:hover {
+    filter: brightness(1.05);
+    color: white;
+    box-shadow: 0 6px 16px rgba(234, 118, 203, 0.35);
 }
 
-/* Subtle hover lift */
+/* =========================================================
+   Cards
+   ========================================================= */
+
+.card {
+    background: rgba(255, 255, 255, 0.65);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: 1.4rem 1.5rem;
+    margin-bottom: 1.25rem;
+    box-shadow: var(--shadow-sm);
+    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
+}
 .card:hover {
     transform: translateY(-3px);
-    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
-    border-color: var(--accent);
+    box-shadow: var(--shadow-md);
+    border-color: var(--accent-soft);
 }
 
-/* Section titles */
+/* Section headings */
 h2 {
-    font-size: 1.1rem;
-    margin-bottom: 0.6rem;
-    color: var(--accent-strong);
+    font-family: "Fraunces", Georgia, serif;
+    font-size: 1.15rem;
+    font-weight: 600;
+    color: var(--accent);
+    margin-bottom: 0.9rem;
     position: relative;
 }
-
-/* Accent underline */
 h2::after {
     content: "";
     display: block;
-    width: 40px;
+    width: 36px;
     height: 3px;
-    background: var(--accent);
+    background: linear-gradient(90deg, var(--accent), var(--accent-soft));
     border-radius: 2px;
-    margin-top: 4px;
+    margin-top: 6px;
 }
 
-/* Items */
+/* Items (education / experience / projects) */
 .item {
-    margin-bottom: 0.8rem;
+    padding: 0.5rem 0;
+}
+.item + .item {
+    border-top: 1px dashed var(--border);
+    margin-top: 0.5rem;
+    padding-top: 0.9rem;
+}
+
+.item__head {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    gap: 0.75rem;
+    flex-wrap: wrap;
 }
 
 h3 {
     font-size: 1rem;
     font-weight: 600;
+    color: var(--text);
+}
+.item__org {
+    color: var(--subtext);
+    font-weight: 500;
+}
+.item__sub {
+    font-size: 0.9rem;
+    color: var(--subtext);
+    margin-bottom: 0.35rem;
+}
+.item__links {
+    margin-top: 0.5rem;
+    font-size: 0.85rem;
+    color: var(--subtext);
 }
 
 .date {
     font-size: 0.8rem;
     color: var(--subtext);
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
 }
 
-/* Lists */
-ul {
-    list-style: none;
-}
+/* =========================================================
+   Lists
+   ========================================================= */
+
+ul { list-style: none; }
 
 ul li {
     margin-bottom: 0.3rem;
     position: relative;
     padding-left: 1rem;
 }
-
-/* Custom bullet */
 ul li::before {
     content: "•";
     position: absolute;
     left: 0;
-    color: var(--accent-strong);
+    top: 0;
+    color: var(--accent);
 }
 
-/* Skills */
+/* Bullet list inside items */
+.bullets {
+    margin-top: 0.4rem;
+}
+.bullets li {
+    font-size: 0.95rem;
+    color: var(--text);
+}
+
+/* Skills — pills */
 .skills {
     display: flex;
     flex-wrap: wrap;
-    gap: 0.5rem;
+    gap: 0.45rem;
 }
-
 .skills li {
     background: var(--mantle);
-    padding: 0.3rem 0.6rem;
+    border: 1px solid transparent;
+    color: var(--text);
+    padding: 0.3rem 0.75rem;
     border-radius: 999px;
-    font-size: 0.8rem;
+    font-size: 0.82rem;
+    padding-left: 0.75rem;              /* override default bullet-pad */
     transition: all 0.2s ease;
 }
-
-/* Skill hover */
+.skills li::before { content: none; }   /* no bullet on pills */
 .skills li:hover {
-    background: var(--accent);
-    color: white;
+    background: var(--accent-tint);
+    border-color: var(--accent-soft);
+    color: var(--accent-deep);
+    transform: translateY(-1px);
 }
 
-/* Footer */
-footer {
-    text-align: center;
+/* Languages */
+.languages {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+    gap: 0.6rem;
+}
+.languages li {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    gap: 0.5rem;
+    background: rgba(255, 255, 255, 0.55);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    padding: 0.55rem 0.8rem;
+    padding-left: 0.8rem;
+}
+.languages li::before { content: none; }
+.lang__name { font-weight: 500; }
+.lang__level {
+    font-size: 0.8rem;
+    color: var(--accent);
+}
+
+/* Publications */
+.publications {
+    list-style: none;
+    counter-reset: pub;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+}
+.publications li {
+    counter-increment: pub;
+    position: relative;
+    padding-left: 2rem;
+    font-size: 0.92rem;
+    color: var(--text);
+    line-height: 1.5;
+}
+.publications li::before {
+    content: counter(pub);
+    position: absolute;
+    left: 0;
+    top: 0.05em;
+    width: 1.5rem;
+    height: 1.5rem;
+    border-radius: 50%;
+    background: var(--accent-tint);
+    color: var(--accent);
     font-size: 0.75rem;
-    color: var(--subtext);
-    margin-top: 1rem;
+    font-weight: 600;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
 }
+.pub__title { color: var(--text); font-weight: 500; }
+.pub__venue { color: var(--subtext); }
+.pub__authors { color: var(--text); }
+.pub__coauthors, .pub__details { color: var(--subtext); }
 
-/* Subtle fade-in */
-body {
-    animation: fadeIn 0.6s ease;
+/* =========================================================
+   Footer
+   ========================================================= */
+
+footer {
+    text-align: center;
+    font-size: 0.8rem;
+    color: var(--muted);
+    padding-top: 0;
+    padding-bottom: 2.5rem;
 }
 
+/* =========================================================
+   Motion
+   ========================================================= */
+
 @keyframes fadeIn {
-    from {
-        opacity: 0;
-        transform: translateY(6px);
+    from { opacity: 0; transform: translateY(6px); }
+    to   { opacity: 1; transform: translateY(0); }
+}
+
+/* Scroll reveal — only applied when JS adds .reveal */
+.card.reveal {
+    opacity: 0;
+    transform: translateY(14px);
+    transition: opacity 0.55s ease, transform 0.55s ease;
+}
+.card.reveal.is-visible {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+/* Respect reduced-motion preferences */
+@media (prefers-reduced-motion: reduce) {
+    *, *::before, *::after {
+        animation-duration: 0.001ms !important;
+        transition-duration: 0.001ms !important;
+    }
+    .card.reveal { opacity: 1; transform: none; }
+}
+
+/* =========================================================
+   Responsive
+   ========================================================= */
+
+@media (max-width: 600px) {
+    .container { padding: 1.5rem 1.1rem; }
+
+    .site-header {
+        flex-direction: column;
+        align-items: flex-start;
+        text-align: left;
+        gap: 1rem;
+        padding-top: 2rem;
+    }
+    .avatar { width: 80px; height: 80px; }
+
+    .item__head { flex-direction: column; align-items: flex-start; gap: 0.1rem; }
+    .date { order: -1; }    /* date above title on narrow screens */
+}
+
+/* =========================================================
+   Print — clean recruiter-friendly Ctrl+P
+   ========================================================= */
+
+@media print {
+    :root {
+        --base: #ffffff;
+        --mantle: #ffffff;
+        --border: #d0d0d0;
     }
-    to {
-        opacity: 1;
-        transform: translateY(0);
+    html, body {
+        background: white !important;
+        color: #222 !important;
+        font-size: 11pt;
     }
+    body { animation: none; }
+
+    .container { max-width: none; padding: 0; }
+
+    .site-header {
+        padding: 0 0 0.6cm 0;
+        border-bottom: 1px solid #ddd;
+    }
+
+    .avatar {
+        width: 70px; height: 70px;
+        box-shadow: none;
+    }
+
+    .card {
+        background: white !important;
+        backdrop-filter: none;
+        border: none;
+        box-shadow: none;
+        padding: 0.4cm 0;
+        margin: 0;
+        border-top: 1px solid #eee;
+        border-radius: 0;
+        page-break-inside: avoid;
+        transform: none !important;
+        opacity: 1 !important;
+    }
+    .card:first-of-type { border-top: none; }
+    .card:hover { transform: none; box-shadow: none; border-color: transparent; }
+
+    h1 { color: #222; }
+    h2 { color: var(--accent); }
+    h2::after { background: var(--accent); }
+
+    /* Hide the download button in print */
+    .chip--primary { display: none; }
+
+    .chip {
+        background: transparent;
+        border: none;
+        padding: 0;
+        margin-right: 0.6rem;
+    }
+
+    a { color: #222; text-decoration: none; }
+    a[href^="http"]::after,
+    a[href^="mailto"]::after {
+        content: " (" attr(href) ")";
+        font-size: 0.85em;
+        color: #666;
+        word-break: break-all;
+    }
+    /* Don't print URL for the internal chip links we already show as text */
+    .quick-contact a[href^="mailto"]::after { content: ""; }
+
+    footer { padding: 0.5cm 0 0; color: #888; }
 }
author	Natasha Moongrave <natasha@256phi.eu>	2026-04-16 09:44:47 +0200
committer	Natasha Moongrave <natasha@256phi.eu>	2026-04-16 09:44:47 +0200
commit	81f2347b7f3c4b3918ae0998a7b0072d960529f4 (patch)
tree	8630fb8224b2ba682bb4fdf5377c8aa219371b3a
parent	6f415d976036c95b9f6f463805bb5616dac06ae0 (diff)