292 lines
18 KiB
HTML
292 lines
18 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"/>
|
|
<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> |