netoik-home/front/index.html

393 lines
15 KiB
HTML
Raw Normal View History

2022-06-03 17:06:56 +00:00
<!DOCTYPE html>
2022-06-06 15:22:51 +00:00
<html lang="fr">
2022-06-03 17:06:56 +00:00
<head>
2022-06-08 12:42:34 +00:00
<!-- General meta tags-->
2022-06-03 17:06:56 +00:00
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Netoïk - Cybersecurity expert - DevSecOps freelance</title>
2022-06-03 17:06:56 +00:00
<!-- Favicon-->
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<!-- Font Awesome icons (free version)-->
<link href="/assets/fontawesome-6.1.1/all.min.css" rel="stylesheet" type="text/css" />
2022-06-06 15:25:13 +00:00
<script src="/assets/fontawesome-6.1.1/all.min.js"></script>
2022-06-03 17:06:56 +00:00
<!-- Google fonts-->
<link href="/assets/googleapis/roboto" rel="stylesheet" type="text/css" />
<!-- Core theme CSS (includes Bootstrap)-->
<link href="/assets/css/vars.css" rel="stylesheet" />
<link href="/assets/css/styles.css" rel="stylesheet" />
<!-- JQuery library -->
<script src="/assets/jquery-3.6.0/jquery-3.6.0.min.js"></script>
</head>
<body id="page-top">
<!-- ============================== -->
<!-- Navigation -->
<!-- ============================== -->
<header class="fixed-top text-center" id="mainHeader">
<div class="triangle triangle-left"></div>
<div class="triangle triangle-right"></div>
<nav class="navbar navbar-expand-lg" id="mainNav">
<div class="container">
<a class="navbar-brand" href="#page-top">
<img src="/assets/img/netoik-favicon-white.svg" alt="N">
</a>
<button class="navbar-toggler text-uppercase font-weight-bold border-white text-white rounded" type="button"
data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive"
aria-expanded="false" aria-label="Toggle navigation">
<span class="d-none d-sm-inline">Menu</span>
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse text-uppercase" id="navbarResponsive">
<ul class="navbar-nav ms-auto">
<li class="nav-item mx-0 mx-lg-1">
<a class="nav-link nav-link-services py-3 px-0 px-lg-3 rounded" href="#services">Prestations</a>
</li>
<li class="nav-item mx-0 mx-lg-1">
<a class="nav-link nav-link-about py-3 px-0 px-lg-3 rounded" href="#about">A propos</a>
</li>
<li class="nav-item mx-0 mx-lg-1">
<a class="nav-link nav-link-contact py-3 px-0 px-lg-3 rounded" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<!-- ============================== -->
<!-- Masthead -->
<!-- ============================== -->
<header class="masthead text-primary text-center">
<div class="container d-flex flex-column justify-content-center">
2022-06-03 17:06:56 +00:00
<!-- Masthead Heading-->
<h1 class="masthead-heading my-4 w-100">
2022-06-03 17:06:56 +00:00
<img src="/assets/img/netoik-title.svg" alt="Netoïk">
</h1>
<div class="masthead-subheading font-weight-light mb-4 w-100">
2022-06-03 17:06:56 +00:00
<!-- Masthead Subheading-->
2022-06-06 16:56:42 +00:00
<h2 class="my-2">Samuel Campos</h2>
<div class="my-2">cybersecurity expert &middot; devSecOps freelance</div>
2022-06-03 17:06:56 +00:00
</div>
</div>
</header>
<!-- ============================== -->
<!-- Services -->
<!-- ============================== -->
<section class="page-section" id="services">
<div class="container">
<!-- Services Section Heading-->
<h2 class="page-section-heading text-center text-primary text-uppercase mb-0">Prestations</h2>
<!-- Icon Divider-->
<div class="divider-custom">
<div class="divider-custom-line bg-primary border-primary"></div>
2022-06-07 05:14:45 +00:00
<div class="divider-custom-icon text-primary">&bull;</div>
2022-06-03 17:06:56 +00:00
<div class="divider-custom-line bg-primary border-primary"></div>
</div>
<!-- Service items-->
<div class="row">
<div class="col-lg-8 col-xl-7 m-auto">
<!-- Service Cybersecurity-->
<div class="row py-5 mx-auto">
2022-06-07 05:15:09 +00:00
<div class="col-md-6 text-center d-flex flex-column align-self-center align-items-center py-3">
2022-06-03 17:06:56 +00:00
<img class="img-fluid my-auto" src="/assets/img/services/cybersecurity.svg" alt="cybersecurity">
</div>
2022-06-07 05:15:09 +00:00
<div class="col-md-6 text-primary d-flex flex-column align-self-center align-items-center py-3">
2022-06-03 17:06:56 +00:00
<span>
La <strong>cybersécurité</strong> est primordiale dans un projet <strong>devOps</strong>,
elle passe par le respect des principes de développement <strong>secure-by-design</strong>:
</span>
2022-06-06 15:25:13 +00:00
<ul class="mb-0">
<li>
Identifier les menaces
</li>
<li>
Minimiser la surface d'attaque
</li>
<li>
Séparer et restreindre les privilèges
</li>
<li>
Garder les erreurs internes confidentielles
</li>
<li>
Se méfier des services utilisés
</li>
<li>
Eviter la sécurité par l'obscurité
</li>
<li>
Fixer rapidement et correctement les problèmes de sécurité
</li>
</ul>
2022-06-03 17:06:56 +00:00
</div>
</div>
<!-- Service Programming-->
<div class="row py-5 mx-auto">
2022-06-07 05:15:09 +00:00
<div class="col-md-6 order-md-last d-flex flex-column align-self-center align-items-center py-3">
2022-06-03 17:06:56 +00:00
<img class="img-fluid" src="/assets/img/services/programming.svg" alt="programming">
</div>
2022-06-07 05:15:09 +00:00
<div class="col-md-6 d-flex flex-column align-self-center align-items-center text-primary py-3">
2022-06-03 17:06:56 +00:00
<span>
Selon les contraintes du projet, différents outils et langages de
<strong>programmation</strong> peuvent être utilisés:
</span>
2022-06-06 15:25:13 +00:00
<ul class="mb-0">
<li>
Un <strong>langage haut-niveau</strong> POO (Python, PHP) pour un développement rapide
</li>
<li>
Un <strong>langage bas-niveau</strong> (Go, C) pour de meilleures performance
</li>
<li>
Des langages et <strong>frameworks</strong> web (HTML, JS, JQuery, VueJS, CSS, Bootstrap)
</li>
<li>
Des <strong>serveurs</strong> ou <strong>proxys</strong> (Apache, Nginx, HAProxy)
</li>
</ul>
2022-06-03 17:06:56 +00:00
</div>
</div>
<!-- Service Database-->
<div class="row py-5 mx-auto">
2022-06-07 05:15:09 +00:00
<div class="col-md-6 d-flex flex-column align-self-center align-items-center py-3">
2022-06-03 17:06:56 +00:00
<img class="img-fluid" src="/assets/img/services/database.svg" alt="database">
</div>
2022-06-07 05:15:09 +00:00
<div class="col-md-6 d-flex flex-column align-self-center align-items-center text-primary py-3">
2022-06-03 17:06:56 +00:00
<span>
Chaque <strong>système de gestion de bases de données</strong> (SGBD)
possède ses avantages et ses inconvénients:
</span>
2022-06-06 15:25:13 +00:00
<ul class="mb-0">
<li>
Les <strong>BDD relationnelles</strong> (PostgreSQL, MariaDB/MySQL, SQLite)
sont souvent suffisantes pour couvrir la plupart des besoins.
</li>
<li>
Les <strong>BDD non relationnelles</strong> (Redis, MongoDB, Cassandra/Scylla)
sont parfois nécessaires pour des besoins spécifiques.
</li>
</ul>
2022-06-03 17:06:56 +00:00
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ============================== -->
<!-- About -->
<!-- ============================== -->
<section class="page-section bg-primary text-white mb-0" id="about">
<div class="container">
<!-- About Section Heading-->
<h2 class="page-section-heading text-center text-uppercase text-white">A propos</h2>
<!-- Icon Divider-->
<div class="divider-custom divider-light">
<div class="divider-custom-line"></div>
2022-06-07 05:14:45 +00:00
<div class="divider-custom-icon fw-bolder">&bull;</div>
2022-06-03 17:06:56 +00:00
<div class="divider-custom-line"></div>
</div>
<!-- About Section Content-->
<div class="row">
<div class="col-lg-8 col-xl-7 m-auto py-5">
<p>
Après avoir obtenu un master de <strong>cryptologie</strong> au sein du plus ancien
master spécialisé de France:
<a class="text-secondary fw-bold text-decoration-none" href="https://www.cryptis.fr" target="_blank">Cryptis</a>,
j'ai décidé de me tourner vers la cybersécurité pour ma vie professionnelle.
</p>
<p>
Mon objectif principal a toujours été d'aider les entreprises à protéger leurs
<strong>données</strong> et surtout celles de leurs clients.
</p>
<p>
Pendant 5 années chez le leader européen de la <strong>cybersécurité offensive</strong>
<a class="text-secondary fw-bold text-decoration-none" target="_blank" href="https://www.ziwit.com">Ziwit</a>,
j'ai participé au développement d'un produit permettant de tester et détecter
tout type de faille de sécurité sur un site web, ainsi que toute une gamme d'outils
pour aider les entreprises à surveiller leur <strong>SI</strong>.
</p>
<p>
Puis une année passée au sein de la société Ozon, spécialiste de la cybersécurité pour les PME,
m'a permis de développer mes compétences sur plus de technologies de développement, déploiement,
surveillance et réseaux.
</p>
<p>
Ces expériences m'ont permis de réaliser qu'en cybersécurité, le risque zéro n'existe pas... Le
2022-06-06 15:35:48 +00:00
meilleur moyen de minimiser ce risque est de réflechir à la sécurité dès la conception d'un projet.
2022-06-03 17:06:56 +00:00
</p>
<p>
2022-06-06 15:35:48 +00:00
J'ai donc décidé de mettre dès aujourd'hui mes compétences directement au service des
entreprises, ma volonté est de réaliser des projets <strong>documentés</strong>,
<strong>fiables</strong>, <strong>pérennes</strong> et respectant les principes de
l'approche <strong>secure-by-design</strong>.
2022-06-03 17:06:56 +00:00
</p>
</div>
</div>
<div class="text-center mt-4">
<!-- CV-->
<a class="btn btn-xl btn-outline-light m-3" href="/assets/docs/cv-2022.pdf" target="_blank">
<i class="fas fa-download me-2"></i>
Consulter mon CV
</a>
<!-- Master-->
<a class="btn btn-xl btn-outline-light m-3" href="/assets/docs/master-cryptis.pdf" target="_blank">
<i class="fas fa-download me-2"></i>
Voir mon diplôme
</a>
</div>
</div>
</section>
<!-- ============================== -->
<!-- Contact -->
<!-- ============================== -->
<section class="page-section" id="contact">
<div class="container">
<!-- Contact Section Heading-->
<h2 class="page-section-heading text-center text-uppercase text-primary mb-0">Contact</h2>
<!-- Icon Divider-->
<div class="divider-custom">
<div class="divider-custom-line bg-primary border-primary"></div>
2022-06-07 05:14:45 +00:00
<div class="divider-custom-icon text-primary">&bull;</div>
2022-06-03 17:06:56 +00:00
<div class="divider-custom-line bg-primary border-primary"></div>
</div>
<!-- Contact Section Form-->
<div class="row justify-content-center">
<div class="col-lg-8 col-xl-7 py-5">
<form id="contactForm" class="needs-validation" novalidate>
<!-- Name input-->
<div class="form-floating mb-3">
<input class="form-control" id="name" type="text" required/>
<label for="name">Nom complet *</label>
<div class="invalid-feedback">Merci de saisir un nom.</div>
</div>
<!-- Email address input-->
<div class="form-floating mb-3">
<input class="form-control" id="email" type="email" required/>
<label for="email">Adresse email *</label>
<div class="invalid-feedback">Merci de saisir une adresse email valide.</div>
</div>
<!-- Phone number input-->
<div class="form-floating mb-3">
<input class="form-control" id="phone" type="tel"/>
<label for="phone">Téléphone</label>
</div>
<!-- Company input-->
<div class="form-floating mb-3">
<input class="form-control" id="company" type="text"/>
<label for="company">Company</label>
</div>
<!-- Message input-->
<div class="form-floating mb-3">
2022-06-06 15:25:13 +00:00
<textarea class="form-control" id="message" style="height: 10rem" required></textarea>
2022-06-03 17:06:56 +00:00
<label for="message">Message *</label>
<div class="invalid-feedback">Merci de saisir un message.</div>
</div>
<!-- Captcha image-->
<div>
<span class="d-inline-block">
<img src="/assets/img/captcha/loading.png" alt="captcha error" id="captchaImage">
2022-06-03 17:06:56 +00:00
</span>
<span id="captchaReload" role="button" class="text-primary">
2022-06-03 17:06:56 +00:00
<i class="fas fa-rotate-right"></i>
</span>
<input type="hidden" id="captchaId">
</div>
<!-- Captcha input-->
<div class="form-floating mb-3">
<input class="form-control" id="captchaDigits" type="text" required>
<label for="captchaDigits">Captcha *</label>
<div class="invalid-feedback">Merci de saisir les chiffres du captcha.</div>
</div>
<!-- Submit Button-->
<button class="btn btn-primary btn-xl" id="submitButton" type="submit">Envoyer</button>
<div id="submitSuccessMessage" class="d-none text-success fw-bold py-2">
Votre message a bien été envoyé!<br/>
Vous recevrez une réponse dans les plus bref délais.
</div>
<div id="submitErrorMessage" class="d-none text-danger fw-bold py-2">
Une erreur est survenue!<br/>
Si cette erreur persiste, vous pouvez m'envoyer un email à
<a href="mailto:samuel.campos@netoik.io">samuel.campos@netoik.io</a>.
</div>
</form>
</div>
</div>
</div>
</section>
<!-- ============================== -->
<!-- Footer -->
<!-- ============================== -->
<footer class="footer text-center bg-secondary">
<div class="container">
<div class="row">
<!-- Footer Location-->
<div class="col-lg-6 mb-5 mb-lg-0">
<h4 class="text-uppercase mb-4">Adresse</h4>
<p class="lead mb-0">
6 avenue Arletty
<br />
Bois d'Arcy 78390
</p>
</div>
<!-- Footer Social Icons-->
<div class="col-lg-6 mb-5 mb-lg-0">
<h4 class="text-uppercase mb-4">Sur le web</h4>
<a class="btn btn-outline-light btn-social mx-1" target="_blank"
href="https://www.linkedin.com/in/samuel-yann-campos-8b9343b7">
<i class="fab fa-fw fa-linkedin-in"></i>
</a>
<a class="btn btn-outline-light btn-social mx-1" target="_blank" href="https://git.netoik.io">
<i class="fas fa-fw fa-code-compare"></i>
</a>
<a class="btn btn-outline-light btn-social mx-1" target="_blank"
href="https://www.codingame.com/profile/dae0a56ab4422412b9d9fb52fb2580250211771">
<img class="img-light" src="/assets/img/codingame-white.png" alt="codingame">
<img class="img-dark" src="/assets/img/codingame-black.png" alt="codingame">
</a>
</div>
</div>
</div>
</footer>
<!-- ============================== -->
<!-- Copyright -->
<!-- ============================== -->
<div class="copyright py-4 bg-primary text-center text-white">
<div class="container"><small>Copyright &copy; Netoïk <span id="year"></span></small></div>
</div>
<!-- ============================== -->
<!-- Bootstrap core js -->
<!-- ============================== -->
<script src="/assets/bootstrap-5.1.3/bootstrap.bundle.min.js"></script>
<!-- ============================== -->
<!-- Core theme js -->
<!-- ============================== -->
<script src="/assets/js/scripts.js"></script>
</body>
</html>