221 lines
13 KiB
HTML
221 lines
13 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;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;
|
|
background-color: #f8f9fa;
|
|
}
|
|
h1, h2, h3, .font-manrope {
|
|
font-family: 'Manrope', sans-serif;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="text-on-surface">
|
|
<!-- TopNavBar -->
|
|
<nav class="fixed top-0 w-full z-50 bg-white/80 dark:bg-slate-950/80 backdrop-blur-xl shadow-[0_10px_40px_rgba(0,45,167,0.05)]">
|
|
<div class="flex justify-between items-center max-w-7xl mx-auto px-8 h-20">
|
|
<div class="text-2xl font-bold tracking-tighter text-slate-900 dark:text-white">
|
|
Kristijan Popovski
|
|
</div>
|
|
<div class="hidden md:flex items-center 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-slate-600 dark:text-slate-400 hover:text-blue-600 transition-colors 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-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="#">Contact</a>
|
|
</div>
|
|
<button class="bg-primary text-white px-6 py-2.5 rounded-xl font-manrope font-bold tracking-tight scale-95 active:scale-90 transition-all hover:bg-primary-container">
|
|
Get in Touch
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
<main class="pt-32 pb-40 px-8 max-w-7xl mx-auto">
|
|
<!-- Section 1: Top Hero -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-12 gap-16 mb-40 items-center">
|
|
<div class="lg:col-span-7">
|
|
<span class="text-primary font-label text-xs uppercase tracking-[0.2em] font-bold mb-6 block">Contact</span>
|
|
<h1 class="text-5xl lg:text-7xl font-headline font-extrabold tracking-tight text-on-surface mb-8 leading-[1.1]">
|
|
Let's architect <br/>
|
|
<span class="text-primary-container">your next vision.</span>
|
|
</h1>
|
|
<p class="text-xl text-on-surface-variant leading-relaxed max-w-xl">
|
|
Interested in working together? I'm always open to discussing new projects, creative ideas, or opportunities to be part of your vision.
|
|
</p>
|
|
</div>
|
|
<div class="lg:col-span-5">
|
|
<div class="relative rounded-3xl overflow-hidden aspect-[4/5] shadow-2xl">
|
|
<img alt="Kristijan Popovski" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida/ADBb0ujowhYy2qUM7pe8f3r3QEGEOKEGS0CnP9AfT8Qkbfh4ZTh6rrfiwPRPo4cwlnZQRIjHBuVjNabhh49DcG11Xp9F5A1qwLRBcN-tdxdAAwges0dk4DsLi2Vw47gNLBWlGExJLz9dFuA5ln-nIjduGoLr5NL1uCgDZyaGAhTv1OeGqQ0kqQU5e1sRJTxzqyY0BKHXliVbEqg0QPIMHl2P3P9hAa5HNJUkFZfGAVH0vtSpEV8BzS64uCvNDX04x-pDmfyU0e3Jowhkzw"/>
|
|
<div class="absolute inset-0 bg-primary/5 mix-blend-multiply"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Section 2: Middle Form -->
|
|
<div class="mb-48">
|
|
<div class="max-w-4xl mx-auto">
|
|
<div class="mb-20 text-center">
|
|
<h2 class="text-4xl font-headline font-bold text-on-surface mb-4">Fill out to connect</h2>
|
|
<div class="w-16 h-1 bg-primary mx-auto rounded-full"></div>
|
|
</div>
|
|
<div class="bg-white p-10 md:p-20 rounded-[3rem] shadow-[0_40px_100px_rgba(0,45,167,0.06)] border border-outline-variant/10">
|
|
<form action="#" class="space-y-16">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-x-16 gap-y-12">
|
|
<div class="relative group">
|
|
<label class="block text-[11px] uppercase tracking-[0.2em] font-bold text-outline-variant mb-3 transition-colors group-focus-within:text-primary" for="full_name">Full Name</label>
|
|
<input class="w-full bg-transparent border-0 border-b border-outline-variant/20 py-4 px-0 focus:ring-0 focus:border-primary transition-all placeholder:text-outline-variant/30 font-medium text-lg text-on-surface" id="full_name" name="full_name" placeholder="John Doe" type="text"/>
|
|
</div>
|
|
<div class="relative group">
|
|
<label class="block text-[11px] uppercase tracking-[0.2em] font-bold text-outline-variant mb-3 transition-colors group-focus-within:text-primary" for="organization">Title / Organization</label>
|
|
<input class="w-full bg-transparent border-0 border-b border-outline-variant/20 py-4 px-0 focus:ring-0 focus:border-primary transition-all placeholder:text-outline-variant/30 font-medium text-lg text-on-surface" id="organization" name="organization" placeholder="CTO @ Visionary" type="text"/>
|
|
</div>
|
|
<div class="relative group">
|
|
<label class="block text-[11px] uppercase tracking-[0.2em] font-bold text-outline-variant mb-3 transition-colors group-focus-within:text-primary" for="email">Email Address</label>
|
|
<input class="w-full bg-transparent border-0 border-b border-outline-variant/20 py-4 px-0 focus:ring-0 focus:border-primary transition-all placeholder:text-outline-variant/30 font-medium text-lg text-on-surface" id="email" name="email" placeholder="john@company.com" type="email"/>
|
|
</div>
|
|
<div class="relative group">
|
|
<label class="block text-[11px] uppercase tracking-[0.2em] font-bold text-outline-variant mb-3 transition-colors group-focus-within:text-primary" for="phone">Phone (Optional)</label>
|
|
<input class="w-full bg-transparent border-0 border-b border-outline-variant/20 py-4 px-0 focus:ring-0 focus:border-primary transition-all placeholder:text-outline-variant/30 font-medium text-lg text-on-surface" id="phone" name="phone" placeholder="+1 (555) 000-0000" type="tel"/>
|
|
</div>
|
|
</div>
|
|
<div class="relative group">
|
|
<label class="block text-[11px] uppercase tracking-[0.2em] font-bold text-outline-variant mb-3 transition-colors group-focus-within:text-primary" for="message">Your Message</label>
|
|
<textarea class="w-full bg-transparent border-0 border-b border-outline-variant/20 py-4 px-0 focus:ring-0 focus:border-primary transition-all placeholder:text-outline-variant/30 font-medium text-lg text-on-surface resize-none" id="message" name="message" placeholder="Tell me about your vision..." rows="4"></textarea>
|
|
</div>
|
|
<div class="pt-8">
|
|
<button class="w-full bg-slate-900 hover:bg-black text-white font-headline font-bold py-6 rounded-2xl transition-all flex items-center justify-center space-x-3 group shadow-2xl shadow-slate-900/10 scale-100 active:scale-[0.98]" type="submit">
|
|
<span class="text-lg tracking-tight">Send Message</span>
|
|
<span class="material-symbols-outlined text-xl group-hover:translate-x-1.5 transition-transform" data-icon="send">send</span>
|
|
</button>
|
|
<p class="mt-8 text-center text-[10px] text-outline-variant uppercase tracking-widest font-bold">
|
|
Typically responds within 24 business hours
|
|
</p>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Section 3: Bottom Links -->
|
|
<div class="max-w-4xl mx-auto">
|
|
<div class="mb-16 text-center">
|
|
<h2 class="text-2xl font-headline font-bold text-on-surface mb-2">Let's connect</h2>
|
|
<p class="text-outline-variant text-[10px] uppercase tracking-[0.25em] font-bold">Via Professional Channels</p>
|
|
</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-stretch">
|
|
<!-- Email Box -->
|
|
<a class="group flex items-center p-8 bg-white border border-outline-variant/20 rounded-3xl transition-all hover:border-primary/40 hover:shadow-[0_20px_50px_rgba(0,45,167,0.04)] hover:-translate-y-1" href="mailto:popovskik02@yahoo.com">
|
|
<div class="w-14 h-14 rounded-2xl bg-slate-50 flex items-center justify-center mr-6 group-hover:bg-primary group-hover:text-white transition-all duration-300">
|
|
<span class="material-symbols-outlined text-2xl" data-icon="mail">mail</span>
|
|
</div>
|
|
<div>
|
|
<p class="text-[9px] font-label uppercase tracking-widest text-outline-variant mb-1 font-bold">Direct Email</p>
|
|
<p class="text-lg font-headline font-bold text-on-surface group-hover:text-primary transition-colors">popovskik02@yahoo.com</p>
|
|
</div>
|
|
</a>
|
|
<!-- LinkedIn Box -->
|
|
<a class="group flex items-center p-8 bg-white border border-outline-variant/20 rounded-3xl transition-all hover:border-primary/40 hover:shadow-[0_20px_50px_rgba(0,45,167,0.04)] hover:-translate-y-1" href="#">
|
|
<div class="w-14 h-14 rounded-2xl bg-slate-50 flex items-center justify-center mr-6 group-hover:bg-primary group-hover:text-white transition-all duration-300">
|
|
<svg class="w-7 h-7 fill-current" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"></path>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<p class="text-[9px] font-label uppercase tracking-widest text-outline-variant mb-1 font-bold">LinkedIn Network</p>
|
|
<p class="text-lg font-headline font-bold text-on-surface group-hover:text-primary transition-colors">Kristijan Popovski</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<!-- Footer -->
|
|
<footer class="w-full py-20 px-8 bg-white border-t border-slate-100">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 items-center max-w-7xl mx-auto">
|
|
<div>
|
|
<p class="font-manrope font-black text-xl text-slate-900 mb-2">Kristijan Popovski</p>
|
|
<p class="font-inter text-[11px] tracking-widest uppercase font-bold text-slate-400">
|
|
© 2024 Kristijan Popovski. Engineered with Authority.
|
|
</p>
|
|
</div>
|
|
<div class="flex flex-wrap md:justify-end gap-10 mt-8 md:mt-0">
|
|
<a class="font-inter text-xs tracking-widest uppercase font-bold text-slate-500 hover:text-primary transition-colors" href="#">LinkedIn</a>
|
|
<a class="font-inter text-xs tracking-widest uppercase font-bold text-slate-500 hover:text-primary transition-colors" href="mailto:popovskik02@yahoo.com">Email</a>
|
|
<a class="font-inter text-xs tracking-widest uppercase font-bold text-slate-500 hover:text-primary transition-colors" href="#">Download CV</a>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</body></html> |