432 lines
23 KiB
HTML
432 lines
23 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>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> |