Roman/site_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
1af353253a1f88804901adef151d3ffbc69a89f4
site_web/index.html
T
felden.r@grenoble.archi.fr 1af353253a first commit
2026-01-05 15:35:14 +01:00

572 lines
23 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Site personnel de Roman Felden - Coordinateur Sécurité & Systèmes Informatique à Grenoble">
<title>Roman Felden - 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">
<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;
}
.navbar-brand {
font-size: 1.5rem;
font-weight: 800;
color: var(--color-primary);
text-decoration: none;
display: flex;
align-items: center;
gap: 0.5rem;
}
.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-menu {
display: flex;
gap: 2rem;
list-style: none;
}
.navbar-menu a {
color: var(--color-text);
text-decoration: none;
font-weight: 600;
padding: 0.5rem 1rem;
border-radius: var(--radius-sm);
transition: all 0.3s ease;
}
.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) {
.hero h1 {
font-size: 2.5rem;
}
.hero p {
font-size: 1.1rem;
}
.navbar-menu {
gap: 1rem;
}
.navbar-menu a {
padding: 0.5rem;
font-size: 0.9rem;
}
.cards-grid {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<!-- Navigation -->
<nav class="navbar">
<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">
<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>
</ul>
</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 d'alcool 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>Modpack Minecraft avec 345 mods, génération de monde réaliste, colonies, machineries Create et véhicules.</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>© 2025 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>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink