148 lines
8.3 KiB
HTML
148 lines
8.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Contact | Kristijan Popovski</title>
|
|
<meta name="description" content="Contact Kristijan Popovski for strategic partnerships, governance initiatives, consulting conversations, or collaboration opportunities.">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Manrope:wght@600;700;800&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="css/style.css">
|
|
</head>
|
|
<body>
|
|
<div class="site-shell">
|
|
<header class="site-header">
|
|
<div class="site-header__inner">
|
|
<a class="brand" href="index.html">Kristijan Popovski</a>
|
|
<nav class="site-nav" aria-label="Primary">
|
|
<ul class="site-nav__list">
|
|
<li><a class="site-nav__link" href="index.html">Home</a></li>
|
|
<li><a class="site-nav__link" href="projects.html">Projects</a></li>
|
|
<li><a class="site-nav__link" href="cv.html">CV</a></li>
|
|
<li><a class="site-nav__link is-current" href="contact.html">Contact</a></li>
|
|
</ul>
|
|
</nav>
|
|
<div class="site-header__actions">
|
|
<a class="button button--primary button--small" href="contact.html">Get in Touch</a>
|
|
<button class="menu-toggle" type="button" aria-label="Open menu" aria-expanded="false" data-menu-toggle>
|
|
<span class="menu-toggle__line"></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<nav class="mobile-nav" aria-label="Mobile" data-mobile-nav>
|
|
<ul class="mobile-nav__list">
|
|
<li><a class="mobile-nav__link" href="index.html">Home</a></li>
|
|
<li><a class="mobile-nav__link" href="projects.html">Projects</a></li>
|
|
<li><a class="mobile-nav__link" href="cv.html">CV</a></li>
|
|
<li><a class="mobile-nav__link is-current" href="contact.html">Contact</a></li>
|
|
</ul>
|
|
</nav>
|
|
</header>
|
|
|
|
<main class="page-main">
|
|
<section class="section section--tight">
|
|
<div class="container">
|
|
<div class="contact-intro">
|
|
<div data-animate>
|
|
<div class="eyebrow eyebrow--plain">Contact</div>
|
|
<h1 class="page-title">Let's architect <strong>your next vision.</strong></h1>
|
|
<p class="page-lede">Interested in working together? Open to discussions around strategic collaboration, governance initiatives, advisory work, and thoughtfully run projects.</p>
|
|
</div>
|
|
<div class="image-frame" data-animate>
|
|
<img src="assets/images/portrait-main.jpg" alt="Portrait of Kristijan Popovski on the contact page" width="870" height="1160">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section section--tight">
|
|
<div class="container--narrow">
|
|
<article class="form-card" data-animate>
|
|
<h2 class="form-card__title">Fill out to connect</h2>
|
|
<div class="form-card__accent"></div>
|
|
<form class="form" action="contact.html" method="post" novalidate data-contact-form>
|
|
<div class="form__grid">
|
|
<div class="form-field">
|
|
<label class="form-field__label" for="full-name">Full Name</label>
|
|
<input class="form-field__control" id="full-name" name="full_name" type="text" placeholder="John Doe" data-label="Full name" data-required>
|
|
<div class="form-field__error" aria-live="polite"></div>
|
|
</div>
|
|
<div class="form-field">
|
|
<label class="form-field__label" for="title-org">Title / Organization</label>
|
|
<input class="form-field__control" id="title-org" name="title_org" type="text" placeholder="CTO at Visionary" data-label="Title / Organization" data-required>
|
|
<div class="form-field__error" aria-live="polite"></div>
|
|
</div>
|
|
<div class="form-field">
|
|
<label class="form-field__label" for="email">Email</label>
|
|
<input class="form-field__control" id="email" name="email" type="email" placeholder="john@example.com" data-label="Email" data-required>
|
|
<div class="form-field__error" aria-live="polite"></div>
|
|
</div>
|
|
<div class="form-field">
|
|
<label class="form-field__label" for="phone">Phone</label>
|
|
<input class="form-field__control" id="phone" name="phone" type="tel" placeholder="+1 555 000 0000" data-label="Phone">
|
|
<div class="form-field__error" aria-live="polite"></div>
|
|
</div>
|
|
</div>
|
|
<div class="form-field">
|
|
<label class="form-field__label" for="message">Message</label>
|
|
<textarea class="form-field__control" id="message" name="message" rows="5" placeholder="Tell me about your project or idea..." data-label="Message" data-required></textarea>
|
|
<div class="form-field__error" aria-live="polite"></div>
|
|
</div>
|
|
<button class="button button--dark button--block" type="submit">Send Message</button>
|
|
<div class="form-status" aria-live="polite" data-form-status></div>
|
|
<p class="form-note">This is a static form prepared for backend connection later. Current validation runs entirely in the browser.</p>
|
|
</form>
|
|
</article>
|
|
|
|
<div class="link-grid link-grid--two">
|
|
<a class="contact-link" href="mailto:popovskik02@yahoo.com" data-animate>
|
|
<span class="contact-link__main">
|
|
<span class="contact-link__icon">
|
|
<svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z"/></svg>
|
|
</span>
|
|
<span>
|
|
<span class="contact-link__eyebrow">Direct Email</span>
|
|
<span class="contact-link__title">popovskik02@yahoo.com</span>
|
|
</span>
|
|
</span>
|
|
<svg class="contact-link__arrow" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M12 4v2h4.59L7.76 14.83l1.41 1.41L18 7.41V12h2V4z"/></svg>
|
|
</a>
|
|
|
|
<a class="contact-link" href="https://si.linkedin.com/in/kristijan-popovski-688905232" target="_blank" rel="noreferrer" data-animate>
|
|
<span class="contact-link__main">
|
|
<span class="contact-link__icon">
|
|
<svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M19 3A2 2 0 0 1 21 5v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zm-8.34 14.34V10.5H8.38v6.84zM9.52 9.56a1.33 1.33 0 1 0 0-2.66 1.33 1.33 0 0 0 0 2.66zm8.16 7.78v-3.73c0-2-1.08-2.93-2.51-2.93-1.16 0-1.68.64-1.97 1.08V10.5H10.9c.03.84 0 6.84 0 6.84h2.3v-3.82c0-.2.01-.4.07-.54.16-.4.52-.82 1.14-.82.8 0 1.12.62 1.12 1.53v3.65z"/></svg>
|
|
</span>
|
|
<span>
|
|
<span class="contact-link__eyebrow">LinkedIn Network</span>
|
|
<span class="contact-link__title">Kristijan Popovski</span>
|
|
</span>
|
|
</span>
|
|
<svg class="contact-link__arrow" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M12 4v2h4.59L7.76 14.83l1.41 1.41L18 7.41V12h2V4z"/></svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer class="site-footer site-footer--light">
|
|
<div class="site-footer__inner">
|
|
<div>
|
|
<div class="site-footer__brand">Kristijan Popovski</div>
|
|
<p class="site-footer__text">Open for thoughtful conversations around partnerships, leadership, governance, and project execution.</p>
|
|
</div>
|
|
<div class="site-footer__links">
|
|
<a class="site-footer__link" href="index.html">Home</a>
|
|
<a class="site-footer__link" href="projects.html">Projects</a>
|
|
<a class="site-footer__link" href="cv.html">CV</a>
|
|
<a class="site-footer__link" href="mailto:popovskik02@yahoo.com">Email</a>
|
|
</div>
|
|
<div class="site-footer__meta">Static contact form ready for future integration</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
<script src="js/script.js"></script>
|
|
</body>
|
|
</html>
|