399 lines
16 KiB
HTML
399 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<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 - Freelance - Expert Cybersécurité - DevOps - DB Admin</title>
|
|
|
|
<!-- 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" />
|
|
<script src="/assets/fontawesome-6.1.1/all.min.js" type="text/javascript"></script>
|
|
|
|
<!-- 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 align-items-center flex-column">
|
|
<!-- Masthead Avatar Image-->
|
|
<img class="masthead-avatar" src="/assets/img/profil.png" alt="..." />
|
|
<!-- Masthead Heading-->
|
|
<h1 class="masthead-heading">
|
|
<img src="/assets/img/netoik-title.svg" alt="Netoïk">
|
|
</h1>
|
|
<div class="masthead-subheading font-weight-light mb-0">
|
|
<!-- Icon Divider-->
|
|
<div class="divider-custom">
|
|
<div class="divider-custom-line bg-primary border-primary"></div>
|
|
<div class="divider-custom-icon text-primary"><i class="fas fa-star"></i></div>
|
|
<div class="divider-custom-line bg-primary border-primary"></div>
|
|
</div>
|
|
<!-- Masthead Subheading-->
|
|
<h2 class="mb-4">Samuel Campos</h2>
|
|
<div class="mx-2">cybersecurity expert · devOps freelance</div>
|
|
</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>
|
|
<div class="divider-custom-icon text-primary"><i class="fas fa-star"></i></div>
|
|
<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">
|
|
<div class="col-md-6 text-center d-flex align-self-center py-3">
|
|
<img class="img-fluid my-auto" src="/assets/img/services/cybersecurity.svg" alt="cybersecurity">
|
|
</div>
|
|
<div class="col-md-6 text-primary d-flex align-self-center py-3">
|
|
<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>:
|
|
<ul>
|
|
<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>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Service Programming-->
|
|
<div class="row py-5 mx-auto">
|
|
<div class="col-md-6 order-md-last d-flex align-self-center py-3">
|
|
<img class="img-fluid" src="/assets/img/services/programming.svg" alt="programming">
|
|
</div>
|
|
<div class="col-md-6 d-flex align-self-center text-primary py-3">
|
|
<span>
|
|
Selon les contraintes du projet, différents outils et langages de
|
|
<strong>programmation</strong> peuvent être utilisés:
|
|
<ul>
|
|
<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>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Service Database-->
|
|
<div class="row py-5 mx-auto">
|
|
<div class="col-md-6 d-flex align-self-center py-3">
|
|
<img class="img-fluid" src="/assets/img/services/database.svg" alt="database">
|
|
</div>
|
|
<div class="col-md-6 d-flex align-self-center text-primary py-3">
|
|
<span>
|
|
Chaque <strong>système de gestion de bases de données</strong> (SGBD)
|
|
possède ses avantages et ses inconvénients:
|
|
<ul>
|
|
<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>
|
|
</span>
|
|
</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>
|
|
<div class="divider-custom-icon"><i class="fas fa-star"></i></div>
|
|
<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
|
|
meilleur moyen de minimiser ce risque est de concevoir les projets en respectant les principes
|
|
de l'approche <strong>secure-by-design</strong>.
|
|
</p>
|
|
<p>
|
|
Ma volonté est donc de réaliser des projets <strong>bien documentés</strong>,
|
|
<strong>fiables</strong>, <strong>pérennes</strong> et respectant les principes précités.
|
|
</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>
|
|
<div class="divider-custom-icon text-primary"><i class="fas fa-star"></i></div>
|
|
<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">
|
|
<textarea class="form-control" id="message" type="text" style="height: 10rem" required></textarea>
|
|
<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="" alt="captcha error" id="captchaImage">
|
|
</span>
|
|
<span id="captchaReload" role="button">
|
|
<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 © 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>
|