Final Lightbox dev
This commit is contained in:
Moutonjr Geoff
parent
79b1154104
commit
071130c9b9
36
assets/css/modal.css
Normal file
36
assets/css/modal.css
Normal file
@ -0,0 +1,36 @@
|
||||
@charset "UTF-8";
|
||||
/*OVERRIDES */
|
||||
.modal-dialog{
|
||||
margin: 65px auto 0px auto;
|
||||
}
|
||||
.modal-content{
|
||||
background: black;
|
||||
background: linear-gradient(60deg, rgba(70,70,70,1) 0%, rgba(0,0,0,1) 70%);
|
||||
}
|
||||
.close{
|
||||
color: white;
|
||||
}
|
||||
/* END OVERRIDES */
|
||||
|
||||
.modal-description{
|
||||
position: relative;
|
||||
z-index: 1051;
|
||||
}
|
||||
.technopreview{
|
||||
max-width: 180px;
|
||||
display: block;
|
||||
margin: 0px auto;
|
||||
margin-top: 0px;
|
||||
margin-right: auto;
|
||||
margin-bottom: 0px;
|
||||
margin-left: auto;
|
||||
}
|
||||
.technoname{
|
||||
color: white;
|
||||
}
|
||||
.technosub{
|
||||
font-size: 13px;
|
||||
}
|
||||
.technodetails{
|
||||
line-height: 1.4em;
|
||||
}
|
||||
@ -92,6 +92,22 @@
|
||||
});
|
||||
|
||||
|
||||
/* Contact autofill
|
||||
========================================================*/
|
||||
$("#btn-help-cyber").on("click", function() {
|
||||
$("#msg_subject").val("J'ai besoin d'aide en cyber !");
|
||||
});
|
||||
|
||||
/* Modal spawn
|
||||
========================================================*/
|
||||
$(".icon-eye").on("click", function() {
|
||||
$('.technopreview').attr('src', $(this).data("icon"));
|
||||
$('.technopreview').attr('alt', $(this).data("name"));
|
||||
$('.technoname').text($(this).data("name"));
|
||||
$('.technosub').text($(this).data("sub"));
|
||||
$('.technodetails').text($(this).data("details"));
|
||||
$('#technomodal').modal('show');
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
||||
@ -24,7 +24,7 @@
|
||||
icon: "icon-bubbles"
|
||||
details: "Assistance RSSI, montage de SMSI, certification ISO27001"
|
||||
experience:
|
||||
date: "8 ans"
|
||||
date: "9 ans"
|
||||
current: "Consulant manager chez FORMIND"
|
||||
jobs:
|
||||
- title: "Consultant Manager chez Formind"
|
||||
@ -86,9 +86,11 @@
|
||||
tags: "opensource bigdata"
|
||||
score: 5
|
||||
- name: "Kibana"
|
||||
sub: "Définitivement la vue BDD la plus aboutie."
|
||||
details: "OK je ne suis plus le gourou de Kibana depuis la sortie de la v4. Il faut reconnaitre que Elastic est devenu un vrai produit assez proche de Splunk maintenant, je ne pourrais plus expliquer en 30' à des jeunes comment se service de ce formidable outil. Il reste cependant leader du marché, et garde quand même ses origines: conforme à Lucene, avec une belle interface, et REST-ful. J'ai beaucoup déployé, administré, aimé Kibana."
|
||||
logo: "assets/img/icons/Kibana.png"
|
||||
tags: "opensource bigdata"
|
||||
score: 5
|
||||
score: 3
|
||||
- name: "Hadoop"
|
||||
logo: "assets/img/icons/Hadoop.png"
|
||||
tags: "opensource bigdata"
|
||||
@ -230,7 +232,7 @@
|
||||
tags: "opensource languages"
|
||||
score: 2
|
||||
- name: "Java"
|
||||
logo: "assets/img/icons/Java.png"
|
||||
#logo: "assets/img/icons/Java.png"
|
||||
tags: "languages"
|
||||
score: 3
|
||||
- name: "LaTeX"
|
||||
|
||||
@ -21,6 +21,8 @@
|
||||
<link rel="stylesheet" type="text/css" href="assets/css/animate.css">
|
||||
<!-- Main Style -->
|
||||
<link rel="stylesheet" type="text/css" href="assets/css/main.css">
|
||||
<!-- Modal adding -->
|
||||
<link rel="stylesheet" type="text/css" href="assets/css/modal.css">
|
||||
<!-- Responsive Style -->
|
||||
<link rel="stylesheet" type="text/css" href="assets/css/responsive.css">
|
||||
|
||||
@ -123,7 +125,7 @@
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<div class="header-button wow fadeInUp" data-wow-delay="1s">
|
||||
<a href="#" class="btn btn-common">J'ai besoin d'aide cyber</a>
|
||||
<a href="#contact" class="btn btn-common" id="btn-help-cyber">J'ai besoin d'aide cyber</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -160,7 +162,7 @@
|
||||
<li><span class="pro-title"> Téléphone </span> <span class="pro-detail"><img alt="Phone number" src="assets/img/Phone.png"/></span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="" class="btn btn-common"><i class="icon-paper-clip"></i>Téléchargez mon CV</a>
|
||||
<a href="{{ cv_url }}" class="btn btn-common"><i class="icon-paper-clip"></i>Téléchargez mon CV</a>
|
||||
<a href="#contact" class="btn btn-danger"><i class="icon-speech"></i> Contactez-moi</a>
|
||||
</div>
|
||||
</div>
|
||||
@ -242,6 +244,25 @@
|
||||
|
||||
<!-- Portfolio Section -->
|
||||
<section id="portfolios" class="section-padding">
|
||||
|
||||
<!-- Modal Starts -->
|
||||
<div class="modal fade" id="technomodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-body">
|
||||
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
|
||||
<img src="" class="technopreview" alt="" />
|
||||
<div class="modal-description">
|
||||
<h1 class="technoname"></h1>
|
||||
<h2 class="technosub"></h2>
|
||||
<p class="technodetails"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End of modal -->
|
||||
|
||||
<!-- Container Starts -->
|
||||
<div class="container">
|
||||
<h2 class="section-title wow flipInX" data-wow-delay="0.4s">Panel de compétences</h2>
|
||||
@ -284,16 +305,14 @@
|
||||
<span class="score-dot {{dotnodot(skill.score,5)}}"></span>
|
||||
</div>
|
||||
</div>-->
|
||||
<div class="embed-responsive-1by1 col-xs-2 col-sm-2 col-md-1 col-lg-1 col-xl-1 mix {{ skill.tags }}">
|
||||
<div class="embed-responsive embed-responsive-1by1 col-xs-2 col-sm-2 col-md-1 col-lg-1 col-xl-1 mix {{ skill.tags }}">
|
||||
<div class="text-center portfolio-item">
|
||||
<div class="shot-item">
|
||||
<img src="{{ skill.logo }}" alt="" />
|
||||
<img src="{{ skill.logo }}" alt="{{ skill.name }}" />
|
||||
<div class="overlay">
|
||||
<div class="icons">
|
||||
<a class="lightbox preview" href="{{ skill.logo }}">
|
||||
<i class="icon-eye"></i>
|
||||
</a>
|
||||
<a class="link" href="#">
|
||||
<i class="icon-eye" data-sub="{{ skill.sub }}" data-name="{{ skill.name }}" data-icon="{{ skill.logo }}" data-details="{{ skill.details }}"></i>
|
||||
<a class="link" href="{{ skill.link }}">
|
||||
<i class="icon-link"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user