add 2 new projects; remove bad numbering system in file names

- index page now sorts by page order, as specified in front matter for works - add orders to all projects in _works - rename files to abandon numbering scheme - add 2 new projects for 2023 - reaching out, circling back - stuck at home
kjhollen · Dec 15, 2023 · 5d2c5a7 · 5d2c5a7
1 parent bf69053
commit 5d2c5a7
Show file tree

Hide file tree

Showing 26 changed files with 96 additions and 18 deletions.
diff --git a/_work/013-chromogram.md → _work/chromogram.md b/_work/013-chromogram.md → _work/chromogram.md
@@ -8,6 +8,7 @@ thumbnail-alt: "Data visualization representing the edit history of a single use
 short-description: data visualization
 work-date: 2006
 columns: 3
+order: 22
 ---
 
 Chromogram is a visualization technique for revealing patterns in a large sequence of text data. While working with Martin Wattenberg and Fernanda Viégas, we applied this technique to individuals' contributions to Wikipedia. The first three letters of an article title or comment are respectively mapped to a hue, saturation, and brightness range, revealing patterns of editing and repeated tasks.

diff --git a/_work/001c-computer-visions.md → _work/computer-visions.md b/_work/001c-computer-visions.md → _work/computer-visions.md
@@ -8,9 +8,10 @@ short-description: software, print
 thumbnail-alt: "A collage of computer vision imagery from a computer screen, person's face, and their home in in bright greens, blues, and purples."
 columns: 2
 work-date: 2019
+order: 5
 ---
 
-<em>Computer Visions</em> is a print series that analyzes videos collected using <a href="{{ site.baseurl }}{% link _work/003b-phonelovesyoutoo-matrix.md %}">phonelovesyoutoo</a> and abstracts them using the visual language of computer vision algorithms.
+<em>Computer Visions</em> is a print series that analyzes videos collected using <a href="{{ site.baseurl }}{% link _work/phonelovesyoutoo-matrix.md %}">phonelovesyoutoo</a> and abstracts them using the visual language of computer vision algorithms.
 The images blend elements of the digital and physical environment captured by the device.
 
 <div class="invisible-margin image-grid">

diff --git a/_work/010-g-speak-draw.md → _work/g-speak-draw.md b/_work/010-g-speak-draw.md → _work/g-speak-draw.md
@@ -7,6 +7,7 @@ thumbnail-path: images/gsdraw-thumb.jpg
 thumbnail-alt: "Man creating and drawing virtual marks on a projection screen using gestural tracking software"
 short-description: gestural drawing
 work-date: 2009
+order: 19
 ---
 
 g-speak draw is an additive & subtractive gestural drawing installation. Performers can select color (black or white) and shape to draw with (circle or line), then squeeze hands (make a fist) to draw. I designed and developed this application as part of the Embodied Computation studio at RISD in 2009, led by instructor <a href="http://www.amberfj.com/">Amber Frid-Jimenez</a>.

diff --git a/_work/004-infinite-scroll.md → _work/infinite-scroll.md b/_work/004-infinite-scroll.md → _work/infinite-scroll.md
@@ -8,6 +8,7 @@ thumbnail-alt: "Man observes art installation with nine iPhones mounted on the w
 short-description: generative video, installation
 work-date: 2016
 columns: 2
+order: 11
 ---
 
 <div class="invisible-margin image-grid">

diff --git a/_work/007-mezzanine-gesture-ui.md → _work/mezzanine-gesture-ui.md b/_work/007-mezzanine-gesture-ui.md → _work/mezzanine-gesture-ui.md
@@ -8,9 +8,10 @@ thumbnail-alt: "A hand points a gestural wand at a screen, controlling the size
 short-description: collaborative conference room
 work-date: 2010-2015
 columns: 3
+order: 15
 ---
 
-The <a href="{{ site.baseurl }}{% link _work/005-mezzanine.md %}">Mezzanine</a> wand is a 6-degree-of-freedom device that enables pointing at any screen in a Mezzanine room.
+The <a href="{{ site.baseurl }}{% link _work/mezzanine.md %}">Mezzanine</a> wand is a 6-degree-of-freedom device that enables pointing at any screen in a Mezzanine room.
 The Mezzanine interface provides rich visual feedback about the wand's movement to build the user's trust and confidence in their ability to use the device.
 Mezzanine is built on Oblong's g-speak platform, which models both the wand and the displays in the room in a coherent 3D space.
 The wand can even be used to interact with elements that are not represented on a screen, simply by pointing at them (for example, pointing at a whiteboard to take a picture of it).

diff --git a/_work/006-mezzanine-ui.md → _work/mezzanine-ui.md b/_work/006-mezzanine-ui.md → _work/mezzanine-ui.md
@@ -8,6 +8,7 @@ thumbnail-alt: "A smartphone, tablet, and laptop computer showing the same scree
 short-description: collaborative conference room
 work-date: 2010-2015
 columns: 2
+order: 13
 ---
 
 <div class="invisible-margin image-grid">
@@ -17,7 +18,7 @@ columns: 2
 
 
 
-<a href="{{ site.baseurl }}{% link _work/005-mezzanine.md %}">Mezzanine</a> is a collaborative conference room product from <a href="http://www.oblong.com">Oblong Industries</a> with interfaces for mobile devices, laptops, and large scale displays.
+<a href="{{ site.baseurl }}{% link _work/mezzanine.md %}">Mezzanine</a> is a collaborative conference room product from <a href="http://www.oblong.com">Oblong Industries</a> with interfaces for mobile devices, laptops, and large scale displays.
 Users can interact with the shared screens in the conference room through their personal devices or a gestural wand.
 The user interface across all platforms has a cohesive look and feel, designed to be minimally obtrusive and let the user's content shine.
 In 2015, the Oblong design team updated the user interfaces for various platforms to be more consistent and I was the creative director for the project.

diff --git a/_work/005-mezzanine.md → _work/mezzanine.md b/_work/005-mezzanine.md → _work/mezzanine.md
@@ -8,6 +8,7 @@ thumbnail-alt: "Four people collaborating in a high-tech Oblong Mezzanine confer
 short-description: collaborative conference room
 work-date: 2010-2015
 columns: 4
+order: 12
 ---
 
 <div class="invisible-margin image-grid">
@@ -27,7 +28,7 @@ Participants can focus on getting work done together.
 As Oblong’s Director of Design and Computation, I recruited and led an interdisciplinary team to define the company’s design direction and build user interfaces for Mezzanine.
 The team developed a cohesive visual and interactive style across large-scale displays, mobile devices with iOS and Android, and browser-based interfaces on laptops.
 
-For an overview of Mezzanine features, see the videos below. See also: more details about the <a href="{{ site.baseurl }}{% link _work/006-mezzanine-ui.md %}">mobile and web UI design for Mezzanine</a> and the <a href="{{ site.baseurl }}{% link _work/007-mezzanine-gesture-ui.md %}">gestural interface for Mezzanine</a>.
+For an overview of Mezzanine features, see the videos below. See also: more details about the <a href="{{ site.baseurl }}{% link _work/mezzanine-ui.md %}">mobile and web UI design for Mezzanine</a> and the <a href="{{ site.baseurl }}{% link _work/mezzanine-gesture-ui.md %}">gestural interface for Mezzanine</a>.
 
 <div class="invisible-margin image-grid">
 <div class="col-30-block grid-margin-bottom video">

diff --git a/_work/014-openstudio.md → _work/openstudio.md b/_work/014-openstudio.md → _work/openstudio.md
@@ -8,6 +8,7 @@ thumbnail-alt: "The Openstudio homepage, with a feed of announcements, new drawi
 short-description: digital art community
 work-date: 2005-2008
 columns: 3
+order: 23
 ---
 
 Openstudio was an online experiment in collaboration, creativity, and capitalism created by the <a href="http://plw.media.mit.edu/">Physical Language Workshop</a> at the MIT Media Lab, led by <a href="https://twitter.com/johnmaeda">John Maeda</a>.

diff --git a/_work/003c-people-you-may-know.md → _work/people-you-may-know.md b/_work/003c-people-you-may-know.md → _work/people-you-may-know.md
@@ -8,6 +8,7 @@ thumbnail-alt: "A calendar grid of smartphone video taken simultaneously from th
 short-description: software, video projection
 work-date: 2018
 columns: 2
+order: 10
 ---
 
 <em>People You May Know</em> visualizes the aggregate data of a social network.

diff --git a/_work/003a-phonelovesyoutoo-database.md → _work/phonelovesyoutoo-database.md b/_work/003a-phonelovesyoutoo-database.md → _work/phonelovesyoutoo-database.md
@@ -8,6 +8,7 @@ thumbnail-alt: "A calendar grid of smartphone video taken simultaneously from th
 short-description: software, video projection
 work-date: 2016
 columns: 2
+order: 8
 ---
 
 <div class="invisible-margin image-grid">
@@ -17,7 +18,7 @@ columns: 2
 </div>
 
 <em>phonelovesyoutoo: database</em> displays one month of my phone activity as seen through the device's two cameras.
-The videos in this work were recorded using the same capture software and data from <a href="{{ site.baseurl }}{% link _work/003b-phonelovesyoutoo-matrix.md %}"><em>phonelovesyoutoo: matrix</em></a>.
+The videos in this work were recorded using the same capture software and data from <a href="{{ site.baseurl }}{% link _work/phonelovesyoutoo-matrix.md %}"><em>phonelovesyoutoo: matrix</em></a>.
 In a 24-hour period, the all recorded clips are displayed at the time of day they were originally recorded, providing a glimpse of the relationship between human, device, time, and physical space.
 The frame of the video contains 31 cells arranged like a calendar; one column for each day of the week and one row for each week in the month.
 Each cell contains a diptych of front and back camera videos from the corresponding days. The clips play during the time of day they were recorded.
@@ -48,4 +49,4 @@ Selected stills from the 24-hour video are shown below: 7:15am, 9:14am, 10:02am,
 </div>
 </div>
 
-See also: <a href="{{ site.baseurl }}{% link _work/003b-phonelovesyoutoo-matrix.md %}"><em>phonelovesyoutoo: matrix</em></a> and <a href="{{ site.baseurl }}{% link _work/002a-user-is-present.md %}"><em>USER_IS_PRESENT</em></a>.
+See also: <a href="{{ site.baseurl }}{% link _work/phonelovesyoutoo-matrix.md %}"><em>phonelovesyoutoo: matrix</em></a> and <a href="{{ site.baseurl }}{% link _work/user-is-present.md %}"><em>USER_IS_PRESENT</em></a>.
diff --git a/_work/003b-phonelovesyoutoo-matrix.md → _work/phonelovesyoutoo-matrix.md b/_work/003b-phonelovesyoutoo-matrix.md → _work/phonelovesyoutoo-matrix.md
@@ -8,6 +8,7 @@ thumbnail-alt: "Two walls covered in a video projection of a grid of many smartp
 columns: 4
 short-description: software, video projection
 work-date: 2016
+order: 9
 ---
 
 <div class="invisible-margin image-grid">
@@ -28,4 +29,4 @@ Each tile in the matrix captures habits, expressions, and neuroses. With the fac
 
 <i>phonelovesyoutoo: matrix</i> was recently exhibit at SFMOMA as part of the Snap + Share exhibition.
 
-See also: <a href="{{ site.baseurl }}{% link _work/003a-phonelovesyoutoo-database.md %}"><em>phonelovesyoutoo: database</em></a> and <a href="{{ site.baseurl }}{% link _work/002a-user-is-present.md %}"><em>USER_IS_PRESENT</em></a>.
+See also: <a href="{{ site.baseurl }}{% link _work/phonelovesyoutoo-database.md %}"><em>phonelovesyoutoo: database</em></a> and <a href="{{ site.baseurl }}{% link _work/user-is-present.md %}"><em>USER_IS_PRESENT</em></a>.
diff --git a/_work/reaching-out-circling-back.md b/_work/reaching-out-circling-back.md
@@ -0,0 +1,28 @@
+---
+layout: page
+type: work
+title: Reaching Out, Circling Back
+permalink: /reaching-out-circling-back/
+thumbnail-path: images/reaching-out-circling-back-thumb.png
+short-description: software, website
+thumbnail-alt: "Four screenshots of Reaching Out, Circling Back showing narration and user interface for mobile device: swiping through scenes in the website."
+columns: 3
+work-date: 2023
+order: 2
+---
+
+<div class="invisible-margin image-grid">
+  <div class="col-30-block grid-margin-bottom video">
+    <img style="margin-bottom:10px;" src="{{ site.baseurl }}/images/reaching-out-circling-back.png" alt="Four screenshots from reaching-out-circling-back.com">
+  </div>
+</div>
+
+<em>Reaching Out, Circling Back</em> is a web-based, game-like experience
+about touch and presence
+in online spaces. In this project, the visitor completes a series of swipe
+gestures and sees the touches of other people visiting the site at the same
+time, or those of past visitors. Visitors will never be entirely sure if the
+presence of others is real or generated by artificial intelligence.
+
+<a href="https://reaching-out-circling-back.com">reaching-out-circling-back.com</a> is best viewed on a mobile
+device.
diff --git a/_work/008-revolutionary-devices.md → _work/revolutionary-devices.md b/_work/008-revolutionary-devices.md → _work/revolutionary-devices.md
@@ -7,6 +7,7 @@ thumbnail-path: images/rev-devices-thumb.png
 thumbnail-alt: "Grid of pencil drawings of smartphones generated by a computer, with different, and sometimes strange, dimensions and button arrangements"
 short-description: software
 work-date: 2015
+order: 17
 ---
 
 <div class="invisible-margin image-grid"><div class="col-30-block"><img style="width: 100%;" src="{{ site.baseurl }}/images/rev-devices.png" alt="Collection of computer-generated, revolutionary smartphone sketches with random dimensions, buttons, and other facets"></div></div>

diff --git a/_work/009-rummage.md → _work/rummage.md b/_work/009-rummage.md → _work/rummage.md
@@ -7,6 +7,7 @@ thumbnail-path: images/rummage-thumb.jpg
 thumbnail-alt: "Man demonstrates rummage by controlling two large rectangles on a triptych of computer monitors using his arms outstretched to his side"
 short-description: color sort
 work-date: 2010
+order: 18
 ---
 Rummage is an image sorting & collating demo for <a href="http://www.oblong.com">Oblong</a>'s g-speak. Images are arranged in various configurations in 3D space and controlled by hand gestures.
 

diff --git a/_work/007-simple-business-machines.md → _work/simple-business-machines.md b/_work/007-simple-business-machines.md → _work/simple-business-machines.md
@@ -8,6 +8,7 @@ thumbnail-alt: "Computer generated grid of buttons, lights, levers, and knobs fr
 short-description: generative images
 work-date: 2015
 columns: 2
+order: 16
 ---
 
 <div class="invisible-margin image-grid">

diff --git a/_work/stuck-at-home.md b/_work/stuck-at-home.md
@@ -0,0 +1,27 @@
+---
+layout: page
+type: work
+title: Stuck at Home
+permalink: /stuck-at-home/
+thumbnail-path: images/stuck-at-home-thumb.jpg
+short-description: software, website
+thumbnail-alt: "A mobile device in a person's hand shows an abstract interface reiminscent of a device's home screen, but with photos of physical objects and environments as options instead of apps."
+columns: 3
+work-date: 2023
+order: 1
+---
+
+<div class="invisible-margin image-grid">
+<div class="col-30-block grid-margin-bottom video">
+<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://player.vimeo.com/video/876552274' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>
+</div>
+</div>
+
+<em>Stuck at Home</em> is an interactive work reflecting on the isolation of the COVID
+era, searching for (limited) connection through technology. Through a
+collection of buttons resembling the layout of a phone’s home screen, the work
+allows the user to browse a collection of cell phone videos taken in and around
+my home in Denver. Having moved to the city in 2020 without knowing a lot of
+people in the area, this work is an attempt a long distance connection, sharing
+the sights and textures of my day to day life in Denver with friends and family
+from afar.
diff --git a/_work/011-substrate.md → _work/substrate.md b/_work/011-substrate.md → _work/substrate.md
@@ -7,6 +7,7 @@ thumbnail-path: images/grid-thumb.jpg
 thumbnail-alt: "User demonstrating substrate capabilities by pointing two iPhones at a screen, distorting a grid of squares according to the movement of each device"
 short-description: processing sketch
 work-date: 2012
+order: 20
 ---
 
 <div class="invisible-margin image-grid">

diff --git a/_work/012-tangle.md → _work/tangle.md b/_work/012-tangle.md → _work/tangle.md
@@ -7,6 +7,7 @@ thumbnail-path: images/tangle-thumb.jpg
 thumbnail-alt: "Two performers wearing gesture tracking gloves to draw virtual lines between their hands on a distant screen"
 short-description: gestural drawing
 work-date: 2009
+order: 21
 ---
 Tangle is a simple gestural sketch that draws lines between the left and right hands of two participants. Lines follow participants hands in real time.
 

diff --git a/_work/001a-uploaded-to-the-cloud.md → _work/uploaded-to-the-cloud.md b/_work/001a-uploaded-to-the-cloud.md → _work/uploaded-to-the-cloud.md
@@ -8,11 +8,14 @@ short-description: software, website
 thumbnail-alt: "Computer generated clouds on a bright blue sky projected on to the Denver Clock Tower."
 columns: 2
 work-date: 2022
+order: 3
 ---
 
+
 <div class="invisible-margin image-grid">
 <div class="col-30-block grid-margin-bottom video">
-<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://player.vimeo.com/video/781305470' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>
+<style>.embed-container { position: relative; padding-bottom: 62.5%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'>
+<iframe src="https://player.vimeo.com/video/781305470" width="640" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>
 </div>
 </div>
 

diff --git a/_work/002b-user-is-present-grid.md → _work/user-is-present-grid.md b/_work/002b-user-is-present-grid.md → _work/user-is-present-grid.md
@@ -8,6 +8,7 @@ short-description: software, installation
 thumbnail-alt: "Person examines a grid of video collage portraits projected on a wall, showing a blend of a user's face, environment, and interface in user_is_present (grid series)"
 columns: 2
 work-date: 2019
+order: 7
 ---
 
 <div class="invisible-margin image-grid">
@@ -20,7 +21,7 @@ work-date: 2019
 <i>USER_IS_PRESENT (grid series)</i> shows a sequence of video and screen captures from a user's mobile device, looping in their entirety.
 The video reflects a series of habits, the simultaneity of checking out and checking in, a repetition, a set of gestures, a body performing the gestures; a human user.
 
-See also: <a href="{{ site.baseurl }}{% link _work/002a-user-is-present.md %}"><em>USER_IS_PRESENT</em></a>, <a href="{{ site.baseurl }}{% link _work/003b-phonelovesyoutoo-matrix.md %}"><em>phonelovesyoutoo: matrix</em></a> and <a href="{{ site.baseurl }}{% link _work/003a-phonelovesyoutoo-database.md %}"><em>phonelovesyoutoo: database</em></a>.
+See also: <a href="{{ site.baseurl }}{% link _work/user-is-present.md %}"><em>USER_IS_PRESENT</em></a>, <a href="{{ site.baseurl }}{% link _work/phonelovesyoutoo-matrix.md %}"><em>phonelovesyoutoo: matrix</em></a> and <a href="{{ site.baseurl }}{% link _work/phonelovesyoutoo-database.md %}"><em>phonelovesyoutoo: database</em></a>.
 
 <div class="invisible-margin image-grid">
 <div class="col-30-block grid-margin-bottom video">

diff --git a/_work/002a-user-is-present.md → _work/user-is-present.md b/_work/002a-user-is-present.md → _work/user-is-present.md
@@ -8,6 +8,7 @@ short-description: software, installation
 thumbnail-alt: "Woman examines a video collage portrait on a wall, showing a blend of a user's face, environment, and interface in user_is_present"
 columns: 4
 work-date: 2017
+order: 6
 ---
 
 <div class="invisible-margin image-grid">
@@ -59,7 +60,7 @@ The work examines the tensions of interface design for new technologies, from th
 </div>
 </div>
 
-To create <em>USER_IS_PRESENT</em>, I further developed the recording software used in <a href="{{ site.baseurl }}{% link _work/003b-phonelovesyoutoo-matrix.md %}"><em>phonelovesyoutoo: matrix</em></a> to capture the screen of the phone while it was in use, in addition to the front and back cameras.
+To create <em>USER_IS_PRESENT</em>, I further developed the recording software used in <a href="{{ site.baseurl }}{% link _work/phonelovesyoutoo-matrix.md %}"><em>phonelovesyoutoo: matrix</em></a> to capture the screen of the phone while it was in use, in addition to the front and back cameras.
 The same basic parameters applied: while the phone is in use, it records three video streams.
 The streams are later integrated together into a single channel.
 
@@ -72,4 +73,4 @@ The chance juxtaposition allows different references to be drawn between the scr
 
 Select stills from each of the three video portraits are shown above.
 
-See also: <a href="{{ site.baseurl }}{% link _work/003b-phonelovesyoutoo-matrix.md %}"><em>phonelovesyoutoo: matrix</em></a> and <a href="{{ site.baseurl }}{% link _work/003a-phonelovesyoutoo-database.md %}"><em>phonelovesyoutoo: database</em></a>.
+See also: <a href="{{ site.baseurl }}{% link _work/phonelovesyoutoo-matrix.md %}"><em>phonelovesyoutoo: matrix</em></a> and <a href="{{ site.baseurl }}{% link _work/phonelovesyoutoo-database.md %}"><em>phonelovesyoutoo: database</em></a>.
diff --git a/_work/001b-yell-it-out-room.md → _work/yell-it-out-room.md b/_work/001b-yell-it-out-room.md → _work/yell-it-out-room.md
@@ -8,6 +8,7 @@ short-description: software, web
 thumbnail-alt: "A collage of computer vision imagery from a computer screen, person's face, and their home in in bright greens, blues, and purples."
 columns: 2
 work-date: 2020
+order: 4
 ---
 
 <em><a href="https://www.supercharge2020.com/rooms/yelling-room">The Yell It Out Room</a></em> was designed for Supermajority, which is a non-profit organization that supports women’s issues in voting and politics.

diff --git a/images/reaching-out-circling-back-thumb.png b/images/reaching-out-circling-back-thumb.png
diff --git a/images/reaching-out-circling-back.png b/images/reaching-out-circling-back.png
diff --git a/images/stuck-at-home-thumb.jpg b/images/stuck-at-home-thumb.jpg
diff --git a/index.html b/index.html
@@ -13,13 +13,14 @@
 <div id="works">
   <div class="work-sizer"></div>
   <div class="gutter-sizer"></div>
-{% for item in site.work %}{% unless item.hide %}<div class="work {% if item.columns %}work--width{{item.columns}}{% endif %}">
-	<a href="{{ item.url }}">
-	<div>
-	<img src="{{ site.baseurl }}{{ item.thumbnail-path }}" alt="{{ item.thumbnail-alt }}"/>
-	</div>
-  <p><span class="work-title-splash">{{ item.title }}</span><span class="work-date"> {{ item.work-date }}</span></p>
-	</a>
+  {% assign sorted_works = site.work | sort:"order" %}
+  {% for item in sorted_works | sort:"order"%}{% unless item.hide %}<div class="work {% if item.columns %}work--width{{item.columns}}{% endif %}">
+  	<a href="{{ item.url }}">
+  	<div>
+  	<img src="{{ site.baseurl }}{{ item.thumbnail-path }}" alt="{{ item.thumbnail-alt }}"/>
+  	</div>
+    <p><span class="work-title-splash">{{ item.title }}</span><span class="work-date"> {{ item.work-date }}</span></p>
+  	</a>
 	</div>{% endunless %}{% endfor %}
 </div>