JSFiddle - React, Tailwind, and code Playground

by Josh Pullen

HTML

<div id="content">
    <div id="header">
        <a href="#">
            <img id="logo" src="http://i1172.photobucket.com/albums/r574/JoshPullen27/scratch_icon_zps49ddf990.png" alt="PullJosh"/>
            <h1 id="name">Pull<span>Josh</span></h1>
        </a>
    </div>
    <div id="aboutMe"></div>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
* {
    font-family:'Open Sans', sans-serif;
}
#header {
    width:100%;
    display:table-cell;
}
#logo {
    border-radius:999px;
    width:45px;
    height:45px;
    vertical-align:middle;
}
#name {
    font-weight:normal;
    line-height:0;
    display:inline-block;
    vertical-align:middle;
}
#name span {
    font-weight:bold;
}
#header a {
    color:black;
    text-decoration:none;
}
#content {
    width:100%;
    max-width:600px;
    margin:0 auto;
    margin-top:100px;
    margin-bottom:20px;
}
#aboutMe {
    font-size:48px;
    text-align:center;
}
body {
    margin-left:30px;
    margin-right:30px;
}

JavaScript

var i = "0",
    text = ["Hi! I'm a kid.",
            "I'm fascinated by things.",
            "I'm a programmer.",
            "I'm a student.",
            "I'm happy.",
            "I'm fairly intelligent.",
            "I'm slightly odd.",
            "I'm doing great, thank you.",
            "I'm PullJosh."
    ];

function textLoop(t1, t2) {
    setTimeout(function(){
        $("#aboutMe").fadeOut( t2, function() {
            $("#aboutMe").html(text[i]);
            $("#aboutMe").fadeIn(t2, function() {
                i++;
                if(i < text.length) {
                    textLoop(t1, t2);
                }
            });
        });
    }, t1);
}
textLoop(3000, 200);