feldenr
d5df62b345
- Refonte : navbar/footer extraits dans components.js (injection JS) - Contact : email [email protected], suppression du telephone sur les CV - Pied de page : retrait de « Design & code - fait main » - Ajout de style.css (jusqu'ici non versionne) - Mise a jour : cv.html, cv-roman-felden.html, index.html, projets.html
225 lines
12 KiB
HTML
225 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="Site personnel de Roman Felden - Coordinateur Sécurité & Systèmes Informatique à Grenoble">
|
|
<title>Roman Felden — Coordinateur Sécurité & Systèmes</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..700;1,9..144,300..700&family=Inter:[email protected]&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="style.css">
|
|
<script>
|
|
if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
|
document.documentElement.setAttribute('data-theme', 'dark');
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- ============ HERO ============ -->
|
|
<header class="hero">
|
|
<div class="container">
|
|
<div class="hero-grid">
|
|
<div class="hero-meta reveal">
|
|
<span class="rule"></span>
|
|
<span class="mono-label">Portfolio — Grenoble, France</span>
|
|
</div>
|
|
<h1 class="hero-name reveal" style="--reveal-delay:.08s">Roman<br>Felden<em>.</em></h1>
|
|
<p class="hero-role reveal" style="--reveal-delay:.16s">Coordinateur Sécurité & Systèmes Informatique</p>
|
|
<p class="hero-desc reveal" style="--reveal-delay:.24s">
|
|
J'administre des infrastructures, je sécurise des systèmes et je coordonne
|
|
des équipes — avec un faible pour l'auto-hébergement et les réseaux bien propres.
|
|
</p>
|
|
<div class="hero-actions reveal" style="--reveal-delay:.32s">
|
|
<a href="cv.html" class="btn btn-primary">
|
|
Voir mon CV
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
|
|
</svg>
|
|
</a>
|
|
<a href="projets.html" class="btn btn-outline">
|
|
Mes projets
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
<div class="hero-foot reveal" style="--reveal-delay:.4s">
|
|
<span class="mono-label"><span class="status-dot"></span>Disponible pour opportunités</span>
|
|
<span class="mono-label">Master RIE — Grenoble INP</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- ============ 01 — À PROPOS ============ -->
|
|
<section class="section">
|
|
<div class="container">
|
|
<div class="section-head reveal">
|
|
<span class="section-number">01</span>
|
|
<h2 class="section-title">À <em>propos</em></h2>
|
|
<p class="section-sub">Passionné par les systèmes, les réseaux et la sécurité informatique.</p>
|
|
</div>
|
|
<div class="about-grid reveal">
|
|
<div class="about-cell">
|
|
<span class="cell-label">Expérience</span>
|
|
<h3>5+ années</h3>
|
|
<p>Administration système et réseau, avec une spécialisation en sécurité informatique et une coordination d'équipe.</p>
|
|
</div>
|
|
<div class="about-cell">
|
|
<span class="cell-label">Formation</span>
|
|
<h3>Master RIE</h3>
|
|
<p>Réseau Informatique en Entreprise à Grenoble INP — Ensimag, spécialisation systèmes et réseaux.</p>
|
|
</div>
|
|
<div class="about-cell">
|
|
<span class="cell-label">Localisation</span>
|
|
<h3>Grenoble</h3>
|
|
<p>Basé en Isère, disponible pour des opportunités professionnelles dans la région ou en télétravail.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ============ 02 — COMPÉTENCES ============ -->
|
|
<section class="section">
|
|
<div class="container">
|
|
<div class="section-head reveal">
|
|
<span class="section-number">02</span>
|
|
<h2 class="section-title">Compétences <em>clés</em></h2>
|
|
<p class="section-sub">Domaines d'expertise technique, du pare-feu au script.</p>
|
|
</div>
|
|
<div class="skill-rows reveal">
|
|
<div class="skill-row">
|
|
<span class="row-index">a.</span>
|
|
<h3>Systèmes & Réseaux</h3>
|
|
<div class="row-tags">
|
|
<span class="tag">Linux</span>
|
|
<span class="tag">Windows Server</span>
|
|
<span class="tag">Active Directory</span>
|
|
<span class="tag">DNS / TCP/IP</span>
|
|
</div>
|
|
</div>
|
|
<div class="skill-row">
|
|
<span class="row-index">b.</span>
|
|
<h3>Sécurité</h3>
|
|
<div class="row-tags">
|
|
<span class="tag">Supervision</span>
|
|
<span class="tag">Politiques de sécurité</span>
|
|
<span class="tag">Hardening</span>
|
|
<span class="tag">Gestion d'incidents</span>
|
|
</div>
|
|
</div>
|
|
<div class="skill-row">
|
|
<span class="row-index">c.</span>
|
|
<h3>Infrastructure</h3>
|
|
<div class="row-tags">
|
|
<span class="tag">Switch Cisco / Alcatel</span>
|
|
<span class="tag">Routeur Cisco</span>
|
|
<span class="tag">Firewall Stormshield</span>
|
|
</div>
|
|
</div>
|
|
<div class="skill-row">
|
|
<span class="row-index">d.</span>
|
|
<h3>Virtualisation & Dev</h3>
|
|
<div class="row-tags">
|
|
<span class="tag">Proxmox</span>
|
|
<span class="tag">VMware</span>
|
|
<span class="tag">Python</span>
|
|
<span class="tag">Bash</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ============ 03 — PROJETS ============ -->
|
|
<section class="section">
|
|
<div class="container">
|
|
<div class="section-head reveal">
|
|
<span class="section-number">03</span>
|
|
<h2 class="section-title">Projets <em>sélectionnés</em></h2>
|
|
<p class="section-sub">Réalisations personnelles et professionnelles.</p>
|
|
</div>
|
|
<div class="project-list reveal">
|
|
<article class="project-row">
|
|
<span class="p-index">01</span>
|
|
<div class="p-body">
|
|
<h3>Homelab Proxmox</h3>
|
|
<p class="p-desc">Infrastructure de virtualisation complète pour héberger services et expérimentations techniques.</p>
|
|
<div class="p-tags">
|
|
<span class="tag">Proxmox VE</span>
|
|
<span class="tag">Docker</span>
|
|
<span class="tag">ZFS</span>
|
|
<span class="tag">VLAN</span>
|
|
</div>
|
|
</div>
|
|
<span class="p-arrow" aria-hidden="true">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
|
|
</svg>
|
|
</span>
|
|
<a class="p-stretch" href="projets.html#homelab" aria-label="Homelab Proxmox — en savoir plus"></a>
|
|
</article>
|
|
<article class="project-row">
|
|
<span class="p-index">02</span>
|
|
<div class="p-body">
|
|
<h3>Boidelo</h3>
|
|
<p class="p-desc">Application Android de jeu de société multijoueur, 150 questions et interface Material Design 3.</p>
|
|
<div class="p-tags">
|
|
<span class="tag">Android</span>
|
|
<span class="tag">Java 17</span>
|
|
<span class="tag">Material 3</span>
|
|
</div>
|
|
</div>
|
|
<span class="p-arrow" aria-hidden="true">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
|
|
</svg>
|
|
</span>
|
|
<a class="p-stretch" href="projets.html#boidelo" aria-label="Boidelo — en savoir plus"></a>
|
|
</article>
|
|
<article class="project-row">
|
|
<span class="p-index">03</span>
|
|
<div class="p-body">
|
|
<h3>Custom Ore Gen</h3>
|
|
<p class="p-desc">Mod Minecraft 1.20.1 modifiant la distribution des ressources : minerais, outils et armures inédits.</p>
|
|
<div class="p-tags">
|
|
<span class="tag">Minecraft</span>
|
|
<span class="tag">Forge</span>
|
|
<span class="tag">Java 17</span>
|
|
</div>
|
|
</div>
|
|
<span class="p-arrow" aria-hidden="true">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
|
|
</svg>
|
|
</span>
|
|
<a class="p-stretch" href="projets.html#custom-ore-gen" aria-label="Custom Ore Gen — en savoir plus"></a>
|
|
</article>
|
|
<article class="project-row">
|
|
<span class="p-index">04</span>
|
|
<div class="p-body">
|
|
<h3>GeoRealmCraft</h3>
|
|
<p class="p-desc">Serveur Minecraft public : infrastructure scalable, gestion de communauté et modpack technique.</p>
|
|
<div class="p-tags">
|
|
<span class="tag">Administration</span>
|
|
<span class="tag">Communauté</span>
|
|
<span class="tag">Monitoring</span>
|
|
</div>
|
|
</div>
|
|
<span class="p-arrow" aria-hidden="true">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
|
|
</svg>
|
|
</span>
|
|
<a class="p-stretch" href="projets.html#georealmcraft" aria-label="GeoRealmCraft — en savoir plus"></a>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<script src="components.js"></script>
|
|
</body>
|
|
</html>
|