Skip to content

Commit

Permalink
project water
Browse files Browse the repository at this point in the history
  • Loading branch information
kwk1001 committed Dec 7, 2024
1 parent 959f099 commit f071993
Show file tree
Hide file tree
Showing 39 changed files with 310 additions and 212 deletions.
9 changes: 4 additions & 5 deletions cv/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ body {
background-color: #eee8d7; /* 设置整个页面背景颜色 */
cursor: none; /* 隐藏原始鼠标光标 */
min-height: 100dvh;
overflow-y: scroll;
overflow-y: hidden;
overflow-x: hidden;
}

Expand Down Expand Up @@ -228,14 +228,13 @@ a:hover {

/* 右侧栏样式 */
.right-column {
position: relative;
margin-left: 25%;
margin-right: 10%;
width: 80%;
padding: 50px; /* 增加内边距 */
min-height: 100dvh;
overflow-y: scroll; /* 允许滚动 */
-ms-overflow-style: none; /* 适用于 Internet Explorer 和 Edge */
scrollbar-width: none; /* 隐藏 Firefox 浏览器的滚动条 */
height: 100dvh;
overflow-y: auto; /* 允许滚动 */
}

.right-column::-webkit-scrollbar {
Expand Down
11 changes: 9 additions & 2 deletions open.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,15 @@ rows.forEach(row => {
const cursor = document.getElementById('cursor');

document.addEventListener('mousemove', (e) => {
cursor.style.left = e.pageX + 20 + 'px';
cursor.style.top = e.pageY + 20 + 'px';
const cursorSize = 20; // 光标的尺寸
const cursorX = e.pageX + cursorSize;
const cursorY = e.pageY + cursorSize;
const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;
const adjustedX = Math.min(cursorX, windowWidth + 5);
const adjustedY = Math.min(cursorY, windowHeight+ 5);
cursor.style.left = adjustedX + 'px';
cursor.style.top = adjustedY + 'px';
});

function isMobileDevice() {
Expand Down
162 changes: 144 additions & 18 deletions projects.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,10 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weikang Kong | Projects</title>
<link rel="stylesheet" href="/projects/styles.css?v=<?php echo time(); ?>">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css">
<style>
.fancybox-bg {background: rgba(238, 232, 215, 1) !important;}
</style>
</head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GT-MJKS9GP9"></script>
Expand Down Expand Up @@ -61,7 +65,7 @@ <h3 data-change-page-title="" style="font-size: 2em; color: #fff;">Projects</h3>
<p class="links"><a href="projects/Portfolio - Weikang Kong.pdf" target="_blank" id="portfolio">Portfolio</a></p>
</div>
<div class="footer">
<div class="back-button hidden" onclick="showAll()" id="back">
<div class="back-button d-fade-out" onclick="showAll()" id="back">
< Back to Menu
</div>
<br>
Expand Down Expand Up @@ -147,7 +151,7 @@ <h3 class="fade-row">Architectural Design</h3>
<div class="project">
<div class="image-container">
<div class="image-border">
<div class="image-frame" style="background-image: url('/projects/assets/thumb/image1.png');"></div>
<div class="image-frame" style="background-image: url('/projects/water/Model1.jpg');"></div>
</div>
<div class="corners">
<div class="corner top-left" style="top: 0px; left: 0px; border-left: 2px solid var(--color-cornor); border-top: 2px solid var(--color-cornor);"></div>
Expand All @@ -156,9 +160,9 @@ <h3 class="fade-row">Architectural Design</h3>
<div class="corner bottom-right" style="bottom: 0px; right: 0px; border-right: 2px solid var(--color-cornor); border-bottom: 2px solid var(--color-cornor);"></div>
</div>
<div class="caption">
<a href="#">
<span class="date">Design - 5/2024</span>
<h4>Neo-Tokyo's Haven: Unveiling the Pinnacle of Urban Shelter</h4>
<a onclick="showDescription('water')" id="water_read">
<span class="date">4/2023 - 6/2023</span>
<h4>Under Water Pressure: Sports complex</h4>
</a>
</div>
</div>
Expand Down Expand Up @@ -189,23 +193,145 @@ <h4>Neo-Tokyo's Haven: Unveiling the Pinnacle of Urban Shelter</h4>
</div>
</div>

<!-- Project1 项目介绍 -->
<div class="description-container hidden" id="scooter">
<h2>Scooter</h2>
<img src="/projects/assets/thumb/image1.png" alt="Greenspace Test Image" />
<p>This is a detailed description of the greenspace test project. It explores various aspects of urban green space development.</p>
</div>

<!-- Neo-Tokyo's Haven 项目介绍 -->
<div class="description-container hidden" id="description2">
<h2>Neo-Tokyo's Haven</h2>
<img src="/projects/assets/thumb/image1.png" alt="Neo-Tokyo's Haven Image" />
<p>This project explores the design of urban shelters in Neo-Tokyo. It focuses on sustainability and urban resilience.</p>
<!-- Project1 项目介绍 -->
<div class="description-container d-fade-out hidden" id="scooter">
<div class="description-column">
<h2>Scooter</h2>
<p>这里是左侧的内容，可以放置文字、图片或者其他元素。</p>
</div>
<div class="description-column">
<h2>中间内容</h2>
<p>这里是中间的内容，可以放置文字、图片或者其他元素。</p>
</div>
<div class="description-column">
<h2>右侧内容</h2>
<img class = "des-image-full" src="/projects/assets/thumb/image1.png" alt="Greenspace Test Image" />
</div>
</div>

<!-- Project2 项目介绍 -->
<div class="description-container d-fade-out hidden " id="description2">
<h2>Neo-Tokyo's Haven</h2>
<img src="/projects/assets/thumb/image1.png" alt="Neo-Tokyo's Haven Image" />
<p>This project explores the design of urban shelters in Neo-Tokyo. It focuses on sustainability and urban resilience.</p>
</div>

<!-- Water 项目介绍 -->
<div class="description-container d-fade-out hidden" id="water">
<div class="description-column">
<p class="title">Under Water Pressure: Sports Complex</p>
<p class="left-text">The existing swimming pool and gym at Tongji University can no longer meet the growing and diverseactivity needs of students. This design proposes the reconslruction of a sports complex on the original site,integrating various sports facilities and student organizafion spaces. The strict area and height requirementsfor sports venues make vertical stacking and large spans inevilable. The design introduces an innovative lever-like structural approach, elevating the pool to enhance the swimming experience while organizingclub activities within the structure, achieving an highly open ground level and spatial integrafion.</p>
<p class="left-text-small"><br><br><br><br></p>
<p class="left-text-small"><strong>Time:</strong> 04/2023 - 06/2023</p>
<p class="left-text-small"><strong>Author:</strong> Weikang Kong, Zhenyuan Zhang, Yanzi Jin, Mengfei Zhao</p>
<p class="left-text-small"><strong>Site location:</strong> Tongji University</p>
</div>
<div class="description-column">
<a href="/projects/water/Concept.png" data-fancybox="water_b" data-caption="">
<img class = "des-image-full" src="/projects/water/thumb/Concept.png" alt="Image">
</a>
<p class="description-text">Requirements and Design logic</p>

<a href="/projects/water/Function Explosion.jpg" data-fancybox="water_b" data-caption="">
<img class = "des-image-full" src="/projects/water/thumb/Function Explosion.jpg" alt="Image">
</a>
<p class="description-text">Functions</p>

<a href="/projects/water/Structure.jpg" data-fancybox="water_b" data-caption="">
<img class = "des-image-full" src="/projects/water/thumb/Structure.jpg" alt="Image">
</a>
<p class="description-text">Structures</p>

<a href="/projects/water/1F Plan.jpg" data-fancybox="water_b" data-caption="">
<img class = "des-image-full" src="/projects/water/thumb/1F Plan.jpg" alt="Image">
</a>
<p class="description-text">1F Plan</p>

<a href="/projects/water/2F Plan.jpg" data-fancybox="water_b" data-caption="">
<img class = "des-image-full" src="/projects/water/thumb/2F Plan.jpg" alt="Image">
</a>
<p class="description-text">2F Plan</p>

<a href="/projects/water/3F Plan.jpg" data-fancybox="water_b" data-caption="">
<img class = "des-image-full" src="/projects/water/thumb/3F Plan.jpg" alt="Image">
</a>
<p class="description-text">3F Plan</p>

<a href="/projects/water/4F&5F Plan.jpg" data-fancybox="water_b" data-caption="">
<img class = "des-image-full" src="/projects/water/thumb/4F&5F Plan.jpg" alt="Image">
</a>
<p class="description-text">4F&5F Plan</p>
</div>
<div class="description-column">
<a href="/projects/water/Model1.jpg" data-fancybox="water_a" data-caption="">
<img class = "des-image-full" src="/projects/water/thumb/Model1.jpg" alt="Image">
</a>
<p class="description-text">Structure Model 1</p>

<a href="/projects/water/Model2.jpg" data-fancybox="water_a" data-caption="">
<img class = "des-image-full" src="/projects/water/thumb/Model2.jpg" alt="Image">
</a>
<p class="description-text">Structure Model 2</p>

<a href="/projects/water/Persepctive0.jpg" data-fancybox="water_a" data-caption="">
<img class = "des-image-full" src="/projects/water/thumb/Persepctive0.jpg" alt="Image">
</a>
<p class="description-text">Persepctive: Entrance</p>

<a href="/projects/water/Persepctive3.jpg" data-fancybox="water_a" data-caption="">
<img class = "des-image-full" src="/projects/water/thumb/Persepctive3.jpg" alt="Image">
</a>
<p class="description-text">Persepctive: The first floor</p>

<div class="image-row">
<a href="/projects/water/Persepctive1.jpg" data-fancybox="water_a" data-caption="">
<img class="des-image-half" src="/projects/water/Persepctive1.jpg" alt="Image">
</a>
<a href="/projects/water/Persepctive2.jpg" data-fancybox="water_a" data-caption="">
<img class="des-image-half" src="/projects/water/Persepctive2.jpg" alt="Image">
</a>
</div>
<p class="description-text">Persepctive: Swimming pool</p>

<a href="/projects/water/Persepctive4.jpg" data-fancybox="water_a" data-caption="">
<img class = "des-image-full" src="/projects/water/thumb/Persepctive4.jpg" alt="Image">
</a>
<p class="description-text">Persepctive: Badminton court</p>

<a href="/projects/water/Persepctive5.jpg" data-fancybox="water_a" data-caption="">
<img class = "des-image-full" src="/projects/water/thumb/Persepctive5.jpg" alt="Image">
</a>
<p class="description-text">Persepctive: Club activity spaces</p>

<a href="/projects/water/Persepctive6.jpg" data-fancybox="water_a" data-caption="">
<img class = "des-image-full" src="/projects/water/thumb/Persepctive6.jpg" alt="Image">
</a>
<p class="description-text">Persepctive: View from the second floor</p>
</div>
</div>
</div>
</div>
</div>
<script src="open.js"></script>
<script src="/projects/monitor.js"></script>
<script src="/projects/script.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
<script>
$(document).ready(function() {
$.fancybox.defaults.buttons = ['close'];
$.fancybox.defaults.caption = false;
$.fancybox.defaults.loop = true;
$("[data-fancybox]").fancybox({
touch: false,
baseClass: 'custom-fancybox',
afterShow: function(instance, current) {
document.body.style.overflow = '';
},
afterClose: function(instance, current) {
window.scrollTo(scrollPosition.left, scrollPosition.top);
}
});
});
</script>
</body>
</html>
10 changes: 10 additions & 0 deletions projects/monitor.js
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
const content = document.querySelector('.right-column');

document.getElementById('portfolio').addEventListener('click', function() {
gtag('event', 'Portfolio_download', {
'event_category': 'download',
Expand All @@ -12,4 +14,12 @@ document.getElementById('scooter_read').addEventListener('click', function() {
'event_label': 'scooter_read',
'value': 1
});
});

document.getElementById('water_read').addEventListener('click', function() {
gtag('event', 'water_read', {
'event_category': 'read',
'event_label': 'water_read',
'value': 1
});
});
64 changes: 32 additions & 32 deletions projects/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,51 +48,51 @@ specificLinks.forEach(link => {
});

function showDescription(descriptionId) {
// 隐藏项目列表
document.querySelector('.project-list').classList.remove('d-fade-in');
document.querySelector('.project-list').classList.add('d-fade-out');
document.getElementById('back').classList.add('d-fade-out');

// 隐藏所有描述内容
document.querySelectorAll('.description-container').forEach(description => {
description.classList.add('hidden');
description.classList.add('d-fade-out'); // 确保所有描述内容的 fade-in 类被移除
});

// 先移除 hidden 类，让元素变得可见，但不会立即触发过渡
// step1: 隐藏项目列表
const projectList = document.querySelector('.project-list');
projectList.classList.remove('d-fade-in');
projectList.classList.add('d-fade-out');
setTimeout(() => {
document.getElementById('back').classList.remove('hidden');

const descriptionElement = document.getElementById(descriptionId);
descriptionElement.classList.remove('hidden');
projectList.style.display = 'none';
document.querySelector('.right-column').style.overflow = 'hidden';
document.querySelector('.right-column').style.marginLeft = '15%';
document.querySelector('.right-column').style.width = '85%';
}, 500); // 动画过渡后关闭项目列表，修改属性

// 通过一个额外的短暂延迟，给浏览器时间应用显示后的状态，再触发渐入效果
setTimeout(() => {
document.getElementById('back').classList.remove('d-fade-out');
descriptionElement.classList.remove('d-fade-out');
descriptionElement.classList.add('d-fade-in');
document.getElementById('back').classList.add('d-fade-in');
}, 50); // 16ms ~ 50ms 是一帧的时间
}, 500);
// step2: 在上一步结束后开始显示描述内容
const descriptionElement = document.getElementById(descriptionId);
setTimeout(() => {
document.getElementById('back').classList.remove('d-fade-out');
document.getElementById('back').classList.add('d-fade-in');
descriptionElement.scrollIntoView({ behavior: 'auto', block: 'start' });
descriptionElement.classList.remove('hidden', 'd-fade-out'); // 恢复显示，移除动画
descriptionElement.classList.add('d-fade-in'); // 添加渐入动画
}, 500); // 确保与项目列表隐藏动画同步
}

function showAll() {
// 隐藏描述内容
// step1: 隐藏描述内容(先播动画)
document.querySelectorAll('.description-container').forEach(description => {
description.classList.remove('d-fade-in');
description.classList.add('d-fade-out');
});

document.getElementById('back').classList.remove('d-fade-in');
document.getElementById('back').classList.add('d-fade-out');

// 显示项目列表
setTimeout(() => {
document.getElementById('back').classList.add('hidden');
document.querySelector('.project-list').classList.remove('d-fade-out');
document.querySelector('.project-list').classList.add('d-fade-in');
document.querySelectorAll('.description-container').forEach(description => {
description.classList.add('hidden');
description.classList.add('hidden'); // 完全移除元素，避免占用空间
});
}, 500);
}, 500); // 与渐出动画同步

// step2: 显示项目列表
const projectList = document.querySelector('.project-list');
projectList.style.display = 'block'; // 恢复显示项目列表
setTimeout(() => {
document.querySelector('.right-column').style.overflow ='auto';
document.querySelector('.right-column').style.marginLeft = '20%';
document.querySelector('.right-column').style.width = '80%';
projectList.classList.remove('d-fade-out');
projectList.classList.add('d-fade-in');
}, 500); // 播放动画
}
Loading

0 comments on commit f071993

Please sign in to comment.