yilin pear updates

work/pear-jansomwong/index.html

@@ -74,75 +74,11 @@ <h2>Several diagrams are used to explain the complex interactions.   </h2>
         User Journey: Multiple Users depicts the journey of multiple stakeholders, including government officials, developers, residents, and community organizations. It shows how each group interacts with the system and the steps they take from announcement to outcome, emphasizing their interconnected roles and actions.
         </p>
 
-
-        <!-- <hr>
-  
-       <figure>
-          <img src="https://picsum.photos/1201/800">
-        </figure>
-  
-        <hr>
-        
-        <figure>
-          <img src="https://picsum.photos/601/400">
-          <img src="https://picsum.photos/600/400">
-        </figure>
-        
-        <hr>
-    
-        
-        <blockquote>
-          "Velit laoreet id donec ultrices tincidunt arcu…"
-        </blockquote> -->
-      <!-- </section>
-  
-      <section>
-        <h2>What are its leverage points?</h2>
-  
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
-          incididunt ut labore et dolore magna aliqua. Condimentum id venenatis a condimentum
-          vitae sapien pellentesque habitant. Praesent elementum facilisis leo vel fringilla
-          est. Sagittis nisl rhoncus mattis rhoncus urna neque. Velit laoreet id donec ultrices
-          tincidunt arcu non sodales neque. Volutpat blandit aliquam etiam erat velit. Duis 
-          tristique sollicitudin nibh sit amet. Quam pellentesque
-          nec nam aliquam sem et. Parturient montes nascetur ridiculus mus mauris vitae. Tellus
-          in metus vulputate eu. Nulla porttitor massa id neque aliquam.
-        </p>
-  
-        <p>
-          Sagittis nisl rhoncus mattis rhoncus urna neque. Velit laoreet id donec ultrices
-          tincidunt arcu non sodales neque. Volutpat blandit aliquam etiam erat velit.
-          Velit laoreet id donec ultrices tincidunt arcu non sodales neque. Volutpat blandit
-          aliquam etiam erat velit. Duis tristique sollicitudin nibh sit amet. Quam pellentesque
-          nec nam aliquam sem et. Parturient montes nascetur ridiculus mus mauris vitae. Tellus
-          in metus vulputate eu. Nulla porttitor massa id neque aliquam. Vestibulum sed arcu non
-          odio euismod lacinia at. In vitae turpis massa sed elementum tempus egestas sed sed.
-        </p>
-        
-        <figure>
-          <img src="https://picsum.photos/601/401">
-          <img src="https://picsum.photos/600/401">
-        </figure>
-        
-        <hr>
-        
-        <figure>
-          <img src="https://picsum.photos/1201/801">
-        </figure>
-      </section>
-       -->
-
-      <section>
-        <h1 id="assignment-2">2 – Systems</h1>
-      </section>
       <h2>Rube Goldberg System</h2>
       <p> Hyped </p>
       <img src="system2.png">
       <iframe width="560" height="315" src="https://www.youtube.com/embed/ETN5E5VeNLo?si=vxcjF-8BP43bh6ow" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
 
-
-
         <p>
        Our Rube Goldberg-inspired system starts by detecting the sound of a balloon popping, 
        which triggers the playback of a sound file. The vibrations from the speaker then set a lightweight object, 
@@ -153,7 +89,7 @@ <h2>Rube Goldberg System</h2>
         </p>
 
       <section>
-        <h1 id="assignment-3">3 – Authorship</h1>
+        <h1 id="assignment-2">2 – Authorship</h1>
       </section>
       <section>
         In my design practice, my authorship philosophy centers on balancing "lock-in" and flexibility to enhance human creativity, inclusivity, and ethical responsibility. This approach draws from my varied experiences in community-focused and commercial design projects. I dive into community-focused initiatives to satisfy my curiosity and desire to experiment and innovate, addressing both existing problems and undiscovered needs.
@@ -175,10 +111,214 @@ <h1 id="assignment-3">3 – Authorship</h1>
         <iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FSbRCjgTDOoV62Q9dqEVpkf%2FZine-Assignment%3Fpage-id%3D0%253A1%26node-id%3D46-24%26viewport%3D857%252C1297%252C0.15%26t%3Desi8F8MDVE0eYsvP-1%26scaling%3Dscale-down%26content-scaling%3Dfixed%26starting-point-node-id%3D46%253A24" allowfullscreen></iframe>
         <iframe width="560" height="315" src="https://www.youtube.com/embed/ZhHwTqa2q_U?si=8wmfPhNQYJcxFaFd" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
       <section>
-        <h1 id="assignment-4">4 – Governance</h1>
+        <h1 id="assignment-3">3 – Politics</h1>
       </section>
-
+      <h2>“Reviving Thai Craft Communities through Creative Arts Districts”</h2>
       <section>
+      <body>
+        <h3> the heart of Bangkok, traditional Thai craft communities are struggling to survive amidst rapid urban development. As new buildings rise, these artisans are being pushed out, losing not only their homes but their cultural heritage. They face tough competition from modern industries, making it hard to sustain their craft businesses. With younger generations moving away and fewer people involved, traditional techniques risk being lost forever. The community spirit is fading, and without exposure and support, these beautiful crafts could disappear. Establishing creative arts districts can revive these communities, preserving their unique culture and boosting their local economy.</h3> 
+        <section>
+          Data Sources and Formats
+
+          Geographic distribution of craft communities in Bangkok
+
+          Format: CSV with latitude, longitude, and description data
+          Source: Local government websites, GIS databases, and community organizations
+        </section>
+
+      </section>
+      <!DOCTYPE html>
+      <html lang="en">
+      <head>
+          <meta charset="UTF-8">
+          <meta name="viewport" content="width=device-width, initial-scale=1.0">
+          <title>Bangkok Craft Communities Map</title>
+      </head>
+      <body>
+          <iframe src="bangkok_craft_communities_map.html" width="100%" height="800" style="border:none;"></iframe>
+      </body>
+      </html>
+
+          <iframe src="https://docs.google.com/spreadsheets/d/e/2PACX-1vRTYfL9l-h6T7KpXLIOMlvvphMY9CSgmxgeqqZDLXuInqMS0vSrDH9TapN2U5Gn491wDnj20CtciNnh/pubhtml?gid=0&amp;single=true&amp;widget=true&amp;headers=false" width="100%" height="800" style="border:none;"></iframe>
+
+          <h3> Creative Business Status  </h3>
+          <h3>Number and utilization of buildings in a Creative Economy District</h3>
+          <iframe src="https://docs.google.com/spreadsheets/d/e/2PACX-1vTqowQ9xJ43og86lpBZn0Srs-94aa_LSTpG7QFoq2d-DHaTORbZTGoTlUtarR1gc1n1qY-hF5-nVb-l/pubhtml?widget=true&amp;headers=false" width="100%" height="800" style="border:none;"></iframe>
+          <iframe src="https://docs.google.com/spreadsheets/d/e/2PACX-1vSlPXaPVOheJkVApza2IJZQQAxCiqPZjChZBvEMMjQOGjqcFQteAv2uBo0Dx0gBYsETeE8yQU-tTypi/pubhtml?widget=true&amp;headers=false" width="100%" height="800" style="border:none;"></iframe>
+          <h3> Event Participation Records </h3>Event Participation Records
+
+          Format: Numeric data, event summaries
+          Source: https://www.bangkokdesignweek.com/en/bkkdw2024/about?section=pastfest
+          <img src="bkkdesignweek.png">
+          <iframe src="https://docs.google.com/spreadsheets/d/e/2PACX-1vRUrgipI7ZbKWzgCWxIGA2dbuOCDeJIj5GCNHI839kc7pXtsueuMAusRoeceL6TbT5fNkqlWYc7O77w/pubhtml?gid=1390029329&amp;single=true&amp;widget=true&amp;headers=false"width="100%" height="800" style="border:none;"  ></iframe>
+
+          <h3> Community Engagement Images </h3>
+          <!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <style>
+        * {box-sizing: border-box;}
+        body {font-family: Arial, sans-serif;}
+
+        .slider {
+            width: 100%;
+            max-width: 800px;
+            position: relative;
+            margin: auto;
+        }
+
+        .slides {
+            display: flex;
+            overflow: hidden;
+            width: 100%;
+        }
+
+        .slides input {
+            display: none;
+        }
+
+        .slide {
+            min-width: 100%;
+            transition: transform 0.5s ease-in-out;
+        }
+
+        .navigation-manual {
+            position: absolute;
+            width: 100%;
+            margin-top: -40px;
+            display: flex;
+            justify-content: center;
+        }
+
+        .manual-btn {
+            border: 2px solid #40D3DC;
+            padding: 5px;
+            border-radius: 10px;
+            cursor: pointer;
+            transition: background 0.4s;
+        }
+
+        .manual-btn:not(:last-child) {
+            margin-right: 40px;
+        }
+
+        .manual-btn:hover {
+            background: #40D3DC;
+        }
+
+        #radio1:checked ~ .first {
+            transform: translateX(0);
+        }
+
+        #radio2:checked ~ .first {
+            transform: translateX(-100%);
+        }
+
+        #radio3:checked ~ .first {
+            transform: translateX(-200%);
+        }
+
+        #radio4:checked ~ .first {
+            transform: translateX(-300%);
+        }
+
+        #radio5:checked ~ .first {
+            transform: translateX(-400%);
+        }
+
+        #radio6:checked ~ .first {
+            transform: translateX(-500%);
+        }
+    </style>
+</head>
+<body>
+
+    <div class="slider">
+        <div class="slides">
+            <!-- Radio buttons for navigation -->
+            <input type="radio" name="radio-btn" id="radio1" checked>
+            <input type="radio" name="radio-btn" id="radio2">
+            <input type="radio" name="radio-btn" id="radio3">
+            <input type="radio" name="radio-btn" id="radio4">
+            <input type="radio" name="radio-btn" id="radio5">
+            <input type="radio" name="radio-btn" id="radio6">
+
+            <!-- Slide images -->
+            <div class="slide first">
+                <img src="Screenshot 2024-07-26 at 02.29.16.png" alt="Slide 1" style="width:100%">
+            </div>
+            <div class="slide">
+                <img src="Screenshot 2024-07-26 at 02.46.46.png" alt="Slide 2" style="width:100%">
+            </div>
+            <div class="slide">
+                <img src="Screenshot 2024-07-26 at 03.00.28.png" alt="Slide 3" style="width:100%">
+            </div>
+            <div class="slide">
+                <img src="Screenshot 2024-07-26 at 03.00.49.png" alt="Slide 4" style="width:100%">
+            </div>
+            <div class="slide">
+                <img src="Screenshot 2024-07-26 at 03.02.56.png" alt="Slide 5" style="width:100%">
+            </div>
+            <div class="slide">
+                <img src="Screenshot 2024-07-26 at 03.03.12.png" alt="Slide 6" style="width:100%">
+            </div>
+        </div>
+
+        <!-- Manual navigation -->
+        <div class="navigation-manual">
+            <label for="radio1" class="manual-btn"></label>
+            <label for="radio2" class="manual-btn"></label>
+            <label for="radio3" class="manual-btn"></label>
+            <label for="radio4" class="manual-btn"></label>
+            <label for="radio5" class="manual-btn"></label>
+            <label for="radio6" class="manual-btn"></label>
+        </div>
+
+<h3>
+  Community Life and Culture Text Data
+Format: Text documents (DOCX, PDF)
+Source: Descriptions and historical accounts from local historians, community records, and reports
+
+Interview Quotes from Local Residents
+Format: Text documents (DOCX, PDF)
+Source: Transcriptions from interviews with community members, local artisans, and stakeholders
+</h3>
+
+<section> 
+<h3>Data Manifesto</h3>
+</section>
+In my future practice, I see data as a powerful tool for visualization and storytelling. Quantitative data provides the foundation, revealing patterns and trends that help us understand broader shifts. Qualitative interviews bring in personal stories and insights, adding a human element to the data. Geospatial data helps map out where these events and trends are occurring, giving a clear picture of the spatial dynamics at play. Historical texts link past and present, showing how traditions have evolved over time. Visual documentation, through photos and videos, captures the current state of communities and their activities. Together, these datasets offer a comprehensive view of traditional Thai craft communities. They highlight the challenges of urban development, economic pressures, and the need for cultural preservation. At the same time, they show the potential for revitalization through creative arts districts. This mix of data types supports my belief that targeted interventions can help sustain and grow these communities.
+          <section>
+            <h1 id="assignment-4">4 – Governance</h1>
+          </section>
+<h3>Prototype 1: Narrative x Data Visualization x Google Street View & Photoshop x P5.js</h3>
+<section> 
+  <iframe src="https://editor.p5js.org/panyanus.j/full/hKgtTom96" width="100%" height="800" style="border:none;" ></iframe>></iframe>
+</section>
+"Hidden within the bustling streets of Bangkok, these doorways are the silent guardians of our cultural heritage. Each entrance leads to a world where traditional crafts thrive amidst urban chaos. By unveiling these hidden gems, we aim to preserve their stories and celebrate the rich tapestry of our past. Let us walk through these doors and embrace the beauty and resilience of our craft communities."
+<section> 
+<h3>Prototype 2: Narrative x Mapping x Audio Visual Experience x Mapbox </h3>
+<div class="container">
+  <iframe src="./soundmap/soundmap.html" style="width: 100%; height: 500px"></iframe>
+</div>
+</section>   
+
+<h3>Prototype 3: Narrative x  x Data Visualization x p5js </h3>
+<section> 
+  <iframe src="https://editor.p5js.org/panyanus.j/full/28tphxeNc" width="100%" height="800" style="border:none;"></iframe>
+</section>   
+
+<h3>"Bangkok Memory Tiles" </h3>
+<section>
+  Interactive, conceptual tiles are installed in public spaces, where stepping on tiles triggers visual and auditory experiences related to Bangkok’s cultural heritage. In the center, a larger interactive panel allows users to record and share their stories, contributing to the community's collective memory and participatory governance.
+
+</section>
+<iframe width="560" height="315" src="https://www.youtube.com/embed/Jbs1z6t4-SQ?si=TQbxpwNMOjjU9tRo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+</body>
+      </html>
+            <section>
         <h1 id="assignment-5">5 – Behavior</h1>
       </section>
     </article>