361 lines
20 KiB
HTML
361 lines
20 KiB
HTML
<!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> |