commit f3187036c109f4de2579cae0d397420cc75a036a Author: Kristijan Popovski Date: Wed Apr 8 21:54:43 2026 +0200 Initial commit diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..b79ee65 --- /dev/null +++ b/.gitignore @@ -0,0 +1,4 @@ +Thumbs.db +.DS_Store +gitea-token*.txt +gitea-token*.txt.sig diff --git a/assets/documents/cv_full.pdf b/assets/documents/cv_full.pdf new file mode 100644 index 0000000..bf564de --- /dev/null +++ b/assets/documents/cv_full.pdf @@ -0,0 +1,35 @@ +%PDF-1.4 +1 0 obj +<< /Type /Catalog /Pages 2 0 R >> +endobj + 2 0 obj +<< /Type /Pages /Kids [3 0 R] /Count 1 >> +endobj + 3 0 obj +<< /Type /Page /Parent 2 0 R /MediaBox [0 0 612 792] /Resources << /Font << /F1 4 0 R >> >> /Contents 5 0 R >> +endobj + 4 0 obj +<< /Type /Font /Subtype /Type1 /BaseFont /Helvetica >> +endobj + 5 0 obj +<< /Length 155 >> +stream +BT +/F1 18 Tf +72 720 Td +(Placeholder CV document for Kristijan Popovski.) Tj +0 -28 Td +(Replace this file with the final approved full CV PDF.) Tj +ET +endstream +endobj +xref +0 6 +0000000000 65535 f +0000000010 00000 n +trailer +<< /Size 6 /Root 1 0 R >> +startxref +538 +%%EOF + diff --git a/assets/documents/cv_onepage.pdf b/assets/documents/cv_onepage.pdf new file mode 100644 index 0000000..84cf4df --- /dev/null +++ b/assets/documents/cv_onepage.pdf @@ -0,0 +1,35 @@ +%PDF-1.4 +1 0 obj +<< /Type /Catalog /Pages 2 0 R >> +endobj + 2 0 obj +<< /Type /Pages /Kids [3 0 R] /Count 1 >> +endobj + 3 0 obj +<< /Type /Page /Parent 2 0 R /MediaBox [0 0 612 792] /Resources << /Font << /F1 4 0 R >> >> /Contents 5 0 R >> +endobj + 4 0 obj +<< /Type /Font /Subtype /Type1 /BaseFont /Helvetica >> +endobj + 5 0 obj +<< /Length 156 >> +stream +BT +/F1 18 Tf +72 720 Td +(Placeholder one-page CV for Kristijan Popovski.) Tj +0 -28 Td +(Replace this file with the final approved one-page PDF.) Tj +ET +endstream +endobj +xref +0 6 +0000000000 65535 f +0000000010 00000 n +trailer +<< /Size 6 /Root 1 0 R >> +startxref +539 +%%EOF + diff --git a/assets/images/focus-strategy.jpg b/assets/images/focus-strategy.jpg new file mode 100644 index 0000000..a8930ad Binary files /dev/null and b/assets/images/focus-strategy.jpg differ diff --git a/assets/images/portrait-cv.jpg b/assets/images/portrait-cv.jpg new file mode 100644 index 0000000..61fc731 Binary files /dev/null and b/assets/images/portrait-cv.jpg differ diff --git a/assets/images/portrait-main.jpg b/assets/images/portrait-main.jpg new file mode 100644 index 0000000..a2405d8 Binary files /dev/null and b/assets/images/portrait-main.jpg differ diff --git a/assets/images/project-consulting.jpg b/assets/images/project-consulting.jpg new file mode 100644 index 0000000..3173f93 Binary files /dev/null and b/assets/images/project-consulting.jpg differ diff --git a/assets/images/project-governance.jpg b/assets/images/project-governance.jpg new file mode 100644 index 0000000..4e73605 Binary files /dev/null and b/assets/images/project-governance.jpg differ diff --git a/assets/images/project-greenie.jpg b/assets/images/project-greenie.jpg new file mode 100644 index 0000000..8c65d79 Binary files /dev/null and b/assets/images/project-greenie.jpg differ diff --git a/assets/images/project-youth.jpg b/assets/images/project-youth.jpg new file mode 100644 index 0000000..7d5d470 Binary files /dev/null and b/assets/images/project-youth.jpg differ diff --git a/contact.html b/contact.html new file mode 100644 index 0000000..5faa5c5 --- /dev/null +++ b/contact.html @@ -0,0 +1,147 @@ + + + + + + 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

+ +

+ + + + + + + Direct Email + popovskik02@yahoo.com + + + + + + + + + + + + LinkedIn Network + Kristijan Popovski + + + + +

+ + +

+ + + diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..665956f --- /dev/null +++ b/css/style.css @@ -0,0 +1,1718 @@ +: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)); + } + + .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; + } +} diff --git a/cv.html b/cv.html new file mode 100644 index 0000000..46319c7 --- /dev/null +++ b/cv.html @@ -0,0 +1,247 @@ + + + + + + CV | Kristijan Popovski + + + + + + + +

+ + +

Curriculum Vitae

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

+ Download One-Page CV + Download Full CV +

+ +

+ + + + 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."

+ +

+ Skills +

Hard Skills

+ Microsoft Office 365 + MS Dynamics NAV + ChatGPT + Canva + Cluster Analysis + Segmentation +

+ +

+ Recognition +

Top Graduate of Generation 2017-2021

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

+ +

+ Languages +

Language Proficiency

+ Macedonian + Native +

+ +

+ English + B2 +

+ +

+ Slovenian + B2 +

+ +

+ Serbo-Croatian + B2 +

+ +

+ French + A2 +

+ + +

+ + + diff --git a/designs/contact_desktop_premium_refinement/code.html b/designs/contact_desktop_premium_refinement/code.html new file mode 100644 index 0000000..bdfbc72 --- /dev/null +++ b/designs/contact_desktop_premium_refinement/code.html @@ -0,0 +1,221 @@ + + + + + + + + + + + + + + +

+ +

+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. +

+ +

Fill out to connect

+ +

Let's connect

Via Professional Channels

+ + +

+mail +

Direct Email

popovskik02@yahoo.com

+ + + +

+ +

LinkedIn Network

Kristijan Popovski

+ +

+ + + \ No newline at end of file diff --git a/designs/contact_desktop_premium_refinement/screen.png b/designs/contact_desktop_premium_refinement/screen.png new file mode 100644 index 0000000..eaa678b Binary files /dev/null and b/designs/contact_desktop_premium_refinement/screen.png differ diff --git a/designs/contact_mobile_premium_refinement/code.html b/designs/contact_mobile_premium_refinement/code.html new file mode 100644 index 0000000..7b48828 --- /dev/null +++ b/designs/contact_mobile_premium_refinement/code.html @@ -0,0 +1,217 @@ + + + + + +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

+ +

+ + +

+LinkedIn +Professional Network +

+arrow_forward + + +

+mail +

+Direct Email +Inquiry & Collaboration +

+arrow_forward + +

+ + + \ No newline at end of file diff --git a/designs/contact_mobile_premium_refinement/screen.png b/designs/contact_mobile_premium_refinement/screen.png new file mode 100644 index 0000000..213824c Binary files /dev/null and b/designs/contact_mobile_premium_refinement/screen.png differ diff --git a/designs/cv_desktop_premium_refinement/code.html b/designs/cv_desktop_premium_refinement/code.html new file mode 100644 index 0000000..23fc5db --- /dev/null +++ b/designs/cv_desktop_premium_refinement/code.html @@ -0,0 +1,361 @@ + + + + + +CV | Kristijan Popovski + + + + + + + + +

+ +

Curriculum Vitae

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

+ + +

+ +

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

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".

+ + + \ No newline at end of file diff --git a/designs/cv_desktop_premium_refinement/screen.png b/designs/cv_desktop_premium_refinement/screen.png new file mode 100644 index 0000000..716f16f Binary files /dev/null and b/designs/cv_desktop_premium_refinement/screen.png differ diff --git a/designs/cv_mobile_premium_refinement/code.html b/designs/cv_mobile_premium_refinement/code.html new file mode 100644 index 0000000..80c6fbe --- /dev/null +++ b/designs/cv_mobile_premium_refinement/code.html @@ -0,0 +1,432 @@ + + + + + +CV | Kristijan Popovski + + + + + + + + +

+ +

Curriculum Vitae

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

+ +

+ + +

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 +

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 +

+ +

+format_quote +

+ "Building a career in management and leadership." +

+ + + +

+ +home +Home + + +work +Projects + + +

+description +CV +

+ + +alternate_email +Contact + +

+ \ No newline at end of file diff --git a/designs/cv_mobile_premium_refinement/screen.png b/designs/cv_mobile_premium_refinement/screen.png new file mode 100644 index 0000000..896daa3 Binary files /dev/null and b/designs/cv_mobile_premium_refinement/screen.png differ diff --git a/designs/executive_azure/DESIGN.md b/designs/executive_azure/DESIGN.md new file mode 100644 index 0000000..1467088 --- /dev/null +++ b/designs/executive_azure/DESIGN.md @@ -0,0 +1,91 @@ +# 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. \ No newline at end of file diff --git a/designs/home_desktop_premium_refinement/code.html b/designs/home_desktop_premium_refinement/code.html new file mode 100644 index 0000000..9852294 --- /dev/null +++ b/designs/home_desktop_premium_refinement/code.html @@ -0,0 +1,421 @@ + + + + + +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. +

+ + +

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 +

+ +

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 +

+ +

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

Strategic Hubs

+ +

Start a conversation.

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

+ +mail + Send Email + + +link + LinkedIn Profile + +

+ +

+ + + \ No newline at end of file diff --git a/designs/home_desktop_premium_refinement/screen.png b/designs/home_desktop_premium_refinement/screen.png new file mode 100644 index 0000000..7fca13a Binary files /dev/null and b/designs/home_desktop_premium_refinement/screen.png differ diff --git a/designs/home_mobile_premium_refinement/code.html b/designs/home_mobile_premium_refinement/code.html new file mode 100644 index 0000000..de359dc --- /dev/null +++ b/designs/home_mobile_premium_refinement/code.html @@ -0,0 +1,262 @@ + + + + + +Kristijan Popovski | Portfolio + + + + + + + + + +

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 + +

+ + + \ No newline at end of file diff --git a/designs/home_mobile_premium_refinement/screen.png b/designs/home_mobile_premium_refinement/screen.png new file mode 100644 index 0000000..ea68448 Binary files /dev/null and b/designs/home_mobile_premium_refinement/screen.png differ diff --git a/designs/projects_desktop_premium_refinement/code.html b/designs/projects_desktop_premium_refinement/code.html new file mode 100644 index 0000000..bd692ee --- /dev/null +++ b/designs/projects_desktop_premium_refinement/code.html @@ -0,0 +1,292 @@ + + + + + + + + + + + + + +

+ +

+ 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. +

+ + +

+ + + \ No newline at end of file diff --git a/designs/projects_desktop_premium_refinement/screen.png b/designs/projects_desktop_premium_refinement/screen.png new file mode 100644 index 0000000..0de0af0 Binary files /dev/null and b/designs/projects_desktop_premium_refinement/screen.png differ diff --git a/designs/projects_mobile_premium_refinement/code.html b/designs/projects_mobile_premium_refinement/code.html new file mode 100644 index 0000000..f47ddc6 --- /dev/null +++ b/designs/projects_mobile_premium_refinement/code.html @@ -0,0 +1,291 @@ + + + + + + + + + + + + + +

+ Kristijan Popovski +

+ + + + +

+menu +

+ +

+Portfolio +

Selected Works

A curated showcase of architectural design and structural engineering excellence.

+ +

+ + + + +

+ +

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 +

+ + +

+ +

Projects Preview

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

Conference venue prepared for an international governance summit

+ Institutional +

+ International collaboration +

International Governance Summit

Coordinated a multi-national dialogue on digital infrastructure and stakeholder alignment across delegations.

+ + View project details + + +

+ +

Business analysis taking place on a tablet

+ Consulting +

+ Consulting and innovation +

Strategic Business Model Pivot

Redesigned a logistics workflow toward a more automated and cloud-first operational model.

+ + 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

Strategic hubs across Slovenia and Macedonia

+ +

+ + +

+ + + diff --git a/js/script.js b/js/script.js new file mode 100644 index 0000000..bbf60ec --- /dev/null +++ b/js/script.js @@ -0,0 +1,222 @@ +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, "")); + }); +} diff --git a/projects.html b/projects.html new file mode 100644 index 0000000..a281ab3 --- /dev/null +++ b/projects.html @@ -0,0 +1,184 @@ + + + + + + Projects | Kristijan Popovski + + + + + + + +

+ + +

Selected Work

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.

+ +

+ + +

Let's architect your next vision.

Fill out to connect

Curriculum Vitae

Founder and President

Board Member

Intern in Finance and Accounting

Student Intern

University of Ljubljana, School of Economics and Business

Resilient Cities Summer School

Student Ambassador

Student Senate Member

Volunteering

Selected Projects

+ Let's architect +your next vision. +

Fill out to connect

Let's connect

+ Let's Build Something Exceptional. +

Send a Message

Let's connect

Curriculum Vitae

Work Experience

Founder and President

Board Member

Intern in Finance and Accounting

Student Intern

Education

University of Ljubljana, School of Economics and Business

Resilient Cities

Nikola Karev Skopje

Leadership & Involvement

Student Ambassador

Student Senate Member

Volunteering

Selected Projects

+terminal + Hard Skills +

+translate + Languages +

+workspace_premium + Recognition +

Top Graduate of Generation 2017-2021

Work Experience

Founder and President

Board Member

Intern in Finance and Accounting

Student Intern

Education

University of Ljubljana

Resilient Cities Summer School

High School "Nikola Karev" Skopje

Leadership & Involvement

International Student Ambassador

Student Representation & Governance

Volunteering & Humanitarian

Selected Projects

Hard Skills

Honors & Awards

Top Graduate of Generation 2017-2021

Languages

+ Structured leadership. +Strategic thinking. +

Professional Trajectory

Founder & President

Student Representation

Finance & Operations

Focus Areas

Strategy & Governance

Finance & Business Insight

Project Leadership & Execution

Selected Initiatives

International Youth Conference & Moderation

Greenie Concept & Business Consulting

The intersection of theory and practice.

Start a conversation.

+ Structured leadership. +Strategic thinking. + Real execution. +

GovernanceRoles

FinanceExperience

Focus Areas

Strategy

Project Leadership

Finance

Selected Experience

Executive Board

Strategic Advisor

+ Let's architect
+your next vision. +

+ Structured
leadership.
+Strategic thinking. +

The intersection of
theory and practice.

+ Structured leadership.
+Strategic thinking.
+ Real execution. +

Governance
Roles

Finance
Experience

Structured leadership.
Strategic thinking.
Real execution.