217 lines
13 KiB
HTML
217 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"/>
|
|
<title>Contact - Kristijan Popovski</title>
|
|
<!-- Material Symbols -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<!-- Google Fonts -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&family=Inter:wght@400;500;600&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;
|
|
}
|
|
.glass-nav {
|
|
backdrop-filter: blur(24px);
|
|
}
|
|
body {
|
|
min-height: max(884px, 100dvh);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-surface text-on-surface font-body selection:bg-primary-fixed selection:text-on-primary-fixed">
|
|
<!-- TopNavBar Component -->
|
|
<header 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)] border-b border-outline-variant/10">
|
|
<nav class="flex justify-between items-center max-w-7xl mx-auto px-6 h-20">
|
|
<div class="text-xl font-bold tracking-tighter text-slate-900 dark:text-white font-manrope">
|
|
Kristijan Popovski
|
|
</div>
|
|
<!-- Desktop Navigation Links -->
|
|
<div class="hidden md:flex items-center gap-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="hidden md:block bg-primary text-on-primary px-6 py-2.5 rounded-xl font-headline font-bold scale-95 active:scale-90 transition-transform">
|
|
Get in Touch
|
|
</button>
|
|
<!-- Mobile Menu Toggle -->
|
|
<button class="md:hidden p-2 flex items-center justify-center">
|
|
<span class="text-sm font-bold text-primary uppercase tracking-widest font-headline">menu</span>
|
|
</button>
|
|
</nav>
|
|
</header>
|
|
<main class="pt-36 pb-24 px-6 max-w-2xl mx-auto">
|
|
<!-- 1. Hero Section -->
|
|
<section class="mb-20">
|
|
<h1 class="font-headline text-[2.75rem] md:text-[4rem] font-extrabold leading-[1.1] tracking-tight text-on-surface mb-8">
|
|
Let's Build Something <span class="text-primary">Exceptional</span>.
|
|
</h1>
|
|
<p class="text-on-surface-variant text-xl leading-relaxed max-w-md opacity-80">
|
|
I assist visionary brands and individuals in bringing high-end digital experiences to life.
|
|
</p>
|
|
</section>
|
|
<!-- 2. Contact Form Section -->
|
|
<section class="mb-24">
|
|
<div class="mb-10">
|
|
<h2 class="font-headline text-3xl font-bold text-on-surface mb-2">Send a Message</h2>
|
|
<p class="text-on-surface-variant font-medium opacity-70">Fill out to connect</p>
|
|
</div>
|
|
<div class="bg-surface-container-lowest p-8 md:p-10 rounded-[2.5rem] border border-outline-variant/15 shadow-[0_20px_60px_rgba(0,45,167,0.04)]">
|
|
<form action="#" class="flex flex-col gap-10">
|
|
<!-- Name Field -->
|
|
<div class="flex flex-col gap-3">
|
|
<label class="font-label text-xs uppercase tracking-[0.2em] font-bold text-primary/80" for="name">Full Name</label>
|
|
<input class="w-full bg-surface-container-high border-b-2 border-x-0 border-t-0 border-outline-variant/20 px-0 py-4 focus:ring-0 focus:border-primary transition-all text-on-surface placeholder:text-on-surface-variant/30 font-medium text-lg" id="name" name="name" placeholder="John Doe" type="text"/>
|
|
</div>
|
|
<!-- Organization Field -->
|
|
<div class="flex flex-col gap-3">
|
|
<label class="font-label text-xs uppercase tracking-[0.2em] font-bold text-primary/80" for="org">Organization</label>
|
|
<input class="w-full bg-surface-container-high border-b-2 border-x-0 border-t-0 border-outline-variant/20 px-0 py-4 focus:ring-0 focus:border-primary transition-all text-on-surface placeholder:text-on-surface-variant/30 font-medium text-lg" id="org" name="org" placeholder="Company Name" type="text"/>
|
|
</div>
|
|
<!-- Email Field -->
|
|
<div class="flex flex-col gap-3">
|
|
<label class="font-label text-xs uppercase tracking-[0.2em] font-bold text-primary/80" for="email">Email Address</label>
|
|
<input class="w-full bg-surface-container-high border-b-2 border-x-0 border-t-0 border-outline-variant/20 px-0 py-4 focus:ring-0 focus:border-primary transition-all text-on-surface placeholder:text-on-surface-variant/30 font-medium text-lg" id="email" name="email" placeholder="john@example.com" type="email"/>
|
|
</div>
|
|
<!-- Phone Field -->
|
|
<div class="flex flex-col gap-3">
|
|
<label class="font-label text-xs uppercase tracking-[0.2em] font-bold text-primary/80" for="phone">Phone Number</label>
|
|
<input class="w-full bg-surface-container-high border-b-2 border-x-0 border-t-0 border-outline-variant/20 px-0 py-4 focus:ring-0 focus:border-primary transition-all text-on-surface placeholder:text-on-surface-variant/30 font-medium text-lg" id="phone" name="phone" placeholder="+1 (555) 000-0000" type="tel"/>
|
|
</div>
|
|
<!-- Message Field -->
|
|
<div class="flex flex-col gap-3">
|
|
<label class="font-label text-xs uppercase tracking-[0.2em] font-bold text-primary/80" for="message">Message Details</label>
|
|
<textarea class="w-full bg-surface-container-high border-b-2 border-x-0 border-t-0 border-outline-variant/20 px-0 py-4 focus:ring-0 focus:border-primary transition-all text-on-surface placeholder:text-on-surface-variant/30 font-medium resize-none text-lg min-h-[120px]" id="message" name="message" placeholder="Tell me about your vision..." rows="4"></textarea>
|
|
</div>
|
|
<!-- Primary Action Button -->
|
|
<button class="w-full bg-primary hover:bg-primary-container text-on-primary py-6 rounded-2xl font-headline font-bold text-lg flex items-center justify-center gap-3 shadow-[0_20px_40px_rgba(0,45,167,0.2)] active:scale-[0.98] transition-all mt-4" type="submit">
|
|
<span>Send Message</span>
|
|
<span class="material-symbols-outlined text-[24px]" data-icon="send">send</span>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</section>
|
|
<!-- 3. Let's Connect Section -->
|
|
<section class="mt-24 flex flex-col gap-10">
|
|
<h2 class="font-headline text-3xl font-bold text-on-surface tracking-tight">Let's connect</h2>
|
|
<div class="grid grid-cols-1 gap-6">
|
|
<a class="flex items-center justify-between p-8 bg-surface-container-low rounded-[2rem] group transition-all hover:bg-surface-container-high border border-outline-variant/10 shadow-sm" href="#">
|
|
<div class="flex items-center gap-5">
|
|
<div class="w-14 h-14 rounded-full bg-primary/10 flex items-center justify-center text-primary group-hover:bg-primary group-hover:text-on-primary transition-colors">
|
|
<!-- LinkedIn SVG logo -->
|
|
<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>
|
|
<span class="block font-bold text-lg text-on-surface">LinkedIn</span>
|
|
<span class="text-sm text-on-surface-variant font-medium opacity-60">Professional Network</span>
|
|
</div>
|
|
</div>
|
|
<span class="material-symbols-outlined text-outline group-hover:text-primary transition-colors group-hover:translate-x-1 duration-300" data-icon="arrow_forward">arrow_forward</span>
|
|
</a>
|
|
<a class="flex items-center justify-between p-8 bg-surface-container-low rounded-[2rem] group transition-all hover:bg-surface-container-high border border-outline-variant/10 shadow-sm" href="#">
|
|
<div class="flex items-center gap-5">
|
|
<div class="w-14 h-14 rounded-full bg-primary/10 flex items-center justify-center text-primary group-hover:bg-primary group-hover:text-on-primary transition-colors">
|
|
<span class="material-symbols-outlined text-3xl" data-icon="mail">mail</span>
|
|
</div>
|
|
<div>
|
|
<span class="block font-bold text-lg text-on-surface">Direct Email</span>
|
|
<span class="text-sm text-on-surface-variant font-medium opacity-60">Inquiry & Collaboration</span>
|
|
</div>
|
|
</div>
|
|
<span class="material-symbols-outlined text-outline group-hover:text-primary transition-colors group-hover:translate-x-1 duration-300" data-icon="arrow_forward">arrow_forward</span>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
<!-- Footer Component -->
|
|
<footer class="w-full py-20 px-8 bg-slate-50 dark:bg-slate-900 border-t border-slate-200/10">
|
|
<div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 items-center gap-12">
|
|
<div class="flex flex-col gap-5">
|
|
<span class="font-manrope font-black text-2xl text-slate-900 dark:text-white uppercase tracking-tighter">Kristijan Popovski</span>
|
|
<p class="font-inter text-xs tracking-widest uppercase font-semibold text-slate-500 dark:text-slate-400 opacity-70">
|
|
© 2024 Kristijan Popovski. Engineered with Authority.
|
|
</p>
|
|
</div>
|
|
<div class="flex flex-wrap md:justify-end gap-x-10 gap-y-5">
|
|
<a class="text-slate-600 dark:text-slate-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors font-inter text-sm tracking-widest uppercase font-bold" href="#">LinkedIn</a>
|
|
<a class="text-slate-600 dark:text-slate-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors font-inter text-sm tracking-widest uppercase font-bold" href="#">Email</a>
|
|
<a class="text-slate-600 dark:text-slate-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors font-inter text-sm tracking-widest uppercase font-bold" href="#">Download CV</a>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</body></html> |