187 lines
13 KiB
HTML
187 lines
13 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Alistair Vance | Architectural Portfolio</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<style>
|
|
:root {
|
|
--primary-color: #A0522D; /* Sienna/Earthy Tone */
|
|
--secondary-color: #36454F; /* Charcoal/Slate */
|
|
}
|
|
.font-serif-display {
|
|
font-family: 'Playfair Display', Georgia, serif;
|
|
}
|
|
.font-sans-body {
|
|
font-family: 'Inter', system-ui, sans-serif;
|
|
}
|
|
.project-card:hover {
|
|
transform: translateY(-8px) scale(1.02);
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
|
|
}
|
|
.btn-primary {
|
|
transition: background-color 0.3s ease, transform 0.1s ease;
|
|
}
|
|
.btn-primary:hover {
|
|
background-color: #8B4513; /* Darker Brown */
|
|
transform: translateY(-1px);
|
|
}
|
|
/* Subtle Entrance Animation */
|
|
.fade-in {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
animation: fadeInMove 1s forwards;
|
|
}
|
|
@keyframes fadeInMove {
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
</style>
|
|
<!-- Google Fonts Link for intentional typography -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Inter:wght@300;400;600&display=swap" rel="stylesheet">
|
|
</head>
|
|
<body class="bg-gray-50 text-gray-800 font-sans-body antialiased">
|
|
|
|
<!-- Header/Navigation -->
|
|
<header class="sticky top-0 z-50 bg-white shadow-lg border-b border-gray-100">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex justify-between items-center h-20">
|
|
<div class="text-3xl font-serif-display text-gray-900 tracking-widest">
|
|
A.V.
|
|
</div>
|
|
<nav class="space-x-8 hidden md:flex">
|
|
<a href="#portfolio" class="text-lg font-medium text-gray-600 hover:text-amber-800 transition duration-150 border-b-2 border-transparent hover:border-amber-600 pb-1">Work</a>
|
|
<a href="#about" class="text-lg font-medium text-gray-600 hover:text-amber-800 transition duration-150 border-b-2 border-transparent hover:border-amber-600 pb-1">Studio</a>
|
|
<a href="#contact" class="text-lg font-medium text-gray-600 hover:text-amber-800 transition duration-150 border-b-2 border-transparent hover:border-amber-600 pb-1">Inquire</a>
|
|
</nav>
|
|
<!-- Mobile Menu Button (simplified for this single page concept) -->
|
|
<div class="md:hidden">
|
|
<button id="mobile-menu-button" class="text-gray-600 p-2 focus:outline-none focus:ring-2 focus:ring-amber-600 rounded">
|
|
<svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<!-- Hero Section -->
|
|
<section id="hero" class="relative bg-gray-900 h-[70vh] flex items-center justify-center overflow-hidden">
|
|
<!-- Background Visual Placeholder: Conceptual Image Overlay -->
|
|
<div class="absolute inset-0 opacity-20 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1502788533167-d44d236c4e99?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');"></div>
|
|
<div class="relative z-10 text-center max-w-4xl px-4">
|
|
<h1 class="text-7xl md:text-8xl font-serif-display text-white leading-tight mb-4 drop-shadow-lg">
|
|
Form & <span class="text-amber-400">Resonance</span>
|
|
</h1>
|
|
<p class="text-xl text-gray-200 mb-10 max-w-2xl mx-auto font-light">
|
|
Designing built environments where materiality meets human experience. A focus on durable, honest, and contextually rich design solutions.
|
|
</p>
|
|
<a href="#portfolio" class="btn-primary inline-block bg-amber-700 text-white text-lg font-semibold py-3 px-10 rounded-lg shadow-xl hover:bg-amber-600 focus:outline-none focus:ring-4 focus:ring-amber-300">
|
|
View Projects
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Portfolio Section -->
|
|
<section id="portfolio" class="py-24 lg:py-36 bg-white">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="text-center mb-16 fade-in">
|
|
<h2 class="text-5xl font-serif-display text-gray-900 mb-3">Selected Works</h2>
|
|
<p class="text-xl text-gray-600">A curated selection of residential, civic, and commercial endeavors.</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-12">
|
|
|
|
<!-- Project Card 1: Modern Residence -->
|
|
<div class="project-card bg-white rounded-xl overflow-hidden shadow-lg cursor-pointer transform transition duration-500 fade-in" style="animation-delay: 0.1s;">
|
|
<div class="relative overflow-hidden">
|
|
<img class="w-full h-72 object-cover object-center transition duration-500 transform hover:scale-105" src="https://images.unsplash.com/photo-1580461000594-d79155c7e3e1?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Modern Stone Residence">
|
|
<div class="absolute inset-0 bg-gradient-to-t from-gray-900/80 to-transparent"></div>
|
|
</div>
|
|
<div class="p-6 text-center">
|
|
<h3 class="text-3xl font-serif-display text-gray-900 mb-2">The Sentinel Residence</h3>
|
|
<p class="text-lg text-gray-600 mb-4">Contemporary Residential</p>
|
|
<a href="#" class="text-amber-700 font-semibold hover:text-amber-900 flex items-center justify-center">
|
|
Explore Case Study
|
|
<svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m-7 7l-7-7"></path></svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Project Card 2: Civic Center -->
|
|
<div class="project-card bg-white rounded-xl overflow-hidden shadow-lg cursor-pointer transform transition duration-500 fade-in" style="animation-delay: 0.3s;">
|
|
<div class="relative overflow-hidden">
|
|
<img class="w-full h-72 object-cover object-center transition duration-500 transform hover:scale-105" src="https://images.unsplash.com/photo-1568604512212-d15a2788c659?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Civic Plaza Design">
|
|
<div class="absolute inset-0 bg-gradient-to-t from-gray-900/80 to-transparent"></div>
|
|
</div>
|
|
<div class="p-6 text-center">
|
|
<h3 class="text-3xl font-serif-display text-gray-900 mb-2">Civic Nexus Hall</h3>
|
|
<p class="text-lg text-gray-600 mb-4">Public & Cultural Space</p>
|
|
<a href="#" class="text-amber-700 font-semibold hover:text-amber-900 flex items-center justify-center">
|
|
Explore Case Study
|
|
<svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m-7 7l-7-7"></path></svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Project Card 3: Commercial Retail -->
|
|
<div class="project-card bg-white rounded-xl overflow-hidden shadow-lg cursor-pointer transform transition duration-500 fade-in" style="animation-delay: 0.5s;">
|
|
<div class="relative overflow-hidden">
|
|
<img class="w-full h-72 object-cover object-center transition duration-500 transform hover:scale-105" src="https://images.unsplash.com/photo-1519389950473-4e5b72282d9e?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Modern Retail Storefront">
|
|
<div class="absolute inset-0 bg-gradient-to-t from-gray-900/80 to-transparent"></div>
|
|
</div>
|
|
<div class="p-6 text-center">
|
|
<h3 class="text-3xl font-serif-display text-gray-900 mb-2">The Mercantile Loft</h3>
|
|
<p class="text-lg text-gray-600 mb-4">Commercial Retail</p>
|
|
<a href="#" class="text-amber-700 font-semibold hover:text-amber-900 flex items-center justify-center">
|
|
Explore Case Study
|
|
<svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m-7 7l-7-7"></path></svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-center mt-16 fade-in" style="animation-delay: 0.7s;">
|
|
<a href="#" class="btn-primary inline-block bg-gray-800 text-white text-lg font-semibold py-3 px-8 rounded-lg shadow-lg hover:bg-amber-700 hover:text-white border border-amber-700 focus:outline-none focus:ring-4 focus:ring-amber-300">
|
|
View Complete Archive
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- About Section -->
|
|
<section id="about" class="py-24 lg:py-36 bg-gray-100 border-t border-b border-gray-200">
|
|
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
|
|
|
<!-- Text Content -->
|
|
<div class="fade-in" style="animation-delay: 0.2s;">
|
|
<h2 class="text-5xl font-serif-display text-gray-900 mb-6 leading-snug">
|
|
The Philosophy of Place
|
|
</h2>
|
|
<p class="text-lg text-gray-600 mb-6 leading-relaxed">
|
|
My approach to architecture is rooted in the principle of geological honesty. I seek the dialogue between the structure and its immediate landscape, ensuring that the design feels not merely placed, but grown from the site. This philosophy drives the use of local materials, tactile surfaces, and light as a primary design element.
|
|
</p>
|
|
<p class="text-lg text-gray-600 mb-8 leading-relaxed border-l-4 border-amber-700 pl-4 italic">
|
|
"A building should feel like it has always belonged there."
|
|
</p>
|
|
<div class="space-y-4">
|
|
<div class="flex items-center space-x-3">
|
|
<span class="text-amber-700 text-2xl">📐</span>
|
|
<p class="font-semibold text-gray-800">Specialization: Sustainable Residential Design</p>
|
|
</div>
|
|
<div class="flex items-center space-x-3">
|
|
<span class="text-amber-700 text-2xl">🏗️</span>
|
|
<p class="font-semibold text-gray-800">Expertise: Mass Timber & Natural Stone</p>
|
|
</div>
|
|
<div class="flex items-center space-x-3">
|
|
<span class="text-amber-700 text-2xl">📍</span>
|
|
<p class="font-semibold text-gray-800">Practice Area: Pacific Northwest & Mediterranean Influences</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Image<div style="position:fixed;right:12px;bottom:12px;z-index:2147483647;background:rgba(17,24,39,.92);color:#fff;padding:8px 10px;border-radius:10px;font:12px/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;box-shadow:0 8px 20px rgba(0,0,0,.28)">Generated in 29.97s</div> |