ugh, it's not great.

maybe @kylefiedler will rescue it

Author: calebhearth

Gemfile

@@ -1,5 +1,5 @@
 source "https://rubygems.org"
-ruby "2.4.1"
+ruby "2.4.2"
 
 gem "jekyll"
 gem "rake"

_data/speakers.json

@@ -0,0 +1,38 @@
+[
+  {
+    "name": "David Bock",
+    "twitter": "bokmann",
+    "talk": "Ruby Investigation of Orthogonal Latin Squares of Order Ten",
+    "abstract": "While teaching high school, I became fascinated with the ideas around Orthogonal Latin Squares, and a program written in 1963 for a 'UNIVAC 2106 Military Computer' that found them for order 10, proving a ~250 year old conjecture by Euler wrong. I found the paper, and rewrote it in Ruby. Lets play."
+  },
+  {
+    "name": "Rolen Le",
+    "twitter": "rolentle",
+    "talk": "Dungeons & Collaboration: A Player’s Handbook on How To Work With a Distributed Team",
+    "abstract": "What can playing tabletop role playing games such as Dungeons and Dragon teach us about collaborating online? From general online etiquette to building meaning full relationships, I will discuss tips and tricks of roleplaying that have made me a better coworker.\n\n"
+  },
+  {
+    "name": "Ben Scofield",
+    "twitter": "bscofield",
+    "talk": "Learning to see",
+    "abstract": "The hardest part of learning to draw is figuring out that you have to draw what you actually see, not what you think you see. Draw a \"face\" and you end up with an emoji; draw shadows and shapes instead and you end up with a portrait. This talk takes that lesson and applies it to... well, everything."
+  },
+  {
+    "name": "Cecy Correa",
+    "twitter": "cecycorrea",
+    "talk": "The Psychology of Fake News (and What Tech Can Do About It)",
+    "abstract": "Fake news is not a tech problem, it's a human problem. To build the tools necessary to combat fake news, technologists must think differently. We must understand the psychology behind fake news to arrive at a solution that is human-centric and attainable."
+  },
+  {
+    "name": "Bradley Grzesiak",
+    "twitter": "listrophy",
+    "talk": "kerbal_space_program.rb",
+    "abstract": "So there's this game, Kerbal Space Program. You basically create your own space program from scratch. Well, you can control it via TCP, and—using Ruby—we're gonna launch, orbit, and crash our brave Kerbins. You might even learn a thing or two about orbital mechanics and control theory along the way."
+  },
+  {
+    "name": "Chris Arcand",
+    "twitter": "chrisarcand",
+    "talk": "An Atypical 'Performance' Talk",
+    "abstract": "A mixture of a talk on programming and a live classical music recital. Listen to a former-orchestral-clarinetist-turned-developer talk about parallelisms between music performance and programming - such as complexity, imposter syndrome, and true concentration - with live performances throughout!"
+  }
+]

assets/_sass/_index.scss

@@ -371,6 +371,29 @@
   }
 }
 
+.speakers {
+  @extend .tweets;
+  overflow: inherit;
+  float: left;
+
+  .author img {
+    max-height: 200px;
+    border-radius: 50%;
+  }
+
+  li {
+    color: $dark-gray;
+    background-color: $mint;
+
+    &:nth-of-type(1)::before {
+      background-color: $flesh;
+    }
+    &:nth-of-type(3)::before {
+      background-color: $hot-pink;
+    }
+  }
+}
+
 .commentary {
   word-wrap: break-word;
   font-family: $heading-font-family;
@@ -435,16 +458,11 @@
 
 .weirdos {
   background-color: $dark-purple;
-  padding: $base-spacing $large-spacing $large-spacing;
   position: relative;
   color: #fff;
   overflow: hidden;
   -webkit-font-smoothing: antialiased;
 
-  @media (min-width: 1050px) {
-    padding: $base-spacing $xxx-large-spacing $x-large-spacing;
-  }
-
   &:after {
     background-color: $pink;
     bottom: -140px;
@@ -483,13 +501,18 @@
     line-height: 1;
     position: relative;
     font-size: 64px;
+    margin-left: $large-spacing;
     margin-bottom: 6.5rem;
 
     @media (min-width: 500px) {
       font-size: 15vh;
       margin-bottom: 20rem;
     }
 
+    @media (min-width: 1050px) {
+      margin-left: $xxx-large-spacing;
+    }
+
     &:after {
       position: absolute;
       content: "";
@@ -520,8 +543,8 @@
       left: 30rem;
     }
     @media (min-width: 1400px) {
-      left: 35rem;
-      top: 14rem;
+      left: 55rem;
+      top: 8rem;
     }
 
     p {

assets/_sass/base/_variables.scss

@@ -33,6 +33,9 @@ $orange: #fd9a59;
 $red: #fd5959;
 $dark-purple: #b657fd;
 $pink: #fa59fd;
+$mint: #b2e76e;
+$flesh: #e7b397;
+$hot-pink: #f43157;
 
 // Font Colors
 $base-font-color: $dark-gray;

index.html

@@ -112,11 +112,45 @@ <h1>What you should expect @ keep ruby weird:</h1>
 
 <section class="weirdos">
   <div class="cfp hero__container">
-    <h1>Calling all weirdos</h1>
+    <h1>Meet the weirdos</h1>
     <div class="cfp__content">
       <a href="https://www.papercall.io/krw-2017" class="button">Speak at KRW!</a>
       <p>We’re as always looking for a mix of soft (conceptual, community, career, other C-words), technical (discussing code on screen), and non-Ruby (space, emoji, art). Also you should read <a href="/conduct">Our Code of Conduct.</a></p>
     </div>
+    <ul class="speakers">
+      {% for speaker in site.data.speakers limit: 3%}
+      <li>
+        <blockquote>
+          <details> <summary><strong>{{ speaker.talk }}</strong></summary>
+            <p>{{ speaker.abstract }}</p>
+          </details>
+        </blockquote>
+        <div class="author">
+          <a href="https://twitter.com/{{ speaker.twitter }}">
+            <img src="https://twitter.com/{{ speaker.twitter }}/profile_image?size=original" alt="{{ speaker.name }}">
+          </a>
+          <p class="commentary">{{ speaker.name }}</p>
+        </div>
+      </li>
+      {% endfor %}
+    </ul>
+    <ul class="speakers">
+      {% for speaker in site.data.speakers limit: 3 offset: 3%}
+      <li>
+        <blockquote>
+          <details> <summary><strong>{{ speaker.talk }}</strong></summary>
+            <p>{{ speaker.abstract }}</p>
+          </details>
+        </blockquote>
+        <div class="author">
+          <a href="https://twitter.com/{{ speaker.twitter }}">
+            <img src="https://twitter.com/{{ speaker.twitter }}/profile_image?size=original" alt="{{ speaker.name }}">
+          </a>
+          <p class="commentary">{{ speaker.name }}</p>
+        </div>
+      </li>
+      {% endfor %}
+    </ul>
   </div>
   <div class="sponsor">
     <h2>PLEASE support our weirdness with the gererosity of Your Friendship</h2>