Adding a piece of decorative, yet descriptive, bio information can help to make your professional website / portfolio a more engaging, fun, experience

This example also demonstrates very basic templating which enables data to be injected into predefined interface components

Fullstack Engineer&Web Developer


The Code

HTML:

<h3><span id="introText"></span><span id='dynamicTextOne' class="dynamicText">Fullstack Engineer</span><span id='dynamicTextTwo' class="dynamicText">&</span><span id='dynamicTextThree' class="dynamicText">Web Developer</span></h3>


JavaScript:

$(document).ready(function() {
    var titles = [
        ['I am a ', 'Kung Fu Ninja', ' & ', 'Karate Master'],
        ['I am ', 'Me', '', ''],
        ['I am a ', 'Mentat', ' & ','Digital Djinn'],
        ['I am a ', 'Movie Fiend', ' & ', 'Coffee Connoisseur']
        ], intro = 'I am a ',

        dynamicText = function () {
            var title = titles[Math.floor(Math.random() * titles.length)];

            $('#introText')
                .empty()
                .append(title[0]);

            $('#dynamicTextOne')
                .empty()
                .append(title[1]);

            $('#dynamicTextTwo')
                .empty()
                .append(title[2]);

            $('#dynamicTextThree')
                .empty()
                .append(title[3]);

            setTimeout(dynamicText, 1200);
        };
    dynamicText();
});


CSS3:


.dynamicText {
  color: #2aa198;
  opacity: .85;
  text-shadow: -1px 1px 8px #fff, 1px -1px 8px #2aa198;
}
#introText {
  color: #999;
}


See it at: Stackchampion.com