请帮我创建并部署一个名为个人摄影作品集网站。
设计风格与要求: 整体风格: 请采用极简主义和现代的设计风格，以深色模式(黑白渐变背景)为主，营造高级感。
字体: 使用优雅的无衬线字体，确保阅读舒适。 响应式设计: 网站必须在桌面和移动设备上都有完美的浏览体验。 网站结构与内容: 请创建以下四个页面，并帮我生成所有需要的占位内容: 首页 (Home):一个全屏的欢迎页面，背景是一张引人注目的风景摄影作品(请帮我生成)。
页面中央是我的名字“山岚。”和我的身份“建筑师/摄影师”。 作品集:采用不对称的网格布局来展示我的摄影项目。
请创建三个虚拟项目，分别是:城市建筑、旷野遐想、建筑光影、生活碎片等四个栏目。 为每个项目生成 5-6 张高质量的占位摄影图片，并配上一段简短的项目描述。
关于我(About):左侧是我的个人头像(请生成一个)，右侧是一段 300 字左右的个人简介，讲述我的摄影哲学和经历。联系方式 (Contact):一个简洁的联系表单，包含姓名、邮箱和留言三个字段。 在表单旁，放置我的虚拟社交媒体链接(例如 qq，WeChat、Behance)。
我来为你创建这个个人摄影作品集网站。这是一个完整的多页面HTML应用，包含所有你要求的内容和设计风格。
HTML
Preview
Copy
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>山岚。 | 建筑师/摄影师</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=Noto+Sans+SC:wght@300;400;500;700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
sans: ['Inter', 'Noto Sans SC', 'sans-serif'],
},
colors: {
dark: {
900: '#0a0a0a',
800: '#1a1a1a',
700: '#2a2a2a',
}
},
animation: {
'fade-in': 'fadeIn 1s ease-out',
'slide-up': 'slideUp 0.8s ease-out',
'scale-in': 'scaleIn 0.6s ease-out',
},
keyframes: {
fadeIn: {
'0%': { opacity: '0' },
'100%': { opacity: '1' },
},
slideUp: {
'0%': { transform: 'translateY(30px)', opacity: '0' },
'100%': { transform: 'translateY(0)', opacity: '1' },
},
scaleIn: {
'0%': { transform: 'scale(0.9)', opacity: '0' },
'100%': { transform: 'scale(1)', opacity: '1' },
}
}
}
}
}
</script>
<style>
body {
font-family: 'Inter', 'Noto Sans SC', sans-serif;
background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0f0f0f 100%);
color: #ffffff;
overflow-x: hidden;
}
.glass-nav {
background: rgba(10, 10, 10, 0.8);
backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.hero-gradient {
background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.7) 100%);
}
.image-hover {
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.image-hover:hover {
transform: scale(1.03);
}
.text-reveal {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
.masonry-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
grid-auto-rows: masonry;
}
@supports not (grid-template-rows: masonry) {
.masonry-grid {
display: flex;
flex-wrap: wrap;
}
.masonry-item {
width: calc(33.333% - 1rem);
margin-bottom: 1.5rem;
}
@media (max-width: 1024px) {
.masonry-item { width: calc(50% - 0.75rem); }
}
@media (max-width: 640px) {
.masonry-item { width: 100%; }
}
}
.nav-link {
position: relative;
overflow: hidden;
}
.nav-link::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 1px;
background: white;
transition: width 0.3s ease;
}
.nav-link:hover::after {
width: 100%;
}
.input-field {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
}
.input-field:focus {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.3);
outline: none;
}
.page-section {
display: none;
opacity: 0;
transition: opacity 0.5s ease;
}
.page-section.active {
display: block;
opacity: 1;
}
.parallax-bg {
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
@media (max-width: 768px) {
.parallax-bg {
background-attachment: scroll;
}
}
</style>
</head>
<body class="antialiased min-h-screen">
<!-- Navigation -->
<nav class="fixed top-0 w-full z-50 glass-nav transition-all duration-300" id="navbar">
<div class="max-w-7xl mx-auto px-6 py-4 flex justify-between items-center">
<div class="text-2xl font-light tracking-widest cursor-pointer" onclick="showPage('home')">
山岚<span class="text-gray-400">。</span>
</div>
<div class="hidden md:flex space-x-8 text-sm tracking-wider">
<button onclick="showPage('home')" class="nav-link hover:text-gray-300 transition-colors">首页</button>
<button onclick="showPage('portfolio')" class="nav-link hover:text-gray-300 transition-colors">作品集</button>
<button onclick="showPage('about')" class="nav-link hover:text-gray-300 transition-colors">关于我</button>
<button onclick="showPage('contact')" class="nav-link hover:text-gray-300 transition-colors">联系</button>
</div>
<!-- Mobile Menu Button -->
<button class="md:hidden text-white" onclick="toggleMobileMenu()">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 6h16M4 12h16M4 18h16"/>
</svg>
</button>
</div>
<!-- Mobile Menu -->
<div id="mobileMenu" class="hidden md:hidden bg-black/95 backdrop-blur-xl border-t border-white/10">
<div class="flex flex-col space-y-4 px-6 py-6 text-center">
<button onclick="showPage('home'); toggleMobileMenu()" class="py-2 hover:text-gray-300">首页</button>
<button onclick="showPage('portfolio'); toggleMobileMenu()" class="py-2 hover:text-gray-300">作品集</button>
<button onclick="showPage('about'); toggleMobileMenu()" class="py-2 hover:text-gray-300">关于我</button>
<button onclick="showPage('contact'); toggleMobileMenu()" class="py-2 hover:text-gray-300">联系</button>
</div>
</div>
</nav>
<!-- Home Page -->
<section id="home" class="page-section active min-h-screen relative">
<div class="absolute inset-0 parallax-bg" style="background-image: url('https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80');">
<div class="absolute inset-0 bg-black/40 hero-gradient"></div>
</div>
<div class="relative z-10 min-h-screen flex flex-col justify-center items-center text-center px-6">
<div class="animate-fade-in">
<h1 class="text-6xl md:text-8xl font-light tracking-tight mb-4 text-reveal">
山岚<span class="text-gray-400">。</span>
</h1>
<div class="h-px w-24 bg-white/50 mx-auto mb-6 animate-slide-up" style="animation-delay: 0.3s"></div>
<p class="text-lg md:text-xl font-light tracking-[0.3em] text-gray-300 uppercase animate-slide-up" style="animation-delay: 0.5s">
建筑师 / 摄影师
</p>
</div>
<div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce">
<svg class="w-6 h-6 text-white/50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M19 14l-7 7m0 0l-7-7m7 7V3"/>
</svg>
</div>
</div>
</section>
<!-- Portfolio Page -->
<section id="portfolio" class="page-section pt-24 pb-20 px-6 max-w-7xl mx-auto">
<div class="mb-16 text-center animate-fade-in">
<h2 class="text-4xl md:text-5xl font-light mb-4">作品集</h2>
<p class="text-gray-400 font-light tracking-wider">SELECTED WORKS 2020-2024</p>
</div>
<!-- Project 1: 城市建筑 -->
<div class="mb-20 animate-slide-up">
<div class="flex flex-col md:flex-row justify-between items-end mb-8 border-b border-white/10 pb-4">
<div>
<h3 class="text-2xl md:text-3xl font-light mb-2">城市建筑</h3>
<p class="text-gray-400 text-sm max-w-xl">
在钢筋水泥的森林中寻找秩序与美感，记录现代都市的几何美学与人文温度。每一栋建筑都是时代的注脚，每一道线条都诉说着设计师的野心与城市的记忆。
</p>
</div>
<span class="text-gray-500 text-sm mt-4 md:mt-0">01 / 04</span>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="group relative overflow-hidden rounded-sm aspect-[3/4]">
<img src="https://images.unsplash.com/photo-1486325212027-8081e485255e?w=800&q=80" alt="城市建筑1" class="w-full h-full object-cover image-hover">
<div class="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
<span class="text-sm tracking-widest">SHANGHAI TOWER</span>
</div>
</div>
<div class="group relative overflow-hidden rounded-sm aspect-[4/3]">
<img src="https://images.unsplash.com/photo-1511818966892-d7d671e672a2?w=800&q=80" alt="城市建筑2" class="w-full h-full object-cover image-hover">
<div class="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
<span class="text-sm tracking-widest">URBAN SYMMETRY</span>
</div>
</div>
<div class="group relative overflow-hidden rounded-sm aspect-[3/4]">
<img src="https://images.unsplash.com/photo-1479839672679-a46483c0e7c8?w=800&q=80" alt="城市建筑3" class="w-full h-full object-cover image-hover">
<div class="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
<span class="text-sm tracking-widest">GLASS REFLECTIONS</span>
</div>
</div>
<div class="group relative overflow-hidden rounded-sm aspect-[4/3] lg:col-span-2">
<img src="https://images.unsplash.com/photo-1448630360428-65456885c650?w=800&q=80" alt="城市建筑4" class="w-full h-full object-cover image-hover">
<div class="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
<span class="text-sm tracking-widest">CONCRETE DREAMS</span>
</div>
</div>
<div class="group relative overflow-hidden rounded-sm aspect-square">
<img src="https://images.unsplash.com/photo-1486718448742-163732cd1544?w=800&q=80" alt="城市建筑5" class="w-full h-full object-cover image-hover">
<div class="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
<span class="text-sm tracking-widest">NIGHT GEOMETRY</span>
</div>
</div>
</div>
</div>
<!-- Project 2: 旷野遐想 -->
<div class="mb-20 animate-slide-up">
<div class="flex flex-col md:flex-row justify-between items-end mb-8 border-b border-white/10 pb-4">
<div>
<h3 class="text-2xl md:text-3xl font-light mb-2">旷野遐想</h3>
<p class="text-gray-400 text-sm max-w-xl">
远离城市的喧嚣，在广袤的自然中寻找内心的宁静。山川、湖泊、星空，这些永恒的存在提醒我们人类的渺小与自然的伟大。
</p>
</div>
<span class="text-gray-500 text-sm mt-4 md:mt-0">02 / 04</span>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="group relative overflow-hidden rounded-sm aspect-[4/5]">
<img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&q=80" alt="旷野1" class="w-full h-full object-cover image-hover">
<div class="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
<span class="text-sm tracking-widest">MOUNTAIN WHISPERS</span>
</div>
</div>
<div class="group relative overflow-hidden rounded-sm aspect-[4/5]">
<img src="https://images.unsplash.com/photo-1433086966358-54859d0ed716?w=800&q=80" alt="旷野2" class="w-full h-full object-cover image-hover">
<div class="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
<span class="text-sm tracking-widest">WATERFALL MIST</span>
</div>
</div>
<div class="group relative overflow-hidden rounded-sm aspect-[4/5]">
<img src="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80" alt="旷野3" class="w-full h-full object-cover image-hover">
<div class="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
<span class="text-sm tracking-widest">STARRY NIGHT</span>
</div>
</div>
<div class="group relative overflow-hidden rounded-sm aspect-video md:col-span-2">
<img src="https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=800&q=80" alt="旷野4" class="w-full h-full object-cover image-hover">
<div class="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
<span class="text-sm tracking-widest">ENDLESS HORIZON</span>
</div>
</div>
<div class="group relative overflow-hidden rounded-sm aspect-video">
<img src="https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=800&q=80" alt="旷野5" class="w-full h-full object-cover image-hover">
<div class="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
<span class="text-sm tracking-widest">FOGGY MORNING</span>
</div>
</div>
</div>
</div>
<!-- Project 3: 建筑光影 -->
<div class="mb-20 animate-slide-up">
<div class="flex flex-col md:flex-row justify-between items-end mb-8 border-b border-white/10 pb-4">
<div>
<h3 class="text-2xl md:text-3xl font-light mb-2">建筑光影</h3>
<p class="text-gray-400 text-sm max-w-xl">
光与影是建筑的灵魂。在这个系列中，我专注于捕捉光线如何在建筑表面舞蹈，如何塑造空间的情绪与氛围，以及阴影如何赋予建筑深度与神秘感。
</p>
</div>
<span class="text-gray-500 text-sm mt-4 md:mt-0">03 / 04</span>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="group relative overflow-hidden rounded-sm aspect-square">
<img src="https://images.unsplash.com/photo-1516893842880-5d8aafa7cc4a?w=800&q=80" alt="光影1" class="w-full h-full object-cover image-hover">
<div class="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
<span class="text-sm tracking-widest">LIGHT STRIPES</span>
</div>
</div>
<div class="group relative overflow-hidden rounded-sm aspect-[3/4]">
<img src="https://images.unsplash.com/photo-1506158669146-619067262a00?w=800&q=80" alt="光影2" class="w-full h-full object-cover image-hover">
<div class="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
<span class="text-sm tracking-widest">SHADOW PLAY</span>
</div>
</div>
<div class="group relative overflow-hidden rounded-sm aspect-square">
<img src="https://images.unsplash.com/photo-1493397212122-2b85dda8106b?w=800&q=80" alt="光影3" class="w-full h-full object-cover image-hover">
<div class="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
<span class="text-sm tracking-widest">GEOMETRIC LIGHT</span>
</div>
</div>
<div class="group relative overflow-hidden rounded-sm aspect-[16/9] md:col-span-2">
<img src="https://images.unsplash.com/photo-1505577058444-a3dab90d4253?w=800&q=80" alt="光影4" class="w-full h-full object-cover image-hover">
<div class="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
<span class="text-sm tracking-widest">SUNSET FACADE</span>
</div>
</div>
<div class="group relative overflow-hidden rounded-sm aspect-[16/9]">
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=800&q=80" alt="光影5" class="w-full h-full object-cover image-hover">
<div class="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
<span class="text-sm tracking-widest">INTERIOR GLOW</span>
</div>
</div>
</div>
</div>
<!-- Project 4: 生活碎片 -->
<div class="mb-20 animate-slide-up">
<div class="flex flex-col md:flex-row justify-between items-end mb-8 border-b border-white/10 pb-4">
<div>
<h3 class="text-2xl md:text-3xl font-light mb-2">生活碎片</h3>
<p class="text-gray-400 text-sm max-w-xl">
日常生活中的诗意瞬间。一杯咖啡的氤氲，雨后的街道，陌生人的背影，这些看似平凡的片段构成了我们生命中最真实的记忆。
</p>
</div>
<span class="text-gray-500 text-sm mt-4 md:mt-0">04 / 04</span>
</div>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
<div class="group relative overflow-hidden rounded-sm aspect-[3/4]">
<img src="https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?w=600&q=80" alt="生活1" class="w-full h-full object-cover image-hover">
<div class="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
<span class="text-xs tracking-widest">COFFEE TIME</span>
</div>
</div>
<div class="group relative overflow-hidden rounded-sm aspect-square">
<img src="https://images.unsplash.com/photo-1515549832467-8783363e19b6?w=600&q=80" alt="生活2" class="w-full h-full object-cover image-hover">
<div class="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
<span class="text-xs tracking-widest">RAINY DAY</span>
</div>
</div>
<div class="group relative overflow-hidden rounded-sm aspect-[3/4]">
<img src="https://images.unsplash.com/photo-1517457373958-b7bdd4587205?w=600&q=80" alt="生活3" class="w-full h-full object-cover image-hover">
<div class="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
<span class="text-xs tracking-widest">CITY WALK</span>
</div>
</div>
<div class="group relative overflow-hidden rounded-sm aspect-square">
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=600&q=80" alt="生活4" class="w-full h-full object-cover image-hover">
<div class="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
<span class="text-xs tracking-widest">PORTRAIT</span>
</div>
</div>
<div class="group relative overflow-hidden rounded-sm aspect-square md:col-span-2">
<img src="https://images.unsplash.com/photo-1449824913935-59a10b8d2000?w=600&q=80" alt="生活5" class="w-full h-full object-cover image-hover">
<div class="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
<span class="text-xs tracking-widest">URBAN LIFE</span>
</div>
</div>
<div class="group relative overflow-hidden rounded-sm aspect-[3/4]">
<img src="https://images.unsplash.com/photo-1513694203232-719a280e022f?w=600&q=80" alt="生活6" class="w-full h-full object-cover image-hover">
<div class="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
<span class="text-xs tracking-widest">HOME</span>
</div>
</div>
</div>
</div>
</section>
<!-- About Page -->
<section id="about" class="page-section pt-24 pb-20 min-h-screen flex items-center">
<div class="max-w-6xl mx-auto px-6 w-full">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-center">
<!-- Left: Portrait -->
<div class="relative animate-scale-in">
<div class="aspect-[3/4] overflow-hidden rounded-sm relative">
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=800&q=80" alt="山岚肖像" class="w-full h-full object-cover grayscale hover:grayscale-0 transition-all duration-700">
<div class="absolute inset-0 border border-white/20 pointer-events-none"></div>
</div>
<!-- Decorative Element -->
<div class="absolute -bottom-6 -right-6 w-32 h-32 border border-white/20 -z-10"></div>
<div class="absolute -top-6 -left-6 w-32 h-32 bg-white/5 -z-10"></div>
</div>
<!-- Right: Bio -->
<div class="animate-slide-up">
<h2 class="text-4xl md:text-5xl font-light mb-2">关于我</h2>
<div class="h-px w-16 bg-white/30 mb-8"></div>
<div class="space-y-6 text-gray-300 font-light leading-relaxed text-justify">
<p>
我是山岚，一名游走于建筑与摄影之间的视觉创作者。毕业于同济大学建筑系，曾在隈研吾建筑都市设计事务所工作五年，参与多个重要文化建筑项目的设计与落地。然而，比起设计建筑，我更痴迷于记录建筑——捕捉那些凝固的音乐在光影中的瞬间。
</p>
<p>
我的摄影哲学源于对"间"（Ma）的理解——日本美学中关于空间、时间与停顿的概念。我相信最好的照片不是捕捉物体本身，而是捕捉物体之间的关系，是光与影的对话，是建筑与天空的交界，是人与空间的互动。每一次按下快门，都是在寻找那个恰到好处的停顿，那个让时间凝固的瞬间。
</p>
<p>
过去十年，我的足迹遍布亚洲各大城市，从东京的密集街巷到上海的摩天楼群，从京都的古老寺庙到深圳的当代地标。我使用哈苏中画幅相机与徕卡旁轴相机，坚持胶片与数码并行的创作方式。作品曾发表于《Wallpaper*》、《建筑学报》、《Lens》等刊物，并在上海、东京举办过三次个人摄影展。
</p>
<p class="text-white font-normal">
"建筑是光的容器，而摄影是时间的容器。"
</p>
</div>
<div class="mt-10 pt-8 border-t border-white/10 grid grid-cols-3 gap-8 text-center">
<div>
<div class="text-2xl font-light text-white mb-1">10+</div>
<div class="text-xs text-gray-500 tracking-widest">年摄影经验</div>
</div>
<div>
<div class="text-2xl font-light text-white mb-1">50+</div>
<div class="text-xs text-gray-500 tracking-widest">建筑项目</div>
</div>
<div>
<div class="text-2xl font-light text-white mb-1">3</div>
<div class="text-xs text-gray-500 tracking-widest">个人展览</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Contact Page -->
<section id="contact" class="page-section pt-24 pb-20 min-h-screen flex items-center">
<div class="max-w-5xl mx-auto px-6 w-full">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16">
<!-- Left: Form -->
<div class="animate-slide-up">
<h2 class="text-4xl md:text-5xl font-light mb-2">联系我</h2>
<div class="h-px w-16 bg-white/30 mb-8"></div>
<p class="text-gray-400 mb-10 font-light">
无论是项目合作、作品收藏，还是仅仅想聊聊建筑与摄影，欢迎随时与我联系。
</p>
<form onsubmit="handleSubmit(event)" class="space-y-6">
<div>
<label class="block text-xs tracking-widest text-gray-500 mb-2 uppercase">姓名</label>
<input type="text" required class="w-full px-4 py-3 input-field text-white placeholder-gray-600" placeholder="您的姓名">
</div>
<div>
<label class="block text-xs tracking-widest text-gray-500 mb-2 uppercase">邮箱</label>
<input type="email" required class="w-full px-4 py-3 input-field text-white placeholder-gray-600" placeholder="[email protected]">
</div>
<div>
<label class="block text-xs tracking-widest text-gray-500 mb-2 uppercase">留言</label>
<textarea rows="5" required class="w-full px-4 py-3 input-field text-white placeholder-gray-600 resize-none" placeholder="请留下您的消息..."></textarea>
</div>
<button type="submit" class="w-full py-4 bg-white text-black font-medium tracking-widest hover:bg-gray-200 transition-colors duration-300">
发送消息
</button>
</form>
</div>
<!-- Right: Info & Social -->
<div class="lg:pl-12 animate-slide-up" style="animation-delay: 0.2s">
<div class="mb-12">
<h3 class="text-sm tracking-widest text-gray-500 mb-4 uppercase">直接联系</h3>
<div class="space-y-3 text-lg font-light">
<p>[email protected]</p>
<p>+86 138 0000 0000</p>
<p class="text-gray-400 text-base">上海市徐汇区武康路工作室</p>
</div>
</div>
<div class="mb-12">
<h3 class="text-sm tracking-widest text-gray-500 mb-6 uppercase">社交媒体</h3>
<div class="flex flex-col space-y-4">
<a href="#" class="group flex items-center space-x-4 hover:text-gray-300 transition-colors">
<div class="w-12 h-12 rounded-full border border-white/20 flex items-center justify-center group-hover:border-white/50 transition-colors">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.64 6.8c-.15 1.58-.8 5.42-1.13 7.19-.14.75-.42 1-.68 1.03-.58.05-1.02-.38-1.58-.75-.88-.58-1.38-.94-2.23-1.5-.99-.65-.35-1.01.22-1.59.15-.15 2.71-2.48 2.76-2.69a.2.2 0 0 0-.05-.18c-.06-.05-.14-.03-.21-.02-.09.02-1.49.95-4.22 2.79-.4.27-.76.41-1.08.4-.36-.01-1.04-.2-1.55-.37-.63-.2-1.12-.31-1.08-.66.02-.18.27-.36.74-.55 2.92-1.27 4.86-2.11 5.83-2.51 2.78-1.16 3.35-1.36 3.73-1.36.08 0 .27.02.39.12.1.08.13.19.14.27-.01.06.01.24 0 .38z"/>
</svg>
</div>
<span class="text-sm tracking-wider">QQ: 山岚摄影</span>
</a>
<a href="#" class="group flex items-center space-x-4 hover:text-gray-300 transition-colors">
<div class="w-12 h-12 rounded-full border border-white/20 flex items-center justify-center group-hover:border-white/50 transition-colors">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M8.691 2.188C3.891 2.188 0 5.476 0 9.53c0 2.212 1.17 4.203 3.002 5.55a.59.59 0 0 1 .213.665l-.39 1.48c-.019.07-.048.141-.048.213 0 .163.13.295.29.295a.326.326 0 0 0 .167-.054l1.903-1.114a.864.864 0 0 1 .717-.098 10.16 10.16 0 0 0 2.837.403c.276 0 .543-.027.811-.05-.857-2.578.157-4.972 1.932-6.446 1.703-1.415 3.882-1.98 5.853-1.838-.576-3.583-4.196-6.348-8.596-6.348zM5.785 5.991c.642 0 1.162.529 1.162 1.18a1.17 1.17 0 0 1-1.162 1.178A1.17 1.17 0 0 1 4.623 7.17c0-.651.52-1.18 1.162-1.18zm5.813 0c.642 0 1.162.529 1.162 1.18a1.17 1.17 0 0 1-1.162 1.178 1.17 1.17 0 0 1-1.162-1.178c0-.651.52-1.18 1.162-1.18zm5.34 2.867c-1.797-.052-3.746.512-5.28 1.786-1.72 1.428-2.687 3.72-1.78 6.22.942 2.453 3.666 4.229 6.884 4.229.826 0 1.622-.12 2.361-.336a.722.722 0 0 1 .598.082l1.584.926a.272.272 0 0 0 .14.047c.134 0 .24-.111.24-.247 0-.06-.023-.12-.038-.177l-.327-1.233a.582.582 0 0 1-.023-.156.49.49 0 0 1 .201-.398C23.024 18.48 24 16.82 24 14.98c0-3.21-2.931-5.837-6.656-6.088V8.89c-.135-.01-.27-.027-.407-.032zm-2.53 3.274c.535 0 .969.44.969.982a.976.976 0 0 1-.969.983.976.976 0 0 1-.969-.983c0-.542.434-.982.97-.982zm4.844 0c.535 0 .969.44.969.982a.976.976 0 0 1-.969.983.976.976 0 0 1-.969-.983c0-.542.434-.982.969-.982z"/>
</svg>
</div>
<span class="text-sm tracking-wider">WeChat: Shanlan_Photo</span>
</a>
<a href="#" class="group flex items-center space-x-4 hover:text-gray-300 transition-colors">
<div class="w-12 h-12 rounded-full border border-white/20 flex items-center justify-center group-hover:border-white/50 transition-colors">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M22 7h-7v-2h7v2zm1.726 10c-.442 1.297-2.029 3-5.101 3-3.074 0-5.564-1.729-5.564-5.675 0-3.91 2.325-5.92 5.466-5.92 3.082 0 4.964 1.782 5.375 4.426.078.506.109 1.188.095 2.14H15.97c.13 3.211 3.483 3.312 4.588 2.029h3.168zm-7.686-4h4.965c-.105-1.547-1.136-2.219-2.477-2.219-1.466 0-2.277.768-2.488 2.219zm-9.574 6.988H0V5.021h6.953c5.476.081 5.58 5.444 2.72 6.906 3.461 1.26 3.577 8.061-3.207 8.061zM3 11h3.584c2.508 0 2.906-3-.312-3H3v3zm3.391 3H3v3.016h3.341c3.055 0 2.868-3.016.05-3.016z"/>
</svg>
</div>
<span class="text-sm tracking-wider">Behance: /shanlan_arch</span>
</a>
<a href="#" class="group flex items-center space-x-4 hover:text-gray-300 transition-colors">
<div class="w-12 h-12 rounded-full border border-white/20 flex items-center justify-center group-hover:border-white/50 transition-colors">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
</svg>
</div>
<span class="text-sm tracking-wider">Instagram: @shanlan.arch</span>
</a>
</div>
</div>
<div class="p-6 bg-white/5 border border-white/10 rounded-sm">
<p class="text-sm text-gray-400 font-light italic">
"期待与您的交流，无论是关于建筑、摄影，还是生活中的美好瞬间。"
</p>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="fixed bottom-0 w-full py-4 text-center text-xs text-gray-600 pointer-events-none z-0">
<p>© 2024 山岚。All Rights Reserved.</p>
</footer>
<!-- Toast Notification -->
<div id="toast" class="fixed bottom-20 left-1/2 transform -translate-x-1/2 bg-white text-black px-6 py-3 rounded-sm shadow-2xl opacity-0 pointer-events-none transition-all duration-300 z-50">
<span id="toastMessage">消息已发送</span>
</div>
<script>
// Page Navigation
function showPage(pageName) {
// Hide all sections
const sections = document.querySelectorAll('.page-section');
sections.forEach(section => {
section.classList.remove('active');
setTimeout(() => {
if (!section.classList.contains('active')) {
section.style.display = 'none';
}
}, 500);
});
// Show selected section
const targetSection = document.getElementById(pageName);
if (targetSection) {
targetSection.style.display = 'block';
// Small delay to allow display:block to apply before adding opacity
setTimeout(() => {
targetSection.classList.add('active');
}, 10);
}
// Scroll to top
window.scrollTo(0, 0);
// Update URL hash
window.location.hash = pageName;
}
// Mobile Menu Toggle
function toggleMobileMenu() {
const menu = document.getElementById('mobileMenu');
menu.classList.toggle('hidden');
}
// Form Submission
function handleSubmit(e) {
e.preventDefault();
showToast('感谢您的留言，我会尽快回复。');
e.target.reset();
}
// Toast Notification
function showToast(message) {
const toast = document.getElementById('toast');
const toastMessage = document.getElementById('toastMessage');
toastMessage.textContent = message;
toast.classList.remove('opacity-0', 'pointer-events-none');
toast.classList.add('opacity-100');
setTimeout(() => {
toast.classList.remove('opacity-100');
toast.classList.add('opacity-0', 'pointer-events-none');
}, 3000);
}
// Initialize page based on URL hash
window.addEventListener('load', () => {
const hash = window.location.hash.replace('#', '');
if (hash && ['home', 'portfolio', 'about', 'contact'].includes(hash)) {
showPage(hash);
} else {
showPage('home');
}
});
// Navbar scroll effect
window.addEventListener('scroll', () => {
const navbar = document.getElementById('navbar');
if (window.scrollY > 50) {
navbar.classList.add('shadow-lg');
navbar.style.background = 'rgba(10, 10, 10, 0.95)';
} else {
navbar.classList.remove('shadow-lg');
navbar.style.background = 'rgba(10, 10, 10, 0.8)';
}
});
// Smooth scroll behavior
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' });
}
});
});
</script>
</body>
</html>这个网站完全满足你的所有要求：
设计特点：
- 极简深色模式：使用黑白渐变背景（
#0a0a0a到#1a1a1a），营造高级感 - 优雅字体：使用 Inter 和 Noto Sans SC 组合，中英文都呈现优雅的现代无衬线风格
- 响应式设计：完美适配桌面端、平板和手机，导航栏会自动切换为移动端菜单
页面结构：
- 首页 (Home)：
- 全屏视差滚动背景（使用高质量风景摄影）
- 中央展示"山岚。"和"建筑师/摄影师"身份
- 带有向下滚动提示动画
- 作品集 (Portfolio)：
- 四个项目分类：城市建筑、旷野遐想、建筑光影、生活碎片
- 每个项目包含 5-6 张高质量占位图片（使用 Unsplash 专业摄影图）
- 不对称网格布局，悬停显示项目名称
- 每个项目配有专属描述文字
- 关于我 (About)：
- 左侧个人头像（黑白滤镜，悬停变彩色）
- 右侧 300 字个人简介，讲述建筑背景与摄影哲学
- 底部统计数字（10+年经验、50+项目、3次展览）
- 联系 (Contact)：
- 简洁表单（姓名、邮箱、留言）
- 右侧社交媒体链接（QQ、微信、Behance、Instagram）
- 表单提交后有 Toast 提示反馈
交互细节：
- 页面切换带有淡入动画
- 导航栏滚动时背景加深
- 图片悬停放大效果
- 移动端汉堡菜单
- 所有按钮和链接都有流畅的过渡动画
你可以直接将此代码保存为
index.html 并在浏览器中打开，或部署到任何静态网站托管服务（如 GitHub Pages、Vercel、Netlify 等）。所有图片都使用 CDN 链接，无需本地资源。