• Для скачивания ресурсов Форума пользователь должен написать не менее 5 полезных сообщений и получить 5 симпатий.
    Если Вы не хотите выполнять условия, Вы должны купить переход в группу "Работяга" или любое наше дополнение и сможете скачивать ресурсы, перевод происходит по email, который указывается при оплате.
Оформление портфолио с современной навигацией

Разработка Оформление портфолио с современной навигацией

Нет прав для скачивания
Оформление портфолио с современной навигацией.
Делаем разметку HTML:
HTML:
<html>

  <head>
    <meta charset="utf-8">

    <title>tnga | personal portfolio</title>

    <meta name="description" content="FreeCodeCamp personal portfolio challenge">
    <meta name="author" content="Tindo Ngoufo Arsel">

    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">


    <!--[if lt IE 9]>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.2.0/lib/js/html5shiv.js"></script>
    <![endif]-->
  </head>

  <body>
   
    <!-- Navigation -->
    <nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation">
      <div class="container topnav">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand topnav" href="#"><i class="fa fa-heart animated infinite zoomIn" style="color:red"></i> <b>Tindo N. Arsel</b></a>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav navbar-right">
            <li>
              <a href="#/about">About</a>
            </li>
            <li>
              <a href="#/portfolio">Portfolio</a>
            </li>
            <li>
              <a href="#/contact">Contact</a>
            </li>
          </ul>
        </div>
        <!-- /.navbar-collapse -->
      </div>
      <!-- /.container -->
    </nav>

    <div class="reveal">

      <!-- Any section element inside of this container is displayed as a slide -->
      <div class="slides">
        <section>
          <div class="social-profile">
            <figure class="social-avatar">
              <img src="//tnga.github.io/sharedbazar/img/profile-me.jpg" alt="profile-picture" />
              <figcaption>
                <a target="_blank" href="https://twitter.com/tng_arsel" class="s-twitter"><i class="fa fa-twitter fa-fw"></i><span> his twitter </span></a>
                <a target="_blank" href="https://github.com/tnga" class="s-github"><i class="fa fa-github fa-fw"></i><span> his github </span></a>
                <a target="_blank" href="https://www.linkedin.com/in/tngarsel" class="s-linkedin"><i class="fa fa-linkedin fa-fw"></i><span> his linkedIn </span></a>
                <a target="_blank" href="https://www.freecodecamp.com/tnga" class="s-freecodecamp"><i class="fa fa-fire fa-fw"></i><span> his freeCodeCamp </span></a>
              </figcaption>
           </figure>
          </div>
         
          <h4 class="animated rubberBand">Welcome to my portfolio web page</h4>
          <p>
            <small>
              I am a student in mathematics and computer science in university of Dschang Cameroon.
              I like coding and make research in science domain. Like open source initiative and contribute to open source projects.
              I like working, honesty, perseverance, sports, risk, games, movies, kids, girls, ...
              <br />
              Think that <q><i class="fa fa-quote-left"></i> is more important to estimate someone than to love him <i class="fa fa-quote-right"></i></q>.
              <br />
              <br />
              One of my favorite citation by <b>Gandhi</b> is:
              <q><i class="fa fa-quote-left"></i> Be the change you want to see in the world. <i class="fa fa-quote-right"></i></q>
            </small>
          </p>
        </section>

        <section id="about">
           <section>
             <h3>Overview of my competences</h3>
             <p>
               My passion is to use science and technology based solutions, to help solve real world challenges.
             </p>
           </section>
          <section>
            <h4>Mathematics</h4>
           
            <p>General knowledge in:</p>
            <ul>
              <li>Algebra</li>
              <li>Geometry</li>
              <li>Analysis</li>
              <li>Probabilities</li>
              <li>Statistics</li>
            </ul>
          </section>
          <section>
            <h4>Computer science</h4>
           
            <p>Languages:</p>
            <ul>
              <li>Javascript</li>
              <li>HTML5</li>
              <li>CSS3/SASS</li>
              <li>PHP</li>
              <li>C++</li>
              <li>Python</li>
              <li>Shell</li>
              <li>Java</li>
            </ul>
          </section>
          <section>
            <h4>Computer science</h4>
           
            <p>Library and Frameworks:</p>
            <ul>
              <li>jQuery</li>
              <li>Bootstrap3</li>
              <li>Reveal.js</li>
              <li>Code Igniter</li>
              <li>Lavarel</li>
            </ul>
          </section>
          <section>
            <h4>Computer science</h4>
           
            <p>Tools &amp; expertise:</p>
            <ul>
              <li>Git</li>
              <li>Responsive Web Design</li>
              <li>Agile Methodologies</li>
            </ul>
          </section>
        </section>

        <!-- Example of nested vertical slides -->
        <section id="portfolio">
          <section>
            <h3>Awesomeness Portfolio</h3>
            <p>Below you'll find some of my recent work.</p>
          </section>
          <section class="container">
            <h4>Projects from my FreeCodeCamp experience</h4>
           
            <div class="row">
              <a href="https://codepen.io/tnga/full/pybdeQ/" target="_blank" class="col-md-4 i-animated">
                <figure class="project-thumb">
                  <img src="//tnga.github.io/sharedbazar/img/linus_torvalds_wallpaper.jpg" alt="tribute-shot">
                  <figcaption>Tribute page</figcaption>
                  <legend>
                    <i class="fa fa-fire"></i>
                    <br/>
                    Topic: Linus Benedict Torvalds
                  </legend>
                </figure>
              </a>
              <a href="https://codepen.io/tnga/full/QNKMdR/" target="_blank" class="col-md-4 i-animated">
                <figure class="project-thumb">
                  <img src="//tnga.github.io/sharedbazar/img/portfolio.png" alt="Portfolio-shot">
                  <figcaption>Portfolio web page</figcaption>
                  <legend>
                    <i class="fa fa-fire"></i>
                    <br/>
                    personal portfolio challenge
                  </legend>
                </figure>
              </a>
            </div>
          </section>
          <section class="container">
            <h4>My own projects</h4>
           
            <div class="row">
              <a href="http://umiproject.sf.net" target="_blank" class="col-md-4 i-animated">
                <figure class="project-thumb">
                  <img src="//tnga.github.io/sharedbazar/img/umiproject.png" alt="Portfolio-shot">
                  <figcaption>umiproject</figcaption>
                  <legend>
                    <i class="fa fa-github"></i>
                    <br/>
                    Linux for a better world.
                  </legend>
                </figure>
              </a>
              <a href="https://github.com/tnga/lib.ijs" target="_blank" class="col-md-4 i-animated">
                <figure class="project-thumb">
                  <img src="//tnga.github.io/sharedbazar/img/ijs.png" alt="Portfolio-shot">
                  <figcaption>iJS</figcaption>
                  <legend>
                    <i class="fa fa-github"></i>
                    <br/>
                    Mini library for javaScript language.
                    It provide functionalities that facilitate web's project development and it can be associated with all existing JS libraries.
                  </legend>
                </figure>
              </a>
              <a href="https://github.com/tnga/lib.iui" target="_blank" class="col-md-4 i-animated">
                <figure class="project-thumb">
                  <img src="//tnga.github.io/sharedbazar/img/iui.png" alt="Portfolio-shot">
                  <figcaption>iUI</figcaption>
                  <legend>
                    <i class="fa fa-github"></i>
                    <br/>
                    Simple mini sass/css library which provide some user's friendly designs for the associated projects.
                  </legend>
                </figure>
              </a>
            </div>
          </section>
          <section class="container">
            <h4>Projects which I contributed to</h4>
           
            <div class="row">
              <a href="https://github.com/PedroHLC/osdlyrics" target="_blank" class="col-md-4 i-animated">
                <figure class="project-thumb">
                  <img src="//tnga.github.io/sharedbazar/img/osdlyrics.png" alt="tribute-shot">
                  <figcaption>osdlyrics</figcaption>
                  <legend>
                    <i class="fa fa-github"></i>
                    <br/>
                    Show lyrics with your favorite media player.
                  </legend>
                </figure>
              </a>
              <a href="https://github.com/daneden/animate.css" target="_blank" class="col-md-4 i-animated">
                <figure class="project-thumb">
                  <img src="//tnga.github.io/sharedbazar/img/animate.png" alt="Portfolio-shot">
                  <figcaption>animate.css</figcaption>
                  <legend>
                    <i class="fa fa-github"></i>
                    <br/>
                    A cross-browser library of CSS animations. As easy to use as an easy thing.
                  </legend>
                </figure>
              </a>
              <a href="https://github.com/web-animations/web-animations-js" target="_blank" class="col-md-4 i-animated">
                <figure class="project-thumb">
                  <img src="//tnga.github.io/sharedbazar/img/webanime.png" alt="Portfolio-shot">
                  <figcaption>web-animation</figcaption>
                  <legend>
                    <i class="fa fa-github"></i>
                    <br/>
                    JavaScript implementation of the Web Animations API
                  </legend>
                </figure>
              </a>
            </div>
          </section>
         
        </section>

        <section id="contact">
         
          <p>
            <small>
              <q><i class="fa fa-quote-left"></i> The important is not who you are but what you do. <i class="fa fa-quote-right"></i></q>
            </small>
          </p>
          <aside>
            <a class="btn btn-primary btn-lg btn-block" href="mailto:devtnga@gmail.com"><i class="fa fa-envelope fw"></i> send a mail</a>
          </aside>
        </section>

      </div>

    </div>

  </body>
</html>
Пишем наш стиль:
CSS:
.social-avatar, .social-avatar img:first-of-type {

  width: 250px ;
  height: 250px ;
}
.social-avatar {

  display: block ;
  position: relative ;
  /*background: red ;*/
  padding: 0px ;
}
.social-avatar img:first-of-type {

  border: 10px solid white ;
  box-shadow: 0px 0px 15px #eee ;
  border-radius: 50% ;
  margin: 0px ;
}
.social-avatar figcaption:first-of-type a {

  display: inline-block ;
  font-size: 0.5em ;
  font-family: Ubuntu, "comic sans ms" ;
  border: 3px solid white ;
  border-radius: 100px/100px ;
  background: #ff6600 ;
  color: white ;
  padding: 5px ;
  min-height: 40px ;
  min-width: 40px ;
  position: absolute;
}
.social-avatar figcaption:first-of-type a span {

  display: none ;
  font-size: 0.9em ;
}
.social-avatar figcaption:first-of-type a:hover span {

  display: inline;
  padding-left: 2px ;
}
.social-avatar figcaption:first-of-type a:nth-child(1) {

  top: 0px ;
  left: 35px ;
}
.social-avatar figcaption:first-of-type a:nth-child(2) {

  top: 45px ;
  left: 5px ;
}
.social-avatar figcaption:first-of-type a:nth-child(3) {

  top: 100px ;
  left: -5px ;
}
.social-avatar figcaption:first-of-type a:nth-child(4) {

  top: 155px ;
  left: 5px ;
}
.social-avatar figcaption:first-of-type a:nth-child(5) {

  top: 200px ;
  left: 45px ;
}
.social-avatar figcaption:first-of-type a.s-facebook {

  background: #3b5998 ;
}
.social-avatar figcaption:first-of-type a.s-twitter {

  background: #4099FF ;
}
.social-avatar figcaption:first-of-type a.s-github {

  background: #171515 ;
}
.social-avatar figcaption:first-of-type a.s-linkedin {

  background: #0e76a8 ;
}
.social-avatar figcaption:first-of-type a.s-freecodecamp {

  background: maroon ;
}

.social-profile {

  display: inline-block;
  margin: auto;
}

.project-thumb:hover {

  box-shadow: 0px 0px 7px #f60;
}
.project-thumb:hover figcaption {

  text-shadow: 0px 0px 3px #f60;
  border: 1px solid #f60 ;
}
.project-thumb figcaption {

  font-size: 0.5em ;
  color: white ;
  text-shadow: 0px 0px 3px blue;
  margin-top: -3px ;
  padding: 3px ;
}
.project-thumb img:first-of-type {

  height: 5em ;
}
.project-thumb legend {

  font-size: 0.4em ;
  background: rgba(0, 0, 0, 0.7) ;
  position: absolute;
  top: 0px ;
  width: 100% ;
  height: 70% ;
  color: white;
  overflow: hidden ;
  display: none ;
}
.project-thumb:hover legend {

  display: block;
}
.project-thumb legend i {

  font-size: 3em ;
  display: inline-block;
  padding-bottom: 0.3em ;
}

.navbar-default {

  background: black url(//tnga.github.io/sharedbazar/img/bg_nav.png) repeat ;
  box-shadow: 0px 3px 5px rgba(255, 255, 255, 0.5) ;
  font-family: Ubuntu, "comic sans ms" ;
}

*:hover, *:focus {

  transition: all linear 0.3s ;
}
body, .reveal {

  font-family: "DejaVu Sans", verdana, "Open Sans", sans, serif;
  background: #222 url( //tnga.github.io/sharedbazar/img/bg.png) repeat ;
}
h4, h2, h3, h1, h5, .reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {

  font-family: "GE Inspira", raleway, "DejaVu Sans", verdana, sans, serif;
  text-transform: none ;
  border-bottom: 1px solid white ;
  padding-bottom: 0.7em ;
}
.reveal p, .reveal small {

  line-height: 1.3em;
}
.reveal q, .reveal blockquote {

  font-family: Purisa, "Lucida Handwriting", "Comic Sans Ms" ;
  font-style: normal ;
}


/* Take from iJS-ui
--------------------
Certains scripts sont utiliser pour générer du code HTML nécessaire pour gérer
des fonctionnalités de certaines page du site. C'est le cas d'une boite de dialogue
personnalisée via des scripts.
*/
/* début de la déclaration de style pour des éléments HTML généré par des scripts
----------------------------------------------------------------------------------*/
#notify-block {
  padding: 10px 22px 10px 10px;
  min-height: 40px;
  min-width: 100px;
  max-width: 300px;
  max-height: 100px;
  z-index: 100;
  overflow: hidden;
  font-family: "DejaVu Sans", _DejaVu_Sans, verdana, OpenSans, sans-serif;
  font-size: 0.9em;
  border-radius: 7px 0px 0px 7px;
  box-shadow: -1px 1px 7px rgba(103, 103, 103, 0.7);
  position: fixed;
  top: 20%;
  right: 0px;
}
@media (max-width: 800px) {
  #notify-block {
    max-width: 200px;
  }
}
#notify-block.notify-normal {
  background: #f2f2f2;
  color: #1a1a1a;
}
#notify-block.notify-error {
  background: #f00;
  color: #fff;
}
#notify-block.notify-error .b-dialog-close {
  background: #fff;
  color: #f00;
}
#notify-block.notify-warring {
  background: yellow;
  color: #f00;
}
#notify-block.notify-success {
  background: #f2f2f2;
  color: #ffa300;
}
#notify-block .b-dialog-close {
  position: absolute;
  right: 0px;
  top: 1px;
  width: 20px;
  height: 20px;
  font-size: 9px;
}
.b-dialog-close {
  display: block;
  background: #f00;
  border: none;
  border-radius: 3px;
  box-shadow: none;
  padding: 2px;
  width: 35px;
  color: #fff;
  font-weight: bold;
  font-family: "DejaVu Sans", _DejaVu_Sans, verdana, OpenSans, sans-serif;
  font-size: 14px;
}
.b-dialog-close:hover {
  box-shadow: 0px 0px 2px #f00;
  font-size: 13px;
  background: #f00;
}
Дополняем jquery:
JavaScript:
/*-- Printing and PDF exports --*/
var link = document.createElement( 'link' );
      link.rel = 'stylesheet';
      link.type = 'text/css';
      link.href = window.location.search.match( /print-pdf/gi ) ? 'https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.2.0/css/print/pdf.css' : 'https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.2.0/css/print/paper.css';
      document.getElementsByTagName( 'head' )[0].appendChild( link );


$(document).ready( function() {
       
        $(".social-profile:first").clone().prependTo("#contact") ;
       
        showNotification("Also press <b>space</b>, <b>arrows</b>, <b>esc</b> keys to navigate.") ;
       
      });
      // Full list of configuration options available at:
      // https://github.com/hakimel/reveal.js#configuration
      Reveal.initialize({
        controls: true,
        progress: true,
        history: true,
        center: true,

        transition: 'convex' // none/fade/slide/convex/concave/zoom

        // Optional reveal.js plugins
        /*dependencies: [
          { src: 'bower_components/reveal.js/lib/js/classList.js', condition: function() { return !document.body.classList; } },
          { src: 'bower_components/reveal.js/plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
          { src: 'bower_components/reveal.js/plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
          { src: 'bower_components/reveal.js/plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
          { src: 'bower_components/reveal.js/plugin/zoom-js/zoom.js', async: true },
          { src: 'bower_components/reveal.js/plugin/notes/notes.js', async: true }
        ]*/
      });
     
      Reveal.addEventListener( 'slidechanged', function( event ) {
       
        /*animate.css is not use here cause it isn't evident to use it with reveal's events.
         *to have expected result when sliding, animation class have to be added and removed when it end.
         *I have got some conflicts when was trying that solution.
         *----------------------------------------------------------------------
        */
       
        /*animate slider's controls button when enabled
         *this is to take attention of user for navigation ways
         */
        if( $(".reveal .controls .navigate-left").hasClass("enabled") ) {
         
          iJS.animate( $(".reveal .controls .navigate-left.enabled")[0], "fade-in-right") ;
        }
        if( $(".reveal .controls .navigate-right").hasClass("enabled") ) {
         
          iJS.animate( $(".reveal .controls .navigate-right.enabled")[0], "fade-in-left") ;
        }
        if( $(".reveal .controls .navigate-up").hasClass("enabled") ) {
         
          iJS.animate( $(".reveal .controls .navigate-up.enabled")[0], "fade-in-up") ;
        }
        if( $(".reveal .controls .navigate-down").hasClass("enabled") ) {
         
          iJS.animate( $(".reveal .controls .navigate-down.enabled")[0], "fade-in-down") ;
        }
       
        /*few animation for some element depending of showing sliders*/
        if(Reveal.isFirstSlide() || Reveal.isLastSlide()) {
         
          $(".social-profile").each( function() {
           
            iJS.animate( this, "rotate-in") ;
          }) ;
        }
        if(Reveal.getIndices().h == 2) {
         
          $("#portfolio a.i-animated").each( function() {

            iJS.animate( this, "flip-in-y") ;
          }) ;
        } ;
       
      } );
     

/* Take from iJS-ui
--------------------*/

//permet d'afficher les notifications
function showNotification( msg,  mode ) {

  var notify = document.getElementById("notify-block") ;

  if( ! notify ) {

    notify = document.createElement('p') ;
    notify.id = "notify-block" ;

    document.body.appendChild( notify ) ;

  } else clearTimeout( window.i_event_notify_id ) ; //utile s'il y a eu d'autre notification avant.

  notify.style.display = "none" ; //on se rassure que la zone sera invisible avant l'affichage du msg
  notify.innerHTML = msg ;

  var closeButton = document.createElement("button");
  closeButton.className = "b-dialog-close";
  closeButton.innerHTML = "X";
  closeButton.onclick = function () {

    document.body.removeChild( notify ) ;
  } ;
  notify.appendChild( closeButton ) ;

  notify.style.display = "block" ; //affiche du msg
  notify.className = "notify-normal" ;

  //le mode en principe est soit "normal" soit "warring"
  //cependant n'importe quel valeur sauf "warring" peut convernir pour un mode d'affichage normal.
  if( mode === "warring") {

    notify.className = "notify-warring" ;
    window.i_event_notify_id = setTimeout( function(){ document.body.removeChild( notify ) ; }, 20000) ; //on cache la zone après 30s

  } else if( mode === "error") {

    notify.className = "notify-error" ;
    window.i_event_notify_id = setTimeout( function(){ document.body.removeChild( notify ) ; }, 25000) ; //on cache la zone après 30s

  }
  else if( mode === "success") {

    notify.className = "notify-success" ;
    window.i_event_notify_id = setTimeout( function(){ document.body.removeChild( notify ) ; }, 25000) ; //on cache la zone après 30s

  } else window.i_event_notify_id = setTimeout( function(){ document.body.removeChild( notify ) ; }, 15000) ; //on cache la zone après 15s

}
Смотрим наш результат:
03r4.gif
Автор
baltun
Скачиваний
0
Просмотры
234
Первый выпуск
Обновление
Рейтинг
0.00 звёзд Оценок: 0

Ещё ресурсы от baltun

Верх Низ