421 lines
28 KiB
HTML
421 lines
28 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>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> |