Kateryna Hnenna — Tattoo Artist CV

by Константин Дралюк

HTML

<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet"/>

<div class="page">

  <!-- ══════════ HEADER ══════════ -->
  <header class="header">
    <div class="header-name">
      <h1>Kateryna <span>Hnenna</span></h1>

      <div class="tagline">
        <span>Tattoo Artist</span>
        <span class="tagline-dot"></span>
        <span>Custom Design</span>
        <span class="tagline-dot"></span>
        <span>Private Studio</span>
      </div>

      <div class="contacts">
        <!-- Location -->
        <span>
          <svg class="icon" 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.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/></svg>
          Heraklion, Greece
        </span>
        <!-- Phone -->
        <a href="tel:+306937325393">
          <svg class="icon" 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.01-.24 11.47 11.47 0 003.58.57 1 1 0 011 1v3.5a1 1 0 01-1 1A17 17 0 013 4a1 1 0 011-1h3.5a1 1 0 011 1c0 1.25.2 2.45.57 3.58a1 1 0 01-.24 1.01l-2.21 2.2z"/></svg>
          +30 693 732 5393
        </a>
        <!-- Email -->
        <a href="mailto:[email protected]">
          <svg class="icon" 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>
          [email protected]
        </a>
      </div>

      <a class="portfolio-pill" href="https://instagram.com/grime_k_tattoo" target="_blank">
        <svg viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 1.366.062 2.633.334 3.608 1.31.975.975 1.247 2.242 1.31 3.608.058 1.265.07 1.645.07 4.849s-.012 3.584-.07 4.85c-.062 1.366-.334 2.633-1.31 3.608-.975.975-2.242 1.247-3.608...

CSS

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --ink: #1a1a1a;
  --smoke: #f5f3f0;
  --ash: #e8e4de;
  --rust: #8b4a2b;
  --rust-lt: #b5643e;
  --muted: #6b6560;
  --white: #ffffff;
  --col-l: 260px;
  --col-r: 1fr;
  --gap: 32px;
}

html {
  font-size: 15px;
}

body {
  font-family: 'Inter', sans-serif;
  background: #d6d2cc;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
  padding: 40px 20px;
  color: var(--ink);
}

/* ── PAGE ── */
.page {
  width: 794px;
  min-height: 1123px;
  background: var(--white);
  display: grid;
  grid-template-rows: auto 1fr;
  box-shadow: 0 8px 48px rgba(0, 0, 0, 0.22);
}

/* ── HEADER ── */
.header {
  background: var(--ink);
  color: var(--white);
  padding: 44px 44px 36px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: start;
  position: relative;
  overflow: hidden;
}

/* decorative lines */
.header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--rust) 0%,
    var(--rust-lt) 60%,
    transparent 100%
  );
}
.header::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 44px;
  right: 44px;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
}

.header-name h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.9rem;
  font-weight: 300;
  letter-spacing: 0.04em;
  line-height: 1.1;
  color: var(--white);
}

.header-name h1 span {
  font-weight: 600;
  font-style: italic;
  color: var(--rust-lt);
}

.tagline {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.tagline span {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.tagline-dot {
 ...