artist essays

5 files changed, 163 insertions, 55 deletions

diff --git a/frontend/site/projects/museum/views/artists.css b/frontend/site/projects/museum/views/artists.css
index 929c10f..015a4db 100644
--- a/frontend/site/projects/museum/views/artists.css
+++ b/frontend/site/projects/museum/views/artists.css
@@ -101,27 +101,30 @@
   display: none;
 }
 .page-artists .artist-left {
-  padding-top: 0vh;
+  padding-top: 2vh;
   padding-bottom: 4vh;
   padding-left: 2vw;
   padding-right: 2vw;
-  width: 100vw;
-  font-size: 1.5vw;
+  width: 50vw;
+  font-size: 1.2vw;
   line-height: 1.4;
 }
-.page-artists .artist-left p {
+.page-artists .artist-left p,
+.page-artists .artist-right p {
   margin: 0 0 2vw 0;
 }
 .page-artists .artist-right {
   position: absolute;
   top: 0;
   left: 50vw;
-  background-size: cover;
-  background-position: center right;
+  padding-top: 2vh;
+  padding-bottom: 4vh;
+  padding-left: 2vw;
+  padding-right: 2vw;
   width: 50vw;
-  height: 100vh;
+  font-size: 1.2vw;
+  line-height: 1.4;
   /*background: #222222;*/
-  pointer-events: none;
 }
 .page-artists .artist-location {
   position: absolute;
diff --git a/frontend/site/projects/museum/views/artists.js b/frontend/site/projects/museum/views/artists.js
index 20345d0..912e0e8 100644
--- a/frontend/site/projects/museum/views/artists.js
+++ b/frontend/site/projects/museum/views/artists.js
@@ -14,6 +14,7 @@ export default class Artists extends Component {
 
   constructor(props) {
     super(props)
+    this.ref = React.createRef()
     this.showArtist = this.showArtist.bind(this)
     this.previousArtist = this.previousArtist.bind(this)
     this.nextArtist = this.nextArtist.bind(this)
@@ -25,6 +26,7 @@ export default class Artists extends Component {
 
   showArtist(currentIndex) {
     this.setState({ detail: true, currentIndex })
+    this.scrollToTop()
   }
 
   previousArtist() {
@@ -38,6 +40,15 @@ export default class Artists extends Component {
   go(step) {
     const currentIndex = (this.state.currentIndex + step + ARTIST_ORDER.length) % ARTIST_ORDER.length
     this.setState({ currentIndex })
+    this.scrollToTop()
+  }
+
+  scrollToTop() {
+    setTimeout(() => {
+      Array.from(this.ref.current.querySelectorAll(".artist-content")).forEach(el => {
+        el.scrollTo(0, 0)
+      })
+    }, 0)
   }
 
   render() {
@@ -81,6 +92,9 @@ const ArtistDetail = ({ artist, index, isCurrent, onClose }) => {
         <div className="artist-left">
           <span dangerouslySetInnerHTML={{ __html: artist.bio }} />
         </div>
+        <div className="artist-right">
+          <span dangerouslySetInnerHTML={{ __html: artist.statement }} />
+        </div>
       </div>
       <div className="artist-detail-name" onClick={onClose}>
         {artist.name}
diff --git a/frontend/site/projects/museum/views/credits.js b/frontend/site/projects/museum/views/credits.js
index 9a19fcf..6187209 100644
--- a/frontend/site/projects/museum/views/credits.js
+++ b/frontend/site/projects/museum/views/credits.js
@@ -3,8 +3,6 @@ import actions from 'site/actions'
 
 import "./credits.css"
 
-import { ArteLogo } from "site/projects/museum/icons"
-
 export default class Credits extends Component {
   constructor(props) {
     super(props)
diff --git a/frontend/site/projects/museum/views/essay.css b/frontend/site/projects/museum/views/essay.css
index 1a80575..3de705d 100644
--- a/frontend/site/projects/museum/views/essay.css
+++ b/frontend/site/projects/museum/views/essay.css
@@ -1,8 +1,14 @@
+.page-essay.page-artists .artist-list {
+  justify-content: flex-start;
+}
 .page-essay .page-content {
   flex-direction: column;
   justify-content: flex-start;
   padding-bottom: 10vh;
 }
+.page-essay .page-title {
+  cursor: pointer;
+}
 .page-essay .page-subtitle {
   margin: 0rem 0 2vw 0;
 }
@@ -16,6 +22,21 @@
   text-decoration: underline;
 }
 
+.page-essay.page-artists .artist-location {
+  padding: 1vh 0;
+  margin: 0;
+  background: #111;
+  pointer-events: auto;
+  cursor: pointer;
+}
+.page-essay.page-artists .artist-detail.visible {
+  overflow-y: auto;
+}
+.page-essay.page-artists .artist-detail.visible::-webkit-scrollbar {
+  display: none;
+}
+
+
 .globe {
   width: 100%;
   margin-bottom: 2vw;
diff --git a/frontend/site/projects/museum/views/essay.js b/frontend/site/projects/museum/views/essay.js
index 0320475..81a264c 100644
--- a/frontend/site/projects/museum/views/essay.js
+++ b/frontend/site/projects/museum/views/essay.js
@@ -1,79 +1,151 @@
 import React, { Component } from 'react'
 import actions from 'site/actions'
 
+import "./artists.css"
 import "./essay.css"
 
-import { ARTISTS, ARTIST_ORDER } from "site/projects/museum/constants"
-import { Globe } from "site/projects/museum/icons"
+import { ARTISTS, ARTIST_ORDER, ESSAYS, ESSAY_ORDER } from "site/projects/museum/constants"
+import { ArrowLeft, ArrowRight, Globe } from "site/projects/museum/icons"
 
-import { history } from "site/store"
+export default class Essays extends Component {
+  state = {
+    currentIndex: 0,
+    detail: false,
+  }
 
-export default class Essay extends Component {
   constructor(props) {
     super(props)
-    this.handleClick = this.handleClick.bind(this)
-    this.state = {
-    }
+    this.ref = React.createRef()
+    this.showEssay = this.showEssay.bind(this)
+    this.previousEssay = this.previousEssay.bind(this)
+    this.nextEssay = this.nextEssay.bind(this)
+    this.close = this.close.bind(this)
   }
 
   componentDidMount() {
     actions.site.interact()
   }
 
-  handleClick(e) {
-    e && e.preventDefault()
+  showEssay(currentIndex) {
+    this.setState({ detail: true, currentIndex })
+    this.scrollToTop()
+  }
+
+  previousEssay() {
+    this.go(-1)
+  }
+
+  nextEssay() {
+    this.go(1)
+  }
+
+  go(step) {
+    const currentIndex = (this.state.currentIndex + step + ESSAY_ORDER.length) % ESSAY_ORDER.length
+    this.setState({ currentIndex })
+    this.scrollToTop()
+  }
+
+  scrollToTop() {
+    setTimeout(() => {
+      Array.from(this.ref.current.querySelectorAll(".artist-detail")).forEach(el => {
+        el.scrollTo(0, 0)
+      })
+    }, 0)
+  }
+
+  close() {
+    this.setState({ detail: false })
   }
 
   render() {
+    const { currentIndex, detail } = this.state
     return (
-      <div className="page page-essay">
-        <div className="page-title">The L<span>ast Museum</span></div>
-        <div className="page-subtitle">By Nadim Samman</div>
-        <div className="page-content">
-          <p>
-            <i>The Last Museum</i> is an exhibition that explores productive tensions between the putative ‘anywhere’  of the digital and its relation to local particulars. Deploying a hybrid offline-online format, the project invites an international group of artists to reimagine site-specificity, through a sequence of interventions that cut across both real and virtual domains. The artists are Nora Al-Badri (Germany/Iraq), Juliana Cerqueira Leite (Brazil), Nicole Foreshew (Wiradjuri Nation/Australia), Jakrawal Nilthamrong (Thailand), Zohra Opoko (Ghana), and Charles Stankievech (Canada).
-          </p>
-          <ArtistGlobe />
-          <p>
-            <i>The Last Museum</i> connects disparate sites, spanning six continents and the virtual sphere. It is an experiment that deploys a unique exhibition design—embracing the overlapping <i>analog</i> and <i>digital</i> dimensions of a given location while, additionally, exploiting the unique potentials of each for dramatic effect. Altogether, <i>The Last Museum</i> comprises an epic <i>para-site</i> that is most accessible through a web  interface.
-          </p>
-          <p>
-            Each artist was commissioned to author a sculptural group, to be installed at an outdoor site of their own choosing. The choice was only limited by a request that it be associated with communication and connectivity. Final choices ended up highlighting both technical and more esoteric forms of transmission—and included a notorious hacker hangout (Berlin’s C-base), ancestral land in rural Australia, a down-at-heel electronics mall in downtown Sao Paolo, a neutrino observatory in the Rocky Mountains, and more.
-          </p>
-          <p>
-            Each sculptural intervention was videoed by the artists, and the resulting clips (from all over the world) were handed over to a digital artist, <a href="https://asdf.us/">Jules LaPlace</a>, who brought them together through a digital way-finding protocol; the exhibition’s ‘hang’. The public outcome, debuting as a pop-up window on the KW start page, is a website experience that unfolds as an interactive sequence of objects and places, navigable using bespoke tools. At times, these tools amount to additional (digital) artworks. Visitors will have a sense that that the exhibition is a wormhole, of sorts. 
-          </p>
-          <p>
-            Some of the featured locations are associated with infrastructure and the World Wide Web, others include waterways and climate. Uniting these seemingly disparate aspects, a conceptual leitmotif of visually <i>grounding</i> planetary networks and other globe-spanning systems will be evident. Call it a <i>web-site-specific</i> project—in the sense that both art and exhibition design re-imagines the stakes of ‘site-specificity’ for digital times. What this means is that <i>The Last Museum</i>’s ‘site’ is a layered reality or (to borrow a term from computational engineering) a ‘Stack’. Our exhibition-stack encompasses material facts on the ground, digital code, and softer site specificities—including those previously outlined by the art historian Miwon Kwon, such as ‘cultural debates, a theoretical concept, a historical condition, even particular formations of desire’. Each artwork in <i>The Last Museum</i> is a kind of a vector that intersects with all of the stack’s layers.
-          </p>
-          <p>
-            For visitors, <i>The Last Museum</i> will offer a blurring between cinema and website interactivity. The ability to stay with a moving image for as long as you want, pushing the edit along at your own pace, is not normally available as a filmic experience. In fact, it is more a province of gaming. Other interactions will include releasing files for download, accessing texts, switching soundtrack variations and more. All of these things will be artist directed and thus in no way interpretive or secondary materials.
-          </p>
-          <p>
-            Rather than being a one-off exhibition, <i>The Last Museum</i> will ‘tour’ as a pop-up window on the start pages of partner institutions for fixed periods. In line with the project’s rejection of an ‘anywhere, anytime’ web imaginary, each touring iteration will acquire a new chapter—with an additional artist/site from the host institution’s country added to the navigable chain. As long as our colleagues’ are interested, it is possible that <i>The Last Museum</i> may tour and grow indefinitely—like the content of the web itself.
-          </p>
-          <p>
-            This project was conceived during the first wave of COVID-19, amid heightened tensions between the conditions of physical lockdown and globe-spanning telecommunication. Although utterly international, its production required no travel for persons or artworks. When the exhibition opens, audiences will not have to travel to view it. While the development of such a format is not supposed to replace gallery experience, it is at least suggestive for how to approach a growing question in the museum sector: namely, how do analog artworks and digital space can come together a meaningful way? In fact, this is only half of the question: We must also explore how digital artworks can relate to analog space. <i>The Last Museum</i> attempts to work on both problems at the same time, creatively, playing with the issue of translation and re-representation in a bi-directional manner.
-          </p>
-          <p>
-            At its core, The Last Museum explores how tangibility and distance interact, how things that seem fixed in place might (or do) escape in various forms. In a sense, then, it it clear that we are dealing with an issue as old as art itself (albeit, employing contemporary tools). At least one of the exhibition’s artists, Zohra Opoko, explicitly takes up an art-historical precursor for the crossing of spatial and metaphysical thresholds. The Egyptian Book of the Dead is her inspiration for a series of interventions in a half-built mortuary in Accra, Ghana. Draped with screen-printed fabric, the unfinished site is (literally) shrouded in images that stimulate reflection on how stillness and passage come together. In this work and more, the <i>The Last Museum</i> hovers somewhere between life and death, lockdown and escape.
-          </p>
-          <p>
-            The Last Museum launches 30 April and runs until 6 June 6, 2021, at <a href="https://www.kw-berlin.de/">www.kw-berlin.de</a>.
-          </p>
+      <div className="page page-artists page-essay" ref={this.ref}>
+        <div className="artist-list">
+          <div className="artists-heading">TEXTS</div>
+          {ESSAY_ORDER.map((key, index) => {
+            const essay = ESSAYS[key]
+            return (
+              <div key={key} className="artist-big-name" onClick={() => this.showEssay(index)}>
+                {essay.title}
+              </div>
+            )
+          })}
+        </div>
+        <div className={detail ? "artist-gallery visible" : "artist-gallery"}>
+          {ESSAY_ORDER.map((key, index) => (
+            <EssayDetail
+              key={key}
+              essayId={key}
+              index={index}
+              isCurrent={detail && currentIndex === index}
+              onClose={this.close}
+            />
+          ))}
+          {detail && (
+            <div className="artist-location" onClick={this.close}>{ESSAYS[ESSAY_ORDER[currentIndex]].title}</div>
+          )}
+          <div className="nav-arrow arrow-left" onClick={this.previousEssay}>{ArrowLeft}</div>
+          <div className="nav-arrow arrow-right" onClick={this.nextEssay}>{ArrowRight}</div>
         </div>
       </div>
     )
   }
 }
 
+const EssayDetail = props => {
+  switch (props.essayId) {
+    case 'nadim':
+      return <NadimEssay {...props} />
+  }
+}
+
+const NadimEssay = ({ essayId, index, isCurrent, onClose }) => (
+  <div className={isCurrent ? "artist-detail visible" : "artist-detail"}>
+    <div className="page-title" onClick={onClose}>The L<span>ast Museum</span></div>
+    <div className="page-subtitle">By Nadim Samman</div>
+    <div className="page-content">
+      <p>
+        <i>The Last Museum</i> is an exhibition that explores productive tensions between the putative ‘anywhere’  of the digital and its relation to local particulars. Deploying a hybrid offline-online format, the project invites an international group of artists to reimagine site-specificity, through a sequence of interventions that cut across both real and virtual domains. The artists are Nora Al-Badri (Germany/Iraq), Juliana Cerqueira Leite (Brazil), Nicole Foreshew (Wiradjuri Nation/Australia), Jakrawal Nilthamrong (Thailand), Zohra Opoko (Ghana), and Charles Stankievech (Canada).
+      </p>
+      <ArtistGlobe />
+      <p>
+        <i>The Last Museum</i> connects disparate sites, spanning six continents and the virtual sphere. It is an experiment that deploys a unique exhibition design—embracing the overlapping <i>analog</i> and <i>digital</i> dimensions of a given location while, additionally, exploiting the unique potentials of each for dramatic effect. Altogether, <i>The Last Museum</i> comprises an epic <i>para-site</i> that is most accessible through a web  interface.
+      </p>
+      <p>
+        Each artist was commissioned to author a sculptural group, to be installed at an outdoor site of their own choosing. The choice was only limited by a request that it be associated with communication and connectivity. Final choices ended up highlighting both technical and more esoteric forms of transmission—and included a notorious hacker hangout (Berlin’s C-base), ancestral land in rural Australia, a down-at-heel electronics mall in downtown Sao Paolo, a neutrino observatory in the Rocky Mountains, and more.
+      </p>
+      <p>
+        Each sculptural intervention was videoed by the artists, and the resulting clips (from all over the world) were handed over to a digital artist, <a href="https://asdf.us/">Jules LaPlace</a>, who brought them together through a digital way-finding protocol; the exhibition’s ‘hang’. The public outcome, debuting as a pop-up window on the KW start page, is a website experience that unfolds as an interactive sequence of objects and places, navigable using bespoke tools. At times, these tools amount to additional (digital) artworks. Visitors will have a sense that that the exhibition is a wormhole, of sorts. 
+      </p>
+      <p>
+        Some of the featured locations are associated with infrastructure and the World Wide Web, others include waterways and climate. Uniting these seemingly disparate aspects, a conceptual leitmotif of visually <i>grounding</i> planetary networks and other globe-spanning systems will be evident. Call it a <i>web-site-specific</i> project—in the sense that both art and exhibition design re-imagines the stakes of ‘site-specificity’ for digital times. What this means is that <i>The Last Museum</i>’s ‘site’ is a layered reality or (to borrow a term from computational engineering) a ‘Stack’. Our exhibition-stack encompasses material facts on the ground, digital code, and softer site specificities—including those previously outlined by the art historian Miwon Kwon, such as ‘cultural debates, a theoretical concept, a historical condition, even particular formations of desire’. Each artwork in <i>The Last Museum</i> is a kind of a vector that intersects with all of the stack’s layers.
+      </p>
+      <p>
+        For visitors, <i>The Last Museum</i> will offer a blurring between cinema and website interactivity. The ability to stay with a moving image for as long as you want, pushing the edit along at your own pace, is not normally available as a filmic experience. In fact, it is more a province of gaming. Other interactions will include releasing files for download, accessing texts, switching soundtrack variations and more. All of these things will be artist directed and thus in no way interpretive or secondary materials.
+      </p>
+      <p>
+        Rather than being a one-off exhibition, <i>The Last Museum</i> will ‘tour’ as a pop-up window on the start pages of partner institutions for fixed periods. In line with the project’s rejection of an ‘anywhere, anytime’ web imaginary, each touring iteration will acquire a new chapter—with an additional artist/site from the host institution’s country added to the navigable chain. As long as our colleagues’ are interested, it is possible that <i>The Last Museum</i> may tour and grow indefinitely—like the content of the web itself.
+      </p>
+      <p>
+        This project was conceived during the first wave of COVID-19, amid heightened tensions between the conditions of physical lockdown and globe-spanning telecommunication. Although utterly international, its production required no travel for persons or artworks. When the exhibition opens, audiences will not have to travel to view it. While the development of such a format is not supposed to replace gallery experience, it is at least suggestive for how to approach a growing question in the museum sector: namely, how do analog artworks and digital space can come together a meaningful way? In fact, this is only half of the question: We must also explore how digital artworks can relate to analog space. <i>The Last Museum</i> attempts to work on both problems at the same time, creatively, playing with the issue of translation and re-representation in a bi-directional manner.
+      </p>
+      <p>
+        At its core, The Last Museum explores how tangibility and distance interact, how things that seem fixed in place might (or do) escape in various forms. In a sense, then, it it clear that we are dealing with an issue as old as art itself (albeit, employing contemporary tools). At least one of the exhibition’s artists, Zohra Opoko, explicitly takes up an art-historical precursor for the crossing of spatial and metaphysical thresholds. The Egyptian Book of the Dead is her inspiration for a series of interventions in a half-built mortuary in Accra, Ghana. Draped with screen-printed fabric, the unfinished site is (literally) shrouded in images that stimulate reflection on how stillness and passage come together. In this work and more, the <i>The Last Museum</i> hovers somewhere between life and death, lockdown and escape.
+      </p>
+      <p>
+        The Last Museum launches 30 April and runs until 6 June 6, 2021, at <a href="https://www.kw-berlin.de/" target="_blank">www.kw-berlin.de</a>.
+      </p>
+    </div>
+  </div>
+)
+
 const ArtistGlobe = () => (
   <div className="globe">
     <div className="globe-image">
       {Globe}
       {ARTIST_ORDER.map((key, index) => {
         const artist = ARTISTS[key]
-        console.log(artist.name)
         return (
           <div key={key} style={artist.globePosition} className="number" onClick={() => history.push(`/last-museum/${artist.start}`)}>
             {index + 1}