65 lines
2.7 KiB
HTML
65 lines
2.7 KiB
HTML
{% extends "base.html" %}
|
||
{% block title %}Contact{% endblock %}
|
||
|
||
{% block content %}
|
||
|
||
<!-- Hero -->
|
||
<section class="text-center py-20 bg-gradient-to-br from-orange-500/20 via-rose-500/10 to-fuchsia-500/10 text-white shadow-inner">
|
||
<h1 class="text-5xl font-extrabold mb-4">Contact Me</h1>
|
||
<p class="text-lg opacity-90">Here’s my contact card — let’s connect!</p>
|
||
</section>
|
||
|
||
<!-- vCard Section -->
|
||
<section class="py-16 px-6 md:px-20 bg-black text-white">
|
||
<div class="max-w-4xl mx-auto">
|
||
<div class="card flex flex-col md:flex-row items-center md:items-start gap-8">
|
||
|
||
<!-- Avatar / Photo -->
|
||
<div class="flex-shrink-0">
|
||
<img src="{{ url_for('static', filename='Headshot.jpeg') }}" alt="{{ CONTACT.name }}"
|
||
class="w-40 h-40 rounded-full border-4 border-[rgb(var(--accent))] shadow-glass object-cover">
|
||
</div>
|
||
|
||
<!-- Contact Info -->
|
||
<div class="flex-1 space-y-4">
|
||
<h2 class="text-3xl font-bold">{{ CONTACT.name }}</h2>
|
||
<p class="text-[rgb(var(--muted))]">{{ CONTACT.title }}</p>
|
||
|
||
<div class="grid sm:grid-cols-2 gap-4 text-sm sm:text-base">
|
||
<div>
|
||
<p class="font-semibold text-[rgb(var(--accent))]">Email</p>
|
||
<a href="mailto:{{ CONTACT.email }}" class="hover:underline">{{ CONTACT.email }}</a>
|
||
</div>
|
||
<div>
|
||
<p class="font-semibold text-[rgb(var(--accent))]">Phone</p>
|
||
<a href="tel:{{ CONTACT.phone|replace(' ', '') }}" class="hover:underline">{{ CONTACT.phone }}</a>
|
||
</div>
|
||
<div>
|
||
<p class="font-semibold text-[rgb(var(--accent))]">City / Region</p>
|
||
<p>{{ CONTACT.city }}</p>
|
||
</div>
|
||
<div>
|
||
<p class="font-semibold text-[rgb(var(--accent))]">Hours</p>
|
||
<p>{{ CONTACT.hours }}</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="pt-4 flex flex-wrap gap-3">
|
||
<a href="{{ CONTACT.site }}" target="_blank" class="btn btn-primary border-none bg-[rgb(var(--card))] hover:bg-[rgb(var(--border))]">
|
||
<i class="fa fa-globe mr-2 text-[rgb(var(--accent))]"></i> Website
|
||
</a>
|
||
<a href="{{ CONTACT.link }}" target="_blank" class="btn btn-primary border-none bg-[rgb(var(--card))] hover:bg-[rgb(var(--border))]">
|
||
<i class="fab fa-linkedin mr-2 text-[rgb(var(--accent))]"></i> LinkedIn
|
||
</a>
|
||
<a href="{{ CONTACT.cal }}" target="_blank" class="btn btn-primary border-none bg-[rgb(var(--card))] hover:bg-[rgb(var(--border))]">
|
||
<i class="fa fa-calendar mr-2 text-[rgb(var(--accent))]"></i> Schedule Meeting
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{% endblock %}
|
||
|