262 lines
15 KiB
HTML
262 lines
15 KiB
HTML
<!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> |