Fix accessibility and mobile issues, add SEO meta tags
- 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>
This commit is contained in:
felden.r@grenoble.archi.fr
@@ -4,10 +4,26 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="CV de Roman Felden - Coordinateur sécurité et 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/cv-roman-felden.html">
|
||||
<meta property="og:title" content="CV - Roman Felden | Coordinateur Sécurité & Systèmes">
|
||||
<meta property="og:description" content="CV complet de Roman Felden, Coordinateur Sécurité & Systèmes Informatique à Grenoble. Expériences, formations, compétences et centres d'intérêt.">
|
||||
<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/cv-roman-felden.html">
|
||||
<meta property="twitter:title" content="CV - Roman Felden | Coordinateur Sécurité & Systèmes">
|
||||
<meta property="twitter:description" content="CV complet de Roman Felden, Coordinateur Sécurité & Systèmes Informatique à Grenoble. Expériences, formations, compétences et centres d'intérêt.">
|
||||
<meta property="twitter:image" content="https://lanro.eu/og-image.jpg">
|
||||
|
||||
<title>CV - 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=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
|
||||
<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,
|
||||
@@ -742,6 +758,49 @@
|
||||
|
||||
.contact-item {
|
||||
justify-content: center;
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
.skill-tag,
|
||||
.badge {
|
||||
min-height: 44px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* 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) {
|
||||
.header {
|
||||
padding: 2.5rem 1.5rem;
|
||||
}
|
||||
|
||||
.header-name {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 1.5rem 1rem;
|
||||
}
|
||||
|
||||
.contact-item {
|
||||
padding: 0.75rem 1rem;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -758,10 +817,10 @@
|
||||
<h1 class="header-name">Roman FELDEN</h1>
|
||||
<p class="header-title">Coordinateur Sécurité & Systèmes Informatique</p>
|
||||
<div class="header-badges">
|
||||
<span class="badge">🎓 Master RIE</span>
|
||||
<span class="badge">🔒 Sécurité</span>
|
||||
<span class="badge">🌐 Réseaux</span>
|
||||
<span class="badge">💻 Systèmes</span>
|
||||
<span class="badge" aria-label="Master RIE">Master RIE</span>
|
||||
<span class="badge">Sécurité</span>
|
||||
<span class="badge">Réseaux</span>
|
||||
<span class="badge">Systèmes</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -783,7 +842,7 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
|
||||
</svg>
|
||||
<a href="https://www.linkedin.com/in/roman-felden" target="_blank" rel="noopener">LinkedIn</a>
|
||||
<a href="https://www.linkedin.com/in/roman-felden" target="_blank" rel="noopener noreferrer">LinkedIn</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1184,7 +1243,7 @@
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="footer">
|
||||
<p class="footer-text">Mis à jour en Décembre 2025 · Fait avec <span class="footer-heart">❤</span> à Grenoble, France</p>
|
||||
<p class="footer-text">Mis à jour en Janvier 2026 · Fait avec <span class="footer-heart">❤</span> à Grenoble, France</p>
|
||||
</footer>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
+286
-16
@@ -4,10 +4,48 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="CV de Roman Felden - Coordinateur sécurité et 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/cv.html">
|
||||
<meta property="og:title" content="CV - Roman Felden | Coordinateur Sécurité & Systèmes">
|
||||
<meta property="og:description" content="CV complet de Roman Felden, Coordinateur Sécurité & Systèmes Informatique à Grenoble. Expériences, formations, compétences et centres d'intérêt.">
|
||||
<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/cv.html">
|
||||
<meta property="twitter:title" content="CV - Roman Felden | Coordinateur Sécurité & Systèmes">
|
||||
<meta property="twitter:description" content="CV complet de Roman Felden, Coordinateur Sécurité & Systèmes Informatique à Grenoble. Expériences, formations, compétences et centres d'intérêt.">
|
||||
<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"],
|
||||
"alumniOf": "Grenoble INP - Ensimag"
|
||||
}
|
||||
</script>
|
||||
|
||||
<title>CV - 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=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
|
||||
<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,
|
||||
@@ -70,6 +108,7 @@
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
@@ -80,6 +119,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
z-index: 1002;
|
||||
}
|
||||
|
||||
.navbar-brand span {
|
||||
@@ -89,6 +129,76 @@
|
||||
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;
|
||||
@@ -99,9 +209,14 @@
|
||||
color: var(--color-text);
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
padding: 0.5rem 1rem;
|
||||
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,
|
||||
@@ -703,13 +818,64 @@
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.navbar {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.navbar-toggle {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.navbar-menu {
|
||||
gap: 1rem;
|
||||
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 {
|
||||
padding: 0.5rem;
|
||||
font-size: 0.9rem;
|
||||
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;
|
||||
}
|
||||
|
||||
.header {
|
||||
@@ -755,26 +921,62 @@
|
||||
|
||||
.contact-item {
|
||||
justify-content: center;
|
||||
min-height: 44px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 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) {
|
||||
.navbar-menu {
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.header {
|
||||
padding: 2.5rem 1.5rem;
|
||||
}
|
||||
|
||||
.header-name {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Navigation -->
|
||||
<nav class="navbar">
|
||||
<nav class="navbar" role="navigation" aria-label="Navigation principale">
|
||||
<div class="navbar-container">
|
||||
<a href="index.html" class="navbar-brand">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<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>
|
||||
<ul class="navbar-menu">
|
||||
<li><a href="index.html">Accueil</a></li>
|
||||
<li><a href="cv.html" class="active">CV</a></li>
|
||||
<li><a href="projets.html">Projets</a></li>
|
||||
<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">Accueil</a></li>
|
||||
<li role="none"><a href="cv.html" role="menuitem" class="active" aria-current="page">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>
|
||||
|
||||
<div class="container">
|
||||
@@ -813,7 +1015,7 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
|
||||
</svg>
|
||||
<a href="https://www.linkedin.com/in/roman-felden" target="_blank" rel="noopener">LinkedIn</a>
|
||||
<a href="https://www.linkedin.com/in/roman-felden" target="_blank" rel="noopener noreferrer">LinkedIn</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1070,8 +1272,6 @@
|
||||
<span class="skill-tag">Bash</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -1149,9 +1349,79 @@
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="footer">
|
||||
<p class="footer-text">Mis à jour en Décembre 2025 · Fait avec <span class="footer-heart">❤</span> à Grenoble, France</p>
|
||||
<p class="footer-text">Mis à jour en Janvier 2026 · Fait avec <span class="footer-heart">❤</span> à Grenoble, France</p>
|
||||
</footer>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
||||
+337
-16
@@ -4,10 +4,47 @@
|
||||
<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:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
|
||||
<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,
|
||||
@@ -70,6 +107,7 @@
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
@@ -80,6 +118,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
z-index: 1002;
|
||||
}
|
||||
|
||||
.navbar-brand span {
|
||||
@@ -89,6 +128,76 @@
|
||||
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;
|
||||
@@ -99,9 +208,14 @@
|
||||
color: var(--color-text);
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
padding: 0.5rem 1rem;
|
||||
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,
|
||||
@@ -334,45 +448,182 @@
|
||||
|
||||
/* 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: 2.5rem;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.hero p {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.navbar-menu {
|
||||
gap: 1rem;
|
||||
.hero {
|
||||
padding: 6rem 1.5rem 4rem;
|
||||
}
|
||||
|
||||
.navbar-menu a {
|
||||
padding: 0.5rem;
|
||||
font-size: 0.9rem;
|
||||
.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">
|
||||
<nav class="navbar" role="navigation" aria-label="Navigation principale">
|
||||
<div class="navbar-container">
|
||||
<a href="index.html" class="navbar-brand">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<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>
|
||||
<ul class="navbar-menu">
|
||||
<li><a href="index.html" class="active">Accueil</a></li>
|
||||
<li><a href="cv.html">CV</a></li>
|
||||
<li><a href="projets.html">Projets</a></li>
|
||||
<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 -->
|
||||
@@ -561,11 +812,81 @@
|
||||
<!-- Footer -->
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<p>© 2025 Roman Felden · Fait avec <span class="footer-heart">❤</span> à Grenoble, France</p>
|
||||
<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>
|
||||
|
||||
+285
-13
@@ -4,10 +4,26 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="Projets de Roman Felden - Homelab, Android, Minecraft modding">
|
||||
<meta name="theme-color" content="#4f46e5">
|
||||
|
||||
<!-- Open Graph / Facebook -->
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="https://lanro.eu/projets.html">
|
||||
<meta property="og:title" content="Projets - Roman Felden">
|
||||
<meta property="og:description" content="Découvrez les projets de Roman Felden : Homelab Proxmox, Boidelo Android, Custom Ore Gen Minecraft mod, GeoRealmCraft serveur.">
|
||||
<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/projets.html">
|
||||
<meta property="twitter:title" content="Projets - Roman Felden">
|
||||
<meta property="twitter:description" content="Découvrez les projets de Roman Felden : Homelab Proxmox, Boidelo Android, Custom Ore Gen Minecraft mod, GeoRealmCraft serveur.">
|
||||
<meta property="twitter:image" content="https://lanro.eu/og-image.jpg">
|
||||
|
||||
<title>Projets - Roman Felden</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:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
|
||||
<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,
|
||||
@@ -70,6 +86,7 @@
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
@@ -80,6 +97,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
z-index: 1002;
|
||||
}
|
||||
|
||||
.navbar-brand span {
|
||||
@@ -89,6 +107,76 @@
|
||||
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;
|
||||
@@ -99,9 +187,14 @@
|
||||
color: var(--color-text);
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
padding: 0.5rem 1rem;
|
||||
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,
|
||||
@@ -311,13 +404,64 @@
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.navbar {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.navbar-toggle {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.navbar-menu {
|
||||
gap: 1rem;
|
||||
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 {
|
||||
padding: 0.5rem;
|
||||
font-size: 0.9rem;
|
||||
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;
|
||||
}
|
||||
|
||||
.page-header h1 {
|
||||
@@ -333,28 +477,86 @@
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.project-icon {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.project-title h2 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.project-badges {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.feature-item {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
margin: 0 auto 0.5rem;
|
||||
}
|
||||
|
||||
.tech-stack {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* 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) {
|
||||
.navbar-menu {
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.page-header h1 {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
.project-section {
|
||||
padding: 1.5rem 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Navigation -->
|
||||
<nav class="navbar">
|
||||
<nav class="navbar" role="navigation" aria-label="Navigation principale">
|
||||
<div class="navbar-container">
|
||||
<a href="index.html" class="navbar-brand">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<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>
|
||||
<ul class="navbar-menu">
|
||||
<li><a href="index.html">Accueil</a></li>
|
||||
<li><a href="cv.html">CV</a></li>
|
||||
<li><a href="projets.html" class="active">Projets</a></li>
|
||||
<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">Accueil</a></li>
|
||||
<li role="none"><a href="cv.html" role="menuitem">CV</a></li>
|
||||
<li role="none"><a href="projets.html" role="menuitem" class="active" aria-current="page">Projets</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="navbar-overlay" aria-hidden="true"></div>
|
||||
</nav>
|
||||
|
||||
<div class="container">
|
||||
@@ -698,11 +900,81 @@
|
||||
<!-- Footer -->
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<p>© 2025 Roman Felden · Fait avec <span class="footer-heart">❤</span> à Grenoble, France</p>
|
||||
<p>© 2026 Roman Felden · Fait avec <span class="footer-heart">❤</span> à Grenoble, France</p>
|
||||
<p style="margin-top: 0.5rem; font-size: 0.9rem; opacity: 0.8;">
|
||||
<a href="index.html" style="color: white; text-decoration: none; opacity: 0.8;">Retour à l'accueil</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>
|
||||
|
||||
Reference in New Issue
Block a user