Делаем разметку HTML:
Пишем наш стиль:
Дополняем jquery:
Смотрим наш результат:
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 & 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;
}
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
}![[HAL] Resource Statistics](/data/resource_icons/3/3604.jpg?1669821604){kind=icon}
![[DohTheme] Mere](/data/resource_icons/2/2867.jpg?1615446038){kind=icon}
![[XFA] Core](/data/resource_icons/1/1180.jpg?1533049934){kind=icon}
