-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
115 lines (113 loc) · 7.74 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html>
<html>
<header>
<link rel="stylesheet" href="./index.css">
<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=Lato:wght@300&display=swap" rel="stylesheet">
</header>
<body>
<div class="navbar">
<ul class="links">
<li><a class="home">Home</a></li>
<li><a class="importance-intersectionality">Importance / Intersectionality</a></li>
<li><a class="tips">Tips</a></li>
<li><a class="works">Works</a></li>
</ul>
</div>
<div class="filler" style="height: max(50px, 8vh);"></div>
<div class="section home">
<video src="./assets/cover-background.mp4" class="background" autoplay muted loop></video>
<div class="text">
<h1>Climate Interviewing</h1>
<p><b>Created by: Micheal Huang, Kobe Youmans, Rainer Arendt, Owen Kingsley, and Aiden Sanxhaku</b></p>
</div>
</div>
<div class="section quotes"></div>
<div class="section importance-intersectionality">
<div class="grid">
<div class="importance">
<div class="title-background">
<h2>Importance</h2>
<img src="./assets/cursor.png" width="50px" style="filter: invert(100%);" class="cursor">
</div>
<div class="text-background">
<p>
 Through centuries, sharing stories has served as a medium by which humanity could express its successes, shortcomings, and fruits of collaboration. It was not until recently, that climate change had emerged as one of these dominant themes in storytelling and, correspondingly, in literature. The importance of addressing climate change through storytelling lies in the power of stories to inspire and motivate individuals to take action. Climate change is often viewed as a complex, distant, and abstract issue, which can make it difficult for people to connect with. But, by weaving stories that illustrate the impact of climate change on people's lives, we can help individuals understand the issue on a personal level. These stories add a sense of relatability, making people more likely to internalize and sympathize with what they read. This, in turn, can lead to increased awareness and action. Storytelling also has the ability to humanize the issue of climate change and create empathy for those who are most affected by it. By incorporating climate change into our storytelling, we can ensure that this critical issue is given the attention it deserves and that individuals are encouraged to take action to mitigate its effects.
</p>
</div>
</div>
<div class="intersectionality">
<div class="title-background">
<h2>Intersectionality</h2>
<img src="./assets/cursor.png" width="50px" style="filter: invert(100%);" class="cursor">
</div>
<div class="text-background">
<p>
 Rebecca Solnit, the celebrated writer and activist, once remarked that "Stories are compasses and architecture; we navigate by them, we build our sanctuaries and our prisons out of them, and to be without a story is to be lost in the vastness of a world that spreads in all directions like arctic tundra or sea ice." This quote emphasizes the indispensable role of storytelling in shaping our perception of the world. Climate change is a complex and multifaceted issue that requires a holistic approach. By integrating stories into our efforts to address climate change, we can enable people to establish a personal connection with the issue, and inspire them to take action towards mitigating its impact. Sharing stories about climate change can also foster a sense of community around the issue, which is crucial for creating sustainable change. Ultimately, storytelling is a potent tool that can facilitate our efforts to address climate change, and pave the way for a better future for ourselves and the planet.
</p>
</div>
</div>
</div>
</div>
<div class="section quotes"></div>
<div class="section tips">
<h2>Climate Storytelling Tips</h2>
<div class="grid">
<div class="card">
<h3>Ask open-ended questions</h3>
<p>Replace "Have you noticed climate change in your life?" with "How have you noticed climate change in your life?"</p>
</div>
<div class="card">
<h3>Delve deeper with follow-up questions</h3>
<p>Getting deep into the details of one specific story or even rephrasing the same sentence back to someone can make the story more elaborate and feel more real</p>
</div>
<div class="card">
<h3>Silence can be key</h3>
<p>People are uncomfortable sitting in silence, so if you just don't say anything they might add on some crucial details to their answers</p>
</div>
<div class="card">
<h3>Warm up your interviewee</h3>
<p>Asking a couple easy questions like "What is your name?" or "What did you have for breakfast?" can set your interviewee at ease and make the conversation less awkward</p>
</div>
<div class="card">
<h3>Ask "dumb" questions</h3>
<p>Even if something seems obvious, asking about it can be helpful to your audience and keeps your assumptions in check.</p>
</div>
</div>
</div>
<div class="section quotes"></div>
<div class="section works">
<h2>Compiled Works</h2>
<div class="grid">
<div class="card">
<h3>Rainer's Climate interview</h3>
<p>Tags: Sustainability, Renewable Energy, Artificial Intelligence, Dogs, Architecture</p>
<audio src="./assets/rainer.m4a" controls></audio>
</div>
<div class="card">
<h3>Kobe's Climate Interview</h3>
<p>Tags: Mosquitoes, Colorado, Atlanta, Transformation, Water</p>
<audio src="./assets/kobe.m4a" controls></audio>
</div>
<div class="card">
<h3>Owen's Climate Interview</h3>
<p>Tags: Change, Environment, Economy, Industries</p>
<audio src="./assets/owen.m4a" controls></audio>
</div>
<div class="card">
<h3>Micheal's Climate Interview</h3>
<p>Tags: Trees, Policy, Water, Floods</p>
<a target="_blank" href="https://docs.google.com/document/d/1sfKTyGvHkxeekH3QLv5XEQAF3R7By5zI6S4e2QX-8q8/edit">In text here</a>
</div>
<div class="card">
<h3>Aiden's Climate interview</h3>
<p>Tags: Biotic Life, Water, Lakes, Emissions, Policy</p>
<a target="_blank" href="https://docs.google.com/document/d/1pef1FMqoaBHTQgSm-EMoNabvxiB9twp60ESrGD93vRg/edit?usp=sharing">In text here</a>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<script src="./index.js"></script>
</body>
</html>