diff options
| -rw-r--r-- | db.json | 444 | ||||
| -rw-r--r-- | index.js | 1 | ||||
| -rw-r--r-- | public/assets/img/dude.png | bin | 0 -> 597926 bytes | |||
| -rw-r--r-- | public/assets/img/ibm.jpg | bin | 0 -> 398560 bytes | |||
| -rw-r--r-- | public/assets/img/ryder-ripps.gif | bin | 0 -> 197976 bytes | |||
| -rw-r--r-- | public/assets/js/lib/ProjectView.js | 3 | ||||
| -rw-r--r-- | public/assets/ok.css | 111 | ||||
| -rwxr-xr-x | public/assets/stars/flyingthroughspace.css | 17 | ||||
| -rwxr-xr-x | public/assets/stars/flyingthroughspace.js | 81 | ||||
| -rwxr-xr-x | public/assets/stars/index.html | 10 | ||||
| -rw-r--r-- | templates/index.liquid | 13 |
11 files changed, 416 insertions, 264 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", @@ -48,7 +41,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": [ @@ -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", @@ -73,6 +71,7 @@ ], "whiteCursor": false, "hideProject": false, + "audio": "http://okfocus.s3.amazonaws.com/audio/_wiggle_03.WAV", "disabled": false }, { @@ -83,7 +82,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", @@ -100,16 +99,11 @@ ], "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" - } - ], + "mobileMedia": [], "linkText": "View in App Store", "whiteCursor": false, "hideProject": false, + "audio": "http://okfocus.s3.amazonaws.com/audio/_WIKIT.WAV", "disabled": false }, { @@ -127,43 +121,36 @@ "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": "", - "type": "image" - } - ], - "press": [], - "mobileTitle": "", - "linkText": "View Lookbook", - "mobileMedia": [ - { - "uri": "https://ltho.s3.amazonaws.com/1f337646-49bc-45d0-92b6-ed8f3e017046.png", - "caption": "", + "caption": "background-size:contain;", "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", @@ -179,6 +166,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", @@ -200,8 +192,7 @@ } ], "whiteCursor": false, - "hideProject": false, - "disabled": false + "hideProject": false }, { "id": "times-new-ramen", @@ -211,12 +202,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": "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", "caption": "", "type": "link" + }, + { + "uri": "https://ltho.s3.amazonaws.com/3337ba94-b25c-4374-8d63-e97ba833fb30.png", + "caption": "", + "type": "image" } ], "containImage": "true", @@ -241,7 +237,7 @@ } ], "linkText": "timesnewramen.com", - "whiteCursor": false, + "whiteCursor": true, "hideProject": false, "disabled": false }, @@ -256,8 +252,13 @@ "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" }, { @@ -290,8 +291,7 @@ ], "linkText": "View Brand Book", "whiteCursor": false, - "hideProject": false, - "disabled": false + "hideProject": false }, { "id": "soylent-website", @@ -330,23 +330,27 @@ "linkText": "soylent.com", "mobileMedia": [], "whiteCursor": false, - "hideProject": false, - "disabled": false + "hideProject": 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/", "caption": "", "type": "link" + }, + { + "uri": "https://ltho.s3.amazonaws.com/b543dda4-d8bb-4978-9c1c-25872a949c3a.png", + "caption": "", + "type": "image" } ], "containImage": "true", @@ -363,8 +367,7 @@ } ], "whiteCursor": false, - "hideProject": false, - "disabled": false + "hideProject": false }, { "id": "alone-together", @@ -377,7 +380,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 +388,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 +524,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,23 +535,21 @@ "uri": "", "width": "1280", "height": "902", - "title": "loop6.mp4", + "title": "background:#222", "thumb": "http://okfocus.s3.amazonaws.com/misc/okcms/video.png" - } - ], - "press": [], - "mobileTitle": "", - "linkText": "", - "mobileMedia": [ + }, { "uri": "https://ltho.s3.amazonaws.com/portfolio/812afe80-0024-11e6-8919-558e5e9bf555.png", "caption": "", "type": "image" } ], - "whiteCursor": false, - "hideProject": false, - "disabled": false + "press": [], + "mobileTitle": "", + "linkText": "", + "mobileMedia": [], + "whiteCursor": true, + "hideProject": false }, { "id": "boy-oh-boy", @@ -689,6 +720,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", @@ -723,8 +759,7 @@ } ], "whiteCursor": false, - "hideProject": false, - "disabled": false + "hideProject": false }, { "id": "mike-will-made-it", @@ -740,6 +775,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", @@ -775,8 +815,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", @@ -795,15 +840,14 @@ "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" } ], "linkText": "View in App Store", - "whiteCursor": false, - "hideProject": false, - "disabled": false + "whiteCursor": true, + "hideProject": false }, { "id": "nike-hyperfeel", @@ -813,30 +857,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" + }, + { + "uri": "https://ltho.s3.amazonaws.com/portfolio/0da8c4d0-0040-11e6-8919-558e5e9bf555.gif", + "caption": "background-size:contain;\r\nbackground-position:center;", + "type": "image" } ], "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 + "mobileMedia": [], + "whiteCursor": true, + "hideProject": false }, { "id": "treasure-dance", @@ -849,9 +891,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 +915,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", @@ -891,6 +944,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", @@ -911,22 +974,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", @@ -939,9 +990,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", @@ -955,16 +1011,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", @@ -1013,13 +1062,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", @@ -1028,16 +1073,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", @@ -1112,13 +1150,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", @@ -1126,17 +1160,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", @@ -1150,12 +1177,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", @@ -1164,16 +1196,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", @@ -1186,9 +1211,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", @@ -1206,15 +1231,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", @@ -1301,6 +1320,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", @@ -1317,17 +1341,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", @@ -1340,13 +1357,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", @@ -1354,17 +1367,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", @@ -1408,13 +1414,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", @@ -1428,16 +1430,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", @@ -1451,7 +1446,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 +1458,8 @@ "linkText": "", "mobileMedia": [], "whiteCursor": false, - "hideProject": false + "hideProject": false, + "disabled": false }, { "id": "dump-fm", @@ -1518,27 +1514,23 @@ { "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" }, { "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,13 +1540,13 @@ "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/" } ] } ] -}
\ No newline at end of file +} @@ -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/img/dude.png b/public/assets/img/dude.png Binary files differnew file mode 100644 index 0000000..c0246fe --- /dev/null +++ b/public/assets/img/dude.png diff --git a/public/assets/img/ibm.jpg b/public/assets/img/ibm.jpg Binary files differnew file mode 100644 index 0000000..d6ced6a --- /dev/null +++ b/public/assets/img/ibm.jpg diff --git a/public/assets/img/ryder-ripps.gif b/public/assets/img/ryder-ripps.gif Binary files differnew file mode 100644 index 0000000..0dd6d08 --- /dev/null +++ b/public/assets/img/ryder-ripps.gif diff --git a/public/assets/js/lib/ProjectView.js b/public/assets/js/lib/ProjectView.js index 9413cc2..2c53cf5 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 ) @@ -120,6 +122,7 @@ var ProjectView = View.extend({ }, hide: function(){ + addClassForPeriod( this.el, "hiding", app.navigation_delay, function(){ this.reset() }.bind(this) ) diff --git a/public/assets/ok.css b/public/assets/ok.css index 14a8cd6..1e8bcb4 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 { @@ -21,11 +22,17 @@ html { color: blue; } +audio { + position: fixed; + top: -800000px; + left: -90000px; + opacity: 0; +} + a, a:visited { color: blue; font-weight: bold; - font-size: 11px; cursor: pointer; } @@ -91,7 +98,7 @@ h3 { } .intro { - font-size: 12px; + font-size: 14px; line-height: 20px; } @@ -115,17 +122,14 @@ h3 { .intro div.text { width: 50%; -webkit-column-count: 2; - -webkit-column-gap: 5px; - -moz-column-gap: 5px; - column-gap: 5px; - font-size: 12px; + -webkit-column-gap: 10px; + -moz-column-gap: 10px; + column-gap: 10px; } -.intro .right { - background: url(http://ryder-ripps.com/press/ryder-ripps.jpg)no-repeat center; +.intro.single .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 { @@ -139,11 +143,25 @@ h3 { } .intro.cover .right { - background: url(img/crater.gif)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); @@ -328,15 +346,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 { @@ -531,6 +550,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; } @@ -545,6 +565,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; } @@ -597,6 +618,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; } @@ -606,6 +628,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; } @@ -713,7 +736,7 @@ nav { .projectLink { display: block; - + margin-top: 3px; } ul li { @@ -733,7 +756,7 @@ ul li { display: none; } -@media (min-width: 1200px) { +@media (min-width: 1200px) { .texts { font-size: 13px; line-height: 16px; @@ -749,18 +772,39 @@ ul li { .projectLink { margin-top: 3px; } + .intro div.text, + h3, .left a { + 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, + .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 { font-size: 15px; @@ -812,8 +856,6 @@ ul li { .texts { padding: 3px 5px; } - - .five span { width: 100%; border-bottom: 1px solid; @@ -830,12 +872,11 @@ ul li { -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; 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 @@ +<!DOCTYPE html> +<html style="overflow:hidden"> +<head> + <title>Flying Through Space</title> + <script type="text/javascript" src="flyingthroughspace.js"></script> + <link type="text/css" href="flyingthroughspace.css" rel="stylesheet" /> +</head> +<body> +</body> +</html>
\ No newline at end of file diff --git a/templates/index.liquid b/templates/index.liquid index 2350f47..faa26e2 100644 --- a/templates/index.liquid +++ b/templates/index.liquid @@ -101,6 +101,10 @@ OKFocus, Bonafide Internet Legends © 2016 </span> </div> <div class="right"> + <iframe src="/assets/stars/index.html"> + </iframe> + <span></span> + </div> </div> @@ -115,13 +119,13 @@ OKFocus, Bonafide Internet Legends © 2016 Accolades – <br> {% for link in intro.accolades %} - <a href="{{ link.uri }}">{{ link.text }}</a> + <a href="{{ link.uri }}" target="_blank">{{ link.text }}</a> {% endfor %} <br><br> Press – <br> {% for link in intro.press %} - <a href="{{ link.uri }}">{{ link.text }}</a> + <a href="{{ link.uri }}" target="_blank">{{ link.text }}</a> {% endfor %} <br><br> Speaker At – @@ -141,6 +145,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' %} @@ -197,7 +204,7 @@ OKFocus, Bonafide Internet Legends © 2016 <ul> {% for link in project.press %}{% if link.uri %} <li> - <a href="{{ link.uri }}">{{ link.text }}</a> + <a href="{{ link.uri }}" targer="_blank">{{ link.text }}</a> </li> {% endif %}{% endfor %} </ul> |
