"./code_export.ps1.test.txt" : """ "./contact.html" : """ Contact | Kristijan Popovski
Contact

Let's architect your next vision.

Interested in working together? Open to discussions around strategic collaboration, governance initiatives, advisory work, and thoughtfully run projects.

Portrait of Kristijan Popovski on the contact page

Fill out to connect

This is a static form prepared for backend connection later. Current validation runs entirely in the browser.

""" "./contact/index.html" : """ Contact | Kristijan Popovski
Contact

Let's architect your next vision.

Interested in working together? Open to discussions around strategic collaboration, governance initiatives, advisory work, and thoughtfully run projects.

Portrait of Kristijan Popovski on the contact page

Fill out to connect

This is a static form prepared for backend connection later. Current validation runs entirely in the browser.

""" "./css/style.css" : """ :root { --color-primary: #002da7; --color-primary-strong: #0f3bc2; --color-primary-soft: #dfe7ff; --color-primary-ghost: rgba(0, 45, 167, 0.08); --color-secondary: #3657be; --color-surface: #f8f9fa; --color-surface-low: #f3f4f5; --color-surface-card: #ffffff; --color-surface-high: #e7e8e9; --color-surface-ink: #191c1d; --color-text: #191c1d; --color-text-muted: #444655; --color-text-soft: #6a6d78; --color-outline: rgba(116, 118, 134, 0.2); --color-outline-strong: rgba(116, 118, 134, 0.32); --color-white: #ffffff; --color-dark: #101420; --shadow-soft: 0 16px 50px rgba(0, 45, 167, 0.06); --shadow-card: 0 18px 45px rgba(0, 45, 167, 0.08); --shadow-button: 0 16px 36px rgba(0, 45, 167, 0.18); --shadow-nav: 0 10px 40px rgba(0, 45, 167, 0.05); --shadow-large: 0 35px 90px rgba(0, 45, 167, 0.1); --radius-sm: 0.75rem; --radius-md: 1.25rem; --radius-lg: 2rem; --radius-xl: 2.5rem; --radius-pill: 999px; --container-sm: 40rem; --container-md: 56rem; --container-lg: 74rem; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-14: 3.5rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-28: 7rem; --space-32: 8rem; --font-body: "Inter", "Segoe UI", Arial, sans-serif; --font-display: "Manrope", "Inter", "Segoe UI", Arial, sans-serif; --transition-standard: 220ms ease; --transition-slow: 420ms cubic-bezier(0.2, 0.8, 0.2, 1); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); color: var(--color-text); background: radial-gradient(circle at top right, rgba(54, 87, 190, 0.07), transparent 28%), linear-gradient(180deg, #fbfcfd 0%, var(--color-surface) 30%, #f5f7fb 100%); min-width: 320px; } body.menu-open { overflow: hidden; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button, input, textarea { font: inherit; } button { border: 0; background: none; cursor: pointer; } textarea { resize: vertical; } ::selection { background: var(--color-primary-soft); color: var(--color-primary); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .site-shell { overflow: clip; } .container { width: min(100% - 2rem, var(--container-lg)); margin: 0 auto; } .container--narrow { width: min(100% - 2rem, var(--container-md)); margin: 0 auto; } .section { padding: var(--space-20) 0; } .section--tight { padding: var(--space-16) 0; } .section--soft { background: rgba(255, 255, 255, 0.58); } .site-header { position: sticky; top: 0; z-index: 100; backdrop-filter: blur(24px); background: rgba(255, 255, 255, 0.84); border-bottom: 1px solid rgba(196, 197, 215, 0.2); box-shadow: var(--shadow-nav); } .site-header__inner { width: min(100% - 2rem, var(--container-lg)); margin: 0 auto; min-height: 4.5rem; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); } .brand { font-family: var(--font-display); font-size: 1.05rem; font-weight: 800; letter-spacing: -0.04em; color: var(--color-surface-ink); } .site-nav { display: none; } .site-nav__list { list-style: none; display: flex; align-items: center; gap: var(--space-8); padding: 0; margin: 0; } .site-nav__link { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; color: var(--color-text-soft); transition: color var(--transition-standard); } .site-nav__link:hover, .site-nav__link:focus-visible { color: var(--color-primary); } .site-nav__link.is-current { color: var(--color-primary); position: relative; } .site-nav__link.is-current::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.55rem; height: 2px; border-radius: 999px; background: var(--color-primary); } .site-header__actions { display: flex; align-items: center; gap: var(--space-3); } .site-header__actions .button--small { display: none; } .menu-toggle { width: 2.75rem; height: 2.75rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(0, 45, 167, 0.06); color: var(--color-primary); transition: background var(--transition-standard), transform var(--transition-standard); } .menu-toggle:hover, .menu-toggle:focus-visible { background: rgba(0, 45, 167, 0.1); } .menu-toggle__line { width: 1.2rem; height: 2px; border-radius: 999px; background: currentColor; position: relative; transition: transform var(--transition-standard), opacity var(--transition-standard); } .menu-toggle__line::before, .menu-toggle__line::after { content: ""; position: absolute; left: 0; width: 1.2rem; height: 2px; border-radius: 999px; background: currentColor; transition: transform var(--transition-standard), top var(--transition-standard), bottom var(--transition-standard); } .menu-toggle__line::before { top: -0.38rem; } .menu-toggle__line::after { bottom: -0.38rem; } .menu-toggle.is-open .menu-toggle__line { background: transparent; } .menu-toggle.is-open .menu-toggle__line::before { top: 0; transform: rotate(45deg); } .menu-toggle.is-open .menu-toggle__line::after { bottom: 0; transform: rotate(-45deg); } .mobile-nav { position: fixed; inset: 4.5rem 1rem auto 1rem; padding: var(--space-8); border-radius: var(--radius-lg); background: rgba(255, 255, 255, 0.97); border: 1px solid rgba(196, 197, 215, 0.3); box-shadow: var(--shadow-large); transform: translateY(-0.75rem); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--transition-standard), transform var(--transition-standard), visibility var(--transition-standard); z-index: 95; } .mobile-nav.is-open { transform: translateY(0); opacity: 1; visibility: visible; pointer-events: auto; } .mobile-nav__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); } .mobile-nav__link { display: block; padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); background: var(--color-surface-low); font-family: var(--font-display); font-weight: 700; color: var(--color-text); transition: background var(--transition-standard), color var(--transition-standard); } .mobile-nav__link.is-current { background: var(--color-primary-soft); color: var(--color-primary); } .page-main { padding-top: var(--space-10); } .hero { display: grid; gap: var(--space-10); align-items: center; } .hero--home, .hero--contact { padding-top: var(--space-6); } .eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-5); padding: 0.45rem 0.8rem; border-radius: var(--radius-pill); background: rgba(0, 45, 167, 0.08); color: var(--color-primary); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; } .eyebrow--plain { background: transparent; padding: 0; } .eyebrow__dot { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: currentColor; } .hero__title, .page-title, .cta-banner__title { margin: 0; font-family: var(--font-display); font-size: clamp(2.75rem, 8vw, 5.5rem); line-height: 0.98; letter-spacing: -0.05em; color: var(--color-surface-ink); } .hero__title strong, .page-title strong, .text-accent { color: var(--color-primary); } .hero__lede, .page-lede, .section-intro, .rich-text p, .contact-card__text, .stat-card__caption, .timeline__content, .card__text, .skill-card__text, .award-card__text { color: var(--color-text-muted); line-height: 1.72; } .hero__lede, .page-lede { margin: var(--space-6) 0 0; font-size: 1.05rem; max-width: 38rem; } .button-row { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-8); } .button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 3.6rem; padding: 0.95rem 1.45rem; border-radius: 1.1rem; font-family: var(--font-display); font-size: 0.96rem; font-weight: 800; letter-spacing: -0.02em; text-align: center; transition: transform var(--transition-standard), box-shadow var(--transition-standard), background var(--transition-standard), color var(--transition-standard), border-color var(--transition-standard); } .button:hover, .button:focus-visible { transform: translateY(-2px); } .button--primary { color: var(--color-white); background: linear-gradient(135deg, var(--color-primary-strong), var(--color-primary)); box-shadow: var(--shadow-button); } .button--secondary { color: var(--color-primary); background: rgba(0, 45, 167, 0.05); border: 1px solid rgba(0, 45, 167, 0.16); } .button--ghost { color: var(--color-primary); background: transparent; } .button--dark { color: var(--color-white); background: #121827; box-shadow: 0 18px 42px rgba(18, 24, 39, 0.18); } .button--small { min-height: 2.9rem; padding: 0.7rem 1rem; font-size: 0.88rem; } .button--block { width: 100%; } .button__icon, .text-link__icon { width: 1rem; height: 1rem; flex: 0 0 auto; } .hero-media { position: relative; } .hero-media__frame, .image-frame { position: relative; overflow: hidden; background: linear-gradient(180deg, rgba(223, 231, 255, 0.8), rgba(255, 255, 255, 0.88)); border-radius: var(--radius-xl); box-shadow: var(--shadow-large); } .hero-media__frame img, .image-frame img { width: 100%; height: 100%; object-fit: cover; } .hero-media__frame { aspect-ratio: 4 / 5; } .glass-card { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; padding: var(--space-5); border-radius: 1.5rem; background: rgba(255, 255, 255, 0.88); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.56); box-shadow: 0 15px 40px rgba(0, 45, 167, 0.12); } .glass-card__label { margin: 0 0 var(--space-2); color: var(--color-primary); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; } .glass-card__title { margin: 0; font-family: var(--font-display); font-size: 1.05rem; font-weight: 800; letter-spacing: -0.03em; } .hero-media__accent { position: absolute; right: -1.5rem; bottom: -1.5rem; width: 8rem; height: 8rem; border-radius: 50%; background: radial-gradient(circle, rgba(0, 45, 167, 0.2), transparent 70%); filter: blur(10px); } .metric-strip { margin-top: var(--space-8); background: linear-gradient(135deg, var(--color-primary), #1139b3); color: var(--color-white); } .metric-strip__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); } .metric-strip__item { padding-left: var(--space-5); border-left: 1px solid rgba(255, 255, 255, 0.18); } .metric-strip__value { margin: 0 0 var(--space-2); font-family: var(--font-display); font-size: clamp(1.8rem, 6vw, 3.2rem); font-weight: 800; letter-spacing: -0.05em; } .metric-strip__label { margin: 0; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.78); line-height: 1.5; } .section-header { display: grid; gap: var(--space-4); align-items: end; margin-bottom: var(--space-10); } .section-header__text { max-width: 38rem; } .section-header__accent { width: 3rem; height: 0.22rem; border-radius: 999px; background: var(--color-primary); margin-bottom: var(--space-4); } .section-title { margin: 0; font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.3rem); line-height: 1.05; letter-spacing: -0.04em; color: var(--color-surface-ink); } .section-intro { margin: 0; font-size: 1rem; } .text-link { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-primary); font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; } .card-grid { display: grid; gap: var(--space-6); } .card { height: 100%; padding: var(--space-8); background: rgba(255, 255, 255, 0.88); border: 1px solid rgba(196, 197, 215, 0.25); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); transition: transform var(--transition-standard), box-shadow var(--transition-standard), border-color var(--transition-standard), opacity var(--transition-standard); } .card:hover, .card:focus-within { transform: translateY(-4px); box-shadow: var(--shadow-card); border-color: rgba(0, 45, 167, 0.18); } .card__icon { width: 3.4rem; height: 3.4rem; margin-bottom: var(--space-6); border-radius: 1.1rem; background: rgba(0, 45, 167, 0.06); color: var(--color-primary); display: inline-flex; align-items: center; justify-content: center; } .card__icon svg, .icon-circle svg { width: 1.55rem; height: 1.55rem; } .card__eyebrow, .mini-label { display: block; margin-bottom: var(--space-3); color: var(--color-primary); font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; } .card__title, .project-card__title, .timeline__title, .form-card__title, .list-card__title, .cta-link-card__title { margin: 0; font-family: var(--font-display); font-size: 1.4rem; line-height: 1.1; letter-spacing: -0.03em; color: var(--color-surface-ink); } .card__text, .project-card__text, .timeline__content, .skill-card__text, .form-note, .contact-card__text, .stat-card__caption { margin: var(--space-4) 0 0; font-size: 0.98rem; } .focus-grid { display: grid; gap: var(--space-6); } .focus-card { position: relative; overflow: hidden; min-height: 100%; border-radius: var(--radius-xl); padding: var(--space-8); box-shadow: var(--shadow-soft); transition: transform var(--transition-standard), box-shadow var(--transition-standard); } .focus-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); } .focus-card--light { background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(196, 197, 215, 0.24); } .focus-card--primary { background: linear-gradient(135deg, var(--color-primary), #1b44cc); color: var(--color-white); } .focus-card--primary .focus-card__title, .focus-card--primary .focus-card__text, .focus-card--primary .mini-label { color: inherit; } .focus-card__layout { display: grid; gap: var(--space-6); } .focus-card__title { margin: 0; font-family: var(--font-display); font-size: 1.75rem; letter-spacing: -0.04em; } .focus-card__list { list-style: none; display: grid; gap: var(--space-3); padding: 0; margin: var(--space-6) 0 0; } .focus-card__list li { display: flex; align-items: center; gap: var(--space-3); font-weight: 700; color: var(--color-primary); } .focus-card--primary .focus-card__list li { color: var(--color-white); } .focus-card__list svg { width: 1rem; height: 1rem; flex: 0 0 auto; } .focus-card__media { overflow: hidden; border-radius: 1.75rem; min-height: 14rem; background: var(--color-surface-high); } .focus-card__media img { width: 100%; height: 100%; object-fit: cover; } .tag-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); } .tag { display: inline-flex; align-items: center; padding: 0.55rem 0.9rem; border-radius: 1rem; background: rgba(0, 45, 167, 0.06); color: var(--color-primary); font-size: 0.82rem; font-weight: 700; } .focus-card--banner { text-align: center; } .project-grid, .project-preview-grid { display: grid; gap: var(--space-8); } .project-card { display: flex; flex-direction: column; gap: var(--space-5); } .project-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius-lg); background: var(--color-surface-high); border: 1px solid rgba(196, 197, 215, 0.2); } .project-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); } .project-card:hover .project-card__media img { transform: scale(1.05); } .project-card__tag { position: absolute; top: 1rem; right: 1rem; padding: 0.45rem 0.75rem; border-radius: 999px; background: rgba(255, 255, 255, 0.92); color: var(--color-primary); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; } .project-card__body { display: flex; flex-direction: column; gap: var(--space-4); } .project-card__meta { color: var(--color-primary); font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; } .project-card__outcome { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); align-items: start; margin-top: var(--space-4); padding-top: var(--space-5); border-top: 1px solid rgba(196, 197, 215, 0.26); } .icon-circle { width: 2.2rem; height: 2.2rem; border-radius: 0.85rem; display: inline-flex; align-items: center; justify-content: center; background: var(--color-primary-soft); color: var(--color-primary); } .project-card__outcome-title { margin: 0 0 var(--space-2); color: var(--color-primary); font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; } .project-card__outcome-text { margin: 0; color: var(--color-text); line-height: 1.6; font-weight: 600; } .about-grid { display: grid; gap: var(--space-8); align-items: center; } .about__stats { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid rgba(196, 197, 215, 0.22); } .stat-card__value { margin: 0; font-family: var(--font-display); font-size: 2rem; font-weight: 800; letter-spacing: -0.04em; } .stat-card__caption { margin-top: var(--space-2); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.12em; } .cta-banner { position: relative; overflow: hidden; border-radius: calc(var(--radius-xl) + 0.5rem); padding: var(--space-10); background: linear-gradient(135deg, var(--color-primary), #1b44cc); color: var(--color-white); box-shadow: 0 30px 70px rgba(0, 45, 167, 0.22); text-align: center; } .cta-banner::before, .cta-banner::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.08); filter: blur(6px); } .cta-banner::before { width: 14rem; height: 14rem; right: -5rem; top: -6rem; } .cta-banner::after { width: 10rem; height: 10rem; left: -3rem; bottom: -4rem; background: rgba(16, 20, 32, 0.12); } .cta-banner__content { position: relative; z-index: 1; } .cta-banner__title { color: var(--color-white); } .cta-banner__text { margin: var(--space-5) auto 0; max-width: 40rem; color: rgba(255, 255, 255, 0.8); line-height: 1.72; font-size: 1rem; } .cta-banner__actions { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-8); align-items: center; } .cta-banner .button--secondary { color: var(--color-white); border-color: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.08); } .page-hero { display: grid; gap: var(--space-10); align-items: end; margin-bottom: var(--space-12); } .filter-bar { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-10); } .filter-chip { padding: 0.75rem 1.05rem; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.86); border: 1px solid rgba(196, 197, 215, 0.28); color: var(--color-text); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; transition: background var(--transition-standard), color var(--transition-standard), border-color var(--transition-standard), transform var(--transition-standard); } .filter-chip:hover, .filter-chip:focus-visible { transform: translateY(-1px); } .filter-chip.is-active { color: var(--color-white); background: var(--color-primary); border-color: var(--color-primary); box-shadow: 0 14px 28px rgba(0, 45, 167, 0.18); } .is-hidden { display: none !important; } .cv-hero { display: grid; gap: var(--space-8); margin-bottom: var(--space-12); } .cv-hero__actions { display: flex; flex-direction: column; gap: var(--space-4); } .cv-layout { display: grid; gap: var(--space-12); } .timeline-section { display: grid; gap: var(--space-6); } .section-badge { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--color-primary); font-family: var(--font-display); font-size: 0.9rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; } .section-badge__icon { width: 2.75rem; height: 2.75rem; border-radius: 0.95rem; background: var(--color-primary-soft); display: inline-flex; align-items: center; justify-content: center; } .section-badge__icon svg { width: 1.2rem; height: 1.2rem; } .timeline { position: relative; display: grid; gap: var(--space-8); padding-left: var(--space-8); } .timeline::before { content: ""; position: absolute; left: 0.7rem; top: 0.6rem; bottom: 0.6rem; width: 2px; background: linear-gradient(180deg, rgba(0, 45, 167, 0.3), rgba(196, 197, 215, 0.5)); } .timeline__item { position: relative; } .timeline__dot { position: absolute; top: 0.25rem; left: -2.15rem; width: 1rem; height: 1rem; border-radius: 50%; border: 3px solid var(--color-white); background: var(--color-primary); box-shadow: 0 0 0 6px rgba(0, 45, 167, 0.06); } .timeline__period { display: block; margin-bottom: var(--space-2); color: var(--color-primary); font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; } .timeline__subtitle { margin: var(--space-2) 0 0; color: var(--color-text-muted); font-weight: 700; } .timeline__content { margin-bottom: 0; } .list-grid, .skill-grid, .language-grid, .link-grid, .contact-info-grid { display: grid; gap: var(--space-5); } .list-card, .skill-card, .language-card, .contact-link, .contact-card, .form-card { background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(196, 197, 215, 0.24); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); } .list-card, .skill-card, .language-card, .form-card { padding: var(--space-8); } .list-card__meta { display: inline-flex; padding: 0.4rem 0.7rem; border-radius: var(--radius-pill); background: var(--color-primary-soft); color: var(--color-primary); font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; } .list-card__title { margin-top: var(--space-5); } .list-card__text, .form-note { margin: var(--space-4) 0 0; color: var(--color-text-muted); line-height: 1.68; } .skill-tags { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); } .skill-tag { display: inline-flex; padding: 0.65rem 0.85rem; border-radius: 0.95rem; background: var(--color-surface-low); border: 1px solid rgba(196, 197, 215, 0.24); color: var(--color-text-muted); font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; } .language-card__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-4); } .language-card__level { color: var(--color-text-soft); font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; } .language-card__bar { width: 100%; height: 0.45rem; margin-top: var(--space-3); overflow: hidden; border-radius: 999px; background: rgba(196, 197, 215, 0.24); } .language-card__fill { height: 100%; border-radius: inherit; background: linear-gradient(135deg, var(--color-primary), var(--color-primary-strong)); } .language-card__fill--100 { width: 100%; } .language-card__fill--75 { width: 75%; } .language-card__fill--40 { width: 40%; } .award-card { position: relative; overflow: hidden; padding: var(--space-8); border-radius: var(--radius-xl); background: linear-gradient(135deg, var(--color-primary), #1b44cc); color: var(--color-white); box-shadow: 0 26px 60px rgba(0, 45, 167, 0.22); } .award-card__eyebrow { color: rgba(255, 255, 255, 0.72); } .award-card__title { margin: var(--space-3) 0 0; font-family: var(--font-display); font-size: 1.55rem; line-height: 1.1; letter-spacing: -0.03em; } .award-card__text { margin-top: var(--space-4); color: rgba(255, 255, 255, 0.84); } .quote-panel { position: relative; overflow: hidden; padding: var(--space-10); border-radius: var(--radius-xl); border: 1px solid rgba(196, 197, 215, 0.24); background: rgba(255, 255, 255, 0.86); min-height: 18rem; display: grid; place-items: center; box-shadow: var(--shadow-soft); } .quote-panel__bg { position: absolute; inset: 0; opacity: 0.12; } .quote-panel__bg img { width: 100%; height: 100%; object-fit: cover; } .quote-panel__content { position: relative; z-index: 1; max-width: 26rem; text-align: center; } .quote-panel__quote { margin: 0; font-family: var(--font-display); font-size: clamp(1.6rem, 4vw, 2.3rem); line-height: 1.28; letter-spacing: -0.03em; color: var(--color-primary); } .contact-intro { display: grid; gap: var(--space-8); align-items: center; margin-bottom: var(--space-14); } .form-card { padding: var(--space-8); } .form-card__title { text-align: center; } .form-card__accent { width: 4rem; height: 0.22rem; border-radius: 999px; background: var(--color-primary); margin: var(--space-4) auto 0; } .form { display: grid; gap: var(--space-8); margin-top: var(--space-10); } .form__grid { display: grid; gap: var(--space-8); } .form-field { display: grid; gap: var(--space-3); } .form-field__label { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; color: var(--color-text-soft); } .form-field__control { width: 100%; padding: 0.95rem 0; border: 0; border-bottom: 2px solid rgba(196, 197, 215, 0.4); background: transparent; color: var(--color-text); transition: border-color var(--transition-standard), box-shadow var(--transition-standard); } .form-field__control::placeholder { color: rgba(68, 70, 85, 0.38); } .form-field__control:focus { outline: none; border-color: var(--color-primary); } .form-field__error { min-height: 1rem; color: #ba1a1a; font-size: 0.78rem; } .form-field.is-invalid .form-field__control { border-color: #ba1a1a; } .form-status { min-height: 1.2rem; color: var(--color-text-soft); font-size: 0.85rem; text-align: center; } .form-status.is-success { color: #0d6b3f; } .link-grid { margin-top: var(--space-10); } .contact-link { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-6); transition: transform var(--transition-standard), border-color var(--transition-standard), box-shadow var(--transition-standard), background var(--transition-standard); } .contact-link:hover, .contact-link:focus-visible { transform: translateY(-3px); border-color: rgba(0, 45, 167, 0.18); box-shadow: var(--shadow-card); } .contact-link__main { display: flex; align-items: center; gap: var(--space-4); } .contact-link__icon { width: 3rem; height: 3rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(0, 45, 167, 0.08); color: var(--color-primary); } .contact-link__icon svg { width: 1.4rem; height: 1.4rem; } .contact-link__eyebrow { display: block; color: var(--color-text-soft); font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; } .contact-link__title { display: block; margin-top: var(--space-2); font-family: var(--font-display); font-size: 1.1rem; font-weight: 800; letter-spacing: -0.02em; } .contact-link__arrow { width: 1.2rem; height: 1.2rem; color: var(--color-text-soft); } .site-footer { margin-top: var(--space-16); padding: var(--space-10) 0; background: #0d1220; color: rgba(255, 255, 255, 0.72); } .site-footer--light { background: rgba(255, 255, 255, 0.86); border-top: 1px solid rgba(196, 197, 215, 0.24); color: var(--color-text-soft); } .site-footer__inner { width: min(100% - 2rem, var(--container-lg)); margin: 0 auto; display: grid; gap: var(--space-8); } .site-footer__brand { font-family: var(--font-display); font-size: 1.3rem; font-weight: 800; letter-spacing: -0.04em; color: var(--color-white); } .site-footer--light .site-footer__brand { color: var(--color-surface-ink); } .site-footer__text { margin: 0; line-height: 1.7; } .site-footer__links { display: flex; flex-wrap: wrap; gap: var(--space-5) var(--space-8); } .site-footer__link { font-family: var(--font-display); font-size: 0.82rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; } .site-footer__meta { color: rgba(255, 255, 255, 0.46); font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; } .site-footer--light .site-footer__meta { color: var(--color-text-soft); } [data-animate] { opacity: 0; transform: translateY(18px); transition: opacity 520ms ease, transform 520ms ease; } [data-animate].is-visible { opacity: 1; transform: translateY(0); } @media (min-width: 40rem) { .container, .container--narrow, .site-header__inner, .site-footer__inner { width: min(100% - 3rem, var(--container-lg)); } .button-row, .cta-banner__actions, .cv-hero__actions { flex-direction: row; flex-wrap: wrap; } .metric-strip__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .card-grid--three, .list-grid--two, .link-grid--two, .contact-info-grid--two, .skill-grid--two, .language-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); } .form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 56rem) { .page-main { padding-top: var(--space-12); } .site-header__inner { min-height: 5rem; } .site-nav { display: block; } .site-header__actions .button--small { display: inline-flex; } .menu-toggle, .mobile-nav { display: none; } .hero, .about-grid, .page-hero, .contact-intro { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } .hero--home { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); } .section-header { grid-template-columns: minmax(0, 1fr) auto; } .metric-strip__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } .card-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); } .focus-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } .focus-card--wide { grid-column: span 7; } .focus-card--tall { grid-column: span 5; } .focus-card--banner { grid-column: 1 / -1; } .focus-card__layout { grid-template-columns: minmax(0, 1.1fr) minmax(16rem, 0.9fr); align-items: center; } .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .project-preview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tag-row--desktop-center { justify-content: center; } .cv-layout { grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.75fr); align-items: start; } .cv-sidebar { position: sticky; top: 6.5rem; } .section--spacious { padding: var(--space-24) 0; } } @media (min-width: 70rem) { .hero__lede, .page-lede { font-size: 1.15rem; } .section { padding: var(--space-24) 0; } .section--tight { padding: var(--space-20) 0; } .project-grid { gap: var(--space-10); } .form-card { padding: var(--space-12); } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } [data-animate] { opacity: 1; transform: none; } } """ "./cv.html" : """ CV | Kristijan Popovski

Curriculum Vitae

BA of Business and Economics - MSc in Business and Organisation (IMB)

Work Experience
2022 - now

Founder and President

Macedonian Student Organisation in Slovenia

Founded and led a student organization that grew to more than 120 members, organized over 50 events, and built more than 20 partnerships with institutions, embassies, and sponsors.

2021 - now

Board Member

Leaders for Education, Activism, and Development (LEAD)

Active board member of a youth-focused NGO working on education, activism, and civic engagement.

2024 - 2025

Intern in Finance and Accounting

CVS Mobile d.d. (a Eurowag company)

Supported finance operations across four subsidiaries, reviewing reports, processing invoice-related data, and contributing to daily operational workflows.

2024

Student Intern

Department for Internationalisation and Strategic Partnerships, University of Ljubljana

Organized webinars for incoming students, prepared data reports, and supported regional university cooperation activities.

Education
2022 - 2026

University of Ljubljana, School of Economics and Business

MSc in Business and Organisation (IMB)
Ranked 44th globally in Financial Times Masters in Management 2025.

Bachelor's Degree in Economics and Business
Major in Entrepreneurship.

2024

Resilient Cities Summer School

Slovak University of Technology in Bratislava.

2017 - 2021
Nikola Karev Skopje, Natural Sciences and Mathematics.

Leadership and Governance

Student Ambassador

Supported prospective students through one-on-one mentorship and onboarding support at the University of Ljubljana.

Student Senate Member

Represented around 5,000 students at faculty level and contributed within university governance structures.

Volunteering

Served in the Red Cross Youth Club and twice as President of the high school student council.

Selected Projects

22nd International Youth Conference Krushevo and consulting support for ATech Electronics.

Portrait background of Kristijan Popovski

"Building a career in management, leadership, and organizational growth."

""" "./cv/index.html" : """ CV | Kristijan Popovski

Curriculum Vitae

BA of Business and Economics - MSc in Business and Organisation (IMB)

Work Experience
2022 - now

Founder and President

Macedonian Student Organisation in Slovenia

Founded and led a student organization that grew to more than 120 members, organized over 50 events, and built more than 20 partnerships with institutions, embassies, and sponsors.

2021 - now

Board Member

Leaders for Education, Activism, and Development (LEAD)

Active board member of a youth-focused NGO working on education, activism, and civic engagement.

2024 - 2025

Intern in Finance and Accounting

CVS Mobile d.d. (a Eurowag company)

Supported finance operations across four subsidiaries, reviewing reports, processing invoice-related data, and contributing to daily operational workflows.

2024

Student Intern

Department for Internationalisation and Strategic Partnerships, University of Ljubljana

Organized webinars for incoming students, prepared data reports, and supported regional university cooperation activities.

Education
2022 - 2026

University of Ljubljana, School of Economics and Business

MSc in Business and Organisation (IMB)
Ranked 44th globally in Financial Times Masters in Management 2025.

Bachelor's Degree in Economics and Business
Major in Entrepreneurship.

2024

Resilient Cities Summer School

Slovak University of Technology in Bratislava.

2017 - 2021
Nikola Karev Skopje, Natural Sciences and Mathematics.

Leadership and Governance

Student Ambassador

Supported prospective students through one-on-one mentorship and onboarding support at the University of Ljubljana.

Student Senate Member

Represented around 5,000 students at faculty level and contributed within university governance structures.

Volunteering

Served in the Red Cross Youth Club and twice as President of the high school student council.

Selected Projects

22nd International Youth Conference Krushevo and consulting support for ATech Electronics.

Portrait background of Kristijan Popovski

"Building a career in management, leadership, and organizational growth."

""" "./designs/contact_desktop_premium_refinement/code.html" : """
Contact

Let's architect
your next vision.

Interested in working together? I'm always open to discussing new projects, creative ideas, or opportunities to be part of your vision.

Kristijan Popovski

Fill out to connect

Typically responds within 24 business hours

Let's connect

Via Professional Channels

""" "./designs/contact_mobile_premium_refinement/code.html" : """ Contact - Kristijan Popovski

Let's Build Something Exceptional.

I assist visionary brands and individuals in bringing high-end digital experiences to life.

Send a Message

Fill out to connect

Let's connect

""" "./designs/cv_desktop_premium_refinement/code.html" : """ CV | Kristijan Popovski

Curriculum Vitae

BA of Business and Economics • MSc in Business and Organisation (IMB)

work

Work Experience

2022 — NOW

Founder and President

Macedonian Student Organisation in Slovenia

Founded and led a student organisation growing membership to 120+ students. Organized 50+ events, built 20+ partnerships with government, embassies, and sponsors.

2021 — NOW

Board Member

Leaders for Education, Activism, and Development (LEAD)

Active member of the Board of LEAD, an NGO focused on empowering youth through education and activism.

2024 — 2025

Intern in Finance and Accounting

CVS Mobile d.d. (a Eurowag company)

Supported finance operations across 4 subsidiaries within a regional tech company. Reviewed financial reports, assisted with invoice data processing, and supported daily operational workflows.

2024

Student Intern

Dept. for Internationalisation & Strategic Partnerships, University of Ljubljana

Organized webinars for incoming students, prepared data reports, and supported the Rectors' Forum on regional university cooperation.

school

Education

University of Ljubljana, School of Economics and Business

2022 — 2026

MSc in Business and Organisation (IMB)

Ranked 44th globally – Financial Times Masters in Management 2025

Bachelor's Degree in Economics and Business

Major in Entrepreneurship (2017—2022)

Summer School

Resilient Cities

Slovak University of Technology (Bratislava, 2024)

High School

Nikola Karev Skopje

Natural Sciences & Mathematics (2017—2021)

groups

Leadership & Involvement

public

Student Ambassador

Supported 200+ prospective students through one-on-one mentorship at Uni Ljubljana.

account_balance

Student Senate Member

Representing ~5,000 students at faculty level. Member of multiple faculty commissions.

volunteer_activism

Volunteering

Red Cross Youth Club (Skopje), serving twice as President of the High School Student Council.

assignment

Selected Projects

22nd Int. Youth Conference Krushevo; Consultant for ATech Electronics.

Kristijan Popovski

terminal Hard Skills

Microsoft Office 365 MS Dynamics NAV ChatGPT Canva.com Cluster Analysis Segmentation

translate Languages

Macedonian Native
English B2 Upper Int.
Slovenian B2 Upper Int.
Serbo-Croatian B2 Upper Int.
French A2 Basic

workspace_premium Recognition

2021

Top Graduate of Generation 2017-2021

Awarded recognition by the Mayor of the City of Skopje as the top graduate of High School Gymnasium "Nikola Karev".

""" "./designs/cv_mobile_premium_refinement/code.html" : """ CV | Kristijan Popovski

Curriculum Vitae

BA of Business and Economics • MSc in Business and Organisation (IMB)

Work Experience

2022 — NOW

Founder and President

Macedonian Student Organisation in Slovenia

Founded and led a student organisation growing membership to 120+ students. Organized 50+ events with attendance of up to 500 participants.

2021 — NOW

Board Member

Leaders for Education, Activism, and Development (LEAD)

Active member of the Board of LEAD, an NGO focused on empowering youth through education and activism.

2024 — 2025

Intern in Finance and Accounting

CVS Mobile d.d. (a Eurowag company)

Supported finance operations across 4 subsidiaries. Reviewed financial reports, assisted with invoice data processing, and supported daily workflows.

2024

Student Intern

Dept. for Internationalisation & Strategic Partnerships, Uni Ljubljana

Organized webinars for incoming students, prepared data reports, and supported regional university cooperation.

Education

school

University of Ljubljana

School of Economics and Business

2022 — 2026

MSc in Business and Organisation (IMB)

Ranked 44th globally – Financial Times MiM 2025

Bachelor's Degree in Economics and Business

Major in Entrepreneurship (2017—2022)

history_edu

Resilient Cities Summer School

Slovak University of Technology • 2024

school

High School "Nikola Karev" Skopje

Natural Sciences & Mathematics • 2017 — 2021

Leadership & Involvement

public

International Student Ambassador

One-on-one mentorship for prospective students at University of Ljubljana.

account_balance

Student Representation & Governance

Elected Student Representative (~5,000 students) and Senate Member.

volunteer_activism

Volunteering & Humanitarian

Red Cross Youth Club member and High School Student Council President.

assignment

Selected Projects

22nd Int. Youth Conference Krushevo; Consultant for ATech Electronics.

terminal

Hard Skills

Microsoft Office 365 Microsoft Dynamics NAV ChatGPT Canva.com Cluster Analysis Segmentation
workspace_premium
workspace_premium

Honors & Awards

2021 RECOGNITION

Top Graduate of Generation 2017-2021

Awarded recognition by the Mayor of the City of Skopje as the top graduate of High School Gymnasium "Nikola Karev".

translate

Languages

Macedonian Native
English B2 Level
Slovenian B2 Level
Serbo-Croatian B2 Level
French A2 Level
Professional Profile Background
format_quote

"Building a career in management and leadership."

home Home work Projects
description CV
alternate_email Contact
""" "./designs/executive_azure/DESIGN.md" : """ # Design System Document: High-End Personal Brand Portfolio ## 1. Overview & Creative North Star **Creative North Star: "The Institutional Architect"** This design system is engineered to position Kristijan Popovski not just as a professional, but as an authority. Moving away from the "loud" and high-energy tropes of startup culture, this system embraces **Institutional Luxury**. It draws inspiration from Apple’s relentless pursuit of clarity and the structured, credible aesthetic of global financial and academic institutions. The "Architect" personality is expressed through: * **Intentional Asymmetry:** Breaking the standard 12-column rigidity to create editorial-style layouts that guide the eye. * **Calm Authority:** Using a palette of deep royal blues and soft light accents to evoke trust and forward-looking stability. * **Generous Negative Space:** Spacing is treated as a premium material, used to separate complex ideas without the need for visual clutter. --- ## 2. Colors The palette is a sophisticated blend of deep corporate blues and atmospheric surface tones. It is designed to be "felt" rather than just seen, creating a sense of professional depth. ### Core Tokens * **Primary (`#002da7`):** The Royal Blue. Used for primary CTAs and key brand moments. * **Primary Container (`#1a44d1`):** A vibrant bridge used for hover states and subtle gradients. * **Secondary (`#3657be`):** The soft light blue accent, inspired by the banner gradient, used for secondary actions and iconography. * **Surface (`#f8f9fa`):** The off-white bedrock of the brand. * **On-Surface (`#191c1d`):** A deep, near-black charcoal for maximum readability and a high-trust institutional feel. ### The "No-Line" Rule To maintain a high-end feel, **1px solid borders are strictly prohibited** for sectioning. Boundaries must be defined solely through: 1. **Background Shifts:** Transitioning from `surface` to `surface-container-low`. 2. **Tonal Transitions:** Utilizing subtle 15-degree linear gradients (Primary to Primary-Container) for hero areas or massive CTAs. ### Signature Textures & Glass Utilize **Glassmorphism** for navigation bars and floating cards. Use a semi-transparent `surface-container-lowest` (80% opacity) with a `24px` backdrop-blur. This ensures the background color bleeds through, making the interface feel integrated and organic. --- ## 3. Typography The typography system uses a dual-font strategy: **Manrope** for authoritative headlines and **Inter** for precision-focused body text. * **Display Large (`Manrope`, 3.5rem):** Set with a tight letter-spacing (-0.02em) to feel impactful and modern. * **Headline Medium (`Manrope`, 1.75rem):** Used for section headers. These should always sit above a substantial 40px–64px top margin to allow the title to breathe. * **Body Large (`Inter`, 1rem):** The workhorse. Set with a generous `1.6` line-height to ensure institutional-level readability. * **Label Medium (`Inter`, 0.75rem):** Used for metadata, dates, or small tags. Always set in uppercase with +0.05em tracking for a "premium logotype" feel. --- ## 4. Elevation & Depth Depth is achieved through **Tonal Layering** rather than traditional drop shadows. * **The Layering Principle:** Stack `surface-container` tiers. For example: * *Base:* `surface` * *Content Block:* `surface-container-low` * *Floating Card:* `surface-container-lowest` * **Ambient Shadows:** When a shadow is required for a floating component (like a portrait card inspired by Image 3), use an extra-diffused shadow: `box-shadow: 0 10px 40px rgba(0, 45, 167, 0.05);`. This subtle blue tint mimics natural light refracting through glass. * **The "Ghost Border":** If accessibility requires a stroke, use `outline-variant` (`#c4c5d7`) at **15% opacity**. It should be felt as a change in texture, not a hard line. --- ## 5. Components ### Primary Buttons * **Style:** `surface-tint` (`#2a4fdb`) background with a subtle gradient to `primary`. * **Corner Radius:** `xl` (0.75rem) for a modern, approachable feel. * **Typography:** `title-sm`, white text, centered. * **Interaction:** On hover, slightly increase the gradient intensity and apply the Ambient Shadow. ### Experience Cards * **Layout:** Drawing from the structured nature of Image 1, cards should avoid dividers. Use a vertical spacing of `32px` between items. * **Styling:** A `surface-container-lowest` background with a `Ghost Border`. * **Timeline Element:** Use a 2px vertical line in `outline-variant` (20% opacity) to connect dates, keeping it institutional and discrete. ### Hero Styling (Inspired by Image 3) * **The Portrait Frame:** The subject (Kristijan) should be placed on a soft, light-blue tinted background (`surface-container-low`). * **Asymmetric Overlay:** The name should overlap the portrait slightly using a glassmorphic tag, utilizing the `surface-container-lowest` token with backdrop-blur. ### Input Fields * **Style:** Minimalist. No solid box; use a `surface-container-high` background with a bottom-only `outline-variant` stroke (30% opacity). * **Focus State:** The stroke transitions to `primary` with a 2px thickness. --- ## 6. Do's and Don'ts ### Do * **Use Generous White Space:** If you think there is enough space between sections, add 20% more. Space = Premium. * **Layer Tones:** Use the difference between `#ffffff` and `#f8f9fa` to define functional areas. * **Maintain Hierarchy:** Headlines should be significantly larger and heavier than body text to convey leadership. ### Don't * **No "Startup Blue":** Avoid neon or overly bright blues. Stick to the deep, credible tones of the Royal Blue (`#002da7`). * **No Traditional Dividers:** Never use a solid 1px line to separate "Education" from "Experience." Use a background color shift instead. * **No Sharp Corners:** Avoid the `none` roundedness. Use `xl` or `lg` to maintain a modern, friendly corporate tone. * **No Harsh Shadows:** Never use black or dark grey shadows. Shadows must always be low-opacity and tinted with the primary blue. """ "./designs/home_desktop_premium_refinement/code.html" : """ Kristijan Popovski | Strategic Leadership & Execution
Strategic Leadership

Structured
leadership.
Strategic thinking.

Delivering institutional excellence across governance and business. From high-level policy to meticulous operational execution.

Kristijan Popovski portrait

Current Focus

Institutional Governance & Finance

120+ Members built into organization
50+ Events organized globally
20+ Strategic partnerships developed
Senate Governance roles in university bodies
Finance Experience in regional tech sector

Professional Trajectory

A track record of leadership in governance, finance, and organizational development.

Full Experience Detail arrow_forward
groups

Founder & President

MSO Slovenia

Pioneered and scaled a representative organization from ground up, establishing institutional frameworks and member value cycles.

account_balance

Student Representation

University of Ljubljana

Advocating for institutional excellence within Senate and university bodies, coordinating between faculty and student body stakeholders.

trending_up

Finance & Operations

CVS Mobile / Eurowag

Driving business insight and financial coordination within a leading regional tech group, focusing on operational transparency.

Areas of Expertise

Focus Areas

Expertise built on the intersection of structured policy, management, and commercial logic.

Strategy & Governance

Building robust frameworks for organizations to thrive. Expertise in institutional policy, stakeholder management, and long-term design.

  • verified Policy Framework Design
  • verified Stakeholder Coordination
Strategic planning

Finance & Business Insight

Managing the numbers that move organizations. Precision in financial operations and business modeling.

query_stats
north_east
rocket_launch

Project Leadership & Execution

Translating ideas into operational reality. From international conferences to business model pivots, I lead projects through to measurable results.

Impact Driven Operational Rigor Europe-wide Experience

Selected Initiatives

A preview of key projects across diverse environments.

International conference
Institutional Collaboration

International Youth Conference & Moderation

Directing large-scale international gatherings, managing logistics, stakeholder agendas, and institutional representation.

View Project Details arrow_right_alt
Greenie Consulting
Consulting & Innovation

Greenie Concept & Business Consulting

Developing sustainable business models and innovation concepts that bridge the gap between ecology and economy.

View Project Details arrow_right_alt
Kristijan portrait detail
Professional Biography

The intersection of
theory and practice.

Kristijan Popovski is a strategic leader focused on institutional excellence and sustainable organizational growth. Based between Slovenia and Macedonia, he has built a reputation for navigating complex governance structures while maintaining a sharp focus on financial viability and project execution.

With an academic foundation from the University of Ljubljana and professional experience within the Eurowag group ecosystem, Kristijan bridges the gap between high-level policy advocacy and bottom-line operational results.

10+

Years Active

2

Strategic Hubs

Start a conversation.

Whether it's a strategic partnership, a governance initiative, or a project in need of leadership — let's connect.

""" "./designs/home_mobile_premium_refinement/code.html" : """ Kristijan Popovski | Portfolio
Kristijan Popovski Professional Portrait

Kristijan Popovski

Institutional Architect

Structured leadership.
Strategic thinking.
Real execution.

Building robust frameworks for growth through Governance, Finance, and Project Leadership.

120+ Members Managed
50+ Events Executed
20+ Strategic Partners
account_balance

Governance
Roles

payments

Finance
Experience

Focus Areas

architecture

Strategy

Designing organizational structures that withstand market shifts and operational scaling.

rocket_launch

Project Leadership

Driving high-impact initiatives from conception to final execution.

monitoring

Finance

Optimizing fiscal frameworks and ensuring sustainable growth paths.

Selected Experience

MSO SLOVENIA

Executive Board

Overseeing institutional governance and strategic scaling for youth-led organizational frameworks.

UNIVERSITY OF LJUBLJANA

Strategic Advisor

Contributing to academic governance and the development of new institutional methodologies.

CVS MOBILE

Operational Analyst

Streamlining workflows and implementing data-driven efficiency protocols across tech teams.

Projects Preview

arrow_forward
Institutional Governance Framework Visualization

Governance v.3

A comprehensive framework for modern institutional transparency and cross-functional efficiency.

About

I bridge the gap between high-level institutional design and ground-level operational reality.

With a background spanning finance, governance, and technology, I help organizations build systems that aren't just efficient—they're resilient. My approach combines rigorous analytical frameworks with pragmatic leadership.

Let's build something authoritative.

Available for strategic consulting and leadership advisory for high-impact projects.

Get in Touch mail
""" "./designs/projects_desktop_premium_refinement/code.html" : """
Selected Work

Architecting Institutional Excellence.

A portfolio of strategic interventions, institutional collaborations, and innovation concepts designed to drive measurable global impact.

Modern high-ceiling conference hall with professional blue lighting
Institutional

International Governance Summit

Spearheaded coordination for a multi-national dialogue on digital infrastructure policy. Managed stakeholder alignment across five European delegations.

terminal
Key Outcome Unanimous adoption of the 2024 Digital Sovereignty Framework by all participating states.
Professional business data analysis on tablet
Consulting

Strategic Business Model Pivot

Redesigned the operational model for a mid-tier logistics provider, transitioning from legacy analog tracking to an automated cloud-first environment.

trending_up
Key Outcome 18% reduction in overhead costs and 24% increase in processing speed within Q1.
Sustainable architecture with green walls
Innovation

The Greenie Concept

Developed a circular economy framework for urban tech hubs. The prototype focused on resource reclamation and shared energy grids for co-working spaces.

eco
Key Outcome Selected as the pilot program for the 2025 Smart Cities Initiative in the DACH region.
Moderator speaking to young professionals
Moderation

Global Youth Leadership Summit

Lead moderator for the 3rd annual summit, facilitating high-stakes debates between 200+ youth leaders and representatives from the World Bank.

groups
Key Outcome Facilitated the signing of a youth-led climate memorandum with 15 corporate sponsors.

Ready to Collaborate?

I am currently accepting inquiries for institutional advisory roles and strategic consulting engagements for the 2025 calendar year.

""" "./designs/projects_mobile_premium_refinement/code.html" : """
Kristijan Popovski
menu
Portfolio

Selected Works

A curated showcase of architectural design and structural engineering excellence.

Governance center architectural visualization
Public Sector
Governance

The Meridian Complex

A sustainable mixed-use development focused on integrating high-density living with carbon-neutral green corridors.

analytics

Impact Outcome

"Achieved a 40% reduction in thermal leakage via innovative glazing solutions."

Modern business infrastructure
Corporate
Business Pivot

Vanguard Research Hub

Reimagining public library spaces as high-tech research centers using modular concrete geometries.

award_star

Impact Outcome

"Winner of the 2022 Regional Excellence in Civic Design Award."

Sustainable residential design
Sustainable
Greenie

The Zenith Pavilion

A masterclass in biophilic residential design, blending interior luxury with the natural topography of the alpine site.

precision_manufacturing

Impact Outcome

"Preserved 100% of the site's existing root networks using zero-impact foundations."

Community center design
Community
Youth Summit

Innovation Plaza

Designing social hubs that facilitate cross-generational learning through adaptable open-space layouts.

groups

Impact Outcome

"Boosted local community engagement by 150% through inclusive design."

Start a Project?

Let's discuss how we can bring precision and excellence to your next architectural venture.

""" "./gitea-token.txt" : """ d8025fa4812582af8c879bfc0929107f4afdd4ba9d00306bbd5afe891a0cb58c """ "./index.html" : """ Kristijan Popovski | Structured Leadership and Strategic Execution
Strategic Leadership

Structured leadership.
Strategic thinking.
Real execution.

Delivering institutional excellence across governance, finance, and project execution. From policy and representation to operational detail, the focus is always on clarity, trust, and outcomes.

Kristijan Popovski in a light suit outdoors

Current Focus

Institutional governance, finance, and cross-border execution

120+

Members built into an active organization

50+

Events organized across student and civic networks

20+

Strategic partnerships developed

Senate

Governance roles in university structures

Finance

Regional technology-sector finance experience

Selected Experience

A concise view of leadership, representation, and operational roles that shape the broader body of work.

View full CV
Founder and President

MSO Slovenia

Founded and scaled a representative student organization, establishing partnerships, operational frameworks, and a visible community presence.

Governance Roles

University of Ljubljana

Representing students within faculty and university structures, bridging institutional decision-making with practical student interests.

Finance Experience

CVS Mobile / Eurowag

Worked across finance and accounting workflows, supporting reporting, invoice processing, and operational transparency across subsidiaries.

What I Work On

Structured focus areas

A blend of institutional thinking, practical leadership, and business discipline applied to real environments.

Strategy & Governance

Designing frameworks that help organizations coordinate stakeholders, clarify mandates, and move with institutional confidence.

  • Policy and framework design
  • Stakeholder coordination
Meeting room prepared for strategic planning
Finance & Business Insight

Numbers that support better decisions

Working where financial detail meets operational reality, with an emphasis on discipline, reporting, and executional clarity.

Reporting Operations Analysis

Project Leadership & Execution

Turning ideas into structured delivery, whether the setting is a conference, a governance process, or a cross-functional organizational initiative.

Impact Driven Operational Rigor Europe-wide Experience

Projects Preview

Selected initiatives that combine leadership, planning, and visible outcomes.

IMB team presenting an Individual Investment Accounts strategy project for NLB Consulting
IMB x NLB Slovenia

Individual Investment Accounts Strategy

Developed a go-to-market and marketing strategy for NLB's Individual Investment Accounts (INR) in Slovenia through primary research, segmentation, personas, and customer journey design.

View project details
Student consulting workshop with Perles and ATech Electronics Consulting
Perles / ATech Electronics

Business Model & Marketing Strategy

Researched the power tools market and customer needs for the Perles brand, then helped shape an updated business model with refurbished products and a digital community concept.

Explore all projects
Portrait of Kristijan Popovski in a professional setting
About

The intersection of theory and practice.

Kristijan Popovski works at the intersection of governance, finance, and project execution. His work is shaped by academic grounding, institutional engagement, and practical operational experience.

Based between Slovenia and Macedonia, he focuses on building structures that are credible, well-organized, and resilient under real-world pressure.

10+

Years active in leadership and public-facing roles

2

Strategic hubs across Slovenia and Macedonia

Start a conversation.

Whether it is a strategic partnership, a governance initiative, or a project that needs measured leadership, the next step can start here.

""" "./js/script.js" : """ document.addEventListener("DOMContentLoaded", () => { setupMobileNavigation(); setupScrollAnimations(); setupProjectFiltering(); setupContactForm(); setupSmoothScrollClose(); }); function setupMobileNavigation() { const toggle = document.querySelector("[data-menu-toggle]"); const mobileNav = document.querySelector("[data-mobile-nav]"); if (!toggle || !mobileNav) { return; } const updateState = (isOpen) => { toggle.classList.toggle("is-open", isOpen); toggle.setAttribute("aria-expanded", String(isOpen)); mobileNav.classList.toggle("is-open", isOpen); document.body.classList.toggle("menu-open", isOpen); }; toggle.addEventListener("click", () => { const isOpen = toggle.getAttribute("aria-expanded") === "true"; updateState(!isOpen); }); mobileNav.querySelectorAll("a").forEach((link) => { link.addEventListener("click", () => updateState(false)); }); document.addEventListener("keydown", (event) => { if (event.key === "Escape") { updateState(false); } }); document.addEventListener("click", (event) => { const clickedInsideMenu = mobileNav.contains(event.target); const clickedToggle = toggle.contains(event.target); if (!clickedInsideMenu && !clickedToggle) { updateState(false); } }); } function setupSmoothScrollClose() { const samePageLinks = document.querySelectorAll('a[href^="#"]'); samePageLinks.forEach((link) => { link.addEventListener("click", (event) => { const targetId = link.getAttribute("href"); if (!targetId || targetId === "#") { return; } const target = document.querySelector(targetId); if (!target) { return; } event.preventDefault(); target.scrollIntoView({ behavior: "smooth", block: "start" }); }); }); } function setupScrollAnimations() { const animatedItems = document.querySelectorAll("[data-animate]"); if (!animatedItems.length) { return; } if (!("IntersectionObserver" in window)) { animatedItems.forEach((item) => item.classList.add("is-visible")); return; } const observer = new IntersectionObserver( (entries, currentObserver) => { entries.forEach((entry) => { if (!entry.isIntersecting) { return; } entry.target.classList.add("is-visible"); currentObserver.unobserve(entry.target); }); }, { threshold: 0.12, rootMargin: "0px 0px -40px 0px" } ); animatedItems.forEach((item) => observer.observe(item)); } function setupProjectFiltering() { const filterButtons = document.querySelectorAll("[data-filter]"); const filterItems = document.querySelectorAll("[data-category]"); if (!filterButtons.length || !filterItems.length) { return; } filterButtons.forEach((button) => { button.addEventListener("click", () => { const filterValue = button.dataset.filter; filterButtons.forEach((otherButton) => { otherButton.classList.toggle("is-active", otherButton === button); otherButton.setAttribute("aria-pressed", String(otherButton === button)); }); filterItems.forEach((item) => { const categories = (item.dataset.category || "").split(" "); const shouldShow = filterValue === "all" || categories.includes(filterValue); item.classList.toggle("is-hidden", !shouldShow); }); }); }); } function setupContactForm() { const form = document.querySelector("[data-contact-form]"); if (!form) { return; } const fields = Array.from(form.querySelectorAll("[data-required], [type='email']")); const status = form.querySelector("[data-form-status]"); const validators = { email: (value) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value) }; const setFieldError = (field, message) => { const wrapper = field.closest(".form-field"); const error = wrapper ? wrapper.querySelector(".form-field__error") : null; field.setAttribute("aria-invalid", String(Boolean(message))); if (wrapper) { wrapper.classList.toggle("is-invalid", Boolean(message)); } if (error) { error.textContent = message || ""; } }; const validateField = (field) => { const rawValue = field.value.trim(); const label = field.dataset.label || "This field"; if (field.hasAttribute("data-required") && !rawValue) { setFieldError(field, `${label} is required.`); return false; } if (field.type === "email" && rawValue && !validators.email(rawValue)) { setFieldError(field, "Enter a valid email address."); return false; } setFieldError(field, ""); return true; }; fields.forEach((field) => { field.addEventListener("blur", () => validateField(field)); field.addEventListener("input", () => { if (field.getAttribute("aria-invalid") === "true") { validateField(field); } }); }); form.addEventListener("submit", (event) => { let isValid = true; fields.forEach((field) => { if (!validateField(field)) { isValid = false; } }); if (!isValid) { event.preventDefault(); if (status) { status.textContent = "Please review the highlighted fields and try again."; status.classList.remove("is-success"); } const firstInvalid = form.querySelector("[aria-invalid='true']"); if (firstInvalid) { firstInvalid.focus(); } return; } event.preventDefault(); if (status) { status.textContent = "Thanks. Your message structure is validated and ready for backend integration."; status.classList.add("is-success"); } form.reset(); fields.forEach((field) => setFieldError(field, "")); }); } """ "./projects/index.html" : """ Projects | Kristijan Popovski
Selected Work

Architecting institutional excellence.

A portfolio of strategic interventions, institutional collaboration, and practical leadership across governance, consulting, and innovation environments.

Presentation of an Individual Investment Accounts strategy project for NLB at the IMB programme Consulting
IMB x NLB Slovenia

NLB Individual Investment Accounts Strategy

Within the IMB programme, our team developed a strategy for NLB's new Individual Investment Accounts product in Slovenia, combining primary data research, segmentation, positioning, personas, customer journey work, and practical marketing recommendations.

Key Outcome

Delivered an actionable strategy framework for positioning INR with clear target segments, customer insights, messaging priorities, and launch-path recommendations.

Student consulting team in discussion with Perles and ATech Electronics Consulting
Student Intern Consultant - Feb 2025 to Jun 2025

Perles / ATech Business Model & Marketing Strategy

Worked as part of a student consulting team researching the power tools market for the Perles brand, mapping customer needs, and co-developing a refreshed business model together with a sharper marketing strategy.

Key Outcome

Co-created and presented recommendations covering refurbished products, a digital community concept, and brand-level strategic directions for management and academic mentors.

Interior green wall and glass architecture in a sustainable building Innovation
Circular Economy

The Greenie Concept

Developed a circular economy framework for urban workspaces, focused on shared energy thinking, sustainability, and long-term viability.

Key Outcome

Positioned the concept as a scalable sustainability-oriented model with strong regional relevance.

Moderator speaking to a youth audience at a leadership event Moderation
Youth Leadership

Global Youth Leadership Summit

Led moderation for a high-stakes youth summit, facilitating dialogue between participants, institutions, and external partners.

Key Outcome

Created a credible forum for structured discussion, public visibility, and youth-facing institutional engagement.

Ready to collaborate?

Open to conversations around institutional advisory work, project leadership, and structured collaboration.

""" """ "./contact.html" : """ Contact | Kristijan Popovski
Contact

Let's architect your next vision.

Interested in working together? Open to discussions around strategic collaboration, governance initiatives, advisory work, and thoughtfully run projects.

Portrait of Kristijan Popovski on the contact page

Fill out to connect

This is a static form prepared for backend connection later. Current validation runs entirely in the browser.

""" "./contact/index.html" : """ Contact | Kristijan Popovski
Contact

Let's architect your next vision.

Interested in working together? Open to discussions around strategic collaboration, governance initiatives, advisory work, and thoughtfully run projects.

Portrait of Kristijan Popovski on the contact page

Fill out to connect

This is a static form prepared for backend connection later. Current validation runs entirely in the browser.

""" "./css/style.css" : """ :root { --color-primary: #002da7; --color-primary-strong: #0f3bc2; --color-primary-soft: #dfe7ff; --color-primary-ghost: rgba(0, 45, 167, 0.08); --color-secondary: #3657be; --color-surface: #f8f9fa; --color-surface-low: #f3f4f5; --color-surface-card: #ffffff; --color-surface-high: #e7e8e9; --color-surface-ink: #191c1d; --color-text: #191c1d; --color-text-muted: #444655; --color-text-soft: #6a6d78; --color-outline: rgba(116, 118, 134, 0.2); --color-outline-strong: rgba(116, 118, 134, 0.32); --color-white: #ffffff; --color-dark: #101420; --shadow-soft: 0 16px 50px rgba(0, 45, 167, 0.06); --shadow-card: 0 18px 45px rgba(0, 45, 167, 0.08); --shadow-button: 0 16px 36px rgba(0, 45, 167, 0.18); --shadow-nav: 0 10px 40px rgba(0, 45, 167, 0.05); --shadow-large: 0 35px 90px rgba(0, 45, 167, 0.1); --radius-sm: 0.75rem; --radius-md: 1.25rem; --radius-lg: 2rem; --radius-xl: 2.5rem; --radius-pill: 999px; --container-sm: 40rem; --container-md: 56rem; --container-lg: 74rem; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-14: 3.5rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-28: 7rem; --space-32: 8rem; --font-body: "Inter", "Segoe UI", Arial, sans-serif; --font-display: "Manrope", "Inter", "Segoe UI", Arial, sans-serif; --transition-standard: 220ms ease; --transition-slow: 420ms cubic-bezier(0.2, 0.8, 0.2, 1); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); color: var(--color-text); background: radial-gradient(circle at top right, rgba(54, 87, 190, 0.07), transparent 28%), linear-gradient(180deg, #fbfcfd 0%, var(--color-surface) 30%, #f5f7fb 100%); min-width: 320px; } body.menu-open { overflow: hidden; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button, input, textarea { font: inherit; } button { border: 0; background: none; cursor: pointer; } textarea { resize: vertical; } ::selection { background: var(--color-primary-soft); color: var(--color-primary); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .site-shell { overflow: clip; } .container { width: min(100% - 2rem, var(--container-lg)); margin: 0 auto; } .container--narrow { width: min(100% - 2rem, var(--container-md)); margin: 0 auto; } .section { padding: var(--space-20) 0; } .section--tight { padding: var(--space-16) 0; } .section--soft { background: rgba(255, 255, 255, 0.58); } .site-header { position: sticky; top: 0; z-index: 100; backdrop-filter: blur(24px); background: rgba(255, 255, 255, 0.84); border-bottom: 1px solid rgba(196, 197, 215, 0.2); box-shadow: var(--shadow-nav); } .site-header__inner { width: min(100% - 2rem, var(--container-lg)); margin: 0 auto; min-height: 4.5rem; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); } .brand { font-family: var(--font-display); font-size: 1.05rem; font-weight: 800; letter-spacing: -0.04em; color: var(--color-surface-ink); } .site-nav { display: none; } .site-nav__list { list-style: none; display: flex; align-items: center; gap: var(--space-8); padding: 0; margin: 0; } .site-nav__link { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; color: var(--color-text-soft); transition: color var(--transition-standard); } .site-nav__link:hover, .site-nav__link:focus-visible { color: var(--color-primary); } .site-nav__link.is-current { color: var(--color-primary); position: relative; } .site-nav__link.is-current::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.55rem; height: 2px; border-radius: 999px; background: var(--color-primary); } .site-header__actions { display: flex; align-items: center; gap: var(--space-3); } .site-header__actions .button--small { display: none; } .menu-toggle { width: 2.75rem; height: 2.75rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(0, 45, 167, 0.06); color: var(--color-primary); transition: background var(--transition-standard), transform var(--transition-standard); } .menu-toggle:hover, .menu-toggle:focus-visible { background: rgba(0, 45, 167, 0.1); } .menu-toggle__line { width: 1.2rem; height: 2px; border-radius: 999px; background: currentColor; position: relative; transition: transform var(--transition-standard), opacity var(--transition-standard); } .menu-toggle__line::before, .menu-toggle__line::after { content: ""; position: absolute; left: 0; width: 1.2rem; height: 2px; border-radius: 999px; background: currentColor; transition: transform var(--transition-standard), top var(--transition-standard), bottom var(--transition-standard); } .menu-toggle__line::before { top: -0.38rem; } .menu-toggle__line::after { bottom: -0.38rem; } .menu-toggle.is-open .menu-toggle__line { background: transparent; } .menu-toggle.is-open .menu-toggle__line::before { top: 0; transform: rotate(45deg); } .menu-toggle.is-open .menu-toggle__line::after { bottom: 0; transform: rotate(-45deg); } .mobile-nav { position: fixed; inset: 4.5rem 1rem auto 1rem; padding: var(--space-8); border-radius: var(--radius-lg); background: rgba(255, 255, 255, 0.97); border: 1px solid rgba(196, 197, 215, 0.3); box-shadow: var(--shadow-large); transform: translateY(-0.75rem); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--transition-standard), transform var(--transition-standard), visibility var(--transition-standard); z-index: 95; } .mobile-nav.is-open { transform: translateY(0); opacity: 1; visibility: visible; pointer-events: auto; } .mobile-nav__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); } .mobile-nav__link { display: block; padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); background: var(--color-surface-low); font-family: var(--font-display); font-weight: 700; color: var(--color-text); transition: background var(--transition-standard), color var(--transition-standard); } .mobile-nav__link.is-current { background: var(--color-primary-soft); color: var(--color-primary); } .page-main { padding-top: var(--space-10); } .hero { display: grid; gap: var(--space-10); align-items: center; } .hero--home, .hero--contact { padding-top: var(--space-6); } .eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-5); padding: 0.45rem 0.8rem; border-radius: var(--radius-pill); background: rgba(0, 45, 167, 0.08); color: var(--color-primary); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; } .eyebrow--plain { background: transparent; padding: 0; } .eyebrow__dot { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: currentColor; } .hero__title, .page-title, .cta-banner__title { margin: 0; font-family: var(--font-display); font-size: clamp(2.75rem, 8vw, 5.5rem); line-height: 0.98; letter-spacing: -0.05em; color: var(--color-surface-ink); } .hero__title strong, .page-title strong, .text-accent { color: var(--color-primary); } .hero__lede, .page-lede, .section-intro, .rich-text p, .contact-card__text, .stat-card__caption, .timeline__content, .card__text, .skill-card__text, .award-card__text { color: var(--color-text-muted); line-height: 1.72; } .hero__lede, .page-lede { margin: var(--space-6) 0 0; font-size: 1.05rem; max-width: 38rem; } .button-row { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-8); } .button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 3.6rem; padding: 0.95rem 1.45rem; border-radius: 1.1rem; font-family: var(--font-display); font-size: 0.96rem; font-weight: 800; letter-spacing: -0.02em; text-align: center; transition: transform var(--transition-standard), box-shadow var(--transition-standard), background var(--transition-standard), color var(--transition-standard), border-color var(--transition-standard); } .button:hover, .button:focus-visible { transform: translateY(-2px); } .button--primary { color: var(--color-white); background: linear-gradient(135deg, var(--color-primary-strong), var(--color-primary)); box-shadow: var(--shadow-button); } .button--secondary { color: var(--color-primary); background: rgba(0, 45, 167, 0.05); border: 1px solid rgba(0, 45, 167, 0.16); } .button--ghost { color: var(--color-primary); background: transparent; } .button--dark { color: var(--color-white); background: #121827; box-shadow: 0 18px 42px rgba(18, 24, 39, 0.18); } .button--small { min-height: 2.9rem; padding: 0.7rem 1rem; font-size: 0.88rem; } .button--block { width: 100%; } .button__icon, .text-link__icon { width: 1rem; height: 1rem; flex: 0 0 auto; } .hero-media { position: relative; } .hero-media__frame, .image-frame { position: relative; overflow: hidden; background: linear-gradient(180deg, rgba(223, 231, 255, 0.8), rgba(255, 255, 255, 0.88)); border-radius: var(--radius-xl); box-shadow: var(--shadow-large); } .hero-media__frame img, .image-frame img { width: 100%; height: 100%; object-fit: cover; } .hero-media__frame { aspect-ratio: 4 / 5; } .glass-card { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; padding: var(--space-5); border-radius: 1.5rem; background: rgba(255, 255, 255, 0.88); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.56); box-shadow: 0 15px 40px rgba(0, 45, 167, 0.12); } .glass-card__label { margin: 0 0 var(--space-2); color: var(--color-primary); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; } .glass-card__title { margin: 0; font-family: var(--font-display); font-size: 1.05rem; font-weight: 800; letter-spacing: -0.03em; } .hero-media__accent { position: absolute; right: -1.5rem; bottom: -1.5rem; width: 8rem; height: 8rem; border-radius: 50%; background: radial-gradient(circle, rgba(0, 45, 167, 0.2), transparent 70%); filter: blur(10px); } .metric-strip { margin-top: var(--space-8); background: linear-gradient(135deg, var(--color-primary), #1139b3); color: var(--color-white); } .metric-strip__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); } .metric-strip__item { padding-left: var(--space-5); border-left: 1px solid rgba(255, 255, 255, 0.18); } .metric-strip__value { margin: 0 0 var(--space-2); font-family: var(--font-display); font-size: clamp(1.8rem, 6vw, 3.2rem); font-weight: 800; letter-spacing: -0.05em; } .metric-strip__label { margin: 0; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.78); line-height: 1.5; } .section-header { display: grid; gap: var(--space-4); align-items: end; margin-bottom: var(--space-10); } .section-header__text { max-width: 38rem; } .section-header__accent { width: 3rem; height: 0.22rem; border-radius: 999px; background: var(--color-primary); margin-bottom: var(--space-4); } .section-title { margin: 0; font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.3rem); line-height: 1.05; letter-spacing: -0.04em; color: var(--color-surface-ink); } .section-intro { margin: 0; font-size: 1rem; } .text-link { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-primary); font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; } .card-grid { display: grid; gap: var(--space-6); } .card { height: 100%; padding: var(--space-8); background: rgba(255, 255, 255, 0.88); border: 1px solid rgba(196, 197, 215, 0.25); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); transition: transform var(--transition-standard), box-shadow var(--transition-standard), border-color var(--transition-standard), opacity var(--transition-standard); } .card:hover, .card:focus-within { transform: translateY(-4px); box-shadow: var(--shadow-card); border-color: rgba(0, 45, 167, 0.18); } .card__icon { width: 3.4rem; height: 3.4rem; margin-bottom: var(--space-6); border-radius: 1.1rem; background: rgba(0, 45, 167, 0.06); color: var(--color-primary); display: inline-flex; align-items: center; justify-content: center; } .card__icon svg, .icon-circle svg { width: 1.55rem; height: 1.55rem; } .card__eyebrow, .mini-label { display: block; margin-bottom: var(--space-3); color: var(--color-primary); font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; } .card__title, .project-card__title, .timeline__title, .form-card__title, .list-card__title, .cta-link-card__title { margin: 0; font-family: var(--font-display); font-size: 1.4rem; line-height: 1.1; letter-spacing: -0.03em; color: var(--color-surface-ink); } .card__text, .project-card__text, .timeline__content, .skill-card__text, .form-note, .contact-card__text, .stat-card__caption { margin: var(--space-4) 0 0; font-size: 0.98rem; } .focus-grid { display: grid; gap: var(--space-6); } .focus-card { position: relative; overflow: hidden; min-height: 100%; border-radius: var(--radius-xl); padding: var(--space-8); box-shadow: var(--shadow-soft); transition: transform var(--transition-standard), box-shadow var(--transition-standard); } .focus-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); } .focus-card--light { background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(196, 197, 215, 0.24); } .focus-card--primary { background: linear-gradient(135deg, var(--color-primary), #1b44cc); color: var(--color-white); } .focus-card--primary .focus-card__title, .focus-card--primary .focus-card__text, .focus-card--primary .mini-label { color: inherit; } .focus-card__layout { display: grid; gap: var(--space-6); } .focus-card__title { margin: 0; font-family: var(--font-display); font-size: 1.75rem; letter-spacing: -0.04em; } .focus-card__list { list-style: none; display: grid; gap: var(--space-3); padding: 0; margin: var(--space-6) 0 0; } .focus-card__list li { display: flex; align-items: center; gap: var(--space-3); font-weight: 700; color: var(--color-primary); } .focus-card--primary .focus-card__list li { color: var(--color-white); } .focus-card__list svg { width: 1rem; height: 1rem; flex: 0 0 auto; } .focus-card__media { overflow: hidden; border-radius: 1.75rem; min-height: 14rem; background: var(--color-surface-high); } .focus-card__media img { width: 100%; height: 100%; object-fit: cover; } .tag-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); } .tag { display: inline-flex; align-items: center; padding: 0.55rem 0.9rem; border-radius: 1rem; background: rgba(0, 45, 167, 0.06); color: var(--color-primary); font-size: 0.82rem; font-weight: 700; } .focus-card--banner { text-align: center; } .project-grid, .project-preview-grid { display: grid; gap: var(--space-8); } .project-card { display: flex; flex-direction: column; gap: var(--space-5); } .project-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius-lg); background: var(--color-surface-high); border: 1px solid rgba(196, 197, 215, 0.2); } .project-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); } .project-card:hover .project-card__media img { transform: scale(1.05); } .project-card__tag { position: absolute; top: 1rem; right: 1rem; padding: 0.45rem 0.75rem; border-radius: 999px; background: rgba(255, 255, 255, 0.92); color: var(--color-primary); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; } .project-card__body { display: flex; flex-direction: column; gap: var(--space-4); } .project-card__meta { color: var(--color-primary); font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; } .project-card__outcome { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); align-items: start; margin-top: var(--space-4); padding-top: var(--space-5); border-top: 1px solid rgba(196, 197, 215, 0.26); } .icon-circle { width: 2.2rem; height: 2.2rem; border-radius: 0.85rem; display: inline-flex; align-items: center; justify-content: center; background: var(--color-primary-soft); color: var(--color-primary); } .project-card__outcome-title { margin: 0 0 var(--space-2); color: var(--color-primary); font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; } .project-card__outcome-text { margin: 0; color: var(--color-text); line-height: 1.6; font-weight: 600; } .about-grid { display: grid; gap: var(--space-8); align-items: center; } .about__stats { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid rgba(196, 197, 215, 0.22); } .stat-card__value { margin: 0; font-family: var(--font-display); font-size: 2rem; font-weight: 800; letter-spacing: -0.04em; } .stat-card__caption { margin-top: var(--space-2); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.12em; } .cta-banner { position: relative; overflow: hidden; border-radius: calc(var(--radius-xl) + 0.5rem); padding: var(--space-10); background: linear-gradient(135deg, var(--color-primary), #1b44cc); color: var(--color-white); box-shadow: 0 30px 70px rgba(0, 45, 167, 0.22); text-align: center; } .cta-banner::before, .cta-banner::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.08); filter: blur(6px); } .cta-banner::before { width: 14rem; height: 14rem; right: -5rem; top: -6rem; } .cta-banner::after { width: 10rem; height: 10rem; left: -3rem; bottom: -4rem; background: rgba(16, 20, 32, 0.12); } .cta-banner__content { position: relative; z-index: 1; } .cta-banner__title { color: var(--color-white); } .cta-banner__text { margin: var(--space-5) auto 0; max-width: 40rem; color: rgba(255, 255, 255, 0.8); line-height: 1.72; font-size: 1rem; } .cta-banner__actions { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-8); align-items: center; } .cta-banner .button--secondary { color: var(--color-white); border-color: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.08); } .page-hero { display: grid; gap: var(--space-10); align-items: end; margin-bottom: var(--space-12); } .filter-bar { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-10); } .filter-chip { padding: 0.75rem 1.05rem; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.86); border: 1px solid rgba(196, 197, 215, 0.28); color: var(--color-text); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; transition: background var(--transition-standard), color var(--transition-standard), border-color var(--transition-standard), transform var(--transition-standard); } .filter-chip:hover, .filter-chip:focus-visible { transform: translateY(-1px); } .filter-chip.is-active { color: var(--color-white); background: var(--color-primary); border-color: var(--color-primary); box-shadow: 0 14px 28px rgba(0, 45, 167, 0.18); } .is-hidden { display: none !important; } .cv-hero { display: grid; gap: var(--space-8); margin-bottom: var(--space-12); } .cv-hero__actions { display: flex; flex-direction: column; gap: var(--space-4); } .cv-layout { display: grid; gap: var(--space-12); } .timeline-section { display: grid; gap: var(--space-6); } .section-badge { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--color-primary); font-family: var(--font-display); font-size: 0.9rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; } .section-badge__icon { width: 2.75rem; height: 2.75rem; border-radius: 0.95rem; background: var(--color-primary-soft); display: inline-flex; align-items: center; justify-content: center; } .section-badge__icon svg { width: 1.2rem; height: 1.2rem; } .timeline { position: relative; display: grid; gap: var(--space-8); padding-left: var(--space-8); } .timeline::before { content: ""; position: absolute; left: 0.7rem; top: 0.6rem; bottom: 0.6rem; width: 2px; background: linear-gradient(180deg, rgba(0, 45, 167, 0.3), rgba(196, 197, 215, 0.5)); } .timeline__item { position: relative; } .timeline__dot { position: absolute; top: 0.25rem; left: -2.15rem; width: 1rem; height: 1rem; border-radius: 50%; border: 3px solid var(--color-white); background: var(--color-primary); box-shadow: 0 0 0 6px rgba(0, 45, 167, 0.06); } .timeline__period { display: block; margin-bottom: var(--space-2); color: var(--color-primary); font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; } .timeline__subtitle { margin: var(--space-2) 0 0; color: var(--color-text-muted); font-weight: 700; } .timeline__content { margin-bottom: 0; } .list-grid, .skill-grid, .language-grid, .link-grid, .contact-info-grid { display: grid; gap: var(--space-5); } .list-card, .skill-card, .language-card, .contact-link, .contact-card, .form-card { background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(196, 197, 215, 0.24); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); } .list-card, .skill-card, .language-card, .form-card { padding: var(--space-8); } .list-card__meta { display: inline-flex; padding: 0.4rem 0.7rem; border-radius: var(--radius-pill); background: var(--color-primary-soft); color: var(--color-primary); font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; } .list-card__title { margin-top: var(--space-5); } .list-card__text, .form-note { margin: var(--space-4) 0 0; color: var(--color-text-muted); line-height: 1.68; } .skill-tags { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); } .skill-tag { display: inline-flex; padding: 0.65rem 0.85rem; border-radius: 0.95rem; background: var(--color-surface-low); border: 1px solid rgba(196, 197, 215, 0.24); color: var(--color-text-muted); font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; } .language-card__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-4); } .language-card__level { color: var(--color-text-soft); font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; } .language-card__bar { width: 100%; height: 0.45rem; margin-top: var(--space-3); overflow: hidden; border-radius: 999px; background: rgba(196, 197, 215, 0.24); } .language-card__fill { height: 100%; border-radius: inherit; background: linear-gradient(135deg, var(--color-primary), var(--color-primary-strong)); } .language-card__fill--100 { width: 100%; } .language-card__fill--75 { width: 75%; } .language-card__fill--40 { width: 40%; } .award-card { position: relative; overflow: hidden; padding: var(--space-8); border-radius: var(--radius-xl); background: linear-gradient(135deg, var(--color-primary), #1b44cc); color: var(--color-white); box-shadow: 0 26px 60px rgba(0, 45, 167, 0.22); } .award-card__eyebrow { color: rgba(255, 255, 255, 0.72); } .award-card__title { margin: var(--space-3) 0 0; font-family: var(--font-display); font-size: 1.55rem; line-height: 1.1; letter-spacing: -0.03em; } .award-card__text { margin-top: var(--space-4); color: rgba(255, 255, 255, 0.84); } .quote-panel { position: relative; overflow: hidden; padding: var(--space-10); border-radius: var(--radius-xl); border: 1px solid rgba(196, 197, 215, 0.24); background: rgba(255, 255, 255, 0.86); min-height: 18rem; display: grid; place-items: center; box-shadow: var(--shadow-soft); } .quote-panel__bg { position: absolute; inset: 0; opacity: 0.12; } .quote-panel__bg img { width: 100%; height: 100%; object-fit: cover; } .quote-panel__content { position: relative; z-index: 1; max-width: 26rem; text-align: center; } .quote-panel__quote { margin: 0; font-family: var(--font-display); font-size: clamp(1.6rem, 4vw, 2.3rem); line-height: 1.28; letter-spacing: -0.03em; color: var(--color-primary); } .contact-intro { display: grid; gap: var(--space-8); align-items: center; margin-bottom: var(--space-14); } .form-card { padding: var(--space-8); } .form-card__title { text-align: center; } .form-card__accent { width: 4rem; height: 0.22rem; border-radius: 999px; background: var(--color-primary); margin: var(--space-4) auto 0; } .form { display: grid; gap: var(--space-8); margin-top: var(--space-10); } .form__grid { display: grid; gap: var(--space-8); } .form-field { display: grid; gap: var(--space-3); } .form-field__label { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; color: var(--color-text-soft); } .form-field__control { width: 100%; padding: 0.95rem 0; border: 0; border-bottom: 2px solid rgba(196, 197, 215, 0.4); background: transparent; color: var(--color-text); transition: border-color var(--transition-standard), box-shadow var(--transition-standard); } .form-field__control::placeholder { color: rgba(68, 70, 85, 0.38); } .form-field__control:focus { outline: none; border-color: var(--color-primary); } .form-field__error { min-height: 1rem; color: #ba1a1a; font-size: 0.78rem; } .form-field.is-invalid .form-field__control { border-color: #ba1a1a; } .form-status { min-height: 1.2rem; color: var(--color-text-soft); font-size: 0.85rem; text-align: center; } .form-status.is-success { color: #0d6b3f; } .link-grid { margin-top: var(--space-10); } .contact-link { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-6); transition: transform var(--transition-standard), border-color var(--transition-standard), box-shadow var(--transition-standard), background var(--transition-standard); } .contact-link:hover, .contact-link:focus-visible { transform: translateY(-3px); border-color: rgba(0, 45, 167, 0.18); box-shadow: var(--shadow-card); } .contact-link__main { display: flex; align-items: center; gap: var(--space-4); } .contact-link__icon { width: 3rem; height: 3rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(0, 45, 167, 0.08); color: var(--color-primary); } .contact-link__icon svg { width: 1.4rem; height: 1.4rem; } .contact-link__eyebrow { display: block; color: var(--color-text-soft); font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; } .contact-link__title { display: block; margin-top: var(--space-2); font-family: var(--font-display); font-size: 1.1rem; font-weight: 800; letter-spacing: -0.02em; } .contact-link__arrow { width: 1.2rem; height: 1.2rem; color: var(--color-text-soft); } .site-footer { margin-top: var(--space-16); padding: var(--space-10) 0; background: #0d1220; color: rgba(255, 255, 255, 0.72); } .site-footer--light { background: rgba(255, 255, 255, 0.86); border-top: 1px solid rgba(196, 197, 215, 0.24); color: var(--color-text-soft); } .site-footer__inner { width: min(100% - 2rem, var(--container-lg)); margin: 0 auto; display: grid; gap: var(--space-8); } .site-footer__brand { font-family: var(--font-display); font-size: 1.3rem; font-weight: 800; letter-spacing: -0.04em; color: var(--color-white); } .site-footer--light .site-footer__brand { color: var(--color-surface-ink); } .site-footer__text { margin: 0; line-height: 1.7; } .site-footer__links { display: flex; flex-wrap: wrap; gap: var(--space-5) var(--space-8); } .site-footer__link { font-family: var(--font-display); font-size: 0.82rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; } .site-footer__meta { color: rgba(255, 255, 255, 0.46); font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; } .site-footer--light .site-footer__meta { color: var(--color-text-soft); } [data-animate] { opacity: 0; transform: translateY(18px); transition: opacity 520ms ease, transform 520ms ease; } [data-animate].is-visible { opacity: 1; transform: translateY(0); } @media (min-width: 40rem) { .container, .container--narrow, .site-header__inner, .site-footer__inner { width: min(100% - 3rem, var(--container-lg)); } .button-row, .cta-banner__actions, .cv-hero__actions { flex-direction: row; flex-wrap: wrap; } .metric-strip__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .card-grid--three, .list-grid--two, .link-grid--two, .contact-info-grid--two, .skill-grid--two, .language-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); } .form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 56rem) { .page-main { padding-top: var(--space-12); } .site-header__inner { min-height: 5rem; } .site-nav { display: block; } .site-header__actions .button--small { display: inline-flex; } .menu-toggle, .mobile-nav { display: none; } .hero, .about-grid, .page-hero, .contact-intro { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } .hero--home { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); } .section-header { grid-template-columns: minmax(0, 1fr) auto; } .metric-strip__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } .card-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); } .focus-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } .focus-card--wide { grid-column: span 7; } .focus-card--tall { grid-column: span 5; } .focus-card--banner { grid-column: 1 / -1; } .focus-card__layout { grid-template-columns: minmax(0, 1.1fr) minmax(16rem, 0.9fr); align-items: center; } .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .project-preview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tag-row--desktop-center { justify-content: center; } .cv-layout { grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.75fr); align-items: start; } .cv-sidebar { position: sticky; top: 6.5rem; } .section--spacious { padding: var(--space-24) 0; } } @media (min-width: 70rem) { .hero__lede, .page-lede { font-size: 1.15rem; } .section { padding: var(--space-24) 0; } .section--tight { padding: var(--space-20) 0; } .project-grid { gap: var(--space-10); } .form-card { padding: var(--space-12); } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } [data-animate] { opacity: 1; transform: none; } } """ "./cv.html" : """ CV | Kristijan Popovski

Curriculum Vitae

BA of Business and Economics - MSc in Business and Organisation (IMB)

Work Experience
2022 - now

Founder and President

Macedonian Student Organisation in Slovenia

Founded and led a student organization that grew to more than 120 members, organized over 50 events, and built more than 20 partnerships with institutions, embassies, and sponsors.

2021 - now

Board Member

Leaders for Education, Activism, and Development (LEAD)

Active board member of a youth-focused NGO working on education, activism, and civic engagement.

2024 - 2025

Intern in Finance and Accounting

CVS Mobile d.d. (a Eurowag company)

Supported finance operations across four subsidiaries, reviewing reports, processing invoice-related data, and contributing to daily operational workflows.

2024

Student Intern

Department for Internationalisation and Strategic Partnerships, University of Ljubljana

Organized webinars for incoming students, prepared data reports, and supported regional university cooperation activities.

Education
2022 - 2026

University of Ljubljana, School of Economics and Business

MSc in Business and Organisation (IMB)
Ranked 44th globally in Financial Times Masters in Management 2025.

Bachelor's Degree in Economics and Business
Major in Entrepreneurship.

2024

Resilient Cities Summer School

Slovak University of Technology in Bratislava.

2017 - 2021
Nikola Karev Skopje, Natural Sciences and Mathematics.

Leadership and Governance

Student Ambassador

Supported prospective students through one-on-one mentorship and onboarding support at the University of Ljubljana.

Student Senate Member

Represented around 5,000 students at faculty level and contributed within university governance structures.

Volunteering

Served in the Red Cross Youth Club and twice as President of the high school student council.

Selected Projects

22nd International Youth Conference Krushevo and consulting support for ATech Electronics.

Portrait background of Kristijan Popovski

"Building a career in management, leadership, and organizational growth."

""" "./cv/index.html" : """ CV | Kristijan Popovski

Curriculum Vitae

BA of Business and Economics - MSc in Business and Organisation (IMB)

Work Experience
2022 - now

Founder and President

Macedonian Student Organisation in Slovenia

Founded and led a student organization that grew to more than 120 members, organized over 50 events, and built more than 20 partnerships with institutions, embassies, and sponsors.

2021 - now

Board Member

Leaders for Education, Activism, and Development (LEAD)

Active board member of a youth-focused NGO working on education, activism, and civic engagement.

2024 - 2025

Intern in Finance and Accounting

CVS Mobile d.d. (a Eurowag company)

Supported finance operations across four subsidiaries, reviewing reports, processing invoice-related data, and contributing to daily operational workflows.

2024

Student Intern

Department for Internationalisation and Strategic Partnerships, University of Ljubljana

Organized webinars for incoming students, prepared data reports, and supported regional university cooperation activities.

Education
2022 - 2026

University of Ljubljana, School of Economics and Business

MSc in Business and Organisation (IMB)
Ranked 44th globally in Financial Times Masters in Management 2025.

Bachelor's Degree in Economics and Business
Major in Entrepreneurship.

2024

Resilient Cities Summer School

Slovak University of Technology in Bratislava.

2017 - 2021
Nikola Karev Skopje, Natural Sciences and Mathematics.

Leadership and Governance

Student Ambassador

Supported prospective students through one-on-one mentorship and onboarding support at the University of Ljubljana.

Student Senate Member

Represented around 5,000 students at faculty level and contributed within university governance structures.

Volunteering

Served in the Red Cross Youth Club and twice as President of the high school student council.

Selected Projects

22nd International Youth Conference Krushevo and consulting support for ATech Electronics.

Portrait background of Kristijan Popovski

"Building a career in management, leadership, and organizational growth."

""" "./designs/contact_desktop_premium_refinement/code.html" : """
Contact

Let's architect
your next vision.

Interested in working together? I'm always open to discussing new projects, creative ideas, or opportunities to be part of your vision.

Kristijan Popovski

Fill out to connect

Typically responds within 24 business hours

Let's connect

Via Professional Channels

""" "./designs/contact_mobile_premium_refinement/code.html" : """ Contact - Kristijan Popovski

Let's Build Something Exceptional.

I assist visionary brands and individuals in bringing high-end digital experiences to life.

Send a Message

Fill out to connect

Let's connect

""" "./designs/cv_desktop_premium_refinement/code.html" : """ CV | Kristijan Popovski

Curriculum Vitae

BA of Business and Economics • MSc in Business and Organisation (IMB)

work

Work Experience

2022 — NOW

Founder and President

Macedonian Student Organisation in Slovenia

Founded and led a student organisation growing membership to 120+ students. Organized 50+ events, built 20+ partnerships with government, embassies, and sponsors.

2021 — NOW

Board Member

Leaders for Education, Activism, and Development (LEAD)

Active member of the Board of LEAD, an NGO focused on empowering youth through education and activism.

2024 — 2025

Intern in Finance and Accounting

CVS Mobile d.d. (a Eurowag company)

Supported finance operations across 4 subsidiaries within a regional tech company. Reviewed financial reports, assisted with invoice data processing, and supported daily operational workflows.

2024

Student Intern

Dept. for Internationalisation & Strategic Partnerships, University of Ljubljana

Organized webinars for incoming students, prepared data reports, and supported the Rectors' Forum on regional university cooperation.

school

Education

University of Ljubljana, School of Economics and Business

2022 — 2026

MSc in Business and Organisation (IMB)

Ranked 44th globally – Financial Times Masters in Management 2025

Bachelor's Degree in Economics and Business

Major in Entrepreneurship (2017—2022)

Summer School

Resilient Cities

Slovak University of Technology (Bratislava, 2024)

High School

Nikola Karev Skopje

Natural Sciences & Mathematics (2017—2021)

groups

Leadership & Involvement

public

Student Ambassador

Supported 200+ prospective students through one-on-one mentorship at Uni Ljubljana.

account_balance

Student Senate Member

Representing ~5,000 students at faculty level. Member of multiple faculty commissions.

volunteer_activism

Volunteering

Red Cross Youth Club (Skopje), serving twice as President of the High School Student Council.

assignment

Selected Projects

22nd Int. Youth Conference Krushevo; Consultant for ATech Electronics.

Kristijan Popovski

terminal Hard Skills

Microsoft Office 365 MS Dynamics NAV ChatGPT Canva.com Cluster Analysis Segmentation

translate Languages

Macedonian Native
English B2 Upper Int.
Slovenian B2 Upper Int.
Serbo-Croatian B2 Upper Int.
French A2 Basic

workspace_premium Recognition

2021

Top Graduate of Generation 2017-2021

Awarded recognition by the Mayor of the City of Skopje as the top graduate of High School Gymnasium "Nikola Karev".

""" "./designs/cv_mobile_premium_refinement/code.html" : """ CV | Kristijan Popovski

Curriculum Vitae

BA of Business and Economics • MSc in Business and Organisation (IMB)

Work Experience

2022 — NOW

Founder and President

Macedonian Student Organisation in Slovenia

Founded and led a student organisation growing membership to 120+ students. Organized 50+ events with attendance of up to 500 participants.

2021 — NOW

Board Member

Leaders for Education, Activism, and Development (LEAD)

Active member of the Board of LEAD, an NGO focused on empowering youth through education and activism.

2024 — 2025

Intern in Finance and Accounting

CVS Mobile d.d. (a Eurowag company)

Supported finance operations across 4 subsidiaries. Reviewed financial reports, assisted with invoice data processing, and supported daily workflows.

2024

Student Intern

Dept. for Internationalisation & Strategic Partnerships, Uni Ljubljana

Organized webinars for incoming students, prepared data reports, and supported regional university cooperation.

Education

school

University of Ljubljana

School of Economics and Business

2022 — 2026

MSc in Business and Organisation (IMB)

Ranked 44th globally – Financial Times MiM 2025

Bachelor's Degree in Economics and Business

Major in Entrepreneurship (2017—2022)

history_edu

Resilient Cities Summer School

Slovak University of Technology • 2024

school

High School "Nikola Karev" Skopje

Natural Sciences & Mathematics • 2017 — 2021

Leadership & Involvement

public

International Student Ambassador

One-on-one mentorship for prospective students at University of Ljubljana.

account_balance

Student Representation & Governance

Elected Student Representative (~5,000 students) and Senate Member.

volunteer_activism

Volunteering & Humanitarian

Red Cross Youth Club member and High School Student Council President.

assignment

Selected Projects

22nd Int. Youth Conference Krushevo; Consultant for ATech Electronics.

terminal

Hard Skills

Microsoft Office 365 Microsoft Dynamics NAV ChatGPT Canva.com Cluster Analysis Segmentation
workspace_premium
workspace_premium

Honors & Awards

2021 RECOGNITION

Top Graduate of Generation 2017-2021

Awarded recognition by the Mayor of the City of Skopje as the top graduate of High School Gymnasium "Nikola Karev".

translate

Languages

Macedonian Native
English B2 Level
Slovenian B2 Level
Serbo-Croatian B2 Level
French A2 Level
Professional Profile Background
format_quote

"Building a career in management and leadership."

home Home work Projects
description CV
alternate_email Contact
""" "./designs/executive_azure/DESIGN.md" : """ # Design System Document: High-End Personal Brand Portfolio ## 1. Overview & Creative North Star **Creative North Star: "The Institutional Architect"** This design system is engineered to position Kristijan Popovski not just as a professional, but as an authority. Moving away from the "loud" and high-energy tropes of startup culture, this system embraces **Institutional Luxury**. It draws inspiration from Apple’s relentless pursuit of clarity and the structured, credible aesthetic of global financial and academic institutions. The "Architect" personality is expressed through: * **Intentional Asymmetry:** Breaking the standard 12-column rigidity to create editorial-style layouts that guide the eye. * **Calm Authority:** Using a palette of deep royal blues and soft light accents to evoke trust and forward-looking stability. * **Generous Negative Space:** Spacing is treated as a premium material, used to separate complex ideas without the need for visual clutter. --- ## 2. Colors The palette is a sophisticated blend of deep corporate blues and atmospheric surface tones. It is designed to be "felt" rather than just seen, creating a sense of professional depth. ### Core Tokens * **Primary (`#002da7`):** The Royal Blue. Used for primary CTAs and key brand moments. * **Primary Container (`#1a44d1`):** A vibrant bridge used for hover states and subtle gradients. * **Secondary (`#3657be`):** The soft light blue accent, inspired by the banner gradient, used for secondary actions and iconography. * **Surface (`#f8f9fa`):** The off-white bedrock of the brand. * **On-Surface (`#191c1d`):** A deep, near-black charcoal for maximum readability and a high-trust institutional feel. ### The "No-Line" Rule To maintain a high-end feel, **1px solid borders are strictly prohibited** for sectioning. Boundaries must be defined solely through: 1. **Background Shifts:** Transitioning from `surface` to `surface-container-low`. 2. **Tonal Transitions:** Utilizing subtle 15-degree linear gradients (Primary to Primary-Container) for hero areas or massive CTAs. ### Signature Textures & Glass Utilize **Glassmorphism** for navigation bars and floating cards. Use a semi-transparent `surface-container-lowest` (80% opacity) with a `24px` backdrop-blur. This ensures the background color bleeds through, making the interface feel integrated and organic. --- ## 3. Typography The typography system uses a dual-font strategy: **Manrope** for authoritative headlines and **Inter** for precision-focused body text. * **Display Large (`Manrope`, 3.5rem):** Set with a tight letter-spacing (-0.02em) to feel impactful and modern. * **Headline Medium (`Manrope`, 1.75rem):** Used for section headers. These should always sit above a substantial 40px–64px top margin to allow the title to breathe. * **Body Large (`Inter`, 1rem):** The workhorse. Set with a generous `1.6` line-height to ensure institutional-level readability. * **Label Medium (`Inter`, 0.75rem):** Used for metadata, dates, or small tags. Always set in uppercase with +0.05em tracking for a "premium logotype" feel. --- ## 4. Elevation & Depth Depth is achieved through **Tonal Layering** rather than traditional drop shadows. * **The Layering Principle:** Stack `surface-container` tiers. For example: * *Base:* `surface` * *Content Block:* `surface-container-low` * *Floating Card:* `surface-container-lowest` * **Ambient Shadows:** When a shadow is required for a floating component (like a portrait card inspired by Image 3), use an extra-diffused shadow: `box-shadow: 0 10px 40px rgba(0, 45, 167, 0.05);`. This subtle blue tint mimics natural light refracting through glass. * **The "Ghost Border":** If accessibility requires a stroke, use `outline-variant` (`#c4c5d7`) at **15% opacity**. It should be felt as a change in texture, not a hard line. --- ## 5. Components ### Primary Buttons * **Style:** `surface-tint` (`#2a4fdb`) background with a subtle gradient to `primary`. * **Corner Radius:** `xl` (0.75rem) for a modern, approachable feel. * **Typography:** `title-sm`, white text, centered. * **Interaction:** On hover, slightly increase the gradient intensity and apply the Ambient Shadow. ### Experience Cards * **Layout:** Drawing from the structured nature of Image 1, cards should avoid dividers. Use a vertical spacing of `32px` between items. * **Styling:** A `surface-container-lowest` background with a `Ghost Border`. * **Timeline Element:** Use a 2px vertical line in `outline-variant` (20% opacity) to connect dates, keeping it institutional and discrete. ### Hero Styling (Inspired by Image 3) * **The Portrait Frame:** The subject (Kristijan) should be placed on a soft, light-blue tinted background (`surface-container-low`). * **Asymmetric Overlay:** The name should overlap the portrait slightly using a glassmorphic tag, utilizing the `surface-container-lowest` token with backdrop-blur. ### Input Fields * **Style:** Minimalist. No solid box; use a `surface-container-high` background with a bottom-only `outline-variant` stroke (30% opacity). * **Focus State:** The stroke transitions to `primary` with a 2px thickness. --- ## 6. Do's and Don'ts ### Do * **Use Generous White Space:** If you think there is enough space between sections, add 20% more. Space = Premium. * **Layer Tones:** Use the difference between `#ffffff` and `#f8f9fa` to define functional areas. * **Maintain Hierarchy:** Headlines should be significantly larger and heavier than body text to convey leadership. ### Don't * **No "Startup Blue":** Avoid neon or overly bright blues. Stick to the deep, credible tones of the Royal Blue (`#002da7`). * **No Traditional Dividers:** Never use a solid 1px line to separate "Education" from "Experience." Use a background color shift instead. * **No Sharp Corners:** Avoid the `none` roundedness. Use `xl` or `lg` to maintain a modern, friendly corporate tone. * **No Harsh Shadows:** Never use black or dark grey shadows. Shadows must always be low-opacity and tinted with the primary blue. """ "./designs/home_desktop_premium_refinement/code.html" : """ Kristijan Popovski | Strategic Leadership & Execution
Strategic Leadership

Structured
leadership.
Strategic thinking.

Delivering institutional excellence across governance and business. From high-level policy to meticulous operational execution.

Kristijan Popovski portrait

Current Focus

Institutional Governance & Finance

120+ Members built into organization
50+ Events organized globally
20+ Strategic partnerships developed
Senate Governance roles in university bodies
Finance Experience in regional tech sector

Professional Trajectory

A track record of leadership in governance, finance, and organizational development.

Full Experience Detail arrow_forward
groups

Founder & President

MSO Slovenia

Pioneered and scaled a representative organization from ground up, establishing institutional frameworks and member value cycles.

account_balance

Student Representation

University of Ljubljana

Advocating for institutional excellence within Senate and university bodies, coordinating between faculty and student body stakeholders.

trending_up

Finance & Operations

CVS Mobile / Eurowag

Driving business insight and financial coordination within a leading regional tech group, focusing on operational transparency.

Areas of Expertise

Focus Areas

Expertise built on the intersection of structured policy, management, and commercial logic.

Strategy & Governance

Building robust frameworks for organizations to thrive. Expertise in institutional policy, stakeholder management, and long-term design.

  • verified Policy Framework Design
  • verified Stakeholder Coordination
Strategic planning

Finance & Business Insight

Managing the numbers that move organizations. Precision in financial operations and business modeling.

query_stats
north_east
rocket_launch

Project Leadership & Execution

Translating ideas into operational reality. From international conferences to business model pivots, I lead projects through to measurable results.

Impact Driven Operational Rigor Europe-wide Experience

Selected Initiatives

A preview of key projects across diverse environments.

International conference
Institutional Collaboration

International Youth Conference & Moderation

Directing large-scale international gatherings, managing logistics, stakeholder agendas, and institutional representation.

View Project Details arrow_right_alt
Greenie Consulting
Consulting & Innovation

Greenie Concept & Business Consulting

Developing sustainable business models and innovation concepts that bridge the gap between ecology and economy.

View Project Details arrow_right_alt
Kristijan portrait detail
Professional Biography

The intersection of
theory and practice.

Kristijan Popovski is a strategic leader focused on institutional excellence and sustainable organizational growth. Based between Slovenia and Macedonia, he has built a reputation for navigating complex governance structures while maintaining a sharp focus on financial viability and project execution.

With an academic foundation from the University of Ljubljana and professional experience within the Eurowag group ecosystem, Kristijan bridges the gap between high-level policy advocacy and bottom-line operational results.

10+

Years Active

2

Strategic Hubs

Start a conversation.

Whether it's a strategic partnership, a governance initiative, or a project in need of leadership — let's connect.

""" "./designs/home_mobile_premium_refinement/code.html" : """ Kristijan Popovski | Portfolio
Kristijan Popovski Professional Portrait

Kristijan Popovski

Institutional Architect

Structured leadership.
Strategic thinking.
Real execution.

Building robust frameworks for growth through Governance, Finance, and Project Leadership.

120+ Members Managed
50+ Events Executed
20+ Strategic Partners
account_balance

Governance
Roles

payments

Finance
Experience

Focus Areas

architecture

Strategy

Designing organizational structures that withstand market shifts and operational scaling.

rocket_launch

Project Leadership

Driving high-impact initiatives from conception to final execution.

monitoring

Finance

Optimizing fiscal frameworks and ensuring sustainable growth paths.

Selected Experience

MSO SLOVENIA

Executive Board

Overseeing institutional governance and strategic scaling for youth-led organizational frameworks.

UNIVERSITY OF LJUBLJANA

Strategic Advisor

Contributing to academic governance and the development of new institutional methodologies.

CVS MOBILE

Operational Analyst

Streamlining workflows and implementing data-driven efficiency protocols across tech teams.

Projects Preview

arrow_forward
Institutional Governance Framework Visualization

Governance v.3

A comprehensive framework for modern institutional transparency and cross-functional efficiency.

About

I bridge the gap between high-level institutional design and ground-level operational reality.

With a background spanning finance, governance, and technology, I help organizations build systems that aren't just efficient—they're resilient. My approach combines rigorous analytical frameworks with pragmatic leadership.

Let's build something authoritative.

Available for strategic consulting and leadership advisory for high-impact projects.

Get in Touch mail
""" "./designs/projects_desktop_premium_refinement/code.html" : """
Selected Work

Architecting Institutional Excellence.

A portfolio of strategic interventions, institutional collaborations, and innovation concepts designed to drive measurable global impact.

Modern high-ceiling conference hall with professional blue lighting
Institutional

International Governance Summit

Spearheaded coordination for a multi-national dialogue on digital infrastructure policy. Managed stakeholder alignment across five European delegations.

terminal
Key Outcome Unanimous adoption of the 2024 Digital Sovereignty Framework by all participating states.
Professional business data analysis on tablet
Consulting

Strategic Business Model Pivot

Redesigned the operational model for a mid-tier logistics provider, transitioning from legacy analog tracking to an automated cloud-first environment.

trending_up
Key Outcome 18% reduction in overhead costs and 24% increase in processing speed within Q1.
Sustainable architecture with green walls
Innovation

The Greenie Concept

Developed a circular economy framework for urban tech hubs. The prototype focused on resource reclamation and shared energy grids for co-working spaces.

eco
Key Outcome Selected as the pilot program for the 2025 Smart Cities Initiative in the DACH region.
Moderator speaking to young professionals
Moderation

Global Youth Leadership Summit

Lead moderator for the 3rd annual summit, facilitating high-stakes debates between 200+ youth leaders and representatives from the World Bank.

groups
Key Outcome Facilitated the signing of a youth-led climate memorandum with 15 corporate sponsors.

Ready to Collaborate?

I am currently accepting inquiries for institutional advisory roles and strategic consulting engagements for the 2025 calendar year.

""" "./designs/projects_mobile_premium_refinement/code.html" : """
Kristijan Popovski
menu
Portfolio

Selected Works

A curated showcase of architectural design and structural engineering excellence.

Governance center architectural visualization
Public Sector
Governance

The Meridian Complex

A sustainable mixed-use development focused on integrating high-density living with carbon-neutral green corridors.

analytics

Impact Outcome

"Achieved a 40% reduction in thermal leakage via innovative glazing solutions."

Modern business infrastructure
Corporate
Business Pivot

Vanguard Research Hub

Reimagining public library spaces as high-tech research centers using modular concrete geometries.

award_star

Impact Outcome

"Winner of the 2022 Regional Excellence in Civic Design Award."

Sustainable residential design
Sustainable
Greenie

The Zenith Pavilion

A masterclass in biophilic residential design, blending interior luxury with the natural topography of the alpine site.

precision_manufacturing

Impact Outcome

"Preserved 100% of the site's existing root networks using zero-impact foundations."

Community center design
Community
Youth Summit

Innovation Plaza

Designing social hubs that facilitate cross-generational learning through adaptable open-space layouts.

groups

Impact Outcome

"Boosted local community engagement by 150% through inclusive design."

Start a Project?

Let's discuss how we can bring precision and excellence to your next architectural venture.

""" "./gitea-token.txt" : """ d8025fa4812582af8c879bfc0929107f4afdd4ba9d00306bbd5afe891a0cb58c """ "./index.html" : """ Kristijan Popovski | Structured Leadership and Strategic Execution
Strategic Leadership

Structured leadership.
Strategic thinking.
Real execution.

Delivering institutional excellence across governance, finance, and project execution. From policy and representation to operational detail, the focus is always on clarity, trust, and outcomes.

Kristijan Popovski in a light suit outdoors

Current Focus

Institutional governance, finance, and cross-border execution

120+

Members built into an active organization

50+

Events organized across student and civic networks

20+

Strategic partnerships developed

Senate

Governance roles in university structures

Finance

Regional technology-sector finance experience

Selected Experience

A concise view of leadership, representation, and operational roles that shape the broader body of work.

View full CV
Founder and President

MSO Slovenia

Founded and scaled a representative student organization, establishing partnerships, operational frameworks, and a visible community presence.

Governance Roles

University of Ljubljana

Representing students within faculty and university structures, bridging institutional decision-making with practical student interests.

Finance Experience

CVS Mobile / Eurowag

Worked across finance and accounting workflows, supporting reporting, invoice processing, and operational transparency across subsidiaries.

What I Work On

Structured focus areas

A blend of institutional thinking, practical leadership, and business discipline applied to real environments.

Strategy & Governance

Designing frameworks that help organizations coordinate stakeholders, clarify mandates, and move with institutional confidence.

  • Policy and framework design
  • Stakeholder coordination
Meeting room prepared for strategic planning
Finance & Business Insight

Numbers that support better decisions

Working where financial detail meets operational reality, with an emphasis on discipline, reporting, and executional clarity.

Reporting Operations Analysis

Project Leadership & Execution

Turning ideas into structured delivery, whether the setting is a conference, a governance process, or a cross-functional organizational initiative.

Impact Driven Operational Rigor Europe-wide Experience

Projects Preview

Selected initiatives that combine leadership, planning, and visible outcomes.

IMB team presenting an Individual Investment Accounts strategy project for NLB Consulting
IMB x NLB Slovenia

Individual Investment Accounts Strategy

Developed a go-to-market and marketing strategy for NLB's Individual Investment Accounts (INR) in Slovenia through primary research, segmentation, personas, and customer journey design.

View project details
Student consulting workshop with Perles and ATech Electronics Consulting
Perles / ATech Electronics

Business Model & Marketing Strategy

Researched the power tools market and customer needs for the Perles brand, then helped shape an updated business model with refurbished products and a digital community concept.

Explore all projects
Portrait of Kristijan Popovski in a professional setting
About

The intersection of theory and practice.

Kristijan Popovski works at the intersection of governance, finance, and project execution. His work is shaped by academic grounding, institutional engagement, and practical operational experience.

Based between Slovenia and Macedonia, he focuses on building structures that are credible, well-organized, and resilient under real-world pressure.

10+

Years active in leadership and public-facing roles

2

Strategic hubs across Slovenia and Macedonia

Start a conversation.

Whether it is a strategic partnership, a governance initiative, or a project that needs measured leadership, the next step can start here.

""" "./js/script.js" : """ document.addEventListener("DOMContentLoaded", () => { setupMobileNavigation(); setupScrollAnimations(); setupProjectFiltering(); setupContactForm(); setupSmoothScrollClose(); }); function setupMobileNavigation() { const toggle = document.querySelector("[data-menu-toggle]"); const mobileNav = document.querySelector("[data-mobile-nav]"); if (!toggle || !mobileNav) { return; } const updateState = (isOpen) => { toggle.classList.toggle("is-open", isOpen); toggle.setAttribute("aria-expanded", String(isOpen)); mobileNav.classList.toggle("is-open", isOpen); document.body.classList.toggle("menu-open", isOpen); }; toggle.addEventListener("click", () => { const isOpen = toggle.getAttribute("aria-expanded") === "true"; updateState(!isOpen); }); mobileNav.querySelectorAll("a").forEach((link) => { link.addEventListener("click", () => updateState(false)); }); document.addEventListener("keydown", (event) => { if (event.key === "Escape") { updateState(false); } }); document.addEventListener("click", (event) => { const clickedInsideMenu = mobileNav.contains(event.target); const clickedToggle = toggle.contains(event.target); if (!clickedInsideMenu && !clickedToggle) { updateState(false); } }); } function setupSmoothScrollClose() { const samePageLinks = document.querySelectorAll('a[href^="#"]'); samePageLinks.forEach((link) => { link.addEventListener("click", (event) => { const targetId = link.getAttribute("href"); if (!targetId || targetId === "#") { return; } const target = document.querySelector(targetId); if (!target) { return; } event.preventDefault(); target.scrollIntoView({ behavior: "smooth", block: "start" }); }); }); } function setupScrollAnimations() { const animatedItems = document.querySelectorAll("[data-animate]"); if (!animatedItems.length) { return; } if (!("IntersectionObserver" in window)) { animatedItems.forEach((item) => item.classList.add("is-visible")); return; } const observer = new IntersectionObserver( (entries, currentObserver) => { entries.forEach((entry) => { if (!entry.isIntersecting) { return; } entry.target.classList.add("is-visible"); currentObserver.unobserve(entry.target); }); }, { threshold: 0.12, rootMargin: "0px 0px -40px 0px" } ); animatedItems.forEach((item) => observer.observe(item)); } function setupProjectFiltering() { const filterButtons = document.querySelectorAll("[data-filter]"); const filterItems = document.querySelectorAll("[data-category]"); if (!filterButtons.length || !filterItems.length) { return; } filterButtons.forEach((button) => { button.addEventListener("click", () => { const filterValue = button.dataset.filter; filterButtons.forEach((otherButton) => { otherButton.classList.toggle("is-active", otherButton === button); otherButton.setAttribute("aria-pressed", String(otherButton === button)); }); filterItems.forEach((item) => { const categories = (item.dataset.category || "").split(" "); const shouldShow = filterValue === "all" || categories.includes(filterValue); item.classList.toggle("is-hidden", !shouldShow); }); }); }); } function setupContactForm() { const form = document.querySelector("[data-contact-form]"); if (!form) { return; } const fields = Array.from(form.querySelectorAll("[data-required], [type='email']")); const status = form.querySelector("[data-form-status]"); const validators = { email: (value) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value) }; const setFieldError = (field, message) => { const wrapper = field.closest(".form-field"); const error = wrapper ? wrapper.querySelector(".form-field__error") : null; field.setAttribute("aria-invalid", String(Boolean(message))); if (wrapper) { wrapper.classList.toggle("is-invalid", Boolean(message)); } if (error) { error.textContent = message || ""; } }; const validateField = (field) => { const rawValue = field.value.trim(); const label = field.dataset.label || "This field"; if (field.hasAttribute("data-required") && !rawValue) { setFieldError(field, `${label} is required.`); return false; } if (field.type === "email" && rawValue && !validators.email(rawValue)) { setFieldError(field, "Enter a valid email address."); return false; } setFieldError(field, ""); return true; }; fields.forEach((field) => { field.addEventListener("blur", () => validateField(field)); field.addEventListener("input", () => { if (field.getAttribute("aria-invalid") === "true") { validateField(field); } }); }); form.addEventListener("submit", (event) => { let isValid = true; fields.forEach((field) => { if (!validateField(field)) { isValid = false; } }); if (!isValid) { event.preventDefault(); if (status) { status.textContent = "Please review the highlighted fields and try again."; status.classList.remove("is-success"); } const firstInvalid = form.querySelector("[aria-invalid='true']"); if (firstInvalid) { firstInvalid.focus(); } return; } event.preventDefault(); if (status) { status.textContent = "Thanks. Your message structure is validated and ready for backend integration."; status.classList.add("is-success"); } form.reset(); fields.forEach((field) => setFieldError(field, "")); }); } """ "./projects.html" : """ Redirecting to Projects | Kristijan Popovski

Redirecting to projects/...

""" "./projects/index.html" : """ Projects | Kristijan Popovski
Selected Work

Architecting institutional excellence.

A portfolio of strategic interventions, institutional collaboration, and practical leadership across governance, consulting, and innovation environments.

Presentation of an Individual Investment Accounts strategy project for NLB at the IMB programme Consulting
IMB x NLB Slovenia

NLB Individual Investment Accounts Strategy

Within the IMB programme, our team developed a strategy for NLB's new Individual Investment Accounts product in Slovenia, combining primary data research, segmentation, positioning, personas, customer journey work, and practical marketing recommendations.

Key Outcome

Delivered an actionable strategy framework for positioning INR with clear target segments, customer insights, messaging priorities, and launch-path recommendations.

Student consulting team in discussion with Perles and ATech Electronics Consulting
Student Intern Consultant - Feb 2025 to Jun 2025

Perles / ATech Business Model & Marketing Strategy

Worked as part of a student consulting team researching the power tools market for the Perles brand, mapping customer needs, and co-developing a refreshed business model together with a sharper marketing strategy.

Key Outcome

Co-created and presented recommendations covering refurbished products, a digital community concept, and brand-level strategic directions for management and academic mentors.

Interior green wall and glass architecture in a sustainable building Innovation
Circular Economy

The Greenie Concept

Developed a circular economy framework for urban workspaces, focused on shared energy thinking, sustainability, and long-term viability.

Key Outcome

Positioned the concept as a scalable sustainability-oriented model with strong regional relevance.

Moderator speaking to a youth audience at a leadership event Moderation
Youth Leadership

Global Youth Leadership Summit

Led moderation for a high-stakes youth summit, facilitating dialogue between participants, institutions, and external partners.

Key Outcome

Created a credible forum for structured discussion, public visibility, and youth-facing institutional engagement.

Ready to collaborate?

Open to conversations around institutional advisory work, project leadership, and structured collaboration.

"""