Initial commit
This commit is contained in:
commit
f3187036c1
|
|
@ -0,0 +1,4 @@
|
|||
Thumbs.db
|
||||
.DS_Store
|
||||
gitea-token*.txt
|
||||
gitea-token*.txt.sig
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
%PDF-1.4
|
||||
1 0 obj
|
||||
<< /Type /Catalog /Pages 2 0 R >>
|
||||
endobj
|
||||
2 0 obj
|
||||
<< /Type /Pages /Kids [3 0 R] /Count 1 >>
|
||||
endobj
|
||||
3 0 obj
|
||||
<< /Type /Page /Parent 2 0 R /MediaBox [0 0 612 792] /Resources << /Font << /F1 4 0 R >> >> /Contents 5 0 R >>
|
||||
endobj
|
||||
4 0 obj
|
||||
<< /Type /Font /Subtype /Type1 /BaseFont /Helvetica >>
|
||||
endobj
|
||||
5 0 obj
|
||||
<< /Length 155 >>
|
||||
stream
|
||||
BT
|
||||
/F1 18 Tf
|
||||
72 720 Td
|
||||
(Placeholder CV document for Kristijan Popovski.) Tj
|
||||
0 -28 Td
|
||||
(Replace this file with the final approved full CV PDF.) Tj
|
||||
ET
|
||||
endstream
|
||||
endobj
|
||||
xref
|
||||
0 6
|
||||
0000000000 65535 f
|
||||
0000000010 00000 n
|
||||
trailer
|
||||
<< /Size 6 /Root 1 0 R >>
|
||||
startxref
|
||||
538
|
||||
%%EOF
|
||||
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
%PDF-1.4
|
||||
1 0 obj
|
||||
<< /Type /Catalog /Pages 2 0 R >>
|
||||
endobj
|
||||
2 0 obj
|
||||
<< /Type /Pages /Kids [3 0 R] /Count 1 >>
|
||||
endobj
|
||||
3 0 obj
|
||||
<< /Type /Page /Parent 2 0 R /MediaBox [0 0 612 792] /Resources << /Font << /F1 4 0 R >> >> /Contents 5 0 R >>
|
||||
endobj
|
||||
4 0 obj
|
||||
<< /Type /Font /Subtype /Type1 /BaseFont /Helvetica >>
|
||||
endobj
|
||||
5 0 obj
|
||||
<< /Length 156 >>
|
||||
stream
|
||||
BT
|
||||
/F1 18 Tf
|
||||
72 720 Td
|
||||
(Placeholder one-page CV for Kristijan Popovski.) Tj
|
||||
0 -28 Td
|
||||
(Replace this file with the final approved one-page PDF.) Tj
|
||||
ET
|
||||
endstream
|
||||
endobj
|
||||
xref
|
||||
0 6
|
||||
0000000000 65535 f
|
||||
0000000010 00000 n
|
||||
trailer
|
||||
<< /Size 6 /Root 1 0 R >>
|
||||
startxref
|
||||
539
|
||||
%%EOF
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 306 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 85 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 328 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 466 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 471 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 414 KiB |
|
|
@ -0,0 +1,147 @@
|
|||
<!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">
|
||||
</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://si.linkedin.com/in/kristijan-popovski-688905232" 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>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,247 @@
|
|||
<!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">
|
||||
</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>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,221 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;700;800&family=Inter:wght@400;500;600&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"tertiary": "#741f00",
|
||||
"surface": "#f8f9fa",
|
||||
"surface-dim": "#d9dadb",
|
||||
"on-error": "#ffffff",
|
||||
"tertiary-fixed-dim": "#ffb59e",
|
||||
"on-primary-fixed": "#001356",
|
||||
"primary-fixed": "#dde1ff",
|
||||
"primary-container": "#1a44d1",
|
||||
"surface-tint": "#2a4fdb",
|
||||
"on-primary-fixed-variant": "#0035be",
|
||||
"outline": "#747686",
|
||||
"on-secondary-fixed": "#001550",
|
||||
"inverse-primary": "#b8c3ff",
|
||||
"inverse-on-surface": "#f0f1f2",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"on-surface": "#191c1d",
|
||||
"secondary-fixed-dim": "#b6c4ff",
|
||||
"tertiary-fixed": "#ffdbd0",
|
||||
"on-error-container": "#93000a",
|
||||
"on-secondary-fixed-variant": "#163da5",
|
||||
"error-container": "#ffdad6",
|
||||
"on-tertiary": "#ffffff",
|
||||
"inverse-surface": "#2e3132",
|
||||
"secondary": "#3657be",
|
||||
"primary-fixed-dim": "#b8c3ff",
|
||||
"primary": "#002da7",
|
||||
"on-primary-container": "#bcc6ff",
|
||||
"surface-container": "#edeeef",
|
||||
"background": "#f8f9fa",
|
||||
"on-secondary-container": "#002780",
|
||||
"surface-container-low": "#f3f4f5",
|
||||
"secondary-fixed": "#dce1ff",
|
||||
"on-background": "#191c1d",
|
||||
"on-secondary": "#ffffff",
|
||||
"on-primary": "#ffffff",
|
||||
"on-surface-variant": "#444655",
|
||||
"secondary-container": "#7593fd",
|
||||
"error": "#ba1a1a",
|
||||
"tertiary-container": "#9c2d00",
|
||||
"on-tertiary-container": "#ffb9a3",
|
||||
"surface-container-high": "#e7e8e9",
|
||||
"on-tertiary-fixed-variant": "#842500",
|
||||
"outline-variant": "#c4c5d7",
|
||||
"surface-bright": "#f8f9fa",
|
||||
"on-tertiary-fixed": "#3a0b00",
|
||||
"surface-variant": "#e1e3e4",
|
||||
"surface-container-highest": "#e1e3e4"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline": ["Manrope"],
|
||||
"body": ["Inter"],
|
||||
"label": ["Inter"]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
h1, h2, h3, .font-manrope {
|
||||
font-family: 'Manrope', sans-serif;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="text-on-surface">
|
||||
<!-- TopNavBar -->
|
||||
<nav class="fixed top-0 w-full z-50 bg-white/80 dark:bg-slate-950/80 backdrop-blur-xl shadow-[0_10px_40px_rgba(0,45,167,0.05)]">
|
||||
<div class="flex justify-between items-center max-w-7xl mx-auto px-8 h-20">
|
||||
<div class="text-2xl font-bold tracking-tighter text-slate-900 dark:text-white">
|
||||
Kristijan Popovski
|
||||
</div>
|
||||
<div class="hidden md:flex items-center space-x-8">
|
||||
<a class="text-slate-600 dark:text-slate-400 hover:text-blue-600 transition-colors font-manrope font-bold tracking-tight text-lg" href="#">Home</a>
|
||||
<a class="text-slate-600 dark:text-slate-400 hover:text-blue-600 transition-colors font-manrope font-bold tracking-tight text-lg" href="#">Projects</a>
|
||||
<a class="text-slate-600 dark:text-slate-400 hover:text-blue-600 transition-colors font-manrope font-bold tracking-tight text-lg" href="#">CV</a>
|
||||
<a class="text-blue-700 dark:text-blue-400 border-b-2 border-blue-700 dark:border-blue-400 pb-1 font-manrope font-bold tracking-tight text-lg" href="#">Contact</a>
|
||||
</div>
|
||||
<button class="bg-primary text-white px-6 py-2.5 rounded-xl font-manrope font-bold tracking-tight scale-95 active:scale-90 transition-all hover:bg-primary-container">
|
||||
Get in Touch
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
<main class="pt-32 pb-40 px-8 max-w-7xl mx-auto">
|
||||
<!-- Section 1: Top Hero -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-12 gap-16 mb-40 items-center">
|
||||
<div class="lg:col-span-7">
|
||||
<span class="text-primary font-label text-xs uppercase tracking-[0.2em] font-bold mb-6 block">Contact</span>
|
||||
<h1 class="text-5xl lg:text-7xl font-headline font-extrabold tracking-tight text-on-surface mb-8 leading-[1.1]">
|
||||
Let's architect <br/>
|
||||
<span class="text-primary-container">your next vision.</span>
|
||||
</h1>
|
||||
<p class="text-xl text-on-surface-variant leading-relaxed max-w-xl">
|
||||
Interested in working together? I'm always open to discussing new projects, creative ideas, or opportunities to be part of your vision.
|
||||
</p>
|
||||
</div>
|
||||
<div class="lg:col-span-5">
|
||||
<div class="relative rounded-3xl overflow-hidden aspect-[4/5] shadow-2xl">
|
||||
<img alt="Kristijan Popovski" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida/ADBb0ujowhYy2qUM7pe8f3r3QEGEOKEGS0CnP9AfT8Qkbfh4ZTh6rrfiwPRPo4cwlnZQRIjHBuVjNabhh49DcG11Xp9F5A1qwLRBcN-tdxdAAwges0dk4DsLi2Vw47gNLBWlGExJLz9dFuA5ln-nIjduGoLr5NL1uCgDZyaGAhTv1OeGqQ0kqQU5e1sRJTxzqyY0BKHXliVbEqg0QPIMHl2P3P9hAa5HNJUkFZfGAVH0vtSpEV8BzS64uCvNDX04x-pDmfyU0e3Jowhkzw"/>
|
||||
<div class="absolute inset-0 bg-primary/5 mix-blend-multiply"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Section 2: Middle Form -->
|
||||
<div class="mb-48">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<div class="mb-20 text-center">
|
||||
<h2 class="text-4xl font-headline font-bold text-on-surface mb-4">Fill out to connect</h2>
|
||||
<div class="w-16 h-1 bg-primary mx-auto rounded-full"></div>
|
||||
</div>
|
||||
<div class="bg-white p-10 md:p-20 rounded-[3rem] shadow-[0_40px_100px_rgba(0,45,167,0.06)] border border-outline-variant/10">
|
||||
<form action="#" class="space-y-16">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-x-16 gap-y-12">
|
||||
<div class="relative group">
|
||||
<label class="block text-[11px] uppercase tracking-[0.2em] font-bold text-outline-variant mb-3 transition-colors group-focus-within:text-primary" for="full_name">Full Name</label>
|
||||
<input class="w-full bg-transparent border-0 border-b border-outline-variant/20 py-4 px-0 focus:ring-0 focus:border-primary transition-all placeholder:text-outline-variant/30 font-medium text-lg text-on-surface" id="full_name" name="full_name" placeholder="John Doe" type="text"/>
|
||||
</div>
|
||||
<div class="relative group">
|
||||
<label class="block text-[11px] uppercase tracking-[0.2em] font-bold text-outline-variant mb-3 transition-colors group-focus-within:text-primary" for="organization">Title / Organization</label>
|
||||
<input class="w-full bg-transparent border-0 border-b border-outline-variant/20 py-4 px-0 focus:ring-0 focus:border-primary transition-all placeholder:text-outline-variant/30 font-medium text-lg text-on-surface" id="organization" name="organization" placeholder="CTO @ Visionary" type="text"/>
|
||||
</div>
|
||||
<div class="relative group">
|
||||
<label class="block text-[11px] uppercase tracking-[0.2em] font-bold text-outline-variant mb-3 transition-colors group-focus-within:text-primary" for="email">Email Address</label>
|
||||
<input class="w-full bg-transparent border-0 border-b border-outline-variant/20 py-4 px-0 focus:ring-0 focus:border-primary transition-all placeholder:text-outline-variant/30 font-medium text-lg text-on-surface" id="email" name="email" placeholder="john@company.com" type="email"/>
|
||||
</div>
|
||||
<div class="relative group">
|
||||
<label class="block text-[11px] uppercase tracking-[0.2em] font-bold text-outline-variant mb-3 transition-colors group-focus-within:text-primary" for="phone">Phone (Optional)</label>
|
||||
<input class="w-full bg-transparent border-0 border-b border-outline-variant/20 py-4 px-0 focus:ring-0 focus:border-primary transition-all placeholder:text-outline-variant/30 font-medium text-lg text-on-surface" id="phone" name="phone" placeholder="+1 (555) 000-0000" type="tel"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative group">
|
||||
<label class="block text-[11px] uppercase tracking-[0.2em] font-bold text-outline-variant mb-3 transition-colors group-focus-within:text-primary" for="message">Your Message</label>
|
||||
<textarea class="w-full bg-transparent border-0 border-b border-outline-variant/20 py-4 px-0 focus:ring-0 focus:border-primary transition-all placeholder:text-outline-variant/30 font-medium text-lg text-on-surface resize-none" id="message" name="message" placeholder="Tell me about your vision..." rows="4"></textarea>
|
||||
</div>
|
||||
<div class="pt-8">
|
||||
<button class="w-full bg-slate-900 hover:bg-black text-white font-headline font-bold py-6 rounded-2xl transition-all flex items-center justify-center space-x-3 group shadow-2xl shadow-slate-900/10 scale-100 active:scale-[0.98]" type="submit">
|
||||
<span class="text-lg tracking-tight">Send Message</span>
|
||||
<span class="material-symbols-outlined text-xl group-hover:translate-x-1.5 transition-transform" data-icon="send">send</span>
|
||||
</button>
|
||||
<p class="mt-8 text-center text-[10px] text-outline-variant uppercase tracking-widest font-bold">
|
||||
Typically responds within 24 business hours
|
||||
</p>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Section 3: Bottom Links -->
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<div class="mb-16 text-center">
|
||||
<h2 class="text-2xl font-headline font-bold text-on-surface mb-2">Let's connect</h2>
|
||||
<p class="text-outline-variant text-[10px] uppercase tracking-[0.25em] font-bold">Via Professional Channels</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-stretch">
|
||||
<!-- Email Box -->
|
||||
<a class="group flex items-center p-8 bg-white border border-outline-variant/20 rounded-3xl transition-all hover:border-primary/40 hover:shadow-[0_20px_50px_rgba(0,45,167,0.04)] hover:-translate-y-1" href="mailto:popovskik02@yahoo.com">
|
||||
<div class="w-14 h-14 rounded-2xl bg-slate-50 flex items-center justify-center mr-6 group-hover:bg-primary group-hover:text-white transition-all duration-300">
|
||||
<span class="material-symbols-outlined text-2xl" data-icon="mail">mail</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-[9px] font-label uppercase tracking-widest text-outline-variant mb-1 font-bold">Direct Email</p>
|
||||
<p class="text-lg font-headline font-bold text-on-surface group-hover:text-primary transition-colors">popovskik02@yahoo.com</p>
|
||||
</div>
|
||||
</a>
|
||||
<!-- LinkedIn Box -->
|
||||
<a class="group flex items-center p-8 bg-white border border-outline-variant/20 rounded-3xl transition-all hover:border-primary/40 hover:shadow-[0_20px_50px_rgba(0,45,167,0.04)] hover:-translate-y-1" href="#">
|
||||
<div class="w-14 h-14 rounded-2xl bg-slate-50 flex items-center justify-center mr-6 group-hover:bg-primary group-hover:text-white transition-all duration-300">
|
||||
<svg class="w-7 h-7 fill-current" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-[9px] font-label uppercase tracking-widest text-outline-variant mb-1 font-bold">LinkedIn Network</p>
|
||||
<p class="text-lg font-headline font-bold text-on-surface group-hover:text-primary transition-colors">Kristijan Popovski</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Footer -->
|
||||
<footer class="w-full py-20 px-8 bg-white border-t border-slate-100">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 items-center max-w-7xl mx-auto">
|
||||
<div>
|
||||
<p class="font-manrope font-black text-xl text-slate-900 mb-2">Kristijan Popovski</p>
|
||||
<p class="font-inter text-[11px] tracking-widest uppercase font-bold text-slate-400">
|
||||
© 2024 Kristijan Popovski. Engineered with Authority.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-wrap md:justify-end gap-10 mt-8 md:mt-0">
|
||||
<a class="font-inter text-xs tracking-widest uppercase font-bold text-slate-500 hover:text-primary transition-colors" href="#">LinkedIn</a>
|
||||
<a class="font-inter text-xs tracking-widest uppercase font-bold text-slate-500 hover:text-primary transition-colors" href="mailto:popovskik02@yahoo.com">Email</a>
|
||||
<a class="font-inter text-xs tracking-widest uppercase font-bold text-slate-500 hover:text-primary transition-colors" href="#">Download CV</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 247 KiB |
|
|
@ -0,0 +1,217 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Contact - Kristijan Popovski</title>
|
||||
<!-- Material Symbols -->
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<!-- Google Fonts -->
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&family=Inter:wght@400;500;600&display=swap" rel="stylesheet"/>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"tertiary": "#741f00",
|
||||
"surface": "#f8f9fa",
|
||||
"surface-dim": "#d9dadb",
|
||||
"on-error": "#ffffff",
|
||||
"tertiary-fixed-dim": "#ffb59e",
|
||||
"on-primary-fixed": "#001356",
|
||||
"primary-fixed": "#dde1ff",
|
||||
"primary-container": "#1a44d1",
|
||||
"surface-tint": "#2a4fdb",
|
||||
"on-primary-fixed-variant": "#0035be",
|
||||
"outline": "#747686",
|
||||
"on-secondary-fixed": "#001550",
|
||||
"inverse-primary": "#b8c3ff",
|
||||
"inverse-on-surface": "#f0f1f2",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"on-surface": "#191c1d",
|
||||
"secondary-fixed-dim": "#b6c4ff",
|
||||
"tertiary-fixed": "#ffdbd0",
|
||||
"on-error-container": "#93000a",
|
||||
"on-secondary-fixed-variant": "#163da5",
|
||||
"error-container": "#ffdad6",
|
||||
"on-tertiary": "#ffffff",
|
||||
"inverse-surface": "#2e3132",
|
||||
"secondary": "#3657be",
|
||||
"primary-fixed-dim": "#b8c3ff",
|
||||
"primary": "#002da7",
|
||||
"on-primary-container": "#bcc6ff",
|
||||
"surface-container": "#edeeef",
|
||||
"background": "#f8f9fa",
|
||||
"on-secondary-container": "#002780",
|
||||
"surface-container-low": "#f3f4f5",
|
||||
"secondary-fixed": "#dce1ff",
|
||||
"on-background": "#191c1d",
|
||||
"on-secondary": "#ffffff",
|
||||
"on-primary": "#ffffff",
|
||||
"on-surface-variant": "#444655",
|
||||
"secondary-container": "#7593fd",
|
||||
"error": "#ba1a1a",
|
||||
"tertiary-container": "#9c2d00",
|
||||
"on-tertiary-container": "#ffb9a3",
|
||||
"surface-container-high": "#e7e8e9",
|
||||
"on-tertiary-fixed-variant": "#842500",
|
||||
"outline-variant": "#c4c5d7",
|
||||
"surface-bright": "#f8f9fa",
|
||||
"on-tertiary-fixed": "#3a0b00",
|
||||
"surface-variant": "#e1e3e4",
|
||||
"surface-container-highest": "#e1e3e4"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline": ["Manrope"],
|
||||
"body": ["Inter"],
|
||||
"label": ["Inter"]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.glass-nav {
|
||||
backdrop-filter: blur(24px);
|
||||
}
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface text-on-surface font-body selection:bg-primary-fixed selection:text-on-primary-fixed">
|
||||
<!-- TopNavBar Component -->
|
||||
<header class="fixed top-0 w-full z-50 bg-white/80 dark:bg-slate-950/80 backdrop-blur-xl shadow-[0_10px_40px_rgba(0,45,167,0.05)] border-b border-outline-variant/10">
|
||||
<nav class="flex justify-between items-center max-w-7xl mx-auto px-6 h-20">
|
||||
<div class="text-xl font-bold tracking-tighter text-slate-900 dark:text-white font-manrope">
|
||||
Kristijan Popovski
|
||||
</div>
|
||||
<!-- Desktop Navigation Links -->
|
||||
<div class="hidden md:flex items-center gap-8">
|
||||
<a class="text-slate-600 dark:text-slate-400 hover:text-blue-600 transition-colors font-manrope font-bold tracking-tight text-lg" href="#">Home</a>
|
||||
<a class="text-slate-600 dark:text-slate-400 hover:text-blue-600 transition-colors font-manrope font-bold tracking-tight text-lg" href="#">Projects</a>
|
||||
<a class="text-slate-600 dark:text-slate-400 hover:text-blue-600 transition-colors font-manrope font-bold tracking-tight text-lg" href="#">CV</a>
|
||||
<a class="text-blue-700 dark:text-blue-400 border-b-2 border-blue-700 dark:border-blue-400 pb-1 font-manrope font-bold tracking-tight text-lg" href="#">Contact</a>
|
||||
</div>
|
||||
<button class="hidden md:block bg-primary text-on-primary px-6 py-2.5 rounded-xl font-headline font-bold scale-95 active:scale-90 transition-transform">
|
||||
Get in Touch
|
||||
</button>
|
||||
<!-- Mobile Menu Toggle -->
|
||||
<button class="md:hidden p-2 flex items-center justify-center">
|
||||
<span class="text-sm font-bold text-primary uppercase tracking-widest font-headline">menu</span>
|
||||
</button>
|
||||
</nav>
|
||||
</header>
|
||||
<main class="pt-36 pb-24 px-6 max-w-2xl mx-auto">
|
||||
<!-- 1. Hero Section -->
|
||||
<section class="mb-20">
|
||||
<h1 class="font-headline text-[2.75rem] md:text-[4rem] font-extrabold leading-[1.1] tracking-tight text-on-surface mb-8">
|
||||
Let's Build Something <span class="text-primary">Exceptional</span>.
|
||||
</h1>
|
||||
<p class="text-on-surface-variant text-xl leading-relaxed max-w-md opacity-80">
|
||||
I assist visionary brands and individuals in bringing high-end digital experiences to life.
|
||||
</p>
|
||||
</section>
|
||||
<!-- 2. Contact Form Section -->
|
||||
<section class="mb-24">
|
||||
<div class="mb-10">
|
||||
<h2 class="font-headline text-3xl font-bold text-on-surface mb-2">Send a Message</h2>
|
||||
<p class="text-on-surface-variant font-medium opacity-70">Fill out to connect</p>
|
||||
</div>
|
||||
<div class="bg-surface-container-lowest p-8 md:p-10 rounded-[2.5rem] border border-outline-variant/15 shadow-[0_20px_60px_rgba(0,45,167,0.04)]">
|
||||
<form action="#" class="flex flex-col gap-10">
|
||||
<!-- Name Field -->
|
||||
<div class="flex flex-col gap-3">
|
||||
<label class="font-label text-xs uppercase tracking-[0.2em] font-bold text-primary/80" for="name">Full Name</label>
|
||||
<input class="w-full bg-surface-container-high border-b-2 border-x-0 border-t-0 border-outline-variant/20 px-0 py-4 focus:ring-0 focus:border-primary transition-all text-on-surface placeholder:text-on-surface-variant/30 font-medium text-lg" id="name" name="name" placeholder="John Doe" type="text"/>
|
||||
</div>
|
||||
<!-- Organization Field -->
|
||||
<div class="flex flex-col gap-3">
|
||||
<label class="font-label text-xs uppercase tracking-[0.2em] font-bold text-primary/80" for="org">Organization</label>
|
||||
<input class="w-full bg-surface-container-high border-b-2 border-x-0 border-t-0 border-outline-variant/20 px-0 py-4 focus:ring-0 focus:border-primary transition-all text-on-surface placeholder:text-on-surface-variant/30 font-medium text-lg" id="org" name="org" placeholder="Company Name" type="text"/>
|
||||
</div>
|
||||
<!-- Email Field -->
|
||||
<div class="flex flex-col gap-3">
|
||||
<label class="font-label text-xs uppercase tracking-[0.2em] font-bold text-primary/80" for="email">Email Address</label>
|
||||
<input class="w-full bg-surface-container-high border-b-2 border-x-0 border-t-0 border-outline-variant/20 px-0 py-4 focus:ring-0 focus:border-primary transition-all text-on-surface placeholder:text-on-surface-variant/30 font-medium text-lg" id="email" name="email" placeholder="john@example.com" type="email"/>
|
||||
</div>
|
||||
<!-- Phone Field -->
|
||||
<div class="flex flex-col gap-3">
|
||||
<label class="font-label text-xs uppercase tracking-[0.2em] font-bold text-primary/80" for="phone">Phone Number</label>
|
||||
<input class="w-full bg-surface-container-high border-b-2 border-x-0 border-t-0 border-outline-variant/20 px-0 py-4 focus:ring-0 focus:border-primary transition-all text-on-surface placeholder:text-on-surface-variant/30 font-medium text-lg" id="phone" name="phone" placeholder="+1 (555) 000-0000" type="tel"/>
|
||||
</div>
|
||||
<!-- Message Field -->
|
||||
<div class="flex flex-col gap-3">
|
||||
<label class="font-label text-xs uppercase tracking-[0.2em] font-bold text-primary/80" for="message">Message Details</label>
|
||||
<textarea class="w-full bg-surface-container-high border-b-2 border-x-0 border-t-0 border-outline-variant/20 px-0 py-4 focus:ring-0 focus:border-primary transition-all text-on-surface placeholder:text-on-surface-variant/30 font-medium resize-none text-lg min-h-[120px]" id="message" name="message" placeholder="Tell me about your vision..." rows="4"></textarea>
|
||||
</div>
|
||||
<!-- Primary Action Button -->
|
||||
<button class="w-full bg-primary hover:bg-primary-container text-on-primary py-6 rounded-2xl font-headline font-bold text-lg flex items-center justify-center gap-3 shadow-[0_20px_40px_rgba(0,45,167,0.2)] active:scale-[0.98] transition-all mt-4" type="submit">
|
||||
<span>Send Message</span>
|
||||
<span class="material-symbols-outlined text-[24px]" data-icon="send">send</span>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
<!-- 3. Let's Connect Section -->
|
||||
<section class="mt-24 flex flex-col gap-10">
|
||||
<h2 class="font-headline text-3xl font-bold text-on-surface tracking-tight">Let's connect</h2>
|
||||
<div class="grid grid-cols-1 gap-6">
|
||||
<a class="flex items-center justify-between p-8 bg-surface-container-low rounded-[2rem] group transition-all hover:bg-surface-container-high border border-outline-variant/10 shadow-sm" href="#">
|
||||
<div class="flex items-center gap-5">
|
||||
<div class="w-14 h-14 rounded-full bg-primary/10 flex items-center justify-center text-primary group-hover:bg-primary group-hover:text-on-primary transition-colors">
|
||||
<!-- LinkedIn SVG logo -->
|
||||
<svg class="w-7 h-7 fill-current" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<span class="block font-bold text-lg text-on-surface">LinkedIn</span>
|
||||
<span class="text-sm text-on-surface-variant font-medium opacity-60">Professional Network</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-outline group-hover:text-primary transition-colors group-hover:translate-x-1 duration-300" data-icon="arrow_forward">arrow_forward</span>
|
||||
</a>
|
||||
<a class="flex items-center justify-between p-8 bg-surface-container-low rounded-[2rem] group transition-all hover:bg-surface-container-high border border-outline-variant/10 shadow-sm" href="#">
|
||||
<div class="flex items-center gap-5">
|
||||
<div class="w-14 h-14 rounded-full bg-primary/10 flex items-center justify-center text-primary group-hover:bg-primary group-hover:text-on-primary transition-colors">
|
||||
<span class="material-symbols-outlined text-3xl" data-icon="mail">mail</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="block font-bold text-lg text-on-surface">Direct Email</span>
|
||||
<span class="text-sm text-on-surface-variant font-medium opacity-60">Inquiry & Collaboration</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-outline group-hover:text-primary transition-colors group-hover:translate-x-1 duration-300" data-icon="arrow_forward">arrow_forward</span>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<!-- Footer Component -->
|
||||
<footer class="w-full py-20 px-8 bg-slate-50 dark:bg-slate-900 border-t border-slate-200/10">
|
||||
<div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 items-center gap-12">
|
||||
<div class="flex flex-col gap-5">
|
||||
<span class="font-manrope font-black text-2xl text-slate-900 dark:text-white uppercase tracking-tighter">Kristijan Popovski</span>
|
||||
<p class="font-inter text-xs tracking-widest uppercase font-semibold text-slate-500 dark:text-slate-400 opacity-70">
|
||||
© 2024 Kristijan Popovski. Engineered with Authority.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-wrap md:justify-end gap-x-10 gap-y-5">
|
||||
<a class="text-slate-600 dark:text-slate-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors font-inter text-sm tracking-widest uppercase font-bold" href="#">LinkedIn</a>
|
||||
<a class="text-slate-600 dark:text-slate-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors font-inter text-sm tracking-widest uppercase font-bold" href="#">Email</a>
|
||||
<a class="text-slate-600 dark:text-slate-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors font-inter text-sm tracking-widest uppercase font-bold" href="#">Download CV</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 94 KiB |
|
|
@ -0,0 +1,361 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<html class="scroll-smooth" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>CV | Kristijan Popovski</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700;800&family=Inter:wght@400;500;600&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"tertiary": "#741f00",
|
||||
"surface": "#f8f9fa",
|
||||
"surface-dim": "#d9dadb",
|
||||
"on-error": "#ffffff",
|
||||
"tertiary-fixed-dim": "#ffb59e",
|
||||
"on-primary-fixed": "#001356",
|
||||
"primary-fixed": "#dde1ff",
|
||||
"primary-container": "#1a44d1",
|
||||
"surface-tint": "#2a4fdb",
|
||||
"on-primary-fixed-variant": "#0035be",
|
||||
"outline": "#747686",
|
||||
"on-secondary-fixed": "#001550",
|
||||
"inverse-primary": "#b8c3ff",
|
||||
"inverse-on-surface": "#f0f1f2",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"on-surface": "#191c1d",
|
||||
"secondary-fixed-dim": "#b6c4ff",
|
||||
"tertiary-fixed": "#ffdbd0",
|
||||
"on-error-container": "#93000a",
|
||||
"on-secondary-fixed-variant": "#163da5",
|
||||
"error-container": "#ffdad6",
|
||||
"on-tertiary": "#ffffff",
|
||||
"inverse-surface": "#2e3132",
|
||||
"secondary": "#3657be",
|
||||
"primary-fixed-dim": "#b8c3ff",
|
||||
"primary": "#002da7",
|
||||
"on-primary-container": "#bcc6ff",
|
||||
"surface-container": "#edeeef",
|
||||
"background": "#f8f9fa",
|
||||
"on-secondary-container": "#002780",
|
||||
"surface-container-low": "#f3f4f5",
|
||||
"secondary-fixed": "#dce1ff",
|
||||
"on-background": "#191c1d",
|
||||
"on-secondary": "#ffffff",
|
||||
"on-primary": "#ffffff",
|
||||
"on-surface-variant": "#444655",
|
||||
"secondary-container": "#7593fd",
|
||||
"error": "#ba1a1a",
|
||||
"tertiary-container": "#9c2d00",
|
||||
"on-tertiary-container": "#ffb9a3",
|
||||
"surface-container-high": "#e7e8e9",
|
||||
"on-tertiary-fixed-variant": "#842500",
|
||||
"outline-variant": "#c4c5d7",
|
||||
"surface-bright": "#f8f9fa",
|
||||
"on-tertiary-fixed": "#3a0b00",
|
||||
"surface-variant": "#e1e3e4",
|
||||
"surface-container-highest": "#e1e3e4"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline": ["Manrope"],
|
||||
"body": ["Inter"],
|
||||
"label": ["Inter"]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
body { font-family: 'Inter', sans-serif; }
|
||||
h1, h2, h3, h4 { font-family: 'Manrope', sans-serif; }
|
||||
.cv-timeline::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 7px;
|
||||
top: 12px;
|
||||
bottom: 12px;
|
||||
width: 2px;
|
||||
background: #e1e3e4;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface text-on-surface">
|
||||
<!-- TopNavBar -->
|
||||
<header class="fixed top-0 w-full z-50 bg-white/90 backdrop-blur-xl border-b border-outline-variant/30">
|
||||
<nav class="flex justify-between items-center max-w-7xl mx-auto px-8 h-20">
|
||||
<div class="text-2xl font-bold tracking-tighter text-slate-900">Kristijan Popovski</div>
|
||||
<div class="hidden md:flex gap-8 items-center">
|
||||
<a class="text-slate-600 hover:text-primary transition-colors font-semibold" href="#">Home</a>
|
||||
<a class="text-slate-600 hover:text-primary transition-colors font-semibold" href="#">Projects</a>
|
||||
<a class="text-primary border-b-2 border-primary pb-1 font-bold" href="#">CV</a>
|
||||
<a class="text-slate-600 hover:text-primary transition-colors font-semibold" href="#">Contact</a>
|
||||
<button class="ml-4 bg-primary text-white px-6 py-2.5 rounded-full font-bold tracking-tight hover:shadow-lg hover:shadow-primary/20 transition-all active:scale-95">Get in Touch</button>
|
||||
</div>
|
||||
<div class="md:hidden">
|
||||
<span class="material-symbols-outlined text-primary">menu</span>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
<main class="pt-32 pb-32 max-w-7xl mx-auto px-6 md:px-8">
|
||||
<!-- CV Header Actions -->
|
||||
<div class="flex flex-col md:flex-row justify-between items-start md:items-end gap-10 mb-20 border-b border-outline-variant/30 pb-16">
|
||||
<div class="max-w-2xl">
|
||||
<h1 class="text-5xl md:text-7xl font-extrabold tracking-tight text-primary mb-6">Curriculum Vitae</h1>
|
||||
<p class="text-on-surface-variant text-xl md:text-2xl font-medium leading-relaxed">BA of Business and Economics • MSc in Business and Organisation (IMB)</p>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-4">
|
||||
<button class="inline-flex items-center gap-3 bg-white text-primary px-7 py-3.5 rounded-full font-bold border-2 border-primary/10 hover:border-primary/30 hover:bg-surface-container-low transition-all shadow-sm">
|
||||
<span class="material-symbols-outlined">description</span>
|
||||
One-Page CV
|
||||
</button>
|
||||
<button class="inline-flex items-center gap-3 bg-primary text-on-primary px-7 py-3.5 rounded-full font-bold shadow-xl shadow-primary/25 hover:bg-primary/90 transition-all">
|
||||
<span class="material-symbols-outlined text-[20px]">download</span>
|
||||
Full CV (PDF)
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-12 gap-16 lg:gap-24">
|
||||
<!-- Left Column: Experience, Education, Leadership -->
|
||||
<div class="lg:col-span-8 space-y-32">
|
||||
<!-- Work Experience -->
|
||||
<section>
|
||||
<div class="flex items-center gap-4 mb-12">
|
||||
<div class="w-12 h-12 rounded-xl bg-primary-fixed flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-primary text-2xl">work</span>
|
||||
</div>
|
||||
<h2 class="text-2xl font-bold tracking-tight uppercase text-primary">Work Experience</h2>
|
||||
</div>
|
||||
<div class="relative pl-10 cv-timeline space-y-16">
|
||||
<!-- Founder -->
|
||||
<div class="relative max-w-2xl">
|
||||
<div class="absolute -left-[37px] top-1.5 w-4 h-4 rounded-full border-2 border-white bg-primary z-10 shadow-sm"></div>
|
||||
<div class="flex flex-col mb-4">
|
||||
<span class="text-sm font-bold text-primary mb-2 tracking-wide">2022 — NOW</span>
|
||||
<h3 class="text-xl font-bold text-on-surface uppercase tracking-tight">Founder and President</h3>
|
||||
<p class="text-on-surface-variant font-semibold">Macedonian Student Organisation in Slovenia</p>
|
||||
</div>
|
||||
<p class="text-on-surface-variant leading-relaxed text-base">Founded and led a student organisation growing membership to 120+ students. Organized 50+ events, built 20+ partnerships with government, embassies, and sponsors.</p>
|
||||
</div>
|
||||
<!-- Board Member -->
|
||||
<div class="relative max-w-2xl">
|
||||
<div class="absolute -left-[37px] top-1.5 w-4 h-4 rounded-full border-2 border-white bg-primary z-10 shadow-sm"></div>
|
||||
<div class="flex flex-col mb-4">
|
||||
<span class="text-sm font-bold text-primary mb-2 tracking-wide">2021 — NOW</span>
|
||||
<h3 class="text-xl font-bold text-on-surface uppercase tracking-tight">Board Member</h3>
|
||||
<p class="text-on-surface-variant font-semibold">Leaders for Education, Activism, and Development (LEAD)</p>
|
||||
</div>
|
||||
<p class="text-on-surface-variant leading-relaxed text-base">Active member of the Board of LEAD, an NGO focused on empowering youth through education and activism.</p>
|
||||
</div>
|
||||
<!-- CVS Mobile -->
|
||||
<div class="relative max-w-2xl">
|
||||
<div class="absolute -left-[37px] top-1.5 w-4 h-4 rounded-full border-2 border-white bg-primary z-10 shadow-sm"></div>
|
||||
<div class="flex flex-col mb-4">
|
||||
<span class="text-sm font-bold text-primary mb-2 tracking-wide">2024 — 2025</span>
|
||||
<h3 class="text-xl font-bold text-on-surface uppercase tracking-tight">Intern in Finance and Accounting</h3>
|
||||
<p class="text-on-surface-variant font-semibold">CVS Mobile d.d. (a Eurowag company)</p>
|
||||
</div>
|
||||
<p class="text-on-surface-variant leading-relaxed text-base">Supported finance operations across 4 subsidiaries within a regional tech company. Reviewed financial reports, assisted with invoice data processing, and supported daily operational workflows.</p>
|
||||
</div>
|
||||
<!-- Uni Ljubljana Intern -->
|
||||
<div class="relative max-w-2xl">
|
||||
<div class="absolute -left-[37px] top-1.5 w-4 h-4 rounded-full border-2 border-white bg-primary z-10 shadow-sm"></div>
|
||||
<div class="flex flex-col mb-4">
|
||||
<span class="text-sm font-bold text-primary mb-2 tracking-wide">2024</span>
|
||||
<h3 class="text-xl font-bold text-on-surface uppercase tracking-tight">Student Intern</h3>
|
||||
<p class="text-on-surface-variant font-semibold">Dept. for Internationalisation & Strategic Partnerships, University of Ljubljana</p>
|
||||
</div>
|
||||
<p class="text-on-surface-variant leading-relaxed text-base">Organized webinars for incoming students, prepared data reports, and supported the Rectors' Forum on regional university cooperation.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Education -->
|
||||
<section>
|
||||
<div class="flex items-center gap-4 mb-12">
|
||||
<div class="w-12 h-12 rounded-xl bg-primary-fixed flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-primary text-2xl">school</span>
|
||||
</div>
|
||||
<h2 class="text-2xl font-bold tracking-tight uppercase text-primary">Education</h2>
|
||||
</div>
|
||||
<div class="space-y-8">
|
||||
<div class="bg-white p-10 rounded-3xl border border-outline-variant/30 shadow-sm transition-all hover:shadow-md">
|
||||
<div class="flex flex-col md:flex-row md:justify-between items-start md:items-center mb-8 gap-4 pb-6 border-b border-outline-variant/20">
|
||||
<h3 class="text-2xl font-bold max-w-md leading-tight">University of Ljubljana, School of Economics and Business</h3>
|
||||
<span class="text-sm font-bold bg-primary-fixed px-4 py-1.5 rounded-full text-primary whitespace-nowrap">2022 — 2026</span>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-10">
|
||||
<div class="space-y-2">
|
||||
<p class="font-bold text-on-surface text-lg">MSc in Business and Organisation (IMB)</p>
|
||||
<p class="text-sm text-on-surface-variant leading-relaxed">Ranked 44th globally – Financial Times Masters in Management 2025</p>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<p class="font-bold text-on-surface text-lg">Bachelor's Degree in Economics and Business</p>
|
||||
<p class="text-sm text-on-surface-variant leading-relaxed">Major in Entrepreneurship (2017—2022)</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div class="bg-white p-8 rounded-3xl border border-outline-variant/30 shadow-sm transition-all hover:shadow-md">
|
||||
<span class="text-xs font-bold text-primary uppercase block mb-3 tracking-widest">Summer School</span>
|
||||
<h4 class="font-bold text-lg mb-1">Resilient Cities</h4>
|
||||
<p class="text-sm text-on-surface-variant">Slovak University of Technology (Bratislava, 2024)</p>
|
||||
</div>
|
||||
<div class="bg-white p-8 rounded-3xl border border-outline-variant/30 shadow-sm transition-all hover:shadow-md">
|
||||
<span class="text-xs font-bold text-primary uppercase block mb-3 tracking-widest">High School</span>
|
||||
<h4 class="font-bold text-lg mb-1">Nikola Karev Skopje</h4>
|
||||
<p class="text-sm text-on-surface-variant">Natural Sciences & Mathematics (2017—2021)</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Leadership & Involvement -->
|
||||
<section>
|
||||
<div class="flex items-center gap-4 mb-12">
|
||||
<div class="w-12 h-12 rounded-xl bg-primary-fixed flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-primary text-2xl">groups</span>
|
||||
</div>
|
||||
<h2 class="text-2xl font-bold tracking-tight uppercase text-primary">Leadership & Involvement</h2>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-12">
|
||||
<div class="flex gap-6 group">
|
||||
<div class="w-14 h-14 shrink-0 rounded-2xl bg-surface-container flex items-center justify-center transition-colors group-hover:bg-primary-fixed">
|
||||
<span class="material-symbols-outlined text-primary text-2xl">public</span>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-bold text-lg mb-2">Student Ambassador</h4>
|
||||
<p class="text-on-surface-variant leading-relaxed">Supported 200+ prospective students through one-on-one mentorship at Uni Ljubljana.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-6 group">
|
||||
<div class="w-14 h-14 shrink-0 rounded-2xl bg-surface-container flex items-center justify-center transition-colors group-hover:bg-primary-fixed">
|
||||
<span class="material-symbols-outlined text-primary text-2xl">account_balance</span>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-bold text-lg mb-2">Student Senate Member</h4>
|
||||
<p class="text-on-surface-variant leading-relaxed">Representing ~5,000 students at faculty level. Member of multiple faculty commissions.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-6 group">
|
||||
<div class="w-14 h-14 shrink-0 rounded-2xl bg-surface-container flex items-center justify-center transition-colors group-hover:bg-primary-fixed">
|
||||
<span class="material-symbols-outlined text-primary text-2xl">volunteer_activism</span>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-bold text-lg mb-2">Volunteering</h4>
|
||||
<p class="text-on-surface-variant leading-relaxed">Red Cross Youth Club (Skopje), serving twice as President of the High School Student Council.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-6 group">
|
||||
<div class="w-14 h-14 shrink-0 rounded-2xl bg-surface-container flex items-center justify-center transition-colors group-hover:bg-primary-fixed">
|
||||
<span class="material-symbols-outlined text-primary text-2xl">assignment</span>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-bold text-lg mb-2">Selected Projects</h4>
|
||||
<p class="text-on-surface-variant leading-relaxed">22nd Int. Youth Conference Krushevo; Consultant for ATech Electronics.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<!-- Right Column: Personal Info & Skills -->
|
||||
<div class="lg:col-span-4 space-y-12 sticky top-28 h-fit">
|
||||
<!-- Professional Image -->
|
||||
<div class="relative group">
|
||||
<div class="absolute -inset-2 bg-gradient-to-tr from-primary/20 to-primary-container/20 rounded-[2.5rem] blur opacity-50 group-hover:opacity-100 transition duration-700"></div>
|
||||
<div class="relative bg-white rounded-[2rem] overflow-hidden shadow-2xl border border-outline-variant/10 p-2">
|
||||
<img alt="Kristijan Popovski" class="w-full aspect-[4/5] object-cover rounded-[1.5rem]" src="https://lh3.googleusercontent.com/aida/ADBb0uhiUuXkPRxyeCzzGfdSv1M1cJ0VYIvjdk3mXVd-rhRnxGeN6fDX6axP3s9554zbfS6H7gz15z9mg0ngWBJC5YkaMMMqiJNLjOFvmBfAcifHxBe0W2d3fnvT4V4GK7JS3v2mexhyg_r0qEMGLLWkDN0Q0tKpRcv_fV_FdDbHk7iw_gb0Pa9-79fH0rxZxts5mOIEJsdPkekcseM-e8eRIUwQQag-n-gzK8lkv__ogPbLPRHAfi75UAJ_OO7ed510qNxkrGSmtlNVlA"/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Hard Skills -->
|
||||
<section class="bg-white p-8 rounded-3xl shadow-sm border border-outline-variant/20">
|
||||
<h3 class="text-sm font-extrabold mb-8 flex items-center gap-3 uppercase tracking-[0.2em] text-primary">
|
||||
<span class="material-symbols-outlined !text-xl">terminal</span>
|
||||
Hard Skills
|
||||
</h3>
|
||||
<div class="flex flex-wrap gap-2.5">
|
||||
<span class="px-3.5 py-1.5 bg-surface-container-low border border-outline-variant/30 text-on-surface-variant text-[11px] font-bold rounded-lg uppercase tracking-wider hover:bg-primary-fixed hover:text-primary transition-colors cursor-default">Microsoft Office 365</span>
|
||||
<span class="px-3.5 py-1.5 bg-surface-container-low border border-outline-variant/30 text-on-surface-variant text-[11px] font-bold rounded-lg uppercase tracking-wider hover:bg-primary-fixed hover:text-primary transition-colors cursor-default">MS Dynamics NAV</span>
|
||||
<span class="px-3.5 py-1.5 bg-surface-container-low border border-outline-variant/30 text-on-surface-variant text-[11px] font-bold rounded-lg uppercase tracking-wider hover:bg-primary-fixed hover:text-primary transition-colors cursor-default">ChatGPT</span>
|
||||
<span class="px-3.5 py-1.5 bg-surface-container-low border border-outline-variant/30 text-on-surface-variant text-[11px] font-bold rounded-lg uppercase tracking-wider hover:bg-primary-fixed hover:text-primary transition-colors cursor-default">Canva.com</span>
|
||||
<span class="px-3.5 py-1.5 bg-surface-container-low border border-outline-variant/30 text-on-surface-variant text-[11px] font-bold rounded-lg uppercase tracking-wider hover:bg-primary-fixed hover:text-primary transition-colors cursor-default">Cluster Analysis</span>
|
||||
<span class="px-3.5 py-1.5 bg-surface-container-low border border-outline-variant/30 text-on-surface-variant text-[11px] font-bold rounded-lg uppercase tracking-wider hover:bg-primary-fixed hover:text-primary transition-colors cursor-default">Segmentation</span>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Languages -->
|
||||
<section class="bg-white p-8 rounded-3xl shadow-sm border border-outline-variant/20">
|
||||
<h3 class="text-sm font-extrabold mb-8 flex items-center gap-3 uppercase tracking-[0.2em] text-primary">
|
||||
<span class="material-symbols-outlined !text-xl">translate</span>
|
||||
Languages
|
||||
</h3>
|
||||
<div class="space-y-6">
|
||||
<div class="flex justify-between items-center group">
|
||||
<span class="font-bold text-on-surface">Macedonian</span>
|
||||
<span class="text-[10px] font-black bg-primary/10 text-primary px-2 py-0.5 rounded uppercase tracking-tighter">Native</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="font-semibold text-on-surface-variant">English</span>
|
||||
<span class="text-[11px] font-bold text-outline uppercase">B2 Upper Int.</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="font-semibold text-on-surface-variant">Slovenian</span>
|
||||
<span class="text-[11px] font-bold text-outline uppercase">B2 Upper Int.</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="font-semibold text-on-surface-variant">Serbo-Croatian</span>
|
||||
<span class="text-[11px] font-bold text-outline uppercase">B2 Upper Int.</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="font-semibold text-on-surface-variant">French</span>
|
||||
<span class="text-[11px] font-bold text-outline uppercase">A2 Basic</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Awards -->
|
||||
<section class="bg-primary text-on-primary p-10 rounded-[2.5rem] shadow-2xl shadow-primary/30 relative overflow-hidden">
|
||||
<div class="absolute -right-8 -top-8 w-32 h-32 bg-white/10 rounded-full blur-3xl"></div>
|
||||
<h3 class="text-xs font-black mb-8 flex items-center gap-3 uppercase tracking-[0.3em] opacity-80">
|
||||
<span class="material-symbols-outlined !text-xl">workspace_premium</span>
|
||||
Recognition
|
||||
</h3>
|
||||
<div class="space-y-6">
|
||||
<div>
|
||||
<span class="text-[10px] font-black tracking-widest opacity-60 uppercase mb-2 block">2021</span>
|
||||
<h4 class="font-bold text-xl leading-tight mb-3">Top Graduate of Generation 2017-2021</h4>
|
||||
<p class="text-sm opacity-80 leading-relaxed">Awarded recognition by the Mayor of the City of Skopje as the top graduate of High School Gymnasium "Nikola Karev".</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Footer -->
|
||||
<footer class="bg-white border-t border-outline-variant/30 py-20 px-8">
|
||||
<div class="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center gap-12">
|
||||
<div class="text-center md:text-left">
|
||||
<span class="font-bold text-2xl text-slate-900 block mb-3">Kristijan Popovski</span>
|
||||
<p class="text-sm text-on-surface-variant font-medium tracking-tight">© 2024. Building a career in management and leadership.</p>
|
||||
</div>
|
||||
<div class="flex flex-wrap justify-center gap-10">
|
||||
<a class="text-sm font-bold text-on-surface-variant hover:text-primary transition-colors tracking-tight" href="#">LinkedIn</a>
|
||||
<a class="text-sm font-bold text-on-surface-variant hover:text-primary transition-colors tracking-tight" href="#">Instagram</a>
|
||||
<a class="text-sm font-bold text-on-surface-variant hover:text-primary transition-colors tracking-tight" href="mailto:popovskik02@yahoo.com">Email</a>
|
||||
<a class="text-sm font-bold text-primary flex items-center gap-2" href="#">
|
||||
<span class="material-symbols-outlined text-[18px]">download</span>
|
||||
Download CV
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 297 KiB |
|
|
@ -0,0 +1,432 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>CV | Kristijan Popovski</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700;800&family=Inter:wght@400;500;600&family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"tertiary": "#741f00",
|
||||
"surface": "#f8f9fa",
|
||||
"surface-dim": "#d9dadb",
|
||||
"on-error": "#ffffff",
|
||||
"tertiary-fixed-dim": "#ffb59e",
|
||||
"on-primary-fixed": "#001356",
|
||||
"primary-fixed": "#dde1ff",
|
||||
"primary-container": "#1a44d1",
|
||||
"surface-tint": "#2a4fdb",
|
||||
"on-primary-fixed-variant": "#0035be",
|
||||
"outline": "#747686",
|
||||
"on-secondary-fixed": "#001550",
|
||||
"inverse-primary": "#b8c3ff",
|
||||
"inverse-on-surface": "#f0f1f2",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"on-surface": "#191c1d",
|
||||
"secondary-fixed-dim": "#b6c4ff",
|
||||
"tertiary-fixed": "#ffdbd0",
|
||||
"on-error-container": "#93000a",
|
||||
"on-secondary-fixed-variant": "#163da5",
|
||||
"error-container": "#ffdad6",
|
||||
"on-tertiary": "#ffffff",
|
||||
"inverse-surface": "#2e3132",
|
||||
"secondary": "#3657be",
|
||||
"primary-fixed-dim": "#b8c3ff",
|
||||
"primary": "#002da7",
|
||||
"on-primary-container": "#bcc6ff",
|
||||
"surface-container": "#edeeef",
|
||||
"background": "#f8f9fa",
|
||||
"on-secondary-container": "#002780",
|
||||
"surface-container-low": "#f3f4f5",
|
||||
"secondary-fixed": "#dce1ff",
|
||||
"on-background": "#191c1d",
|
||||
"on-secondary": "#ffffff",
|
||||
"on-primary": "#ffffff",
|
||||
"on-surface-variant": "#444655",
|
||||
"secondary-container": "#7593fd",
|
||||
"error": "#ba1a1a",
|
||||
"tertiary-container": "#9c2d00",
|
||||
"on-tertiary-container": "#ffb9a3",
|
||||
"surface-container-high": "#e7e8e9",
|
||||
"on-tertiary-fixed-variant": "#842500",
|
||||
"outline-variant": "#c4c5d7",
|
||||
"surface-bright": "#f8f9fa",
|
||||
"on-tertiary-fixed": "#3a0b00",
|
||||
"surface-variant": "#e1e3e4",
|
||||
"surface-container-highest": "#e1e3e4"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline": ["Manrope"],
|
||||
"body": ["Inter"],
|
||||
"label": ["Inter"]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
vertical-align: middle;
|
||||
}
|
||||
body { font-family: 'Inter', sans-serif; }
|
||||
h1, h2, h3, h4 { font-family: 'Manrope', sans-serif; }
|
||||
body { min-height: 100dvh; }
|
||||
/* Smooth scanning guide for timeline */
|
||||
.timeline-line {
|
||||
background: linear-gradient(to bottom, #002da7 0%, #e1e3e4 100%);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface text-on-surface">
|
||||
<!-- Top Navigation Bar -->
|
||||
<nav class="fixed top-0 w-full z-50 bg-white/90 backdrop-blur-xl border-b border-outline-variant/10 h-16 md:h-20">
|
||||
<div class="flex justify-between items-center max-w-7xl mx-auto px-6 h-full">
|
||||
<span class="text-xl md:text-2xl font-bold tracking-tighter text-slate-900">Kristijan Popovski</span>
|
||||
<div class="hidden md:flex gap-8 items-center">
|
||||
<a class="text-slate-600 hover:text-blue-600 transition-colors font-manrope font-bold tracking-tight text-lg" href="#">Home</a>
|
||||
<a class="text-slate-600 hover:text-blue-600 transition-colors font-manrope font-bold tracking-tight text-lg" href="#">Projects</a>
|
||||
<a class="text-blue-700 border-b-2 border-blue-700 pb-1 font-manrope font-bold tracking-tight text-lg" href="#">CV</a>
|
||||
<a class="text-slate-600 hover:text-blue-600 transition-colors font-manrope font-bold tracking-tight text-lg" href="#">Contact</a>
|
||||
<button class="bg-primary text-on-primary px-6 py-2.5 rounded-xl font-manrope font-bold text-sm scale-95 active:scale-90 transition-transform">Get in Touch</button>
|
||||
</div>
|
||||
<!-- Mobile Menu Toggle -->
|
||||
<div class="md:hidden">
|
||||
<span class="material-symbols-outlined text-primary text-3xl">menu</span>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<main class="pt-24 md:pt-32 pb-24 px-6 max-w-2xl mx-auto">
|
||||
<!-- Header Section -->
|
||||
<header class="mb-16">
|
||||
<h1 class="text-5xl md:text-[3.5rem] leading-tight font-extrabold tracking-tighter text-primary mb-6">Curriculum Vitae</h1>
|
||||
<p class="text-on-surface-variant text-lg leading-relaxed mb-10">
|
||||
BA of Business and Economics <span class="mx-2 text-primary/30">•</span> MSc in Business and Organisation (IMB)
|
||||
</p>
|
||||
<!-- Prominent Download Buttons - Enhanced Tap Targets -->
|
||||
<div class="flex flex-col gap-4">
|
||||
<button class="w-full bg-surface-tint bg-gradient-to-r from-primary to-primary-container text-on-primary rounded-2xl py-5 flex items-center justify-center gap-3 shadow-lg shadow-primary/20 active:scale-[0.98] transition-all">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">download</span>
|
||||
<span class="font-headline font-bold uppercase tracking-wider text-sm">Download Full CV</span>
|
||||
</button>
|
||||
<button class="w-full bg-white text-primary border-2 border-primary/10 rounded-2xl py-5 flex items-center justify-center gap-3 shadow-sm active:scale-[0.98] transition-all">
|
||||
<span class="material-symbols-outlined">description</span>
|
||||
<span class="font-headline font-bold uppercase tracking-wider text-sm">Download One-Page CV</span>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Experience Section -->
|
||||
<section class="mb-20">
|
||||
<div class="flex items-center gap-4 mb-10">
|
||||
<div class="h-1 w-10 bg-primary rounded-full"></div>
|
||||
<h2 class="text-2xl font-extrabold tracking-tight text-on-surface uppercase">Work Experience</h2>
|
||||
</div>
|
||||
<div class="space-y-16 relative">
|
||||
<div class="absolute left-[14px] top-2 bottom-0 w-[3px] timeline-line opacity-20"></div>
|
||||
<!-- Founder -->
|
||||
<div class="relative pl-14">
|
||||
<div class="absolute left-0 top-1 w-8 h-8 rounded-full bg-white border-[3px] border-primary flex items-center justify-center z-10 shadow-sm">
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-primary"></div>
|
||||
</div>
|
||||
<span class="font-label text-xs font-black tracking-widest text-primary uppercase block mb-3">2022 — NOW</span>
|
||||
<h3 class="text-2xl font-bold text-on-surface mb-2">Founder and President</h3>
|
||||
<p class="text-secondary font-semibold text-base mb-6">Macedonian Student Organisation in Slovenia</p>
|
||||
<div class="bg-white/50 rounded-2xl p-5 border border-outline-variant/10 shadow-sm">
|
||||
<p class="text-on-surface-variant leading-relaxed text-sm">
|
||||
Founded and led a student organisation growing membership to 120+ students. Organized 50+ events with attendance of up to 500 participants.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Board Member -->
|
||||
<div class="relative pl-14">
|
||||
<div class="absolute left-0 top-1 w-8 h-8 rounded-full bg-white border-[3px] border-outline-variant flex items-center justify-center z-10">
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-outline-variant"></div>
|
||||
</div>
|
||||
<span class="font-label text-xs font-black tracking-widest text-on-surface-variant uppercase block mb-3">2021 — NOW</span>
|
||||
<h3 class="text-2xl font-bold text-on-surface mb-2">Board Member</h3>
|
||||
<p class="text-secondary font-semibold text-base mb-6">Leaders for Education, Activism, and Development (LEAD)</p>
|
||||
<div class="bg-white/50 rounded-2xl p-5 border border-outline-variant/10 shadow-sm">
|
||||
<p class="text-on-surface-variant leading-relaxed text-sm">
|
||||
Active member of the Board of LEAD, an NGO focused on empowering youth through education and activism.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- CVS Mobile -->
|
||||
<div class="relative pl-14">
|
||||
<div class="absolute left-0 top-1 w-8 h-8 rounded-full bg-white border-[3px] border-outline-variant flex items-center justify-center z-10">
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-outline-variant"></div>
|
||||
</div>
|
||||
<span class="font-label text-xs font-black tracking-widest text-on-surface-variant uppercase block mb-3">2024 — 2025</span>
|
||||
<h3 class="text-2xl font-bold text-on-surface mb-2">Intern in Finance and Accounting</h3>
|
||||
<p class="text-secondary font-semibold text-base mb-6">CVS Mobile d.d. <span class="text-on-surface-variant/60 font-medium">(a Eurowag company)</span></p>
|
||||
<div class="bg-white/50 rounded-2xl p-5 border border-outline-variant/10 shadow-sm">
|
||||
<p class="text-on-surface-variant leading-relaxed text-sm">
|
||||
Supported finance operations across 4 subsidiaries. Reviewed financial reports, assisted with invoice data processing, and supported daily workflows.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Uni Ljubljana Intern -->
|
||||
<div class="relative pl-14">
|
||||
<div class="absolute left-0 top-1 w-8 h-8 rounded-full bg-white border-[3px] border-outline-variant flex items-center justify-center z-10">
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-outline-variant"></div>
|
||||
</div>
|
||||
<span class="font-label text-xs font-black tracking-widest text-on-surface-variant uppercase block mb-3">2024</span>
|
||||
<h3 class="text-2xl font-bold text-on-surface mb-2">Student Intern</h3>
|
||||
<p class="text-secondary font-semibold text-base mb-6">Dept. for Internationalisation & Strategic Partnerships, Uni Ljubljana</p>
|
||||
<div class="bg-white/50 rounded-2xl p-5 border border-outline-variant/10 shadow-sm">
|
||||
<p class="text-on-surface-variant leading-relaxed text-sm">
|
||||
Organized webinars for incoming students, prepared data reports, and supported regional university cooperation.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Education Section -->
|
||||
<section class="mb-20">
|
||||
<div class="flex items-center gap-4 mb-10">
|
||||
<div class="h-1 w-10 bg-primary rounded-full"></div>
|
||||
<h2 class="text-2xl font-extrabold tracking-tight text-on-surface uppercase">Education</h2>
|
||||
</div>
|
||||
<div class="space-y-8">
|
||||
<!-- University of Ljubljana -->
|
||||
<div class="bg-white rounded-2xl p-8 border border-outline-variant/10 shadow-sm">
|
||||
<div class="flex gap-5">
|
||||
<div class="bg-primary/5 p-3 rounded-xl h-fit">
|
||||
<span class="material-symbols-outlined text-primary text-3xl">school</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h4 class="text-lg font-extrabold text-on-surface leading-snug">University of Ljubljana</h4>
|
||||
<p class="text-primary font-bold text-sm mt-1">School of Economics and Business</p>
|
||||
<p class="text-on-surface-variant text-xs font-black mt-2 tracking-widest uppercase opacity-60">2022 — 2026</p>
|
||||
<div class="mt-8 space-y-6">
|
||||
<div class="relative pl-4 border-l-2 border-primary/20">
|
||||
<p class="font-bold text-base text-on-surface">MSc in Business and Organisation (IMB)</p>
|
||||
<p class="text-sm text-secondary mt-1 font-medium italic">Ranked 44th globally – Financial Times MiM 2025</p>
|
||||
</div>
|
||||
<div class="relative pl-4 border-l-2 border-primary/20">
|
||||
<p class="font-bold text-base text-on-surface">Bachelor's Degree in Economics and Business</p>
|
||||
<p class="text-sm text-on-surface-variant mt-1">Major in Entrepreneurship (2017—2022)</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Summer School -->
|
||||
<div class="bg-white rounded-2xl p-6 border border-outline-variant/10 shadow-sm">
|
||||
<div class="flex gap-5 items-center">
|
||||
<div class="bg-primary/5 p-3 rounded-xl">
|
||||
<span class="material-symbols-outlined text-primary text-2xl">history_edu</span>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-bold text-on-surface">Resilient Cities Summer School</h4>
|
||||
<p class="text-on-surface-variant text-sm mt-0.5">Slovak University of Technology <span class="mx-1">•</span> 2024</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- High School -->
|
||||
<div class="bg-white rounded-2xl p-6 border border-outline-variant/10 shadow-sm">
|
||||
<div class="flex gap-5 items-center">
|
||||
<div class="bg-primary/5 p-3 rounded-xl">
|
||||
<span class="material-symbols-outlined text-primary text-2xl">school</span>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-bold text-on-surface">High School "Nikola Karev" Skopje</h4>
|
||||
<p class="text-on-surface-variant text-sm mt-0.5">Natural Sciences & Mathematics <span class="mx-1">•</span> 2017 — 2021</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Leadership Section -->
|
||||
<section class="mb-20">
|
||||
<div class="flex items-center gap-4 mb-10">
|
||||
<div class="h-1 w-10 bg-primary rounded-full"></div>
|
||||
<h2 class="text-2xl font-extrabold tracking-tight text-on-surface uppercase leading-tight">Leadership & Involvement</h2>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 gap-5">
|
||||
<div class="p-6 bg-white border border-outline-variant/10 rounded-2xl shadow-sm flex gap-5 active:bg-surface-container transition-colors">
|
||||
<span class="material-symbols-outlined text-primary text-3xl">public</span>
|
||||
<div>
|
||||
<h4 class="font-bold text-on-surface mb-2 text-lg">International Student Ambassador</h4>
|
||||
<p class="text-on-surface-variant text-sm leading-relaxed">One-on-one mentorship for prospective students at University of Ljubljana.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-6 bg-white border border-outline-variant/10 rounded-2xl shadow-sm flex gap-5 active:bg-surface-container transition-colors">
|
||||
<span class="material-symbols-outlined text-primary text-3xl">account_balance</span>
|
||||
<div>
|
||||
<h4 class="font-bold text-on-surface mb-2 text-lg">Student Representation & Governance</h4>
|
||||
<p class="text-on-surface-variant text-sm leading-relaxed">Elected Student Representative (~5,000 students) and Senate Member.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-6 bg-white border border-outline-variant/10 rounded-2xl shadow-sm flex gap-5 active:bg-surface-container transition-colors">
|
||||
<span class="material-symbols-outlined text-primary text-3xl">volunteer_activism</span>
|
||||
<div>
|
||||
<h4 class="font-bold text-on-surface mb-2 text-lg">Volunteering & Humanitarian</h4>
|
||||
<p class="text-on-surface-variant text-sm leading-relaxed">Red Cross Youth Club member and High School Student Council President.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-6 bg-white border border-outline-variant/10 rounded-2xl shadow-sm flex gap-5 active:bg-surface-container transition-colors">
|
||||
<span class="material-symbols-outlined text-primary text-3xl">assignment</span>
|
||||
<div>
|
||||
<h4 class="font-bold text-on-surface mb-2 text-lg">Selected Projects</h4>
|
||||
<p class="text-on-surface-variant text-sm leading-relaxed">22nd Int. Youth Conference Krushevo; Consultant for ATech Electronics.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Skills & Languages -->
|
||||
<section class="mb-20 space-y-8">
|
||||
<div class="bg-surface-container-lowest rounded-2xl p-8 border border-outline-variant/15 shadow-sm">
|
||||
<div class="flex items-center gap-3 mb-8 text-primary">
|
||||
<span class="material-symbols-outlined text-3xl">terminal</span>
|
||||
<h2 class="text-xl font-extrabold uppercase tracking-tight">Hard Skills</h2>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-3">
|
||||
<span class="px-4 py-2 bg-primary-fixed text-on-primary-fixed rounded-xl text-xs font-bold tracking-wide uppercase shadow-sm">Microsoft Office 365</span>
|
||||
<span class="px-4 py-2 bg-primary-fixed text-on-primary-fixed rounded-xl text-xs font-bold tracking-wide uppercase shadow-sm">Microsoft Dynamics NAV</span>
|
||||
<span class="px-4 py-2 bg-primary-fixed text-on-primary-fixed rounded-xl text-xs font-bold tracking-wide uppercase shadow-sm">ChatGPT</span>
|
||||
<span class="px-4 py-2 bg-primary-fixed text-on-primary-fixed rounded-xl text-xs font-bold tracking-wide uppercase shadow-sm">Canva.com</span>
|
||||
<span class="px-4 py-2 bg-primary-fixed text-on-primary-fixed rounded-xl text-xs font-bold tracking-wide uppercase shadow-sm">Cluster Analysis</span>
|
||||
<span class="px-4 py-2 bg-primary-fixed text-on-primary-fixed rounded-xl text-xs font-bold tracking-wide uppercase shadow-sm">Segmentation</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 gap-8">
|
||||
<div class="bg-primary text-on-primary rounded-2xl p-8 shadow-xl shadow-primary/20 overflow-hidden relative">
|
||||
<div class="absolute top-0 right-0 p-4 opacity-10">
|
||||
<span class="material-symbols-outlined text-8xl" style="font-variation-settings: 'FILL' 1;">workspace_premium</span>
|
||||
</div>
|
||||
<div class="relative z-10">
|
||||
<div class="flex items-center gap-3 mb-6">
|
||||
<span class="material-symbols-outlined text-2xl">workspace_premium</span>
|
||||
<h2 class="font-black uppercase text-xs tracking-[0.2em] opacity-80">Honors & Awards</h2>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-[10px] font-black tracking-[0.2em] opacity-60 uppercase mb-2 block">2021 RECOGNITION</span>
|
||||
<h4 class="font-extrabold text-2xl leading-tight mb-4">Top Graduate of Generation 2017-2021</h4>
|
||||
<p class="text-sm opacity-90 leading-relaxed font-medium">Awarded recognition by the Mayor of the City of Skopje as the top graduate of High School Gymnasium "Nikola Karev".</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-2xl p-8 border border-outline-variant/10 shadow-sm">
|
||||
<div class="flex items-center gap-3 mb-8 text-primary">
|
||||
<span class="material-symbols-outlined text-2xl">translate</span>
|
||||
<h2 class="font-black uppercase text-xs tracking-[0.2em]">Languages</h2>
|
||||
</div>
|
||||
<div class="space-y-6">
|
||||
<div>
|
||||
<div class="flex justify-between items-center mb-2">
|
||||
<span class="font-bold text-sm text-on-surface">Macedonian</span>
|
||||
<span class="text-[10px] font-black text-primary uppercase tracking-widest bg-primary/10 px-2 py-0.5 rounded">Native</span>
|
||||
</div>
|
||||
<div class="h-2 w-full bg-outline-variant/10 rounded-full overflow-hidden">
|
||||
<div class="h-full bg-primary w-full rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex justify-between items-center mb-2">
|
||||
<span class="font-bold text-sm text-on-surface">English</span>
|
||||
<span class="text-[10px] font-black text-on-surface-variant uppercase tracking-widest">B2 Level</span>
|
||||
</div>
|
||||
<div class="h-2 w-full bg-outline-variant/10 rounded-full overflow-hidden">
|
||||
<div class="h-full bg-primary w-[75%] rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex justify-between items-center mb-2">
|
||||
<span class="font-bold text-sm text-on-surface">Slovenian</span>
|
||||
<span class="text-[10px] font-black text-on-surface-variant uppercase tracking-widest">B2 Level</span>
|
||||
</div>
|
||||
<div class="h-2 w-full bg-outline-variant/10 rounded-full overflow-hidden">
|
||||
<div class="h-full bg-primary w-[75%] rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex justify-between items-center mb-2">
|
||||
<span class="font-bold text-sm text-on-surface">Serbo-Croatian</span>
|
||||
<span class="text-[10px] font-black text-on-surface-variant uppercase tracking-widest">B2 Level</span>
|
||||
</div>
|
||||
<div class="h-2 w-full bg-outline-variant/10 rounded-full overflow-hidden">
|
||||
<div class="h-full bg-primary w-[75%] rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex justify-between items-center mb-2">
|
||||
<span class="font-bold text-sm text-on-surface">French</span>
|
||||
<span class="text-[10px] font-black text-on-surface-variant uppercase tracking-widest">A2 Level</span>
|
||||
</div>
|
||||
<div class="h-2 w-full bg-outline-variant/10 rounded-full overflow-hidden">
|
||||
<div class="h-full bg-primary w-[40%] rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Quote/Visual Section -->
|
||||
<section class="mb-20">
|
||||
<div class="relative rounded-[2.5rem] overflow-hidden min-h-[220px] bg-white flex items-center justify-center p-10 border border-outline-variant/10 shadow-sm">
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-primary/5 to-transparent"></div>
|
||||
<img alt="Professional Profile Background" class="absolute inset-0 w-full h-full object-cover opacity-10 mix-blend-multiply" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDiX_URlQY5YoyfUrTchlNjd9nlLPqXnhHCMlZM9q1-PfrIG65dlYBDl0_qKYKxt-U2BmgnTdbibir0fM7vtV0vUc7ihPjS6k5cHNeJRF2f4hDJdWZWQrPAV6TWfEns7KqupxiJQ0PeBt16368e54TqFCiFsPOpZwUBK-9T7iqBmjejQ75wju6UGp2NnsZFDbuNnJoIFk4QY4Yn8MNXJp3ghZgFHh823Lc5sxm_8MJWOjFOEaQ6Kmf1fISfeAMh1_YEwgF6Xik0bUw"/>
|
||||
<div class="relative text-center max-w-sm">
|
||||
<span class="material-symbols-outlined text-primary/20 text-5xl absolute -top-10 left-1/2 -translate-x-1/2">format_quote</span>
|
||||
<p class="font-headline italic text-xl md:text-2xl text-primary font-bold leading-relaxed">
|
||||
"Building a career in management and leadership."
|
||||
</p>
|
||||
<div class="mt-6 h-1 w-12 bg-primary mx-auto rounded-full opacity-30"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<!-- Footer -->
|
||||
<footer class="bg-white border-t border-outline-variant/10 pt-20 pb-28 md:pb-20 px-8">
|
||||
<div class="max-w-7xl mx-auto flex flex-col items-center text-center">
|
||||
<span class="font-extrabold text-3xl tracking-tighter text-slate-900 block mb-4">Kristijan Popovski</span>
|
||||
<p class="text-sm text-on-surface-variant font-medium mb-10 max-w-xs leading-relaxed">
|
||||
© 2024. Dedicated to excellence in business and organisational growth.
|
||||
</p>
|
||||
<div class="flex flex-wrap justify-center gap-x-8 gap-y-4">
|
||||
<a class="text-sm font-bold text-on-surface-variant hover:text-primary transition-colors flex items-center gap-2" href="#">
|
||||
<span class="w-1 h-1 bg-primary rounded-full"></span> LinkedIn
|
||||
</a>
|
||||
<a class="text-sm font-bold text-on-surface-variant hover:text-primary transition-colors flex items-center gap-2" href="#">
|
||||
<span class="w-1 h-1 bg-primary rounded-full"></span> Instagram
|
||||
</a>
|
||||
<a class="text-sm font-bold text-on-surface-variant hover:text-primary transition-colors flex items-center gap-2" href="mailto:popovskik02@yahoo.com">
|
||||
<span class="w-1 h-1 bg-primary rounded-full"></span> Email
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- Mobile Navigation Shell - Enhanced Bottom Bar -->
|
||||
<div class="fixed bottom-0 left-0 right-0 bg-white/95 backdrop-blur-2xl md:hidden z-50 flex justify-around items-center h-20 border-t border-outline-variant/10 px-2 pb-2">
|
||||
<a class="flex flex-col items-center justify-center gap-1 w-full h-full text-slate-400 active:scale-95 transition-all" href="#">
|
||||
<span class="material-symbols-outlined text-2xl">home</span>
|
||||
<span class="text-[10px] font-black uppercase tracking-widest">Home</span>
|
||||
</a>
|
||||
<a class="flex flex-col items-center justify-center gap-1 w-full h-full text-slate-400 active:scale-95 transition-all" href="#">
|
||||
<span class="material-symbols-outlined text-2xl">work</span>
|
||||
<span class="text-[10px] font-black uppercase tracking-widest">Projects</span>
|
||||
</a>
|
||||
<a class="flex flex-col items-center justify-center gap-1 w-full h-full text-primary active:scale-95 transition-all" href="#">
|
||||
<div class="bg-primary/10 px-4 py-1.5 rounded-full flex flex-col items-center">
|
||||
<span class="material-symbols-outlined text-2xl" style="font-variation-settings: 'FILL' 1;">description</span>
|
||||
<span class="text-[10px] font-black uppercase tracking-widest">CV</span>
|
||||
</div>
|
||||
</a>
|
||||
<a class="flex flex-col items-center justify-center gap-1 w-full h-full text-slate-400 active:scale-95 transition-all" href="#">
|
||||
<span class="material-symbols-outlined text-2xl">alternate_email</span>
|
||||
<span class="text-[10px] font-black uppercase tracking-widest">Contact</span>
|
||||
</a>
|
||||
</div>
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 82 KiB |
|
|
@ -0,0 +1,91 @@
|
|||
# Design System Document: High-End Personal Brand Portfolio
|
||||
|
||||
## 1. Overview & Creative North Star
|
||||
**Creative North Star: "The Institutional Architect"**
|
||||
|
||||
This design system is engineered to position Kristijan Popovski not just as a professional, but as an authority. Moving away from the "loud" and high-energy tropes of startup culture, this system embraces **Institutional Luxury**. It draws inspiration from Apple’s relentless pursuit of clarity and the structured, credible aesthetic of global financial and academic institutions.
|
||||
|
||||
The "Architect" personality is expressed through:
|
||||
* **Intentional Asymmetry:** Breaking the standard 12-column rigidity to create editorial-style layouts that guide the eye.
|
||||
* **Calm Authority:** Using a palette of deep royal blues and soft light accents to evoke trust and forward-looking stability.
|
||||
* **Generous Negative Space:** Spacing is treated as a premium material, used to separate complex ideas without the need for visual clutter.
|
||||
|
||||
---
|
||||
|
||||
## 2. Colors
|
||||
The palette is a sophisticated blend of deep corporate blues and atmospheric surface tones. It is designed to be "felt" rather than just seen, creating a sense of professional depth.
|
||||
|
||||
### Core Tokens
|
||||
* **Primary (`#002da7`):** The Royal Blue. Used for primary CTAs and key brand moments.
|
||||
* **Primary Container (`#1a44d1`):** A vibrant bridge used for hover states and subtle gradients.
|
||||
* **Secondary (`#3657be`):** The soft light blue accent, inspired by the banner gradient, used for secondary actions and iconography.
|
||||
* **Surface (`#f8f9fa`):** The off-white bedrock of the brand.
|
||||
* **On-Surface (`#191c1d`):** A deep, near-black charcoal for maximum readability and a high-trust institutional feel.
|
||||
|
||||
### The "No-Line" Rule
|
||||
To maintain a high-end feel, **1px solid borders are strictly prohibited** for sectioning. Boundaries must be defined solely through:
|
||||
1. **Background Shifts:** Transitioning from `surface` to `surface-container-low`.
|
||||
2. **Tonal Transitions:** Utilizing subtle 15-degree linear gradients (Primary to Primary-Container) for hero areas or massive CTAs.
|
||||
|
||||
### Signature Textures & Glass
|
||||
Utilize **Glassmorphism** for navigation bars and floating cards. Use a semi-transparent `surface-container-lowest` (80% opacity) with a `24px` backdrop-blur. This ensures the background color bleeds through, making the interface feel integrated and organic.
|
||||
|
||||
---
|
||||
|
||||
## 3. Typography
|
||||
The typography system uses a dual-font strategy: **Manrope** for authoritative headlines and **Inter** for precision-focused body text.
|
||||
|
||||
* **Display Large (`Manrope`, 3.5rem):** Set with a tight letter-spacing (-0.02em) to feel impactful and modern.
|
||||
* **Headline Medium (`Manrope`, 1.75rem):** Used for section headers. These should always sit above a substantial 40px–64px top margin to allow the title to breathe.
|
||||
* **Body Large (`Inter`, 1rem):** The workhorse. Set with a generous `1.6` line-height to ensure institutional-level readability.
|
||||
* **Label Medium (`Inter`, 0.75rem):** Used for metadata, dates, or small tags. Always set in uppercase with +0.05em tracking for a "premium logotype" feel.
|
||||
|
||||
---
|
||||
|
||||
## 4. Elevation & Depth
|
||||
Depth is achieved through **Tonal Layering** rather than traditional drop shadows.
|
||||
|
||||
* **The Layering Principle:** Stack `surface-container` tiers. For example:
|
||||
* *Base:* `surface`
|
||||
* *Content Block:* `surface-container-low`
|
||||
* *Floating Card:* `surface-container-lowest`
|
||||
* **Ambient Shadows:** When a shadow is required for a floating component (like a portrait card inspired by Image 3), use an extra-diffused shadow: `box-shadow: 0 10px 40px rgba(0, 45, 167, 0.05);`. This subtle blue tint mimics natural light refracting through glass.
|
||||
* **The "Ghost Border":** If accessibility requires a stroke, use `outline-variant` (`#c4c5d7`) at **15% opacity**. It should be felt as a change in texture, not a hard line.
|
||||
|
||||
---
|
||||
|
||||
## 5. Components
|
||||
|
||||
### Primary Buttons
|
||||
* **Style:** `surface-tint` (`#2a4fdb`) background with a subtle gradient to `primary`.
|
||||
* **Corner Radius:** `xl` (0.75rem) for a modern, approachable feel.
|
||||
* **Typography:** `title-sm`, white text, centered.
|
||||
* **Interaction:** On hover, slightly increase the gradient intensity and apply the Ambient Shadow.
|
||||
|
||||
### Experience Cards
|
||||
* **Layout:** Drawing from the structured nature of Image 1, cards should avoid dividers. Use a vertical spacing of `32px` between items.
|
||||
* **Styling:** A `surface-container-lowest` background with a `Ghost Border`.
|
||||
* **Timeline Element:** Use a 2px vertical line in `outline-variant` (20% opacity) to connect dates, keeping it institutional and discrete.
|
||||
|
||||
### Hero Styling (Inspired by Image 3)
|
||||
* **The Portrait Frame:** The subject (Kristijan) should be placed on a soft, light-blue tinted background (`surface-container-low`).
|
||||
* **Asymmetric Overlay:** The name should overlap the portrait slightly using a glassmorphic tag, utilizing the `surface-container-lowest` token with backdrop-blur.
|
||||
|
||||
### Input Fields
|
||||
* **Style:** Minimalist. No solid box; use a `surface-container-high` background with a bottom-only `outline-variant` stroke (30% opacity).
|
||||
* **Focus State:** The stroke transitions to `primary` with a 2px thickness.
|
||||
|
||||
---
|
||||
|
||||
## 6. Do's and Don'ts
|
||||
|
||||
### Do
|
||||
* **Use Generous White Space:** If you think there is enough space between sections, add 20% more. Space = Premium.
|
||||
* **Layer Tones:** Use the difference between `#ffffff` and `#f8f9fa` to define functional areas.
|
||||
* **Maintain Hierarchy:** Headlines should be significantly larger and heavier than body text to convey leadership.
|
||||
|
||||
### Don't
|
||||
* **No "Startup Blue":** Avoid neon or overly bright blues. Stick to the deep, credible tones of the Royal Blue (`#002da7`).
|
||||
* **No Traditional Dividers:** Never use a solid 1px line to separate "Education" from "Experience." Use a background color shift instead.
|
||||
* **No Sharp Corners:** Avoid the `none` roundedness. Use `xl` or `lg` to maintain a modern, friendly corporate tone.
|
||||
* **No Harsh Shadows:** Never use black or dark grey shadows. Shadows must always be low-opacity and tinted with the primary blue.
|
||||
|
|
@ -0,0 +1,421 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<html class="scroll-smooth" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Kristijan Popovski | Strategic Leadership & Execution</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Manrope:wght@600;700;800&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"tertiary": "#741f00",
|
||||
"surface": "#f8f9fa",
|
||||
"surface-dim": "#d9dadb",
|
||||
"on-error": "#ffffff",
|
||||
"tertiary-fixed-dim": "#ffb59e",
|
||||
"on-primary-fixed": "#001356",
|
||||
"primary-fixed": "#dde1ff",
|
||||
"primary-container": "#1a44d1",
|
||||
"surface-tint": "#002da7",
|
||||
"on-primary-fixed-variant": "#0035be",
|
||||
"outline": "#747686",
|
||||
"on-secondary-fixed": "#001550",
|
||||
"inverse-primary": "#b8c3ff",
|
||||
"inverse-on-surface": "#f0f1f2",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"on-surface": "#191c1d",
|
||||
"secondary-fixed-dim": "#b6c4ff",
|
||||
"tertiary-fixed": "#ffdbd0",
|
||||
"on-error-container": "#93000a",
|
||||
"on-secondary-fixed-variant": "#163da5",
|
||||
"error-container": "#ffdad6",
|
||||
"on-tertiary": "#ffffff",
|
||||
"inverse-surface": "#2e3132",
|
||||
"secondary": "#3657be",
|
||||
"primary-fixed-dim": "#b8c3ff",
|
||||
"primary": "#002da7",
|
||||
"on-primary-container": "#bcc6ff",
|
||||
"surface-container": "#edeeef",
|
||||
"background": "#f8f9fa",
|
||||
"on-secondary-container": "#002780",
|
||||
"surface-container-low": "#f3f4f5",
|
||||
"secondary-fixed": "#dce1ff",
|
||||
"on-background": "#191c1d",
|
||||
"on-secondary": "#ffffff",
|
||||
"on-primary": "#ffffff",
|
||||
"on-surface-variant": "#444655",
|
||||
"secondary-container": "#7593fd",
|
||||
"error": "#ba1a1a",
|
||||
"tertiary-container": "#9c2d00",
|
||||
"on-tertiary-container": "#ffb9a3",
|
||||
"surface-container-high": "#e7e8e9",
|
||||
"on-tertiary-fixed-variant": "#842500",
|
||||
"outline-variant": "#c4c5d7",
|
||||
"surface-bright": "#f8f9fa",
|
||||
"on-tertiary-fixed": "#3a0b00",
|
||||
"surface-variant": "#e1e3e4",
|
||||
"surface-container-highest": "#e1e3e4"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"2xl": "1rem",
|
||||
"3xl": "1.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline": ["Manrope", "sans-serif"],
|
||||
"body": ["Inter", "sans-serif"],
|
||||
"label": ["Inter", "sans-serif"]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.glass-nav {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
.text-azure { color: #002da7; }
|
||||
.bg-azure { background-color: #002da7; }
|
||||
.heading-tight { letter-spacing: -0.02em; line-height: 1.15; }
|
||||
.body-loose { line-height: 1.75; }
|
||||
.card-hover { transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
|
||||
.card-hover:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -10px rgba(0,45,167,0.08); border-color: rgba(0,45,167,0.2); }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface font-body text-on-surface selection:bg-primary-fixed selection:text-on-primary-fixed">
|
||||
<!-- Top Navigation Bar -->
|
||||
<nav class="fixed top-0 w-full z-50 glass-nav border-b border-outline-variant/30">
|
||||
<div class="flex justify-between items-center max-w-7xl mx-auto px-6 md:px-12 h-20">
|
||||
<div class="text-2xl font-headline font-extrabold tracking-tighter text-slate-900">
|
||||
Kristijan Popovski
|
||||
</div>
|
||||
<div class="hidden md:flex items-center gap-10">
|
||||
<a class="font-headline font-bold text-sm tracking-tight text-primary relative after:absolute after:bottom-[-4px] after:left-0 after:w-full after:h-0.5 after:bg-primary" href="#">Home</a>
|
||||
<a class="font-headline font-bold text-sm tracking-tight text-slate-500 hover:text-primary transition-colors" href="#">Projects</a>
|
||||
<a class="font-headline font-bold text-sm tracking-tight text-slate-500 hover:text-primary transition-colors" href="#">CV</a>
|
||||
<a class="font-headline font-bold text-sm tracking-tight text-slate-500 hover:text-primary transition-colors" href="#">Contact</a>
|
||||
</div>
|
||||
<button class="bg-primary text-white px-7 py-2.5 rounded-2xl font-headline font-bold text-sm tracking-tight hover:bg-primary-container transition-all shadow-lg shadow-primary/10">
|
||||
Get in Touch
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
<main class="pt-20">
|
||||
<!-- Hero Section -->
|
||||
<section class="relative overflow-hidden pt-32 pb-48 lg:pt-40 lg:pb-56">
|
||||
<div class="max-w-7xl mx-auto px-6 md:px-12 flex flex-col md:flex-row items-center gap-20">
|
||||
<div class="w-full md:w-[55%]">
|
||||
<div class="inline-flex items-center gap-2 px-3 py-1 bg-primary/10 text-primary rounded-lg text-xs font-bold tracking-widest uppercase mb-8">
|
||||
<span class="w-2 h-2 rounded-full bg-primary animate-pulse"></span>
|
||||
Strategic Leadership
|
||||
</div>
|
||||
<h1 class="text-6xl md:text-7xl lg:text-8xl font-headline font-extrabold heading-tight text-slate-950 mb-10">
|
||||
Structured <br/>leadership. <br/>
|
||||
<span class="text-primary italic">Strategic thinking.</span>
|
||||
</h1>
|
||||
<p class="text-xl text-on-surface-variant body-loose max-w-xl mb-12">
|
||||
Delivering institutional excellence across governance and business. From high-level policy to meticulous operational execution.
|
||||
</p>
|
||||
<div class="flex flex-wrap gap-5">
|
||||
<button class="bg-primary text-white px-10 py-5 rounded-2xl font-headline font-extrabold text-base transition-all duration-300 hover:shadow-2xl hover:shadow-primary/30 hover:-translate-y-1">
|
||||
Download CV
|
||||
</button>
|
||||
<button class="bg-transparent text-primary border-2 border-primary/20 px-10 py-5 rounded-2xl font-headline font-extrabold text-base transition-all duration-300 hover:bg-primary/5 hover:border-primary">
|
||||
Get in touch
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-[45%] relative">
|
||||
<div class="aspect-[5/6] rounded-[2.5rem] bg-surface-container-low overflow-hidden shadow-2xl relative group">
|
||||
<img alt="Kristijan Popovski portrait" class="w-full h-full object-cover transition-transform duration-1000 group-hover:scale-105" src="https://lh3.googleusercontent.com/aida/ADBb0ujowhYy2qUM7pe8f3r3QEGEOKEGS0CnP9AfT8Qkbfh4ZTh6rrfiwPRPo4cwlnZQRIjHBuVjNabhh49DcG11Xp9F5A1qwLRBcN-tdxdAAwges0dk4DsLi2Vw47gNLBWlGExJLz9dFuA5ln-nIjduGoLr5NL1uCgDZyaGAhTv1OeGqQ0kqQU5e1sRJTxzqyY0BKHXliVbEqg0QPIMHl2P3P9hAa5HNJUkFZfGAVH0vtSpEV8BzS64uCvNDX04x-pDmfyU0e3Jowhkzw"/>
|
||||
<div class="absolute bottom-8 left-8 right-8 glass-nav rounded-3xl p-7 border border-white/40 shadow-xl">
|
||||
<p class="text-[10px] font-bold text-primary uppercase tracking-[0.2em] mb-2">Current Focus</p>
|
||||
<p class="text-slate-900 font-headline font-extrabold text-lg">Institutional Governance & Finance</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Decorative Circle -->
|
||||
<div class="absolute -bottom-10 -right-10 w-40 h-40 bg-primary/5 rounded-full -z-10 blur-3xl"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Background Decor -->
|
||||
<div class="absolute top-0 right-0 -z-10 w-1/3 h-full bg-gradient-to-l from-primary/[0.03] to-transparent"></div>
|
||||
</section>
|
||||
<!-- Metrics Strip -->
|
||||
<section class="bg-primary py-20 relative overflow-hidden">
|
||||
<div class="max-w-7xl mx-auto px-6 md:px-12">
|
||||
<div class="grid grid-cols-2 lg:grid-cols-5 gap-12 lg:gap-8 items-start">
|
||||
<div class="flex flex-col border-l border-primary-fixed/20 pl-6">
|
||||
<span class="text-primary-fixed text-5xl font-headline font-extrabold tracking-tighter mb-2">120+</span>
|
||||
<span class="text-primary-fixed/70 text-xs font-bold uppercase tracking-widest leading-tight">Members built into organization</span>
|
||||
</div>
|
||||
<div class="flex flex-col border-l border-primary-fixed/20 pl-6">
|
||||
<span class="text-primary-fixed text-5xl font-headline font-extrabold tracking-tighter mb-2">50+</span>
|
||||
<span class="text-primary-fixed/70 text-xs font-bold uppercase tracking-widest leading-tight">Events organized globally</span>
|
||||
</div>
|
||||
<div class="flex flex-col border-l border-primary-fixed/20 pl-6">
|
||||
<span class="text-primary-fixed text-5xl font-headline font-extrabold tracking-tighter mb-2">20+</span>
|
||||
<span class="text-primary-fixed/70 text-xs font-bold uppercase tracking-widest leading-tight">Strategic partnerships developed</span>
|
||||
</div>
|
||||
<div class="flex flex-col border-l border-primary-fixed/20 pl-6">
|
||||
<span class="text-primary-fixed text-5xl font-headline font-extrabold tracking-tighter mb-2">Senate</span>
|
||||
<span class="text-primary-fixed/70 text-xs font-bold uppercase tracking-widest leading-tight">Governance roles in university bodies</span>
|
||||
</div>
|
||||
<div class="flex flex-col border-l border-primary-fixed/20 pl-6">
|
||||
<span class="text-primary-fixed text-5xl font-headline font-extrabold tracking-tighter mb-2">Finance</span>
|
||||
<span class="text-primary-fixed/70 text-xs font-bold uppercase tracking-widest leading-tight">Experience in regional tech sector</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Texture overlay -->
|
||||
<div class="absolute inset-0 opacity-10 pointer-events-none" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuAyEKxgsoa0A4NsCVid87Pmv8aTtgYFNB0UH8X_YzjjZTvxWHYEj3Bc9kITTQoqZl2cFIktgsVN4Om9sL3M3Eu8O9dMVDq6kbYKk4E0aIx8V8E2O_w1yqrxWlETspd0p-6cHHn36eO-enjRmAt2cqkCNKVJ2AsxH5OYoHV0v5ua-9_VYr5PaKa0t5yJYQZX3t6F576jni5YwdQLDS6rYixspTxrZ2jjSYedH8nF2AG2JWe0Xu3KyF7MNU9iojZ7BONJSDrxidqG40s');"></div>
|
||||
</section>
|
||||
<!-- Selected Experience -->
|
||||
<section class="py-40 bg-surface">
|
||||
<div class="max-w-7xl mx-auto px-6 md:px-12">
|
||||
<div class="flex flex-col md:flex-row md:items-end justify-between mb-24 gap-8">
|
||||
<div class="max-w-2xl">
|
||||
<div class="w-12 h-1 bg-primary mb-6"></div>
|
||||
<h2 class="text-4xl md:text-5xl font-headline font-extrabold text-slate-950 mb-6">Professional Trajectory</h2>
|
||||
<p class="text-on-surface-variant text-xl body-loose">A track record of leadership in governance, finance, and organizational development.</p>
|
||||
</div>
|
||||
<a class="text-primary font-headline font-extrabold text-lg flex items-center gap-3 group border-b-2 border-primary/10 pb-2 hover:border-primary transition-all" href="#">
|
||||
Full Experience Detail
|
||||
<span class="material-symbols-outlined transition-transform group-hover:translate-x-1">arrow_forward</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-10">
|
||||
<div class="bg-surface-container-lowest p-12 rounded-[2.5rem] border border-outline-variant/10 shadow-sm card-hover">
|
||||
<div class="w-14 h-14 bg-primary/5 rounded-2xl flex items-center justify-center text-primary mb-10">
|
||||
<span class="material-symbols-outlined text-3xl" style="font-variation-settings: 'FILL' 1;">groups</span>
|
||||
</div>
|
||||
<h3 class="text-2xl font-headline font-extrabold text-slate-900 mb-2">Founder & President</h3>
|
||||
<p class="text-primary text-xs font-bold uppercase tracking-[0.2em] mb-8">MSO Slovenia</p>
|
||||
<p class="text-on-surface-variant body-loose text-base">Pioneered and scaled a representative organization from ground up, establishing institutional frameworks and member value cycles.</p>
|
||||
</div>
|
||||
<div class="bg-surface-container-lowest p-12 rounded-[2.5rem] border border-outline-variant/10 shadow-sm card-hover">
|
||||
<div class="w-14 h-14 bg-primary/5 rounded-2xl flex items-center justify-center text-primary mb-10">
|
||||
<span class="material-symbols-outlined text-3xl" style="font-variation-settings: 'FILL' 1;">account_balance</span>
|
||||
</div>
|
||||
<h3 class="text-2xl font-headline font-extrabold text-slate-900 mb-2">Student Representation</h3>
|
||||
<p class="text-primary text-xs font-bold uppercase tracking-[0.2em] mb-8">University of Ljubljana</p>
|
||||
<p class="text-on-surface-variant body-loose text-base">Advocating for institutional excellence within Senate and university bodies, coordinating between faculty and student body stakeholders.</p>
|
||||
</div>
|
||||
<div class="bg-surface-container-lowest p-12 rounded-[2.5rem] border border-outline-variant/10 shadow-sm card-hover">
|
||||
<div class="w-14 h-14 bg-primary/5 rounded-2xl flex items-center justify-center text-primary mb-10">
|
||||
<span class="material-symbols-outlined text-3xl" style="font-variation-settings: 'FILL' 1;">trending_up</span>
|
||||
</div>
|
||||
<h3 class="text-2xl font-headline font-extrabold text-slate-900 mb-2">Finance & Operations</h3>
|
||||
<p class="text-primary text-xs font-bold uppercase tracking-[0.2em] mb-8">CVS Mobile / Eurowag</p>
|
||||
<p class="text-on-surface-variant body-loose text-base">Driving business insight and financial coordination within a leading regional tech group, focusing on operational transparency.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Focus Areas -->
|
||||
<section class="py-40 bg-surface-container-low/50">
|
||||
<div class="max-w-7xl mx-auto px-6 md:px-12">
|
||||
<div class="mb-24 text-center max-w-3xl mx-auto">
|
||||
<span class="text-primary text-xs font-bold uppercase tracking-[0.3em] mb-6 block">Areas of Expertise</span>
|
||||
<h2 class="text-4xl md:text-5xl font-headline font-extrabold text-slate-950 mb-8">Focus Areas</h2>
|
||||
<p class="text-on-surface-variant text-xl body-loose">Expertise built on the intersection of structured policy, management, and commercial logic.</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-12 gap-10">
|
||||
<!-- Strategy & Governance -->
|
||||
<div class="md:col-span-7 bg-surface-container-lowest rounded-[3rem] p-12 border border-outline-variant/10 flex flex-col lg:flex-row gap-12 items-center card-hover">
|
||||
<div class="lg:w-[55%]">
|
||||
<h3 class="text-3xl font-headline font-extrabold text-slate-900 mb-6">Strategy & Governance</h3>
|
||||
<p class="text-on-surface-variant body-loose mb-10">Building robust frameworks for organizations to thrive. Expertise in institutional policy, stakeholder management, and long-term design.</p>
|
||||
<ul class="space-y-4">
|
||||
<li class="flex items-center gap-4 text-base font-bold text-primary">
|
||||
<span class="material-symbols-outlined text-xl">verified</span> Policy Framework Design
|
||||
</li>
|
||||
<li class="flex items-center gap-4 text-base font-bold text-primary">
|
||||
<span class="material-symbols-outlined text-xl">verified</span> Stakeholder Coordination
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="lg:w-[45%] w-full bg-surface-container rounded-[2rem] overflow-hidden aspect-square">
|
||||
<img alt="Strategic planning" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDA1WHP3_nzEGV6DVUh_YxJ17ZkVejRbix5E-rG_k9p1-Zbvb4qciYyIt1sdlBa3JuLadb9U4CAvyk5wNJKNKfnASdsWhkWROLz0SNNayeSDeU_s-p-YlPrTHAg6YLd9ithVC2sEW3PTj1-4ouADIy1UH2_tLsnPuKbcyNqcUZQes3vEM3Y9sSALLUOJdKO9eiL66osieCGWnJdHSAux7tPS3H7Z9iLruXcyfJPylwnjh2CXi9a_M8fvsEVR0HqaE52dBtrcPU7ATg"/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Finance & Business Insight -->
|
||||
<div class="md:col-span-5 bg-primary text-white rounded-[3rem] p-12 flex flex-col justify-between group hover:shadow-2xl transition-all duration-500 overflow-hidden relative">
|
||||
<div class="relative z-10">
|
||||
<h3 class="text-3xl font-headline font-extrabold mb-6">Finance & Business Insight</h3>
|
||||
<p class="text-primary-fixed/80 body-loose text-base">Managing the numbers that move organizations. Precision in financial operations and business modeling.</p>
|
||||
</div>
|
||||
<div class="mt-20 flex items-center justify-between relative z-10">
|
||||
<div class="w-16 h-16 bg-white/10 rounded-2xl flex items-center justify-center backdrop-blur-sm">
|
||||
<span class="material-symbols-outlined text-4xl">query_stats</span>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-3xl transform group-hover:translate-x-1 group-hover:-translate-y-1 transition-transform">north_east</span>
|
||||
</div>
|
||||
<div class="absolute -bottom-10 -right-10 w-48 h-48 bg-white/5 rounded-full blur-3xl group-hover:bg-white/10 transition-colors"></div>
|
||||
</div>
|
||||
<!-- Project Leadership & Execution -->
|
||||
<div class="md:col-span-12 bg-surface-container-lowest rounded-[3rem] p-16 border border-outline-variant/10 text-center relative overflow-hidden group card-hover">
|
||||
<div class="max-w-3xl mx-auto relative z-10">
|
||||
<div class="w-20 h-20 bg-primary/5 rounded-3xl flex items-center justify-center text-primary mb-10 mx-auto">
|
||||
<span class="material-symbols-outlined text-4xl" style="font-variation-settings: 'FILL' 1;">rocket_launch</span>
|
||||
</div>
|
||||
<h3 class="text-4xl font-headline font-extrabold text-slate-900 mb-8 leading-tight">Project Leadership & Execution</h3>
|
||||
<p class="text-on-surface-variant body-loose text-lg mb-10">Translating ideas into operational reality. From international conferences to business model pivots, I lead projects through to measurable results.</p>
|
||||
<div class="flex justify-center flex-wrap gap-4">
|
||||
<span class="px-6 py-2.5 bg-surface-container-low text-primary text-sm font-extrabold rounded-xl border border-primary/5">Impact Driven</span>
|
||||
<span class="px-6 py-2.5 bg-surface-container-low text-primary text-sm font-extrabold rounded-xl border border-primary/5">Operational Rigor</span>
|
||||
<span class="px-6 py-2.5 bg-surface-container-low text-primary text-sm font-extrabold rounded-xl border border-primary/5">Europe-wide Experience</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Refined pattern -->
|
||||
<div class="absolute inset-0 opacity-[0.02] pointer-events-none group-hover:opacity-[0.04] transition-opacity duration-700" style="background-image: radial-gradient(#002da7 1.5px, transparent 1.5px); background-size: 32px 32px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Projects Preview -->
|
||||
<section class="py-40">
|
||||
<div class="max-w-7xl mx-auto px-6 md:px-12">
|
||||
<div class="flex flex-col md:flex-row md:items-end justify-between mb-24 gap-8">
|
||||
<div class="max-w-2xl">
|
||||
<div class="w-12 h-1 bg-primary mb-6"></div>
|
||||
<h2 class="text-4xl md:text-5xl font-headline font-extrabold text-slate-950 mb-6">Selected Initiatives</h2>
|
||||
<p class="text-on-surface-variant text-xl body-loose">A preview of key projects across diverse environments.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-16">
|
||||
<!-- Project 1 -->
|
||||
<div class="group cursor-pointer">
|
||||
<div class="aspect-video rounded-[3rem] bg-surface-container-low overflow-hidden mb-10 border border-outline-variant/10 shadow-sm transition-all duration-500 hover:shadow-2xl hover:border-primary/20">
|
||||
<div class="w-full h-full relative overflow-hidden">
|
||||
<img alt="International conference" class="w-full h-full object-cover transition-transform duration-1000 group-hover:scale-110" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCdzJgmu4PtMfiHqoXYx47Iks7EjLKsk7MU6w6kVI6IkaQq2x0E3C0DpRREA914Cd8exudv14vb0qUxyhT5gWM6OhNdmKQ3_HyIDsQo3lugAavAiMfWGPhZvT_bNQopY5RM4z34tYOsQpiyz6ZuLapeTlbdjR2te05_K8IJ8aNfWlHvQHyuqsmk5mGLsUcnSMOqd_YqXMr01mGAnkZzW6Nqi-jZClOdl7v4glaOhXcoZDGrBfsCpsoEgD8K5g346GF2Ej6k4pyVYRE"/>
|
||||
<div class="absolute inset-0 bg-primary/20 mix-blend-multiply opacity-0 group-hover:opacity-100 transition-opacity"></div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-xs font-bold text-primary uppercase tracking-[0.2em] mb-4 block">Institutional Collaboration</span>
|
||||
<h3 class="text-3xl font-headline font-extrabold text-slate-950 mb-6 group-hover:text-primary transition-colors leading-tight">International Youth Conference & Moderation</h3>
|
||||
<p class="text-on-surface-variant body-loose text-lg mb-8">Directing large-scale international gatherings, managing logistics, stakeholder agendas, and institutional representation.</p>
|
||||
<div class="flex items-center gap-2 text-primary font-bold group-hover:gap-4 transition-all">
|
||||
View Project Details <span class="material-symbols-outlined">arrow_right_alt</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Project 2 -->
|
||||
<div class="group cursor-pointer">
|
||||
<div class="aspect-video rounded-[3rem] bg-surface-container-low overflow-hidden mb-10 border border-outline-variant/10 shadow-sm transition-all duration-500 hover:shadow-2xl hover:border-primary/20">
|
||||
<div class="w-full h-full relative overflow-hidden">
|
||||
<img alt="Greenie Consulting" class="w-full h-full object-cover transition-transform duration-1000 group-hover:scale-110" src="https://lh3.googleusercontent.com/aida-public/AB6AXuC0t9yYKELdZacQpBViTjN-IZM2EyNyQnJbqqa7DhpBq_jbh_sv0Bg76nUObeb9jANR6gvAgw0KxAGTqufT8gbpRc-fmuLqp3kmnGsx5jlWTtxXeu9NMNm4sgNFKPJ81TJUadeiVCX54-YxaRBu1TmjT8Hk0_fIqFfMWVUsgCHPJ-6FtOnsF6oWD-iPtY1uwvw2uNGtC0yV77y3cxyOHMy2A55KUncs5gYotTmLxy3PidipTaY0o-kdvRxtC3GC_lY5aQLA21l7Wj0"/>
|
||||
<div class="absolute inset-0 bg-primary/20 mix-blend-multiply opacity-0 group-hover:opacity-100 transition-opacity"></div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-xs font-bold text-primary uppercase tracking-[0.2em] mb-4 block">Consulting & Innovation</span>
|
||||
<h3 class="text-3xl font-headline font-extrabold text-slate-950 mb-6 group-hover:text-primary transition-colors leading-tight">Greenie Concept & Business Consulting</h3>
|
||||
<p class="text-on-surface-variant body-loose text-lg mb-8">Developing sustainable business models and innovation concepts that bridge the gap between ecology and economy.</p>
|
||||
<div class="flex items-center gap-2 text-primary font-bold group-hover:gap-4 transition-all">
|
||||
View Project Details <span class="material-symbols-outlined">arrow_right_alt</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-24 text-center">
|
||||
<button class="px-12 py-5 rounded-2xl border-2 border-primary text-primary font-headline font-extrabold text-lg hover:bg-primary hover:text-white transition-all duration-400">
|
||||
Explore All Projects
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- About Section -->
|
||||
<section class="py-40 bg-surface-container-lowest relative overflow-hidden">
|
||||
<div class="max-w-7xl mx-auto px-6 md:px-12">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-12 gap-20 items-center">
|
||||
<div class="lg:col-span-5 relative">
|
||||
<div class="aspect-[4/5] rounded-[3rem] overflow-hidden shadow-2xl relative z-10">
|
||||
<img alt="Kristijan portrait detail" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida/ADBb0ujowhYy2qUM7pe8f3r3QEGEOKEGS0CnP9AfT8Qkbfh4ZTh6rrfiwPRPo4cwlnZQRIjHBuVjNabhh49DcG11Xp9F5A1qwLRBcN-tdxdAAwges0dk4DsLi2Vw47gNLBWlGExJLz9dFuA5ln-nIjduGoLr5NL1uCgDZyaGAhTv1OeGqQ0kqQU5e1sRJTxzqyY0BKHXliVbEqg0QPIMHl2P3P9hAa5HNJUkFZfGAVH0vtSpEV8BzS64uCvNDX04x-pDmfyU0e3Jowhkzw"/>
|
||||
</div>
|
||||
<div class="absolute -top-12 -left-12 w-64 h-64 bg-primary/5 rounded-full -z-0 blur-3xl"></div>
|
||||
</div>
|
||||
<div class="lg:col-span-7">
|
||||
<span class="text-xs font-bold text-primary uppercase tracking-[0.3em] mb-8 block">Professional Biography</span>
|
||||
<h2 class="text-5xl md:text-6xl font-headline font-extrabold text-slate-950 mb-10 heading-tight">The intersection of <br/><span class="text-primary italic">theory and practice.</span></h2>
|
||||
<div class="space-y-8 text-on-surface-variant text-xl body-loose">
|
||||
<p>Kristijan Popovski is a strategic leader focused on institutional excellence and sustainable organizational growth. Based between Slovenia and Macedonia, he has built a reputation for navigating complex governance structures while maintaining a sharp focus on financial viability and project execution.</p>
|
||||
<p>With an academic foundation from the University of Ljubljana and professional experience within the Eurowag group ecosystem, Kristijan bridges the gap between high-level policy advocacy and bottom-line operational results.</p>
|
||||
</div>
|
||||
<div class="mt-12 flex items-center gap-12 border-t border-outline-variant/30 pt-12">
|
||||
<div>
|
||||
<p class="text-3xl font-headline font-extrabold text-slate-900">10+</p>
|
||||
<p class="text-sm font-bold text-slate-500 uppercase">Years Active</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-3xl font-headline font-extrabold text-slate-900">2</p>
|
||||
<p class="text-sm font-bold text-slate-500 uppercase">Strategic Hubs</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Contact CTA -->
|
||||
<section class="py-40">
|
||||
<div class="max-w-6xl mx-auto px-6 md:px-12">
|
||||
<div class="bg-primary rounded-[4rem] p-16 md:p-28 text-center relative overflow-hidden shadow-2xl shadow-primary/20">
|
||||
<div class="relative z-10">
|
||||
<h2 class="text-5xl md:text-7xl font-headline font-extrabold text-white mb-10 leading-tight">Start a conversation.</h2>
|
||||
<p class="text-primary-fixed/80 text-xl md:text-2xl max-w-2xl mx-auto mb-16 body-loose">Whether it's a strategic partnership, a governance initiative, or a project in need of leadership — let's connect.</p>
|
||||
<div class="flex flex-wrap justify-center gap-6">
|
||||
<a class="flex items-center gap-4 bg-white text-primary px-12 py-6 rounded-3xl font-headline font-extrabold text-lg transition-all duration-300 hover:scale-[1.03] hover:shadow-2xl shadow-lg" href="mailto:contact@kristijanpopovski.com">
|
||||
<span class="material-symbols-outlined text-2xl">mail</span>
|
||||
Send Email
|
||||
</a>
|
||||
<a class="flex items-center gap-4 bg-primary-container text-white border border-white/20 px-12 py-6 rounded-3xl font-headline font-extrabold text-lg transition-all duration-300 hover:bg-white/10" href="#">
|
||||
<span class="material-symbols-outlined text-2xl">link</span>
|
||||
LinkedIn Profile
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Abstract BG elements -->
|
||||
<div class="absolute top-0 right-0 w-96 h-96 bg-white/5 rounded-full -mr-48 -mt-48 blur-3xl"></div>
|
||||
<div class="absolute bottom-0 left-0 w-64 h-64 bg-black/10 rounded-full -ml-32 -mb-32 blur-3xl"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<!-- Footer -->
|
||||
<footer class="bg-slate-950 text-slate-400 py-24 px-6 md:px-12">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-20 pb-16 border-b border-white/10">
|
||||
<div class="space-y-8">
|
||||
<div class="font-headline font-extrabold text-2xl text-white tracking-tighter">Kristijan Popovski</div>
|
||||
<p class="body-loose text-lg max-w-sm">Built on institutional trust and professional rigor. Driving outcomes across Europe from Slovenia and Macedonia.</p>
|
||||
<div class="flex gap-5 text-white/60">
|
||||
<a class="hover:text-primary transition-colors" href="#"><span class="material-symbols-outlined text-3xl">public</span></a>
|
||||
<a class="hover:text-primary transition-colors" href="#"><span class="material-symbols-outlined text-3xl">terminal</span></a>
|
||||
<a class="hover:text-primary transition-colors" href="#"><span class="material-symbols-outlined text-3xl">verified</span></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col md:items-end justify-between">
|
||||
<div class="flex flex-wrap gap-x-12 gap-y-6">
|
||||
<a class="font-headline font-bold text-sm uppercase tracking-widest hover:text-white transition-colors" href="#">LinkedIn</a>
|
||||
<a class="font-headline font-bold text-sm uppercase tracking-widest hover:text-white transition-colors" href="#">Email</a>
|
||||
<a class="font-headline font-bold text-sm uppercase tracking-widest hover:text-white transition-colors" href="#">Download CV</a>
|
||||
</div>
|
||||
<div class="pt-12 md:pt-0">
|
||||
<p class="font-headline font-bold text-xs tracking-[0.2em] uppercase text-slate-500">© 2024 Kristijan Popovski. Engineered with Authority.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pt-12 text-[10px] uppercase tracking-[0.4em] font-bold text-slate-600 text-center md:text-left">
|
||||
Strategy • Governance • Execution
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 195 KiB |
|
|
@ -0,0 +1,262 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Kristijan Popovski | Portfolio</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700;800&family=Inter:wght@400;500;600&family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"tertiary": "#741f00",
|
||||
"surface": "#f8f9fa",
|
||||
"surface-dim": "#d9dadb",
|
||||
"on-error": "#ffffff",
|
||||
"tertiary-fixed-dim": "#ffb59e",
|
||||
"on-primary-fixed": "#001356",
|
||||
"primary-fixed": "#dde1ff",
|
||||
"primary-container": "#1a44d1",
|
||||
"surface-tint": "#2a4fdb",
|
||||
"on-primary-fixed-variant": "#0035be",
|
||||
"outline": "#747686",
|
||||
"on-secondary-fixed": "#001550",
|
||||
"inverse-primary": "#b8c3ff",
|
||||
"inverse-on-surface": "#f0f1f2",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"on-surface": "#191c1d",
|
||||
"secondary-fixed-dim": "#b6c4ff",
|
||||
"tertiary-fixed": "#ffdbd0",
|
||||
"on-error-container": "#93000a",
|
||||
"on-secondary-fixed-variant": "#163da5",
|
||||
"error-container": "#ffdad6",
|
||||
"on-tertiary": "#ffffff",
|
||||
"inverse-surface": "#2e3132",
|
||||
"secondary": "#3657be",
|
||||
"primary-fixed-dim": "#b8c3ff",
|
||||
"primary": "#002da7",
|
||||
"on-primary-container": "#bcc6ff",
|
||||
"surface-container": "#edeeef",
|
||||
"background": "#f8f9fa",
|
||||
"on-secondary-container": "#002780",
|
||||
"surface-container-low": "#f3f4f5",
|
||||
"secondary-fixed": "#dce1ff",
|
||||
"on-background": "#191c1d",
|
||||
"on-secondary": "#ffffff",
|
||||
"on-primary": "#ffffff",
|
||||
"on-surface-variant": "#444655",
|
||||
"secondary-container": "#7593fd",
|
||||
"error": "#ba1a1a",
|
||||
"tertiary-container": "#9c2d00",
|
||||
"on-tertiary-container": "#ffb9a3",
|
||||
"surface-container-high": "#e7e8e9",
|
||||
"on-tertiary-fixed-variant": "#842500",
|
||||
"outline-variant": "#c4c5d7",
|
||||
"surface-bright": "#f8f9fa",
|
||||
"on-tertiary-fixed": "#3a0b00",
|
||||
"surface-variant": "#e1e3e4",
|
||||
"surface-container-highest": "#e1e3e4"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline": ["Manrope"],
|
||||
"body": ["Inter"],
|
||||
"label": ["Inter"]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
body { font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; }
|
||||
h1, h2, h3, h4 { font-family: 'Manrope', sans-serif; }
|
||||
.no-scrollbar::-webkit-scrollbar { display: none; }
|
||||
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
|
||||
section { scroll-margin-top: 4rem; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface text-on-surface">
|
||||
<!-- TopNavBar -->
|
||||
<nav class="fixed top-0 w-full z-50 bg-white/90 backdrop-blur-md border-b border-outline-variant/10">
|
||||
<div class="flex justify-between items-center max-w-7xl mx-auto px-6 h-16">
|
||||
<span class="text-lg font-extrabold tracking-tight text-on-surface">Kristijan Popovski</span>
|
||||
<div class="flex items-center">
|
||||
<button class="material-symbols-outlined text-on-surface text-2xl p-2 hover:bg-surface-container-low rounded-full transition-colors">menu</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- Hero Section -->
|
||||
<section class="pt-32 pb-24 px-8">
|
||||
<div class="flex flex-col items-center text-center">
|
||||
<div class="relative w-full max-w-[340px] mb-12">
|
||||
<div class="aspect-[3/4] rounded-[3rem] overflow-hidden bg-surface-container-low shadow-2xl">
|
||||
<img alt="Kristijan Popovski Professional Portrait" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida/ADBb0ujowhYy2qUM7pe8f3r3QEGEOKEGS0CnP9AfT8Qkbfh4ZTh6rrfiwPRPo4cwlnZQRIjHBuVjNabhh49DcG11Xp9F5A1qwLRBcN-tdxdAAwges0dk4DsLi2Vw47gNLBWlGExJLz9dFuA5ln-nIjduGoLr5NL1uCgDZyaGAhTv1OeGqQ0kqQU5e1sRJTxzqyY0BKHXliVbEqg0QPIMHl2P3P9hAa5HNJUkFZfGAVH0vtSpEV8BzS64uCvNDX04x-pDmfyU0e3Jowhkzw"/>
|
||||
</div>
|
||||
<div class="absolute -bottom-6 left-1/2 -translate-x-1/2 w-[90%] bg-white/95 backdrop-blur-xl py-4 px-6 rounded-2xl shadow-xl border border-outline-variant/10">
|
||||
<p class="text-[10px] font-black tracking-[0.25em] uppercase text-secondary mb-1">Kristijan Popovski</p>
|
||||
<p class="text-sm font-semibold text-on-surface-variant">Institutional Architect</p>
|
||||
</div>
|
||||
</div>
|
||||
<h1 class="text-4xl font-extrabold tracking-tight text-on-surface mb-8 leading-[1.15]">
|
||||
Structured leadership.<br/>
|
||||
<span class="text-primary">Strategic thinking.</span><br/>
|
||||
Real execution.
|
||||
</h1>
|
||||
<p class="text-base text-on-surface-variant mb-12 leading-relaxed px-2 max-w-xs mx-auto">
|
||||
Building robust frameworks for growth through Governance, Finance, and Project Leadership.
|
||||
</p>
|
||||
<div class="flex flex-col w-full gap-4 max-w-sm mx-auto">
|
||||
<button class="w-full py-5 bg-primary text-white font-bold rounded-2xl shadow-lg shadow-primary/25 active:scale-[0.98] transition-transform">
|
||||
Download CV
|
||||
</button>
|
||||
<button class="w-full py-5 bg-surface-container-high text-primary font-bold rounded-2xl active:scale-[0.98] transition-transform">
|
||||
Get in touch
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Credibility Metrics -->
|
||||
<section class="py-20 bg-surface-container-low overflow-hidden">
|
||||
<div class="flex gap-5 px-8 overflow-x-auto no-scrollbar snap-x">
|
||||
<div class="flex-none w-48 p-8 bg-surface-container-lowest rounded-[2rem] snap-center border border-outline-variant/5 shadow-sm">
|
||||
<span class="block text-4xl font-extrabold text-primary mb-2">120+</span>
|
||||
<span class="text-[10px] uppercase tracking-widest font-black text-on-surface-variant opacity-70">Members Managed</span>
|
||||
</div>
|
||||
<div class="flex-none w-48 p-8 bg-surface-container-lowest rounded-[2rem] snap-center border border-outline-variant/5 shadow-sm">
|
||||
<span class="block text-4xl font-extrabold text-primary mb-2">50+</span>
|
||||
<span class="text-[10px] uppercase tracking-widest font-black text-on-surface-variant opacity-70">Events Executed</span>
|
||||
</div>
|
||||
<div class="flex-none w-48 p-8 bg-surface-container-lowest rounded-[2rem] snap-center border border-outline-variant/5 shadow-sm">
|
||||
<span class="block text-4xl font-extrabold text-primary mb-2">20+</span>
|
||||
<span class="text-[10px] uppercase tracking-widest font-black text-on-surface-variant opacity-70">Strategic Partners</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Expertise Highlights -->
|
||||
<section class="py-24 px-8 bg-surface">
|
||||
<div class="grid grid-cols-2 gap-5">
|
||||
<div class="p-6 bg-white rounded-[2rem] border border-outline-variant/10 shadow-sm flex flex-col items-center text-center">
|
||||
<span class="material-symbols-outlined text-primary text-3xl mb-4">account_balance</span>
|
||||
<h4 class="text-sm font-bold leading-tight text-on-surface">Governance<br/>Roles</h4>
|
||||
</div>
|
||||
<div class="p-6 bg-white rounded-[2rem] border border-outline-variant/10 shadow-sm flex flex-col items-center text-center">
|
||||
<span class="material-symbols-outlined text-primary text-3xl mb-4">payments</span>
|
||||
<h4 class="text-sm font-bold leading-tight text-on-surface">Finance<br/>Experience</h4>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Focus Areas -->
|
||||
<section class="py-24 px-8">
|
||||
<h2 class="text-xs font-black uppercase tracking-[0.3em] text-secondary mb-12">Focus Areas</h2>
|
||||
<div class="flex flex-col gap-6">
|
||||
<div class="p-10 bg-primary rounded-[3rem] text-white shadow-xl shadow-primary/20">
|
||||
<span class="material-symbols-outlined text-5xl mb-8">architecture</span>
|
||||
<h3 class="text-2xl font-extrabold mb-4">Strategy</h3>
|
||||
<p class="opacity-80 text-sm leading-relaxed">Designing organizational structures that withstand market shifts and operational scaling.</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 gap-6">
|
||||
<div class="p-8 bg-surface-container-high rounded-[2.5rem]">
|
||||
<span class="material-symbols-outlined text-primary text-3xl mb-5">rocket_launch</span>
|
||||
<h4 class="text-xl font-bold mb-3">Project Leadership</h4>
|
||||
<p class="text-sm text-on-surface-variant leading-relaxed">Driving high-impact initiatives from conception to final execution.</p>
|
||||
</div>
|
||||
<div class="p-8 bg-secondary-container/10 rounded-[2.5rem] border border-secondary-container/20">
|
||||
<span class="material-symbols-outlined text-primary text-3xl mb-5">monitoring</span>
|
||||
<h4 class="text-xl font-bold mb-3">Finance</h4>
|
||||
<p class="text-sm text-on-surface-variant leading-relaxed">Optimizing fiscal frameworks and ensuring sustainable growth paths.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Selected Experience -->
|
||||
<section class="py-24 px-8 bg-surface-container-low">
|
||||
<h2 class="text-xs font-black uppercase tracking-[0.3em] text-secondary mb-16">Selected Experience</h2>
|
||||
<div class="space-y-16">
|
||||
<div class="relative pl-10 border-l-2 border-outline-variant/30">
|
||||
<div class="absolute -left-[9px] top-0 w-4 h-4 rounded-full bg-primary ring-8 ring-surface-container-low"></div>
|
||||
<span class="text-[10px] font-bold text-secondary tracking-widest uppercase">MSO SLOVENIA</span>
|
||||
<h3 class="text-2xl font-extrabold text-on-surface mt-3">Executive Board</h3>
|
||||
<p class="mt-4 text-on-surface-variant text-sm leading-loose">Overseeing institutional governance and strategic scaling for youth-led organizational frameworks.</p>
|
||||
</div>
|
||||
<div class="relative pl-10 border-l-2 border-outline-variant/30">
|
||||
<div class="absolute -left-[9px] top-0 w-4 h-4 rounded-full bg-outline-variant ring-8 ring-surface-container-low"></div>
|
||||
<span class="text-[10px] font-bold text-secondary tracking-widest uppercase">UNIVERSITY OF LJUBLJANA</span>
|
||||
<h3 class="text-2xl font-extrabold text-on-surface mt-3">Strategic Advisor</h3>
|
||||
<p class="mt-4 text-on-surface-variant text-sm leading-loose">Contributing to academic governance and the development of new institutional methodologies.</p>
|
||||
</div>
|
||||
<div class="relative pl-10 border-l-2 border-outline-variant/30">
|
||||
<div class="absolute -left-[9px] top-0 w-4 h-4 rounded-full bg-outline-variant ring-8 ring-surface-container-low"></div>
|
||||
<span class="text-[10px] font-bold text-secondary tracking-widest uppercase">CVS MOBILE</span>
|
||||
<h3 class="text-2xl font-extrabold text-on-surface mt-3">Operational Analyst</h3>
|
||||
<p class="mt-4 text-on-surface-variant text-sm leading-loose">Streamlining workflows and implementing data-driven efficiency protocols across tech teams.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Projects Preview -->
|
||||
<section class="py-24 px-8">
|
||||
<div class="flex justify-between items-end mb-12">
|
||||
<h2 class="text-xs font-black uppercase tracking-[0.3em] text-secondary">Projects Preview</h2>
|
||||
<span class="material-symbols-outlined text-primary p-2 hover:bg-primary/5 rounded-full transition-colors">arrow_forward</span>
|
||||
</div>
|
||||
<div class="space-y-8">
|
||||
<div class="group relative overflow-hidden rounded-[3rem] bg-white shadow-xl border border-outline-variant/10">
|
||||
<div class="aspect-video bg-surface-dim overflow-hidden">
|
||||
<img alt="Institutional Governance Framework Visualization" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCPDtO5AMTFaUBC0P4WINDw2XnDZWmDpDJo6Aj9LRePnYOS9m3eLBrZQFVk3OkGitdcuBw1CZ481LHV-_SdAWbJ-8JkQZaP1GPxzQa0X_DdBKl4WOq8WSByF5RghQ0RVVymWduTwzBB-mUhNqgVJZwG3fnMDkfBekQHW6jx0qj2zCswX7DkObKqvScALdYsqQ8tYuS_AhGOc9cIs-iu73aoWFLOVymq6QitS_xdWDLHAG_RPtwqMbGeDSr5zH5x_IEdnxRnhovCYKw"/>
|
||||
</div>
|
||||
<div class="p-10">
|
||||
<h3 class="text-xl font-extrabold text-on-surface mb-3">Governance v.3</h3>
|
||||
<p class="text-sm text-on-surface-variant leading-relaxed">A comprehensive framework for modern institutional transparency and cross-functional efficiency.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- About Section -->
|
||||
<section class="py-24 px-8 bg-surface-container-low">
|
||||
<div class="flex flex-col gap-8">
|
||||
<h2 class="text-xs font-black uppercase tracking-[0.3em] text-secondary">About</h2>
|
||||
<p class="text-xl font-bold text-on-surface leading-snug">
|
||||
I bridge the gap between high-level institutional design and ground-level operational reality.
|
||||
</p>
|
||||
<p class="text-base text-on-surface-variant leading-loose">
|
||||
With a background spanning finance, governance, and technology, I help organizations build systems that aren't just efficient—they're resilient. My approach combines rigorous analytical frameworks with pragmatic leadership.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Contact CTA -->
|
||||
<section class="mt-12 py-32 px-10 text-center bg-primary text-white rounded-t-[4rem] shadow-2xl relative overflow-hidden">
|
||||
<div class="absolute inset-0 bg-[radial-gradient(circle_at_top_right,_var(--tw-gradient-stops))] from-white/10 to-transparent"></div>
|
||||
<div class="relative z-10">
|
||||
<h2 class="text-4xl font-extrabold mb-8 leading-tight">Let's build something authoritative.</h2>
|
||||
<p class="opacity-80 mb-14 max-w-xs mx-auto leading-loose text-base">Available for strategic consulting and leadership advisory for high-impact projects.</p>
|
||||
<a class="inline-flex items-center justify-center gap-4 w-full py-6 bg-white text-primary font-black rounded-2xl shadow-2xl active:scale-[0.98] transition-transform" href="mailto:contact@kristijan.com">
|
||||
Get in Touch
|
||||
<span class="material-symbols-outlined font-bold">mail</span>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Footer -->
|
||||
<footer class="bg-slate-950 text-slate-400 py-24 px-8">
|
||||
<div class="flex flex-col items-center">
|
||||
<span class="font-headline font-black text-2xl text-white mb-12 tracking-tighter">Kristijan Popovski</span>
|
||||
<nav class="flex flex-col items-center gap-8 mb-16">
|
||||
<a class="text-xs font-bold uppercase tracking-[0.2em] hover:text-white transition-colors" href="#">LinkedIn</a>
|
||||
<a class="text-xs font-bold uppercase tracking-[0.2em] hover:text-white transition-colors" href="#">Email</a>
|
||||
<a class="text-xs font-bold uppercase tracking-[0.2em] hover:text-white transition-colors" href="#">Download CV</a>
|
||||
</nav>
|
||||
<div class="w-full pt-10 border-t border-slate-900/50 text-center">
|
||||
<p class="text-[10px] font-medium opacity-50 uppercase tracking-[0.25em]">© 2024 Kristijan Popovski.<br/>Engineered with Authority.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 88 KiB |
|
|
@ -0,0 +1,292 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&family=Inter:wght@400;500;600&family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"tertiary": "#741f00",
|
||||
"surface": "#f8f9fa",
|
||||
"surface-dim": "#d9dadb",
|
||||
"on-error": "#ffffff",
|
||||
"tertiary-fixed-dim": "#ffb59e",
|
||||
"on-primary-fixed": "#001356",
|
||||
"primary-fixed": "#dde1ff",
|
||||
"primary-container": "#1a44d1",
|
||||
"surface-tint": "#2a4fdb",
|
||||
"on-primary-fixed-variant": "#0035be",
|
||||
"outline": "#747686",
|
||||
"on-secondary-fixed": "#001550",
|
||||
"inverse-primary": "#b8c3ff",
|
||||
"inverse-on-surface": "#f0f1f2",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"on-surface": "#191c1d",
|
||||
"secondary-fixed-dim": "#b6c4ff",
|
||||
"tertiary-fixed": "#ffdbd0",
|
||||
"on-error-container": "#93000a",
|
||||
"on-secondary-fixed-variant": "#163da5",
|
||||
"error-container": "#ffdad6",
|
||||
"on-tertiary": "#ffffff",
|
||||
"inverse-surface": "#2e3132",
|
||||
"secondary": "#3657be",
|
||||
"primary-fixed-dim": "#b8c3ff",
|
||||
"primary": "#002da7",
|
||||
"on-primary-container": "#bcc6ff",
|
||||
"surface-container": "#edeeef",
|
||||
"background": "#f8f9fa",
|
||||
"on-secondary-container": "#002780",
|
||||
"surface-container-low": "#f3f4f5",
|
||||
"secondary-fixed": "#dce1ff",
|
||||
"on-background": "#191c1d",
|
||||
"on-secondary": "#ffffff",
|
||||
"on-primary": "#ffffff",
|
||||
"on-surface-variant": "#444655",
|
||||
"secondary-container": "#7593fd",
|
||||
"error": "#ba1a1a",
|
||||
"tertiary-container": "#9c2d00",
|
||||
"on-tertiary-container": "#ffb9a3",
|
||||
"surface-container-high": "#e7e8e9",
|
||||
"on-tertiary-fixed-variant": "#842500",
|
||||
"outline-variant": "#c4c5d7",
|
||||
"surface-bright": "#f8f9fa",
|
||||
"on-tertiary-fixed": "#3a0b00",
|
||||
"surface-variant": "#e1e3e4",
|
||||
"surface-container-highest": "#e1e3e4"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline": ["Manrope"],
|
||||
"body": ["Inter"],
|
||||
"label": ["Inter"]
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
body { font-family: 'Inter', sans-serif; }
|
||||
h1, h2, h3, h4 { font-family: 'Manrope', sans-serif; }
|
||||
.nav-link-active {
|
||||
position: relative;
|
||||
}
|
||||
.nav-link-active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -4px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background-color: #002da7;
|
||||
border-radius: 2px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface text-on-surface antialiased">
|
||||
<!-- TopNavBar -->
|
||||
<nav class="fixed top-0 w-full z-50 bg-white/80 dark:bg-slate-950/80 backdrop-blur-xl border-b border-surface-variant/30">
|
||||
<div class="flex justify-between items-center max-w-7xl mx-auto px-8 h-20">
|
||||
<div class="text-2xl font-extrabold tracking-tighter text-slate-900 dark:text-white font-headline">
|
||||
Kristijan Popovski
|
||||
</div>
|
||||
<div class="hidden md:flex items-center space-x-10">
|
||||
<a class="text-slate-600 dark:text-slate-400 hover:text-primary transition-colors font-headline font-bold tracking-tight text-base" href="#">Home</a>
|
||||
<a class="text-primary dark:text-blue-400 nav-link-active font-headline font-bold tracking-tight text-base" href="#">Projects</a>
|
||||
<a class="text-slate-600 dark:text-slate-400 hover:text-primary transition-colors font-headline font-bold tracking-tight text-base" href="#">CV</a>
|
||||
<a class="text-slate-600 dark:text-slate-400 hover:text-primary transition-colors font-headline font-bold tracking-tight text-base" href="#">Contact</a>
|
||||
</div>
|
||||
<button class="bg-primary text-on-primary px-7 py-3 rounded-xl font-headline font-bold text-sm tracking-tight hover:brightness-110 active:scale-95 transition-all shadow-[0_4px_12px_rgba(0,45,167,0.15)]">
|
||||
Get in Touch
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
<main class="pt-40 pb-32">
|
||||
<!-- Hero Section -->
|
||||
<header class="max-w-7xl mx-auto px-8 mb-20">
|
||||
<div class="inline-flex items-center bg-primary-fixed text-on-primary-fixed px-4 py-1.5 rounded-full text-[10px] font-black tracking-[0.15em] uppercase mb-8">
|
||||
Selected Work
|
||||
</div>
|
||||
<h1 class="text-6xl md:text-8xl font-extrabold tracking-tight text-on-surface mb-10 max-w-5xl leading-[0.95]">
|
||||
Architecting <span class="text-primary">Institutional</span> Excellence.
|
||||
</h1>
|
||||
<p class="text-xl md:text-2xl text-on-surface-variant leading-relaxed max-w-3xl font-body">
|
||||
A portfolio of strategic interventions, institutional collaborations, and innovation concepts designed to drive measurable global impact.
|
||||
</p>
|
||||
</header>
|
||||
<!-- Filter Bar -->
|
||||
<section class="max-w-7xl mx-auto px-8 mb-24">
|
||||
<div class="flex flex-wrap items-center gap-4">
|
||||
<button class="px-7 py-2.5 bg-primary text-on-primary rounded-full text-sm font-bold tracking-tight transition-all shadow-md shadow-primary/20">All</button>
|
||||
<button class="px-7 py-2.5 bg-surface-container-low text-on-surface hover:bg-surface-container-high border border-outline-variant/30 rounded-full text-sm font-bold tracking-tight transition-all">Institutional</button>
|
||||
<button class="px-7 py-2.5 bg-surface-container-low text-on-surface hover:bg-surface-container-high border border-outline-variant/30 rounded-full text-sm font-bold tracking-tight transition-all">Consulting</button>
|
||||
<button class="px-7 py-2.5 bg-surface-container-low text-on-surface hover:bg-surface-container-high border border-outline-variant/30 rounded-full text-sm font-bold tracking-tight transition-all">Innovation</button>
|
||||
<button class="px-7 py-2.5 bg-surface-container-low text-on-surface hover:bg-surface-container-high border border-outline-variant/30 rounded-full text-sm font-bold tracking-tight transition-all">Moderation</button>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Projects Grid -->
|
||||
<section class="max-w-7xl mx-auto px-8">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-16 md:gap-x-16 md:gap-y-24">
|
||||
<!-- Project Card 1: International Conference -->
|
||||
<div class="group flex flex-col bg-surface-container-lowest rounded-[2rem] overflow-hidden hover:-translate-y-2 hover:shadow-[0_40px_80px_-20px_rgba(0,45,167,0.12)] transition-all duration-500 border border-outline-variant/20">
|
||||
<div class="relative h-[28rem] overflow-hidden">
|
||||
<img alt="Modern high-ceiling conference hall with professional blue lighting" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-1000" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBTbWTHXGNm3jy3IyN996PvyLWjFWCeAQFu1pAhqC49SOsFYjNy66WhHR3GDlx3v0q34ymceMuY9unSU1nl4CP-UJL3aeBrNj0K-prNOFw-xGzBhXIZrEWNLotqdL1l3__dwBOdpFK6kxDlVqKZP2ZxMTmcnJwSISAnX7V4Flf10XeczTEqiwWjqX7FraPgfeYcUX3ZcvFnka9IiFh9A8zxxUciza_QKhFvN_gseVJW-C0hpR8_rFswcT6_aQv836l-OiJk5j-ewCo"/>
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-on-surface/40 to-transparent"></div>
|
||||
<div class="absolute top-8 right-8">
|
||||
<span class="bg-white/95 backdrop-blur-md text-primary text-[10px] font-black px-5 py-2.5 rounded-lg uppercase tracking-widest shadow-sm">Institutional</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-12 flex-grow flex flex-col">
|
||||
<h3 class="text-3xl font-extrabold text-on-surface mb-5 group-hover:text-primary transition-colors font-headline leading-tight">International Governance Summit</h3>
|
||||
<p class="text-on-surface-variant leading-relaxed mb-10 text-lg font-body">
|
||||
Spearheaded coordination for a multi-national dialogue on digital infrastructure policy. Managed stakeholder alignment across five European delegations.
|
||||
</p>
|
||||
<div class="mt-auto pt-8 border-t border-outline-variant/20">
|
||||
<div class="flex items-start space-x-4">
|
||||
<div class="bg-primary-fixed p-2 rounded-lg">
|
||||
<span class="material-symbols-outlined text-primary text-xl">terminal</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="block text-[10px] font-black text-primary uppercase tracking-[0.2em] mb-2">Key Outcome</span>
|
||||
<span class="text-base font-bold text-on-surface leading-snug">Unanimous adoption of the 2024 Digital Sovereignty Framework by all participating states.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Project Card 2: Business Consulting -->
|
||||
<div class="group flex flex-col bg-surface-container-lowest rounded-[2rem] overflow-hidden hover:-translate-y-2 hover:shadow-[0_40px_80px_-20px_rgba(0,45,167,0.12)] transition-all duration-500 border border-outline-variant/20">
|
||||
<div class="relative h-[28rem] overflow-hidden">
|
||||
<img alt="Professional business data analysis on tablet" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-1000" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCd6qVZNaFfzPwk-Lovm5QKJ7r5xQ9hxriTxPmftI0737nUyUDQwwoNQPCGV99t9D5xZp1TJPx3oFF60kXawNKLQM7bHADoovSj5HNnRX2BNmHVCVaXGTEKVhMXNl5VfziNfXRr_aNckWiMgcmqqg4a-t_9vBn_NPR-qbLNWzLqOe8941HnuWwV2Lq0IYr0Scem58J9pEdyfTh3p80Dtn-g4CitqKtHzUkyCydA3o-wMbmCamai3yvBOUSGxEp3skfjPoz4tfsVUXc"/>
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-on-surface/40 to-transparent"></div>
|
||||
<div class="absolute top-8 right-8">
|
||||
<span class="bg-white/95 backdrop-blur-md text-primary text-[10px] font-black px-5 py-2.5 rounded-lg uppercase tracking-widest shadow-sm">Consulting</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-12 flex-grow flex flex-col">
|
||||
<h3 class="text-3xl font-extrabold text-on-surface mb-5 group-hover:text-primary transition-colors font-headline leading-tight">Strategic Business Model Pivot</h3>
|
||||
<p class="text-on-surface-variant leading-relaxed mb-10 text-lg font-body">
|
||||
Redesigned the operational model for a mid-tier logistics provider, transitioning from legacy analog tracking to an automated cloud-first environment.
|
||||
</p>
|
||||
<div class="mt-auto pt-8 border-t border-outline-variant/20">
|
||||
<div class="flex items-start space-x-4">
|
||||
<div class="bg-primary-fixed p-2 rounded-lg">
|
||||
<span class="material-symbols-outlined text-primary text-xl">trending_up</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="block text-[10px] font-black text-primary uppercase tracking-[0.2em] mb-2">Key Outcome</span>
|
||||
<span class="text-base font-bold text-on-surface leading-snug">18% reduction in overhead costs and 24% increase in processing speed within Q1.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Project Card 3: Innovation / Greenie -->
|
||||
<div class="group flex flex-col bg-surface-container-lowest rounded-[2rem] overflow-hidden hover:-translate-y-2 hover:shadow-[0_40px_80px_-20px_rgba(0,45,167,0.12)] transition-all duration-500 border border-outline-variant/20">
|
||||
<div class="relative h-[28rem] overflow-hidden">
|
||||
<img alt="Sustainable architecture with green walls" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-1000" src="https://lh3.googleusercontent.com/aida-public/AB6AXuD5Tf6bsR-bkALg0WcoWJew695UBTxaaYOqaxnMbq7LAsKUrFfFk4MfugZgOElzvxGhsmTPoD_zY1X8-5OZBzB_UasDKrd6cjRa-BBQuo_iyOYg0QUU1Hq7g47I9vrx0oItR7MdsT6zslLnu2KWfZ0iB62oxhm7VgmdbeVbGns_9SwuHRwmHzjhiGPitHoVxlVP2VHlfrfNBVGKXPcqbBHSCkHZO9avm62YyqD5tchwBWERfcmWQWwhWzCkbyirzn944IYR3lIsFh4"/>
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-on-surface/40 to-transparent"></div>
|
||||
<div class="absolute top-8 right-8">
|
||||
<span class="bg-white/95 backdrop-blur-md text-primary text-[10px] font-black px-5 py-2.5 rounded-lg uppercase tracking-widest shadow-sm">Innovation</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-12 flex-grow flex flex-col">
|
||||
<h3 class="text-3xl font-extrabold text-on-surface mb-5 group-hover:text-primary transition-colors font-headline leading-tight">The Greenie Concept</h3>
|
||||
<p class="text-on-surface-variant leading-relaxed mb-10 text-lg font-body">
|
||||
Developed a circular economy framework for urban tech hubs. The prototype focused on resource reclamation and shared energy grids for co-working spaces.
|
||||
</p>
|
||||
<div class="mt-auto pt-8 border-t border-outline-variant/20">
|
||||
<div class="flex items-start space-x-4">
|
||||
<div class="bg-primary-fixed p-2 rounded-lg">
|
||||
<span class="material-symbols-outlined text-primary text-xl">eco</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="block text-[10px] font-black text-primary uppercase tracking-[0.2em] mb-2">Key Outcome</span>
|
||||
<span class="text-base font-bold text-on-surface leading-snug">Selected as the pilot program for the 2025 Smart Cities Initiative in the DACH region.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Project Card 4: Youth Conference -->
|
||||
<div class="group flex flex-col bg-surface-container-lowest rounded-[2rem] overflow-hidden hover:-translate-y-2 hover:shadow-[0_40px_80px_-20px_rgba(0,45,167,0.12)] transition-all duration-500 border border-outline-variant/20">
|
||||
<div class="relative h-[28rem] overflow-hidden">
|
||||
<img alt="Moderator speaking to young professionals" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-1000" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDnDFHv2J_GQ5rWbQNospKkHCMSY657kLCzAb5SDDlzCcqmyxewYgLTcdhw5bh1xNOwETZQJ3errwfIAzUOWUVWZbsIEaXzjDxrbMVE895SWHViaYaDBsWrtupcEXr90X4IoMkKFl7QiVxlrmp3L-CjKV2o--VIideZQeraGShNQhzKKn6c0N0Qr5HZgK5teuenRC2CJw9rbniaHaISTbN5CPIyXKz7-z__tKsUVYN75Y9bXiXc5AGJLjRhv1fNAT0lvPSzUhcCe4I"/>
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-on-surface/40 to-transparent"></div>
|
||||
<div class="absolute top-8 right-8">
|
||||
<span class="bg-white/95 backdrop-blur-md text-primary text-[10px] font-black px-5 py-2.5 rounded-lg uppercase tracking-widest shadow-sm">Moderation</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-12 flex-grow flex flex-col">
|
||||
<h3 class="text-3xl font-extrabold text-on-surface mb-5 group-hover:text-primary transition-colors font-headline leading-tight">Global Youth Leadership Summit</h3>
|
||||
<p class="text-on-surface-variant leading-relaxed mb-10 text-lg font-body">
|
||||
Lead moderator for the 3rd annual summit, facilitating high-stakes debates between 200+ youth leaders and representatives from the World Bank.
|
||||
</p>
|
||||
<div class="mt-auto pt-8 border-t border-outline-variant/20">
|
||||
<div class="flex items-start space-x-4">
|
||||
<div class="bg-primary-fixed p-2 rounded-lg">
|
||||
<span class="material-symbols-outlined text-primary text-xl">groups</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="block text-[10px] font-black text-primary uppercase tracking-[0.2em] mb-2">Key Outcome</span>
|
||||
<span class="text-base font-bold text-on-surface leading-snug">Facilitated the signing of a youth-led climate memorandum with 15 corporate sponsors.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- CTA Section -->
|
||||
<section class="max-w-7xl mx-auto px-8 mt-48">
|
||||
<div class="bg-white border border-outline-variant/30 rounded-[3rem] p-20 text-center relative overflow-hidden shadow-xl shadow-primary/5">
|
||||
<div class="absolute top-0 left-0 w-full h-full opacity-[0.03] pointer-events-none" style="background-image: url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M54.627 0l.83.83L1.22 55.455l-.83-.83L54.627 0zm-54.627 0l.83.83L54.627 55.455l-.83-.83L0 0z" fill="%23002da7" fill-opacity="1" fill-rule="evenodd"/%3E%3C/svg%3E')"></div>
|
||||
<div class="relative z-10">
|
||||
<h2 class="text-5xl md:text-6xl font-extrabold text-on-surface mb-8 tracking-tight font-headline">Ready to Collaborate?</h2>
|
||||
<p class="text-xl text-on-surface-variant mb-12 max-w-2xl mx-auto leading-relaxed">
|
||||
I am currently accepting inquiries for institutional advisory roles and strategic consulting engagements for the 2025 calendar year.
|
||||
</p>
|
||||
<div class="flex flex-col sm:flex-row justify-center items-center gap-8">
|
||||
<button class="bg-primary text-on-primary px-10 py-5 rounded-2xl font-headline font-bold tracking-tight hover:shadow-2xl hover:scale-105 active:scale-95 transition-all">
|
||||
Request Collaboration
|
||||
</button>
|
||||
<button class="text-primary font-headline font-bold tracking-tight flex items-center space-x-3 group text-lg">
|
||||
<span>View Full Case Studies</span>
|
||||
<span class="material-symbols-outlined text-2xl group-hover:translate-x-1.5 transition-transform">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<!-- Footer -->
|
||||
<footer class="bg-slate-50 dark:bg-slate-900 w-full py-20 px-8 border-t border-slate-200/50">
|
||||
<div class="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center">
|
||||
<div class="mb-8 md:mb-0">
|
||||
<div class="font-headline font-black text-2xl text-slate-900 dark:text-white mb-4 tracking-tighter">
|
||||
Kristijan Popovski
|
||||
</div>
|
||||
<p class="text-slate-500 dark:text-slate-400 font-body text-xs tracking-widest uppercase font-bold">
|
||||
© 2024 Kristijan Popovski. Engineered with Authority.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex space-x-10">
|
||||
<a class="text-slate-500 dark:text-slate-400 font-headline text-sm tracking-wide uppercase font-bold hover:text-primary transition-colors" href="#">LinkedIn</a>
|
||||
<a class="text-slate-500 dark:text-slate-400 font-headline text-sm tracking-wide uppercase font-bold hover:text-primary transition-colors" href="#">Email</a>
|
||||
<a class="text-slate-500 dark:text-slate-400 font-headline text-sm tracking-wide uppercase font-bold hover:text-primary transition-colors" href="#">Download CV</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 482 KiB |
|
|
@ -0,0 +1,291 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&family=Inter:wght@400;500;600&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"tertiary": "#741f00",
|
||||
"surface": "#f8f9fa",
|
||||
"surface-dim": "#d9dadb",
|
||||
"on-error": "#ffffff",
|
||||
"tertiary-fixed-dim": "#ffb59e",
|
||||
"on-primary-fixed": "#001356",
|
||||
"primary-fixed": "#dde1ff",
|
||||
"primary-container": "#1a44d1",
|
||||
"surface-tint": "#2a4fdb",
|
||||
"on-primary-fixed-variant": "#0035be",
|
||||
"outline": "#747686",
|
||||
"on-secondary-fixed": "#001550",
|
||||
"inverse-primary": "#b8c3ff",
|
||||
"inverse-on-surface": "#f0f1f2",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"on-surface": "#191c1d",
|
||||
"secondary-fixed-dim": "#b6c4ff",
|
||||
"tertiary-fixed": "#ffdbd0",
|
||||
"on-error-container": "#93000a",
|
||||
"on-secondary-fixed-variant": "#163da5",
|
||||
"error-container": "#ffdad6",
|
||||
"on-tertiary": "#ffffff",
|
||||
"inverse-surface": "#2e3132",
|
||||
"secondary": "#3657be",
|
||||
"primary-fixed-dim": "#b8c3ff",
|
||||
"primary": "#002da7",
|
||||
"on-primary-container": "#bcc6ff",
|
||||
"surface-container": "#edeeef",
|
||||
"background": "#f8f9fa",
|
||||
"on-secondary-container": "#002780",
|
||||
"surface-container-low": "#f3f4f5",
|
||||
"secondary-fixed": "#dce1ff",
|
||||
"on-background": "#191c1d",
|
||||
"on-secondary": "#ffffff",
|
||||
"on-primary": "#ffffff",
|
||||
"on-surface-variant": "#444655",
|
||||
"secondary-container": "#7593fd",
|
||||
"error": "#ba1a1a",
|
||||
"tertiary-container": "#9c2d00",
|
||||
"on-tertiary-container": "#ffb9a3",
|
||||
"surface-container-high": "#e7e8e9",
|
||||
"on-tertiary-fixed-variant": "#842500",
|
||||
"outline-variant": "#c4c5d7",
|
||||
"surface-bright": "#f8f9fa",
|
||||
"on-tertiary-fixed": "#3a0b00",
|
||||
"surface-variant": "#e1e3e4",
|
||||
"surface-container-highest": "#e1e3e4"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline": ["Manrope"],
|
||||
"body": ["Inter"],
|
||||
"label": ["Inter"]
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
body { font-family: 'Inter', sans-serif; }
|
||||
h1, h2, h3 { font-family: 'Manrope', sans-serif; }
|
||||
.nav-active { color: #002da7; }
|
||||
.nav-active span.material-symbols-outlined { font-variation-settings: 'FILL' 1; }
|
||||
.hide-scrollbar::-webkit-scrollbar { display: none; }
|
||||
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface text-on-surface">
|
||||
<!-- TopNavBar -->
|
||||
<header class="fixed top-0 w-full z-50 bg-white/90 dark:bg-slate-950/90 backdrop-blur-xl border-b border-outline-variant/10">
|
||||
<div class="flex justify-between items-center max-w-7xl mx-auto px-6 h-16">
|
||||
<div class="text-xl font-bold tracking-tighter text-slate-900 dark:text-white">
|
||||
Kristijan Popovski
|
||||
</div>
|
||||
<!-- Desktop Links -->
|
||||
<nav class="hidden md:flex space-x-8">
|
||||
<a class="text-slate-600 dark:text-slate-400 hover:text-blue-600 transition-colors font-manrope font-bold tracking-tight text-lg" href="#">Home</a>
|
||||
<a class="text-blue-700 dark:text-blue-400 border-b-2 border-blue-700 dark:border-blue-400 pb-1 font-manrope font-bold tracking-tight text-lg" href="#">Projects</a>
|
||||
<a class="text-slate-600 dark:text-slate-400 hover:text-blue-600 transition-colors font-manrope font-bold tracking-tight text-lg" href="#">CV</a>
|
||||
<a class="text-slate-600 dark:text-slate-400 hover:text-blue-600 transition-colors font-manrope font-bold tracking-tight text-lg" href="#">Contact</a>
|
||||
</nav>
|
||||
<button class="hidden md:block bg-primary text-on-primary px-6 py-2 rounded-xl font-manrope font-bold text-lg transition-transform scale-95 active:scale-90">
|
||||
Get in Touch
|
||||
</button>
|
||||
<!-- Mobile Menu Icon -->
|
||||
<div class="md:hidden">
|
||||
<span class="material-symbols-outlined text-primary text-2xl">menu</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main class="pt-24 pb-24 px-6 max-w-2xl mx-auto">
|
||||
<!-- Section Header -->
|
||||
<header class="mb-8">
|
||||
<span class="text-[0.7rem] font-label font-bold uppercase tracking-[0.1em] text-secondary mb-2 block">Portfolio</span>
|
||||
<h1 class="text-3xl font-headline font-extrabold tracking-tight text-on-surface mb-3">Selected Works</h1>
|
||||
<p class="text-on-surface-variant text-base leading-relaxed font-body">A curated showcase of architectural design and structural engineering excellence.</p>
|
||||
</header>
|
||||
<!-- Filter Bar -->
|
||||
<div class="mb-10 -mx-6 overflow-x-auto hide-scrollbar flex items-center gap-3 px-6 py-2">
|
||||
<button class="whitespace-nowrap px-5 py-2 rounded-full bg-primary text-on-primary text-xs font-bold uppercase tracking-wider shadow-sm">All Works</button>
|
||||
<button class="whitespace-nowrap px-5 py-2 rounded-full bg-white text-on-surface-variant border border-outline-variant/30 text-xs font-bold uppercase tracking-wider">Public</button>
|
||||
<button class="whitespace-nowrap px-5 py-2 rounded-full bg-white text-on-surface-variant border border-outline-variant/30 text-xs font-bold uppercase tracking-wider">Corporate</button>
|
||||
<button class="whitespace-nowrap px-5 py-2 rounded-full bg-white text-on-surface-variant border border-outline-variant/30 text-xs font-bold uppercase tracking-wider">Sustainable</button>
|
||||
</div>
|
||||
<!-- Project Cards Stack -->
|
||||
<div class="space-y-16">
|
||||
<!-- Project 1: Governance -->
|
||||
<article class="group">
|
||||
<div class="relative rounded-2xl overflow-hidden mb-5 aspect-[16/10] bg-surface-container-low shadow-sm">
|
||||
<img alt="Governance center architectural visualization" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCTZwv_UuDetFUXGnNk0OLKuhLog8XM3a8HD2BwGpuWw22hMbKHDMbvfe0PIW1wY-A4xlP2xQPoiWFTv0bAtcowVK5HAwcvSgr8wXBTfSKiy0C6BSLbssTpwDJHVZLeKJzs-ToAfJN-cCg_t5JnZ0MARWkNl6q2yMXFJiM5wBwXz8UsaYNdRQk0Esz9e5yyoJr_f6UMeRtFGdVlhoaBZEUNsjX7E-kKPSGu04tj-anQxEBTOLEDLV2Icxwx4-U57MSwi1cYxqchAU8"/>
|
||||
<div class="absolute top-3 right-3 bg-white/90 backdrop-blur-md px-3 py-1 rounded-full shadow-sm">
|
||||
<span class="text-[0.65rem] font-label font-bold uppercase text-primary tracking-wider">Public Sector</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-[0.65rem] font-label font-bold uppercase tracking-[0.15em] text-secondary">Governance</span>
|
||||
</div>
|
||||
<h2 class="text-2xl font-headline font-extrabold text-on-surface tracking-tight">The Meridian Complex</h2>
|
||||
<p class="text-on-surface-variant leading-relaxed font-body text-[0.95rem]">A sustainable mixed-use development focused on integrating high-density living with carbon-neutral green corridors.</p>
|
||||
<div class="mt-5 bg-primary/5 rounded-2xl p-5 border border-primary/10">
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center shrink-0">
|
||||
<span class="material-symbols-outlined text-primary text-xl">analytics</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-headline font-bold text-[0.7rem] text-primary uppercase tracking-[0.1em] mb-1">Impact Outcome</h3>
|
||||
<p class="text-on-surface text-[0.9rem] leading-snug font-medium italic">"Achieved a 40% reduction in thermal leakage via innovative glazing solutions."</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<!-- Project 2: Business Pivot -->
|
||||
<article class="group">
|
||||
<div class="relative rounded-2xl overflow-hidden mb-5 aspect-[16/10] bg-surface-container-low shadow-sm">
|
||||
<img alt="Modern business infrastructure" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDiPa0fQ8vBiuJL5ZjACQuyJukK7C0eLX4a1888VvGfb9tQwxBiiVw42oFrC2GssxtihQIJ-luSwWmEPcV1J7s9apy9KkTB6ez7l2jRNU8ploXabhtQL2o7zfyER41x4tu03zxVGnfdKVBdhMjNfKOYyy0oXIVZHsxOkxW45IlWdwd7DYUMhU6CUbZvW3y048lecVv1G5FNrcNvycipt5XUuYFlq1GBz2327LKGM2B2xn3ifLhoLQI2YCg7GyhEyHr2YDwNBJJYbF0"/>
|
||||
<div class="absolute top-3 right-3 bg-white/90 backdrop-blur-md px-3 py-1 rounded-full shadow-sm">
|
||||
<span class="text-[0.65rem] font-label font-bold uppercase text-primary tracking-wider">Corporate</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-[0.65rem] font-label font-bold uppercase tracking-[0.15em] text-secondary">Business Pivot</span>
|
||||
</div>
|
||||
<h2 class="text-2xl font-headline font-extrabold text-on-surface tracking-tight">Vanguard Research Hub</h2>
|
||||
<p class="text-on-surface-variant leading-relaxed font-body text-[0.95rem]">Reimagining public library spaces as high-tech research centers using modular concrete geometries.</p>
|
||||
<div class="mt-5 bg-primary/5 rounded-2xl p-5 border border-primary/10">
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center shrink-0">
|
||||
<span class="material-symbols-outlined text-primary text-xl">award_star</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-headline font-bold text-[0.7rem] text-primary uppercase tracking-[0.1em] mb-1">Impact Outcome</h3>
|
||||
<p class="text-on-surface text-[0.9rem] leading-snug font-medium italic">"Winner of the 2022 Regional Excellence in Civic Design Award."</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<!-- Project 3: Greenie -->
|
||||
<article class="group">
|
||||
<div class="relative rounded-2xl overflow-hidden mb-5 aspect-[16/10] bg-surface-container-low shadow-sm">
|
||||
<img alt="Sustainable residential design" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAJRlzmGOnTUl8erHzanzyoaAc7J721GNmQc6QmmZpjtNXMEuRDrbiT2oUozUe-nGADDuWeOZPTtMlfJ80vXe_mlRKEn0RI_oMz7YGaWJMQ9AZMfIMmgNshx1fyg65lfA8Zwc6Rwcvsu4ZSaUklL_PxC5nocvzuLpy9FshmwW3GNC2zMVkGIB7THgf-m0o7bE5IlXep_3ZAjRh-SAELqrqxKDRiAatvY0SEvxcyCULiV0hkM4BPZY3_p3bz1zUhekz4YgVjR25x9TQ"/>
|
||||
<div class="absolute top-3 right-3 bg-white/90 backdrop-blur-md px-3 py-1 rounded-full shadow-sm">
|
||||
<span class="text-[0.65rem] font-label font-bold uppercase text-primary tracking-wider">Sustainable</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-[0.65rem] font-label font-bold uppercase tracking-[0.15em] text-secondary">Greenie</span>
|
||||
</div>
|
||||
<h2 class="text-2xl font-headline font-extrabold text-on-surface tracking-tight">The Zenith Pavilion</h2>
|
||||
<p class="text-on-surface-variant leading-relaxed font-body text-[0.95rem]">A masterclass in biophilic residential design, blending interior luxury with the natural topography of the alpine site.</p>
|
||||
<div class="mt-5 bg-primary/5 rounded-2xl p-5 border border-primary/10">
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center shrink-0">
|
||||
<span class="material-symbols-outlined text-primary text-xl">precision_manufacturing</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-headline font-bold text-[0.7rem] text-primary uppercase tracking-[0.1em] mb-1">Impact Outcome</h3>
|
||||
<p class="text-on-surface text-[0.9rem] leading-snug font-medium italic">"Preserved 100% of the site's existing root networks using zero-impact foundations."</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<!-- Project 4: Youth Summit -->
|
||||
<article class="group">
|
||||
<div class="relative rounded-2xl overflow-hidden mb-5 aspect-[16/10] bg-surface-container-low shadow-sm">
|
||||
<img alt="Community center design" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuC5ggQiPuUgItHGv4xPRnRcbScKg3pavjvPILMvAEWb6xrLYTEHumW5TMYVA54zj8zQ97RFX-jEo6A7obNeVHWU09w5d0riHqa2gsoFkpjSM-jdpivDuedFOxwXCl662WSqEc8DqIsiQP-b7OwGsp7G2AJNEC4tP-BPNHYV1cTm6ukQrz4tiuQ47afmqgCbmyLb0bC2xHYVqpyGygKIfJXRkrfX4ygNMPNkGONn8sSL9LLmSYCPmceSHPoNy6PxqhaoTW5wqKfNF-Q"/>
|
||||
<div class="absolute top-3 right-3 bg-white/90 backdrop-blur-md px-3 py-1 rounded-full shadow-sm">
|
||||
<span class="text-[0.65rem] font-label font-bold uppercase text-primary tracking-wider">Community</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-[0.65rem] font-label font-bold uppercase tracking-[0.15em] text-secondary">Youth Summit</span>
|
||||
</div>
|
||||
<h2 class="text-2xl font-headline font-extrabold text-on-surface tracking-tight">Innovation Plaza</h2>
|
||||
<p class="text-on-surface-variant leading-relaxed font-body text-[0.95rem]">Designing social hubs that facilitate cross-generational learning through adaptable open-space layouts.</p>
|
||||
<div class="mt-5 bg-primary/5 rounded-2xl p-5 border border-primary/10">
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center shrink-0">
|
||||
<span class="material-symbols-outlined text-primary text-xl">groups</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-headline font-bold text-[0.7rem] text-primary uppercase tracking-[0.1em] mb-1">Impact Outcome</h3>
|
||||
<p class="text-on-surface text-[0.9rem] leading-snug font-medium italic">"Boosted local community engagement by 150% through inclusive design."</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<!-- Collaboration CTA -->
|
||||
<section class="mt-20 mb-12 text-center bg-primary rounded-[2rem] p-8 shadow-xl shadow-primary/20 relative overflow-hidden">
|
||||
<div class="absolute -right-8 -top-8 w-32 h-32 bg-white/10 rounded-full blur-2xl"></div>
|
||||
<h2 class="text-2xl font-headline font-extrabold text-on-primary mb-3">Start a Project?</h2>
|
||||
<p class="text-primary-container text-base mb-8 max-w-xs mx-auto">Let's discuss how we can bring precision and excellence to your next architectural venture.</p>
|
||||
<button class="w-full bg-white text-primary py-4 rounded-2xl font-headline font-bold text-base shadow-lg transition-transform active:scale-[0.98]">
|
||||
Let's Collaborate
|
||||
</button>
|
||||
</section>
|
||||
<!-- Pagination -->
|
||||
<div class="text-center">
|
||||
<button class="w-full bg-surface-container-high text-on-surface py-4 rounded-2xl font-headline font-bold text-base border border-outline-variant/10 active:scale-[0.98]">
|
||||
View All Projects
|
||||
</button>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Footer -->
|
||||
<footer class="w-full py-12 px-6 bg-slate-50 dark:bg-slate-900 border-t border-slate-200/50 mb-16">
|
||||
<div class="max-w-2xl mx-auto space-y-6">
|
||||
<div class="font-manrope font-black text-lg text-slate-900 dark:text-white uppercase tracking-tighter">
|
||||
Kristijan Popovski
|
||||
</div>
|
||||
<p class="text-slate-500 dark:text-slate-400 font-inter text-xs tracking-wide">
|
||||
© 2024 Kristijan Popovski. Engineered with Authority.
|
||||
</p>
|
||||
<div class="flex gap-6">
|
||||
<a class="text-slate-500 dark:text-slate-400 font-inter text-xs tracking-wide uppercase font-bold hover:text-blue-600 transition-colors" href="#">LinkedIn</a>
|
||||
<a class="text-slate-500 dark:text-slate-400 font-inter text-xs tracking-wide uppercase font-bold hover:text-blue-600 transition-colors" href="#">Email</a>
|
||||
<a class="text-slate-500 dark:text-slate-400 font-inter text-xs tracking-wide uppercase font-bold hover:text-blue-600 transition-colors" href="#">Download CV</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- Bottom Navigation Bar (Mobile only) -->
|
||||
<nav class="md:hidden fixed bottom-0 left-0 right-0 bg-white/95 backdrop-blur-xl border-t border-outline-variant/10 px-6 pt-3 pb-6 z-50">
|
||||
<div class="flex justify-between items-center max-w-lg mx-auto">
|
||||
<a class="flex flex-col items-center gap-1 text-slate-400 transition-colors" href="#">
|
||||
<span class="material-symbols-outlined text-2xl">home</span>
|
||||
<span class="text-[9px] font-bold uppercase tracking-widest font-label">Home</span>
|
||||
</a>
|
||||
<a class="flex flex-col items-center gap-1 nav-active transition-colors" href="#">
|
||||
<span class="material-symbols-outlined text-2xl">grid_view</span>
|
||||
<span class="text-[9px] font-bold uppercase tracking-widest font-label">Projects</span>
|
||||
</a>
|
||||
<a class="flex flex-col items-center gap-1 text-slate-400 transition-colors" href="#">
|
||||
<span class="material-symbols-outlined text-2xl">description</span>
|
||||
<span class="text-[9px] font-bold uppercase tracking-widest font-label">CV</span>
|
||||
</a>
|
||||
<a class="flex flex-col items-center gap-1 text-slate-400 transition-colors" href="#">
|
||||
<span class="material-symbols-outlined text-2xl">mail</span>
|
||||
<span class="text-[9px] font-bold uppercase tracking-widest font-label">Contact</span>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 205 KiB |
|
|
@ -0,0 +1,300 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<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.">
|
||||
<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">
|
||||
</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 is-current" 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" 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 is-current" 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" href="contact.html">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main class="page-main">
|
||||
<section class="section section--tight">
|
||||
<div class="container">
|
||||
<div class="hero hero--home">
|
||||
<div data-animate>
|
||||
<div class="eyebrow">
|
||||
<span class="eyebrow__dot"></span>
|
||||
Strategic Leadership
|
||||
</div>
|
||||
<h1 class="hero__title">Structured leadership.<br><strong>Strategic thinking.</strong><br>Real execution.</h1>
|
||||
<p class="hero__lede">Delivering institutional excellence across governance, finance, and project execution. From policy and representation to operational detail, the focus is always on clarity, trust, and outcomes.</p>
|
||||
<div class="button-row">
|
||||
<a class="button button--primary" href="assets/documents/cv_full.pdf">Download CV</a>
|
||||
<a class="button button--secondary" href="contact.html">Get in touch</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-media" data-animate>
|
||||
<div class="hero-media__frame">
|
||||
<img src="assets/images/portrait-main.jpg" alt="Kristijan Popovski in a light suit outdoors" width="870" height="1160">
|
||||
<div class="glass-card">
|
||||
<p class="glass-card__label">Current Focus</p>
|
||||
<p class="glass-card__title">Institutional governance, finance, and cross-border execution</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-media__accent"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section metric-strip">
|
||||
<div class="container">
|
||||
<div class="metric-strip__grid" data-animate>
|
||||
<article class="metric-strip__item">
|
||||
<p class="metric-strip__value">120+</p>
|
||||
<p class="metric-strip__label">Members built into an active organization</p>
|
||||
</article>
|
||||
<article class="metric-strip__item">
|
||||
<p class="metric-strip__value">50+</p>
|
||||
<p class="metric-strip__label">Events organized across student and civic networks</p>
|
||||
</article>
|
||||
<article class="metric-strip__item">
|
||||
<p class="metric-strip__value">20+</p>
|
||||
<p class="metric-strip__label">Strategic partnerships developed</p>
|
||||
</article>
|
||||
<article class="metric-strip__item">
|
||||
<p class="metric-strip__value">Senate</p>
|
||||
<p class="metric-strip__label">Governance roles in university structures</p>
|
||||
</article>
|
||||
<article class="metric-strip__item">
|
||||
<p class="metric-strip__value">Finance</p>
|
||||
<p class="metric-strip__label">Regional technology-sector finance experience</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="section-header" data-animate>
|
||||
<div class="section-header__text">
|
||||
<div class="section-header__accent"></div>
|
||||
<h2 class="section-title">Selected Experience</h2>
|
||||
<p class="section-intro">A concise view of leadership, representation, and operational roles that shape the broader body of work.</p>
|
||||
</div>
|
||||
<a class="text-link" href="cv.html">
|
||||
View full CV
|
||||
<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>
|
||||
</a>
|
||||
</div>
|
||||
<div class="card-grid card-grid--three">
|
||||
<article class="card" data-animate>
|
||||
<div class="card__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>
|
||||
</div>
|
||||
<span class="card__eyebrow">Founder and President</span>
|
||||
<h3 class="card__title">MSO Slovenia</h3>
|
||||
<p class="card__text">Founded and scaled a representative student organization, establishing partnerships, operational frameworks, and a visible community presence.</p>
|
||||
</article>
|
||||
<article class="card" data-animate>
|
||||
<div class="card__icon">
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M12 3 1 9l4 2.18V17h2v-4.73l5 2.73 9-4.91V17h2V9L12 3zm0 9.58L5.96 9 12 5.42 18.04 9 12 12.58z"/></svg>
|
||||
</div>
|
||||
<span class="card__eyebrow">Governance Roles</span>
|
||||
<h3 class="card__title">University of Ljubljana</h3>
|
||||
<p class="card__text">Representing students within faculty and university structures, bridging institutional decision-making with practical student interests.</p>
|
||||
</article>
|
||||
<article class="card" data-animate>
|
||||
<div class="card__icon">
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M3 13h2v8H3zm4-6h2v14H7zm4 3h2v11h-2zm4-8h2v19h-2zm4 11h2v8h-2z"/></svg>
|
||||
</div>
|
||||
<span class="card__eyebrow">Finance Experience</span>
|
||||
<h3 class="card__title">CVS Mobile / Eurowag</h3>
|
||||
<p class="card__text">Worked across finance and accounting workflows, supporting reporting, invoice processing, and operational transparency across subsidiaries.</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section section--soft">
|
||||
<div class="container">
|
||||
<div class="section-header" data-animate>
|
||||
<div class="section-header__text">
|
||||
<span class="mini-label">What I Work On</span>
|
||||
<h2 class="section-title">Structured focus areas</h2>
|
||||
<p class="section-intro">A blend of institutional thinking, practical leadership, and business discipline applied to real environments.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="focus-grid">
|
||||
<article class="focus-card focus-card--light focus-card--wide" data-animate>
|
||||
<div class="focus-card__layout">
|
||||
<div>
|
||||
<h3 class="focus-card__title">Strategy & Governance</h3>
|
||||
<p class="card__text">Designing frameworks that help organizations coordinate stakeholders, clarify mandates, and move with institutional confidence.</p>
|
||||
<ul class="focus-card__list">
|
||||
<li><svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="m9 16.17-3.88-3.88L3.71 13.7 9 19l12-12-1.41-1.41z"/></svg>Policy and framework design</li>
|
||||
<li><svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="m9 16.17-3.88-3.88L3.71 13.7 9 19l12-12-1.41-1.41z"/></svg>Stakeholder coordination</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="focus-card__media">
|
||||
<img src="assets/images/focus-strategy.jpg" alt="Meeting room prepared for strategic planning" width="1112" height="742" loading="lazy">
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="focus-card focus-card--primary focus-card--tall" data-animate>
|
||||
<span class="mini-label">Finance & Business Insight</span>
|
||||
<h3 class="focus-card__title">Numbers that support better decisions</h3>
|
||||
<p class="card__text">Working where financial detail meets operational reality, with an emphasis on discipline, reporting, and executional clarity.</p>
|
||||
<div class="tag-row">
|
||||
<span class="tag">Reporting</span>
|
||||
<span class="tag">Operations</span>
|
||||
<span class="tag">Analysis</span>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="focus-card focus-card--light focus-card--banner" data-animate>
|
||||
<div class="card__icon">
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M12 2 1 21h22L12 2zm1 16h-2v-2h2v2zm0-4h-2v-4h2v4z"/></svg>
|
||||
</div>
|
||||
<h3 class="focus-card__title">Project Leadership & 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">
|
||||
<span class="tag">Impact Driven</span>
|
||||
<span class="tag">Operational Rigor</span>
|
||||
<span class="tag">Europe-wide Experience</span>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="section-header" data-animate>
|
||||
<div class="section-header__text">
|
||||
<div class="section-header__accent"></div>
|
||||
<h2 class="section-title">Projects Preview</h2>
|
||||
<p class="section-intro">Selected initiatives that combine leadership, planning, and visible outcomes.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="project-preview-grid">
|
||||
<article class="project-card" data-animate>
|
||||
<div class="project-card__media">
|
||||
<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">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>
|
||||
</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="project-card" data-animate>
|
||||
<div class="project-card__media">
|
||||
<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">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>
|
||||
</a>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section section--soft">
|
||||
<div class="container">
|
||||
<div class="about-grid">
|
||||
<div class="image-frame" data-animate>
|
||||
<img src="assets/images/portrait-main.jpg" alt="Portrait of Kristijan Popovski in a professional setting" width="870" height="1160" loading="lazy">
|
||||
</div>
|
||||
<div class="rich-text" data-animate>
|
||||
<span class="mini-label">About</span>
|
||||
<h2 class="section-title">The intersection of <span class="text-accent">theory and practice.</span></h2>
|
||||
<p>Kristijan Popovski works at the intersection of governance, finance, and project execution. His work is shaped by academic grounding, institutional engagement, and practical operational experience.</p>
|
||||
<p>Based between Slovenia and Macedonia, he focuses on building structures that are credible, well-organized, and resilient under real-world pressure.</p>
|
||||
<div class="about__stats">
|
||||
<div class="stat-card">
|
||||
<p class="stat-card__value">10+</p>
|
||||
<p class="stat-card__caption">Years active in leadership and public-facing roles</p>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<p class="stat-card__value">2</p>
|
||||
<p class="stat-card__caption">Strategic hubs across Slovenia and Macedonia</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" id="contact-cta">
|
||||
<div class="container">
|
||||
<div class="cta-banner" data-animate>
|
||||
<div class="cta-banner__content">
|
||||
<h2 class="cta-banner__title">Start a conversation.</h2>
|
||||
<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://si.linkedin.com/in/kristijan-popovski-688905232" target="_blank" rel="noreferrer">LinkedIn</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="site-footer">
|
||||
<div class="site-footer__inner">
|
||||
<div>
|
||||
<div class="site-footer__brand">Kristijan Popovski</div>
|
||||
<p class="site-footer__text">Built around institutional trust, structured thinking, and practical execution across Europe.</p>
|
||||
</div>
|
||||
<div class="site-footer__links">
|
||||
<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://si.linkedin.com/in/kristijan-popovski-688905232" target="_blank" rel="noreferrer">LinkedIn</a>
|
||||
</div>
|
||||
<div class="site-footer__meta">Governance - Finance - Execution</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
<script src="js/script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,222 @@
|
|||
document.addEventListener("DOMContentLoaded", () => {
|
||||
setupMobileNavigation();
|
||||
setupScrollAnimations();
|
||||
setupProjectFiltering();
|
||||
setupContactForm();
|
||||
setupSmoothScrollClose();
|
||||
});
|
||||
|
||||
function setupMobileNavigation() {
|
||||
const toggle = document.querySelector("[data-menu-toggle]");
|
||||
const mobileNav = document.querySelector("[data-mobile-nav]");
|
||||
|
||||
if (!toggle || !mobileNav) {
|
||||
return;
|
||||
}
|
||||
|
||||
const updateState = (isOpen) => {
|
||||
toggle.classList.toggle("is-open", isOpen);
|
||||
toggle.setAttribute("aria-expanded", String(isOpen));
|
||||
mobileNav.classList.toggle("is-open", isOpen);
|
||||
document.body.classList.toggle("menu-open", isOpen);
|
||||
};
|
||||
|
||||
toggle.addEventListener("click", () => {
|
||||
const isOpen = toggle.getAttribute("aria-expanded") === "true";
|
||||
updateState(!isOpen);
|
||||
});
|
||||
|
||||
mobileNav.querySelectorAll("a").forEach((link) => {
|
||||
link.addEventListener("click", () => updateState(false));
|
||||
});
|
||||
|
||||
document.addEventListener("keydown", (event) => {
|
||||
if (event.key === "Escape") {
|
||||
updateState(false);
|
||||
}
|
||||
});
|
||||
|
||||
document.addEventListener("click", (event) => {
|
||||
const clickedInsideMenu = mobileNav.contains(event.target);
|
||||
const clickedToggle = toggle.contains(event.target);
|
||||
|
||||
if (!clickedInsideMenu && !clickedToggle) {
|
||||
updateState(false);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function setupSmoothScrollClose() {
|
||||
const samePageLinks = document.querySelectorAll('a[href^="#"]');
|
||||
|
||||
samePageLinks.forEach((link) => {
|
||||
link.addEventListener("click", (event) => {
|
||||
const targetId = link.getAttribute("href");
|
||||
|
||||
if (!targetId || targetId === "#") {
|
||||
return;
|
||||
}
|
||||
|
||||
const target = document.querySelector(targetId);
|
||||
|
||||
if (!target) {
|
||||
return;
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
target.scrollIntoView({ behavior: "smooth", block: "start" });
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function setupScrollAnimations() {
|
||||
const animatedItems = document.querySelectorAll("[data-animate]");
|
||||
|
||||
if (!animatedItems.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!("IntersectionObserver" in window)) {
|
||||
animatedItems.forEach((item) => item.classList.add("is-visible"));
|
||||
return;
|
||||
}
|
||||
|
||||
const observer = new IntersectionObserver(
|
||||
(entries, currentObserver) => {
|
||||
entries.forEach((entry) => {
|
||||
if (!entry.isIntersecting) {
|
||||
return;
|
||||
}
|
||||
|
||||
entry.target.classList.add("is-visible");
|
||||
currentObserver.unobserve(entry.target);
|
||||
});
|
||||
},
|
||||
{
|
||||
threshold: 0.12,
|
||||
rootMargin: "0px 0px -40px 0px"
|
||||
}
|
||||
);
|
||||
|
||||
animatedItems.forEach((item) => observer.observe(item));
|
||||
}
|
||||
|
||||
function setupProjectFiltering() {
|
||||
const filterButtons = document.querySelectorAll("[data-filter]");
|
||||
const filterItems = document.querySelectorAll("[data-category]");
|
||||
|
||||
if (!filterButtons.length || !filterItems.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
filterButtons.forEach((button) => {
|
||||
button.addEventListener("click", () => {
|
||||
const filterValue = button.dataset.filter;
|
||||
|
||||
filterButtons.forEach((otherButton) => {
|
||||
otherButton.classList.toggle("is-active", otherButton === button);
|
||||
otherButton.setAttribute("aria-pressed", String(otherButton === button));
|
||||
});
|
||||
|
||||
filterItems.forEach((item) => {
|
||||
const categories = (item.dataset.category || "").split(" ");
|
||||
const shouldShow = filterValue === "all" || categories.includes(filterValue);
|
||||
item.classList.toggle("is-hidden", !shouldShow);
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function setupContactForm() {
|
||||
const form = document.querySelector("[data-contact-form]");
|
||||
|
||||
if (!form) {
|
||||
return;
|
||||
}
|
||||
|
||||
const fields = Array.from(form.querySelectorAll("[data-required], [type='email']"));
|
||||
const status = form.querySelector("[data-form-status]");
|
||||
|
||||
const validators = {
|
||||
email: (value) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)
|
||||
};
|
||||
|
||||
const setFieldError = (field, message) => {
|
||||
const wrapper = field.closest(".form-field");
|
||||
const error = wrapper ? wrapper.querySelector(".form-field__error") : null;
|
||||
|
||||
field.setAttribute("aria-invalid", String(Boolean(message)));
|
||||
|
||||
if (wrapper) {
|
||||
wrapper.classList.toggle("is-invalid", Boolean(message));
|
||||
}
|
||||
|
||||
if (error) {
|
||||
error.textContent = message || "";
|
||||
}
|
||||
};
|
||||
|
||||
const validateField = (field) => {
|
||||
const rawValue = field.value.trim();
|
||||
const label = field.dataset.label || "This field";
|
||||
|
||||
if (field.hasAttribute("data-required") && !rawValue) {
|
||||
setFieldError(field, `${label} is required.`);
|
||||
return false;
|
||||
}
|
||||
|
||||
if (field.type === "email" && rawValue && !validators.email(rawValue)) {
|
||||
setFieldError(field, "Enter a valid email address.");
|
||||
return false;
|
||||
}
|
||||
|
||||
setFieldError(field, "");
|
||||
return true;
|
||||
};
|
||||
|
||||
fields.forEach((field) => {
|
||||
field.addEventListener("blur", () => validateField(field));
|
||||
field.addEventListener("input", () => {
|
||||
if (field.getAttribute("aria-invalid") === "true") {
|
||||
validateField(field);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
form.addEventListener("submit", (event) => {
|
||||
let isValid = true;
|
||||
|
||||
fields.forEach((field) => {
|
||||
if (!validateField(field)) {
|
||||
isValid = false;
|
||||
}
|
||||
});
|
||||
|
||||
if (!isValid) {
|
||||
event.preventDefault();
|
||||
|
||||
if (status) {
|
||||
status.textContent = "Please review the highlighted fields and try again.";
|
||||
status.classList.remove("is-success");
|
||||
}
|
||||
|
||||
const firstInvalid = form.querySelector("[aria-invalid='true']");
|
||||
|
||||
if (firstInvalid) {
|
||||
firstInvalid.focus();
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
|
||||
if (status) {
|
||||
status.textContent = "Thanks. Your message structure is validated and ready for backend integration.";
|
||||
status.classList.add("is-success");
|
||||
}
|
||||
|
||||
form.reset();
|
||||
fields.forEach((field) => setFieldError(field, ""));
|
||||
});
|
||||
}
|
||||
|
|
@ -0,0 +1,184 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Projects | 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">
|
||||
</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 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>
|
||||
</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 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>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main class="page-main">
|
||||
<section class="section section--tight">
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<div class="project-grid">
|
||||
<article class="card project-card" data-category="institutional" data-animate>
|
||||
<div class="project-card__media">
|
||||
<img src="assets/images/project-governance.jpg" alt="Modern conference hall with blue lighting and stage screen" width="1440" height="900">
|
||||
<span class="project-card__tag">Institutional</span>
|
||||
</div>
|
||||
<div class="project-card__body">
|
||||
<span class="project-card__meta">International Summit</span>
|
||||
<h2 class="project-card__title">International Governance Summit</h2>
|
||||
<p class="project-card__text">Spearheaded coordination for a multinational dialogue on digital infrastructure policy, aligning delegations and framing a shared process for decision-making.</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">Built consensus around a shared digital sovereignty framework across multiple participating delegations.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="card project-card" data-category="consulting" data-animate>
|
||||
<div class="project-card__media">
|
||||
<img src="assets/images/project-consulting.jpg" alt="Consultant using a stylus on a digital business dashboard" width="1440" height="900">
|
||||
<span class="project-card__tag">Consulting</span>
|
||||
</div>
|
||||
<div class="project-card__body">
|
||||
<span class="project-card__meta">Business Model</span>
|
||||
<h2 class="project-card__title">Strategic Business Model Pivot</h2>
|
||||
<p class="project-card__text">Redesigned an operational model for a logistics environment moving from legacy tracking systems toward a clearer and more automated structure.</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">Created a clearer path for higher processing speed, lower friction, and stronger operational visibility.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<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>
|
||||
</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>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="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>
|
||||
</div>
|
||||
</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">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="mailto:popovskik02@yahoo.com">Email</a>
|
||||
<a class="site-footer__link" href="assets/documents/cv_full.pdf">Download CV</a>
|
||||
</div>
|
||||
<div class="site-footer__meta">Curated projects and measurable outcomes</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
<script src="js/script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue