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>
1428 lines
54 KiB
HTML
1428 lines
54 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="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: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: 1000px;
|
|
margin: 0 auto;
|
|
padding: 2rem 1rem;
|
|
}
|
|
|
|
.cv {
|
|
background: var(--color-bg);
|
|
border-radius: var(--radius-xl);
|
|
box-shadow: var(--shadow-xl);
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Header Section */
|
|
.header {
|
|
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 50%, #1e1b4b 100%);
|
|
color: white;
|
|
padding: 4rem 3rem;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.header::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%;
|
|
}
|
|
|
|
.header::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%;
|
|
}
|
|
|
|
.header-content {
|
|
position: relative;
|
|
z-index: 1;
|
|
max-width: 700px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.profile-section {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 2rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.avatar {
|
|
width: 140px;
|
|
height: 140px;
|
|
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: 3.5rem;
|
|
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);
|
|
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.header-info {
|
|
text-align: left;
|
|
}
|
|
|
|
.header-name {
|
|
font-size: 2.75rem;
|
|
font-weight: 800;
|
|
letter-spacing: -0.03em;
|
|
margin-bottom: 0.5rem;
|
|
background: linear-gradient(135deg, #ffffff 0%, rgba(255,255,255,0.8) 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
.header-title {
|
|
font-size: 1.35rem;
|
|
font-weight: 500;
|
|
opacity: 0.95;
|
|
color: rgba(255, 255, 255, 0.9);
|
|
}
|
|
|
|
.header-badges {
|
|
display: flex;
|
|
gap: 0.75rem;
|
|
margin-top: 1rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.badge {
|
|
background: rgba(255, 255, 255, 0.15);
|
|
backdrop-filter: blur(10px);
|
|
padding: 0.4rem 1rem;
|
|
border-radius: 50px;
|
|
font-size: 0.8rem;
|
|
font-weight: 500;
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.header-contact {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: 1.5rem;
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.contact-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.6rem;
|
|
font-size: 0.9rem;
|
|
opacity: 0.95;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
padding: 0.75rem 1.25rem;
|
|
border-radius: 50px;
|
|
backdrop-filter: blur(10px);
|
|
border: 1px solid rgba(255, 255, 255, 0.15);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.contact-item:hover {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.contact-item svg {
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
|
|
.contact-item a {
|
|
color: white;
|
|
text-decoration: none;
|
|
transition: opacity 0.2s;
|
|
}
|
|
|
|
/* Main Content */
|
|
.content {
|
|
padding: 3rem;
|
|
background: var(--color-bg-alt);
|
|
}
|
|
|
|
.section {
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
.section:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.section-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.section-icon {
|
|
width: 56px;
|
|
height: 56px;
|
|
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
|
|
border-radius: var(--radius-md);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
.section-icon svg {
|
|
width: 28px;
|
|
height: 28px;
|
|
color: white;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
color: var(--color-text);
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
/* Experience Items */
|
|
.experience-item {
|
|
background: var(--color-bg-card);
|
|
border-radius: var(--radius-lg);
|
|
padding: 1.75rem;
|
|
margin-bottom: 1.5rem;
|
|
box-shadow: var(--shadow-sm);
|
|
border: 1px solid var(--color-border-light);
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.experience-item::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 4px;
|
|
background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
|
|
}
|
|
|
|
.experience-item:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
|
|
.experience-item:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.experience-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
gap: 1rem;
|
|
margin-bottom: 1rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.experience-info {
|
|
flex: 1;
|
|
min-width: 250px;
|
|
}
|
|
|
|
.experience-title {
|
|
font-size: 1.2rem;
|
|
font-weight: 700;
|
|
color: var(--color-text);
|
|
margin-bottom: 0.35rem;
|
|
}
|
|
|
|
.experience-company {
|
|
color: var(--color-primary);
|
|
font-weight: 600;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.experience-location {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.35rem;
|
|
font-size: 0.875rem;
|
|
color: var(--color-text-muted);
|
|
margin-top: 0.25rem;
|
|
}
|
|
|
|
.experience-location svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
|
|
.experience-date-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
|
|
color: white;
|
|
padding: 0.5rem 1rem;
|
|
border-radius: 50px;
|
|
font-size: 0.8rem;
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.experience-date-badge svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
|
|
.experience-description {
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.experience-description ul {
|
|
list-style: none;
|
|
padding-left: 0;
|
|
}
|
|
|
|
.experience-description li {
|
|
position: relative;
|
|
padding-left: 1.75rem;
|
|
margin-bottom: 0.6rem;
|
|
font-size: 0.95rem;
|
|
color: var(--color-text-muted);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.experience-description li::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0.6rem;
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
|
|
}
|
|
|
|
/* Education */
|
|
.education-grid {
|
|
display: grid;
|
|
gap: 1.25rem;
|
|
}
|
|
|
|
.education-card {
|
|
background: var(--color-bg-card);
|
|
border-radius: var(--radius-lg);
|
|
padding: 1.5rem;
|
|
box-shadow: var(--shadow-sm);
|
|
border: 1px solid var(--color-border-light);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.education-card:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
.education-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
gap: 1rem;
|
|
margin-bottom: 0.5rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.education-school {
|
|
font-size: 1.1rem;
|
|
font-weight: 700;
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.education-date {
|
|
background: var(--color-bg-alt);
|
|
color: var(--color-text-muted);
|
|
padding: 0.35rem 0.85rem;
|
|
border-radius: 50px;
|
|
font-size: 0.8rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.education-degree {
|
|
color: var(--color-primary);
|
|
font-weight: 600;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
/* Skills */
|
|
.skills-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
.skill-category {
|
|
background: var(--color-bg-card);
|
|
border-radius: var(--radius-lg);
|
|
padding: 1.75rem;
|
|
box-shadow: var(--shadow-sm);
|
|
border: 1px solid var(--color-border-light);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.skill-category:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
.skill-category-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
|
|
.skill-icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
|
|
border-radius: var(--radius-sm);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.skill-icon svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
color: white;
|
|
}
|
|
|
|
.skill-category-title {
|
|
font-size: 1rem;
|
|
font-weight: 700;
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.skill-tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.6rem;
|
|
}
|
|
|
|
.skill-tag {
|
|
display: inline-block;
|
|
background: var(--color-bg-alt);
|
|
color: var(--color-text);
|
|
padding: 0.5rem 1rem;
|
|
border-radius: 50px;
|
|
font-size: 0.85rem;
|
|
font-weight: 600;
|
|
border: 2px solid var(--color-border-light);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.skill-tag:hover {
|
|
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
|
|
color: white;
|
|
border-color: transparent;
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
/* Languages */
|
|
.languages-container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
.language-card {
|
|
background: var(--color-bg-card);
|
|
border-radius: var(--radius-lg);
|
|
padding: 1.25rem 1.75rem;
|
|
box-shadow: var(--shadow-sm);
|
|
border: 1px solid var(--color-border-light);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.language-card:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
.language-flag {
|
|
width: 44px;
|
|
height: 44px;
|
|
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.language-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.language-name {
|
|
font-weight: 700;
|
|
color: var(--color-text);
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.language-level {
|
|
color: var(--color-text-muted);
|
|
font-size: 0.85rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Interests */
|
|
.interests-grid {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.interest-card {
|
|
background: linear-gradient(135deg, var(--color-bg-card) 0%, var(--color-bg-alt) 100%);
|
|
border-radius: var(--radius-lg);
|
|
padding: 1rem 1.5rem;
|
|
box-shadow: var(--shadow-sm);
|
|
border: 1px solid var(--color-border-light);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.interest-card:hover {
|
|
transform: translateY(-3px) scale(1.02);
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
.interest-icon {
|
|
width: 36px;
|
|
height: 36px;
|
|
background: linear-gradient(135deg, var(--color-accent) 0%, #f97316 100%);
|
|
border-radius: var(--radius-sm);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.interest-icon svg {
|
|
width: 18px;
|
|
height: 18px;
|
|
color: white;
|
|
}
|
|
|
|
.interest-name {
|
|
font-weight: 600;
|
|
color: var(--color-text);
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
/* Footer */
|
|
.footer {
|
|
text-align: center;
|
|
padding: 2rem 3rem;
|
|
background: linear-gradient(135deg, var(--color-bg-alt) 0%, var(--color-border-light) 100%);
|
|
border-top: 1px solid var(--color-border);
|
|
}
|
|
|
|
.footer-text {
|
|
font-size: 0.9rem;
|
|
color: var(--color-text-muted);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.footer-heart {
|
|
color: #ef4444;
|
|
animation: heartbeat 1.5s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes heartbeat {
|
|
0%, 100% { transform: scale(1); }
|
|
50% { transform: scale(1.1); }
|
|
}
|
|
|
|
/* Print Styles */
|
|
@media print {
|
|
body {
|
|
background: white;
|
|
padding: 0;
|
|
}
|
|
|
|
.container {
|
|
max-width: none;
|
|
}
|
|
|
|
.cv {
|
|
box-shadow: none;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.header {
|
|
background: var(--color-primary) !important;
|
|
-webkit-print-color-adjust: exact;
|
|
print-color-adjust: exact;
|
|
}
|
|
|
|
.navbar {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
.header {
|
|
padding: 3rem 2rem;
|
|
}
|
|
|
|
.profile-section {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.header-info {
|
|
text-align: center;
|
|
}
|
|
|
|
.header-name {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.header-title {
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.header-badges {
|
|
justify-content: center;
|
|
}
|
|
|
|
.content {
|
|
padding: 2rem 1.5rem;
|
|
}
|
|
|
|
.experience-header {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.skills-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.header-contact {
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.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" 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">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">
|
|
<main class="cv">
|
|
<!-- Header -->
|
|
<header class="header">
|
|
<div class="header-content">
|
|
<div class="profile-section">
|
|
<div class="avatar">RF</div>
|
|
<div class="header-info">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="header-contact">
|
|
<span class="contact-item">
|
|
<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.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" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
|
|
</svg>
|
|
Grenoble, France
|
|
</span>
|
|
<span class="contact-item">
|
|
<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="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"/>
|
|
</svg>
|
|
<a href="https://lanro.eu" target="_blank" rel="noopener">lanro.eu</a>
|
|
</span>
|
|
<span class="contact-item">
|
|
<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 noreferrer">LinkedIn</a>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="content">
|
|
<!-- Expériences Professionnelles -->
|
|
<section class="section">
|
|
<div class="section-header">
|
|
<div class="section-icon">
|
|
<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="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
|
|
</svg>
|
|
</div>
|
|
<h2 class="section-title">Expériences Professionnelles</h2>
|
|
</div>
|
|
|
|
<div class="experience-item">
|
|
<div class="experience-header">
|
|
<div class="experience-info">
|
|
<h3 class="experience-title">Coordinateur Sécurité et Système</h3>
|
|
<p class="experience-company">ENSAG - Ecole Nationale Supérieure d'Architecture de Grenoble</p>
|
|
<p class="experience-location">
|
|
<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.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" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
|
|
</svg>
|
|
Grenoble, Auvergne-Rhône-Alpes
|
|
</p>
|
|
</div>
|
|
<span class="experience-date-badge">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
|
|
</svg>
|
|
Sept. 2024 - Présent
|
|
</span>
|
|
</div>
|
|
<div class="experience-description">
|
|
<ul>
|
|
<li>Administration système Linux et gestion de parc informatique</li>
|
|
<li>Supervision de la sécurité informatique et des politiques de sécurité</li>
|
|
<li>Maintenance préventive et évolutive des infrastructures</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="experience-item">
|
|
<div class="experience-header">
|
|
<div class="experience-info">
|
|
<h3 class="experience-title">Administrateur Réseau et Systèmes en alternance</h3>
|
|
<p class="experience-company">Administration Réseau et Systèmes en alternance</p>
|
|
<p class="experience-location">
|
|
<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.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" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
|
|
</svg>
|
|
Hybrid
|
|
</p>
|
|
</div>
|
|
<span class="experience-date-badge">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
|
|
</svg>
|
|
Sept. 2022 - Présent
|
|
</span>
|
|
</div>
|
|
<div class="experience-description">
|
|
<ul>
|
|
<li>Gestion complète du matériel informatique et des infrastructures</li>
|
|
<li>Administration réseau (switchs, routeurs, firewall) et systèmes</li>
|
|
<li>Maintenance, support technique et résolution de incidents</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="experience-item">
|
|
<div class="experience-header">
|
|
<div class="experience-info">
|
|
<h3 class="experience-title">Administrateur Système en alternance</h3>
|
|
<p class="experience-company">Préfecture du Département de l'Ardèche</p>
|
|
<p class="experience-location">
|
|
<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.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" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
|
|
</svg>
|
|
Privas, Auvergne-Rhône-Alpes
|
|
</p>
|
|
</div>
|
|
<span class="experience-date-badge">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
|
|
</svg>
|
|
Sept. 2021 - Sept. 2022
|
|
</span>
|
|
</div>
|
|
<div class="experience-description">
|
|
<ul>
|
|
<li>Contrat en alternance - Administration système</li>
|
|
<li>Gestion des serveurs et des postes de travail</li>
|
|
<li>Support technique aux utilisateurs et maintenance</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="experience-item">
|
|
<div class="experience-header">
|
|
<div class="experience-info">
|
|
<h3 class="experience-title">Stagiaire Projet</h3>
|
|
<p class="experience-company">CONDUENT</p>
|
|
<p class="experience-location">
|
|
<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.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" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
|
|
</svg>
|
|
Guilherand-Granges
|
|
</p>
|
|
</div>
|
|
<span class="experience-date-badge">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
|
|
</svg>
|
|
Mai 2020 - Juil. 2020
|
|
</span>
|
|
</div>
|
|
<div class="experience-description">
|
|
<ul>
|
|
<li>Tests et comparatifs de routeurs et switchs pour équipement des bus de Lyon</li>
|
|
<li>Mise en place de tableaux comparatifs et protocoles de tests</li>
|
|
<li>Rédaction de documentations techniques pour décision d'équipement</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Formation -->
|
|
<section class="section">
|
|
<div class="section-header">
|
|
<div class="section-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path d="M12 14l9-5-9-5-9 5 9 5z"/>
|
|
<path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"/>
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"/>
|
|
</svg>
|
|
</div>
|
|
<h2 class="section-title">Formation</h2>
|
|
</div>
|
|
|
|
<div class="education-grid">
|
|
<div class="education-card">
|
|
<div class="education-header">
|
|
<div>
|
|
<h3 class="education-school">Grenoble INP - Ensimag</h3>
|
|
<p class="education-degree">Master Réseau Informatique en Entreprise</p>
|
|
</div>
|
|
<span class="education-date">2022 - 2024</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="education-card">
|
|
<div class="education-header">
|
|
<div>
|
|
<h3 class="education-school">Grenoble INP - Ensimag</h3>
|
|
<p class="education-degree">Master 1 (M1) RIE</p>
|
|
</div>
|
|
<span class="education-date">2022 - 2023</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="education-card">
|
|
<div class="education-header">
|
|
<div>
|
|
<h3 class="education-school">UGA IUT1</h3>
|
|
<p class="education-degree">Licence Professionnel Réseaux & Télécommunications</p>
|
|
</div>
|
|
<span class="education-date">2021 - 2022</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="education-card">
|
|
<div class="education-header">
|
|
<div>
|
|
<h3 class="education-school">UGA IUT1</h3>
|
|
<p class="education-degree">DUT Réseaux & Télécommunications</p>
|
|
</div>
|
|
<span class="education-date">2018 - 2020</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Compétences -->
|
|
<section class="section">
|
|
<div class="section-header">
|
|
<div class="section-icon">
|
|
<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="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
|
|
</svg>
|
|
</div>
|
|
<h2 class="section-title">Compétences</h2>
|
|
</div>
|
|
|
|
<div class="skills-grid">
|
|
<div class="skill-category">
|
|
<div class="skill-category-header">
|
|
<div class="skill-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<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>
|
|
<h4 class="skill-category-title">Systèmes & Réseaux</h4>
|
|
</div>
|
|
<div class="skill-tags">
|
|
<span class="skill-tag">Linux</span>
|
|
<span class="skill-tag">Windows Server</span>
|
|
<span class="skill-tag">Active Directory</span>
|
|
<span class="skill-tag">Administration Réseau</span>
|
|
<span class="skill-tag">Sécurité</span>
|
|
<span class="skill-tag">Virtualisation</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="skill-category">
|
|
<div class="skill-category-header">
|
|
<div class="skill-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<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>
|
|
<h4 class="skill-category-title">Infrastructure</h4>
|
|
</div>
|
|
<div class="skill-tags">
|
|
<span class="skill-tag">Switch</span>
|
|
<span class="skill-tag">Routeur</span>
|
|
<span class="skill-tag">Firewall</span>
|
|
<span class="skill-tag">Hardware PC</span>
|
|
<span class="skill-tag">Mac</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="skill-category">
|
|
<div class="skill-category-header">
|
|
<div class="skill-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<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>
|
|
<h4 class="skill-category-title">Protocoles & Outils</h4>
|
|
</div>
|
|
<div class="skill-tags">
|
|
<span class="skill-tag">DNS</span>
|
|
<span class="skill-tag">TCP/IP</span>
|
|
<span class="skill-tag">Routing</span>
|
|
<span class="skill-tag">Python</span>
|
|
<span class="skill-tag">Bash</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Langues -->
|
|
<section class="section">
|
|
<div class="section-header">
|
|
<div class="section-icon">
|
|
<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="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129"/>
|
|
</svg>
|
|
</div>
|
|
<h2 class="section-title">Langues</h2>
|
|
</div>
|
|
|
|
<div class="languages-container">
|
|
<div class="language-card">
|
|
<div class="language-flag">🇫🇷</div>
|
|
<div class="language-info">
|
|
<span class="language-name">Français</span>
|
|
<span class="language-level">Natif</span>
|
|
</div>
|
|
</div>
|
|
<div class="language-card">
|
|
<div class="language-flag">🇬🇧</div>
|
|
<div class="language-info">
|
|
<span class="language-name">Anglais</span>
|
|
<span class="language-level">Technique</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Centres d'intérêt -->
|
|
<section class="section">
|
|
<div class="section-header">
|
|
<div class="section-icon">
|
|
<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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/>
|
|
</svg>
|
|
</div>
|
|
<h2 class="section-title">Centres d'Intérêt</h2>
|
|
</div>
|
|
|
|
<div class="interests-grid">
|
|
<div class="interest-card">
|
|
<div class="interest-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"/>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"/>
|
|
</svg>
|
|
</div>
|
|
<span class="interest-name">Photographie & Vidéo</span>
|
|
</div>
|
|
|
|
<div class="interest-card">
|
|
<div class="interest-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
|
|
</svg>
|
|
</div>
|
|
<span class="interest-name">Hardware & Composants</span>
|
|
</div>
|
|
|
|
<div class="interest-card">
|
|
<div class="interest-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
|
|
</svg>
|
|
</div>
|
|
<span class="interest-name">Moto</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<footer class="footer">
|
|
<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>
|