gnusites.com/portfolio.html

<div id="modal3" class="modal fade modal1" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="brown text-center">Soihub</h4>
            </div>
            <img class="img-responsive center-block center borderBrown" src="images/soihub.png" alt="captcha"></img>
            <hr/>
            <p class="big">
                The original site of soihub.org lacked a modern appeal.  Some things on this page are tacky and dated, like the
                form cutting into the image in the header and the background color is slightly odd. More importantly, the website is not responsive. So I ported the Soihub website to use Twitter's Bootstrap framework.</p>
        </div>
    </div>
</div>
<div id="modal6" class="modal fade modal1" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="brown text-center">I made this site for my friend</h4>
            </div>
            <img class="img-responsive center-block center borderBrown" src="images/shania.png" alt="shania"></img>
            <hr/>
            <p class="big">
                One of my friends is studying elementary education at Purdue University.  I customized a bootstrap template to build
                her an online resume website.  You can view the site, that I made for her,
                <a href="web.ics.purdue.edu/~sfeitz" target="_blank">here</a>.
            </p>
        </div>
    </div>
</div>
<div id="modal7" class="modal fade modal1" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="brown text-center">MatrixCares</h4>
            </div>
            <img class="img-responsive center-block center borderBrown" src="images/girl.png" alt="girl"></img>
            <hr/>
            <p class="big">
                I created a WordPress website for a local nonprofit.  You can find the site
                <a href="http://www.matrixcares.com" target="_blank">here</a>.  I found it extremely helpful to ask questions on
                the WordPress IRC, and by the end of the process, I found out how flexible wordpress can be as a content managment system.
            </p>
        </div>
    </div>
</div>
<div id="modal8" class="modal fade modal1" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="brown text-center">Neuroconnexions</h4>
            </div>
            <img class="img-responsive center-block center borderBrown" src="images/neuroconnexions.png" alt="girl"></img>
            <hr/>
            <p class="big">
                You can find this site here.
                <a href="http://www.matrixcares.com" target="_blank">here</a>.
            </p>
        </div>
    </div>
</div>
<div id="modal9" class="modal fade modal1" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="brown text-center">IBCA</h4>
            </div>
            <img class="img-responsive center-block center borderBrown" src="images/bowling.png" alt="girl"></img>
            <hr/>
            <p class="big">
                I made a bowling application that allows bowlers, coaches, and conference coordinators to register, login, and
                access data.
            </p>
        </div>
    </div>
</div>
<div id="modal10" class="modal fade modal1" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="brown text-center">Merlin's Beard</h4>
            </div>
            <img class="img-responsive center-block center borderBrown" src="images/merlin.png" alt="girl"></img>
            <hr/>
            <p class="big">
                I made a website for a local board gaming resturant.
            </p>
        </div>
    </div>
</div>
<div id="modal11" class="modal fade modal1" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="brown text-center">Supplier Diversity Development Coalition</h4>
            </div>
            <img class="img-responsive center-block center borderBrown" src="images/purdue-site.png" alt="girl"></img>
            <hr/>
            <p class="big">
                I developed this website for Purdue's Supplier Diversity Devolopment Coalition
            </p>
        </div>
    </div>
</div>
<div id="modal12" class="modal fade modal1" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="brown text-center">Henriot Group</h4>
            </div>
            <img class="img-responsive center-block center borderBrown" src="images/henriot.png" alt="girl"></img>
            <hr/>
            <p class="big">I developed this website for the Henriot Insurance Group.</p>
        </div>
    </div>
</div>
<div id="modal13" class="modal fade modal1" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="brown text-center">Indiana Forestry Products</h4>
            </div>
            <img class="img-responsive center-block center borderBrown" src="images/indiana-forest.png" alt="girl"></img>
            <hr/>
            <p class="big">This website used to be unresponsive.  Using bootstrap, I made this website mobile responsive.</p>
        </div>
    </div>
</div>
<div id="modal14" class="modal fade modal1" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="brown text-center">Purdue Honors College</h4>
            </div>
            <img class="img-responsive center-block center borderBrown" src="images/purdue.png" alt="girl"></img>
            <hr/>
            <p class="big">I currently maintain honors.purdue.edu.  I have added a CMS system to it, updated some out-of-date systems, and improved several UI aspects of the site.</p>
        </div>
    </div>
</div>
<div class="row top-20 ">
    <br class="visible-xs-block" />
    <div class="col-sm-4 hover" onclick='$("#modal7").modal("toggle");'>
        <img class="img-responsive center-block borderBrown bottom" src="images/girl.png" alt="new csoi minimized"></img>
        <img class="img-responsive center-block top borderBrown" alt="" src="images/glass-medium.png"/>
    </div>
    <br class="visible-xs-block" />
    <div class="col-sm-4 hover" onclick='$("#modal8").modal("toggle");'>
        <img class="img-responsive center-block borderBrown bottom" src="images/neuroconnexions.png" alt="new csoi minimized"></img>
        <img class="img-responsive center-block top borderBrown" alt="" src="images/glass-medium.png"/>
    <br class="visible-xs-block" />
    </div>
    <div class="col-sm-4 hover" onclick='$("#modal9").modal("toggle");'>
        <img class="img-responsive center-block borderBrown bottom" src="images/bowling.png" alt="new csoi minimized"></img>
        <img class="img-responsive center-block top borderBrown" alt="" src="images/glass-medium.png"/>
    </div>
</div>
<div class="row">
    <br class="visible-xs-block" />
    <div class="col-sm-4 hover" onclick='$("#modal10").modal("toggle");'>
        <img class="img-responsive center-block borderBrown bottom" src="images/merlin.png" alt="new csoi minimized"></img>
        <img class="img-responsive center-block top borderBrown" alt="" src="images/glass-medium.png"/>
    </div>
    <div class="col-sm-4 hover" onclick='$("#modal11").modal("toggle");'>
        <img class="img-responsive center-block borderBrown bottom" src="images/purdue-site.png" alt="new csoi minimized"></img>
        <img class="img-responsive center-block top borderBrown" alt="" src="images/glass-medium.png"/>
    </div>
    <div class="col-sm-4 hover" onclick='$("#modal13").modal("toggle");'>
        <img class="img-responsive center-block borderBrown bottom" src="images/indiana-forest.png" alt="new csoi minimized"></img>
        <img class="img-responsive center-block top borderBrown" alt="" src="images/glass-medium.png"/>
    </div>
</div>
<div class="row top-20 ">
    <br class="visible-xs-block" />

    <div class="col-sm-4 hover" onclick='$("#modal12").modal("toggle");'>
        <img class="img-responsive center-block borderBrown bottom" src="images/henriot.png" alt="new csoi minimized"></img>
        <img class="img-responsive center-block top borderBrown" alt="" src="images/glass-medium.png"/>
    </div>

    <div class="col-sm-4 hover" onclick='$("#modal14").modal("toggle");'>
        <img class="img-responsive center-block borderBrown bottom" src="images/purdue.png" alt="new csoi minimized"></img>
        <img class="img-responsive center-block top borderBrown" alt="" src="images/glass-medium.png"/>
    </div>
    <div class="col-sm-4 hover" onclick='$("#modal6").modal("toggle");'>
        <img class="img-responsive center-block borderBrown bottom" src="images/shania.png" alt="new csoi minimized"></img>
        <img class="img-responsive center-block top borderBrown" alt="" src="images/glass-medium.png"/>
    </div>
</div>
<div class="row top-20">

    <div class="col-sm-4 hover" onclick='$("#modal3").modal("toggle");'>
        <img class="img-responsive center-block borderBrown bottom" src="images/soihub.png" alt="captcha"></img>
        <img class="img-responsive center-block top borderBrown" alt="" src="images/glass-medium.png"/>
    </div>
</div>