Added search bar
This commit is contained in:
Moutonjr Geoff
parent
071130c9b9
commit
a2589d31ea
@ -802,7 +802,7 @@ a.back-to-top:hover, a.back-to-top:focus {
|
||||
|
||||
.controls {
|
||||
text-align: center;
|
||||
padding: 0px 0px 20px;
|
||||
padding: 0px 0px 5px;
|
||||
}
|
||||
|
||||
.controls .active {
|
||||
@ -1195,3 +1195,54 @@ a:not([href]):not([tabindex]):focus, a:not([href]):not([tabindex]):hover {
|
||||
video {
|
||||
padding: 0px 7px;
|
||||
}
|
||||
|
||||
/* Search Bar */
|
||||
|
||||
.ui-autocomplete-category {
|
||||
font-weight: bold;
|
||||
padding: .1em .2em;
|
||||
margin: .4em 0 .1em;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.searchbar{
|
||||
margin-bottom: 10px;
|
||||
margin-top: auto;
|
||||
height: 45px;
|
||||
background-color: #353b48;
|
||||
border-radius: 30px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.search_input{
|
||||
color: white;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
background: none;
|
||||
width: 0;
|
||||
caret-color:transparent;
|
||||
line-height: 25px;
|
||||
transition: width 0.4s linear;
|
||||
}
|
||||
|
||||
.searchbar:hover > .search_input{
|
||||
padding: 0 10px;
|
||||
width: 200px;
|
||||
caret-color:red;
|
||||
transition: width 0.4s linear;
|
||||
}
|
||||
|
||||
.searchbar:hover > .search_icon{
|
||||
background: white;
|
||||
color: #e74c3c;
|
||||
}
|
||||
|
||||
.search_icon{
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
float: right;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 50%;
|
||||
color:white;
|
||||
|
||||
10
assets/js/autocomplete.js
Normal file
10
assets/js/autocomplete.js
Normal file
@ -0,0 +1,10 @@
|
||||
$( function() {
|
||||
$( ".search_input" ).autocomplete({
|
||||
autoFocus: true,
|
||||
source: technos,
|
||||
select: function( event, ui ) {
|
||||
var selectedItem = ui.item.label;
|
||||
$("#eye-"+ selectedItem ).click();
|
||||
}
|
||||
});
|
||||
});
|
||||
18706
assets/js/jquery-ui.js
vendored
Normal file
18706
assets/js/jquery-ui.js
vendored
Normal file
File diff suppressed because it is too large
Load Diff
53
settings.yml
53
settings.yml
@ -66,22 +66,19 @@
|
||||
|
||||
skills:
|
||||
- name: "Storm"
|
||||
sub: "Avec Spark, Un orchestarateur de code à la Kubernetes"
|
||||
logo: "assets/img/icons/Storm.jpg"
|
||||
tags: "opensource bigdata"
|
||||
score: 5
|
||||
- name: "Kafka"
|
||||
sub: "Une FIFO ultra performante"
|
||||
details: "J'ai découvert Kafka avec la PunchPlatform. Cette FIFO est toute simple (modulo la synchronisation entre les noeuds et l'écriture en mémoir vive) : on prend un tableau de N entrées, les écrivains explicitent quel document écrire, à quel offset. Kafka délègue à Zookeeper la gestion de la synchro des écrivains et des consommateurs. La donnée n'est jamais supprimée, tout le temps écrasée. Simple comme bonjour."
|
||||
logo: "assets/img/icons/Kafka.jpg"
|
||||
tags: "opensource bigdata"
|
||||
score: 5
|
||||
- name: "Spark"
|
||||
logo: "assets/img/icons/Spark.png"
|
||||
tags: "opensource bigdata"
|
||||
score: 2
|
||||
- name: "Metron"
|
||||
logo: "assets/img/icons/Metron.png"
|
||||
tags: "opensource bigdata"
|
||||
score: 2
|
||||
- name: "Elasticsearch"
|
||||
sub: "Base Lucene sous stéroïdes"
|
||||
details: "Idem, découvert grâce à ELK et la PunchPlatform chez Thales. Depuis le packaging de Elastic dans un produit continue, difficile de parler d'Elasticsearch seule... pourtant, le travail est remarquable. Sur une souche de base Lucene toute simple, Elasticsearch présente l'indexation, la réplication, le sharding et le clustering via une simple (très simple) API REST ; il n'a jamais été aussi facile d'administrer une BDD, d'en comprendre ses moindres rouages, tout en profitant de la performance assez incroyable de Lucene."
|
||||
logo: "assets/img/icons/Elasticsearch.png"
|
||||
tags: "opensource bigdata"
|
||||
score: 5
|
||||
@ -92,62 +89,92 @@
|
||||
tags: "opensource bigdata"
|
||||
score: 3
|
||||
- name: "Hadoop"
|
||||
sub: "Le moteur mégadonnées"
|
||||
details: "Mapreduce, vous connaissez ? Intégré à la Punch, permet des gros travaux d'agrégation sur des données en parallélisant les calculs. Personnellement, j'ai PoC-é la solution pour comprendre comment tout ça fonctionne, mais ne l'ai jamais utilisé en prod."
|
||||
logo: "assets/img/icons/Hadoop.png"
|
||||
tags: "opensource bigdata"
|
||||
score: 2
|
||||
- name: "CEPH"
|
||||
sub: "du RAID disque sur le réseau"
|
||||
details: "Il fallait y penser : que faire de ses vieux disques qui trainent dans nos PC ? Stocker de la donnée distribuée ! Mine de rien, on arrive rapidement à des Tio de données à accès rapide, la stabilité de CEPH en fait un produit puissant. Je l'ai administré dans la PunchPlatform de Thales mais n'ai jamais regardé ses rouages, je connais cependant bien son fonctionnement, saurais end éployer."
|
||||
logo: "assets/img/icons/Ceph.png"
|
||||
tags: "opensource bigdata"
|
||||
score: 3
|
||||
- name: "BlackStratus"
|
||||
sub: "... ou le vieux SIEM NetForensics"
|
||||
details: "Historiquement, c'était le SIEM utilisé par Thales dans sa jeunesse. Bien qu'ultra vieillissant (Java 6...) il tenait bien la rtoute, avait l'avantage d'être multi-tenant avec des règles simples à comprendre. Les années sont passées sur la solution, qui est devenue SiemStorm apr la suite (mais toujouyrs trop en retard par rapport à un QRadar en puissance). Je maitrise l'outil de l'install à l'admin."
|
||||
logo: "assets/img/icons/Blackstratus.jpg"
|
||||
tags: "security vendor"
|
||||
score: 5
|
||||
- name: "QRadar"
|
||||
sub: "Le SIEM au top de IBM"
|
||||
details: "Je n'apprécie pas trop QRadar. J'en ai installé, administré. Le produit est abouti. Je n'aime en revanche pas son adhérence trop forte avec le reste d'IBM (Resilient... c'est normal chez IBM) et le gap avec la promesse du marketing. QRadar est un gros système, bien configurable, mais pas à la portée de tous dans sa compréhension. Je lui préfère Splunk qui a le mérite de distinguer la prod (comment ingérer/traiter les données?) du métier (qu'est-ce qu'une alerte ?) clairement, mais qui garde simplictié et versatilité."
|
||||
logo: "assets/img/icons/Qradar.png"
|
||||
tags: "security vendor"
|
||||
score: 2
|
||||
- name: "Maltego"
|
||||
sub: "Graphe de liens comme dans les films"
|
||||
details: "Les résultats de Maltego sont assez impressionnants. En quelques clics, quelques engines, on se retrouve avec une foultitude d'informations que nous ne savoins pas sur un sujet, une menance... Je l'ai principalement utilisé en Renseignement Source Ouverte (ROSO, OSINT), mais juste la version CE, et juste pour tester. Sur la CTI, il s'est fait doubler par des outils plus spécialisés comme Digital Shadows (ou ThreatQuotient pour les menaces)."
|
||||
logo: "assets/img/icons/Maltego.png"
|
||||
tags: "security"
|
||||
score:
|
||||
score: 2
|
||||
- name: "Qualys"
|
||||
sub: "Pionnier du scan d'intrusion"
|
||||
details: "Et qui vieillit. D'autre consurrents, comme Rapid7, se sont bien démarqués. D'autres comme Ambionics, l'ont largement doublé sur la capacité à traiter ses vulnérabilités. Comment enfin, ne pas parler des EDR comme CrowdStrike avec SpotLight, qui intègrent reconnaissance et remédiation directement sur l'asset, proprement ? Qualys a bien pavé le chemin, a bien fait son business, mais le core model est trop compliqué, et dépassé. Je l'ai administré."
|
||||
logo: "assets/img/icons/Qualys.png"
|
||||
tags: "security vendor"
|
||||
score: 2
|
||||
score: 3
|
||||
- name: "Checkmarx"
|
||||
sub: "Outil de gestion de code : SAST"
|
||||
details: "Je connais CheckMarx, ai vu ses interfaces, ses résultats. C'est tout. C'est aussi suffisant, avec les retours d'experts plus chevronnés, pour savoir que les résultats ne sont pas traitables en tant que tels, qu'il faut refaire une passe dessus. Bref, pas mal de temps à passer pour en faire un vrai bon outil. Je lui préfère AppSpider."
|
||||
logo: "assets/img/icons/Checkmarx.png"
|
||||
tags: "security vendor"
|
||||
score: 2
|
||||
score: 1
|
||||
- name: "TheHive"
|
||||
sub: "Le premier SIRP"
|
||||
details: "Il a pavé la voie à Demisto/PaloAlto xSOAR, et pourtant, s'est un peu fait rouler dessus. TheHive est open source, l'install est pas trop difficile. Coupler avec Cortex est un jeu d'enfant. Coder un nouveau trigger est assez simple. Mais en définitive : pourquoi tout recoder de quasi-zéro quand d'autres SOAR sont complètement fonctionnels? Pas assez de budget à dépenser in fine ? Oui, pour une solution long-terme, en ayuant un OPEX limité, c'est un vrai choix."
|
||||
logo: "assets/img/icons/TheHive.png"
|
||||
tags: "security"
|
||||
score: 2
|
||||
score: 3
|
||||
- name: "Wireguard"
|
||||
sub: "Le VPN brut, le VPN parfait."
|
||||
details: "C'est l'histoire d'un français qui ne comprenait pas pourquoi les VPN étaient des usines à features et de backward-compatibility. Il a pensé à un VPN tout simple, PSK + clef asymétrique, Noise. Une configuration brute en 5 lignes dans un fichier .conf ; une interface tun qui aspire les connexions à router. Fin. Le code est tellement pur et simple que le créateur en a codé la majorité en une après-midi, qu'il a suscité les bravos de toute la communauté open source, et intégré dans le noyau Linux et BSD. Installation en 10 minutes, connexion immédiate et sans latence. Il manquera des surcharges IHM pour les néophytes, mais... bravo."
|
||||
logo: "assets/img/icons/Wireguard.png"
|
||||
tags: "infrastructure network opensource"
|
||||
score: 4
|
||||
- name: "Yunohost"
|
||||
sub: "Faites votre serveur perso quand vous n'y connaissez rien."
|
||||
details: "Vous savez monter une machine Debian, apt-get install yunohost... fini. Vous avez tout d'un pro : pare-feu/VPN, sauvegarde, serveur mandataire, vos applis libres préférées, DNS, LDAP/gestion des utilisateurs, certificats... en clic-bouton, plus simple que sur votre Téléphone. Sérieusement, je n'ai pas de mots pour louer le projet libre Yunohost pour s'auto-héberger (soi et ses copains). JServ tourne sur Yunohost. Je contribue sur Yunohost, je consomme Yunohost et suis émerveillé par l'aboutissement d'un projet tout-en-un."
|
||||
logo: "assets/img/icons/Yunohost.png"
|
||||
tags: "infrastructure opensource"
|
||||
score: 5
|
||||
- name: "NetData"
|
||||
sub: "Supervision de systèmes"
|
||||
details: "Pas grand-chose à dire pour le moment : j'ai PoC-é Netdata, l'interface à la Grafana est super, ça semble être le remplaçant du XXIe siècle à Nagios et Zabbix. Je ne suis pas encore allé au bout de ses fonctionnalités."
|
||||
logo: "assets/img/icons/NetData.png"
|
||||
tags: "infrastructure opensource"
|
||||
score: 2
|
||||
- name: "KVM"
|
||||
- name: "QEMU/KVM"
|
||||
sub: "Hyperviseur linux !"
|
||||
details: "Oui, on couple toujours QEMU/KVM avec la libvirt, avec OpenStack, avec ProxMox. En l'essence, je maitrise KVM et les environnemnts précédents. KVM c'est mon premier amour de l'infrastructure; d'ailleurs tout le SOC de Thales est basé dessus (orchestré par Ansible). C'est un super outil, il faut bien savoir ce que l'on veut, pour faire le choix entre une paravirtualisation à la Docker ou passer par KVM. Mais au final, ça marche."
|
||||
logo: "assets/img/icons/KVM.png"
|
||||
tags: "infrastructure opensource"
|
||||
score: 5
|
||||
- name: "Docker"
|
||||
sub: "L'imprésentable gestionnaire de conteneur"
|
||||
details: "Je me suis alncé dans LXC en 2013, son prédécesseur, puis dans Docker en 2016. meh. en 2021, je le reteste, pour me rendre compte à quel point je m'étais fourvoyé sur son compte. Docker révolutionne en fait par son concept (et couplé avec Kubernetes et les IaaS, soyons fous) l'infrastructure. Jetez à la poubelle vous vieux on prem et vos machines avec des noms rigolos comme en 2008 ('darkvador', 'mario'...). Toute la conf est spécifiée en amont. On fait des micro-services configurés par le DockerFile pour avoir plein de petits blocs banalisés. On prend des conteneurs les plus standard possibles : ils sont durcis, épurés, parfaitement configurés pour porter l'appli de manière optimale, Docker se charge des éventuels défauts de plateforme (voire d'architecture x86/64, arm...). On déploie tout, on peuit tout crasher, tant que la donnée est dans un magasin de données bien géré ; détruisez votre appli MySQL, votre appli... remontez tout : c'est parfait."
|
||||
logo: "assets/img/icons/Docker.png"
|
||||
tags: "infrastructure opensource"
|
||||
score: 3
|
||||
- name: "Openstack"
|
||||
sub: "Quintessence d'orchesteration de Cloud privé."
|
||||
details: "Juste installé et vu, le produit fait le travail. Mais bon, en 2015, la solutions Cloud devient de plus en plus prégnante."
|
||||
logo: "assets/img/icons/Openstack.png"
|
||||
tags: "infrastructure opensource"
|
||||
score: 3
|
||||
- name: "Ansible"
|
||||
sub: "Managez des infras en un seul point."
|
||||
details: "J'ai créé le projet 'GMInfra', un tout-en-un Ansible pour gérer des infrastructures, pop-per des VM. Avec un parc d'hyperviseurs vides, monte tout le socle. Ansible est terriblement bien, pas très performant (de sont des actions de mise en conformité en série)."
|
||||
logo: "assets/img/icons/Ansible.png"
|
||||
tags: "infrastructure opensource"
|
||||
score: 5
|
||||
|
||||
@ -10,7 +10,8 @@
|
||||
<!-- Bootstrap CSS -->
|
||||
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css" >
|
||||
<!-- Fonts -->
|
||||
<link rel="stylesheet" type="text/css" href="assets/fonts/font-awesome.min.css">
|
||||
<!--<link rel="stylesheet" type="text/css" href="assets/fonts/font-awesome.min.css">-->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
|
||||
<!-- Icon -->
|
||||
<link rel="stylesheet" type="text/css" href="assets/fonts/simple-line-icons.css">
|
||||
<!-- Slicknav -->
|
||||
@ -26,6 +27,8 @@
|
||||
<!-- Responsive Style -->
|
||||
<link rel="stylesheet" type="text/css" href="assets/css/responsive.css">
|
||||
|
||||
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/ui-lightness/jquery-ui.css"/>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@ -279,6 +282,14 @@
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<!-- Search Bar -->
|
||||
<div class="d-flex justify-content-center">
|
||||
<div class="searchbar">
|
||||
<input class="search_input" type="text" name="" placeholder="Search...">
|
||||
<a href="#" class="search_icon"><i class="fas fa-search"></i></a>
|
||||
</div>
|
||||
<!-- End of Search Bar -->
|
||||
</div>
|
||||
<!-- Portfolio Controller/Buttons Ends-->
|
||||
</div>
|
||||
|
||||
@ -311,7 +322,7 @@
|
||||
<img src="{{ skill.logo }}" alt="{{ skill.name }}" />
|
||||
<div class="overlay">
|
||||
<div class="icons">
|
||||
<i class="icon-eye" data-sub="{{ skill.sub }}" data-name="{{ skill.name }}" data-icon="{{ skill.logo }}" data-details="{{ skill.details }}"></i>
|
||||
<i class="icon-eye" id="eye-{{skill.name | lower}}" 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>
|
||||
@ -446,8 +457,17 @@
|
||||
<i class="icon-arrow-up"></i>
|
||||
</a>
|
||||
|
||||
<!-- Autocompletion stubs -->
|
||||
<script>
|
||||
var technos = [
|
||||
{%- for skill in skills|sort(true, false, 'score') %}
|
||||
"{{ skill.name | lower }}"{% if not loop.last %},{% endif %}
|
||||
{%- endfor %}
|
||||
];
|
||||
</script>
|
||||
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
|
||||
<script src="assets/js/jquery-min.js"></script>
|
||||
<script src="assets/js/jquery-ui.js"></script>
|
||||
<script src="assets/js/popper.min.js"></script>
|
||||
<script src="assets/js/bootstrap.min.js"></script>
|
||||
<script src="assets/js/jquery.mixitup.js"></script>
|
||||
@ -458,7 +478,7 @@
|
||||
<script src="assets/js/jquery.easing.min.js"></script>
|
||||
<script src="assets/js/nivo-lightbox.js"></script>
|
||||
<script src="assets/js/jquery.slicknav.js"></script>
|
||||
<script src="assets/js/autocomplete.js"></script>
|
||||
<script src="assets/js/main.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user