felden.r@grenoble.archi.fr
cf9a01000c
- Fixed HTML structure error (extra closing div in cv.html) - Updated all dates from 2025 to 2026 - Added rel="noopener noreferrer" to external LinkedIn links - Added Open Graph and Twitter Card meta tags for all pages - Added Schema.org structured data (Person) for SEO - Removed emoji badges for better accessibility - Optimized Google Fonts loading - Added mobile hamburger menu with ARIA labels - Improved touch targets (44px minimum) - Added prefers-reduced-motion support - Enhanced keyboard navigation and focus states 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
893 lines
33 KiB
HTML
893 lines
33 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">
|
|
<meta name="theme-color" content="#4f46e5">
|
|
|
|
<!-- Open Graph / Facebook -->
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:url" content="https://lanro.eu/">
|
|
<meta property="og:title" content="Roman Felden - Portfolio">
|
|
<meta property="og:description" content="Coordinateur Sécurité & Systèmes Informatique à Grenoble. Expert en administration système, réseaux et sécurité informatique.">
|
|
<meta property="og:image" content="https://lanro.eu/og-image.jpg">
|
|
|
|
<!-- Twitter -->
|
|
<meta property="twitter:card" content="summary_large_image">
|
|
<meta property="twitter:url" content="https://lanro.eu/">
|
|
<meta property="twitter:title" content="Roman Felden - Portfolio">
|
|
<meta property="twitter:description" content="Coordinateur Sécurité & Systèmes Informatique à Grenoble. Expert en administration système, réseaux et sécurité informatique.">
|
|
<meta property="twitter:image" content="https://lanro.eu/og-image.jpg">
|
|
|
|
<!-- Schema.org structured data -->
|
|
<script type="application/ld+json">
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@type": "Person",
|
|
"name": "Roman Felden",
|
|
"jobTitle": "Coordinateur Sécurité & Systèmes Informatique",
|
|
"address": {
|
|
"@type": "PostalAddress",
|
|
"addressLocality": "Grenoble",
|
|
"addressRegion": "Auvergne-Rhône-Alpes",
|
|
"addressCountry": "FR"
|
|
},
|
|
"url": "https://lanro.eu",
|
|
"sameAs": [
|
|
"https://www.linkedin.com/in/roman-felden"
|
|
],
|
|
"knowsAbout": ["Linux", "Windows Server", "Active Directory", "Sécurité informatique", "Virtualisation", "Réseaux"]
|
|
}
|
|
</script>
|
|
|
|
<title>Roman Felden - Portfolio</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=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap" rel="stylesheet">
|
|
<style>
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
:root {
|
|
--color-primary: #4f46e5;
|
|
--color-primary-light: #818cf8;
|
|
--color-primary-dark: #3730a3;
|
|
--color-secondary: #0ea5e9;
|
|
--color-accent: #f59e0b;
|
|
--color-text: #0f172a;
|
|
--color-text-muted: #64748b;
|
|
--color-text-light: #94a3b8;
|
|
--color-bg: #ffffff;
|
|
--color-bg-alt: #f8fafc;
|
|
--color-bg-card: #ffffff;
|
|
--color-border: #e2e8f0;
|
|
--color-border-light: #f1f5f9;
|
|
--shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1);
|
|
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
|
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
|
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
|
|
--radius-sm: 6px;
|
|
--radius-md: 12px;
|
|
--radius-lg: 20px;
|
|
--radius-xl: 28px;
|
|
}
|
|
|
|
html {
|
|
font-size: 16px;
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
line-height: 1.7;
|
|
color: var(--color-text);
|
|
background: var(--color-bg-alt);
|
|
min-height: 100vh;
|
|
}
|
|
|
|
/* Navigation */
|
|
.navbar {
|
|
background: var(--color-bg);
|
|
box-shadow: var(--shadow-md);
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 1000;
|
|
padding: 1rem 2rem;
|
|
}
|
|
|
|
.navbar-container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
position: relative;
|
|
}
|
|
|
|
.navbar-brand {
|
|
font-size: 1.5rem;
|
|
font-weight: 800;
|
|
color: var(--color-primary);
|
|
text-decoration: none;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
z-index: 1002;
|
|
}
|
|
|
|
.navbar-brand span {
|
|
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
.navbar-brand:focus-visible,
|
|
.navbar-menu a:focus-visible {
|
|
outline: 3px solid var(--color-primary);
|
|
outline-offset: 2px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* Hamburger Menu Button */
|
|
.navbar-toggle {
|
|
display: none;
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
padding: 0.75rem;
|
|
margin: -0.75rem;
|
|
z-index: 1002;
|
|
border-radius: var(--radius-sm);
|
|
transition: background 0.3s ease;
|
|
}
|
|
|
|
.navbar-toggle:hover {
|
|
background: var(--color-bg-alt);
|
|
}
|
|
|
|
.navbar-toggle:focus-visible {
|
|
outline: 3px solid var(--color-primary);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.hamburger {
|
|
display: block;
|
|
width: 24px;
|
|
height: 2px;
|
|
background: var(--color-text);
|
|
position: relative;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.hamburger::before,
|
|
.hamburger::after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 24px;
|
|
height: 2px;
|
|
background: var(--color-text);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.hamburger::before {
|
|
top: -8px;
|
|
}
|
|
|
|
.hamburger::after {
|
|
bottom: -8px;
|
|
}
|
|
|
|
.navbar-toggle.active .hamburger {
|
|
background: transparent;
|
|
}
|
|
|
|
.navbar-toggle.active .hamburger::before {
|
|
top: 0;
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
.navbar-toggle.active .hamburger::after {
|
|
bottom: 0;
|
|
transform: rotate(-45deg);
|
|
}
|
|
|
|
.navbar-menu {
|
|
display: flex;
|
|
gap: 2rem;
|
|
list-style: none;
|
|
}
|
|
|
|
.navbar-menu a {
|
|
color: var(--color-text);
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
padding: 0.75rem 1.25rem;
|
|
border-radius: var(--radius-sm);
|
|
transition: all 0.3s ease;
|
|
min-height: 44px;
|
|
min-width: 44px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.navbar-menu a:hover,
|
|
.navbar-menu a.active {
|
|
color: var(--color-primary);
|
|
background: var(--color-bg-alt);
|
|
}
|
|
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 0 2rem;
|
|
}
|
|
|
|
/* Hero Section */
|
|
.hero {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
padding: 8rem 2rem 6rem;
|
|
text-align: center;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hero::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -50%;
|
|
right: -10%;
|
|
width: 500px;
|
|
height: 500px;
|
|
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.hero::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -30%;
|
|
left: -5%;
|
|
width: 400px;
|
|
height: 400px;
|
|
background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.hero-content {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.hero-avatar {
|
|
width: 150px;
|
|
height: 150px;
|
|
border-radius: 50%;
|
|
background: linear-gradient(135deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.1) 100%);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 4rem;
|
|
font-weight: 800;
|
|
border: 5px solid rgba(255, 255, 255, 0.3);
|
|
backdrop-filter: blur(10px);
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
|
|
margin: 0 auto 2rem;
|
|
}
|
|
|
|
.hero h1 {
|
|
font-size: 3.5rem;
|
|
font-weight: 800;
|
|
margin-bottom: 1rem;
|
|
letter-spacing: -0.03em;
|
|
}
|
|
|
|
.hero p {
|
|
font-size: 1.5rem;
|
|
opacity: 0.95;
|
|
margin-bottom: 2rem;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.hero-buttons {
|
|
display: flex;
|
|
gap: 1rem;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 1rem 2rem;
|
|
border-radius: 50px;
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: white;
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.btn-outline {
|
|
background: transparent;
|
|
color: white;
|
|
border: 2px solid white;
|
|
}
|
|
|
|
.btn-outline:hover {
|
|
background: white;
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
/* Section */
|
|
.section {
|
|
padding: 6rem 0;
|
|
}
|
|
|
|
.section-header {
|
|
text-align: center;
|
|
margin-bottom: 4rem;
|
|
}
|
|
|
|
.section-header h2 {
|
|
font-size: 2.5rem;
|
|
font-weight: 800;
|
|
color: var(--color-text);
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.section-header p {
|
|
font-size: 1.1rem;
|
|
color: var(--color-text-muted);
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* Cards Grid */
|
|
.cards-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
|
gap: 2rem;
|
|
}
|
|
|
|
.card {
|
|
background: var(--color-bg-card);
|
|
border-radius: var(--radius-lg);
|
|
padding: 2rem;
|
|
box-shadow: var(--shadow-sm);
|
|
border: 1px solid var(--color-border-light);
|
|
transition: all 0.3s ease;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
|
|
.card-icon {
|
|
width: 60px;
|
|
height: 60px;
|
|
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
|
|
border-radius: var(--radius-md);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.5rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.card h3 {
|
|
font-size: 1.25rem;
|
|
font-weight: 700;
|
|
margin-bottom: 0.75rem;
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.card p {
|
|
color: var(--color-text-muted);
|
|
line-height: 1.6;
|
|
flex: 1;
|
|
}
|
|
|
|
.card-link {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
color: var(--color-primary);
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
margin-top: 1rem;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.card-link:hover {
|
|
color: var(--color-primary-dark);
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
/* Footer */
|
|
.footer {
|
|
background: var(--color-text);
|
|
color: white;
|
|
padding: 3rem 2rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.footer p {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.footer-heart {
|
|
color: #ef4444;
|
|
animation: heartbeat 1.5s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes heartbeat {
|
|
0%, 100% { transform: scale(1); }
|
|
50% { transform: scale(1.1); }
|
|
}
|
|
|
|
/* Responsive */
|
|
@media (max-width: 768px) {
|
|
.navbar {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.navbar-toggle {
|
|
display: block;
|
|
}
|
|
|
|
.navbar-menu {
|
|
position: fixed;
|
|
top: 0;
|
|
right: -100%;
|
|
width: 80%;
|
|
max-width: 300px;
|
|
height: 100vh;
|
|
background: var(--color-bg);
|
|
flex-direction: column;
|
|
gap: 0;
|
|
padding: 6rem 2rem 2rem;
|
|
box-shadow: -5px 0 20px rgba(0, 0, 0, 0.1);
|
|
transition: right 0.3s ease;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.navbar-menu.active {
|
|
right: 0;
|
|
}
|
|
|
|
.navbar-menu li {
|
|
width: 100%;
|
|
}
|
|
|
|
.navbar-menu a {
|
|
width: 100%;
|
|
padding: 1rem;
|
|
border-radius: var(--radius-md);
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
/* Overlay when menu is open */
|
|
.navbar-overlay {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
z-index: 1001;
|
|
}
|
|
|
|
.navbar-overlay.active {
|
|
display: block;
|
|
}
|
|
|
|
/* Prevent body scroll when menu is open */
|
|
body.menu-open {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hero h1 {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.hero p {
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.hero {
|
|
padding: 6rem 1.5rem 4rem;
|
|
}
|
|
|
|
.hero-avatar {
|
|
width: 120px;
|
|
height: 120px;
|
|
font-size: 3rem;
|
|
}
|
|
|
|
.hero-buttons {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.btn {
|
|
justify-content: center;
|
|
padding: 1rem 1.5rem;
|
|
}
|
|
|
|
.section {
|
|
padding: 4rem 0;
|
|
}
|
|
|
|
.section-header h2 {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.section-header p {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.container {
|
|
padding: 0 1.5rem;
|
|
}
|
|
|
|
.cards-grid {
|
|
grid-template-columns: 1fr;
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
.card {
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
.card-icon {
|
|
width: 50px;
|
|
height: 50px;
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.card h3 {
|
|
font-size: 1.1rem;
|
|
}
|
|
}
|
|
|
|
/* Respect prefers-reduced-motion */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: auto;
|
|
}
|
|
}
|
|
|
|
/* Small screens (very small phones) */
|
|
@media (max-width: 380px) {
|
|
.hero h1 {
|
|
font-size: 1.75rem;
|
|
}
|
|
|
|
.hero p {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.navbar-menu {
|
|
width: 100%;
|
|
max-width: none;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Navigation -->
|
|
<nav class="navbar" role="navigation" aria-label="Navigation principale">
|
|
<div class="navbar-container">
|
|
<a href="index.html" class="navbar-brand" aria-label="Retour à l'accueil - Roman Felden">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
|
|
</svg>
|
|
<span>RF</span>
|
|
</a>
|
|
<button class="navbar-toggle" aria-label="Ouvrir le menu de navigation" aria-expanded="false" aria-controls="primary-menu">
|
|
<span class="hamburger"></span>
|
|
</button>
|
|
<ul class="navbar-menu" id="primary-menu" role="menubar">
|
|
<li role="none"><a href="index.html" role="menuitem" class="active" aria-current="page">Accueil</a></li>
|
|
<li role="none"><a href="cv.html" role="menuitem">CV</a></li>
|
|
<li role="none"><a href="projets.html" role="menuitem">Projets</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="navbar-overlay" aria-hidden="true"></div>
|
|
</nav>
|
|
|
|
<!-- Hero Section -->
|
|
<section class="hero">
|
|
<div class="hero-content">
|
|
<div class="hero-avatar">RF</div>
|
|
<h1>Roman Felden</h1>
|
|
<p>Coordinateur Sécurité & Systèmes Informatique</p>
|
|
<div class="hero-buttons">
|
|
<a href="cv.html" class="btn btn-primary">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
|
|
</svg>
|
|
Voir mon CV
|
|
</a>
|
|
<a href="projets.html" class="btn btn-outline">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"/>
|
|
</svg>
|
|
Mes Projets
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- A Propos -->
|
|
<section class="section">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<h2>À Propos</h2>
|
|
<p>Passionné par les systèmes, réseaux et sécurité informatique</p>
|
|
</div>
|
|
<div class="cards-grid">
|
|
<div class="card">
|
|
<div class="card-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="white">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/>
|
|
</svg>
|
|
</div>
|
|
<h3>Expérience</h3>
|
|
<p>Plus de 5 ans d'expérience dans l'administration système et réseau, avec une spécialisation en sécurité informatique.</p>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="white">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
|
|
</svg>
|
|
</div>
|
|
<h3>Formation</h3>
|
|
<p>Master RIE (Réseau Informatique en Entreprise) de Grenoble INP - Ensimag, avec une spécialisation en systèmes et réseaux.</p>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="white">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
|
|
</svg>
|
|
</div>
|
|
<h3>Localisation</h3>
|
|
<p>Basé à Grenoble, France. Disponible pour des opportunités professionnelles dans la région ou en télétravail.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Compétences Clés -->
|
|
<section class="section" style="background: var(--color-bg);">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<h2>Compétences Clés</h2>
|
|
<p>Domaines d'expertise technique</p>
|
|
</div>
|
|
<div class="cards-grid">
|
|
<div class="card">
|
|
<div class="card-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="white">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01"/>
|
|
</svg>
|
|
</div>
|
|
<h3>Systèmes & Réseaux</h3>
|
|
<p>Administration Linux, Windows Server, Active Directory, Switch, Routeur, Firewall</p>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="white">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
|
|
</svg>
|
|
</div>
|
|
<h3>Sécurité</h3>
|
|
<p>Supervision de la sécurité informatique, politiques de sécurité, gestion des incidents</p>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="white">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"/>
|
|
</svg>
|
|
</div>
|
|
<h3>Virtualisation</h3>
|
|
<p>Proxmox, gestion de serveurs virtuels, déploiement d'infrastructures virtualisées</p>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="white">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/>
|
|
</svg>
|
|
</div>
|
|
<h3>Développement</h3>
|
|
<p>Python, Bash, scripting, développement Android (Java)</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Projets -->
|
|
<section class="section">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<h2>Mes Projets</h2>
|
|
<p>Découvrez mes réalisations personnelles et professionnelles</p>
|
|
</div>
|
|
<div class="cards-grid">
|
|
<div class="card">
|
|
<div class="card-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="white">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01"/>
|
|
</svg>
|
|
</div>
|
|
<h3>Homelab Proxmox</h3>
|
|
<p>Infrastructure de virtualisation complète avec Proxmox pour héberger divers services et expérimentations techniques.</p>
|
|
<a href="projets.html#homelab" class="card-link">
|
|
En savoir plus
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="white">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"/>
|
|
</svg>
|
|
</div>
|
|
<h3>Boidelo</h3>
|
|
<p>Application Android de jeu de société multijoueur avec 150 questions, interface Material Design 3 et paramètres personnalisables.</p>
|
|
<a href="projets.html#boidelo" class="card-link">
|
|
En savoir plus
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="white">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"/>
|
|
</svg>
|
|
</div>
|
|
<h3>Custom Ore Gen</h3>
|
|
<p>Mod Minecraft 1.20.1 modifiant la distribution des ressources avec nouveaux minerais, outils et armures intermédiaires.</p>
|
|
<a href="projets.html#custom-ore-gen" class="card-link">
|
|
En savoir plus
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="white">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
|
</svg>
|
|
</div>
|
|
<h3>GeoRealmCraft</h3>
|
|
<p>Serveur Minecraft public avec infrastructure scalable, gestion de communauté et maintenance de modpack technique.</p>
|
|
<a href="projets.html#georealmcraft" class="card-link">
|
|
En savoir plus
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer class="footer">
|
|
<div class="container">
|
|
<p>© 2026 Roman Felden · Fait avec <span class="footer-heart">❤</span> à Grenoble, France</p>
|
|
<p style="margin-top: 0.5rem; font-size: 0.9rem;">
|
|
<a href="https://lanro.eu" target="_blank" style="color: white; opacity: 0.8; text-decoration: none;">lanro.eu</a>
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
// Mobile menu toggle functionality
|
|
(function() {
|
|
const toggle = document.querySelector('.navbar-toggle');
|
|
const menu = document.querySelector('.navbar-menu');
|
|
const overlay = document.querySelector('.navbar-overlay');
|
|
const body = document.body;
|
|
|
|
if (!toggle || !menu) return;
|
|
|
|
function toggleMenu() {
|
|
const isOpen = toggle.classList.contains('active');
|
|
toggle.classList.toggle('active');
|
|
menu.classList.toggle('active');
|
|
overlay.classList.toggle('active');
|
|
body.classList.toggle('menu-open');
|
|
toggle.setAttribute('aria-expanded', !isOpen);
|
|
toggle.setAttribute('aria-label', isOpen ? 'Ouvrir le menu de navigation' : 'Fermer le menu de navigation');
|
|
|
|
// Trap focus in menu when open
|
|
if (!isOpen) {
|
|
const menuLinks = menu.querySelectorAll('a');
|
|
if (menuLinks.length > 0) {
|
|
menuLinks[0].focus();
|
|
}
|
|
}
|
|
}
|
|
|
|
function closeMenu() {
|
|
if (toggle.classList.contains('active')) {
|
|
toggleMenu();
|
|
}
|
|
}
|
|
|
|
toggle.addEventListener('click', toggleMenu);
|
|
overlay.addEventListener('click', closeMenu);
|
|
|
|
// Close menu when clicking a link
|
|
const menuLinks = menu.querySelectorAll('a');
|
|
menuLinks.forEach(link => {
|
|
link.addEventListener('click', closeMenu);
|
|
});
|
|
|
|
// Close menu on Escape key
|
|
document.addEventListener('keydown', function(e) {
|
|
if (e.key === 'Escape' && toggle.classList.contains('active')) {
|
|
closeMenu();
|
|
toggle.focus();
|
|
}
|
|
});
|
|
|
|
// Handle tab trapping in menu
|
|
menu.addEventListener('keydown', function(e) {
|
|
if (e.key === 'Tab' && toggle.classList.contains('active')) {
|
|
const focusableElements = menu.querySelectorAll('a');
|
|
const firstElement = focusableElements[0];
|
|
const lastElement = focusableElements[focusableElements.length - 1];
|
|
|
|
if (e.shiftKey && document.activeElement === firstElement) {
|
|
e.preventDefault();
|
|
lastElement.focus();
|
|
} else if (!e.shiftKey && document.activeElement === lastElement) {
|
|
e.preventDefault();
|
|
firstElement.focus();
|
|
}
|
|
}
|
|
});
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|