Flying Through Space

{% for media in project.media %} {% if media.type == 'image' %} -- 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(-) (limited to 'templates') 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 (limited to 'templates') 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

- {{ link.text }} + {{ link.text }}

-- 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 (limited to 'templates') 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

+ + +