945 lines
36 KiB
HTML
945 lines
36 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Lena Voss — Architect Portfolio</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<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=Playfair+Display:wght@400;600;700;900&family=DM+Sans:wght@300;400;500;600&display=swap" rel="stylesheet">
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
fontFamily: {
|
|
display: ['Playfair Display', 'serif'],
|
|
body: ['DM Sans', 'sans-serif'],
|
|
},
|
|
colors: {
|
|
bg: '#1A1A1A',
|
|
fg: '#F5F0EB',
|
|
muted: '#8A8580',
|
|
accent: '#C47B5A',
|
|
card: '#2A2A2A',
|
|
border: '#3A3A3A',
|
|
warm: '#D4C4B0',
|
|
sand: '#E8DCC8',
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
:root {
|
|
--bg: #1A1A1A;
|
|
--fg: #F5F0EB;
|
|
--muted: #8A8580;
|
|
--accent: #C47B5A;
|
|
--card: #2A2A2A;
|
|
--border: #3A3A3A;
|
|
--warm: #D4C4B0;
|
|
--sand: #E8DCC8;
|
|
}
|
|
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
html { scroll-behavior: smooth; }
|
|
|
|
body {
|
|
font-family: 'DM Sans', sans-serif;
|
|
background: var(--bg);
|
|
color: var(--fg);
|
|
overflow-x: hidden;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
.font-display { font-family: 'Playfair Display', serif; }
|
|
|
|
/* Custom cursor */
|
|
.cursor-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
background: var(--accent);
|
|
border-radius: 50%;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 9999;
|
|
pointer-events: none;
|
|
transition: transform 0.1s ease;
|
|
mix-blend-mode: difference;
|
|
}
|
|
|
|
.cursor-dot.hover {
|
|
transform: scale(2);
|
|
background: var(--accent);
|
|
opacity: 0.4;
|
|
}
|
|
|
|
/* Scroll reveal */
|
|
.reveal {
|
|
opacity: 0;
|
|
transform: translateY(40px);
|
|
transition: opacity 0.8s ease, transform 0.8s ease;
|
|
}
|
|
|
|
.reveal.visible {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.reveal-delay-1 { transition-delay: 0.1s; }
|
|
.reveal-delay-2 { transition-delay: 0.2s; }
|
|
.reveal-delay-3 { transition-delay: 0.3s; }
|
|
.reveal-delay-4 { transition-delay: 0.4s; }
|
|
|
|
/* Hero image styling */
|
|
.hero-image-wrapper {
|
|
position: relative;
|
|
overflow: hidden;
|
|
border-radius: 0 0 40px 40px;
|
|
}
|
|
|
|
.hero-image-wrapper::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(135deg, rgba(26,26,26,0.85) 0%, rgba(26,26,26,0.4) 50%, rgba(26,26,26,0.3) 100%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.hero-image-wrapper img {
|
|
filter: sepia(0.05) contrast(1.02);
|
|
transition: filter 1.2s ease;
|
|
}
|
|
|
|
.hero-image-wrapper:hover img {
|
|
filter: sepia(0) contrast(1.03);
|
|
}
|
|
|
|
/* Project card */
|
|
.project-card {
|
|
position: relative;
|
|
overflow: hidden;
|
|
border-radius: 12px;
|
|
background: var(--card);
|
|
border: 1px solid var(--border);
|
|
transition: transform 0.5s ease, border-color 0.4s ease;
|
|
}
|
|
|
|
.project-card:hover {
|
|
transform: translateY(-6px);
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
.project-card img {
|
|
transition: transform 0.7s ease;
|
|
}
|
|
|
|
.project-card:hover img {
|
|
transform: scale(1.06);
|
|
}
|
|
|
|
.project-overlay {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(0deg, rgba(26,26,26,0.95) 0%, rgba(26,26,26,0.3) 50%, transparent 100%);
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-end;
|
|
padding: 1.5rem;
|
|
opacity: 0;
|
|
transition: opacity 0.4s ease;
|
|
}
|
|
|
|
.project-card:hover .project-overlay {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Nav link underline */
|
|
.nav-link {
|
|
position: relative;
|
|
padding-bottom: 2px;
|
|
}
|
|
|
|
.nav-link::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 0;
|
|
height: 1px;
|
|
background: var(--accent);
|
|
transition: width 0.3s ease;
|
|
}
|
|
|
|
.nav-link:hover::after {
|
|
width: 100%;
|
|
}
|
|
|
|
/* CTA button */
|
|
.btn-primary {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.85rem 2rem;
|
|
background: var(--accent);
|
|
color: var(--bg);
|
|
font-weight: 600;
|
|
font-size: 0.9rem;
|
|
letter-spacing: 0.02em;
|
|
border: none;
|
|
border-radius: 2px;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background: #D4A27A;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 24px rgba(196,123,90,0.3);
|
|
}
|
|
|
|
.btn-primary:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.btn-secondary {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.85rem 2rem;
|
|
background: transparent;
|
|
color: var(--fg);
|
|
font-weight: 500;
|
|
font-size: 0.9rem;
|
|
border: 1px solid var(--border);
|
|
border-radius: 2px;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
border-color: var(--accent);
|
|
color: var(--accent);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.btn-secondary:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* Section divider */
|
|
.section-divider {
|
|
height: 1px;
|
|
background: linear-gradient(90deg, transparent, var(--border), transparent);
|
|
}
|
|
|
|
/* Typing cursor */
|
|
.typing-cursor::after {
|
|
content: '|';
|
|
animation: blink 1s step-end infinite;
|
|
color: var(--accent);
|
|
}
|
|
|
|
@keyframes blink {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0; }
|
|
}
|
|
|
|
/* Floating particles */
|
|
.particle {
|
|
position: absolute;
|
|
width: 3px;
|
|
height: 3px;
|
|
background: var(--accent);
|
|
border-radius: 50%;
|
|
opacity: 0.15;
|
|
pointer-events: none;
|
|
animation: float 8s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes float {
|
|
0%, 100% { transform: translateY(0) translateX(0); }
|
|
50% { transform: translateY(-20px) translateX(10px); }
|
|
}
|
|
|
|
/* Image overlay effect on hero */
|
|
.hero-overlay-gradient {
|
|
background: linear-gradient(180deg, transparent 0%, rgba(26,26,26,0.7) 50%, rgba(26,26,26,0.95) 100%);
|
|
height: 100%;
|
|
}
|
|
|
|
/* Image grid */
|
|
.img-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 1px;
|
|
background: var(--border);
|
|
}
|
|
|
|
.img-grid > div {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.img-grid > div:first-child {
|
|
grid-column: span 2;
|
|
}
|
|
|
|
.img-grid > div img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
transition: transform 0.7s ease;
|
|
}
|
|
|
|
.img-grid > div:hover img {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
/* Timeline */
|
|
.timeline-line {
|
|
position: absolute;
|
|
left: 18px;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 1px;
|
|
background: var(--border);
|
|
}
|
|
|
|
.timeline-dot {
|
|
width: 12px;
|
|
height: 12px;
|
|
background: var(--accent);
|
|
border-radius: 50%;
|
|
border: 2px solid var(--bg);
|
|
box-shadow: 0 0 0 3px var(--accent);
|
|
}
|
|
|
|
/* Noise texture overlay */
|
|
.noise-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
z-index: 9998;
|
|
opacity: 0.03;
|
|
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
|
|
background-size: 256px;
|
|
}
|
|
|
|
/* Reduced motion */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.reveal {
|
|
opacity: 1;
|
|
transform: none;
|
|
transition: none;
|
|
}
|
|
.particle {
|
|
animation: none;
|
|
}
|
|
.project-card:hover {
|
|
transform: none;
|
|
}
|
|
}
|
|
|
|
/* Mobile adjustments */
|
|
@media (max-width: 768px) {
|
|
.cursor-dot {
|
|
display: none;
|
|
}
|
|
.img-grid > div:first-child {
|
|
grid-column: span 1;
|
|
}
|
|
}
|
|
|
|
/* Smooth scrolling for nav */
|
|
#main-content {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
/* Focus visible */
|
|
:focus-visible {
|
|
outline: 2px solid var(--accent);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* Animated counter */
|
|
.counter {
|
|
display: inline-block;
|
|
}
|
|
|
|
/* Loading screen */
|
|
.loading-screen {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: var(--bg);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 10000;
|
|
transition: opacity 0.6s ease, visibility 0.6s ease;
|
|
}
|
|
|
|
.loading-screen.hidden {
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
}
|
|
|
|
.loading-spinner {
|
|
width: 40px;
|
|
height: 40px;
|
|
border: 2px solid var(--border);
|
|
border-top-color: var(--accent);
|
|
border-radius: 50%;
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-bg text-fg font-body">
|
|
|
|
<!-- Loading Screen -->
|
|
<div class="loading-screen" id="loadingScreen">
|
|
<div class="flex flex-col items-center gap-4">
|
|
<div class="loading-spinner"></div>
|
|
<span class="text-muted text-sm tracking-widest uppercase">Loading</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Custom Cursor -->
|
|
<div class="cursor-dot" id="cursorDot"></div>
|
|
|
|
<!-- Noise texture background -->
|
|
<div class="noise-overlay"></div>
|
|
|
|
<!-- Floating particles container -->
|
|
<div id="particles" class="fixed inset-0 pointer-events-none z-0"></div>
|
|
|
|
<!-- Navigation -->
|
|
<nav id="navbar" class="fixed top-0 left-0 right-0 z-50 transition-all duration-500">
|
|
<div class="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
|
|
<a href="#" class="font-display text-xl font-bold tracking-tight text-fg" aria-label="Home">
|
|
<span class="text-accent">L</span>ena Voss
|
|
</a>
|
|
<div class="hidden md:flex items-center gap-8">
|
|
<a href="#work" class="nav-link text-sm text-muted hover:text-fg transition-colors">Work</a>
|
|
<a href="#about" class="nav-link text-sm text-muted hover:text-fg transition-colors">About</a>
|
|
<a href="#contact" class="nav-link text-sm text-muted hover:text-fg transition-colors">Contact</a>
|
|
</div>
|
|
<button id="mobileMenuBtn" class="md:hidden text-fg text-xl p-2" aria-label="Toggle menu" aria-expanded="false">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<line x1="3" y1="6" x2="21" y2="6"></line>
|
|
<line x1="3" y1="12" x2="21" y2="12"></line>
|
|
<line x1="3" y1="18" x2="21" y2="18"></line>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<!-- Mobile menu -->
|
|
<div id="mobileMenu" class="md:hidden hidden bg-card border-t border-border">
|
|
<div class="px-6 py-4 flex flex-col gap-4">
|
|
<a href="#work" class="text-sm text-muted hover:text-fg transition-colors py-2">Work</a>
|
|
<a href="#about" class="text-sm text-muted hover:text-fg transition-colors py-2">About</a>
|
|
<a href="#contact" class="text-sm text-muted hover:text-fg transition-colors py-2">Contact</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Main Content -->
|
|
<main id="main-content">
|
|
|
|
<!-- Hero Section -->
|
|
<section class="relative min-h-screen flex items-center overflow-hidden">
|
|
<div class="absolute inset-0">
|
|
<img src="https://images.pexels.com/photos/312524/pexels-photo-312524.jpeg?auto=compress&cs=tinysrgb&w=1920" alt="Architecture in a modern cityscape" class="w-full h-full object-cover" style="filter: sepia(0.03) contrast(1.04);">
|
|
<div class="absolute inset-0 hero-overlay-gradient"></div>
|
|
</div>
|
|
|
|
<div class="relative z-10 max-w-7xl mx-auto px-6 pt-24 pb-16 w-full">
|
|
<div class="max-w-3xl">
|
|
<div class="mb-6">
|
|
<span class="text-accent text-xs tracking-[0.3em] uppercase font-medium">Studio • Built by Hand</span>
|
|
</div>
|
|
<h1 class="font-display text-5xl sm:text-6xl lg:text-7xl font-bold leading-[1.05] mb-6">
|
|
Designing<br>
|
|
<span class="text-accent">Spaces</span>
|
|
of Meaning
|
|
</h1>
|
|
<p class="text-muted text-lg max-w-xl mb-10 leading-relaxed">
|
|
I craft buildings that resonate with the human experience — where form meets function, and every line tells a story of place and purpose.
|
|
</p>
|
|
<div class="flex flex-wrap gap-4">
|
|
<a href="#work" class="btn-primary">
|
|
Explore Work
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<line x1="5" y1="12" x2="19" y2="12"></line>
|
|
<polyline points="12 5 19 12 12 19"></polyline>
|
|
</svg>
|
|
</a>
|
|
<a href="#about" class="btn-secondary">
|
|
About Me
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Stats Bar -->
|
|
<section class="relative z-10 -mt-16">
|
|
<div class="max-w-7xl mx-auto px-6">
|
|
<div class="flex flex-wrap gap-8 justify-center text-center bg-card border border-border rounded-2xl p-8">
|
|
<div>
|
|
<div class="text-3xl font-bold text-accent">12</div>
|
|
<div class="text-muted text-sm">Projects Completed</div>
|
|
</div>
|
|
<div class="w-px bg-border"></div>
|
|
<div>
|
|
<div class="text-3xl font-bold text-accent">8</div>
|
|
<div class="text-muted text-sm">Years of Experience</div>
|
|
</div>
|
|
<div class="w-px bg-border"></div>
|
|
<div>
|
|
<div class="text-3xl font-bold text-accent">40+</div>
|
|
<div class="text-muted text-sm">Awards & Recognitions</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Work Section -->
|
|
<section id="work" class="py-24 relative">
|
|
<div class="max-w-7xl mx-auto px-6">
|
|
<div class="text-center mb-16 reveal">
|
|
<span class="text-accent text-xs tracking-[0.3em] uppercase font-medium">Selected Work</span>
|
|
<h2 class="font-display text-4xl sm:text-5xl font-bold mt-3">Projects</h2>
|
|
<p class="text-muted mt-4 max-w-md mx-auto">A curated selection of built works that blend craft with contemporary design principles.</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
<!-- Project 1 -->
|
|
<div class="project-card reveal">
|
|
<img src="https://images.pexels.com/photos/313590/pexels-photo-313590.jpeg?auto=compress&cs=tinysrgb&w=800" alt="Modern residential design with open plan and natural light" class="w-full h-80 object-cover">
|
|
<div class="project-overlay">
|
|
<div>
|
|
<h3 class="font-display text-xl font-bold text-fg">The Oakridge Residence</h3>
|
|
<p class="text-muted text-sm mt-1">Residential · Chicago, IL</p>
|
|
</div>
|
|
<div class="flex gap-3 mt-3">
|
|
<a href="#" class="text-accent text-sm font-medium hover:underline">View →</a>
|
|
<a href="#" class="text-muted text-sm font-medium hover:underline">Details</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Project 2 -->
|
|
<div class="project-card reveal">
|
|
<img src="https://images.pexels.com/photos/312524/pexels-photo-312524.jpeg?auto=compress&cs=tinysrgb&w=800" alt="Contemporary office building with glass facades and green rooftop" class="w-full h-80 object-cover">
|
|
<div class="project-overlay">
|
|
<div>
|
|
<h3 class="font-display text-xl font-bold text-fg">The Meridian Gallery</h3>
|
|
<p class="text-muted text-sm mt-1">Commercial · New York, NY</p>
|
|
</div>
|
|
<div class="flex gap-3 mt-3">
|
|
<a href="#" class="text-accent text-sm font-medium hover:underline">View →</a>
|
|
<a href="#" class="text-muted text-sm font-medium hover:underline">Details</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Project 3 -->
|
|
<div class="project-card reveal">
|
|
<img src="https://images.pexels.com/photos/313590/pexels-photo-313590.jpeg?auto=compress&cs=tinysrgb&w=800" alt="Civic building with modernist glass and courtyard design" class="w-full h-80 object-cover">
|
|
<div class="project-overlay">
|
|
<div>
|
|
<h3 class="font-display text-xl font-bold text-fg">The Alden Civic Center</h3>
|
|
<p class="text-muted text-sm mt-1">Public · Portland, OR</p>
|
|
</div>
|
|
<div class="flex gap-3 mt-3">
|
|
<a href="#" class="text-accent text-sm font-medium hover:underline">View →</a>
|
|
<a href="#" class="text-muted text-sm font-medium hover:underline">Details</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Project 4 -->
|
|
<div class="project-card reveal">
|
|
<img src="https://images.pexels.com/photos/312524/pexels-photo-312524.jpeg?auto=compress&cs=tinysrgb&w=800" alt="Luxury home with minimalist interior and natural materials" class="w-full h-80 object-cover">
|
|
<div class="project-overlay">
|
|
<div>
|
|
<h3 class="font-display text-xl font-bold text-fg">The Meridian Residence</h3>
|
|
<p class="text-muted text-sm mt-1">Residential · Denver, CO</p>
|
|
</div>
|
|
<div class="flex gap-3 mt-3">
|
|
<a href="#" class="text-accent text-sm font-medium hover:underline">View →</a>
|
|
<a href="#" class="text-muted text-sm font-medium hover:underline">Details</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Project 5 -->
|
|
<div class="project-card reveal">
|
|
<img src="https://images.pexels.com/photos/312524/pexels-photo-312524.jpeg?auto=compress&cs=tinysrgb&w=800" alt="Restaurant and cultural space with warm wood interior" class="w-full h-80 object-cover">
|
|
<div class="project-overlay">
|
|
<div>
|
|
<h3 class="font-display text-xl font-bold text-fg">The Willow Dining Pavilion</h3>
|
|
<p class="text-muted text-sm mt-1">Restaurant · Austin, TX</p>
|
|
</div>
|
|
<div class="flex gap-3 mt-3">
|
|
<a href="#" class="text-accent text-sm font-medium hover:underline">View →</a>
|
|
<a href="#" class="text-muted text-sm font-medium hover:underline">Details</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Project 6 -->
|
|
<div class="project-card reveal">
|
|
<img src="https://images.pexels.com/photos/312524/pexels-photo-312524.jpeg?auto=compress&cs=tinysrgb&w=800" alt="Mixed-use development with sustainable materials and open sky" class="w-full h-80 object-cover">
|
|
<div class="project-overlay">
|
|
<div>
|
|
<h3 class="font-display text-xl font-bold text-fg">The Meridian Arts Hub</h3>
|
|
<p class="text-muted text-sm mt-1">Mixed-use · London, UK</p>
|
|
</div>
|
|
<div class="flex gap-3 mt-3">
|
|
<a href="#" class="text-accent text-sm font-medium hover:underline">View →</a>
|
|
<a href="#" class="text-muted text-sm font-medium hover:underline">Details</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- About Section -->
|
|
<section id="about" class="py-24 relative bg-card">
|
|
<div class="max-w-7xl mx-auto px-6">
|
|
<div class="grid lg:grid-cols-2 gap-16 items-center">
|
|
<div class="reveal">
|
|
<span class="text-accent text-xs tracking-[0.3em] uppercase font-medium">About Me</span>
|
|
<h2 class="font-display text-4xl font-bold mt-3 mb-6">Crafting spaces that matter</h2>
|
|
<p class="text-muted leading-relaxed mb-6">
|
|
I draw from a foundation of materiality, craftsmanship, and deep listening to place. Every project begins with a question: what does this site want to become?
|
|
</p>
|
|
<p class="text-muted leading-relaxed mb-8">
|
|
Over two decades of experience, I have worked across residential, commercial, and public architecture — always with the conviction that good design is a form of generosity.
|
|
</p>
|
|
<div class="flex flex-wrap gap-4">
|
|
<a href="#" class="btn-primary">
|
|
Portfolio
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<line x1="5" y1="12" x2="19" y2="12"></line>
|
|
<polyline points="12 5 19 12 12 19"></polyline>
|
|
</svg>
|
|
</a>
|
|
<a href="#" class="btn-secondary">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
|
|
<polyline points="15 3 21 3 21 9"></polyline>
|
|
<line x1="10" y1="14" x2="21" y2="3"></line>
|
|
</svg>
|
|
Contact
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="reveal reveal-delay-2">
|
|
<div class="grid grid-cols-2 gap-6">
|
|
<div class="bg-card border border-border rounded-xl p-6 text-center">
|
|
<div class="text-5xl font-bold text-accent mb-1">15</div>
|
|
<div class="text-muted text-sm">Projects Completed</div>
|
|
</div>
|
|
<div class="bg-card border border-border rounded-xl p-6 text-center">
|
|
<div class="text-5xl font-bold text-accent mb-1">12</div>
|
|
<div class="text-muted text-sm">Awards Won</div>
|
|
</div>
|
|
<div class="bg-card border border-border rounded-xl p-6 text-center">
|
|
<div class="text-5xl font-bold text-accent mb-1">9</div>
|
|
<div class="text-muted text-sm">Cities Worked</div>
|
|
</div>
|
|
<div class="bg-card border border-border rounded-xl p-6 text-center">
|
|
<div class="text-5xl font-bold text-accent mb-1">6</div>
|
|
<div class="text-muted text-sm">Years Active</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-10">
|
|
<h3 class="font-display text-xl font-bold mb-4">Design Philosophy</h3>
|
|
<div class="space-y-4 text-muted leading-relaxed">
|
|
<p>I believe architecture should be a conversation between the built and the natural world. Every material has a story, and every space carries a memory.</p>
|
|
<p>My process begins with deep observation — understanding how a site breathes, where people gather, and what they need before I ever lift a tool.</p>
|
|
<p>Design is not about imposing a vision on a place. It is about listening, then speaking.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Services Section -->
|
|
<section class="py-24 relative">
|
|
<div class="max-w-7xl mx-auto px-6">
|
|
<div class="text-center mb-16 reveal">
|
|
<span class="text-accent text-xs tracking-[0.3em] uppercase font-medium">Approach</span>
|
|
<h2 class="font-display text-4xl sm:text-5xl font-bold mt-3">How I work</h2>
|
|
</div>
|
|
|
|
<div class="grid md:grid-cols-3 gap-8">
|
|
<div class="reveal reveal-delay-1">
|
|
<div class="bg-card border border-border rounded-2xl p-8 relative overflow-hidden">
|
|
<div class="absolute top-0 right-0 w-16 h-16 bg-accent/10 rounded-bl-[12px]"></div>
|
|
<div class="w-12 h-12 bg-accent/20 rounded-xl flex items-center justify-center mb-6">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path>
|
|
<path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path>
|
|
</svg>
|
|
</div>
|
|
<h3 class="font-display text-xl font-bold mb-3">Process</h3>
|
|
<p class="text-muted text-sm leading-relaxed">I follow a structured approach — from concept to construction — ensuring every decision is deliberate and informed by the project's context.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="reveal reveal-delay-2">
|
|
<div class="bg-card border border-border rounded-2xl p-8 relative overflow-hidden">
|
|
<div class="absolute top-0 right-0 w-16 h-16 bg-accent/10 rounded-bl-[12px]"></div>
|
|
<div class="w-12 h-12 bg-accent/20 rounded-xl flex items-center justify-center mb-6">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
|
|
<line x1="3" y1="9" x2="21" y2="9"></line>
|
|
<line x1="9" y1="21" x2="21" y2="21"></line>
|
|
<line x1="3" y1="15" x2="21" y2="15"></line>
|
|
</svg>
|
|
</div>
|
|
<h3 class="font-display text-xl font-bold mb-3">Collaboration</h3>
|
|
<p class="text-muted text-sm leading-relaxed">I work closely with clients, consultants, and the local community to create spaces that are not only beautiful but also functional and inclusive.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="reveal reveal-delay-3">
|
|
<div class="bg-card border border-border rounded-2xl p-8 relative overflow-hidden">
|
|
<div class="absolute top-0 right-0 w-16 h-16 bg-accent/10 rounded-bl-[12px]"></div>
|
|
<div class="w-12 h-12 bg-accent/20 rounded-xl flex items-center justify-center mb-6">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
|
|
</svg>
|
|
</div>
|
|
<h3 class="font-display text-xl font-bold mb-3">Sustainability</h3>
|
|
<p class="text-muted text-sm leading-relaxed">Every design prioritizes material efficiency, passive climate strategies, and long-term durability — because the best buildings endure.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CTA Section -->
|
|
<section class="py-24 relative overflow-hidden">
|
|
<div class="absolute inset-0">
|
|
<img src="https://images.pexels.com/photos/312524/pexels-photo-312524.jpeg?auto=compress&cs=tinysrgb&w=1920" alt="Architect at work with a design model" class="w-full h-full object-cover opacity-30" style="filter: sepia(0.08) contrast(1.05);">
|
|
</div>
|
|
<div class="relative z-10 max-w-4xl mx-auto px-6 text-center">
|
|
<h2 class="font-display text-4xl sm:text-5xl font-bold mb-4">Let's build something<br>worth remembering</h2>
|
|
<p class="text-muted text-lg max-w-lg mx-auto mb-8">I'm currently seeking projects that challenge and inspire. Send me a message and let's start a conversation.</p>
|
|
<div class="flex flex-wrap justify-center gap-4">
|
|
<a href="mailto:hello@lelavoss.com" class="btn-primary">
|
|
Start a Conversation
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<line x1="5" y1="12" x2="19" y2="12"></line>
|
|
<polyline points="12 5 19 12 12 19"></polyline>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
|
|
<!-- Footer -->
|
|
<footer class="bg-card border-t border-border py-12">
|
|
<div class="max-w-7xl mx-auto px-6">
|
|
<div class="flex flex-col md:flex-row items-center justify-between gap-6">
|
|
<div class="font-display text-lg font-bold text-fg">
|
|
<span class="text-accent">L</span>ena Voss
|
|
</div>
|
|
<p class="text-muted text-sm">© 2025 Lena Voss Architecture. All rights reserved.</p>
|
|
<div class="flex gap-6">
|
|
<a href="#" class="text-muted hover:text-accent transition-colors" aria-label="Twitter">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.4 2.2.1 4.4-.6 6-2C3 15.5.5 12 3 5c1.7 4.2 4.5 6.9 7 6.9c1.3 0 2.7-.1 4-0.3 1.3 1.9 3.3 3.2 6.5 3.2C17.5 10 21 9 22 4z"></path>
|
|
</svg>
|
|
</a>
|
|
<a href="#" class="text-muted hover:text-accent transition-colors" aria-label="Instagram">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect>
|
|
<circle cx="12" cy="12" r="5"></circle>
|
|
<line x1="12" y1="1" x2="12" y2="3"></line>
|
|
<line x1="12" y1="21" x2="12" y2="23"></line>
|
|
<line x1="4.2" y1="4.2" x2="5.4" y2="5.4"></line>
|
|
<line x1="18.6" y1="18.6" x2="19.8" y2="19.8"></line>
|
|
<line x1="1" y1="12" x2="3" y2="12"></line>
|
|
<line x1="21" y1="12" x2="23" y2="12"></line>
|
|
<line x1="4.2" y1="19.8" x2="5.4" y2="18.6"></line>
|
|
<line x1="18.6" y1="5.4" x2="19.8" y2="4.2"></line>
|
|
</svg>
|
|
</a>
|
|
<a href="#" class="text-muted hover:text-accent transition-colors" aria-label="Email">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
|
|
<polyline points="22,6 12,13 2,6"></polyline>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
// --- Loading screen ---
|
|
window.addEventListener('load', () => {
|
|
setTimeout(() => {
|
|
document.getElementById('loadingScreen').classList.add('hidden');
|
|
}, 800);
|
|
});
|
|
|
|
// --- Custom cursor ---
|
|
const cursorDot = document.getElementById('cursorDot');
|
|
let mouseX = 0, mouseY = 0;
|
|
let cursorX = 0, cursorY = 0;
|
|
|
|
document.addEventListener('mousemove', (e) => {
|
|
mouseX = e.clientX;
|
|
mouseY = e.clientY;
|
|
});
|
|
|
|
function animateCursor() {
|
|
cursorX += (mouseX - cursorX) * 0.15;
|
|
cursorY += (mouseY - cursorY) * 0.15;
|
|
cursorDot.style.left = cursorX + 'px';
|
|
cursorDot.style.top = cursorY + 'px';
|
|
requestAnimationFrame(animateCursor);
|
|
}
|
|
animateCursor();
|
|
|
|
// --- Scroll reveal ---
|
|
const revealObserver = new IntersectionObserver((entries) => {
|
|
entries.forEach((entry, index) => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('visible');
|
|
// Stagger reveal delays
|
|
const delay = entry.target.closest('.reveal')?.dataset?.delay || 0;
|
|
setTimeout(() => {
|
|
entry.target.classList.add('visible');
|
|
}, index * 100);
|
|
}
|
|
});
|
|
}, { threshold: 0.15, rootMargin: '0px 0px -50px 0px' });
|
|
|
|
document.querySelectorAll('.reveal').forEach(el => {
|
|
revealObserver.observe(el);
|
|
});
|
|
|
|
// --- Navigation ---
|
|
const navbar = document.getElementById('navbar');
|
|
const mobileMenuBtn = document.getElementById('mobileMenuBtn');
|
|
const mobileMenu = document.getElementById('mobileMenu');
|
|
let mobileMenuOpen = false;
|
|
|
|
window.addEventListener('scroll', () => {
|
|
if (window.scrollY > 80) {
|
|
navbar.style.background = 'rgba(26, 26, 26, 0.95)';
|
|
navbar.style.backdropFilter = 'blur(12px)';
|
|
navbar.style.borderBottom = '1px solid var(--border)';
|
|
} else {
|
|
navbar.style.background = 'transparent';
|
|
navbar.style.backdropFilter = 'none';
|
|
navbar.style.borderBottom = 'none';
|
|
}
|
|
});
|
|
|
|
mobileMenuBtn.addEventListener('click', () => {
|
|
mobileMenuOpen = !mobileMenuOpen;
|
|
mobileMenu.classList.toggle('hidden', !mobileMenuOpen);
|
|
mobileMenuBtn.setAttribute('aria-expanded', mobileMenuOpen);
|
|
});
|
|
|
|
// Close mobile menu on link click
|
|
mobileMenu.querySelectorAll('a').forEach(link => {
|
|
link.addEventListener('click', () => {
|
|
mobileMenuOpen = false;
|
|
mobileMenu.classList.add('hidden');
|
|
mobileMenuBtn.setAttribute('aria-expanded', 'false');
|
|
});
|
|
});
|
|
|
|
// --- Floating particles ---
|
|
(function createParticles() {
|
|
const container = document.getElementById('particles');
|
|
for (let i = 0; i < 30; i++) {
|
|
const particle = document.createElement('div');
|
|
particle.className = 'particle';
|
|
particle.style.left = Math.random() * 100 + '%';
|
|
particle.style.top = Math.random() * 100 + '%';
|
|
particle.style.animationDelay = Math.random() * 8 + 's';
|
|
particle.style.animationDuration = (6 + Math.random() * 6) + 's';
|
|
particle.style.width = (2 + Math.random() * 3) + 'px';
|
|
particle.style.height = particle.style.width;
|
|
container.appendChild(particle);
|
|
}
|
|
})();
|
|
|
|
// --- Smooth scroll for anchor links ---
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
|
anchor.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
const target = document.querySelector(this.getAttribute('href'));
|
|
if (target) {
|
|
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
|
}
|
|
});
|
|
});
|
|
|
|
// --- Parallax on hero image ---
|
|
(function() {
|
|
const heroImg = document.querySelector('.hero-image-wrapper img');
|
|
window.addEventListener('scroll', () => {
|
|
const scrollY = window.scrollY;
|
|
const heroSection = document.querySelector('section');
|
|
if (heroSection) {
|
|
const rect = heroSection.getBoundingClientRect();
|
|
const imageTop = rect.top;
|
|
if (scrollY > imageTop) {
|
|
heroImg.style.transform = `translateY(${Math.min(scrollY * 0.3, 50)}px)`;
|
|
heroImg.style.opacity = Math.max(1 - scrollY * 0.001, 0.7);
|
|
}
|
|
}
|
|
});
|
|
})();
|
|
|
|
// --- Active nav link highlighting ---
|
|
const sections = document.querySelectorAll('section[id]');
|
|
const navLinks = document.querySelectorAll('nav a[href^="#"]');
|
|
|
|
window.addEventListener('scroll', () => {
|
|
let current = '';
|
|
sections.forEach(section => {
|
|
const sectionTop = section.offsetTop - 100;
|
|
if (window.scrollY >= sectionTop) {
|
|
current = section.getAttribute('id');
|
|
}
|
|
});
|
|
|
|
navLinks.forEach(link => {
|
|
link.classList.remove('text-accent');
|
|
if (link.getAttribute('href') === '#' + current) {
|
|
link.classList.add('text-accent');
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<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 63.86s<br>Model: bloomer010/Ling-3.0-tiny-GGUF:Q4_K_M</div></body>
|
|
</html>
|
|
``` |