popovskik/portfolio-website
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: popovskik/portfolio-website:2807a55b268e66e13699b91ef5e0bc33505ab579
popovskik/portfolio-website:master
...
compare: popovskik/portfolio-website:master
popovskik/portfolio-website:master
12 Commits
2807a55b26 ... master
Author SHA1 Message Date
mark e31e6c713a Set SSH connection timeout for deployment
Deploy to Production / deploy (push) Failing after 25s
Details
2026-11-02 18:22:32 +00:00
mark ffda731060 Install rsync in deployment job
Deploy to Production / deploy (push) Failing after 2m27s
Details
2026-11-02 18:20:55 +00:00
mark 7d425cc854 Pin deployment host key for new server
Deploy to Production / deploy (push) Failing after 4s
Details
2026-11-02 18:20:27 +00:00
mark 11313668fa Deploy portfolio to new hosting server
Deploy to Production / deploy (push) Failing after 9s
Details
2026-11-02 18:19:24 +00:00
popovskik 2a42d0245a Refresh site content and project portfolio
Deploy to Production / deploy (push) Successful in 6s
Details
2026-06-03 16:00:44 +02:00
Mark Poljanšek 5419d15518 Add link in bio page
Deploy to Production / deploy (push) Successful in 6s
Details
2026-05-18 16:23:27 +02:00
popovskik 199264c0a6 Enable live Formspree contact submissions
Deploy to Production / deploy (push) Successful in 13s
Details
2026-04-09 14:44:29 +02:00
popovskik a68a6a917c Align with admin history cleanup and reapply local site updates
Deploy to Production / deploy (push) Successful in 13s
Details
2026-04-09 11:40:24 +02:00
Mark aa40b0803d Add security cleanup documentation
Deploy to Production / deploy (push) Successful in 10s
Details
2026-04-09 10:51:53 +02:00
Mark bce5d5720e Add .gitignore and remove sensitive export files from tracking 2026-04-09 10:50:30 +02:00
popovskik bc95b632f7 Changes in code after first review from Google AI Studio 2026-04-09 09:29:55 +02:00
popovskik 63d160f484 Renaming projects site html link 2026-04-08 23:24:41 +02:00
23 changed files with 1863 additions and 587 deletions
Expand all files Collapse all files

No files matched your search

.gitea/workflows/deploy.yml
+9 -3
View File
@@ -18,7 +18,12 @@ jobs:
mkdir -p ~/.ssh
echo "${{ secrets.SSH_PRIVATE_KEY }}" | tr -d '\r' > ~/.ssh/id_rsa
chmod 600 ~/.ssh/id_rsa
ssh-keyscan -p ${{ secrets.SSH_PORT }} ${{ secrets.SSH_HOST }} >> ~/.ssh/known_hosts 2>/dev/null || true
printf '%s\n' '[spletnimojster.si]:5050 ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIA7MrR+/aRMWpsZT1EdiQqjpanRsddJ/aIivRc0K2KiS' >> ~/.ssh/known_hosts
- name: Install rsync
run: |
sudo apt-get update
sudo apt-get install -y rsync
- name: Deploy to Production Server
run: |
@@ -28,6 +33,7 @@ jobs:
--exclude=".gitea/" \
--exclude=".gitignore" \
--exclude="designs/" \
-e "ssh -p ${{ secrets.SSH_PORT }} -i ~/.ssh/id_rsa -o StrictHostKeyChecking=no" \
--exclude=".well-known/" \
-e "ssh -p 5050 -i ~/.ssh/id_rsa -o StrictHostKeyChecking=yes -o ConnectTimeout=15" \
./ \
${{ secrets.SSH_USER }}@${{ secrets.SSH_HOST }}:${{ secrets.TARGET_DIR }}
spletnim@spletnimojster.si:/home/spletnim/popovskik.com/
.gitignore
+17 -2
View File
@@ -1,4 +1,19 @@
Thumbs.db
.DS_Store
# Sensitive exports
code_export.txt
code_export.ps1.test.txt
*.test.txt
gitea-token*.txt
gitea-token*.txt.sig
code_export*.txt
# OS files
.DS_Store
Thumbs.db
# IDE
.vscode/
.idea/
# Temporary files
*.tmp
*.log
SECURITY_CLEANUP.md
+29
View File
@@ -0,0 +1,29 @@
# Security Cleanup - April 9, 2026
## What happened
Sensitive data (code exports containing potential tokens) was accidentally committed to git history in commit 2807a55.
## Actions taken
1. ✅ Removed sensitive files from tracking (code_export.txt, code_export.ps1.test.txt)
2. ✅ Added proper .gitignore to prevent future leaks
3. ✅ Used git-filter-repo to completely remove files from entire git history
4. ✅ Prepared for force-push to rewrite remote history
## Next steps (MANUAL)
1. **CRITICAL**: Revoke the exposed Gitea token immediately in Gitea settings
2. Generate a new Gitea token
3. Update any services using the old token
4. Execute: `git push --force origin master` to rewrite remote history
5. Notify any collaborators to re-clone the repository
## Prevention
- .gitignore now blocks code_export.txt and similar files
- export_code.ps1 already has exclusions for sensitive patterns
- Always review git status before committing
## Verification
After force-push, verify that sensitive files are not in history:
```bash
git log --all --full-history -- code_export.txt
# Should return nothing
```
assets/documents/cv_full.pdf
BIN
View File
Binary file not shown.
assets/images/kristijan.jpeg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

assets/images/msos_ikona.jpeg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.0 KiB

contact.html
+7 -138
View File
@@ -3,145 +3,14 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Contact | Kristijan Popovski</title>
<meta name="description" content="Contact Kristijan Popovski for strategic partnerships, governance initiatives, consulting conversations, or collaboration opportunities.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Manrope:wght@600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<title>Redirecting to Contact | Kristijan Popovski</title>
<meta name="description" content="Redirecting to the contact page for Kristijan Popovski.">
<meta name="robots" content="noindex">
<link rel="canonical" href="contact/">
<script>window.location.replace("contact/");</script>
<noscript><meta http-equiv="refresh" content="0; url=contact/"></noscript>
</head>
<body>
<div class="site-shell">
<header class="site-header">
<div class="site-header__inner">
<a class="brand" href="index.html">Kristijan Popovski</a>
<nav class="site-nav" aria-label="Primary">
<ul class="site-nav__list">
<li><a class="site-nav__link" href="index.html">Home</a></li>
<li><a class="site-nav__link" href="projects.html">Projects</a></li>
<li><a class="site-nav__link" href="cv.html">CV</a></li>
<li><a class="site-nav__link is-current" href="contact.html">Contact</a></li>
</ul>
</nav>
<div class="site-header__actions">
<a class="button button--primary button--small" href="contact.html">Get in Touch</a>
<button class="menu-toggle" type="button" aria-label="Open menu" aria-expanded="false" data-menu-toggle>
<span class="menu-toggle__line"></span>
</button>
</div>
</div>
<nav class="mobile-nav" aria-label="Mobile" data-mobile-nav>
<ul class="mobile-nav__list">
<li><a class="mobile-nav__link" href="index.html">Home</a></li>
<li><a class="mobile-nav__link" href="projects.html">Projects</a></li>
<li><a class="mobile-nav__link" href="cv.html">CV</a></li>
<li><a class="mobile-nav__link is-current" href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<main class="page-main">
<section class="section section--tight">
<div class="container">
<div class="contact-intro">
<div data-animate>
<div class="eyebrow eyebrow--plain">Contact</div>
<h1 class="page-title">Let's architect <strong>your next vision.</strong></h1>
<p class="page-lede">Interested in working together? Open to discussions around strategic collaboration, governance initiatives, advisory work, and thoughtfully run projects.</p>
</div>
<div class="image-frame" data-animate>
<img src="assets/images/portrait-main.jpg" alt="Portrait of Kristijan Popovski on the contact page" width="870" height="1160">
</div>
</div>
</div>
</section>
<section class="section section--tight">
<div class="container--narrow">
<article class="form-card" data-animate>
<h2 class="form-card__title">Fill out to connect</h2>
<div class="form-card__accent"></div>
<form class="form" action="contact.html" method="post" novalidate data-contact-form>
<div class="form__grid">
<div class="form-field">
<label class="form-field__label" for="full-name">Full Name</label>
<input class="form-field__control" id="full-name" name="full_name" type="text" placeholder="John Doe" data-label="Full name" data-required>
<div class="form-field__error" aria-live="polite"></div>
</div>
<div class="form-field">
<label class="form-field__label" for="title-org">Title / Organization</label>
<input class="form-field__control" id="title-org" name="title_org" type="text" placeholder="CTO at Visionary" data-label="Title / Organization" data-required>
<div class="form-field__error" aria-live="polite"></div>
</div>
<div class="form-field">
<label class="form-field__label" for="email">Email</label>
<input class="form-field__control" id="email" name="email" type="email" placeholder="john@example.com" data-label="Email" data-required>
<div class="form-field__error" aria-live="polite"></div>
</div>
<div class="form-field">
<label class="form-field__label" for="phone">Phone</label>
<input class="form-field__control" id="phone" name="phone" type="tel" placeholder="+1 555 000 0000" data-label="Phone">
<div class="form-field__error" aria-live="polite"></div>
</div>
</div>
<div class="form-field">
<label class="form-field__label" for="message">Message</label>
<textarea class="form-field__control" id="message" name="message" rows="5" placeholder="Tell me about your project or idea..." data-label="Message" data-required></textarea>
<div class="form-field__error" aria-live="polite"></div>
</div>
<button class="button button--dark button--block" type="submit">Send Message</button>
<div class="form-status" aria-live="polite" data-form-status></div>
<p class="form-note">This is a static form prepared for backend connection later. Current validation runs entirely in the browser.</p>
</form>
</article>
<div class="link-grid link-grid--two">
<a class="contact-link" href="mailto:popovskik02@yahoo.com" data-animate>
<span class="contact-link__main">
<span class="contact-link__icon">
<svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z"/></svg>
</span>
<span>
<span class="contact-link__eyebrow">Direct Email</span>
<span class="contact-link__title">popovskik02@yahoo.com</span>
</span>
</span>
<svg class="contact-link__arrow" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M12 4v2h4.59L7.76 14.83l1.41 1.41L18 7.41V12h2V4z"/></svg>
</a>
<a class="contact-link" href="https://www.linkedin.com/in/popovski-k/" target="_blank" rel="noreferrer" data-animate>
<span class="contact-link__main">
<span class="contact-link__icon">
<svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M19 3A2 2 0 0 1 21 5v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zm-8.34 14.34V10.5H8.38v6.84zM9.52 9.56a1.33 1.33 0 1 0 0-2.66 1.33 1.33 0 0 0 0 2.66zm8.16 7.78v-3.73c0-2-1.08-2.93-2.51-2.93-1.16 0-1.68.64-1.97 1.08V10.5H10.9c.03.84 0 6.84 0 6.84h2.3v-3.82c0-.2.01-.4.07-.54.16-.4.52-.82 1.14-.82.8 0 1.12.62 1.12 1.53v3.65z"/></svg>
</span>
<span>
<span class="contact-link__eyebrow">LinkedIn Network</span>
<span class="contact-link__title">Kristijan Popovski</span>
</span>
</span>
<svg class="contact-link__arrow" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M12 4v2h4.59L7.76 14.83l1.41 1.41L18 7.41V12h2V4z"/></svg>
</a>
</div>
</div>
</section>
</main>
<footer class="site-footer site-footer--light">
<div class="site-footer__inner">
<div>
<div class="site-footer__brand">Kristijan Popovski</div>
<p class="site-footer__text">Open for thoughtful conversations around partnerships, leadership, governance, and project execution.</p>
</div>
<div class="site-footer__links">
<a class="site-footer__link" href="index.html">Home</a>
<a class="site-footer__link" href="projects.html">Projects</a>
<a class="site-footer__link" href="cv.html">CV</a>
<a class="site-footer__link" href="mailto:popovskik02@yahoo.com">Email</a>
</div>
<div class="site-footer__meta">Static contact form ready for future integration</div>
</div>
</footer>
</div>
<script src="js/script.js"></script>
<p>Redirecting to <a href="contact/">contact/</a>...</p>
</body>
</html>
contact/index.html
+150
View File
@@ -0,0 +1,150 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Contact | Kristijan Popovski</title>
<meta name="description" content="Contact Kristijan Popovski for strategic partnerships, governance initiatives, consulting conversations, or collaboration opportunities.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Manrope:wght@600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../css/style.css">
<script>document.documentElement.classList.add('js-enabled');</script>
</head>
<body>
<div class="site-shell">
<header class="site-header">
<div class="site-header__inner">
<a class="brand" href="../">Kristijan Popovski</a>
<nav class="site-nav" aria-label="Primary">
<ul class="site-nav__list">
<li><a class="site-nav__link" href="../">Home</a></li>
<li><a class="site-nav__link" href="../projects/">Projects</a></li>
<li><a class="site-nav__link" href="../cv/">CV</a></li>
<li><a class="site-nav__link is-current" href="./">Contact</a></li>
</ul>
</nav>
<div class="site-header__actions">
<a class="button button--primary button--small" href="./">Get in Touch</a>
<button class="menu-toggle" type="button" aria-label="Open menu" aria-expanded="false" data-menu-toggle>
<span class="menu-toggle__line"></span>
</button>
</div>
</div>
<nav class="mobile-nav" aria-label="Mobile" data-mobile-nav>
<ul class="mobile-nav__list">
<li><a class="mobile-nav__link" href="../">Home</a></li>
<li><a class="mobile-nav__link" href="../projects/">Projects</a></li>
<li><a class="mobile-nav__link" href="../cv/">CV</a></li>
<li><a class="mobile-nav__link is-current" href="./">Contact</a></li>
</ul>
</nav>
</header>
<main class="page-main">
<section class="section section--tight">
<div class="container">
<div class="contact-intro">
<div data-animate>
<div class="eyebrow eyebrow--plain">Contact</div>
<h1 class="page-title">Let's architect <strong>your next vision.</strong></h1>
<p class="page-lede">Interested in working together? Open to discussions around strategic collaboration, governance initiatives, advisory work, and thoughtfully run projects.</p>
</div>
<div class="image-frame" data-animate>
<img src="../assets/images/portrait-main.jpg" alt="Portrait of Kristijan Popovski on the contact page" width="870" height="1160">
</div>
</div>
</div>
</section>
<section class="section section--tight">
<div class="container--narrow">
<article class="form-card" data-animate>
<h2 class="form-card__title">Fill out to connect</h2>
<div class="form-card__accent"></div>
<form class="form" action="https://formspree.io/f/mreovogz" method="post" novalidate data-contact-form>
<input type="hidden" name="_subject" value="New contact form submission from popovskik.com">
<input type="text" name="_gotcha" style="display:none" tabindex="-1" autocomplete="off">
<div class="form__grid">
<div class="form-field">
<label class="form-field__label" for="full-name">Full Name</label>
<input class="form-field__control" id="full-name" name="full_name" type="text" placeholder="John Doe" data-label="Full name" data-required>
<div class="form-field__error" aria-live="polite"></div>
</div>
<div class="form-field">
<label class="form-field__label" for="title-org">Title / Organization</label>
<input class="form-field__control" id="title-org" name="title_org" type="text" placeholder="CTO at Visionary" data-label="Title / Organization" data-required>
<div class="form-field__error" aria-live="polite"></div>
</div>
<div class="form-field">
<label class="form-field__label" for="email">Email</label>
<input class="form-field__control" id="email" name="email" type="email" placeholder="john@example.com" data-label="Email" data-required>
<div class="form-field__error" aria-live="polite"></div>
</div>
<div class="form-field">
<label class="form-field__label" for="phone">Phone</label>
<input class="form-field__control" id="phone" name="phone" type="tel" placeholder="+1 555 000 0000" data-label="Phone">
<div class="form-field__error" aria-live="polite"></div>
</div>
</div>
<div class="form-field">
<label class="form-field__label" for="message">Message</label>
<textarea class="form-field__control" id="message" name="message" rows="5" placeholder="Tell me about your project or idea..." data-label="Message" data-required></textarea>
<div class="form-field__error" aria-live="polite"></div>
</div>
<button class="button button--dark button--block" type="submit">Send Message</button>
<div class="form-status" aria-live="polite" data-form-status></div>
<p class="form-note">Your message is sent securely and reviewed personally. You will only see a confirmation after sending.</p>
</form>
</article>
<div class="link-grid link-grid--two">
<a class="contact-link" href="mailto:popovskik02@yahoo.com" data-animate>
<span class="contact-link__main">
<span class="contact-link__icon">
<svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z"/></svg>
</span>
<span>
<span class="contact-link__eyebrow">Direct Email</span>
<span class="contact-link__title">popovskik02@yahoo.com</span>
</span>
</span>
<svg class="contact-link__arrow" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M12 4v2h4.59L7.76 14.83l1.41 1.41L18 7.41V12h2V4z"/></svg>
</a>
<a class="contact-link" href="https://www.linkedin.com/in/popovski-k/" target="_blank" rel="noreferrer" data-animate>
<span class="contact-link__main">
<span class="contact-link__icon">
<svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M19 3A2 2 0 0 1 21 5v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zm-8.34 14.34V10.5H8.38v6.84zM9.52 9.56a1.33 1.33 0 1 0 0-2.66 1.33 1.33 0 0 0 0 2.66zm8.16 7.78v-3.73c0-2-1.08-2.93-2.51-2.93-1.16 0-1.68.64-1.97 1.08V10.5H10.9c.03.84 0 6.84 0 6.84h2.3v-3.82c0-.2.01-.4.07-.54.16-.4.52-.82 1.14-.82.8 0 1.12.62 1.12 1.53v3.65z"/></svg>
</span>
<span>
<span class="contact-link__eyebrow">LinkedIn Network</span>
<span class="contact-link__title">Kristijan Popovski</span>
</span>
</span>
<svg class="contact-link__arrow" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M12 4v2h4.59L7.76 14.83l1.41 1.41L18 7.41V12h2V4z"/></svg>
</a>
</div>
</div>
</section>
</main>
<footer class="site-footer site-footer--light">
<div class="site-footer__inner">
<div>
<div class="site-footer__brand">Kristijan Popovski</div>
<p class="site-footer__text">Open for thoughtful conversations around partnerships, leadership, governance, and project execution.</p>
</div>
<div class="site-footer__links">
<a class="site-footer__link" href="../">Home</a>
<a class="site-footer__link" href="../projects/">Projects</a>
<a class="site-footer__link" href="../assets/documents/cv_full.pdf" target="_blank" rel="noreferrer">Download CV</a>
<a class="site-footer__link" href="mailto:popovskik02@yahoo.com">Email</a>
</div>
<div class="site-footer__meta">Live contact form with secure delivery</div>
</div>
</footer>
</div>
<script src="../js/script.js"></script>
</body>
</html>
css/style.css
+638 -1
View File
@@ -71,6 +71,8 @@ body {
body.menu-open {
overflow: hidden;
height: 100vh;
touch-action: none;
}
img {
@@ -285,6 +287,8 @@ textarea {
.mobile-nav {
position: fixed;
inset: 4.5rem 1rem auto 1rem;
max-height: calc(100vh - 6rem);
overflow-y: auto;
padding: var(--space-8);
border-radius: var(--radius-lg);
background: rgba(255, 255, 255, 0.97);
@@ -437,6 +441,11 @@ textarea {
transform: translateY(-2px);
}
.button:focus-visible {
outline: 2px solid var(--color-primary-strong);
outline-offset: 4px;
}
.button--primary {
color: var(--color-white);
background: linear-gradient(135deg, var(--color-primary-strong), var(--color-primary));
@@ -470,6 +479,12 @@ textarea {
width: 100%;
}
.button:disabled {
opacity: 0.7;
cursor: not-allowed;
transform: none;
}
.button__icon,
.text-link__icon {
width: 1rem;
@@ -1041,6 +1056,446 @@ textarea {
display: none !important;
}
.projects-page {
padding-bottom: var(--space-12);
}
.projects-intro-section {
padding-bottom: var(--space-10);
}
.projects-hero {
max-width: 62rem;
display: grid;
gap: var(--space-6);
}
.projects-hero__title {
margin: 0;
font-size: clamp(2.6rem, 7.2vw, 4.5rem);
line-height: 0.98;
letter-spacing: -0.048em;
}
.projects-hero__lede {
margin: 0;
max-width: 52rem;
color: var(--color-text-muted);
font-size: 1.04rem;
line-height: 1.72;
}
.projects-featured-section {
padding-top: 0;
}
.projects-section-heading {
display: grid;
gap: var(--space-4);
margin-bottom: var(--space-8);
}
.projects-section-heading .section-intro {
max-width: 46rem;
}
.projects-featured-grid {
display: grid;
gap: var(--space-6);
}
.projects-featured-card {
display: flex;
flex-direction: column;
height: 100%;
color: inherit;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 255, 0.94));
border: 1px solid rgba(196, 197, 215, 0.3);
border-radius: calc(var(--radius-lg) + 0.25rem);
box-shadow: var(--shadow-card);
overflow: hidden;
transition: transform var(--transition-standard), box-shadow var(--transition-standard), border-color var(--transition-standard);
}
.projects-featured-card:hover,
.projects-featured-card:focus-within {
transform: translateY(-4px);
box-shadow: 0 22px 48px rgba(0, 45, 167, 0.12);
border-color: rgba(0, 45, 167, 0.22);
}
.projects-featured-card:focus-visible {
outline: 2px solid var(--color-primary-strong);
outline-offset: 3px;
}
.projects-featured-card__media {
position: relative;
overflow: hidden;
aspect-ratio: 16 / 10;
background: var(--color-surface-high);
}
.projects-featured-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-slow);
}
.projects-featured-card:hover .projects-featured-card__media img {
transform: scale(1.04);
}
.projects-featured-card__body {
padding: var(--space-6);
display: grid;
gap: var(--space-4);
flex: 1;
}
.projects-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-3);
}
.projects-date {
color: var(--color-text-soft);
font-size: 0.68rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.14em;
}
.projects-tag {
display: inline-flex;
align-items: center;
padding: 0.36rem 0.62rem;
border-radius: var(--radius-pill);
color: var(--color-primary);
background: rgba(0, 45, 167, 0.08);
font-size: 0.64rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.13em;
}
.projects-featured-card__title {
margin: 0;
font-family: var(--font-display);
font-size: 1.32rem;
line-height: 1.1;
letter-spacing: -0.03em;
color: var(--color-surface-ink);
}
.projects-featured-card__summary {
margin: 0;
color: var(--color-text-muted);
line-height: 1.68;
}
.projects-featured-card__cta {
margin-top: auto;
display: inline-flex;
align-items: center;
gap: var(--space-2);
color: var(--color-primary);
font-family: var(--font-display);
font-size: 0.86rem;
font-weight: 800;
letter-spacing: -0.01em;
}
.projects-timeline-section {
padding-top: var(--space-12);
}
.projects-timeline-section--alt {
background: rgba(255, 255, 255, 0.56);
border-top: 1px solid rgba(196, 197, 215, 0.2);
border-bottom: 1px solid rgba(196, 197, 215, 0.2);
}
.projects-timeline-chapters {
display: grid;
gap: var(--space-16);
}
.projects-chapter {
display: grid;
gap: var(--space-8);
}
.projects-chapter__header {
display: flex;
flex-wrap: wrap;
align-items: end;
justify-content: space-between;
gap: var(--space-4);
}
.projects-chapter__title {
margin: 0;
font-family: var(--font-display);
font-size: clamp(1.9rem, 4.3vw, 3rem);
line-height: 1.05;
letter-spacing: -0.04em;
color: var(--color-surface-ink);
}
.projects-chapter__range {
display: inline-flex;
align-items: center;
padding: 0.45rem 0.78rem;
border-radius: var(--radius-pill);
background: rgba(0, 45, 167, 0.09);
color: var(--color-primary);
font-size: 0.68rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.14em;
}
.projects-timeline {
position: relative;
display: grid;
gap: var(--space-8);
padding-left: var(--space-8);
}
.projects-timeline::before {
content: "";
position: absolute;
left: 0.72rem;
top: 0.5rem;
bottom: 0.5rem;
width: 2px;
background: linear-gradient(180deg, rgba(0, 45, 167, 0.28), rgba(196, 197, 215, 0.62));
}
.projects-entry {
position: relative;
display: grid;
gap: var(--space-5);
scroll-margin-top: 6.5rem;
}
.projects-entry__dot {
position: absolute;
left: -1.85rem;
top: 1.1rem;
width: 0.95rem;
height: 0.95rem;
border-radius: 50%;
border: 3px solid var(--color-white);
background: var(--color-primary);
box-shadow: 0 0 0 5px rgba(0, 45, 167, 0.08);
}
.projects-entry__media {
overflow: hidden;
border-radius: var(--radius-lg);
border: 1px solid rgba(196, 197, 215, 0.26);
background: var(--color-surface-high);
box-shadow: var(--shadow-soft);
}
.projects-entry__media img {
width: 100%;
height: 100%;
object-fit: cover;
aspect-ratio: 16 / 10;
}
.projects-entry__content {
background: rgba(255, 255, 255, 0.92);
border: 1px solid rgba(196, 197, 215, 0.26);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-soft);
padding: var(--space-6);
display: grid;
gap: var(--space-4);
transition: transform var(--transition-standard), box-shadow var(--transition-standard), border-color var(--transition-standard);
}
.projects-entry:hover .projects-entry__content,
.projects-entry:focus-within .projects-entry__content {
transform: translateY(-2px);
box-shadow: var(--shadow-card);
border-color: rgba(0, 45, 167, 0.2);
}
.projects-entry:target .projects-entry__content {
border-color: rgba(0, 45, 167, 0.42);
box-shadow: 0 0 0 3px rgba(0, 45, 167, 0.12), var(--shadow-card);
}
.projects-entry__title {
margin: 0;
font-family: var(--font-display);
font-size: 1.34rem;
line-height: 1.12;
letter-spacing: -0.028em;
color: var(--color-surface-ink);
}
.projects-entry__text {
margin: 0;
color: var(--color-text-muted);
line-height: 1.7;
}
.projects-entry__impact {
margin: 0;
padding-top: var(--space-4);
border-top: 1px solid rgba(196, 197, 215, 0.26);
color: var(--color-text);
line-height: 1.64;
}
.projects-entry__impact strong {
color: var(--color-primary);
}
.projects-final-cta-section {
padding-top: var(--space-14);
}
.projects-final-cta {
padding: var(--space-10);
border-radius: calc(var(--radius-xl) + 0.35rem);
border: 1px solid rgba(196, 197, 215, 0.26);
background: linear-gradient(160deg, rgba(255, 255, 255, 0.96), rgba(223, 231, 255, 0.42));
box-shadow: var(--shadow-soft);
text-align: center;
}
.projects-final-cta__title {
margin: 0;
font-family: var(--font-display);
font-size: clamp(1.8rem, 4vw, 2.65rem);
line-height: 1.08;
letter-spacing: -0.04em;
color: var(--color-surface-ink);
}
.projects-final-cta__actions {
margin-top: var(--space-8);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-4);
}
@media (max-width: 39.999rem) {
.projects-featured-card__body,
.projects-entry__content {
padding: var(--space-6);
}
.projects-featured-card__title,
.projects-entry__title {
font-size: 1.2rem;
}
.projects-timeline {
padding-left: var(--space-6);
}
.projects-entry__dot {
left: -1.55rem;
top: 0.95rem;
width: 0.9rem;
height: 0.9rem;
}
}
@media (min-width: 40rem) {
.projects-final-cta__actions {
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
}
@media (min-width: 56rem) {
.projects-intro-section {
padding-bottom: var(--space-12);
}
.projects-hero__title {
white-space: nowrap;
}
.projects-featured-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
align-items: stretch;
}
.projects-featured-card__body {
padding: var(--space-8);
}
.projects-timeline {
padding-left: var(--space-10);
gap: var(--space-10);
}
.projects-timeline::before {
left: 0.92rem;
}
.projects-entry__dot {
left: -2.15rem;
}
.projects-entry--split {
grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr);
align-items: stretch;
gap: var(--space-6);
}
.projects-entry--split .projects-entry__media {
height: 100%;
}
.projects-entry--split .projects-entry__media img {
height: 100%;
min-height: 100%;
aspect-ratio: auto;
}
.projects-entry--split.projects-entry--offset .projects-entry__media {
order: 2;
}
.projects-entry--split.projects-entry--offset .projects-entry__content {
order: 1;
}
.projects-final-cta {
padding: var(--space-12);
}
}
@media (min-width: 70rem) {
.projects-timeline-chapters {
gap: var(--space-20);
}
.projects-timeline {
gap: var(--space-12);
}
.projects-entry__content {
padding: var(--space-8);
}
}
.cv-hero {
display: grid;
gap: var(--space-8);
@@ -1389,6 +1844,7 @@ textarea {
.form-field__control:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 1px 0 0 var(--color-primary);
}
.form-field__error {
@@ -1412,6 +1868,10 @@ textarea {
color: #0d6b3f;
}
.form-status.is-error {
color: #ba1a1a;
}
.link-grid {
margin-top: var(--space-10);
}
@@ -1541,7 +2001,7 @@ textarea {
color: var(--color-text-soft);
}
[data-animate] {
.js-enabled [data-animate] {
opacity: 0;
transform: translateY(18px);
transition: opacity 520ms ease, transform 520ms ease;
@@ -1720,3 +2180,180 @@ textarea {
transform: none;
}
}
/* ==========================================================================
Link In Bio Page Styles
========================================================================== */
.linkbio-body {
background: var(--color-surface);
min-height: 100vh;
display: flex;
flex-direction: column;
}
.linkbio-wrapper {
flex-grow: 1;
display: flex;
justify-content: center;
padding: var(--space-10) var(--space-4) var(--space-16);
}
.linkbio-container {
width: 100%;
max-width: 38rem;
display: flex;
flex-direction: column;
align-items: center;
}
.linkbio-header {
text-align: center;
margin-bottom: var(--space-6);
}
.linkbio-avatar {
width: 110px;
height: 110px;
margin: 0 auto var(--space-4);
border-radius: 50%;
overflow: hidden;
border: 3px solid var(--color-white);
box-shadow: var(--shadow-card);
}
.linkbio-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.linkbio-name {
margin: 0 0 var(--space-1);
font-family: var(--font-display);
font-size: 1.5rem;
font-weight: 800;
letter-spacing: -0.02em;
color: var(--color-surface-ink);
}
.linkbio-tagline {
margin: 0;
font-size: 0.95rem;
color: var(--color-text-muted);
font-weight: 500;
}
.linkbio-social-icons {
display: flex;
justify-content: center;
gap: var(--space-4);
margin-bottom: var(--space-10);
}
.linkbio-social-icons a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.75rem;
height: 2.75rem;
border-radius: 50%;
background: rgba(0, 45, 167, 0.06);
color: var(--color-primary);
transition: transform var(--transition-standard), background var(--transition-standard);
}
.linkbio-social-icons a:hover {
transform: translateY(-2px);
background: rgba(0, 45, 167, 0.12);
}
.linkbio-social-icons svg {
width: 1.3rem;
height: 1.3rem;
}
.linkbio-links {
width: 100%;
display: grid;
gap: var(--space-4);
}
.linkbio-btn {
display: flex;
align-items: center;
padding: var(--space-4) var(--space-5);
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);
text-decoration: none;
color: var(--color-text);
transition: transform var(--transition-standard), box-shadow var(--transition-standard), border-color var(--transition-standard);
}
.linkbio-btn:hover,
.linkbio-btn:focus-visible {
transform: translateY(-3px);
box-shadow: var(--shadow-card);
border-color: rgba(0, 45, 167, 0.18);
}
.linkbio-btn-icon {
width: 2.2rem;
height: 2.2rem;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(0, 45, 167, 0.06);
color: var(--color-primary);
flex-shrink: 0;
}
.linkbio-btn-icon svg {
width: 1.1rem;
height: 1.1rem;
}
.linkbio-btn-icon img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
.linkbio-btn-text {
flex-grow: 1;
text-align: center;
font-family: var(--font-display);
font-weight: 700;
font-size: 1rem;
color: var(--color-surface-ink);
padding: 0 var(--space-4);
}
.linkbio-btn-icon-right {
width: 1.2rem;
height: 1.2rem;
color: var(--color-text-soft);
flex-shrink: 0;
transition: color var(--transition-standard);
}
.linkbio-btn:hover .linkbio-btn-icon-right {
color: var(--color-primary);
}
.linkbio-divider {
text-align: center;
font-size: 0.85rem;
font-weight: 600;
color: var(--color-text-soft);
margin: var(--space-4) 0 var(--space-2);
}
.linkbio-footer {
margin-top: var(--space-12);
text-align: center;
}
cv.html
+7 -238
View File
@@ -3,245 +3,14 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CV | Kristijan Popovski</title>
<meta name="description" content="Curriculum vitae of Kristijan Popovski, including education, experience, governance roles, skills, languages, and awards.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Manrope:wght@600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<title>Redirecting to CV | Kristijan Popovski</title>
<meta name="description" content="Redirecting to the CV page for Kristijan Popovski.">
<meta name="robots" content="noindex">
<link rel="canonical" href="cv/">
<script>window.location.replace("cv/");</script>
<noscript><meta http-equiv="refresh" content="0; url=cv/"></noscript>
</head>
<body>
<div class="site-shell">
<header class="site-header">
<div class="site-header__inner">
<a class="brand" href="index.html">Kristijan Popovski</a>
<nav class="site-nav" aria-label="Primary">
<ul class="site-nav__list">
<li><a class="site-nav__link" href="index.html">Home</a></li>
<li><a class="site-nav__link" href="projects.html">Projects</a></li>
<li><a class="site-nav__link is-current" href="cv.html">CV</a></li>
<li><a class="site-nav__link" href="contact.html">Contact</a></li>
</ul>
</nav>
<div class="site-header__actions">
<a class="button button--primary button--small" href="contact.html">Get in Touch</a>
<button class="menu-toggle" type="button" aria-label="Open menu" aria-expanded="false" data-menu-toggle>
<span class="menu-toggle__line"></span>
</button>
</div>
</div>
<nav class="mobile-nav" aria-label="Mobile" data-mobile-nav>
<ul class="mobile-nav__list">
<li><a class="mobile-nav__link" href="index.html">Home</a></li>
<li><a class="mobile-nav__link" href="projects.html">Projects</a></li>
<li><a class="mobile-nav__link is-current" href="cv.html">CV</a></li>
<li><a class="mobile-nav__link" href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<main class="page-main">
<section class="section section--tight">
<div class="container">
<div class="cv-hero" data-animate>
<div>
<h1 class="page-title">Curriculum Vitae</h1>
<p class="page-lede">BA of Business and Economics - MSc in Business and Organisation (IMB)</p>
</div>
<div class="cv-hero__actions">
<a class="button button--secondary" href="assets/documents/cv_onepage.pdf">Download One-Page CV</a>
<a class="button button--primary" href="assets/documents/cv_full.pdf">Download Full CV</a>
</div>
</div>
<div class="cv-layout">
<div>
<section class="timeline-section section--tight">
<div class="section-badge" data-animate>
<span class="section-badge__icon">
<svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M20 6h-3V4h-2v2H9V4H7v2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 14H4V11h16v9z"/></svg>
</span>
Work Experience
</div>
<div class="timeline">
<article class="timeline__item" data-animate>
<span class="timeline__dot"></span>
<span class="timeline__period">2022 - now</span>
<h2 class="timeline__title">Founder and President</h2>
<p class="timeline__subtitle">Macedonian Student Organisation in Slovenia</p>
<p class="timeline__content">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.</p>
</article>
<article class="timeline__item" data-animate>
<span class="timeline__dot"></span>
<span class="timeline__period">2021 - now</span>
<h2 class="timeline__title">Board Member</h2>
<p class="timeline__subtitle">Leaders for Education, Activism, and Development (LEAD)</p>
<p class="timeline__content">Active board member of a youth-focused NGO working on education, activism, and civic engagement.</p>
</article>
<article class="timeline__item" data-animate>
<span class="timeline__dot"></span>
<span class="timeline__period">2024 - 2025</span>
<h2 class="timeline__title">Intern in Finance and Accounting</h2>
<p class="timeline__subtitle">CVS Mobile d.d. (a Eurowag company)</p>
<p class="timeline__content">Supported finance operations across four subsidiaries, reviewing reports, processing invoice-related data, and contributing to daily operational workflows.</p>
</article>
<article class="timeline__item" data-animate>
<span class="timeline__dot"></span>
<span class="timeline__period">2024</span>
<h2 class="timeline__title">Student Intern</h2>
<p class="timeline__subtitle">Department for Internationalisation and Strategic Partnerships, University of Ljubljana</p>
<p class="timeline__content">Organized webinars for incoming students, prepared data reports, and supported regional university cooperation activities.</p>
</article>
</div>
</section>
<section class="section section--tight">
<div class="section-badge" data-animate>
<span class="section-badge__icon">
<svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M12 3 1 9l11 6 9-4.91V17h2V9L12 3zm0 9.58L5.96 9 12 5.42 18.04 9 12 12.58zM5 12.69V17l7 4 7-4v-4.31l-7 3.82-7-3.82z"/></svg>
</span>
Education
</div>
<div class="list-grid list-grid--two">
<article class="list-card" data-animate>
<span class="list-card__meta">2022 - 2026</span>
<h2 class="list-card__title">University of Ljubljana, School of Economics and Business</h2>
<p class="list-card__text"><strong>MSc in Business and Organisation (IMB)</strong><br>Ranked 44th globally in Financial Times Masters in Management 2025.</p>
<p class="list-card__text"><strong>Bachelor's Degree in Economics and Business</strong><br>Major in Entrepreneurship.</p>
</article>
<article class="list-card" data-animate>
<span class="list-card__meta">2024</span>
<h2 class="list-card__title">Resilient Cities Summer School</h2>
<p class="list-card__text">Slovak University of Technology in Bratislava.</p>
<p class="list-card__text"><strong>2017 - 2021</strong><br>Nikola Karev Skopje, Natural Sciences and Mathematics.</p>
</article>
</div>
</section>
<section class="section section--tight">
<div class="section-badge" data-animate>
<span class="section-badge__icon">
<svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5s-3 1.34-3 3 1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5C15 14.17 10.33 13 8 13zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>
</span>
Leadership and Governance
</div>
<div class="list-grid list-grid--two">
<article class="list-card" data-animate>
<h2 class="list-card__title">Student Ambassador</h2>
<p class="list-card__text">Supported prospective students through one-on-one mentorship and onboarding support at the University of Ljubljana.</p>
</article>
<article class="list-card" data-animate>
<h2 class="list-card__title">Student Senate Member</h2>
<p class="list-card__text">Represented around 5,000 students at faculty level and contributed within university governance structures.</p>
</article>
<article class="list-card" data-animate>
<h2 class="list-card__title">Volunteering</h2>
<p class="list-card__text">Served in the Red Cross Youth Club and twice as President of the high school student council.</p>
</article>
<article class="list-card" data-animate>
<h2 class="list-card__title">Selected Projects</h2>
<p class="list-card__text">22nd International Youth Conference Krushevo and consulting support for ATech Electronics.</p>
</article>
</div>
</section>
<section class="section section--tight">
<div class="quote-panel" data-animate>
<div class="quote-panel__bg">
<img src="assets/images/portrait-cv.jpg" alt="Portrait background of Kristijan Popovski" width="536" height="745" loading="lazy">
</div>
<div class="quote-panel__content">
<p class="quote-panel__quote">"Building a career in management, leadership, and organizational growth."</p>
</div>
</div>
</section>
</div>
<aside class="cv-sidebar">
<div class="image-frame" data-animate>
<img src="assets/images/portrait-cv.jpg" alt="Kristijan Popovski portrait for CV page" width="536" height="745">
</div>
<section class="section section--tight">
<article class="skill-card" data-animate>
<span class="mini-label">Skills</span>
<h2 class="card__title">Hard Skills</h2>
<div class="skill-tags">
<span class="skill-tag">Microsoft Office 365</span>
<span class="skill-tag">MS Dynamics NAV</span>
<span class="skill-tag">ChatGPT</span>
<span class="skill-tag">Canva</span>
<span class="skill-tag">Cluster Analysis</span>
<span class="skill-tag">Segmentation</span>
</div>
</article>
</section>
<section class="section section--tight">
<article class="award-card" data-animate>
<span class="mini-label award-card__eyebrow">Recognition</span>
<h2 class="award-card__title">Top Graduate of Generation 2017-2021</h2>
<p class="award-card__text">Recognized by the Mayor of the City of Skopje as the top graduate of High School Gymnasium "Nikola Karev".</p>
</article>
</section>
<section class="section section--tight">
<article class="language-card" data-animate>
<span class="mini-label">Languages</span>
<h2 class="card__title">Language Proficiency</h2>
<div class="language-card__row">
<strong>Macedonian</strong>
<span class="language-card__level">Native</span>
</div>
<div class="language-card__bar"><div class="language-card__fill language-card__fill--100"></div></div>
<div class="language-card__row">
<strong>English</strong>
<span class="language-card__level">B2</span>
</div>
<div class="language-card__bar"><div class="language-card__fill language-card__fill--75"></div></div>
<div class="language-card__row">
<strong>Slovenian</strong>
<span class="language-card__level">B2</span>
</div>
<div class="language-card__bar"><div class="language-card__fill language-card__fill--75"></div></div>
<div class="language-card__row">
<strong>Serbo-Croatian</strong>
<span class="language-card__level">B2</span>
</div>
<div class="language-card__bar"><div class="language-card__fill language-card__fill--75"></div></div>
<div class="language-card__row">
<strong>French</strong>
<span class="language-card__level">A2</span>
</div>
<div class="language-card__bar"><div class="language-card__fill language-card__fill--40"></div></div>
</article>
</section>
</aside>
</div>
</div>
</section>
</main>
<footer class="site-footer site-footer--light">
<div class="site-footer__inner">
<div>
<div class="site-footer__brand">Kristijan Popovski</div>
<p class="site-footer__text">A structured overview of education, leadership, governance, and professional development.</p>
</div>
<div class="site-footer__links">
<a class="site-footer__link" href="index.html">Home</a>
<a class="site-footer__link" href="projects.html">Projects</a>
<a class="site-footer__link" href="assets/documents/cv_full.pdf">Full CV</a>
<a class="site-footer__link" href="mailto:popovskik02@yahoo.com">Email</a>
</div>
<div class="site-footer__meta">Readable, structured, and ready for download</div>
</div>
</footer>
</div>
<script src="js/script.js"></script>
<p>Redirecting to <a href="cv/">cv/</a>...</p>
</body>
</html>
cv/index.html
+248
View File
@@ -0,0 +1,248 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CV | Kristijan Popovski</title>
<meta name="description" content="Curriculum vitae of Kristijan Popovski, including education, experience, governance roles, skills, languages, and awards.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Manrope:wght@600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../css/style.css">
<script>document.documentElement.classList.add('js-enabled');</script>
</head>
<body>
<div class="site-shell">
<header class="site-header">
<div class="site-header__inner">
<a class="brand" href="../">Kristijan Popovski</a>
<nav class="site-nav" aria-label="Primary">
<ul class="site-nav__list">
<li><a class="site-nav__link" href="../">Home</a></li>
<li><a class="site-nav__link" href="../projects/">Projects</a></li>
<li><a class="site-nav__link is-current" href="./">CV</a></li>
<li><a class="site-nav__link" href="../contact/">Contact</a></li>
</ul>
</nav>
<div class="site-header__actions">
<a class="button button--primary button--small" href="../contact/">Get in Touch</a>
<button class="menu-toggle" type="button" aria-label="Open menu" aria-expanded="false" data-menu-toggle>
<span class="menu-toggle__line"></span>
</button>
</div>
</div>
<nav class="mobile-nav" aria-label="Mobile" data-mobile-nav>
<ul class="mobile-nav__list">
<li><a class="mobile-nav__link" href="../">Home</a></li>
<li><a class="mobile-nav__link" href="../projects/">Projects</a></li>
<li><a class="mobile-nav__link is-current" href="./">CV</a></li>
<li><a class="mobile-nav__link" href="../contact/">Contact</a></li>
</ul>
</nav>
</header>
<main class="page-main">
<section class="section section--tight">
<div class="container">
<div class="cv-hero" data-animate>
<div>
<h1 class="page-title">Curriculum Vitae</h1>
<p class="page-lede">BA of Business and Economics - MSc in Business and Organisation (IMB)</p>
</div>
<div class="cv-hero__actions">
<a class="button button--secondary" href="../assets/documents/cv_onepage.pdf" target="_blank" rel="noreferrer">Download One-Page CV</a>
<a class="button button--primary" href="../assets/documents/cv_full.pdf" target="_blank" rel="noreferrer">Download Full CV</a>
</div>
</div>
<div class="cv-layout">
<div>
<section class="timeline-section section--tight">
<div class="section-badge" data-animate>
<span class="section-badge__icon">
<svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M20 6h-3V4h-2v2H9V4H7v2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 14H4V11h16v9z"/></svg>
</span>
Work Experience
</div>
<div class="timeline">
<article class="timeline__item" data-animate>
<span class="timeline__dot"></span>
<span class="timeline__period">2022 - now</span>
<h2 class="timeline__title">Founder and President</h2>
<p class="timeline__subtitle">Macedonian Student Organisation in Slovenia</p>
<p class="timeline__content">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.</p>
</article>
<article class="timeline__item" data-animate>
<span class="timeline__dot"></span>
<span class="timeline__period">2021 - now</span>
<h2 class="timeline__title">Board Member</h2>
<p class="timeline__subtitle">Leaders for Education, Activism, and Development (LEAD)</p>
<p class="timeline__content">Active board member of a youth-focused NGO working on education, activism, and civic engagement.</p>
</article>
<article class="timeline__item" data-animate>
<span class="timeline__dot"></span>
<span class="timeline__period">2024 - 2025</span>
<h2 class="timeline__title">Intern in Finance and Accounting</h2>
<p class="timeline__subtitle">CVS Mobile d.d. (a Eurowag company)</p>
<p class="timeline__content">Supported finance operations across four subsidiaries, reviewing reports, processing invoice-related data, and contributing to daily operational workflows.</p>
</article>
<article class="timeline__item" data-animate>
<span class="timeline__dot"></span>
<span class="timeline__period">2024</span>
<h2 class="timeline__title">Student Intern</h2>
<p class="timeline__subtitle">Department for Internationalisation and Strategic Partnerships, University of Ljubljana</p>
<p class="timeline__content">Organized webinars for incoming students, prepared data reports, and supported regional university cooperation activities.</p>
</article>
</div>
</section>
<section class="section section--tight">
<div class="section-badge" data-animate>
<span class="section-badge__icon">
<svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M12 3 1 9l11 6 9-4.91V17h2V9L12 3zm0 9.58L5.96 9 12 5.42 18.04 9 12 12.58zM5 12.69V17l7 4 7-4v-4.31l-7 3.82-7-3.82z"/></svg>
</span>
Education
</div>
<div class="list-grid list-grid--two">
<article class="list-card" data-animate>
<span class="list-card__meta">2022 - 2026</span>
<h2 class="list-card__title">University of Ljubljana, School of Economics and Business</h2>
<p class="list-card__text"><strong>MSc in Business and Organisation (IMB)</strong><br>Ranked 44th globally in Financial Times Masters in Management 2025.</p>
<p class="list-card__text"><strong>Bachelor's Degree in Economics and Business</strong><br>Major in Entrepreneurship.</p>
</article>
<article class="list-card" data-animate>
<span class="list-card__meta">2024</span>
<h2 class="list-card__title">Resilient Cities Summer School</h2>
<p class="list-card__text">Slovak University of Technology in Bratislava.</p>
<p class="list-card__text"><strong>2017 - 2021</strong><br>Nikola Karev Skopje, Natural Sciences and Mathematics.</p>
</article>
</div>
</section>
<section class="section section--tight">
<div class="section-badge" data-animate>
<span class="section-badge__icon">
<svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5s-3 1.34-3 3 1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5C15 14.17 10.33 13 8 13zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>
</span>
Leadership and Governance
</div>
<div class="list-grid list-grid--two">
<article class="list-card" data-animate>
<h2 class="list-card__title">Student Ambassador</h2>
<p class="list-card__text">Supported prospective students through one-on-one mentorship and onboarding support at the University of Ljubljana.</p>
</article>
<article class="list-card" data-animate>
<h2 class="list-card__title">Student Senate Member</h2>
<p class="list-card__text">Represented around 5,000 students at faculty level and contributed within university governance structures.</p>
</article>
<article class="list-card" data-animate>
<h2 class="list-card__title">Volunteering</h2>
<p class="list-card__text">Served in the Red Cross Youth Club and twice as President of the high school student council.</p>
</article>
<article class="list-card" data-animate>
<h2 class="list-card__title">Selected Projects</h2>
<p class="list-card__text">22nd International Youth Conference Krushevo and consulting support for ATech Electronics.</p>
</article>
</div>
</section>
<section class="section section--tight">
<div class="quote-panel" data-animate>
<div class="quote-panel__bg">
<img src="../assets/images/portrait-cv.jpg" alt="Portrait background of Kristijan Popovski" width="536" height="745" loading="lazy">
</div>
<div class="quote-panel__content">
<p class="quote-panel__quote">"Building a career in management, leadership, and organizational growth."</p>
</div>
</div>
</section>
</div>
<aside class="cv-sidebar">
<div class="image-frame" data-animate>
<img src="../assets/images/portrait-cv.jpg" alt="Kristijan Popovski portrait for CV page" width="536" height="745">
</div>
<section class="section section--tight">
<article class="skill-card" data-animate>
<span class="mini-label">Skills</span>
<h2 class="card__title">Hard Skills</h2>
<div class="skill-tags">
<span class="skill-tag">Microsoft Office 365</span>
<span class="skill-tag">MS Dynamics NAV</span>
<span class="skill-tag">ChatGPT</span>
<span class="skill-tag">Canva</span>
<span class="skill-tag">Cluster Analysis</span>
<span class="skill-tag">Segmentation</span>
</div>
</article>
</section>
<section class="section section--tight">
<article class="award-card" data-animate>
<span class="mini-label award-card__eyebrow">Recognition</span>
<h2 class="award-card__title">Top Graduate of Generation 2017-2021</h2>
<p class="award-card__text">Recognized by the Mayor of the City of Skopje as the top graduate of High School Gymnasium "Nikola Karev".</p>
</article>
</section>
<section class="section section--tight">
<article class="language-card" data-animate>
<span class="mini-label">Languages</span>
<h2 class="card__title">Language Proficiency</h2>
<div class="language-card__row">
<strong>Macedonian</strong>
<span class="language-card__level">Native</span>
</div>
<div class="language-card__bar"><div class="language-card__fill language-card__fill--100"></div></div>
<div class="language-card__row">
<strong>English</strong>
<span class="language-card__level">B2</span>
</div>
<div class="language-card__bar"><div class="language-card__fill language-card__fill--75"></div></div>
<div class="language-card__row">
<strong>Slovenian</strong>
<span class="language-card__level">B2</span>
</div>
<div class="language-card__bar"><div class="language-card__fill language-card__fill--75"></div></div>
<div class="language-card__row">
<strong>Serbo-Croatian</strong>
<span class="language-card__level">B2</span>
</div>
<div class="language-card__bar"><div class="language-card__fill language-card__fill--75"></div></div>
<div class="language-card__row">
<strong>French</strong>
<span class="language-card__level">A2</span>
</div>
<div class="language-card__bar"><div class="language-card__fill language-card__fill--40"></div></div>
</article>
</section>
</aside>
</div>
</div>
</section>
</main>
<footer class="site-footer site-footer--light">
<div class="site-footer__inner">
<div>
<div class="site-footer__brand">Kristijan Popovski</div>
<p class="site-footer__text">A structured overview of education, leadership, governance, and professional development.</p>
</div>
<div class="site-footer__links">
<a class="site-footer__link" href="../">Home</a>
<a class="site-footer__link" href="../projects/">Projects</a>
<a class="site-footer__link" href="../assets/documents/cv_full.pdf" target="_blank" rel="noreferrer">Full CV</a>
<a class="site-footer__link" href="mailto:popovskik02@yahoo.com">Email</a>
</div>
<div class="site-footer__meta">Readable, structured, and ready for download</div>
</div>
</footer>
</div>
<script src="../js/script.js"></script>
</body>
</html>
designs/CV - Kristijan Popovski - 28.02.2026.pdf
BIN
View File
Binary file not shown.
designs/design-projects/Meet Student Slovenia.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 MiB

designs/design-projects/1774111499144.jfif → designs/design-projects/NLB project INR 2026.jfif
View File
File renamed without changes.
designs/design-projects/123456.jfif → designs/design-projects/Perles-Atech Project 2025.jfif
View File
File renamed without changes.
export_code.ps1
+181
View File
@@ -0,0 +1,181 @@
param(
[string]$OutputFile = "code_export.txt"
)
$ErrorActionPreference = "Stop"
$ScriptDir = Split-Path -Parent $MyInvocation.MyCommand.Path
if ([System.IO.Path]::IsPathRooted($OutputFile)) {
$OutputPath = $OutputFile
}
else {
$OutputPath = Join-Path $ScriptDir $OutputFile
}
$ExcludedDirectories = @("node_modules", "vendor", "dist", "build", "images")
$ExcludedFilePatterns = @(
"code_export*.txt",
"gitea-token*.txt",
"gitea-token*.txt.sig"
)
$ExcludedExtensions = @(
".jpg", ".jpeg", ".png", ".gif", ".bmp", ".tiff", ".svg", ".ico", ".webp",
".mp4", ".mov", ".avi", ".mkv", ".webm",
".mp3", ".wav", ".ogg", ".flac",
".pdf",
".zip", ".tar", ".gz", ".bz2", ".rar", ".7z",
".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx",
".eot", ".ttf", ".woff", ".woff2"
)
function Get-RelativePath {
param(
[string]$BasePath,
[string]$FullPath
)
$baseUri = [System.Uri](([System.IO.Path]::GetFullPath($BasePath)).TrimEnd("\") + "\")
$fullUri = [System.Uri]([System.IO.Path]::GetFullPath($FullPath))
$relativeUri = $baseUri.MakeRelativeUri($fullUri)
return [System.Uri]::UnescapeDataString($relativeUri.ToString()).Replace("/", "\")
}
function Test-IsProbablyBinary {
param(
[string]$Path
)
try {
$stream = [System.IO.File]::OpenRead($Path)
try {
$buffer = New-Object byte[] 4096
$bytesRead = $stream.Read($buffer, 0, $buffer.Length)
}
finally {
$stream.Dispose()
}
}
catch {
return $true
}
if ($bytesRead -ge 2) {
if (
($buffer[0] -eq 0xFF -and $buffer[1] -eq 0xFE) -or
($buffer[0] -eq 0xFE -and $buffer[1] -eq 0xFF)
) {
return $false
}
}
if ($bytesRead -ge 3) {
if ($buffer[0] -eq 0xEF -and $buffer[1] -eq 0xBB -and $buffer[2] -eq 0xBF) {
return $false
}
}
if ($bytesRead -ge 4) {
if (
($buffer[0] -eq 0xFF -and $buffer[1] -eq 0xFE -and $buffer[2] -eq 0x00 -and $buffer[3] -eq 0x00) -or
($buffer[0] -eq 0x00 -and $buffer[1] -eq 0x00 -and $buffer[2] -eq 0xFE -and $buffer[3] -eq 0xFF)
) {
return $false
}
}
for ($index = 0; $index -lt $bytesRead; $index++) {
if ($buffer[$index] -eq 0) {
return $true
}
}
return $false
}
function Test-ShouldSkipFile {
param(
[System.IO.FileInfo]$File
)
$fullPath = [System.IO.Path]::GetFullPath($File.FullName)
if ($fullPath -eq [System.IO.Path]::GetFullPath($OutputPath)) {
return $true
}
$relativePath = Get-RelativePath -BasePath $ScriptDir -FullPath $File.FullName
if ($relativePath -eq "export_code.sh" -or $relativePath -eq "export_code.ps1") {
return $true
}
foreach ($pattern in $ExcludedFilePatterns) {
if ($File.Name -like $pattern) {
return $true
}
}
$segments = $relativePath -split "[\\/]+"
foreach ($segment in $segments) {
if ($segment.StartsWith(".")) {
return $true
}
if ($ExcludedDirectories -contains $segment) {
return $true
}
}
if ($ExcludedExtensions -contains $File.Extension.ToLowerInvariant()) {
return $true
}
return $false
}
if (Test-Path -LiteralPath $OutputPath) {
Remove-Item -LiteralPath $OutputPath -Force
}
$builder = New-Object System.Text.StringBuilder
$files = Get-ChildItem -LiteralPath $ScriptDir -File -Recurse | Sort-Object {
(Get-RelativePath -BasePath $ScriptDir -FullPath $_.FullName).Replace("\", "/")
}
foreach ($file in $files) {
if (Test-ShouldSkipFile -File $file) {
continue
}
if (Test-IsProbablyBinary -Path $file.FullName) {
continue
}
try {
$content = Get-Content -LiteralPath $file.FullName -Raw -ErrorAction Stop
}
catch {
continue
}
$relativePath = (Get-RelativePath -BasePath $ScriptDir -FullPath $file.FullName).Replace("\", "/")
[void]$builder.AppendLine(("`"./{0}`" : " -f $relativePath))
[void]$builder.AppendLine('"""')
[void]$builder.Append($content)
if (-not $content.EndsWith("`n")) {
[void]$builder.AppendLine()
}
[void]$builder.AppendLine('"""')
[void]$builder.AppendLine()
[void]$builder.AppendLine()
}
$utf8NoBom = New-Object System.Text.UTF8Encoding $false
[System.IO.File]::WriteAllText($OutputPath, $builder.ToString(), $utf8NoBom)
Write-Host ("Code export finished. Output saved to {0}" -f $OutputPath)
export_code.sh
+66 -37
View File
@@ -1,23 +1,59 @@
#!/bin/bash
#!/usr/bin/env bash
# Nastavitev imena izhodne datoteke
OUTPUT_FILE="code_export.txt"
set -euo pipefail
# Odstrani izhodno datoteko, če že obstaja, da začnemo s čisto datoteko
if [ -f "$OUTPUT_FILE" ]; then
rm "$OUTPUT_FILE"
SCRIPT_DIR="$(cd -- "$(dirname -- "${BASH_SOURCE[0]}")" && pwd)"
run_powershell_export() {
local ps_script="$SCRIPT_DIR/export_code.ps1"
if command -v pwsh >/dev/null 2>&1; then
pwsh -NoLogo -NoProfile -ExecutionPolicy Bypass -File "$ps_script" "$@"
return
fi
if command -v powershell.exe >/dev/null 2>&1; then
if command -v cygpath >/dev/null 2>&1; then
powershell.exe -NoLogo -NoProfile -ExecutionPolicy Bypass -File "$(cygpath -w "$ps_script")" "$@"
else
powershell.exe -NoLogo -NoProfile -ExecutionPolicy Bypass -File "$ps_script" "$@"
fi
return
fi
echo "PowerShell was not found. Run export_code.ps1 manually." >&2
exit 1
}
case "$(uname -s 2>/dev/null || printf '')" in
CYGWIN*|MINGW*|MSYS*)
run_powershell_export "$@"
exit 0
;;
esac
if [[ "${OS:-}" == "Windows_NT" ]]; then
run_powershell_export "$@"
exit 0
fi
# Poišči vse datoteke, razen skritih datotek in določenih map (npr. node_modules).
# Dodane so izjeme za slike, videoposnetke, PDF-je, arhive in druge binarne datoteke
# neposredno v ukaz 'find' za boljšo zmogljivost.
find . -type f \
OUTPUT_FILE="${1:-code_export.txt}"
OUTPUT_PATH="$SCRIPT_DIR/$OUTPUT_FILE"
rm -f "$OUTPUT_PATH"
find "$SCRIPT_DIR" -type f \
-not -path "*/\.*" \
-not -path "*node_modules*" \
-not -path "*vendor*" \
-not -path "*dist*" \
-not -path "*build*" \
-not -path "*/node_modules/*" \
-not -path "*/vendor/*" \
-not -path "*/dist/*" \
-not -path "*/build/*" \
-not -path "*/images/*" \
-not -name "code_export*.txt" \
-not -name "gitea-token*.txt" \
-not -name "gitea-token*.txt.sig" \
-not -name "export_code.sh" \
-not -name "export_code.ps1" \
-not -iname "*.jpg" -not -iname "*.jpeg" \
-not -iname "*.png" -not -iname "*.gif" \
-not -iname "*.bmp" -not -iname "*.tiff" \
@@ -29,36 +65,29 @@ find . -type f \
-not -iname "*.mp3" -not -iname "*.wav" \
-not -iname "*.ogg" -not -iname "*.flac" \
-not -iname "*.pdf" \
-not -iname "*.zip" \
-not -iname "*.tar" \
-not -iname "*.gz" \
-not -iname "*.bz2" \
-not -iname "*.rar" \
-not -iname "*.7z" \
-not -iname "*.zip" -not -iname "*.tar" \
-not -iname "*.gz" -not -iname "*.bz2" \
-not -iname "*.rar" -not -iname "*.7z" \
-not -iname "*.doc" -not -iname "*.docx" \
-not -iname "*.xls" -not -iname "*.xlsx" \
-not -iname "*.ppt" -not -iname "*.pptx" \
-not -iname "*.eot" -not -iname "*.ttf" \
-not -iname "*.woff" -not -iname "*.woff2" \
| sort | while read -r file; do
# Preskoči samo izhodno datoteko in to skripto
if [[ "$file" == "./$OUTPUT_FILE" || "$file" == "./export_code.sh" ]]; then
| sort | while IFS= read -r file; do
rel_path="./${file#"$SCRIPT_DIR"/}"
if file --mime-type -b "$file" | grep -qiE '^(image|video|audio|application/octet-stream)'; then
continue
fi
# Dodatna varnostna preverba: preskoči slikovne datoteke po MIME tipu
if file --mime-type -b "$file" | grep -qiE '^(image)/'; then
continue
printf '"%s" : \n' "$rel_path" >> "$OUTPUT_PATH"
printf '"""\n' >> "$OUTPUT_PATH"
cat "$file" >> "$OUTPUT_PATH"
if [[ -n "$(tail -c 1 "$file" 2>/dev/null || true)" ]]; then
printf '\n' >> "$OUTPUT_PATH"
fi
# Dodaj ime datoteke in njeno vsebino v izhodno datoteko
echo "\"$file\" : " >> "$OUTPUT_FILE"
echo "\"\"\"" >> "$OUTPUT_FILE"
cat "$file" >> "$OUTPUT_FILE"
echo "\"\"\"" >> "$OUTPUT_FILE"
echo "" >> "$OUTPUT_FILE"
echo "" >> "$OUTPUT_FILE"
printf '"""\n\n\n' >> "$OUTPUT_PATH"
done
echo "Izvoz kode končan. Vsebina je shranjena v datoteko $OUTPUT_FILE"
echo "Code export finished. Output saved to $OUTPUT_PATH"
index.html
+13 -14
View File
@@ -5,7 +5,6 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Kristijan Popovski | Structured Leadership and Strategic Execution</title>
<meta name="description" content="Personal website of Kristijan Popovski, focused on governance, finance, project leadership, and institutional execution.">
<!-- Test deployment pipeline -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Manrope:wght@600;700;800&display=swap" rel="stylesheet">
@@ -42,7 +41,7 @@
</header>
<main class="page-main">
<section class="section section--tight">
<section class="section section--tight"><!-- -->
<div class="container">
<div class="hero hero--home">
<div data-animate>
@@ -183,7 +182,7 @@
</div>
<h3 class="focus-card__title">Project Leadership &amp; Execution</h3>
<p class="card__text">Turning ideas into structured delivery, whether the setting is a conference, a governance process, or a cross-functional organizational initiative.</p>
<div class="tag-row tag-row--desktop-center">
<div class="tag-row">
<span class="tag">Impact Driven</span>
<span class="tag">Operational Rigor</span>
<span class="tag">Europe-wide Experience</span>
@@ -205,13 +204,13 @@
<div class="project-preview-grid">
<article class="project-card" data-animate>
<div class="project-card__media">
<img src="assets/images/project-nlb-inr.jfif" alt="IMB team presenting an Individual Investment Accounts strategy project for NLB" width="576" height="768" loading="lazy">
<span class="project-card__tag">Consulting</span>
<img src="assets/images/project-governance.jpg" alt="Conference venue prepared for an international governance summit" width="1440" height="900" loading="lazy">
<span class="project-card__tag">Institutional</span>
</div>
<div class="project-card__body">
<span class="project-card__meta">IMB x NLB Slovenia</span>
<h3 class="project-card__title">Individual Investment Accounts Strategy</h3>
<p class="project-card__text">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.</p>
<span class="project-card__meta">International collaboration</span>
<h3 class="project-card__title">International Governance Summit</h3>
<p class="project-card__text">Coordinated a multi-national dialogue on digital infrastructure and stakeholder alignment across delegations.</p>
<a class="text-link" href="projects.html">
View project details
<svg class="text-link__icon" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M5 12h11.17l-4.58 4.59L13 18l7-7-7-7-1.41 1.41L16.17 10H5z"/></svg>
@@ -221,13 +220,13 @@
<article class="project-card" data-animate>
<div class="project-card__media">
<img src="assets/images/project-perles-atech.jfif" alt="Student consulting workshop with Perles and ATech Electronics" width="1024" height="768" loading="lazy">
<img src="assets/images/project-consulting.jpg" alt="Business analysis taking place on a tablet" width="1440" height="900" loading="lazy">
<span class="project-card__tag">Consulting</span>
</div>
<div class="project-card__body">
<span class="project-card__meta">Perles / ATech Electronics</span>
<h3 class="project-card__title">Business Model &amp; Marketing Strategy</h3>
<p class="project-card__text">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.</p>
<span class="project-card__meta">Consulting and innovation</span>
<h3 class="project-card__title">Strategic Business Model Pivot</h3>
<p class="project-card__text">Redesigned a logistics workflow toward a more automated and cloud-first operational model.</p>
<a class="text-link" href="projects.html">
Explore all projects
<svg class="text-link__icon" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M5 12h11.17l-4.58 4.59L13 18l7-7-7-7-1.41 1.41L16.17 10H5z"/></svg>
@@ -272,7 +271,7 @@
<p class="cta-banner__text">Whether it is a strategic partnership, a governance initiative, or a project that needs measured leadership, the next step can start here.</p>
<div class="cta-banner__actions">
<a class="button button--secondary" href="mailto:popovskik02@yahoo.com">Email</a>
<a class="button button--secondary" href="https://www.linkedin.com/in/popovski-k/" target="_blank" rel="noreferrer">LinkedIn</a>
<a class="button button--secondary" href="https://si.linkedin.com/in/kristijan-popovski-688905232" target="_blank" rel="noreferrer">LinkedIn</a>
</div>
</div>
</div>
@@ -290,7 +289,7 @@
<a class="site-footer__link" href="projects.html">Projects</a>
<a class="site-footer__link" href="cv.html">Download CV</a>
<a class="site-footer__link" href="mailto:popovskik02@yahoo.com">Email</a>
<a class="site-footer__link" href="https://www.linkedin.com/in/popovski-k/" target="_blank" rel="noreferrer">LinkedIn</a>
<a class="site-footer__link" href="https://si.linkedin.com/in/kristijan-popovski-688905232" target="_blank" rel="noreferrer">LinkedIn</a>
</div>
<div class="site-footer__meta">Governance - Finance - Execution</div>
</div>
js/script.js
+78 -40
View File
@@ -1,7 +1,6 @@
document.addEventListener("DOMContentLoaded", () => {
setupMobileNavigation();
setupScrollAnimations();
setupProjectFiltering();
setupContactForm();
setupSmoothScrollClose();
});
@@ -64,7 +63,14 @@ function setupSmoothScrollClose() {
}
event.preventDefault();
target.scrollIntoView({ behavior: "smooth", block: "start" });
const stickyHeader = document.querySelector(".site-header");
const headerOffset = stickyHeader ? stickyHeader.offsetHeight + 16 : 16;
const targetTop = target.getBoundingClientRect().top + window.scrollY - headerOffset;
window.scrollTo({
top: Math.max(targetTop, 0),
behavior: "smooth"
});
});
});
}
@@ -101,32 +107,6 @@ function setupScrollAnimations() {
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]");
@@ -136,11 +116,37 @@ function setupContactForm() {
const fields = Array.from(form.querySelectorAll("[data-required], [type='email']"));
const status = form.querySelector("[data-form-status]");
const submitButton = form.querySelector("button[type='submit']");
const action = (form.getAttribute("action") || "").trim();
const hasExternalEndpoint = /^https?:\/\//i.test(action);
const hasPlaceholderEndpoint = action.includes("YOUR_ID_HERE");
const method = (form.getAttribute("method") || "post").toUpperCase();
const buttonText = submitButton ? submitButton.textContent : "";
const validators = {
email: (value) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)
};
const setStatus = (message, state = "") => {
if (!status) {
return;
}
status.textContent = message;
status.classList.toggle("is-success", state === "success");
status.classList.toggle("is-error", state === "error");
};
const setSubmitting = (isSubmitting) => {
if (!submitButton) {
return;
}
submitButton.disabled = isSubmitting;
submitButton.setAttribute("aria-busy", String(isSubmitting));
submitButton.textContent = isSubmitting ? "Sending..." : buttonText;
};
const setFieldError = (field, message) => {
const wrapper = field.closest(".form-field");
const error = wrapper ? wrapper.querySelector(".form-field__error") : null;
@@ -194,11 +200,7 @@ function setupContactForm() {
if (!isValid) {
event.preventDefault();
if (status) {
status.textContent = "Please review the highlighted fields and try again.";
status.classList.remove("is-success");
}
setStatus("Please review the highlighted fields and try again.", "error");
const firstInvalid = form.querySelector("[aria-invalid='true']");
@@ -209,14 +211,50 @@ function setupContactForm() {
return;
}
event.preventDefault();
if (status) {
status.textContent = "Thanks. Your message structure is validated and ready for backend integration.";
status.classList.add("is-success");
if (!hasExternalEndpoint || hasPlaceholderEndpoint) {
event.preventDefault();
setStatus("Contact form is currently unavailable. Please try again shortly.", "error");
return;
}
form.reset();
fields.forEach((field) => setFieldError(field, ""));
event.preventDefault();
setSubmitting(true);
setStatus("Sending your message...");
fetch(action, {
method,
headers: {
Accept: "application/json"
},
body: new FormData(form)
})
.then(async (response) => {
if (response.ok) {
form.reset();
fields.forEach((field) => setFieldError(field, ""));
setStatus("Thank you. Your contact request was sent and noted.", "success");
return;
}
let errorMessage = "Sorry, your message could not be sent. Please try again shortly.";
try {
const payload = await response.json();
if (payload && Array.isArray(payload.errors) && payload.errors.length > 0) {
errorMessage = payload.errors.map((item) => item.message).join(" ");
}
} catch (parseError) {
// Keep fallback message when response body is not JSON.
}
throw new Error(errorMessage);
})
.catch((error) => {
setStatus(error.message, "error");
})
.finally(() => {
setSubmitting(false);
});
});
}
linkinbio.html
+14
View File
@@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Redirecting | Kristijan Popovski</title>
<meta name="robots" content="noindex">
<link rel="canonical" href="linkinbio/">
<script>window.location.replace("linkinbio/");</script>
</head>
<body>
<p>Redirecting to <a href="linkinbio/">linkinbio/</a>...</p>
</body>
</html>
linkinbio/index.html
+83
View File
@@ -0,0 +1,83 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Links | Kristijan Popovski</title>
<meta name="description" content="Do something. Dare to grow! 🚀">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Manrope:wght@600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../css/style.css">
<script>document.documentElement.classList.add('js-enabled');</script>
</head>
<body class="linkbio-body">
<main class="linkbio-wrapper">
<div class="linkbio-container" data-animate>
<header class="linkbio-header">
<div class="linkbio-avatar">
<img src="../assets/images/kristijan.jpeg" alt="Kristijan Popovski" width="120" height="120">
</div>
<h1 class="linkbio-name">Kristijan Popovski</h1>
<p class="linkbio-tagline">Do something. Dare to grow! 🚀 @popovski.k</p>
</header>
<div class="linkbio-social-icons">
<a href="mailto:popovskik2@gmail.com" aria-label="Email">
<svg viewBox="0 0 24 24"><path fill="currentColor" d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z"/></svg>
</a>
<a href="https://www.linkedin.com/in/popovski-k/" target="_blank" rel="noreferrer" aria-label="LinkedIn">
<svg viewBox="0 0 24 24"><path fill="currentColor" d="M19 3A2 2 0 0 1 21 5v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zm-8.34 14.34V10.5H8.38v6.84zM9.52 9.56a1.33 1.33 0 1 0 0-2.66 1.33 1.33 0 0 0 0 2.66zm8.16 7.78v-3.73c0-2-1.08-2.93-2.51-2.93-1.16 0-1.68.64-1.97 1.08V10.5H10.9c.03.84 0 6.84 0 6.84h2.3v-3.82c0-.2.01-.4.07-.54.16-.4.52-.82 1.14-.82.8 0 1.12.62 1.12 1.53v3.65z"/></svg>
</a>
<a href="https://www.instagram.com/popovski.k" target="_blank" rel="noreferrer" aria-label="Instagram">
<svg viewBox="0 0 24 24"><path fill="currentColor" d="M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2zm-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4H7.6zm9.65 1.5a1.25 1.25 0 0 1 1.25 1.25A1.25 1.25 0 0 1 17.25 8 1.25 1.25 0 0 1 16 6.75a1.25 1.25 0 0 1 1.25-1.25zM12 7a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5zm0 2a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3z"/></svg>
</a>
<a href="https://www.facebook.com/popovski.k" target="_blank" rel="noreferrer" aria-label="Facebook">
<svg viewBox="0 0 24 24"><path fill="currentColor" d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8V15H8v-3h2V9.5C10 7.57 11.57 6 13.5 6H16v3h-2c-.55 0-1 .45-1 1v2h3v3h-3v6.95c5.05-.5 9-4.76 9-9.95z"/></svg>
</a>
</div>
<div class="linkbio-links">
<a href="https://bio.site/msos_org" target="_blank" rel="noreferrer" class="linkbio-btn">
<div class="linkbio-btn-icon">
<img src="../assets/images/msos_ikona.jpeg" alt="MSOS icon" width="44" height="44">
</div>
<span class="linkbio-btn-text">MSOS 🎈👋</span>
<div class="linkbio-btn-icon-right"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M12 4v2h4.59L7.76 14.83l1.41 1.41L18 7.41V12h2V4z"/></svg></div>
</a>
<div class="linkbio-divider">~~ Social media ~~</div>
<a href="https://www.linkedin.com/in/popovski-k/" target="_blank" rel="noreferrer" class="linkbio-btn">
<div class="linkbio-btn-icon">
<svg viewBox="0 0 24 24"><path fill="currentColor" d="M19 3A2 2 0 0 1 21 5v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zm-8.34 14.34V10.5H8.38v6.84zM9.52 9.56a1.33 1.33 0 1 0 0-2.66 1.33 1.33 0 0 0 0 2.66zm8.16 7.78v-3.73c0-2-1.08-2.93-2.51-2.93-1.16 0-1.68.64-1.97 1.08V10.5H10.9c.03.84 0 6.84 0 6.84h2.3v-3.82c0-.2.01-.4.07-.54.16-.4.52-.82 1.14-.82.8 0 1.12.62 1.12 1.53v3.65z"/></svg>
</div>
<span class="linkbio-btn-text">LinkedIn</span>
<div class="linkbio-btn-icon-right"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M12 4v2h4.59L7.76 14.83l1.41 1.41L18 7.41V12h2V4z"/></svg></div>
</a>
<a href="https://www.instagram.com/popovski.k" target="_blank" rel="noreferrer" class="linkbio-btn">
<div class="linkbio-btn-icon">
<svg viewBox="0 0 24 24"><path fill="currentColor" d="M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2zm-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4H7.6zm9.65 1.5a1.25 1.25 0 0 1 1.25 1.25A1.25 1.25 0 0 1 17.25 8 1.25 1.25 0 0 1 16 6.75a1.25 1.25 0 0 1 1.25-1.25zM12 7a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5zm0 2a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3z"/></svg>
</div>
<span class="linkbio-btn-text">Instagram</span>
<div class="linkbio-btn-icon-right"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M12 4v2h4.59L7.76 14.83l1.41 1.41L18 7.41V12h2V4z"/></svg></div>
</a>
<a href="https://www.facebook.com/popovski.k" target="_blank" rel="noreferrer" class="linkbio-btn">
<div class="linkbio-btn-icon">
<svg viewBox="0 0 24 24"><path fill="currentColor" d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8V15H8v-3h2V9.5C10 7.57 11.57 6 13.5 6H16v3h-2c-.55 0-1 .45-1 1v2h3v3h-3v6.95c5.05-.5 9-4.76 9-9.95z"/></svg>
</div>
<span class="linkbio-btn-text">Facebook</span>
<div class="linkbio-btn-icon-right"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M12 4v2h4.59L7.76 14.83l1.41 1.41L18 7.41V12h2V4z"/></svg></div>
</a>
</div>
<div class="linkbio-footer">
<a href="../" class="button button--secondary button--small">Kristijan Popovski Website</a>
</div>
</div>
</main>
<script src="../js/script.js"></script>
</body>
</html>
projects.html
+16
View File
@@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Redirecting to Projects | Kristijan Popovski</title>
<meta name="description" content="Redirecting to the projects page for Kristijan Popovski.">
<meta name="robots" content="noindex">
<link rel="canonical" href="projects/">
<script>window.location.replace("projects/");</script>
<noscript><meta http-equiv="refresh" content="0; url=projects/"></noscript>
</head>
<body>
<p>Redirecting to <a href="projects/">projects/</a>...</p>
</body>
</html>
projects/index.html
+307 -114
View File
@@ -3,28 +3,29 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Projects | Kristijan Popovski</title>
<title>Projects &amp; Initiatives | Kristijan Popovski</title>
<meta name="description" content="Selected projects by Kristijan Popovski across institutional collaboration, consulting, innovation, and youth leadership.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Manrope:wght@600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="../css/style.css">
<script>document.documentElement.classList.add('js-enabled');</script>
</head>
<body>
<div class="site-shell">
<header class="site-header">
<div class="site-header__inner">
<a class="brand" href="index.html">Kristijan Popovski</a>
<a class="brand" href="../">Kristijan Popovski</a>
<nav class="site-nav" aria-label="Primary">
<ul class="site-nav__list">
<li><a class="site-nav__link" href="index.html">Home</a></li>
<li><a class="site-nav__link is-current" href="projects.html">Projects</a></li>
<li><a class="site-nav__link" href="cv.html">CV</a></li>
<li><a class="site-nav__link" href="contact.html">Contact</a></li>
<li><a class="site-nav__link" href="../">Home</a></li>
<li><a class="site-nav__link is-current" href="./">Projects</a></li>
<li><a class="site-nav__link" href="../cv/">CV</a></li>
<li><a class="site-nav__link" href="../contact/">Contact</a></li>
</ul>
</nav>
<div class="site-header__actions">
<a class="button button--primary button--small" href="contact.html">Get in Touch</a>
<a class="button button--primary button--small" href="../contact/">Get in Touch</a>
<button class="menu-toggle" type="button" aria-label="Open menu" aria-expanded="false" data-menu-toggle>
<span class="menu-toggle__line"></span>
</button>
@@ -32,131 +33,323 @@
</div>
<nav class="mobile-nav" aria-label="Mobile" data-mobile-nav>
<ul class="mobile-nav__list">
<li><a class="mobile-nav__link" href="index.html">Home</a></li>
<li><a class="mobile-nav__link is-current" href="projects.html">Projects</a></li>
<li><a class="mobile-nav__link" href="cv.html">CV</a></li>
<li><a class="mobile-nav__link" href="contact.html">Contact</a></li>
<li><a class="mobile-nav__link" href="../">Home</a></li>
<li><a class="mobile-nav__link is-current" href="./">Projects</a></li>
<li><a class="mobile-nav__link" href="../cv/">CV</a></li>
<li><a class="mobile-nav__link" href="../contact/">Contact</a></li>
</ul>
</nav>
</header>
<main class="page-main">
<section class="section section--tight">
<main class="page-main projects-page">
<section class="section section--tight projects-intro-section">
<div class="container">
<div class="page-hero">
<div data-animate>
<div class="eyebrow">Selected Work</div>
<h1 class="page-title">Architecting <strong>institutional excellence.</strong></h1>
<p class="page-lede">A portfolio of strategic interventions, institutional collaboration, and practical leadership across governance, consulting, and innovation environments.</p>
</div>
</div>
<header class="projects-hero" data-animate>
<div class="eyebrow">Projects</div>
<h1 class="page-title projects-hero__title">Projects &amp; Initiatives</h1>
<p class="projects-hero__lede">This page brings together selected projects, leadership roles, and initiatives that have shaped my development across education, community work, governance, and institutional collaboration.</p>
</header>
</div>
</section>
<div class="filter-bar" data-animate>
<button class="filter-chip is-active" type="button" data-filter="all" aria-pressed="true">All</button>
<button class="filter-chip" type="button" data-filter="institutional" aria-pressed="false">Institutional</button>
<button class="filter-chip" type="button" data-filter="consulting" aria-pressed="false">Consulting</button>
<button class="filter-chip" type="button" data-filter="innovation" aria-pressed="false">Innovation</button>
<button class="filter-chip" type="button" data-filter="moderation" aria-pressed="false">Moderation</button>
</div>
<section class="section section--tight projects-featured-section">
<div class="container">
<header class="projects-section-heading" data-animate>
<h2 class="section-title">Featured Projects</h2>
<p class="section-intro">A selection of the projects that best represent my current direction and strongest work.</p>
</header>
<div class="project-grid">
<article class="card project-card" data-category="consulting" data-animate>
<div class="project-card__media">
<img src="assets/images/project-nlb-inr.jfif" alt="Presentation of an Individual Investment Accounts strategy project for NLB at the IMB programme" width="576" height="768">
<span class="project-card__tag">Consulting</span>
<div class="projects-featured-grid">
<a class="projects-featured-card" href="#project-accreditation" data-animate>
<div class="projects-featured-card__media">
<img src="../assets/images/project-governance.jpg" alt="University governance and accreditation context" width="1600" height="900" loading="lazy">
</div>
<div class="project-card__body">
<span class="project-card__meta">IMB x NLB Slovenia</span>
<h2 class="project-card__title">NLB Individual Investment Accounts Strategy</h2>
<p class="project-card__text">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.</p>
<div class="project-card__outcome">
<span class="icon-circle">
<svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M4 19h16v2H4zm2-4h3v3H6zm5-6h3v9h-3zm5-4h3v13h-3z"/></svg>
</span>
<div>
<p class="project-card__outcome-title">Key Outcome</p>
<p class="project-card__outcome-text">Delivered an actionable strategy framework for positioning INR with clear target segments, customer insights, messaging priorities, and launch-path recommendations.</p>
</div>
<div class="projects-featured-card__body">
<div class="projects-meta">
<span class="projects-date">2023 - 2024</span>
<span class="projects-tag">Governance</span>
</div>
<h3 class="projects-featured-card__title">Institutional Evaluation &amp; Accreditation Representation</h3>
<p class="projects-featured-card__summary">Represented the student body in FINEEC, EQUIS, and BSIS processes at the School of Economics and Business, University of Ljubljana.</p>
<span class="projects-featured-card__cta">Jump to timeline entry</span>
</div>
</article>
</a>
<article class="card project-card" data-category="consulting" data-animate>
<div class="project-card__media">
<img src="assets/images/project-perles-atech.jfif" alt="Student consulting team in discussion with Perles and ATech Electronics" width="1024" height="768">
<span class="project-card__tag">Consulting</span>
<a class="projects-featured-card" href="#project-meet-student-slovenia" data-animate>
<div class="projects-featured-card__media">
<img src="../assets/images/project-nlb-inr.jfif" alt="Student-focused panel and presentation setting" width="576" height="768" loading="lazy">
</div>
<div class="project-card__body">
<span class="project-card__meta">Student Intern Consultant • Feb 2025 - Jun 2025</span>
<h2 class="project-card__title">Perles / ATech Business Model &amp; Marketing Strategy</h2>
<p class="project-card__text">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.</p>
<div class="project-card__outcome">
<span class="icon-circle">
<svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="m16 6 2.29 2.29-4.88 4.88-4-4L2 16.59 3.41 18l6-6 4 4L19.71 9.7 22 12V6z"/></svg>
</span>
<div>
<p class="project-card__outcome-title">Key Outcome</p>
<p class="project-card__outcome-text">Co-created and presented recommendations covering refurbished products, a digital community concept, and brand-level strategic directions for management and academic mentors.</p>
</div>
<div class="projects-featured-card__body">
<div class="projects-meta">
<span class="projects-date">2022 - 2024</span>
<span class="projects-tag">Institutional Collaboration</span>
</div>
<h3 class="projects-featured-card__title">Meet Student Slovenia</h3>
<p class="projects-featured-card__summary">Co-organized a multi-year event series with NLB Bank and institutional stakeholders for prospective students from North Macedonia.</p>
<span class="projects-featured-card__cta">Jump to timeline entry</span>
</div>
</article>
</a>
<article class="card project-card" data-category="innovation" data-animate>
<div class="project-card__media">
<img src="assets/images/project-greenie.jpg" alt="Interior green wall and glass architecture in a sustainable building" width="1440" height="900" loading="lazy">
<span class="project-card__tag">Innovation</span>
<a class="projects-featured-card" href="#project-krushevo-22" data-animate>
<div class="projects-featured-card__media">
<img src="../assets/images/project-youth.jpg" alt="Youth conference moderation and panel discussion setting" width="1440" height="900" loading="lazy">
</div>
<div class="project-card__body">
<span class="project-card__meta">Circular Economy</span>
<h2 class="project-card__title">The Greenie Concept</h2>
<p class="project-card__text">Developed a circular economy framework for urban workspaces, focused on shared energy thinking, sustainability, and long-term viability.</p>
<div class="project-card__outcome">
<span class="icon-circle">
<svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm1 17.93V18h-2v1.93c-3.95-.49-7-3.85-7-7.93 0-4.42 3.58-8 8-8s8 3.58 8 8c0 4.08-3.05 7.44-7 7.93z"/></svg>
</span>
<div>
<p class="project-card__outcome-title">Key Outcome</p>
<p class="project-card__outcome-text">Positioned the concept as a scalable sustainability-oriented model with strong regional relevance.</p>
</div>
<div class="projects-featured-card__body">
<div class="projects-meta">
<span class="projects-date">Apr 2024 - Sep 2024</span>
<span class="projects-tag">Conference Moderation</span>
</div>
<h3 class="projects-featured-card__title">22nd International Youth Conference Krushevo</h3>
<p class="projects-featured-card__summary">Supported conference preparation and moderated Real Talk dialogue on youth economic empowerment pathways.</p>
<span class="projects-featured-card__cta">Jump to timeline entry</span>
</div>
</article>
<article class="card project-card" data-category="moderation institutional" data-animate>
<div class="project-card__media">
<img src="assets/images/project-youth.jpg" alt="Moderator speaking to a youth audience at a leadership event" width="1440" height="900" loading="lazy">
<span class="project-card__tag">Moderation</span>
</div>
<div class="project-card__body">
<span class="project-card__meta">Youth Leadership</span>
<h2 class="project-card__title">Global Youth Leadership Summit</h2>
<p class="project-card__text">Led moderation for a high-stakes youth summit, facilitating dialogue between participants, institutions, and external partners.</p>
<div class="project-card__outcome">
<span class="icon-circle">
<svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5s-3 1.34-3 3 1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5C15 14.17 10.33 13 8 13zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>
</span>
<div>
<p class="project-card__outcome-title">Key Outcome</p>
<p class="project-card__outcome-text">Created a credible forum for structured discussion, public visibility, and youth-facing institutional engagement.</p>
</div>
</div>
</div>
</article>
</a>
</div>
</div>
</section>
<section class="section">
<section class="section section--tight projects-timeline-section">
<div class="container">
<div class="cta-banner" data-animate>
<div class="cta-banner__content">
<h2 class="cta-banner__title">Ready to collaborate?</h2>
<p class="cta-banner__text">Open to conversations around institutional advisory work, project leadership, and structured collaboration.</p>
<div class="cta-banner__actions">
<a class="button button--secondary" href="contact.html">Request Collaboration</a>
<a class="button button--secondary" href="cv.html">View Full CV</a>
<div class="projects-timeline-chapters">
<section class="projects-chapter" data-animate>
<header class="projects-chapter__header">
<h2 class="projects-chapter__title">University &amp; Professional Chapter</h2>
<span class="projects-chapter__range">2022 - Present</span>
</header>
<div class="projects-timeline">
<article class="projects-entry projects-entry--split" id="project-nlb-inr" data-animate>
<span class="projects-entry__dot" aria-hidden="true"></span>
<div class="projects-entry__media">
<img src="../designs/design-projects/NLB%20project%20INR%202026.jfif" alt="NLB Individual Investment Accounts project presentation context" width="1200" height="900" loading="lazy">
</div>
<div class="projects-entry__content">
<div class="projects-meta">
<span class="projects-date">2026</span>
<span class="projects-tag">Strategy &amp; Consulting</span>
</div>
<h3 class="projects-entry__title">NLB Individual Investment Accounts Strategy</h3>
<p class="projects-entry__text">IMB x NLB Slovenia. 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.</p>
<p class="projects-entry__impact"><strong>Key outcome:</strong> Delivered an actionable strategy framework for positioning INR with clear target segments, customer insights, messaging priorities, and launch-path recommendations.</p>
</div>
</article>
<article class="projects-entry projects-entry--split projects-entry--offset" id="project-perles-atech" data-animate>
<span class="projects-entry__dot" aria-hidden="true"></span>
<div class="projects-entry__media">
<img src="../designs/design-projects/Perles-Atech%20Project%202025.jfif" alt="Perles and ATech project consulting team context" width="1200" height="900" loading="lazy">
</div>
<div class="projects-entry__content">
<div class="projects-meta">
<span class="projects-date">Feb 2025 - Jun 2025</span>
<span class="projects-tag">Student Consulting</span>
</div>
<h3 class="projects-entry__title">Perles / ATech Business Model &amp; Marketing Strategy</h3>
<p class="projects-entry__text">Student Intern Consultant. 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.</p>
<p class="projects-entry__impact"><strong>Key outcome:</strong> Co-created and presented recommendations covering refurbished products, a digital community concept, and brand-level strategic directions for management and academic mentors.</p>
</div>
</article>
<article class="projects-entry projects-entry--split" id="project-accreditation" data-animate>
<span class="projects-entry__dot" aria-hidden="true"></span>
<div class="projects-entry__media">
<img src="../assets/images/project-governance.jpg" alt="Institutional evaluation and accreditation context" width="1600" height="900" loading="lazy">
</div>
<div class="projects-entry__content">
<div class="projects-meta">
<span class="projects-date">2023 - 2024</span>
<span class="projects-tag">Governance &amp; Institutional Impact</span>
</div>
<h3 class="projects-entry__title">Institutional Evaluation &amp; Accreditation Representation</h3>
<p class="projects-entry__text">School of Economics and Business, University of Ljubljana. Represented the student body in international evaluation and accreditation processes (FINEEC, EQUIS, BSIS), contributing student perspectives in official discussions with external evaluators on academic quality, institutional development, and student experience.</p>
<p class="projects-entry__impact"><strong>Impact:</strong> Shared insights on faculty impact across education, internationalization, and community engagement, supporting successful accreditation outcomes and renewal of key international quality labels.</p>
</div>
</article>
<article class="projects-entry" id="project-meet-student-slovenia" data-animate>
<span class="projects-entry__dot" aria-hidden="true"></span>
<div class="projects-entry__content">
<div class="projects-meta">
<span class="projects-date">2022 - 2024</span>
<span class="projects-tag">Event / Institutional Collaboration</span>
</div>
<h3 class="projects-entry__title">Meet Student Slovenia</h3>
<p class="projects-entry__text">Co-organized a multi-year event series in partnership with NLB Bank and institutional stakeholders to prepare prospective students from North Macedonia for studying in Slovenia through panel discussions and open Q&amp;A sessions.</p>
<p class="projects-entry__impact"><strong>Impact:</strong> Supported planning, speaker coordination, and execution across three consecutive editions, reaching 200+ attendees per event and providing practical guidance on academic, administrative, and lifestyle aspects of studying abroad.</p>
</div>
</article>
<article class="projects-entry projects-entry--split projects-entry--offset" id="project-krushevo-22" data-animate>
<span class="projects-entry__dot" aria-hidden="true"></span>
<div class="projects-entry__media">
<img src="../assets/images/project-youth.jpg" alt="International youth conference moderation context" width="1440" height="900" loading="lazy">
</div>
<div class="projects-entry__content">
<div class="projects-meta">
<span class="projects-date">Apr 2024 - Sep 2024</span>
<span class="projects-tag">Conference Moderation</span>
</div>
<h3 class="projects-entry__title">International Preparatory Group Member &amp; Real Talk Moderator - 22nd International Youth Conference Krushevo</h3>
<p class="projects-entry__text">Associated with Macedonian Student Organization in Slovenia. As part of the International Preparatory Group, collaborated with the alumni network to shape the conference agenda, select panelists, and promote the event under the theme "European Values for the Future of SEE Countries."</p>
<p class="projects-entry__impact"><strong>Impact:</strong> Moderated the session "DigiPath for Youth Possibilities: Exploring Economic Empowerment Pathways," facilitating dialogue between youth participants and distinguished experts.</p>
</div>
</article>
<article class="projects-entry" id="project-conference-synergy" data-animate>
<span class="projects-entry__dot" aria-hidden="true"></span>
<div class="projects-entry__content">
<div class="projects-meta">
<span class="projects-date">Jul 2024 - Sep 2024</span>
<span class="projects-tag">Conference</span>
</div>
<h3 class="projects-entry__title">Conference: From Slovenia to North Macedonia - Synergy of Education and Business</h3>
<p class="projects-entry__text">Associated with Macedonian Student Organization in Slovenia. Co-organized the conference held on September 25, 2024, with the Embassy of the Republic of Slovenia in Skopje and the Association of Slovenian and Macedonian Businessmen, convening youth, government officials, and business leaders.</p>
<p class="projects-entry__impact"><strong>Impact:</strong> Integrated insights from 50 young professionals across Slovenia, the Netherlands, Norway, the USA, and the UK to present practical recommendations connecting education and business, with a focus on return pathways and professional integration in North Macedonia.</p>
</div>
</article>
<article class="projects-entry" id="project-student-ambassador" data-animate>
<span class="projects-entry__dot" aria-hidden="true"></span>
<div class="projects-entry__content">
<div class="projects-meta">
<span class="projects-date">2023 - Present</span>
<span class="projects-tag">Student Engagement &amp; International Support</span>
</div>
<h3 class="projects-entry__title">International Student Ambassador</h3>
<p class="projects-entry__text">University of Ljubljana. Supported prospective and incoming international students through info sessions, one-on-one guidance, and ongoing communication, answering hundreds of inquiries via email and social media.</p>
<p class="projects-entry__impact"><strong>Impact:</strong> Co-created and appeared in the "Chat with International Student Ambassadors" video series, supported online informative days, and guided students through administrative procedures, including residence permit applications.</p>
</div>
</article>
<article class="projects-entry" id="project-povezani-ef" data-animate>
<span class="projects-entry__dot" aria-hidden="true"></span>
<div class="projects-entry__content">
<div class="projects-meta">
<span class="projects-date">2022 - 2027</span>
<span class="projects-tag">Student Organisation &amp; Event Support</span>
</div>
<h3 class="projects-entry__title">Member - Povezani EF</h3>
<p class="projects-entry__text">School of Economics and Business, University of Ljubljana. Contributed to organizing student events, campaigns, and faculty initiatives through promotional activities, on-site coordination, and student engagement.</p>
<p class="projects-entry__impact"><strong>Impact:</strong> Supported creation of video and promotional materials and participated in outreach efforts that connected and informed the student community.</p>
</div>
</article>
</div>
</section>
</div>
</div>
</section>
<section class="section section--tight projects-timeline-section projects-timeline-section--alt">
<div class="container">
<section class="projects-chapter" data-animate>
<header class="projects-chapter__header">
<h2 class="projects-chapter__title">High School Chapter</h2>
<span class="projects-chapter__range">2017 - 2021</span>
</header>
<div class="projects-timeline">
<article class="projects-entry" id="project-student-council" data-animate>
<span class="projects-entry__dot" aria-hidden="true"></span>
<div class="projects-entry__content">
<div class="projects-meta">
<span class="projects-date">2018 - 2019, 2020 - 2021</span>
<span class="projects-tag">Leadership &amp; School Governance</span>
</div>
<h3 class="projects-entry__title">President of the Student Council</h3>
<p class="projects-entry__text">Gymnasium "Nikola Karev", Skopje. Led a 36-member student council, coordinating student representation, organizing school-wide initiatives, and working directly with school leadership.</p>
<p class="projects-entry__impact"><strong>Impact:</strong> Delivered events, restructured internal rules, and supported the school's transition during COVID.</p>
</div>
</article>
<article class="projects-entry" id="project-peer-mediation" data-animate>
<span class="projects-entry__dot" aria-hidden="true"></span>
<div class="projects-entry__content">
<div class="projects-meta">
<span class="projects-date">2018 - 2020</span>
<span class="projects-tag">Conflict Resolution &amp; Student Engagement</span>
</div>
<h3 class="projects-entry__title">Peer Mediation &amp; Forum Theatre Initiative</h3>
<p class="projects-entry__text">Gymnasium "Nikola Karev", Skopje. Trained as a peer mediator and worked directly with students to resolve conflicts and address bullying through guided communication and mediation techniques.</p>
<p class="projects-entry__impact"><strong>Impact:</strong> Co-created and performed a forum theatre programme using real-life conflict scenarios to raise awareness and engage students in collaborative problem-solving.</p>
</div>
</article>
<article class="projects-entry" id="project-red-cross-youth" data-animate>
<span class="projects-entry__dot" aria-hidden="true"></span>
<div class="projects-entry__content">
<div class="projects-meta">
<span class="projects-date">2017 - 2021</span>
<span class="projects-tag">Community Leadership</span>
</div>
<h3 class="projects-entry__title">Red Cross - Youth Club (Karposh, Skopje)</h3>
<p class="projects-entry__text">Delivered peer workshops in high schools on blood donation, sexual health, and first aid, and helped organize humanitarian campaigns and volunteer activities.</p>
<p class="projects-entry__impact"><strong>Impact:</strong> Served in the Youth Club Coordinating Body, supporting volunteer coordination and planning youth-led initiatives.</p>
</div>
</article>
<article class="projects-entry" id="project-humanko" data-animate>
<span class="projects-entry__dot" aria-hidden="true"></span>
<div class="projects-entry__content">
<div class="projects-meta">
<span class="projects-date">2018 - 2021</span>
<span class="projects-tag">Social Inclusion &amp; Education</span>
</div>
<h3 class="projects-entry__title">HUMANKO Project (Red Cross)</h3>
<p class="projects-entry__text">Worked directly with children with disabilities and from socially vulnerable families through tutoring, social activities, and multi-day camps, supporting their learning, integration, and daily activities.</p>
<p class="projects-entry__impact"><strong>Impact:</strong> Helped organize and run summer camps, including fundraising, logistics, and on-site coordination.</p>
</div>
</article>
<article class="projects-entry" id="project-unicef" data-animate>
<span class="projects-entry__dot" aria-hidden="true"></span>
<div class="projects-entry__content">
<div class="projects-meta">
<span class="projects-date">2020</span>
<span class="projects-tag">Media &amp; Youth Policy Engagement</span>
</div>
<h3 class="projects-entry__title">UNICEF Young Reporter</h3>
<p class="projects-entry__text">UNICEF North Macedonia. Created written and video content during COVID to inform and engage young audiences on education, wellbeing, and social issues while completing weekly training in journalism, media literacy, and digital content creation.</p>
<p class="projects-entry__impact"><strong>Impact:</strong> Contributed youth perspectives in regional UNICEF consultations and participated in the "Kids Takeover" initiative focused on education and digital learning improvements during COVID.</p>
</div>
</article>
</div>
</section>
</div>
</section>
<section class="section section--tight projects-timeline-section">
<div class="container">
<section class="projects-chapter" data-animate>
<header class="projects-chapter__header">
<h2 class="projects-chapter__title">Early Foundations</h2>
<span class="projects-chapter__range">2013 - 2017</span>
</header>
<div class="projects-timeline">
<article class="projects-entry" id="project-scouts" data-animate>
<span class="projects-entry__dot" aria-hidden="true"></span>
<div class="projects-entry__content">
<div class="projects-meta">
<span class="projects-date">2013 - 2017</span>
<span class="projects-tag">Early Leadership Foundations</span>
</div>
<h3 class="projects-entry__title">Scouts of the Republic of Macedonia</h3>
<p class="projects-entry__text">Took part in multi-day camps, navigation and survival exercises, and small-group leadership activities, where I led peers in field tasks, coordinated group movement, and handled challenges in unfamiliar environments.</p>
<p class="projects-entry__impact"><strong>Impact:</strong> Developed team coordination under pressure, quick decision-making habits, and operational readiness in changing conditions.</p>
</div>
</article>
</div>
</section>
</div>
</section>
<section class="section section--tight projects-final-cta-section">
<div class="container">
<div class="projects-final-cta" data-animate>
<h2 class="projects-final-cta__title">Interested in collaboration or project-based work?</h2>
<div class="projects-final-cta__actions">
<a class="button button--primary" href="../contact/">Get in touch</a>
<a class="button button--secondary" href="../cv/">View CV</a>
</div>
</div>
</div>
@@ -170,15 +363,15 @@
<p class="site-footer__text">Selected work across governance, consulting, and leadership initiatives.</p>
</div>
<div class="site-footer__links">
<a class="site-footer__link" href="index.html">Home</a>
<a class="site-footer__link" href="contact.html">Contact</a>
<a class="site-footer__link" href="../">Home</a>
<a class="site-footer__link" href="../contact/">Contact</a>
<a class="site-footer__link" href="mailto:popovskik02@yahoo.com">Email</a>
<a class="site-footer__link" href="assets/documents/cv_full.pdf">Download CV</a>
<a class="site-footer__link" href="../assets/documents/cv_full.pdf" target="_blank" rel="noreferrer">Download CV</a>
</div>
<div class="site-footer__meta">Curated projects and measurable outcomes</div>
<div class="site-footer__meta">Chronological project timeline</div>
</div>
</footer>
</div>
<script src="js/script.js"></script>
<script src="../js/script.js"></script>
</body>
</html>