fern genda chen updates

work/chen-feng/index.html

@@ -74,7 +74,6 @@ <h2>The Future of Hotpot Delivery: Drone Delivery as Just One of the Many Future
             <p>While drone delivery faces challenges like distance limits and weather conditions, it offers clear advantages over traditional methods. Drones reduce delivery time, cut costs, and maintain food quality, making them a more efficient option for hotpot delivery.</p>
             <p>The Future Potential of Drone Delivery</p>
             <p>Drone delivery is poised to revolutionize the food industry. With advancing technology, it will overcome current limitations, expand to more food types, and create smarter, automated delivery networks, shaping the future of food delivery.</p>
-            <img src="Data/Photos/Future.png" alt="Description of the image" class="story-chapter1-image">
         </div>
         <div id="chapter-11" class="chapter">
             <h2>Producer: Columbia_University_GSAPP2024 Chen_Feng</h2>

work/chen-feng/main.js

@@ -37,15 +37,15 @@ map.on('load', () => {
 
 const chapters = {
     'chapter-1': { center: [-73.74, 40.711], zoom: 10.18, bearing: 0, pitch: 0 },
-    'chapter-2': { center: [-73.77, 40.7], zoom: 10.5, bearing: 0, pitch: 0 },
-    'chapter-3': { center: [-73.77, 40.7], zoom: 10.5, bearing: 0, pitch: 0 },
-    'chapter-4': { center: [-73.77, 40.7], zoom: 10.5, bearing: 0, pitch: 0 },
-    'chapter-5': { center: [-73.84809, 40.72622], zoom: 12.82, bearing: 35.2, pitch: 73.5 },
-    'chapter-6': { center: [-73.77, 40.7], zoom: 10.5, bearing: 0, pitch: 0 },
-    'chapter-7': { center: [-73.77, 40.7], zoom: 10.5, bearing: 0, pitch: 0 },
-    'chapter-8': { center: [-73.77, 40.7], zoom: 10.5, bearing: 0, pitch: 0 },
-    'chapter-9': { center: [-73.77, 40.7], zoom: 10.5, bearing: 0, pitch: 0 },
-    'chapter-10': { center: [-74.27942, 39.06451], zoom: 3.5, bearing: 0, pitch: 5 },
+    'chapter-2': { center: [-73.79, 40.725], zoom: 10.43, bearing: 0, pitch: 0 },
+    'chapter-3': { center: [-73.79, 40.725], zoom: 10.43, bearing: 0, pitch: 0 },
+    'chapter-4': { center: [-73.79, 40.725], zoom: 10.43, bearing: 0, pitch: 0 },
+    'chapter-5': { center: [-73.95309, 40.72622], zoom: 12.82, bearing: 35.2, pitch: 73.5 },
+    'chapter-6': { center: [-73.79, 40.725], zoom: 10.43, bearing: 0, pitch: 0 },
+    'chapter-7': { center: [-73.79, 40.725], zoom: 10.43, bearing: 0, pitch: 0 },
+    'chapter-8': { center: [-73.79, 40.725], zoom: 10.43, bearing: 0, pitch: 0 },
+    'chapter-9': { center: [-73.79, 40.725], zoom: 10.43, bearing: 0, pitch: 0 },
+    'chapter-10': { center: [-74.27942, 39.06451], zoom: 3.3, bearing: 0, pitch: 5 },
     'chapter-11': { center: [100, 33], zoom: 1.5, bearing: 0, pitch: 0 },
 };
 

work/fern-itthisang/index.html

@@ -6,6 +6,22 @@
     <title>VocaLocal</title>
     <link href="https://fonts.googleapis.com/css2?family=Jersey+20&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="style/style.css"> 
+
+    <script type="importmap">
+        {
+            "imports": {
+              "three": "https://unpkg.com/[email protected]/build/three.module.js",
+              "three/addons/controls/OrbitControls.js": "https://unpkg.com/[email protected]/examples/jsm/controls/OrbitControls.js",
+              "three/addons/loaders/FontLoader.js": "https://unpkg.com/[email protected]/examples/jsm/loaders/FontLoader.js",
+              "three/addons/geometries/TextGeometry.js": "https://unpkg.com/[email protected]/examples/jsm/geometries/TextGeometry.js",
+              "three/examples/jsm/postprocessing/EffectComposer.js": "https://unpkg.com/[email protected]/examples/jsm/postprocessing/EffectComposer.js",
+              "three/examples/jsm/postprocessing/RenderPass.js": "https://unpkg.com/[email protected]/examples/jsm/postprocessing/RenderPass.js",
+              "three/examples/jsm/postprocessing/OutlinePass.js": "https://unpkg.com/[email protected]/examples/jsm/postprocessing/OutlinePass.js",
+              "three/examples/jsm/postprocessing/ShaderPass.js": "https://unpkg.com/[email protected]/examples/jsm/postprocessing/ShaderPass.js",
+              "three/examples/jsm/shaders/FXAAShader.js": "https://unpkg.com/[email protected]/examples/jsm/shaders/FXAAShader.js"
+            }
+        }
+    </script>
 </head>
 <body>
 <!-- Side Navigation -->
@@ -14,11 +30,11 @@
         <div class="nav-line current" data-title="VocaLocal"></div>
     </a>
     <a href="1.html">
-        <div class="nav-line" data-title="Work"></div>
-    </a>
-    <a href="2.html">
-        <div class="nav-line" data-title="Profile"></div>
+        <div class="nav-line" data-title="Archive"></div>
     </a>
+    <a href="https://www.fernitthisang.co/" target="_blank" rel="noopener noreferrer">
+        <div class="nav-line" data-title="About"></div>
+    </a>    
 </div>
 
 
@@ -34,20 +50,24 @@ <h3>Hear the Vibe, Feel the Culture</h3>
 <!-- First Story Section -->
 <div id="story1" class="story" style="display: none;">
     <video id="firstVideo">
-        <source src="asset/video/Sequence 01.mp4" type="video/mp4">
+        <source src="./asset/video/Sequence 01.mp4" type="video/mp4">
         Your browser does not support the video tag.
     </video>
 </div>
 
 <!-- End Story Section -->
-<div class ="quote">
+<div class="bg">
+<div class ="quote" id="endstory">
     <h3>Both serve delicious Thai food, but the vibes are worlds apart.</h3>
 </div>
+</div>
 
+<div class="bg">
 <div class ="quote">
     <h3>"It is the beauty of the dim, the subtle, and the elusive that we should aim for" </h3>
     <br><h4>- Jun'ichirō Tanizaki </h4>
 </div>
+</div>
 <div id="read">
 <h2>Before we start</h2>
 <div id="how">
@@ -61,7 +81,7 @@ <h4> Z Axis: Depth Position</h4>
 <br>
 <h4> Grid: Position Guideline</h4>
 <br>
-<h4> Hover/Press: Interact with the elements to dynamically play sound</h4>
+<h4> Hover/Press: Interact with <br>elements to play sound</h4>
 <br>
 </div>
 <div id="l">
@@ -82,15 +102,15 @@ <h3>China Town, Bangkok</h3>
     </div>
 </div>
 </div>
-
+<div class="bg">
 <div class ="quote">
     <h3>" We find beauty not in the thing itself but in the 
         patterns of shadows, the light and the darkness,
         that one thing against another creates." </h3>
         <br>
     <h4>- Jun'ichirō Tanizaki </h4>
 </div>
-
+</div>
 <!-- For story.js -->
 
     <div id="soundbackground"></div>
@@ -119,49 +139,56 @@ <h4>- Jun'ichirō Tanizaki </h4>
 
 
    <!-- For play.js -->
-<div id="title">
+
+<div class="quote" id="title">
     <h2>Step into the Vibrant World of Thai Street Food</h2>
     <h3>The sound player lets you craft a personalized playlist, 
         <br>capturing the essence of bustling and lively streets.<br></h3>
 </div>
 <div id="content">
     <div id="leftcontainer">
-        <h3>Visualize the Market</h3>
-        <p>Explore the layout and dynamics of a typical Thai street food.</p>    
+        <h3>Create Your Soundscape</h3>
+        <h4>Explore the layout and dynamics of a typical Thai street food.</h4>    
         <div id="threeContainer">
+            <p> Hover/Press at the bar</p>
         </div>
+
     </div>
     <div id="rightcontainer">
-        <h3>Create Your Soundscape</h3>
-        <p>Select and arrange sounds to build your own Thai street food soundscape.</p>
+        <h3>Visualization of selected sound</h3>
+        <h4>Explore the layout and dynamics of a typical Thai street food</h4>
         <div id="imageRow"></div>
         <div id="soundContainer">
         </div>
     </div>
 </div>
+<!-- Footer with Meta and Favicon Links -->
+
+<footer>
+    <meta name="description" content="Student work by Fern Itthisang from Colloquium 1 of the Columbia GSAPP CDP Program in 2024." />
+    <link rel="icon" href="https://gsapp-cdp.github.io/colloquium-1-2024/favicon.ico" sizes="any">
+    <link rel="icon" href="https://gsapp-cdp.github.io/colloquium-1-2024/favicon.svg" type="image/svg+xml">
+
+    <div class="left-content">
+        <h3><a href="https://www.arch.columbia.edu/" target="_blank">Columbia GSAPP</a></h3>
+        <h4><a href="https://www.arch.columbia.edu/programs/15-m-s-computational-design-practices">M.S. Computational Design Practices</a></h4>
+        <h4><a href="/">Home</a> → <a href="/work">Student Work</a> → Fern Itthisang</h4>
+    </div>
+
+    <nav>
+        <a href="/">Home</a>
+        <a href="/work">Student&nbsp;Work</a>
+        <a href="https://docs.google.com/document/d/1Qo6nrXenc5JgFhbh6s3mjOBXv6vVZ-D5daYAWId5BBY/edit?usp=drive_link" target="_blank">Syllabus</a>
+        <a href="/about">About</a>
+    </nav>
+  </footer>
+
 
-    <script type="importmap">
-        {
-            "imports": {
-              "three": "https://unpkg.com/[email protected]/build/three.module.js",
-              "three/addons/controls/OrbitControls.js": "https://unpkg.com/[email protected]/examples/jsm/controls/OrbitControls.js",
-              "three/addons/loaders/FontLoader.js": "https://unpkg.com/[email protected]/examples/jsm/loaders/FontLoader.js",
-              "three/addons/geometries/TextGeometry.js": "https://unpkg.com/[email protected]/examples/jsm/geometries/TextGeometry.js",
-              "three/examples/jsm/postprocessing/EffectComposer.js": "https://unpkg.com/[email protected]/examples/jsm/postprocessing/EffectComposer.js",
-              "three/examples/jsm/postprocessing/RenderPass.js": "https://unpkg.com/[email protected]/examples/jsm/postprocessing/RenderPass.js",
-              "three/examples/jsm/postprocessing/OutlinePass.js": "https://unpkg.com/[email protected]/examples/jsm/postprocessing/OutlinePass.js",
-              "three/examples/jsm/postprocessing/ShaderPass.js": "https://unpkg.com/[email protected]/examples/jsm/postprocessing/ShaderPass.js",
-              "three/examples/jsm/shaders/FXAAShader.js": "https://unpkg.com/[email protected]/examples/jsm/shaders/FXAAShader.js"
-            }
-          }
-
-    </script>
     <script type="module" src="./js/landing.js"></script>
     <script type="module" src="./js/explain.js"></script>
     <script type="module" src="./js/compare.js"></script>
     <script type="module" src="./js/story.js"></script>
     <script type="module" src="./js/play3.js"></script>
     <script type="module" src="./js/video.js"></script>
-
     </body>
 </html>