diff options
| -rw-r--r-- | db.json | 452 | ||||
| -rw-r--r-- | index.js | 1 | ||||
| -rw-r--r-- | public/assets/js/lib/ProjectView.js | 7 | ||||
| -rw-r--r-- | public/assets/ok.css | 33 | ||||
| -rw-r--r-- | templates/index.liquid | 3 |
5 files changed, 200 insertions, 296 deletions
@@ -31,16 +31,9 @@ "alternateTitle": "", "mobileTitle": "", "linkText": "internetarchaeology.org", - "mobileMedia": [ - { - "uri": "http://internetarchaeology.org/digging.gif", - "caption": "background-size:cover; background-color:white;", - "type": "image" - } - ], + "mobileMedia": [], "whiteCursor": false, - "hideProject": false, - "disabled": false + "hideProject": false }, { "id": "annapurna-pictures", @@ -56,6 +49,11 @@ "uri": "http://159.203.133.91/", "caption": "", "type": "link" + }, + { + "uri": "https://ltho.s3.amazonaws.com/4be1663d-4d42-447d-97fe-495282dec3f3.png", + "caption": "", + "type": "image" } ], "containImage": "true", @@ -64,15 +62,10 @@ "press": [], "mobileTitle": "", "linkText": "annapurna.pictures", - "mobileMedia": [ - { - "uri": "https://ltho.s3.amazonaws.com/17499903-c9c6-4b68-82d1-b4f3089be90f.png", - "caption": "", - "type": "image" - } - ], + "mobileMedia": [], "whiteCursor": false, "hideProject": false, + "audio": "http://okfocus.s3.amazonaws.com/audio/_wiggle_03.WAV", "disabled": false }, { @@ -96,25 +89,20 @@ "height": "1080", "title": "background-color:white", "thumb": "http://okfocus.s3.amazonaws.com/misc/okcms/video.png" - } - ], - "press": [], - "mobileTitle": "", - "mobileMedia": [ - { - "uri": "https://ltho.s3.amazonaws.com/0cf17cdc-ae65-478a-b2ab-e3a878d58e22.png", - "caption": "", - "type": "image" }, { - "uri": "https://ltho.s3.amazonaws.com/dcf5dcde-d683-4af4-acdd-c9637b2dbc57.png", + "uri": "https://ltho.s3.amazonaws.com/332543c6-fa00-4fcb-9c34-070764e5a692.png", "caption": "", "type": "image" } ], + "press": [], + "mobileTitle": "", + "mobileMedia": [], "linkText": "View in App Store", "whiteCursor": false, "hideProject": false, + "audio": "http://okfocus.s3.amazonaws.com/audio/_WIKIT.WAV", "disabled": false }, { @@ -131,44 +119,32 @@ "dateCreated": "Sun, 03 Apr 2016 18:56:57 GMT", "media": [ { - "uri": "https://ltho.s3.amazonaws.com/d985ec45-d5e5-4ab5-a60f-af42b18a0859.jpg", + "uri": "https://ltho.s3.amazonaws.com/874c2a97-493a-4fd6-973a-a1f400d84e55.png", "caption": "", "type": "image" }, { - "uri": "https://ltho.s3.amazonaws.com/5fd898ee-c83f-4b59-a013-4596e685af8e.png", - "caption": "background-position:center", - "type": "image" - }, - { "uri": "https://ltho.s3.amazonaws.com/12eaa8d4-328e-45e5-bd54-3ac2125d4956.png", "caption": "", "type": "image" - } - ], - "press": [], - "mobileTitle": "", - "linkText": "View Lookbook", - "mobileMedia": [ - { - "uri": "https://ltho.s3.amazonaws.com/1f337646-49bc-45d0-92b6-ed8f3e017046.png", - "caption": "", - "type": "image" }, { - "uri": "https://ltho.s3.amazonaws.com/531b7c8d-4754-416e-8f3c-a2a19c5d820c.png", + "uri": "https://ltho.s3.amazonaws.com/5fd898ee-c83f-4b59-a013-4596e685af8e.png", "caption": "", "type": "image" }, { - "uri": "https://ltho.s3.amazonaws.com/4440a524-db52-4c99-8a41-0f721dace097.png", + "uri": "https://ltho.s3.amazonaws.com/d985ec45-d5e5-4ab5-a60f-af42b18a0859.jpg", "caption": "", "type": "image" } ], - "whiteCursor": false, - "hideProject": false, - "disabled": false + "press": [], + "mobileTitle": "", + "linkText": "View Lookbook", + "mobileMedia": [], + "whiteCursor": true, + "hideProject": false }, { "id": "g-o-o-d-music", @@ -184,6 +160,11 @@ "uri": "http://okfoc.us/300/reduced/good/", "caption": "", "type": "link" + }, + { + "uri": "https://ltho.s3.amazonaws.com/7ea562b7-e45d-4c3f-8f07-691741f71fe9.png", + "caption": "background-position: bottom center;background-color:#f9f9f9;background-size: contain;", + "type": "image" } ], "containImage": "true", @@ -192,16 +173,9 @@ "press": [], "mobileTitle": "", "linkText": "good-music.com", - "mobileMedia": [ - { - "uri": "https://ltho.s3.amazonaws.com/884c74a4-27d0-4beb-87cd-802b1d7ae553.png", - "caption": "", - "type": "image" - } - ], + "mobileMedia": [], "whiteCursor": false, - "hideProject": false, - "disabled": false + "hideProject": false }, { "id": "times-new-ramen", @@ -211,12 +185,17 @@ "client": "OKFocus", "link": "http://timesnewramen.com/", "NatureOfWork": "Type Design\r\nViral Media\r\nNoodle Consumption", - "brief": "In house font created to be the “most noodly serif font ever.”", + "brief": "In house font created to be the\r\nTimesNewRamen.com “most noodly serif font ever.”", "media": [ { "uri": "http://timesnewramen.com/typer", "caption": "", "type": "link" + }, + { + "uri": "https://ltho.s3.amazonaws.com/3337ba94-b25c-4374-8d63-e97ba833fb30.png", + "caption": "", + "type": "image" } ], "containImage": "true", @@ -233,17 +212,10 @@ "__index": 4, "dateCreated": "Sun, 03 Apr 2016 19:05:52 GMT", "mobileTitle": "", - "mobileMedia": [ - { - "uri": "https://ltho.s3.amazonaws.com/ecaeba52-a2ab-4bb6-bbd4-548c83a6f847.png", - "caption": "", - "type": "image" - } - ], + "mobileMedia": [], "linkText": "timesnewramen.com", - "whiteCursor": false, - "hideProject": false, - "disabled": false + "whiteCursor": true, + "hideProject": false }, { "id": "soylent-brand-development", @@ -276,17 +248,10 @@ "dateCreated": "Sun, 03 Apr 2016 19:12:17 GMT", "press": [], "mobileTitle": "Soylent Branding", - "mobileMedia": [ - { - "uri": "https://ltho.s3.amazonaws.com/portfolio/115eeba0-0017-11e6-8919-558e5e9bf555.png", - "caption": "", - "type": "image" - } - ], + "mobileMedia": [], "linkText": "View Brand Book", "whiteCursor": false, - "hideProject": false, - "disabled": false + "hideProject": false }, { "id": "soylent-website", @@ -316,23 +281,16 @@ "dateCreated": "Sun, 03 Apr 2016 19:23:53 GMT", "media": [ { - "uri": "http://okfoc.us/300/reduced/soylent/", - "caption": "", - "type": "link" - } - ], - "mobileTitle": "", - "linkText": "soylent.com", - "mobileMedia": [ - { "uri": "https://ltho.s3.amazonaws.com/b4eda603-4f51-4731-91e9-255672e0c2c6.png", "caption": "", "type": "image" } ], + "mobileTitle": "", + "linkText": "soylent.com", + "mobileMedia": [], "whiteCursor": false, - "hideProject": false, - "disabled": false + "hideProject": false }, { "id": "two-hustlers-", @@ -348,6 +306,11 @@ "uri": "http://twohustlers.com/", "caption": "", "type": "link" + }, + { + "uri": "https://ltho.s3.amazonaws.com/b543dda4-d8bb-4978-9c1c-25872a949c3a.png", + "caption": "", + "type": "image" } ], "containImage": "true", @@ -356,16 +319,9 @@ "dateCreated": "Sun, 03 Apr 2016 19:28:24 GMT", "mobileTitle": "", "linkText": "twohustlers.com", - "mobileMedia": [ - { - "uri": "https://ltho.s3.amazonaws.com/b543dda4-d8bb-4978-9c1c-25872a949c3a.png", - "caption": "", - "type": "image" - } - ], + "mobileMedia": [], "whiteCursor": false, - "hideProject": false, - "disabled": false + "hideProject": false }, { "id": "alone-together", @@ -469,23 +425,21 @@ "uri": "", "width": "1280", "height": "902", - "title": "loop6.mp4", + "title": "", "thumb": "http://okfocus.s3.amazonaws.com/misc/okcms/video.png" - } - ], - "press": [], - "mobileTitle": "", - "linkText": "", - "mobileMedia": [ + }, { "uri": "https://ltho.s3.amazonaws.com/3ce5af16-c554-4aa8-b8d6-5bf43cd9ae67.png", "caption": "background-size:contain", "type": "image" } ], - "whiteCursor": false, - "hideProject": false, - "disabled": false + "press": [], + "mobileTitle": "", + "linkText": "", + "mobileMedia": [], + "whiteCursor": true, + "hideProject": false }, { "id": "boy-oh-boy", @@ -604,9 +558,9 @@ "brief": "Wolfsonian is a premiere museum\r\nin Miami that celebrates industry\r\nand design. We helped them create\r\na new annual event titled Power of\r\nDesign, creating the identity for the\r\nevent", "media": [ { - "uri": "http://okfoc.us/300/wolfsonian-complaints/", - "caption": "", - "type": "link" + "uri": "https://ltho.s3.amazonaws.com/adeb3ac1-c708-4c48-a25c-59cecb5286cb.png", + "caption": "background-size:99.8%", + "type": "image" } ], "containImage": "true", @@ -616,9 +570,8 @@ "mobileTitle": "Power of Design", "mobileMedia": [], "linkText": "powerofdesign.wolfsonian.org", - "whiteCursor": true, - "hideProject": false, - "disabled": false + "whiteCursor": false, + "hideProject": false }, { "id": "no-fish-no-nothing", @@ -634,6 +587,11 @@ "uri": "http://okfoc.us/kenzo/", "caption": "", "type": "link" + }, + { + "uri": "https://ltho.s3.amazonaws.com/d2870d31-e417-49b4-8bb9-fe21e6e88d48.png", + "caption": "", + "type": "image" } ], "containImage": "true", @@ -655,21 +613,9 @@ "dateCreated": "Sun, 03 Apr 2016 20:36:13 GMT", "mobileTitle": "", "linkText": "kenzo.com/nofishnonothing", - "mobileMedia": [ - { - "uri": "https://ltho.s3.amazonaws.com/39fcc324-f4eb-458e-b21c-285ff0914c07.png", - "caption": "", - "type": "image" - }, - { - "uri": "https://ltho.s3.amazonaws.com/51022b2b-e903-4a71-a508-5468ea3aa824.png", - "caption": "", - "type": "image" - } - ], + "mobileMedia": [], "whiteCursor": false, - "hideProject": false, - "disabled": false + "hideProject": false }, { "id": "mike-will-made-it", @@ -685,6 +631,11 @@ "uri": "http://okfoc.us/300/mike-will/reduced/", "caption": "", "type": "link" + }, + { + "uri": "https://ltho.s3.amazonaws.com/f9a1d217-9120-437a-b9af-43ba7ac8dd1c.png", + "caption": "", + "type": "image" } ], "containImage": "true", @@ -693,16 +644,9 @@ "dateCreated": "Sun, 03 Apr 2016 20:39:45 GMT", "mobileTitle": "", "linkText": "mikewillmade.it", - "mobileMedia": [ - { - "uri": "https://ltho.s3.amazonaws.com/f9a1d217-9120-437a-b9af-43ba7ac8dd1c.png", - "caption": "", - "type": "image" - } - ], - "whiteCursor": false, - "hideProject": false, - "disabled": false + "mobileMedia": [], + "whiteCursor": true, + "hideProject": false }, { "id": "drake-shake-app", @@ -720,8 +664,13 @@ "uri": "", "width": "1920", "height": "1080", - "title": "background:black", + "title": "background-color:black", "thumb": "http://okfocus.s3.amazonaws.com/misc/okcms/video.png" + }, + { + "uri": "https://ltho.s3.amazonaws.com/ff8732a5-764b-4b14-8d66-3d66206d933f.png", + "caption": "", + "type": "image" } ], "containImage": "true", @@ -738,17 +687,10 @@ "__index": 17, "dateCreated": "Sun, 03 Apr 2016 20:45:42 GMT", "mobileTitle": "", - "mobileMedia": [ - { - "uri": "https://ltho.s3.amazonaws.com/ff8732a5-764b-4b14-8d66-3d66206d933f.png", - "caption": "", - "type": "image" - } - ], + "mobileMedia": [], "linkText": "View in App Store", - "whiteCursor": false, - "hideProject": false, - "disabled": false + "whiteCursor": true, + "hideProject": false }, { "id": "nike-hyperfeel", @@ -758,30 +700,28 @@ "client": "Nike", "link": "http://www.1948london.com/pano", "NatureOfWork": "Creative Direction\r\nGraphic Design\r\nBack-End Development", - "brief": "For the launch of Nike’s Hyperfeel\r\nshoe a gallery space in London was\r\ncreated complete with art which hosted\r\nworkshops showcasing the shoe’s\r\nlightness and agility. We created a\r\nwebsite featuring a custom back-end for\r\nthe workshop sign-ups as well as our own\r\nsignature 360˚ panoramic HTML5 solution\r\nwhere users from anywhere in the world\r\ncould experience the space with full 360˚\r\npanoramic views. In addition to the site,\r\nwe also facilitated the production of\r\npanoramic photography of the space.", + "brief": "For the launch of Nike’s Hyperfeel\r\nshoe a gallery space in London was\r\ncreated complete with art which hosted\r\nworkshops showcasing the shoe’s\r\nlightness and agility. We created a\r\nwebsite featuring a custom back-end for\r\nthe workshop sign-ups as well as our own\r\nsignature 360˚ panoramic HTML5 solution\r\nwhere users from anywhere in the world\r\ncould experience the space with full 360˚\r\npanoramic views. In addition to the site,\r\nwe also facilitated the production the\r\npanoramic photography of the space.", "containImage": "true", "__index": 18, "dateCreated": "Sun, 03 Apr 2016 21:01:37 GMT", "media": [ { - "uri": "http://okfoc.us/300/reduced/feellondon/", + "uri": "http://www.1948london.com/pano", "caption": "", "type": "link" - } - ], - "press": [], - "mobileTitle": "", - "linkText": "1948london.com", - "mobileMedia": [ + }, { "uri": "https://ltho.s3.amazonaws.com/c014af1f-4d79-4191-bda0-8150dd5a2ec1.png", "caption": "", "type": "image" } ], - "whiteCursor": false, - "hideProject": false, - "disabled": false + "press": [], + "mobileTitle": "", + "linkText": "1948london.com", + "mobileMedia": [], + "whiteCursor": true, + "hideProject": false }, { "id": "treasure-dance", @@ -836,6 +776,16 @@ "height": "1080", "title": "background-color:black", "thumb": "http://okfocus.s3.amazonaws.com/misc/okcms/video.png" + }, + { + "uri": "https://ltho.s3.amazonaws.com/118baf27-0eea-4713-b140-b32567ef91fa.png", + "caption": "", + "type": "image" + }, + { + "uri": "https://ltho.s3.amazonaws.com/fc9497c9-6f08-40cb-9f0d-d3c23004d449.png", + "caption": "", + "type": "image" } ], "containImage": "false", @@ -856,22 +806,10 @@ "__index": 20, "dateCreated": "Sun, 03 Apr 2016 21:10:21 GMT", "mobileTitle": "", - "mobileMedia": [ - { - "uri": "https://ltho.s3.amazonaws.com/118baf27-0eea-4713-b140-b32567ef91fa.png", - "caption": "", - "type": "image" - }, - { - "uri": "https://ltho.s3.amazonaws.com/fc9497c9-6f08-40cb-9f0d-d3c23004d449.png", - "caption": "", - "type": "image" - } - ], + "mobileMedia": [], "linkText": "View in App Store", - "whiteCursor": false, - "hideProject": false, - "disabled": false + "whiteCursor": true, + "hideProject": false }, { "id": "been-trill", @@ -884,9 +822,14 @@ "brief": "We began working with infamous streetwear\r\ncompany, Been Trill, since their start.\r\nWe designed and built their e-commerce\r\nwebsite, which was like no other on the\r\ninternet. Products were displayed in 3D\r\nspace and the site featured an animated\r\nGIF social network where fans could\r\ncreate and share animations.", "media": [ { - "uri": "http://okfoc.us/300/reduced/beentrill/", + "uri": "http://okfoc.us/300/beentrill", "caption": "", "type": "link" + }, + { + "uri": "https://ltho.s3.amazonaws.com/7f202909-b6e2-47c9-ab17-a35c9deb118a.png", + "caption": "", + "type": "image" } ], "containImage": "true", @@ -900,16 +843,9 @@ "dateCreated": "Sun, 03 Apr 2016 21:11:32 GMT", "mobileTitle": "", "linkText": "beentrill.com", - "mobileMedia": [ - { - "uri": "https://ltho.s3.amazonaws.com/7f202909-b6e2-47c9-ab17-a35c9deb118a.png", - "caption": "", - "type": "image" - } - ], + "mobileMedia": [], "whiteCursor": false, - "hideProject": false, - "disabled": false + "hideProject": false }, { "id": "paddles-on", @@ -958,13 +894,9 @@ "brief": "We were approached by Animation\r\nDomination High Definition, a block\r\nof animated content airing on FOX\r\nSaturday nights, to create a website\r\nto house their content in a way that\r\nwould be apropos to their young and\r\ninternet aware audience. For this\r\nwe invented a method to create GIF\r\nanimations directly from the shows,\r\na feature that has since been copied\r\nby several leading networks.", "media": [ { - "type": "video", - "token": "https://ltho.s3.amazonaws.com/portfolio/fox-adhd-iMac-video.mp4", - "uri": "", - "width": "1920", - "height": "1080", - "title": "background-color:white", - "thumb": "http://okfocus.s3.amazonaws.com/misc/okcms/video.png" + "uri": "https://ltho.s3.amazonaws.com/f1a8b089-a430-415e-be86-bdd1d06aa6ac.png", + "caption": "", + "type": "image" } ], "containImage": "true", @@ -973,16 +905,9 @@ "dateCreated": "Sun, 03 Apr 2016 21:17:55 GMT", "mobileTitle": "", "linkText": "foxadhd.com", - "mobileMedia": [ - { - "uri": "https://ltho.s3.amazonaws.com/f1a8b089-a430-415e-be86-bdd1d06aa6ac.png", - "caption": "", - "type": "image" - } - ], - "whiteCursor": false, - "hideProject": false, - "disabled": false + "mobileMedia": [], + "whiteCursor": true, + "hideProject": false }, { "id": "crisis-response", @@ -1057,13 +982,9 @@ "brief": "Commissioned by Intel/The Creators\r\nProject we created an in-browser music\r\nvideo and in doing so pioneered Alpha\r\nChannel Video – a technique allowing\r\nfor layering HTML5 video elements. The\r\nwebsite allows users to deconstruct\r\nthe audio and video, creating their own\r\nversions. The site transposes the familiar\r\ninterface of Adobe Photoshop – as we\r\nbelieve even website’s with new functions\r\nshouldn’t come with manuals rather they\r\nshould naturally inspire play from the getgo.", "media": [ { - "type": "video", - "token": "https://ltho.s3.amazonaws.com/portfolio/tanlines-iMac-video.mp4", - "uri": "", - "width": "1920", - "height": "1080", - "title": "background-color:white", - "thumb": "http://okfocus.s3.amazonaws.com/misc/okcms/video.png" + "uri": "https://ltho.s3.amazonaws.com/aa76d72e-cdee-4f6a-8d34-2f57972a464f.png", + "caption": "", + "type": "image" } ], "containImage": "true", @@ -1071,17 +992,10 @@ "__index": 26, "dateCreated": "Sun, 03 Apr 2016 21:24:03 GMT", "mobileTitle": "Not The Same", - "mobileMedia": [ - { - "uri": "https://ltho.s3.amazonaws.com/aa76d72e-cdee-4f6a-8d34-2f57972a464f.png", - "caption": "", - "type": "image" - } - ], + "mobileMedia": [], "linkText": "notthesa.me", "whiteCursor": false, - "hideProject": false, - "disabled": false + "hideProject": false }, { "id": "draw-with-your-face", @@ -1095,12 +1009,17 @@ "media": [ { "type": "video", - "token": "https://ltho.s3.amazonaws.com/portfolio/draw-with-your-face-iMac-video.mp4", + "token": "http://okfocus.s3.amazonaws.com/nike/video/src/dwyf.mp4", "uri": "", - "width": "1920", - "height": "1080", - "title": "background-color:white", + "width": "1280", + "height": "845", + "title": "", "thumb": "http://okfocus.s3.amazonaws.com/misc/okcms/video.png" + }, + { + "uri": "https://ltho.s3.amazonaws.com/b64d53ba-af07-4ef0-a16b-786eacafd979.png", + "caption": "background-size:70%", + "type": "image" } ], "containImage": "false", @@ -1109,16 +1028,9 @@ "dateCreated": "Sun, 03 Apr 2016 21:25:33 GMT", "mobileTitle": "", "linkText": "View in Hangouts", - "mobileMedia": [ - { - "uri": "https://ltho.s3.amazonaws.com/3875d5c9-8d7f-435f-ba90-953a9317a568.png", - "caption": "", - "type": "image" - } - ], + "mobileMedia": [], "whiteCursor": false, - "hideProject": false, - "disabled": false + "hideProject": false }, { "id": "tug-of-store", @@ -1131,9 +1043,9 @@ "brief": "An early experiment in real-time web\r\nexperience, this site for taste making\r\nsocial network, Svpply, allowed users to\r\ncollectively decide if a product was “cool”\r\nor “crap.” The sea of cursors updated\r\nreal-time as users would click on one side\r\nor another, effectively playing a massive\r\ngroup tug of war, choosing the fate of a\r\nproduct within Svpply’s database. Svpply\r\nsoon after was purchased by eBay.", "media": [ { - "uri": "http://okfoc.us/300/reduced/tug/#standalone", + "uri": "https://ltho.s3.amazonaws.com/652f496b-6589-4377-bf53-9c772a0472d0.jpg", "caption": "", - "type": "link" + "type": "image" } ], "containImage": "false", @@ -1151,15 +1063,9 @@ "dateCreated": "Sun, 03 Apr 2016 21:26:54 GMT", "mobileTitle": "", "linkText": "", - "mobileMedia": [ - { - "uri": "https://ltho.s3.amazonaws.com/652f496b-6589-4377-bf53-9c772a0472d0.jpg", - "caption": "" - } - ], + "mobileMedia": [], "whiteCursor": false, - "hideProject": false, - "disabled": false + "hideProject": false }, { "id": "item-idem", @@ -1246,6 +1152,11 @@ "uri": "http://okfoc.us/300/landart/", "caption": "", "type": "link" + }, + { + "uri": "https://ltho.s3.amazonaws.com/b9ae7c1f-5ec7-4a82-994d-92b7927a8d3b.png", + "caption": "", + "type": "image" } ], "containImage": "false", @@ -1262,17 +1173,10 @@ "__index": 31, "dateCreated": "Sun, 03 Apr 2016 21:30:57 GMT", "mobileTitle": "MOCA Land Art", - "mobileMedia": [ - { - "uri": "https://ltho.s3.amazonaws.com/b9ae7c1f-5ec7-4a82-994d-92b7927a8d3b.png", - "caption": "", - "type": "image" - } - ], + "mobileMedia": [], "linkText": "moca.org/landart", - "whiteCursor": false, - "hideProject": false, - "disabled": false + "whiteCursor": true, + "hideProject": false }, { "id": "smirnoff-dance-exchange", @@ -1285,13 +1189,9 @@ "brief": "The Smirnoff Dance Exchange was\r\na day long global party happening in\r\n12 cities around the world. We built\r\na photo-booth that would capture\r\nGIF animations of party-goers\r\ndancing and post it to a website we\r\ncreated. The images also served as\r\nthe backdrop to the main event, a\r\nMadonna concert in New York City.", "media": [ { - "type": "video", - "token": "https://ltho.s3.amazonaws.com/portfolio/smirnoff-iMac-video.mp4", - "uri": "", - "width": "1920", - "height": "1080", - "title": "background-color:white", - "thumb": "http://okfocus.s3.amazonaws.com/misc/okcms/video.png" + "uri": "https://ltho.s3.amazonaws.com/2b1ec406-a396-4cb6-8d1c-9f03911a854e.png", + "caption": "", + "type": "image" } ], "containImage": "true", @@ -1299,17 +1199,10 @@ "__index": 32, "dateCreated": "Sun, 03 Apr 2016 21:31:59 GMT", "mobileTitle": "Smirnoff", - "mobileMedia": [ - { - "uri": "https://ltho.s3.amazonaws.com/2b1ec406-a396-4cb6-8d1c-9f03911a854e.png", - "caption": "", - "type": "image" - } - ], + "mobileMedia": [], "linkText": "danceexchange.net", - "whiteCursor": false, - "hideProject": false, - "disabled": false + "whiteCursor": true, + "hideProject": false }, { "id": "vfiles", @@ -1353,13 +1246,9 @@ "brief": "Beginning in 2010, Ripps creative directed\r\nand designed many key assets for\r\nartist MIA’s album, /\\/\\/\\Y/\\ and the\r\nsubsequent mixtape, Vicki Leekx. One of\r\nthe sites released, facefacefacebook.com,\r\nused webcam face tracking technology\r\nto allow fans to create their own version\r\nof her album cover by overlaying YouTube\r\nbars onto their own face.", "media": [ { - "type": "video", - "token": "https://ltho.s3.amazonaws.com/portfolio/mia-facebook-iMac-video.mp4", - "uri": "", - "width": "1920", - "height": "1080", - "title": "background-color:white", - "thumb": "http://okfocus.s3.amazonaws.com/misc/okcms/video.png" + "uri": "https://ltho.s3.amazonaws.com/b95bd68f-f0c9-46b2-a8ad-5484a7c59c25.png", + "caption": "background-size:contain;\r\nbackground-color:black;", + "type": "image" } ], "containImage": "false", @@ -1373,16 +1262,9 @@ "dateCreated": "Sun, 03 Apr 2016 21:35:41 GMT", "mobileTitle": "", "linkText": "facefacefacebook.com", - "mobileMedia": [ - { - "uri": "https://ltho.s3.amazonaws.com/b95bd68f-f0c9-46b2-a8ad-5484a7c59c25.png", - "caption": "background-size:contain;\r\nbackground-color:black;", - "type": "image" - } - ], - "whiteCursor": false, - "hideProject": false, - "disabled": false + "mobileMedia": [], + "whiteCursor": true, + "hideProject": false }, { "id": "album-covers", @@ -1463,7 +1345,7 @@ { "id": "introduction", "title": "Introduction", - "body": "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... ", + "body": "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. The photo on the right was for a Sean John ad I modeled for. 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... ", "press": [ { "text": "New York Times", @@ -1488,7 +1370,7 @@ ], "speakers": "RISD, AIGA, Semi-Permanent, SXSW, Sotheby’s, Goethe Institut, Smithsonian, OTIS College", "clients": "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", - "__index": 0, + "__index": "0", "dateCreated": "Tue, 05 Apr 2016 22:16:32 GMT", "accolades": [ { @@ -41,6 +41,7 @@ var app = okcms.createApp({ media: {type: 'media-list'}, mobileMedia: {type: 'media-list'}, press: {type: 'link-list'}, + audio: {type: 'string'}, whiteCursor: {type: 'flag'}, disabled: {type: 'flag'}, }, diff --git a/public/assets/js/lib/ProjectView.js b/public/assets/js/lib/ProjectView.js index a0e0055..c269d38 100644 --- a/public/assets/js/lib/ProjectView.js +++ b/public/assets/js/lib/ProjectView.js @@ -17,6 +17,7 @@ var ProjectView = View.extend({ this.images = this.$images.toArray().map(function(img){ return $(img).data("uri") }) + if (is_mobile) { this.$iframes.remove() this.$videos.remove() @@ -76,6 +77,7 @@ var ProjectView = View.extend({ }, show: function(){ + var audio = this.$("audio") app.header.updatePageNumber( this.page_number ) app.header.updateSlideNumber( 0 ) app.header.updateSlideCount( this.slide_count ) @@ -86,7 +88,9 @@ var ProjectView = View.extend({ app.router.pushState("/") } else { + audio.get(0).play(); app.router.pushState("/project/" + this.project_id) + } this.$images.each(function(){ @@ -120,6 +124,7 @@ var ProjectView = View.extend({ }, hide: function(){ + addClassForPeriod( this.el, "hiding", app.navigation_delay, function(){ this.reset() }.bind(this) ) @@ -140,12 +145,14 @@ var ProjectView = View.extend({ if (is_mobile) return; e.stopPropagation() app.nav.previous() + audio.pause(); }, next: function(e){ if (is_mobile) return; e.stopPropagation() app.nav.next() + audio.pause(); }, }) diff --git a/public/assets/ok.css b/public/assets/ok.css index 14a8cd6..63e53d6 100644 --- a/public/assets/ok.css +++ b/public/assets/ok.css @@ -20,7 +20,12 @@ html { ::-moz-selection { color: blue; } - +audio { + position:fixed; + top:-800000px; + left:-90000px; + opacity:0; +} a, a:visited { color: blue; @@ -115,9 +120,9 @@ h3 { .intro div.text { width: 50%; -webkit-column-count: 2; - -webkit-column-gap: 5px; - -moz-column-gap: 5px; - column-gap: 5px; + -webkit-column-gap: 10px; + -moz-column-gap: 10px; + column-gap: 10px; font-size: 12px; } @@ -713,7 +718,7 @@ nav { .projectLink { display: block; - + margin-top:3px; } ul li { @@ -749,18 +754,24 @@ ul li { .projectLink { margin-top: 3px; } + .intro div.text, h3 { + font-size:14px; + line-height: 20px; + } + } -/* - @media (min-width: 1400px) { - .texts { - font-size: 14px; - line-height: 16px; - } + + @media (min-width: 1500px) { + .intro div.text, h3 { + font-size:16px; + line-height: 24px; + } } + /* @media (min-width: 1600px) { .texts { font-size: 15px; diff --git a/templates/index.liquid b/templates/index.liquid index 2350f47..d9c2576 100644 --- a/templates/index.liquid +++ b/templates/index.liquid @@ -141,6 +141,9 @@ OKFocus, Bonafide Internet Legends © 2016 {% for project in projects %} {% unless project.disabled %} <div class="item" data-id="{{ project.id }}"> + <audio> + <source src="{{ project.audio }}"> + </audio> <div class="top {% if project.media[2] %}gallery{% else %}single{% endif %} {% if project.whiteCursor %}whitecursor{% endif %}"> {% for media in project.media %} {% if media.type == 'image' %} |