291 lines
17 KiB
HTML
291 lines
17 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&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 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 { font-family: 'Manrope', sans-serif; }
|
|
.nav-active { color: #002da7; }
|
|
.nav-active span.material-symbols-outlined { font-variation-settings: 'FILL' 1; }
|
|
.hide-scrollbar::-webkit-scrollbar { display: none; }
|
|
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
|
|
</style>
|
|
</head>
|
|
<body class="bg-surface text-on-surface">
|
|
<!-- TopNavBar -->
|
|
<header class="fixed top-0 w-full z-50 bg-white/90 dark:bg-slate-950/90 backdrop-blur-xl border-b border-outline-variant/10">
|
|
<div class="flex justify-between items-center max-w-7xl mx-auto px-6 h-16">
|
|
<div class="text-xl font-bold tracking-tighter text-slate-900 dark:text-white">
|
|
Kristijan Popovski
|
|
</div>
|
|
<!-- Desktop Links -->
|
|
<nav class="hidden md:flex space-x-8">
|
|
<a class="text-slate-600 dark:text-slate-400 hover:text-blue-600 transition-colors font-manrope font-bold tracking-tight text-lg" href="#">Home</a>
|
|
<a class="text-blue-700 dark:text-blue-400 border-b-2 border-blue-700 dark:border-blue-400 pb-1 font-manrope font-bold tracking-tight text-lg" href="#">Projects</a>
|
|
<a class="text-slate-600 dark:text-slate-400 hover:text-blue-600 transition-colors font-manrope font-bold tracking-tight text-lg" href="#">CV</a>
|
|
<a class="text-slate-600 dark:text-slate-400 hover:text-blue-600 transition-colors font-manrope font-bold tracking-tight text-lg" href="#">Contact</a>
|
|
</nav>
|
|
<button class="hidden md:block bg-primary text-on-primary px-6 py-2 rounded-xl font-manrope font-bold text-lg transition-transform scale-95 active:scale-90">
|
|
Get in Touch
|
|
</button>
|
|
<!-- Mobile Menu Icon -->
|
|
<div class="md:hidden">
|
|
<span class="material-symbols-outlined text-primary text-2xl">menu</span>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<main class="pt-24 pb-24 px-6 max-w-2xl mx-auto">
|
|
<!-- Section Header -->
|
|
<header class="mb-8">
|
|
<span class="text-[0.7rem] font-label font-bold uppercase tracking-[0.1em] text-secondary mb-2 block">Portfolio</span>
|
|
<h1 class="text-3xl font-headline font-extrabold tracking-tight text-on-surface mb-3">Selected Works</h1>
|
|
<p class="text-on-surface-variant text-base leading-relaxed font-body">A curated showcase of architectural design and structural engineering excellence.</p>
|
|
</header>
|
|
<!-- Filter Bar -->
|
|
<div class="mb-10 -mx-6 overflow-x-auto hide-scrollbar flex items-center gap-3 px-6 py-2">
|
|
<button class="whitespace-nowrap px-5 py-2 rounded-full bg-primary text-on-primary text-xs font-bold uppercase tracking-wider shadow-sm">All Works</button>
|
|
<button class="whitespace-nowrap px-5 py-2 rounded-full bg-white text-on-surface-variant border border-outline-variant/30 text-xs font-bold uppercase tracking-wider">Public</button>
|
|
<button class="whitespace-nowrap px-5 py-2 rounded-full bg-white text-on-surface-variant border border-outline-variant/30 text-xs font-bold uppercase tracking-wider">Corporate</button>
|
|
<button class="whitespace-nowrap px-5 py-2 rounded-full bg-white text-on-surface-variant border border-outline-variant/30 text-xs font-bold uppercase tracking-wider">Sustainable</button>
|
|
</div>
|
|
<!-- Project Cards Stack -->
|
|
<div class="space-y-16">
|
|
<!-- Project 1: Governance -->
|
|
<article class="group">
|
|
<div class="relative rounded-2xl overflow-hidden mb-5 aspect-[16/10] bg-surface-container-low shadow-sm">
|
|
<img alt="Governance center architectural visualization" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCTZwv_UuDetFUXGnNk0OLKuhLog8XM3a8HD2BwGpuWw22hMbKHDMbvfe0PIW1wY-A4xlP2xQPoiWFTv0bAtcowVK5HAwcvSgr8wXBTfSKiy0C6BSLbssTpwDJHVZLeKJzs-ToAfJN-cCg_t5JnZ0MARWkNl6q2yMXFJiM5wBwXz8UsaYNdRQk0Esz9e5yyoJr_f6UMeRtFGdVlhoaBZEUNsjX7E-kKPSGu04tj-anQxEBTOLEDLV2Icxwx4-U57MSwi1cYxqchAU8"/>
|
|
<div class="absolute top-3 right-3 bg-white/90 backdrop-blur-md px-3 py-1 rounded-full shadow-sm">
|
|
<span class="text-[0.65rem] font-label font-bold uppercase text-primary tracking-wider">Public Sector</span>
|
|
</div>
|
|
</div>
|
|
<div class="space-y-3">
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-[0.65rem] font-label font-bold uppercase tracking-[0.15em] text-secondary">Governance</span>
|
|
</div>
|
|
<h2 class="text-2xl font-headline font-extrabold text-on-surface tracking-tight">The Meridian Complex</h2>
|
|
<p class="text-on-surface-variant leading-relaxed font-body text-[0.95rem]">A sustainable mixed-use development focused on integrating high-density living with carbon-neutral green corridors.</p>
|
|
<div class="mt-5 bg-primary/5 rounded-2xl p-5 border border-primary/10">
|
|
<div class="flex items-start gap-4">
|
|
<div class="w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center shrink-0">
|
|
<span class="material-symbols-outlined text-primary text-xl">analytics</span>
|
|
</div>
|
|
<div>
|
|
<h3 class="font-headline font-bold text-[0.7rem] text-primary uppercase tracking-[0.1em] mb-1">Impact Outcome</h3>
|
|
<p class="text-on-surface text-[0.9rem] leading-snug font-medium italic">"Achieved a 40% reduction in thermal leakage via innovative glazing solutions."</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<!-- Project 2: Business Pivot -->
|
|
<article class="group">
|
|
<div class="relative rounded-2xl overflow-hidden mb-5 aspect-[16/10] bg-surface-container-low shadow-sm">
|
|
<img alt="Modern business infrastructure" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDiPa0fQ8vBiuJL5ZjACQuyJukK7C0eLX4a1888VvGfb9tQwxBiiVw42oFrC2GssxtihQIJ-luSwWmEPcV1J7s9apy9KkTB6ez7l2jRNU8ploXabhtQL2o7zfyER41x4tu03zxVGnfdKVBdhMjNfKOYyy0oXIVZHsxOkxW45IlWdwd7DYUMhU6CUbZvW3y048lecVv1G5FNrcNvycipt5XUuYFlq1GBz2327LKGM2B2xn3ifLhoLQI2YCg7GyhEyHr2YDwNBJJYbF0"/>
|
|
<div class="absolute top-3 right-3 bg-white/90 backdrop-blur-md px-3 py-1 rounded-full shadow-sm">
|
|
<span class="text-[0.65rem] font-label font-bold uppercase text-primary tracking-wider">Corporate</span>
|
|
</div>
|
|
</div>
|
|
<div class="space-y-3">
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-[0.65rem] font-label font-bold uppercase tracking-[0.15em] text-secondary">Business Pivot</span>
|
|
</div>
|
|
<h2 class="text-2xl font-headline font-extrabold text-on-surface tracking-tight">Vanguard Research Hub</h2>
|
|
<p class="text-on-surface-variant leading-relaxed font-body text-[0.95rem]">Reimagining public library spaces as high-tech research centers using modular concrete geometries.</p>
|
|
<div class="mt-5 bg-primary/5 rounded-2xl p-5 border border-primary/10">
|
|
<div class="flex items-start gap-4">
|
|
<div class="w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center shrink-0">
|
|
<span class="material-symbols-outlined text-primary text-xl">award_star</span>
|
|
</div>
|
|
<div>
|
|
<h3 class="font-headline font-bold text-[0.7rem] text-primary uppercase tracking-[0.1em] mb-1">Impact Outcome</h3>
|
|
<p class="text-on-surface text-[0.9rem] leading-snug font-medium italic">"Winner of the 2022 Regional Excellence in Civic Design Award."</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<!-- Project 3: Greenie -->
|
|
<article class="group">
|
|
<div class="relative rounded-2xl overflow-hidden mb-5 aspect-[16/10] bg-surface-container-low shadow-sm">
|
|
<img alt="Sustainable residential design" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAJRlzmGOnTUl8erHzanzyoaAc7J721GNmQc6QmmZpjtNXMEuRDrbiT2oUozUe-nGADDuWeOZPTtMlfJ80vXe_mlRKEn0RI_oMz7YGaWJMQ9AZMfIMmgNshx1fyg65lfA8Zwc6Rwcvsu4ZSaUklL_PxC5nocvzuLpy9FshmwW3GNC2zMVkGIB7THgf-m0o7bE5IlXep_3ZAjRh-SAELqrqxKDRiAatvY0SEvxcyCULiV0hkM4BPZY3_p3bz1zUhekz4YgVjR25x9TQ"/>
|
|
<div class="absolute top-3 right-3 bg-white/90 backdrop-blur-md px-3 py-1 rounded-full shadow-sm">
|
|
<span class="text-[0.65rem] font-label font-bold uppercase text-primary tracking-wider">Sustainable</span>
|
|
</div>
|
|
</div>
|
|
<div class="space-y-3">
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-[0.65rem] font-label font-bold uppercase tracking-[0.15em] text-secondary">Greenie</span>
|
|
</div>
|
|
<h2 class="text-2xl font-headline font-extrabold text-on-surface tracking-tight">The Zenith Pavilion</h2>
|
|
<p class="text-on-surface-variant leading-relaxed font-body text-[0.95rem]">A masterclass in biophilic residential design, blending interior luxury with the natural topography of the alpine site.</p>
|
|
<div class="mt-5 bg-primary/5 rounded-2xl p-5 border border-primary/10">
|
|
<div class="flex items-start gap-4">
|
|
<div class="w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center shrink-0">
|
|
<span class="material-symbols-outlined text-primary text-xl">precision_manufacturing</span>
|
|
</div>
|
|
<div>
|
|
<h3 class="font-headline font-bold text-[0.7rem] text-primary uppercase tracking-[0.1em] mb-1">Impact Outcome</h3>
|
|
<p class="text-on-surface text-[0.9rem] leading-snug font-medium italic">"Preserved 100% of the site's existing root networks using zero-impact foundations."</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<!-- Project 4: Youth Summit -->
|
|
<article class="group">
|
|
<div class="relative rounded-2xl overflow-hidden mb-5 aspect-[16/10] bg-surface-container-low shadow-sm">
|
|
<img alt="Community center design" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuC5ggQiPuUgItHGv4xPRnRcbScKg3pavjvPILMvAEWb6xrLYTEHumW5TMYVA54zj8zQ97RFX-jEo6A7obNeVHWU09w5d0riHqa2gsoFkpjSM-jdpivDuedFOxwXCl662WSqEc8DqIsiQP-b7OwGsp7G2AJNEC4tP-BPNHYV1cTm6ukQrz4tiuQ47afmqgCbmyLb0bC2xHYVqpyGygKIfJXRkrfX4ygNMPNkGONn8sSL9LLmSYCPmceSHPoNy6PxqhaoTW5wqKfNF-Q"/>
|
|
<div class="absolute top-3 right-3 bg-white/90 backdrop-blur-md px-3 py-1 rounded-full shadow-sm">
|
|
<span class="text-[0.65rem] font-label font-bold uppercase text-primary tracking-wider">Community</span>
|
|
</div>
|
|
</div>
|
|
<div class="space-y-3">
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-[0.65rem] font-label font-bold uppercase tracking-[0.15em] text-secondary">Youth Summit</span>
|
|
</div>
|
|
<h2 class="text-2xl font-headline font-extrabold text-on-surface tracking-tight">Innovation Plaza</h2>
|
|
<p class="text-on-surface-variant leading-relaxed font-body text-[0.95rem]">Designing social hubs that facilitate cross-generational learning through adaptable open-space layouts.</p>
|
|
<div class="mt-5 bg-primary/5 rounded-2xl p-5 border border-primary/10">
|
|
<div class="flex items-start gap-4">
|
|
<div class="w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center shrink-0">
|
|
<span class="material-symbols-outlined text-primary text-xl">groups</span>
|
|
</div>
|
|
<div>
|
|
<h3 class="font-headline font-bold text-[0.7rem] text-primary uppercase tracking-[0.1em] mb-1">Impact Outcome</h3>
|
|
<p class="text-on-surface text-[0.9rem] leading-snug font-medium italic">"Boosted local community engagement by 150% through inclusive design."</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
<!-- Collaboration CTA -->
|
|
<section class="mt-20 mb-12 text-center bg-primary rounded-[2rem] p-8 shadow-xl shadow-primary/20 relative overflow-hidden">
|
|
<div class="absolute -right-8 -top-8 w-32 h-32 bg-white/10 rounded-full blur-2xl"></div>
|
|
<h2 class="text-2xl font-headline font-extrabold text-on-primary mb-3">Start a Project?</h2>
|
|
<p class="text-primary-container text-base mb-8 max-w-xs mx-auto">Let's discuss how we can bring precision and excellence to your next architectural venture.</p>
|
|
<button class="w-full bg-white text-primary py-4 rounded-2xl font-headline font-bold text-base shadow-lg transition-transform active:scale-[0.98]">
|
|
Let's Collaborate
|
|
</button>
|
|
</section>
|
|
<!-- Pagination -->
|
|
<div class="text-center">
|
|
<button class="w-full bg-surface-container-high text-on-surface py-4 rounded-2xl font-headline font-bold text-base border border-outline-variant/10 active:scale-[0.98]">
|
|
View All Projects
|
|
</button>
|
|
</div>
|
|
</main>
|
|
<!-- Footer -->
|
|
<footer class="w-full py-12 px-6 bg-slate-50 dark:bg-slate-900 border-t border-slate-200/50 mb-16">
|
|
<div class="max-w-2xl mx-auto space-y-6">
|
|
<div class="font-manrope font-black text-lg text-slate-900 dark:text-white uppercase tracking-tighter">
|
|
Kristijan Popovski
|
|
</div>
|
|
<p class="text-slate-500 dark:text-slate-400 font-inter text-xs tracking-wide">
|
|
© 2024 Kristijan Popovski. Engineered with Authority.
|
|
</p>
|
|
<div class="flex gap-6">
|
|
<a class="text-slate-500 dark:text-slate-400 font-inter text-xs tracking-wide uppercase font-bold hover:text-blue-600 transition-colors" href="#">LinkedIn</a>
|
|
<a class="text-slate-500 dark:text-slate-400 font-inter text-xs tracking-wide uppercase font-bold hover:text-blue-600 transition-colors" href="#">Email</a>
|
|
<a class="text-slate-500 dark:text-slate-400 font-inter text-xs tracking-wide uppercase font-bold hover:text-blue-600 transition-colors" href="#">Download CV</a>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
<!-- Bottom Navigation Bar (Mobile only) -->
|
|
<nav class="md:hidden fixed bottom-0 left-0 right-0 bg-white/95 backdrop-blur-xl border-t border-outline-variant/10 px-6 pt-3 pb-6 z-50">
|
|
<div class="flex justify-between items-center max-w-lg mx-auto">
|
|
<a class="flex flex-col items-center gap-1 text-slate-400 transition-colors" href="#">
|
|
<span class="material-symbols-outlined text-2xl">home</span>
|
|
<span class="text-[9px] font-bold uppercase tracking-widest font-label">Home</span>
|
|
</a>
|
|
<a class="flex flex-col items-center gap-1 nav-active transition-colors" href="#">
|
|
<span class="material-symbols-outlined text-2xl">grid_view</span>
|
|
<span class="text-[9px] font-bold uppercase tracking-widest font-label">Projects</span>
|
|
</a>
|
|
<a class="flex flex-col items-center gap-1 text-slate-400 transition-colors" href="#">
|
|
<span class="material-symbols-outlined text-2xl">description</span>
|
|
<span class="text-[9px] font-bold uppercase tracking-widest font-label">CV</span>
|
|
</a>
|
|
<a class="flex flex-col items-center gap-1 text-slate-400 transition-colors" href="#">
|
|
<span class="material-symbols-outlined text-2xl">mail</span>
|
|
<span class="text-[9px] font-bold uppercase tracking-widest font-label">Contact</span>
|
|
</a>
|
|
</div>
|
|
</nav>
|
|
</body></html> |