-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
128 lines (123 loc) · 8.32 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
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Public Key Photography • take a selfie • leave a selfie • take a peek • say hello • 𝚜𝚝𝚎𝚙𝚑𝚝𝚑𝚎𝚐𝚎𝚎𝚔</title>
<meta name="author" content="Stephanie Pakrul aka stephthegeek">
<meta name="description" content="A photobooth & 24/7 webcam project in 20mission co-living space">
<meta name="keywords" content="photobooth,webcam">
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="🗝️📸🗝 Public Key Photography 🗝️📸🗝️">
<meta name="twitter:description" content="A photobooth & 24/7 webcam project in 20mission co-living space">
<meta name="twitter:site" content="@StephTheGeek">
<!-- Open Graph general (Facebook, Pinterest & Google+) -->
<meta name="og:title" content="🗝️📸🗝 𝙿𝚞𝚋𝚕𝚒𝚌 𝙺𝚎𝚢 𝙿𝚑𝚘𝚝𝚘𝚐𝚛𝚊𝚙𝚑𝚢 🗝️📸🗝️">
<meta name="og:description" content="A photobooth & 24/7 webcam project in 20mission co-living space">
<meta name="og:image" content="https://stephthegeek.com/pkp/images/og-banner.png">
<meta name="og:url" content="https://stephthegeek.com/pkp">
<meta name="og:site_name" content="Public Key Photography">
<meta name="fb:admins" content="683825042">
<meta name="og:type" content="website">
<link rel="shortcut icon" href="favicon.ico" type="image/vnd.microsoft.icon">
<link rel="icon" type="image/png" href="favicon-196x196.png" sizes="196x196" />
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" />
<link rel="icon" type="image/png" href="favicon-128.png" sizes="128x128" />
<link rel="stylesheet" href="style.css" type="text/css">
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-406204-1']);
_gaq.push(['_trackPageview']);
(function()
{
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<script type='text/javascript' src='softdivscroll.js'></script>
</head>
<body>
<div class="page-wrapper">
<div class="keyhole-outer">
<h1>Public Key Photography</h1>
<h5 class="dim"> by <a href="https://stephthegeek.com">Stephanie Pakrul</a></h5>
<div class="navbar">
<ul>
<li class="intro color-green"><a href="#top"><img src="images/px-key.svg" /></a></li>
<li class="what color-purple"><a href="#exhibit"><img src="images/px-camera.svg" /></a></li>
<li class="photos color-yellow"><a href="#photos"><img src="images/px-image.svg" /></a></li>
<li class="why color-green"><a href="#specs"><img src="images/px-question.svg" /></a></li>
<li class="who color-purple"><a href="#who"><img src="images/px-heart.svg" /></a></li>
<li class="links color-yellow"><a href="#links"><img src="images/px-link.svg" /></a></li>
</ul>
</div>
<div class="keyhole-bg"></div>
<div class="keyhole-inner" id="scrolldiv">
<a name="top"> </a><br /><br /><br />
<h3>Peer inside my world at the <a href="https://stephthegeek.smugmug.com/20mission">20mission</a> co-living community, live & 24/7...<br /><br />Stamp your own portrait to the photostream! <span class="tiny-text">📸</span></h3>
<a name="exhibit"> </a><h2>The Exhibit</h2>
<p><em>Public Key Photography</em> is an interactive photobooth that allows hallway passers-by to preview the always-on webcam in my room, and take their own snapshot that is instantly posted to the <a href="https://stephthegeek.com">StephTheGeek</a> Discord <a href="https://discord.gg/Kkyt2vz">chat community</a>.</p>
<p>I have been broadcasting my life online through various webcam installations since 2001. In today's world where we pose, curate, and filter selfies for semi-anonymous public consumption on sites such as Instagram, <em>PKP</em> delivers unaltered immediacy.</p>
<p><a href="https://stephthegeek.smugmug.com/20mission">20mission</a> is an eclectic community of 40+ individuals in a shared co-living space in San Francisco, California. As a technology artist, I am grateful for this opportunity to connect experimentations in online radical transparency with my social circle in meatspace, where housemates & their guests can participate in this public story!</p>
<a name="photos"> </a><h2>Installation Gallery</h2>
<p><a href="images/pkp-1.jpg" class="inline"><img src="images/pkp-1_sm.jpg" class="inline" /></a></p>
<p><a href="images/pkp-2.jpg" class="inline"><img src="images/pkp-2_sm.jpg" class="inline" /></a></p>
<p><a href="images/pkp-3.jpg" class="inline"><img src="images/pkp-3_sm.jpg" class="inline" /></a></p>
<h4>Example Photos</h4>
<div class="grid-wrapper">
<p><a href="images/photobooth-1.jpg" class="inline grid"><img src="images/photobooth-1_sm.jpg" class="inline grid" /></a></p>
<p><a href="images/photobooth-2.jpg" class="inline grid"><img src="images/photobooth-2_sm.jpg" class="inline grid" /></a></p>
<p><a href="images/photobooth-3.jpg" class="inline grid"><img src="images/photobooth-3_sm.jpg" class="inline grid" /></a></p>
<p><a href="images/photobooth-4.jpg" class="inline grid"><img src="images/photobooth-4_sm.jpg" class="inline grid" /></a></p>
</div><br style="clear:both;" />
<a name="specs"> </a>
<h2>Tech Specs</h2>
<ul>
<li>Nexus 5X Android phone</li>
<li>PopSocket mount</li>
<li>Software:
<ul>
<li>Fully Kiosk</li>
<li>One S10 Camera</li>
<li>Discord</li>
<li>Dolphin Browser</li>
</ul>
</li>
</ul>
<a name="who"> </a><h2>About the artist</h2>
<p class="sm-text">As 'StephTheGeek' since 2000, I have witnessed the art & play of the webcam evolve from intermittent 320x240px images to a diverse empire of HD streaming video. It was perhaps difficult to predict at the time that selfies would become such a defining aspect of internet culture.</p>
<p class="sm-text">My graduate studies at UC Berkeley were an attempt to comprehend the state of radical personal transparency I had thrown myself into. During the mid-2000s, I published a live stream of my web browsing activity, created the first cell phone-based webcam, and dabbled in pre-Foursquare era location sharing.</p>
<p class="sm-text">In exploring a lifestreamed, quantified view of the digital self, I unapologetically blend art & raw artist. Sexuality, science, collective consciousness, mental health, and unabashed positivity mixed with dark humor permeate my eclectic world.</p>
<a name="links"> </a><h2>Etc</h2>
<ul>
<li>Pixel icons by <a href="https://thenounproject.com/peter1153/">Tikhon Reztcov</a></li>
<li>Misc graphics by <a href="https://thenounproject.com/nomaddesigns/">Ashley van Dyck</a></li>
<li>Fonts:
<ul>
<li>Dolly Dots by <a href="https://www.dafont.com/jos-elsendoorn.d1197">Jos Elsendoorn</a></li>
<li>Pixel Operator by <a href="https://harvettfox96.neocities.org/">Jayvee Enaguas</a></li>
</ul>
</li>
<li>Glasses self portrait by the artist via <a href="https://www.sfmoma.org/self/9o5h01a"><em>#SelfComposed</em><a> at SFMOMA</li>
</ul>
<p><br /></p>
<p><br /></p>
<p><br /></p>
<p><br /></p>
<p><br /></p>
<p><br /></p>
<p><br /></p>
<p><br /></p>
<p><br /></p>
<p><br /></p>
</div>
</div>
</div>
<script type='text/javascript'>
new SoftDivScroll('scrolldiv');
</script>
</body>
</html>