<link rel="stylesheet" href="css/bootstrap.min.css"/>

<script src="js/jquery-1.9.1.min.js"></script>

<script src="js/bootstrap.min.js"></script>

<div class="panel-group" id="accordion">

                      <div class="panel panel-default">

                        <div class="panel-heading">

                          <h4 class="panel-title">

                            <a data-toggle="collapse" data-parent="#accordion"

                              href="#collapseOne">

                              <p class="time">1 在线聊天室<a class="link" target="_blank"  href="#">演示</a><a target="_blank"  class="link" href="#">博文</a><a  target="_blank" class="link" href="#">代码</a></p>

                            </a>

                          </h4>

                        </div>

                        <div id="collapseOne" class="panel-collapse collapse in">

                          <div class="panel-body">

                            <p class="position">

                            <span class="tag orange">AngularJS</span><span class="tag green">Node.js</span>

                            <span class="tag pink">Express</span><span class="tag red">socket.io</span>

                            <span class="tag purple">Bootstrap</span>

                            </p>

                            <p>一个实时的在线聊天系统,包括广播、群聊及私信功能。</p>

                            <p>后端采用Node.js+Express,前端MVVM框架采用AngularJS,界面构建使用Bootstrap,通信部分通过将socket.io包装成AngularJS服务实现。</p>

                          </div>

                        </div>

                      </div>

                      <div class="panel panel-default">

                        <div class="panel-heading">

                          <h4 class="panel-title">

                            <a data-toggle="collapse" data-parent="#accordion"

                              href="#collapseTwo">

                               <p class="time">2 jQuery轮播插件<a target="_blank"  href="#" class="link">演示</a><a  target="_blank" href="#" class="link">博文</a><a href="#" class="link">代码</a></p>

                            </a>

                          </h4>

                        </div>

                        <div id="collapseTwo" class="panel-collapse collapse">

                          <div class="panel-body">

                            <p class="position"><span class="tag darkred">jQuery</span><span class="tag yellow">HTML</span><span class="tag lightblue">CSS</span></p>

                            <p>轮播插件,支持左右滑动和淡入淡出两种效果。</p>

                            <p>扩展jQuery对象,为其原型$.fn添加轮播函数,实例化出的jQuery都拥有此函数。支持隐式迭代和链式语法。

                            其实现原理是使用jQuery提供的动画函数不断改变DOM节点的位置属性值,达到轮播效果。</p>

                          </div>

                        </div>

                      </div>

                      <div class="panel panel-default">

                        <div class="panel-heading">

                          <h4 class="panel-title">

                            <a data-toggle="collapse" data-parent="#accordion"

                              href="#collapseThree">

                               <p class="time">3 个人博客<a target="_blank"  href="#" class="link">演示</a><a target="_blank"  href="#" class="link">博文</a></p>

                            </a>

                          </h4>

                        </div>

                        <div id="collapseThree" class="panel-collapse collapse">

                          <div class="panel-body">

                            <p class="position"><span class="tag black">Ghost</span><span class="tag green">Node.js</span><span class="tag lightred">SQLite</span><span

                            class="tag pink">Express</span><span class="tag lightorange">Forever</span><span class="tag lightpurple">Handlebars</span></p>

                            <p>基于Ghost的个人博客系统,核心内容包括文章预览、发表以及评论等功能。</p>

                            <p>基于Ghost博客系统开发，页面由Handlebars模板引擎渲染，使用SQLite作为后台数据库,目前通过Forever管理进程运行于Nginx服务器上。

                            应用了Media Query、字体图标等技术，还引入了highlight.js高亮文章中的代码。</p>

                          </div>

                        </div>

                      </div>

                    </div>