Weitzman-MUSA-JavaScript · YaohanXu · Dec 10, 2024 · Dec 10, 2024 · Dec 10, 2024 · Dec 10, 2024
diff --git a/about.html b/about.html
@@ -0,0 +1,233 @@
+<!DOCTYPE html>
+
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <!-- Responsive design for different devices -->
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <title>About - Yaohan Xu</title>
+
+    <!-- Link to Google fonts -->
+    <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=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
+    <!-- Link to CSS file -->
+    <link rel="stylesheet" href="css/about.css">
+    <!-- Link to favicon -->
+    <link rel="icon" href="img/favicon.svg" type="image/x-icon">
+  </head>
+
+  <body>
+    <main>
+      <!-- Add a header and a navigation bar -->
+      <header class="page-header">
+        <h1>Yaohan Xu</h1>
+        <nav class="page-navigator">
+          <ul class="page-name-list">
+            <li class="page-name"><a href="index.html">Projects</a></li>
+            <li class="page-name"><a href="comments.html">Comments</a></li>
+            <li class="page-name"><a href="about.html">About</a></li>
+          </ul>
+        </nav>
+      </header>
+
+      <!-- Add a main content section -->
+      <section class="main-content">
+        <div class="section-header">
+          <div class="introduction-part">
+            <div class="title-part">
+              <h2>About Me</h2>
+              <button class="view-resume-button">
+                <img src="img/resume-icon.svg" class="resume-icon" alt="Resume Icon">
+                <span>View My Resume</span>
+              </button>
+            </div>
+            <p>I specialize in city and transportation planning, with a focus on smart cities and data-driven solutions. Combining expertise in product and interaction design, I create intuitive digital platforms to enhance urban living and connectivity.</p>
+          </div>
+          <img src="img/photo.jpg" class="photo-part" alt="Yaohan Xu Photo">
+        </div>
+
+        <div class="personal-experience">
+          <ul class="experience-type">
+            <li class="experience-education">
+              <h3>EDUCATION</h3>
+              <ul class="experience-item">
+                <li class="item-one">
+                  <div class="experience-title">
+                    <h4>UNIVERSITY OF PENNSYLVANIA | Weitzman School of Design</h4>
+                    <span class="experience-time">2023 - 2025</span>
+                  </div>
+                  <span class="experience-subtitle">Master of City Planning with a Transportation Planning Concentration</span>
+                  <p class="experience-description">
+                    2-year professional degree | Philadelphia, USA
+                  </p>
+                  <p class="experience-description">
+                    GPA: 3.88/4.00
+                  </p>
+                </li>
+                <li class="item-two">
+                  <div class="experience-title">
+                    <h4>SOUTHEAST UNIVERSITY | School of Architecture</h4>
+                    <span class="experience-time">2017 - 2022</span>
+                  </div>
+                  <span class="experience-subtitle">Bachelor of Engineering in Landscape Architecture</span>
+                  <p class="experience-description">
+                    5-year professional degree | Nanjing, CN
+                  </p>
+                  <p class="experience-description">
+                    GPA: 3.92/4.00, 89.64/100 (ranking 1/28)
+                  </p>
+                </li>
+              </ul>
+            </li>
+            <li class="experience-employment">
+              <h3>EMPLOYMENT</h3>
+              <ul class="experience-item">
+                <li class="item-one">
+                  <div class="experience-title">
+                    <h4>SHURONG DATA TECHNOLOGY CO., LTD. | Shanghai Office</h4>
+                    <span class="experience-time">Jun.- Aug. 2024</span>
+                  </div>
+                  <span class="experience-subtitle">Product Design and Data Analysis Intern</span>
+                  <p class="experience-description">
+                    UI design and data indicator organization and analysis for the Yangpu District Comprehensive Transportation Information Platform.
+                  </p>
+                  <p class="experience-description">
+                    Yangpu District High Passenger Flow Project: Demand Forecasting Based on the LSTM Model.
+                  </p>
+                </li>
+                <li class="item-two">
+                  <div class="experience-title">
+                    <h4>SWA GROUP | Shanghai Office</h4>
+                    <span class="experience-time">Jan.- Apr. 2022</span>
+                  </div>
+                  <span class="experience-subtitle">Landscape Design Intern</span>
+                  <p class="experience-description">
+                    Led design competition for Suzhou creek and supported Guangzhou shipyard (Built).
+                  </p>
+                  <p class="experience-description">
+                    Researched, designed and produced drawings for Hangzhou Xiaoshan Technology City and Zhuguang Lijiao #1 Park.
+                  </p>
+                </li>
+              </ul>
+            </li>
+            <li class="experience-awards">
+              <h3>AWARDS</h3>
+              <ul class="experience-item">
+                <li class="item-one">
+                  <div class="experience-title">
+                    <h4>China National Scholarship | Ministry of Education of China PRC</h4>
+                    <span class="experience-time">Dec. 2019</span>
+                  </div>
+                  <p class="experience-description">
+                    Awarded to 0.2% of undergraduates, merit-based.
+                  </p>
+                </li>
+                <li class="item-two">
+                  <div class="experience-title">
+                    <h4>Gold Smart Scholarship | Education Foundation of SEU</h4>
+                    <span class="experience-time">Jun. 2021</span>
+                  </div>
+                  <p class="experience-description">
+                    Awarded to one student per year, merit-based.
+                  </p>
+                </li>
+                <li class="item-three">
+                  <div class="experience-title">
+                    <h4>Minyu Alumni Award Fund | Education Foundation of SEU</h4>
+                    <span class="experience-time">Jun. 2019</span>
+                  </div>
+                  <p class="experience-description">
+                    Awarded to five students per year, merit-based.
+                  </p>
+                </li>
+              </ul>
+            </li>
+            <li class="experience-softwares">
+              <h3>SOFTWARES</h3>
+              <ul class="experience-item">
+                <li class="item-one">
+                  <div class="experience-title">
+                    <h4>Programming Language</h4>
+                    <span class="experience-time">2023-2025</span>
+                  </div>
+                  <span class="experience-subtitle">Python | R Language | Java Script</span>
+                  <p class="experience-description">
+                    Proficient in using Python and R for data cleaning and analysis, with expertise in various geospatial analyses and modeling.
+                  </p>
+                  <p class="experience-description">
+                    Familiar with spatial optimization models and have a solid understanding of machine learning.
+                  </p>
+                  <p class="experience-description">
+                    Experienced with frontend frameworks.
+                  </p>
+                </li>
+                <li class="item-two">
+                  <div class="experience-title">
+                    <h4>Graphic and Product Design</h4>
+                    <span class="experience-time">2017-2025</span>
+                  </div>
+                  <span class="experience-subtitle">Adobe Creative Suite | Figma | MockingBot</span>
+                  <p class="experience-description">
+                    Proficient in tools like Adobe Creative Suite (Photoshop, Illustrator, InDesign) for graphic design and Figma for user interface design. Experienced in creating wireframes, prototypes, and user flows for digital products. Familiar with front-end design frameworks and spatial data visualization tools to integrate design with technical functionalities effectively.
+                  </p>
+                </li>
+                <li class="item-three">
+                  <div class="experience-title">
+                    <h4>Other Types</h4>
+                    <span class="experience-time">2017-2025</span>
+                  </div>
+                  <span class="experience-subtitle">Microsoft Office Suite | ArGIS | Rhinoceros | VISUM | VISSIM | CAD</span>
+                  <p class="experience-description">
+                    Proficient in Microsoft Office Suite (Word, Excel, PowerPoint) for documentation, data analysis, and presentations. Skilled in ArcGIS for spatial data analysis and mapping. Experienced with Rhinoceros for 3D modeling and design, and CAD for technical drafting. Familiar with transportation modeling tools like VISUM and VISSIM for traffic flow analysis and simulation.
+                  </p>
+                </li>
+              </ul>
+            </li>
+            <li class="experience-language">
+              <h3>LANGUAGE</h3>
+              <ul class="experience-item">
+                <li class="item-one">
+                  <div class="experience-title">
+                    <h4>College English Test Band 6</h4>
+                    <span class="experience-time">Mar. 2018</span>
+                  </div>
+                  <p class="experience-description">
+                    600
+                  </p>
+                </li>
+                <li class="item-two">
+                  <div class="experience-title">
+                    <h4>TOEFL (Test of English as a Foreign Language)</h4>
+                    <span class="experience-time">Apr. 2021</span>
+                  </div>
+                  <p class="experience-description">
+                    101 (R 26 L 28 S 23 W 24)
+                  </p>
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </div>
+      </section>
+    </main>
+
+    <!-- Add a footer for contact information -->
+    <footer class="contact-information">
+      <span class="email">xuyaohan99@gmail.com</span>
+      <span class="phone">+1 267-777-3513</span>
+      <span class="address">3600 Chestnut St, Philadelphia</span>
+    </footer>
+
+    <!-- Add a popup overlay for the resume -->
+    <div class="popup-overlay" id="popup-overlay">
+      <div class="popup-content">
+        <img src="img/resume.jpg" alt="Yaohan Xu Resume" class="popup-image">
+      </div>
+    </div>
+
+    <!-- Link to JS file -->
+    <script type="module" src="js/about.js"></script>
+  </body>
+</html>
diff --git a/assets/project_1/Description_1.txt b/assets/project_1/Description_1.txt
@@ -0,0 +1 @@
+The project introduces a participatory planting framework that actively involves local residents in the ecological restoration process, providing guidelines for selecting native plant species that are resilient to mountain conditions while fostering community ownership and long-term stewardship of the restored landscapes.
diff --git a/assets/project_1/Description_2.txt b/assets/project_1/Description_2.txt
@@ -0,0 +1 @@
+Temporary but essential canopy bridges, made of lightweight, eco-friendly materials like ropes and suspended platforms, are installed to connect isolated forest patches, providing sloths with immediate, safe passageways while natural vegetation gradually regenerates to create long-term solutions.
diff --git a/assets/project_1/Description_3.txt b/assets/project_1/Description_3.txt
@@ -0,0 +1 @@
+By revitalizing riparian zones with native vegetation along riverbanks, the project creates natural corridors that serve as pathways for sloths, simultaneously enhancing biodiversity, protecting water resources, and allowing gradual rewilding of degraded areas into thriving ecosystems.
diff --git a/assets/project_1/Description_4.txt b/assets/project_1/Description_4.txt
@@ -0,0 +1 @@
+To mitigate the impact of human activities on sloth habitats, eco-engineered solutions such as insulated power lines, tree-lined road crossings, and strategically placed warning signs are implemented, reducing mortality rates while allowing for safe coexistence between urban development and wildlife movement.
diff --git a/assets/project_1/Description_5.txt b/assets/project_1/Description_5.txt
@@ -0,0 +1 @@
+Local communities play a critical role in designing, maintaining, and monitoring habitat corridors, fostering stewardship while facilitating the transition from human-created pathways to self-sustaining, naturalized forests that support sloth mobility across diverse landscapes.
diff --git a/assets/project_1/Description_6.txt b/assets/project_1/Description_6.txt
@@ -0,0 +1 @@
+In the project's final phase, previously fragmented habitats are seamlessly reconnected into continuous, self-sustaining ecosystems, where mature canopies and dense vegetation enable sloths to traverse naturally and freely without reliance on human intervention, restoring ecological harmony in key habitat zones.
diff --git a/assets/project_1/Image_1.jpg b/assets/project_1/Image_1.jpg
diff --git a/assets/project_1/Image_2.jpg b/assets/project_1/Image_2.jpg
diff --git a/assets/project_1/Image_3.jpg b/assets/project_1/Image_3.jpg
diff --git a/assets/project_1/Image_4.jpg b/assets/project_1/Image_4.jpg
diff --git a/assets/project_1/Image_5.jpg b/assets/project_1/Image_5.jpg
diff --git a/assets/project_1/Image_6.jpg b/assets/project_1/Image_6.jpg
diff --git a/assets/project_1/cover.jpg b/assets/project_1/cover.jpg
diff --git a/assets/project_10/cover.jpg b/assets/project_10/cover.jpg
diff --git a/assets/project_11/cover.jpg b/assets/project_11/cover.jpg
diff --git a/assets/project_12/cover.jpg b/assets/project_12/cover.jpg
diff --git a/assets/project_13/cover.jpg b/assets/project_13/cover.jpg
diff --git a/assets/project_14/cover.jpg b/assets/project_14/cover.jpg
diff --git a/assets/project_15/cover.jpg b/assets/project_15/cover.jpg
diff --git a/assets/project_16/cover.jpg b/assets/project_16/cover.jpg
diff --git a/assets/project_17/cover.jpg b/assets/project_17/cover.jpg
diff --git a/assets/project_18/cover.jpg b/assets/project_18/cover.jpg
diff --git a/assets/project_2/Description_1.txt b/assets/project_2/Description_1.txt
@@ -0,0 +1 @@
+In the early stages of the project, carefully planned reforestation efforts involve planting native tree species in linear arrangements to create artificial corridors, ensuring sloths can traverse safely between fragmented habitats while reducing exposure to ground-level threats such as predators and human infrastructure.
diff --git a/assets/project_2/Description_2.txt b/assets/project_2/Description_2.txt
@@ -0,0 +1 @@
+By integrating scientific planting guidelines with the traditional knowledge of local communities, the project transforms abandoned mine sites into thriving ecosystems, where native plants not only restore soil health and biodiversity but also reconnect residents to the land through hands-on engagement.
diff --git a/assets/project_2/Description_3.txt b/assets/project_2/Description_3.txt
@@ -0,0 +1 @@
+A flexible planting strategy is developed to address the unique environmental challenges of mountain architecture, replacing conventional methods with site-specific approaches that prioritize erosion control, native vegetation recovery, and sustainable land management through active community participation.
diff --git a/assets/project_2/Description_4.txt b/assets/project_2/Description_4.txt
@@ -0,0 +1 @@
+The project reimagines post-mine landscapes as opportunities for ecological and social renewal, creating a blueprint where degraded mountain areas are restored through collaborative planting activities, resulting in a greener, more resilient environment that benefits both local ecosystems and the community.
diff --git a/assets/project_2/Image_1.jpg b/assets/project_2/Image_1.jpg
diff --git a/assets/project_2/Image_2.jpg b/assets/project_2/Image_2.jpg
diff --git a/assets/project_2/Image_3.jpg b/assets/project_2/Image_3.jpg
diff --git a/assets/project_2/Image_4.jpg b/assets/project_2/Image_4.jpg
diff --git a/assets/project_2/cover.jpg b/assets/project_2/cover.jpg
diff --git a/assets/project_3/Description_1.txt b/assets/project_3/Description_1.txt
@@ -0,0 +1 @@
+The project reimagines the traditional prison layout by breaking physical and social barriers, creating shared spaces where inmates, the community, and the Neighborhood Association can interact in structured and meaningful ways, fostering mutual understanding and cooperation.
diff --git a/assets/project_3/Description_2.txt b/assets/project_3/Description_2.txt
@@ -0,0 +1 @@
+The design prioritizes open yet secure architectural elements, replacing isolation with connection, where educational programs, workshops, and shared green spaces act as bridges between the prison and the community, redefining boundaries to achieve social harmony and reintegration.
diff --git a/assets/project_3/Description_3.txt b/assets/project_3/Description_3.txt
@@ -0,0 +1 @@
+By establishing a coexistence model rooted in transparency and collaboration, the project encourages the integration of correctional facilities into the urban fabric, promoting shared responsibility, social acceptance, and opportunities for rehabilitated individuals to reintegrate into society.
diff --git a/assets/project_3/Description_4.txt b/assets/project_3/Description_4.txt
@@ -0,0 +1 @@
+Through the innovative design of multipurpose areas, the prison becomes a platform for dialogue, enabling diverse groups—including inmates, local residents, and community organizations—to share ideas, host activities, and contribute to a more inclusive and rehabilitative environment.
diff --git a/assets/project_3/Image_1.jpg b/assets/project_3/Image_1.jpg
diff --git a/assets/project_3/Image_2.jpg b/assets/project_3/Image_2.jpg
diff --git a/assets/project_3/Image_3.jpg b/assets/project_3/Image_3.jpg
diff --git a/assets/project_3/Image_4.jpg b/assets/project_3/Image_4.jpg
diff --git a/assets/project_3/cover.jpg b/assets/project_3/cover.jpg
diff --git a/assets/project_4/Description_1.txt b/assets/project_4/Description_1.txt
@@ -0,0 +1 @@
+The project reshapes farmland into a dynamic landscape where natural processes like flooding are embraced and managed, allowing diverse user activities to coexist harmoniously with ecological systems while safeguarding the land for future environmental changes.
diff --git a/assets/project_4/Description_2.txt b/assets/project_4/Description_2.txt
@@ -0,0 +1 @@
+Through innovative topography and sustainable land management practices, the design creates a flood-resilient environment that not only mitigates water-related risks but also enhances biodiversity, offering users interactive and adaptable spaces for work and recreation.
diff --git a/assets/project_4/Description_3.txt b/assets/project_4/Description_3.txt
@@ -0,0 +1 @@
+By integrating varied terrains and flexible design elements, the project allows users to freely engage in activities such as farming, leisure, and community gatherings, while ensuring the land remains functional and productive during both dry and flood-prone seasons.
diff --git a/assets/project_4/Description_4.txt b/assets/project_4/Description_4.txt
@@ -0,0 +1 @@
+The project transforms traditional farmland into diverse, multi-functional waterfront terrains that blend natural beauty with resilience, providing spaces for recreation, agriculture, and ecological preservation while preparing for future flooding through adaptive design strategies.
diff --git a/assets/project_4/Image_1.jpg b/assets/project_4/Image_1.jpg
diff --git a/assets/project_4/Image_2.jpg b/assets/project_4/Image_2.jpg
diff --git a/assets/project_4/Image_3.jpg b/assets/project_4/Image_3.jpg
diff --git a/assets/project_4/Image_4.jpg b/assets/project_4/Image_4.jpg
diff --git a/assets/project_4/cover.jpg b/assets/project_4/cover.jpg
diff --git a/assets/project_5/cover.jpg b/assets/project_5/cover.jpg
diff --git a/assets/project_6/cover.jpg b/assets/project_6/cover.jpg
diff --git a/assets/project_7/cover.jpg b/assets/project_7/cover.jpg
diff --git a/assets/project_8/cover.jpg b/assets/project_8/cover.jpg
diff --git a/assets/project_9/cover.jpg b/assets/project_9/cover.jpg
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		The project introduces a participatory planting framework that actively involves local residents in the ecological restoration process, providing guidelines for selecting native plant species that are resilient to mountain conditions while fostering community ownership and long-term stewardship of the restored landscapes.
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		Temporary but essential canopy bridges, made of lightweight, eco-friendly materials like ropes and suspended platforms, are installed to connect isolated forest patches, providing sloths with immediate, safe passageways while natural vegetation gradually regenerates to create long-term solutions.
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		By revitalizing riparian zones with native vegetation along riverbanks, the project creates natural corridors that serve as pathways for sloths, simultaneously enhancing biodiversity, protecting water resources, and allowing gradual rewilding of degraded areas into thriving ecosystems.
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		To mitigate the impact of human activities on sloth habitats, eco-engineered solutions such as insulated power lines, tree-lined road crossings, and strategically placed warning signs are implemented, reducing mortality rates while allowing for safe coexistence between urban development and wildlife movement.
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		Local communities play a critical role in designing, maintaining, and monitoring habitat corridors, fostering stewardship while facilitating the transition from human-created pathways to self-sustaining, naturalized forests that support sloth mobility across diverse landscapes.
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		In the project's final phase, previously fragmented habitats are seamlessly reconnected into continuous, self-sustaining ecosystems, where mature canopies and dense vegetation enable sloths to traverse naturally and freely without reliance on human intervention, restoring ecological harmony in key habitat zones.
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		In the early stages of the project, carefully planned reforestation efforts involve planting native tree species in linear arrangements to create artificial corridors, ensuring sloths can traverse safely between fragmented habitats while reducing exposure to ground-level threats such as predators and human infrastructure.
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		By integrating scientific planting guidelines with the traditional knowledge of local communities, the project transforms abandoned mine sites into thriving ecosystems, where native plants not only restore soil health and biodiversity but also reconnect residents to the land through hands-on engagement.
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		A flexible planting strategy is developed to address the unique environmental challenges of mountain architecture, replacing conventional methods with site-specific approaches that prioritize erosion control, native vegetation recovery, and sustainable land management through active community participation.
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		The project reimagines post-mine landscapes as opportunities for ecological and social renewal, creating a blueprint where degraded mountain areas are restored through collaborative planting activities, resulting in a greener, more resilient environment that benefits both local ecosystems and the community.