Merge branch 'master' of github.com:okfocus/portfolio

10 files changed, 191 insertions, 30 deletions

diff --git a/db.json b/db.json
index 35289b4..b7f5093 100644
--- a/db.json
+++ b/db.json
@@ -21,7 +21,7 @@
           "uri": "http://nytimes.com/"
         }
       ],
-      "__index": "0",
+      "__index": 1,
       "dateCreated": "Sat, 26 Mar 2016 20:34:21 GMT",
       "client": "Annapurna Pictures",
       "containImage": "false",
@@ -75,7 +75,7 @@
         "uri": "https://ltho.s3.amazonaws.com/e12aee73-07a1-41f4-a54f-8b8c09f167f9.png",
         "caption": ""
       },
-      "__index": 1,
+      "__index": 2,
       "dateCreated": "Mon, 28 Mar 2016 17:19:36 GMT",
       "iframe": "http://okfoc.us",
       "video": ""
@@ -106,7 +106,7 @@
           "uri": "http://www.ibtimes.com/what-viralism-inquiry-cultures-battle-digital-space-214392"
         }
       ],
-      "__index": 3,
+      "__index": 4,
       "dateCreated": "Mon, 28 Mar 2016 23:25:29 GMT"
     },
     {
@@ -138,8 +138,33 @@
           "uri": "https://news.artnet.com/art-world/a-brief-history-of-animated-gif-art-part-two-78532"
         }
       ],
-      "__index": 2,
+      "__index": 3,
       "dateCreated": "Mon, 28 Mar 2016 23:27:45 GMT"
+    },
+    {
+      "id": "spice-girls",
+      "title": "spice girls",
+      "year": 2011,
+      "client": "MOMA",
+      "link": "http://moonpies.org",
+      "NatureOfWork": "bam\r\ntoons\r\npoo",
+      "brief": "yes",
+      "media": [
+        {
+          "uri": "https://ltho.s3.amazonaws.com/6e924d4d-0f0d-4f72-a098-200bb663cd25.png",
+          "caption": "",
+          "type": "image"
+        }
+      ],
+      "containImage": "false",
+      "__index": "0",
+      "dateCreated": "Tue, 29 Mar 2016 15:45:57 GMT",
+      "press": [
+        {
+          "text": "google",
+          "uri": "google.com"
+        }
+      ]
     }
   ],
   "page": [
diff --git a/public/assets/img/d.png b/public/assets/img/d.png
new file mode 100644
index 0000000..9530c09
--- /dev/null
+++ b/public/assets/img/d.png
diff --git a/public/assets/img/l.png b/public/assets/img/l.png
new file mode 100644
index 0000000..383e388
--- /dev/null
+++ b/public/assets/img/l.png
diff --git a/public/assets/img/r.png b/public/assets/img/r.png
new file mode 100644
index 0000000..8fb6dfb
--- /dev/null
+++ b/public/assets/img/r.png
diff --git a/public/assets/tomato20dancing.gif b/public/assets/img/tomato20dancing.gif
index 0416665..0416665 100644
--- a/public/assets/tomato20dancing.gif
+++ b/public/assets/img/tomato20dancing.gif
diff --git a/public/assets/img/u.png b/public/assets/img/u.png
new file mode 100644
index 0000000..530d460
--- /dev/null
+++ b/public/assets/img/u.png
diff --git a/public/assets/img/x-w.png b/public/assets/img/x-w.png
new file mode 100644
index 0000000..076b63d
--- /dev/null
+++ b/public/assets/img/x-w.png
diff --git a/public/assets/img/x.png b/public/assets/img/x.png
new file mode 100644
index 0000000..71d3017
--- /dev/null
+++ b/public/assets/img/x.png
diff --git a/public/assets/ok.css b/public/assets/ok.css
index ee7282b..03b0a3b 100644
--- a/public/assets/ok.css
+++ b/public/assets/ok.css
@@ -26,6 +26,7 @@ a:visited {
     color: blue;
     font-weight: bold;
     font-size: 11px;
+    cursor:pointer;
 }
 
 body {
@@ -35,6 +36,78 @@ body {
     overflow: hidden;
 }
 
+.hidden {
+    display: none!important;
+}
+
+h1 {
+    font-size: 27px;
+    line-height: 32px;
+}
+
+h1 span {
+    font-size: 16px;
+    line-height: 20px;
+    width: 50%;
+    margin: 10px 0;
+}
+
+h2 {
+    font-size: 16px;
+    margin: 20px 0;
+}
+
+h3 {
+    font-size: 12px;
+}
+
+.intro a {
+    width: 100%;
+    display: inline-block;
+}
+
+.intro a:before {
+    content: "– ";
+}
+
+.intro {
+    font-size: 12px;
+    line-height: 20px;
+}
+
+.intro .left {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+    align-content: stretch;
+    align-items: flex-start;
+}
+
+.intro div {
+    width: 25%;
+    float: left;
+    clear: both;
+    height: 100%;
+    padding: 27px 5px 5px 5px;
+}
+
+.intro div.text {
+    width: 50%;
+    -webkit-column-count: 2;
+    -webkit-column-gap: 5px;
+    -moz-column-gap: 5px;
+    column-gap: 5px;
+    font-size: 12px;
+}
+
+.intro .right {
+    background: url(http://ryder-ripps.com/press/ryder-ripps.jpg)no-repeat center;
+    background-size: cover;
+    -webkit-filter: grayscale(100%);
+    filter: grayscale(100%);
+}
+
 .menu {
     position: fixed;
     height: 100vh;
@@ -95,6 +168,7 @@ menu ul {
     opacity: 0.1;
     transition: 150ms opacity cubic-bezier(0, 0, 0, 1);
     background: #eee;
+    cursor: url(img/x-w.png) 32 32, pointer;
 }
 
 div,
@@ -105,6 +179,7 @@ span {
 
 .item {
     height: 100vh;
+    width: 100%;
     display: -webkit-flex;
     display: flex;
     -webkit-flex-flow: column wrap;
@@ -114,7 +189,14 @@ span {
 
 body,
 nav {
-    background: #fff;
+    background: white;
+    transition: 300ms background 150ms;
+    transition-timing-function: cubic-bezier(0, 0, 0, 1);
+}
+
+.navopen nav,
+body.navopen {
+    background: #f9f9f9;
 }
 
 nav {
@@ -141,7 +223,7 @@ nav span {
 }
 
 .index {
-    width: 60px;
+    width: 65px;
     transition: 150ms width;
     transition-timing-function: cubic-bezier(0, 0, 0, 1);
 }
@@ -223,6 +305,28 @@ nav b {
     outline: none;
 }
 
+.flickity-viewport:before {
+    content: "";
+    height: 20vw;
+    width: 60vw;
+    position: absolute;
+    z-index: 3;
+    margin-left: 20vw;
+    cursor: url(img/u.png) 32 0, pointer;
+}
+
+
+.flickity-viewport:after {
+    content: "";
+    height: 20vw;
+    width: 60vw;
+    position: absolute;
+    z-index: 3;
+    bottom:0;
+    margin-left: 20vw;
+    cursor: url(img/d.png)32 64, pointer;
+}
+
 .flickity-viewport {
     overflow: hidden;
     position: relative;
@@ -235,30 +339,29 @@ nav b {
 }
 
 button {
-    width: 10vw;
+    width: 20vw;
     position: absolute;
     top: 0;
     background: transparent;
-    cursor: pointer;
 }
 
-.navopen button {
+.navopen button,
+.navopen iframe.cell {
     pointer-events: none;
 }
 
 button svg {
-    opacity: 0;
-    transition: 150ms all;
-    transition-timing-function: cubic-bezier(0, 0, 0, 1);
-    transform: scale(0.3);
+    display: none;
 }
 
 button.next {
     right: 0;
+    cursor: url(img/r.png)64 32, pointer;
 }
 
 button.previous {
     left: 0;
+    cursor: url(img/l.png) 0 32, pointer;
 }
 
 .desktop button.previous:hover svg,
@@ -267,8 +370,8 @@ button.previous {
     transform: scale(0.2);
 }
 
-button.next:active svg,
-button.previous:active svg {
+.desktop button.next:active svg,
+.desktop button.previous:active svg {
     transform: scale(0.1);
 }
 
@@ -286,7 +389,7 @@ button.previous:active svg {
 }
 
 .resizing .top {
-    background: url(tomato20dancing.gif)center;
+    background: url(img/tomato20dancing.gif)center;
 }
 
 .bottom {
@@ -294,6 +397,7 @@ button.previous:active svg {
     flex: 0 auto;
     overflow: hidden;
     padding: 5px 0;
+    cursor: url(img/d.png)32 64, pointer;
 }
 
 .five {
diff --git a/templates/index.liquid b/templates/index.liquid
index 1cda53b..a6b1e6e 100644
--- a/templates/index.liquid
+++ b/templates/index.liquid
@@ -30,12 +30,11 @@
 <body class="loading">
     <div class="menu">
         <ul>
-          {% for page in pages %}
+            {% for page in pages %}
             <li data-id="{{ page.id }}">{{ page.title }}</li>
-          {% endfor %}
-          {% for project in projects %}
+            {% endfor %} {% for project in projects %}
             <li data-id="{{ project.id }}">{{ project.title }}</li>
-          {% endfor %}
+            {% endfor %}
         </ul>
     </div>
     <nav>
@@ -57,22 +56,55 @@
               </svg>
             </div>
             <div>OKFocus LLC. - Portfolio • 2016</div>
-            <div>SLIDE.<b class="slide-no">1</b> • PG.<b class="page-no">1</b></div>
+            <div>e.g.<b class="slide-no">1</b> OF <b>3</b> • PG.<b class="page-no">1</b></div>
         </span>
     </nav>
+    <div class="item intro hidden">
+        <div class="left">
+            <h1>
+                20 Years of Creating Stuff On The Computer.
+                <span>Introduction by E.C.D., Ryder Ripps</span>
+            </h1>
+
+            <h3>
+                Accolades –
+                <br>
+                <a href="">Forbes Magazine, 30 under 30</a>
+                <a href="">Advertising Age, Creativity 50</a>
+                <br><br>
+                Press –
+                <br>
+                <a href="">New York Times</a>
+                <a href="">Details Magazine</a>
+                <a href="">Vice</a>
+                <a href="">Creators Project</a>
+                <a href="">The Fader</a>
+                <br><br>
+                Speaker At –
+                <br>
+                RISD, AIGA, Semi-Perminent, SXSW, Sotheby’s, Goethe Institut, Smithsonian, OTIS College
+                <br>
+                Clients ––
+                <br><br>
+                M.I.A., Smirnoff, MOCA, New Museum, Kanye West, Mike Will Made-It, Nike, Instagram, Bruno Mars, Atlantic Records, Universal Records, Liberty Science Center, Stone Island, Diesel, Red Bull, Kenzo,     FOX, HBO, VFILES, Been Trill,Tumblr, Paddles 8, Google
+            </h3>
+        </div>
+        <div class="text">
+            Form without function is bad. Being an artist these days has a lot to do with who you hangout with. Both my parents have their portraits by Warhol. I was born in 1986. I create physical work to freeze a moment of internet time. Being antisocial is cool now. People no longer look up from screens. I love animals, especially cats and llamas. OKFocus was started in 2011 after I creative directed VFiles and before I bought a 1987 BMW convertible but after I rewrote Ginsberg's Howl for the internet generation. I invented sea-punk as well as vapor-wave. I made a site in 2010 that allowed people to communicate in real-time with images, it hosts over 2 million images and is still running, Facebook probably got the idea of real-time fav notifications from us. Before that in 2009 I created an online museum for early internet graphics, after that I worked for M.I.A. pontificating online with her many nights at 2am. My girlfriend says I should be less braggy in this writing. I am considering writing a passage about her as a response. Tweets killed books. Images killed tweets. Clickbait killed images. I played Doom through a dial-up modem in 1995. I made earnest 3d graphics of dolphins jumping through hoops in Adobe Photoshop 3.0.I rewrote Ginsberg’s Howl for the internet generation. You can not call yourself a creative director unless you could take the place of anyone under your command, someone one told me that. I write CSS because it’s efficient. We create our own backends because templates don’t understand us as individuals. I strive to be understood as a human and as media. Good work exists outside of trends. Trends are just over simplifications of a pithy new things. I once tried to create luxury email in 2008. When asked to make Burberry “cooler” on the internet in I thought about what between luxury goods and the internet were at odds. I told a creative director that a luxury good is something those with enough money can stroll into a store and buy, while status online isn’t as the same. Online clout comes from having a lot of followers or a Wikipedia entry, things that have little connection to what an individual can or can not afford. I explained this and introduced a concept that I felt was genius. I told him that we needed to merge these two disparate worlds, and create luxury email. That’s right, for $30,000 consumers could purchase a Burberry email address, to flaunt their wealth and status within the virtual world. The creative director looked me right in the eye, with inexcusable disgust and plainly said, “that’s the worst idea i’ve ever heard” the following day I quit working at that agency and have been my own boss since – still on a mission to make luxury email a thing and innovate culture through multiple disciplines online. I had asthma, then I quit smoking. On my desk I have a large piece of driftwood. I am the only person you will ever meet who has spoken at RISD and never been fly fishing. Who has worked with Kanye West, The Wolfsonian Museum, Mike Will Made-It and spoken at The Smithsonian. I am not a rapper... 
+        </div>
+        <div class="right"></div>
+    </div>
     {% for project in projects %}
     <div class="item" data-id="{{ project.id }}">
         <div class="top">
-            {% for media in project.media %}
-              {% if media.type == 'image' %}
-                <div class="cell" style="background-image:url({{ media.uri }}); 
+            {% for media in project.media %} {% if media.type == 'image' %}
+            <div class="cell" style="background-image:url({{ media.uri }}); 
                 {% if media.caption %} background-size:{{ media.caption }}; {% endif %}"></div>
-              {% elsif media.type == 'vimeo' %}
-                <div class="cell video" data-video="{{ media.token }}"></div>
-              {% elsif media.type == 'link' %}
-                <iframe class="cell" src="{{ media.uri }}"></iframe>
-              {% endif %}
-            {% endfor %}
+            {% elsif media.type == 'vimeo' %}
+            <div class="cell video" data-video="{{ media.token }}"></div>
+            {% elsif media.type == 'link' %}
+            <iframe class="cell" src="{{ media.uri }}"></iframe>
+            {% endif %} {% endfor %}
         </div>
         <div class="bottom {% if project.press.length %}press{% else %}nopress{% endif %}">
             <div class="headings five">