From 389f6443e5cee43075406c5dfe1ab3c112cf7209 Mon Sep 17 00:00:00 2001 From: “Ryder <“r@okfoc.us”> Date: Mon, 11 Apr 2016 19:43:50 -0400 Subject: audio --- db.json | 452 +++++++++++++----------------------- index.js | 1 + public/assets/js/lib/ProjectView.js | 7 + public/assets/ok.css | 33 ++- templates/index.liquid | 3 + 5 files changed, 200 insertions(+), 296 deletions(-) diff --git a/db.json b/db.json index 93167fa..d3cb155 100644 --- a/db.json +++ b/db.json @@ -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", @@ -315,24 +280,17 @@ "__index": 5, "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": [ { diff --git a/index.js b/index.js index fe51393..c898311 100644 --- a/index.js +++ b/index.js @@ -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 %}
+
{% for media in project.media %} {% if media.type == 'image' %} -- cgit v1.2.3-70-g09d2 From bf3866dafd959c62af32a03981e93f589b5a672f Mon Sep 17 00:00:00 2001 From: “Ryder <“r@okfoc.us”> Date: Tue, 12 Apr 2016 18:38:04 -0400 Subject: no more audio --- db.json | 9 --------- public/assets/js/lib/ProjectView.js | 3 --- 2 files changed, 12 deletions(-) diff --git a/db.json b/db.json index c842389..3681d5c 100644 --- a/db.json +++ b/db.json @@ -99,15 +99,6 @@ ], "press": [], "mobileTitle": "", - "mobileMedia": [ - { - "uri": "https://ltho.s3.amazonaws.com/portfolio/36074a60-002b-11e6-8919-558e5e9bf555.gif", - "caption": "background-size:contain; background-position:center;", - "type": "image" - } - ], - "press": [], - "mobileTitle": "", "mobileMedia": [], "linkText": "View in App Store", "whiteCursor": false, diff --git a/public/assets/js/lib/ProjectView.js b/public/assets/js/lib/ProjectView.js index 30c70ac..66bb3b6 100644 --- a/public/assets/js/lib/ProjectView.js +++ b/public/assets/js/lib/ProjectView.js @@ -88,7 +88,6 @@ var ProjectView = View.extend({ app.router.pushState("/") } else { - audio.get(0).play(); app.router.pushState("/project/" + this.project_id) } @@ -145,14 +144,12 @@ 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(); }, }) -- cgit v1.2.3-70-g09d2 From 0b37cff025c4f30107319e374ae44a49f3bed979 Mon Sep 17 00:00:00 2001 From: “Ryder <“r@okfoc.us”> Date: Tue, 12 Apr 2016 18:51:11 -0400 Subject: target blank --- public/assets/ok.css | 3 +-- templates/index.liquid | 4 ++-- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/public/assets/ok.css b/public/assets/ok.css index 63e53d6..b0a9c12 100644 --- a/public/assets/ok.css +++ b/public/assets/ok.css @@ -30,7 +30,6 @@ a, a:visited { color: blue; font-weight: bold; - font-size: 11px; cursor: pointer; } @@ -754,7 +753,7 @@ ul li { .projectLink { margin-top: 3px; } - .intro div.text, h3 { + .intro div.text, h3, .left a { font-size:14px; line-height: 20px; } diff --git a/templates/index.liquid b/templates/index.liquid index d9c2576..dba72cb 100644 --- a/templates/index.liquid +++ b/templates/index.liquid @@ -115,13 +115,13 @@ OKFocus, Bonafide Internet Legends © 2016 Accolades –
{% for link in intro.accolades %} - {{ link.text }} + {{ link.text }} {% endfor %}

Press –
{% for link in intro.press %} - {{ link.text }} + {{ link.text }} {% endfor %}

Speaker At – -- cgit v1.2.3-70-g09d2 From 58311f52ee0d34ea1bed9cdcfebec2b95b956df2 Mon Sep 17 00:00:00 2001 From: “Ryder <“r@okfoc.us”> Date: Tue, 12 Apr 2016 19:37:00 -0400 Subject: type and img --- db.json | 4 ++-- public/assets/img/ryder-ripps.gif | Bin 0 -> 197976 bytes public/assets/ok.css | 19 +++++++++++-------- templates/index.liquid | 2 +- 4 files changed, 14 insertions(+), 11 deletions(-) create mode 100644 public/assets/img/ryder-ripps.gif diff --git a/db.json b/db.json index 3681d5c..1814cc0 100644 --- a/db.json +++ b/db.json @@ -1455,7 +1455,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. 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... ", + "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 vaporwave. 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 was once in a boyband called HDBOYZ. I am the only member of a boy band who is also proficient in both CSS3 and has shot a campaign for Marc Jacobs. 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, knows how to pickle peppers and can write CSS with their eyes closed. Who has worked with Kanye West, The Wolfsonian Museum, Mike Will Made-It and spoken at The Smithsonian. I am not a rapper, but I do have a rap song dedicated to Tory Burch. My name has been published in 6 books, three of which are not in english. My mom makes the best chicken soup in the world, I made a documentary about it when I was 15, it aired on public television. I think microscopes and telescopes are equally as cool. I literally don’t know how the universe started but I would sure like to find out, but at the same time wonder if that would even be gratifying. I am looking for new experiences, to become a better person, to help others, to have fun, to be honest, to contribute something new, to be myself, to love and be loved and I am glad you are reading this. Please don't hesitate to ask questions.", "press": [ { "text": "New York Times", @@ -1480,7 +1480,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": [ { diff --git a/public/assets/img/ryder-ripps.gif b/public/assets/img/ryder-ripps.gif new file mode 100644 index 0000000..0dd6d08 Binary files /dev/null and b/public/assets/img/ryder-ripps.gif differ diff --git a/public/assets/ok.css b/public/assets/ok.css index b0a9c12..d6c03d2 100644 --- a/public/assets/ok.css +++ b/public/assets/ok.css @@ -11,6 +11,7 @@ html { outline: 0; border: 0; -webkit-appearance: none; + -webkit-font-smoothing: subpixel-antialiased; } ::selection { @@ -95,7 +96,7 @@ h3 { } .intro { - font-size: 12px; + font-size: 14px; line-height: 20px; } @@ -122,11 +123,10 @@ h3 { -webkit-column-gap: 10px; -moz-column-gap: 10px; column-gap: 10px; - font-size: 12px; } .intro .right { - background: url(http://ryder-ripps.com/press/ryder-ripps.jpg)no-repeat center; + background: url(img/ryder-ripps.gif)no-repeat center; background-size: cover; -webkit-filter: grayscale(100%); filter: grayscale(100%); @@ -753,7 +753,7 @@ ul li { .projectLink { margin-top: 3px; } - .intro div.text, h3, .left a { + .intro div.text, h3, .left a { font-size:14px; line-height: 20px; } @@ -763,11 +763,14 @@ ul li { @media (min-width: 1500px) { - .intro div.text, h3 { - font-size:16px; - line-height: 24px; + .intro div.text, h3, .left a { + font-size: 16px; + line-height: 25px; } - +h1 { + font-size: 40px; + line-height: 50px; +} } /* diff --git a/templates/index.liquid b/templates/index.liquid index dba72cb..c8c040f 100644 --- a/templates/index.liquid +++ b/templates/index.liquid @@ -200,7 +200,7 @@ OKFocus, Bonafide Internet Legends © 2016 -- cgit v1.2.3-70-g09d2 From 8b7a217d2cf381b13d2f90f8482c8b4305b093ac Mon Sep 17 00:00:00 2001 From: “Ryder <“r@okfoc.us”> Date: Tue, 12 Apr 2016 19:46:19 -0400 Subject: portfolio --- public/assets/ok.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/assets/ok.css b/public/assets/ok.css index d6c03d2..1fb8321 100644 --- a/public/assets/ok.css +++ b/public/assets/ok.css @@ -143,7 +143,7 @@ h3 { } .intro.cover .right { - background: url(img/crater.gif)no-repeat center; + background: url(img/ibm.jpg)no-repeat center; background-size: cover; width: 75%; } -- cgit v1.2.3-70-g09d2 From 71498e57e5d7604eb32452a3a0647dce3a54b6e6 Mon Sep 17 00:00:00 2001 From: “Ryder <“r@okfoc.us”> Date: Tue, 12 Apr 2016 19:57:10 -0400 Subject: more type stuff --- public/assets/ok.css | 81 ++++++++++++++++++++++++++++------------------------ 1 file changed, 44 insertions(+), 37 deletions(-) diff --git a/public/assets/ok.css b/public/assets/ok.css index 1fb8321..e28f28f 100644 --- a/public/assets/ok.css +++ b/public/assets/ok.css @@ -21,12 +21,14 @@ html { ::-moz-selection { color: blue; } + audio { - position:fixed; - top:-800000px; - left:-90000px; - opacity:0; + position: fixed; + top: -800000px; + left: -90000px; + opacity: 0; } + a, a:visited { color: blue; @@ -332,15 +334,16 @@ span { } #curtain { - position: absolute; - top: 0; left: 0; - background: black; - transition: 200ms opacity cubic-bezier(0, 0, 0, 1); - opacity: 0; - z-index: 1; - width: 100%; - height: 100%; - pointer-events: none; + position: absolute; + top: 0; + left: 0; + background: black; + transition: 200ms opacity cubic-bezier(0, 0, 0, 1); + opacity: 0; + z-index: 1; + width: 100%; + height: 100%; + pointer-events: none; } .navopen #curtain { @@ -535,6 +538,7 @@ body { margin-left: 20vw; cursor: url(img/u.png) 32 0, pointer; } + .whitecursor .page-up { cursor: url(img/u-white.png) 32 0, pointer; } @@ -549,6 +553,7 @@ body { margin-left: 20vw; cursor: url(img/d.png) 32 64, pointer; } + .whitecursor .page-down { cursor: url(img/d-white.png) 32 64, pointer; } @@ -601,6 +606,7 @@ button.next { cursor: url(img/r.png)64 32, pointer; z-index: 4; } + .whitecursor button.next { cursor: url(img/r-white.png)64 32, pointer; } @@ -610,6 +616,7 @@ button.previous { cursor: url(img/l.png) 0 32, pointer; z-index: 4; } + .whitecursor button.previous { cursor: url(img/l-white.png) 0 32, pointer; } @@ -717,7 +724,7 @@ nav { .projectLink { display: block; - margin-top:3px; + margin-top: 3px; } ul li { @@ -737,7 +744,22 @@ ul li { display: none; } -@media (min-width: 1200px) { + +@media (min-width: 1500px) { + .intro div.text, + h3, + .left a { + font-size: 16px; + line-height: 25px; + } + h1 { + font-size: 40px; + line-height: 50px; + } +} + + +@media (min-width: 1200px) and (max-height: 980px){ .texts { font-size: 13px; line-height: 16px; @@ -753,27 +775,15 @@ ul li { .projectLink { margin-top: 3px; } - .intro div.text, h3, .left a { - font-size:14px; + .intro div.text, + h3, + .left a { + font-size: 14px; line-height: 20px; } - } - - - @media (min-width: 1500px) { - .intro div.text, h3, .left a { - font-size: 16px; - line-height: 25px; - } -h1 { - font-size: 40px; - line-height: 50px; -} - } - - /* +/* @media (min-width: 1600px) { .texts { font-size: 15px; @@ -825,8 +835,6 @@ h1 { .texts { padding: 3px 5px; } - - .five span { width: 100%; border-bottom: 1px solid; @@ -843,12 +851,11 @@ h1 { -moz-column-gap: 3px; column-gap: 3px; border-bottom: 0; - border-top:2px; + border-top: 2px; text-align: justify; } - .projectLink { - display:none; + display: none; } .press .five span:last-child { display: none; -- cgit v1.2.3-70-g09d2 From ee2dbfec14e8b10e014f2b17a03dea643a512e5d Mon Sep 17 00:00:00 2001 From: okfprojz Date: Tue, 12 Apr 2016 19:59:12 -0400 Subject: db --- db.json | 115 ++++++++++++++++++++++++++++++++++++++++++++-------------------- 1 file changed, 79 insertions(+), 36 deletions(-) diff --git a/db.json b/db.json index e89b557..1bd22d9 100644 --- a/db.json +++ b/db.json @@ -48,7 +48,7 @@ "alternateTitle": "Portfolio Website", "year": 2016, "client": "Annapurna Pictures", - "link": "http://annapurna.pictures/", + "link": "http://159.203.133.91/", "NatureOfWork": "Web Development\r\nGraphic Design\r\nBack-End Development", "brief": "Annapurna Pictures is one of\r\nthe world’s leading production\r\ncompanies – with titles such as\r\nSpring Breakers and Zero Dark\r\nThirty. We created a site to show\r\noff all their amazing projects. Often\r\ntimes we build bespoke back-ends\r\nto match the specific needs of the\r\ncontent, as opposed to using an off\r\nthe shelf template. This allows us\r\nto be very flexible and create sites\r\nunlike any other.", "media": [ @@ -83,7 +83,7 @@ "client": "Stone Island", "link": "https://itunes.apple.com/us/app/stone-island/id1064359099?mt=8", "NatureOfWork": "iPhone / Android Dev\r\nBack-End Development", - "brief": "Stone Island is a premier Italian fashion\r\nlabel specializing in sportswear made\r\nwith innovative materials. We created an\r\ne-commerce app for iPhone and Android\r\nwith a custom back-end allowing the\r\nbrand to push out new releases.", + "brief": "Stone Island is a premier Italian fashion\r\nlabel specializing in sportswear made\r\nwith innovative materials. We created an\r\ne-commerce app for iPhone and Android\r\nwith a custom back-end allowing the\r\nbrand to push out new releases. Also included is an in depth archive going back over 30 years, giving fans/consumers reason to get the app beyond just shopping.", "containImage": "true", "__index": 1, "dateCreated": "Sun, 03 Apr 2016 18:40:41 GMT", @@ -127,17 +127,17 @@ "media": [ { "uri": "https://ltho.s3.amazonaws.com/d985ec45-d5e5-4ab5-a60f-af42b18a0859.jpg", - "caption": "", + "caption": "background-size:contain;", "type": "image" }, { "uri": "https://ltho.s3.amazonaws.com/5fd898ee-c83f-4b59-a013-4596e685af8e.png", - "caption": "background-position:center", + "caption": "background-position:center;background-size:contain;", "type": "image" }, { "uri": "https://ltho.s3.amazonaws.com/12eaa8d4-328e-45e5-bd54-3ac2125d4956.png", - "caption": "", + "caption": "background-size:contain;", "type": "image" } ], @@ -211,7 +211,7 @@ "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": "Based on Times New Roman, Times New Ramen is arguably “most noodly serif font ever.” We created this font and released it into the world for free to make our love for typography and noodles known – the rest is history. Download Times New Ramen today!", "media": [ { "uri": "http://timesnewramen.com/typer", @@ -241,7 +241,7 @@ } ], "linkText": "timesnewramen.com", - "whiteCursor": false, + "whiteCursor": true, "hideProject": false, "disabled": false }, @@ -255,9 +255,14 @@ "NatureOfWork": "Branding\r\nGraphic Design\r\nStrategy\r\nBook Design", "brief": "Soylent is a food product in the form of\r\na powder that boldly claims to be able\r\nto fortify all your nutritional needs –\r\neffectively replacing food. They came\r\nto us with a tinfoil bag with a poorly\r\ndesigned sticker affixed to it. In turn,\r\nwe built them a powerful brand that put\r\nfunction first – highlighting the product’s\r\nutilitarian appeal. We defined a new\r\nbrand for them. Including a 77 page indepth\r\nbrand-book, package design. Today,\r\nSoylent has raised over 10 Million dollars,\r\nhas over 200,000 online subscribers and\r\nis about to launch retail nationwide", "media": [ + { + "uri": "https://ltho.s3.amazonaws.com/portfolio/a9775230-00ec-11e6-8919-558e5e9bf555.png", + "caption": "background-size:contain", + "type": "image" + }, { "uri": "https://ltho.s3.amazonaws.com/a2f458ca-4fa0-4441-8d50-e43bddfcaa76.png", - "caption": "background-size:cover", + "caption": "background-size:60%;background-position:center;", "type": "image" }, { @@ -334,14 +339,14 @@ "disabled": false }, { - "id": "two-hustlers-", - "title": "Two Hustlers ", + "id": "two-hustlers", + "title": "Two Hustlers", "alternateTitle": "Portfolio Website", "year": 2015, "client": "Two Hustlers", "link": "http://twohustlers.com/", "NatureOfWork": "Creative Direction\r\nGraphic Design\r\nBack-end Development", - "brief": "Headed by Nicola Formichetti, Two\r\nHustlers is a creative agency who\r\nleads direction for brands such as\r\nH&M, Diesel, Mugler, Lady Gaga,\r\nMAC and others. We build them a\r\nsick website with this crazy pure CSS\r\n3D fractured orb, the site is built\r\nbespoke, with our own CMS.", + "brief": "Headed by Nicola Formichetti, Two\r\nHustlers is a creative agency who\r\nleads direction for brands such as\r\nH&M, Diesel, Mugler, Lady Gaga,\r\nMAC and others. We build them a\r\nwebsite to show off their projects with a centerpiece that displays a little slice of their work. These animation techniques are some of the most bleeding edge, and the entire site is built\r\nbespoke, with our own CMS.", "media": [ { "uri": "http://twohustlers.com/", @@ -377,7 +382,7 @@ "brief": "Alone Together was a site-specific\r\nexhibition for Red Bull Studios. As\r\nboth sculpture and performance,\r\nAlone Together acts as a microcosm\r\nof the Internet, suggesting the\r\nfollowing paradox – the more\r\nconnected we are online, the more\r\nphysically withdrawn we become.", "media": [ { - "uri": "https://ltho.s3.amazonaws.com/bcc85925-1cc3-435e-abaf-e909fe882d7a.gif", + "uri": "https://ltho.s3.amazonaws.com/portfolio/04d585a0-00bd-11e6-8919-558e5e9bf555.png", "caption": "background-size:contain", "type": "image" }, @@ -385,6 +390,36 @@ "uri": "https://ltho.s3.amazonaws.com/521a93f5-886a-49a1-8d58-f720d4e6eb62.jpg", "caption": "background-size:contain", "type": "image" + }, + { + "uri": "https://ltho.s3.amazonaws.com/bcc85925-1cc3-435e-abaf-e909fe882d7a.gif", + "caption": "background-size:contain", + "type": "image" + }, + { + "uri": "https://ltho.s3.amazonaws.com/portfolio/bdbafa80-00bf-11e6-8919-558e5e9bf555.jpg", + "caption": "background-size:contain", + "type": "image" + }, + { + "uri": "https://ltho.s3.amazonaws.com/portfolio/37a380e0-00bd-11e6-8919-558e5e9bf555.jpg", + "caption": "background-size:contain;background-color:white;", + "type": "image" + }, + { + "uri": "https://ltho.s3.amazonaws.com/portfolio/43861b20-00bd-11e6-8919-558e5e9bf555.png", + "caption": "background-size:20%;background-color:white;background-position:center;", + "type": "image" + }, + { + "uri": "https://ltho.s3.amazonaws.com/portfolio/5a3d0200-00bf-11e6-8919-558e5e9bf555.png", + "caption": "background-size:contain", + "type": "image" + }, + { + "uri": "https://ltho.s3.amazonaws.com/portfolio/1cd2f640-00bf-11e6-8919-558e5e9bf555.png", + "caption": "background-size:contain;", + "type": "image" } ], "containImage": "true", @@ -491,7 +526,7 @@ "client": "Diesel", "link": "", "NatureOfWork": "Design\r\n3D Animation\r\nCreative Direction", - "brief": "Working with Nicola Formichetti\r\nand Nick Knight, we facilitated video\r\nconcepts and post production on\r\nthe Fall / Winter 2014 ad campaign\r\nfor Diesel. The imagery was surreal\r\nand fractured – creating sculpture\r\nout of human form and exaggerating\r\nmodels' features.", + "brief": "Working with Nicola Formichetti\r\nand Nick Knight, we facilitated video\r\nconcepts and post production on\r\nthe Fall / Winter 2014 ad campaign\r\nfor Diesel. The imagery was surreal\r\nand fractured – creating sculpture\r\nout of human form and exaggerating\r\nmodels' features. Look closely at the image above, it moves in subtle ways, these videos were used as displays in store.", "containImage": "true", "__index": 10, "dateCreated": "Sun, 03 Apr 2016 19:50:33 GMT", @@ -502,7 +537,7 @@ "uri": "", "width": "1280", "height": "902", - "title": "loop6.mp4", + "title": "background:#222", "thumb": "http://okfocus.s3.amazonaws.com/misc/okcms/video.png" } ], @@ -795,7 +830,7 @@ "mobileTitle": "", "mobileMedia": [ { - "uri": "https://ltho.s3.amazonaws.com/ff8732a5-764b-4b14-8d66-3d66206d933f.png", + "uri": "https://ltho.s3.amazonaws.com/portfolio/231a25a0-003d-11e6-8919-558e5e9bf555.gif", "caption": "", "type": "image" } @@ -829,8 +864,8 @@ "linkText": "1948london.com", "mobileMedia": [ { - "uri": "https://ltho.s3.amazonaws.com/c014af1f-4d79-4191-bda0-8150dd5a2ec1.png", - "caption": "", + "uri": "https://ltho.s3.amazonaws.com/portfolio/0da8c4d0-0040-11e6-8919-558e5e9bf555.gif", + "caption": "background-size:contain;\r\nbackground-position:center;", "type": "image" } ], @@ -849,9 +884,13 @@ "brief": "In collaboration with Instagram to launch\r\ntheir new video feature, Treasure Dance\r\nwas an interactive Bruno Mars music\r\nvideo where users would submit their\r\nown dances with a hash-tag to collectively\r\njoin the video. We built a custom back-end\r\nfor Atlantic Records where they could\r\napprove and disapprove videos pulled\r\nfrom Instagram API.", "media": [ { - "uri": "https://ltho.s3.amazonaws.com/e121df1f-73f1-4e32-ae2f-62a42dd6e39c.png", - "caption": "", - "type": "image" + "type": "video", + "token": "https://ltho.s3.amazonaws.com/portfolio/treasure-dance-iMac-video.mp4", + "uri": "", + "width": "1920", + "height": "1080", + "title": "background-color:white", + "thumb": "http://okfocus.s3.amazonaws.com/misc/okcms/video.png" } ], "containImage": "false", @@ -869,9 +908,16 @@ "dateCreated": "Sun, 03 Apr 2016 21:05:44 GMT", "mobileTitle": "", "linkText": "treasuredance.com", - "mobileMedia": [], - "whiteCursor": true, - "hideProject": false + "mobileMedia": [ + { + "uri": "https://ltho.s3.amazonaws.com/e121df1f-73f1-4e32-ae2f-62a42dd6e39c.png", + "caption": "", + "type": "image" + } + ], + "whiteCursor": false, + "hideProject": false, + "disabled": false }, { "id": "newmoticons", @@ -1451,7 +1497,7 @@ "media": [ { "uri": "https://ltho.s3.amazonaws.com/ec691717-52c8-4a7c-9328-8a39eacdebb7.png", - "caption": "background-size: 99%", + "caption": "background-size: 70%;background-position:center;background-color:white;", "type": "image" } ], @@ -1463,7 +1509,8 @@ "linkText": "", "mobileMedia": [], "whiteCursor": false, - "hideProject": false + "hideProject": false, + "disabled": false }, { "id": "dump-fm", @@ -1518,20 +1565,12 @@ { "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. 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 vaporwave. 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 was once in a boyband called HDBOYZ. I am the only member of a boy band who is also proficient in both CSS3 and has shot a campaign for Marc Jacobs. 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, knows how to pickle peppers and can write CSS with their eyes closed. Who has worked with Kanye West, The Wolfsonian Museum, Mike Will Made-It and spoken at The Smithsonian. I am not a rapper, but I do have a rap song dedicated to Tory Burch. My name has been published in 6 books, three of which are not in english. My mom makes the best chicken soup in the world, I made a documentary about it when I was 15, it aired on public television. I think microscopes and telescopes are equally as cool. I literally don’t know how the universe started but I would sure like to find out, but at the same time wonder if that would even be gratifying. I am looking for new experiences, to become a better person, to help others, to have fun, to be honest, to contribute something new, to be myself, to love and be loved and I am glad you are reading this. Please don't hesitate to ask questions.", "press": [ { "text": "New York Times", "uri": "http://www.nytimes.com/2014/07/10/fashion/ryder-ripps-an-artist-of-the-internet.html" }, - { - "text": "Details Magazine", - "uri": "" - }, - { - "text": "Vice", - "uri": "" - }, { "text": "Creators Project", "uri": "http://thecreatorsproject.vice.com/okfocus/okfocus" @@ -1539,6 +1578,10 @@ { "text": "The Fader", "uri": "http://www.thefader.com/2013/12/04/creative-agency-okfocus-jogging-tobe/" + }, + { + "text": "Vice", + "uri": "http://www.vice.com/read/looking-into-the-instagram-abyss-with-artist-ryder-ripps-111" } ], "speakers": "RISD, AIGA, Semi-Permanent, SXSW, Sotheby’s, Goethe Institut, Smithsonian, OTIS College", @@ -1548,11 +1591,11 @@ "accolades": [ { "text": "Forbes Magazine, 30 Under 30", - "uri": "" + "uri": "http://www.forbes.com/30-under-30-2016/art-style/#47433d5d23c5" }, { "text": "Advertising Age, Creativity 50", - "uri": "" + "uri": "http://adage.com/article/creativity-50/ryder-ripps-jonathan-vingiano-founders-okfocus/235806/" } ] } -- cgit v1.2.3-70-g09d2 From 4169d1da0c45719c9ef70de21103d8457295f4ff Mon Sep 17 00:00:00 2001 From: “Ryder <“r@okfoc.us”> Date: Tue, 12 Apr 2016 19:59:13 -0400 Subject: test --- public/assets/img/ibm.gif | Bin 0 -> 555339 bytes public/assets/img/ibm.jpg | Bin 0 -> 398560 bytes 2 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 public/assets/img/ibm.gif create mode 100644 public/assets/img/ibm.jpg diff --git a/public/assets/img/ibm.gif b/public/assets/img/ibm.gif new file mode 100644 index 0000000..0e3553a Binary files /dev/null and b/public/assets/img/ibm.gif differ diff --git a/public/assets/img/ibm.jpg b/public/assets/img/ibm.jpg new file mode 100644 index 0000000..d6ced6a Binary files /dev/null and b/public/assets/img/ibm.jpg differ -- cgit v1.2.3-70-g09d2 From 723f9f2c3b56a76fb390e62d777cf4a025afb472 Mon Sep 17 00:00:00 2001 From: “Ryder <“r@okfoc.us”> Date: Tue, 12 Apr 2016 20:09:53 -0400 Subject: text edge case --- public/assets/ok.css | 41 +++++++++++++++++++++++++---------------- 1 file changed, 25 insertions(+), 16 deletions(-) diff --git a/public/assets/ok.css b/public/assets/ok.css index e28f28f..bae9334 100644 --- a/public/assets/ok.css +++ b/public/assets/ok.css @@ -744,22 +744,7 @@ ul li { display: none; } - -@media (min-width: 1500px) { - .intro div.text, - h3, - .left a { - font-size: 16px; - line-height: 25px; - } - h1 { - font-size: 40px; - line-height: 50px; - } -} - - -@media (min-width: 1200px) and (max-height: 980px){ +@media (min-width: 1200px) { .texts { font-size: 13px; line-height: 16px; @@ -775,14 +760,38 @@ ul li { .projectLink { margin-top: 3px; } + .intro div.text, + h3, .left a { + font-size: 14px; + line-height: 20px; + } +} + + + +@media (min-width: 1500px) { .intro div.text, h3, .left a { + font-size: 16px; + line-height: 25px; + } + h1 { + font-size: 40px; + line-height: 50px; + } +} + + +@media (max-height: 980px) { + .intro div.text, + h3, .left a { font-size: 14px; line-height: 20px; } } + /* @media (min-width: 1600px) { .texts { -- cgit v1.2.3-70-g09d2 From edb135e0d2a441e072571601d17c858319c7b6fa Mon Sep 17 00:00:00 2001 From: “Ryder <“r@okfoc.us”> Date: Tue, 12 Apr 2016 20:46:44 -0400 Subject: stars dude --- public/assets/img/dude.png | Bin 0 -> 597926 bytes public/assets/img/ibm.gif | Bin 555339 -> 0 bytes public/assets/ok.css | 18 ++++++- public/assets/stars/flyingthroughspace.css | 17 ++++++ public/assets/stars/flyingthroughspace.js | 81 +++++++++++++++++++++++++++++ public/assets/stars/index.html | 10 ++++ templates/index.liquid | 4 ++ 7 files changed, 128 insertions(+), 2 deletions(-) create mode 100644 public/assets/img/dude.png delete mode 100644 public/assets/img/ibm.gif create mode 100755 public/assets/stars/flyingthroughspace.css create mode 100755 public/assets/stars/flyingthroughspace.js create mode 100755 public/assets/stars/index.html diff --git a/public/assets/img/dude.png b/public/assets/img/dude.png new file mode 100644 index 0000000..c0246fe Binary files /dev/null and b/public/assets/img/dude.png differ diff --git a/public/assets/img/ibm.gif b/public/assets/img/ibm.gif deleted file mode 100644 index 0e3553a..0000000 Binary files a/public/assets/img/ibm.gif and /dev/null differ diff --git a/public/assets/ok.css b/public/assets/ok.css index bae9334..c558a8c 100644 --- a/public/assets/ok.css +++ b/public/assets/ok.css @@ -145,11 +145,25 @@ h3 { } .intro.cover .right { - background: url(img/ibm.jpg)no-repeat center; - background-size: cover; + padding:0; width: 75%; + height:100%; +} +.intro.cover .right iframe { + width: 35%; + height: 40%; + position: absolute; + margin-top: 9%; + margin-left: 33%; } +.intro.cover .right span { + background: url(img/dude.png)no-repeat center; + background-size: cover; + width:100%; + height:100%; + position: relative; +} .menu { position: fixed; height: calc(100vh - 24px); diff --git a/public/assets/stars/flyingthroughspace.css b/public/assets/stars/flyingthroughspace.css new file mode 100755 index 0000000..8d867ed --- /dev/null +++ b/public/assets/stars/flyingthroughspace.css @@ -0,0 +1,17 @@ +body { + background-color: black; + margin: 0; + padding: 0; +} + +.star { + /*background-color: white;*/ + /*border-radius: 30px;*/ + width: 1px; + height: 1px; + position: absolute; + background: -moz-radial-gradient(closest-side circle,#FFF,#000); + background: -o-radial-gradient(closest-side circle,#FFF,#000); + background: -webkit-radial-gradient(closest-side circle,#FFF,#000); + background: radial-gradient(closest-side circle,#FFF,#000); +} \ No newline at end of file diff --git a/public/assets/stars/flyingthroughspace.js b/public/assets/stars/flyingthroughspace.js new file mode 100755 index 0000000..7587c71 --- /dev/null +++ b/public/assets/stars/flyingthroughspace.js @@ -0,0 +1,81 @@ +(function() { + + var STAR_COUNT = 500; + var WARP_SPEED = 0.02; + var FPS = 30; + + var getRandom = function(lbound, ubound) { + return window.Math.random() * (ubound - lbound) + lbound; + }; + + var windowCenter = { + x: window.innerWidth / 2, + y: window.innerHeight / 2 + }; + + var Star = function() { + this.element = document.createElement('div'); + this.element.className = 'star'; + this.randomizeSpawn(); + document.body.appendChild(this.element); + }; + + Star.prototype.randomizeSpawn = function() { + this.x = getRandom(1, window.innerWidth); + this.y = getRandom(1, window.innerHeight); + this.brightness = 1;//getRandom(1, 5); + this.distance = getRandom(0.01, 6); + } + + Star.prototype.isOutsideField = function() { + return this.x < 0 || + this.x > window.innerWidth || + this.y > window.innerHeight || + this.y < 0; + }; + + Star.prototype.setPosition = function() { + this.element.style.left = this.x + 'px'; + this.element.style.top = this.y + 'px'; + this.element.style.width = this.brightness + 'px'; + this.element.style.height = this.brightness + 'px'; + }; + + var stars = []; + + var incrementFrame = function() { + + for (var i = 0; i < STAR_COUNT; i++) { + + var star = stars[i] = stars[i] || new Star(); + + // Split position by splitting into x & y vectors + star.x -= (windowCenter.x - star.x) * WARP_SPEED * star.distance; + star.y -= (windowCenter.y - star.y) * WARP_SPEED * star.distance; + + if (star.isOutsideField()) { + // Reloate star + star.randomizeSpawn(); + } else { + // Increase brightness + star.brightness += (star.distance * 0.05); + } + + star.setPosition(); + } + }; + + // Follow cursor + window.addEventListener('mousemove', function(e) { + windowCenter.x = e.clientX; + windowCenter.y = e.clientY; + }); + + // Start drawing + window.setInterval(function(){ + if (document.body) { + incrementFrame(); + } + }, 1000 / FPS); + +})(); \ No newline at end of file diff --git a/public/assets/stars/index.html b/public/assets/stars/index.html new file mode 100755 index 0000000..e6a878c --- /dev/null +++ b/public/assets/stars/index.html @@ -0,0 +1,10 @@ + + + + Flying Through Space + + + + + + \ No newline at end of file diff --git a/templates/index.liquid b/templates/index.liquid index c8c040f..faa26e2 100644 --- a/templates/index.liquid +++ b/templates/index.liquid @@ -101,6 +101,10 @@ OKFocus, Bonafide Internet Legends © 2016
+ + +
-- cgit v1.2.3-70-g09d2 From d185ba79b3e95a1e644955f0c3b70b72ecd543cb Mon Sep 17 00:00:00 2001 From: “Ryder <“r@okfoc.us”> Date: Tue, 12 Apr 2016 20:50:16 -0400 Subject: remove filter --- public/assets/ok.css | 2 -- 1 file changed, 2 deletions(-) diff --git a/public/assets/ok.css b/public/assets/ok.css index c558a8c..bd50e6d 100644 --- a/public/assets/ok.css +++ b/public/assets/ok.css @@ -130,8 +130,6 @@ h3 { .intro .right { background: url(img/ryder-ripps.gif)no-repeat center; background-size: cover; - -webkit-filter: grayscale(100%); - filter: grayscale(100%); } .intro.cover .left span#cred { -- cgit v1.2.3-70-g09d2 From 4838109e2ea23f2fac85b2e8c5945e5563dab51d Mon Sep 17 00:00:00 2001 From: “Ryder <“r@okfoc.us”> Date: Tue, 12 Apr 2016 20:53:03 -0400 Subject: more defined --- public/assets/ok.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/assets/ok.css b/public/assets/ok.css index bd50e6d..1e8bcb4 100644 --- a/public/assets/ok.css +++ b/public/assets/ok.css @@ -127,7 +127,7 @@ h3 { column-gap: 10px; } -.intro .right { +.intro.single .right { background: url(img/ryder-ripps.gif)no-repeat center; background-size: cover; } -- cgit v1.2.3-70-g09d2